chore(release): 1.1.2

chore(deps): bump
chore: split props for Dropdown, ContextMenu and Popover
2026-01-15 20:48:12 +01:00 · 2023-02-28 11:58:28 +01:00 · 2023-02-28 10:50:50 +01:00 · 2023-02-24 17:33:57 +01:00 · 2023-02-22 15:59:02 +01:00 · 2023-02-22 12:31:21 +01:00
26 changed files with 882 additions and 542 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,37 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+### [1.1.2](https://github.com/nuxtlabs/ui/compare/v1.1.1...v1.1.2) (2023-02-28)
+
+
+### Bug Fixes
+
+* **Tooltip:** truncate ([d08e64d](https://github.com/nuxtlabs/ui/commit/d08e64d53fa439f34d51909bcb6812f1bcd95d83))
+* **VerticalNavigation:** links `to` type ([7970aef](https://github.com/nuxtlabs/ui/commit/7970aefcb032ce01fcb11e9285fa61ce87f59519))
+
+### [1.1.1](https://github.com/nuxtlabs/ui/compare/v1.1.0...v1.1.1) (2023-02-20)
+
+## [1.1.0](https://github.com/nuxtlabs/ui/compare/v1.0.0...v1.1.0) (2023-02-17)
+
+
+### Features
+
+* **CommandPalette:** handle async search for specific groups ([efa9674](https://github.com/nuxtlabs/ui/commit/efa9674815ab4de756079690da0a381c3703d564))
+
+
+### Bug Fixes
+
+* **CommandPalette:** types ([4702a4f](https://github.com/nuxtlabs/ui/commit/4702a4f10379201c167cc52099519778756a5780))
+
+## [1.0.0](https://github.com/nuxtlabs/ui/compare/v0.2.1...v1.0.0) (2023-02-17)
+
+
+### Features
+
+* migrate to `@egoist/tailwindcss-icons` ([ee33522](https://github.com/nuxtlabs/ui/commit/ee3352278cf03fdd12f2a4663b403052de3f089a))
+
+### [0.2.1](https://github.com/nuxtlabs/ui/compare/v0.2.0...v0.2.1) (2023-02-16)
+
 ## [0.2.0](https://github.com/nuxtlabs/ui/compare/v0.1.39...v0.2.0) (2023-02-16)

 ### [0.1.39](https://github.com/nuxtlabs/ui/compare/v0.1.38...v0.1.39) (2023-02-16)
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -9,11 +9,11 @@
            </NuxtLink>
          </div>

-          <div class="flex items-center gap-3">
+          <div class="flex items-center">
            <ColorScheme placeholder="" tag="span">
-              <UButton variant="transparent" :icon="colorMode.value === 'dark' ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark" />
+              <UButton variant="transparent" :icon="colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'" @click="toggleDark" />
            </ColorScheme>
-            <UButton to="https://github.com/nuxtlabs/ui" target="_blank" variant="transparent" icon="fa-brands:github" />
+            <UButton to="https://github.com/nuxtlabs/ui" target="_blank" variant="transparent" icon="i-mdi-github" />
          </div>
        </div>
      </UContainer>
@@ -84,7 +84,7 @@ const sections = [
  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
  { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
  { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }, { label: 'CommandPalette', to: '/components/CommandPalette' }] },
-  { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
+  { label: 'Overlays', links: [{ label: 'ContextMenu', to: '/components/ContextMenu' }, { label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>

--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -3,7 +3,15 @@ import nuxtUI from '../src/module'

 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en'
+      }
+    }
+  },
  modules: [
+    // @ts-ignore
    nuxtUI
  ],
  components: {
@@ -16,6 +24,7 @@ export default defineNuxtConfig({
    },
    preset: {
    },
+    icons: ['heroicons', 'mdi'],
    tailwindcss: {
      theme: {
        extend: {
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -35,7 +35,7 @@

          <UButton
            class="absolute top-0 right-0"
-            :icon="copied ? 'heroicons-outline:clipboard-check' : 'heroicons-outline:clipboard-copy'"
+            :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
            variant="transparent"
            size="sm"
            :custom-class="copied ? '!text-green-500' : ''"
@@ -56,7 +56,6 @@
            v-if="prop.type === 'Boolean'"
            v-model="prop.value"
            :name="prop.key"
-            :label="prop.key"
          />
          <USelect
            v-else-if="prop.values"
@@ -121,6 +120,31 @@ const toggle = ref(false)
 const modal = ref(false)
 const slideover = ref(false)

+const x = ref(0)
+const y = ref(0)
+const isContextMenuOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+onMounted(() => {
+  document.addEventListener('mousemove', ({ clientX, clientY }) => {
+    x.value = clientX
+    y.value = clientY
+  })
+})
+
+function openContextMenu () {
+  const top = unref(y)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+  isContextMenuOpen.value = true
+}
+
 const defaultProps = {
  Button: {
    label: 'Button text'
@@ -132,7 +156,9 @@ const defaultProps = {
    title: 'A new software update is available. See what’s new in version 2.0.4.'
  },
  AlertDialog: {
-    title: 'Are you sure you want to close this modal?',
+    icon: 'i-heroicons-exclamation-triangle',
+    title: 'Deactivate account',
+    description: 'Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.',
    modelValue: alertDialog,
    'onUpdate:modelValue': (v) => { alertDialog.value = v },
    component: {
@@ -154,21 +180,21 @@ const defaultProps = {
    items: [
      [{
        label: 'Edit',
-        icon: 'heroicons-solid:pencil'
+        icon: 'i-heroicons-pencil-square-20-solid'
      }, {
        label: 'Duplicate',
-        icon: 'heroicons-solid:duplicate'
+        icon: 'i-heroicons-document-duplicate-20-solid'
      }],
      [{
        label: 'Archive',
-        icon: 'heroicons-solid:archive'
+        icon: 'i-heroicons-archive-box-20-solid'
      }, {
        label: 'Move',
-        icon: 'heroicons-solid:external-link'
+        icon: 'i-heroicons-arrow-right-circle-20-solid'
      }],
      [{
        label: 'Delete',
-        icon: 'heroicons-solid:trash'
+        icon: 'i-heroicons-trash-20-solid'
      }]
    ]
  },
@@ -176,22 +202,22 @@ const defaultProps = {
    links: [
      {
        label: 'Home',
-        icon: 'heroicons-outline:home',
+        icon: 'i-heroicons-home',
        to: '/'
      },
      {
        label: 'Examples',
-        icon: 'heroicons-outline:book-open',
+        icon: 'i-heroicons-book-open',
        to: '/examples'
      },
      {
        label: 'Migration',
-        icon: 'heroicons-outline:refresh',
+        icon: 'i-heroicons-arrow-path',
        to: '/migration'
      },
      {
        label: 'External link',
-        icon: 'heroicons-outline:external-link',
+        icon: 'i-heroicons-link',
        to: 'https://google.fr',
        target: '_blank'
      }
@@ -207,7 +233,7 @@ const defaultProps = {
    }]
  },
  Icon: {
-    name: 'heroicons-outline:bell'
+    name: 'i-heroicons-bell'
  },
  Input: {
    name: 'input',
@@ -259,6 +285,31 @@ const defaultProps = {
    title: 'Notification title',
    callback: 'console.log(\'Timer expired\')'
  },
+  ContextMenu: {
+    modelValue: isContextMenuOpen,
+    'onUpdate:modelValue': (v) => { isContextMenuOpen.value = v },
+    virtualElement,
+    component: {
+      name: 'Card',
+      props: {
+        variant: 'secondary',
+        label: 'Open context menu',
+        onClick: () => { isContextMenuOpen.value = false },
+        onContextmenu: (e) => {
+          e?.preventDefault()
+          openContextMenu()
+        },
+        class: 'relative w-[300px] h-[100px]'
+      }
+    },
+    slots: {
+      default: {
+        tag: 'div',
+        html: 'Context menu content',
+        class: 'rounded border u-border-gray-200 p-2'
+      }
+    }
+  },
  Modal: {
    modelValue: modal,
    'onUpdate:modelValue': (v) => { modal.value = v },
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -26,7 +26,7 @@
        Button:
      </div>

-      <UButton variant="primary" icon="heroicons-outline:mail">
+      <UButton variant="primary" icon="i-heroicons-envelope">
        Button text
      </UButton>
    </div>
@@ -43,7 +43,7 @@
      <UModal v-model="isModalOpen" @submit.prevent="onSubmit">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-            <IconCSS name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
+            <UIcon name="i-heroicons-exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium u-text-gray-900">
@@ -73,7 +73,7 @@
      </div>

      <UDropdown v-slot="{ open }" :items="dropdownItems" placement="bottom-start">
-        <UButton variant="white" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
+        <UButton variant="white" :icon="open ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'" trailing icon-class="transition">
          Open menu!
        </UButton>
      </UDropdown>
@@ -98,13 +98,13 @@

      <UPopover wrapper-class="inline-block relative">
        <template #default="{ open }">
-          <UButton variant="secondary" :icon="open ? 'heroicons-solid:chevron-up' : 'heroicons-solid:chevron-down'" trailing icon-class="transition">
+          <UButton variant="secondary" :icon="open ? 'i-heroicons-chevron-up-20-solid-20' : 'i-heroicons-chevron-down-20-solid'" trailing icon-class="transition">
            Open popover!
          </UButton>
        </template>

        <template #panel>
-          <div class="p-4 u-bg-white border u-border-gray-200 rounded-md">
+          <div class="p-2">
            Panel
          </div>
        </template>
@@ -117,7 +117,7 @@
      </div>

      <UTooltip text="Hello tooltip!" :shortcuts="['⌘', 'G']">
-        <IconCSS name="heroicons-outline:information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
+        <UIcon name="i-heroicons-information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
      </UTooltip>
    </div>

@@ -125,7 +125,7 @@
      <div class="font-medium text-sm mb-1 u-text-gray-700">
        Notifications:
      </div>
-      <UButton icon="heroicons-outline:bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
+      <UButton icon="i-heroicons-bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
    </div>

    <div>
@@ -133,11 +133,11 @@
        Context menu:
      </div>

-      <UCard ref="contextMenuRef" class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="openContextMenu">
+      <UCard class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="openContextMenu">
        <UContextMenu v-model="isContextMenuOpen" :virtual-element="virtualElement" width-class="w-48">
-          <UCard @click.stop>
+          <div class="p-2">
            Menu
-          </UCard>
+          </div>
        </UContextMenu>
      </UCard>
    </div>
@@ -149,18 +149,13 @@

      <UCard body-class="">
        <UCommandPalette
-          v-model="form.persons"
-          multiple
          :placeholder="false"
          :options="{
            fuseOptions: {
              includeMatches: true
            }
          }"
-          :groups="[{
-            key: 'persons',
-            commands: people
-          }]"
+          :groups="commandPaletteGroups"
          command-attribute="name"
        />
      </UCard>
@@ -174,7 +169,7 @@
      <UCard body-class="flex">
        <div class="flex-1 px-4 py-5 sm:p-6 space-y-3">
          <UFormGroup label="Email" name="email" required>
-            <UInput v-model="form.email" type="email" name="email" required icon="heroicons-outline:mail" />
+            <UInput v-model="form.email" type="email" name="email" required icon="i-heroicons-mail" />
          </UFormGroup>

          <UFormGroup label="Description" name="description">
@@ -189,7 +184,7 @@
              placeholder="Select a person"
              text-attribute="name"
              value-attribute="id"
-              icon="heroicons-outline:user"
+              icon="i-heroicons-user"
            />
          </UFormGroup>

@@ -198,7 +193,7 @@
          </UFormGroup>

          <UFormGroup label="Toggle" name="toggle">
-            <UToggle v-model="form.toggle" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
+            <UToggle v-model="form.toggle" name="toggle" icon-off="i-heroicons-x-mark-20-solid" icon-on="i-heroicons-check-20-solid" />
          </UFormGroup>

          <UFormGroup label="Notifications" label-class="text-base font-medium u-text-gray-900" description="How do you prefer to receive notifications?">
@@ -261,7 +256,19 @@ const { $toast } = useNuxtApp()
 const x = ref(0)
 const y = ref(0)
 const isContextMenuOpen = ref(false)
-const contextMenuRef = ref(null)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+const commandPaletteGroups = computed(() => ([{
+  key: 'people',
+  commands: people.value
+}, {
+  key: 'search',
+  label: q => q && `Search results for "${q}"...`,
+  search: async (q) => {
+    if (!q) { return [] }
+    return await $fetch(`https://jsonplaceholder.typicode.com/users?q=${q}`)
+  }
+}]))

 onMounted(() => {
  document.addEventListener('mousemove', ({ clientX, clientY }) => {
@@ -270,8 +277,6 @@ onMounted(() => {
  })
 })

-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
 function openContextMenu () {
  const top = unref(y)
  const left = unref(x)
@@ -302,27 +307,27 @@ function onSubmit () {
 const dropdownItems = [
  [{
    label: 'Edit',
-    icon: 'heroicons-solid:pencil',
+    icon: 'i-heroicons-pencil-square-20-solid',
    click: (e) => {
      e.preventDefault()
      onClick()
    }
  }, {
    label: 'Duplicate',
-    icon: 'heroicons-solid:duplicate'
+    icon: 'i-heroicons-document-duplicate-20-solid'
  }],
  [{
    label: 'Archive',
-    icon: 'heroicons-solid:archive'
+    icon: 'i-heroicons-archive-box-20-solid'
  }, {
    label: 'Move',
-    icon: 'heroicons-solid:external-link',
+    icon: 'i-heroicons-arrow-right-circle-20-solid',
    to: 'https://www.google.fr',
    target: '_blank'
  }],
  [{
    label: 'Delete',
-    icon: 'heroicons-solid:trash'
+    icon: 'i-heroicons-trash-20-solid'
  }]
 ]

@@ -335,7 +340,7 @@ const customDropdownItems = [
  }],
  [{
    label: 'About',
-    icon: 'heroicons-solid:plus',
+    icon: 'i-heroicons-plus-20-solid',
    to: '/about'
  }]
 ]
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@nuxthq/ui",
-  "version": "0.2.0",
+  "version": "1.1.2",
  "repository": "https://github.com/nuxtlabs/ui",
  "license": "MIT",
  "exports": {
@@ -25,39 +25,34 @@
    "release": "yarn lint && standard-version && git push --follow-tags"
  },
  "dependencies": {
-    "@headlessui/vue": "^1.7.10",
-    "@iconify/vue": "^4.1.0",
-    "@nuxt/kit": "^3.2.0",
+    "@egoist/tailwindcss-icons": "^1.0.7",
+    "@headlessui/vue": "^1.7.11",
+    "@iconify-json/heroicons": "^1.1.10",
+    "@nuxt/kit": "^3.2.2",
    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.4.0",
+    "@nuxtjs/tailwindcss": "^6.4.1",
    "@popperjs/core": "^2.11.6",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^9.12.0",
-    "@vueuse/integrations": "^9.12.0",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/integrations": "^9.13.0",
    "defu": "^6.1.2",
    "fuse.js": "^6.6.2",
    "lodash-es": "^4.17.21",
-    "nuxt-icon": "^0.3.1",
-    "tailwindcss": "^3.2.6"
+    "tailwindcss": "^3.2.7"
  },
  "devDependencies": {
+    "@iconify-json/mdi": "^1.1.47",
    "@nuxt/module-builder": "^0.2.1",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.13.0",
-    "eslint": "^8.34.0",
-    "nuxt": "^3.2.0",
+    "@types/node": "^18.14.2",
+    "eslint": "^8.35.0",
+    "nuxt": "^3.2.2",
    "standard-version": "^9.5.0",
-    "unbuild": "^1.1.1",
-    "vue-tsc": "^1.1.0"
-  },
-  "build": {
-    "externals": [
-      "tailwindcss",
-      "tailwindcss/colors.js"
-    ]
+    "unbuild": "^1.1.2",
+    "vue-tsc": "^1.2.0"
  }
 }
--- a/src/module.ts
+++ b/src/module.ts
@@ -2,6 +2,7 @@ import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, addTe
 import { defu } from 'defu'
 import colors from 'tailwindcss/colors.js'
 import type { Config } from 'tailwindcss'
+import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
 import { name, version } from '../package.json'
 import { colorsAsRegex, excludeColors } from './runtime/utils/colors'
 import defaultPreset from './runtime/presets/default'
@@ -39,6 +40,8 @@ export interface ModuleOptions {

  colors?: ColorsOptions

+  icons: string[]
+
  tailwindcss?: Partial<Config>
 }

@@ -49,6 +52,7 @@ const defaults = {
    primary: 'indigo',
    gray: 'gray'
  },
+  icons: ['heroicons'],
  tailwindcss: {
    theme: {}
  }
@@ -72,7 +76,7 @@ export default defineNuxtModule<ModuleOptions>({
    // Transpile runtime
    const runtimeDir = resolve('./runtime')
    nuxt.options.build.transpile.push(runtimeDir)
-    nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue', '@iconify/vue')
+    nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue')

    // @ts-ignore
    nuxt.hook('tailwindcss:config', function (tailwindConfig: TailwindConfig) {
@@ -108,6 +112,9 @@ export default defineNuxtModule<ModuleOptions>({
        variants: ['focus']
      }])

+      tailwindConfig.plugins = tailwindConfig.plugins || []
+      tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
+
      const ui: object = defu(preset, defaultPreset(variantColors))

      addTemplate({
@@ -121,9 +128,6 @@ export default defineNuxtModule<ModuleOptions>({
      })
    })

-    nuxt.options.appConfig.nuxtIcon = defu(nuxt.options.appConfig.nuxtIcon, { size: false })
-
-    await installModule('nuxt-icon')
    await installModule('@nuxtjs/color-mode', { classSuffix: '' })
    await installModule('@nuxtjs/tailwindcss', {
      viewer: false,
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -6,14 +6,14 @@
    :aria-label="ariaLabel"
    v-bind="buttonProps"
  >
-    <IconCSS v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
    <slot>
      <span :class="[truncate ? 'text-left break-all line-clamp-1' : '', compact ? 'hidden sm:block' : '']">
        <span :class="[labelCompact && 'hidden sm:block']">{{ label }}</span>
        <span v-if="labelCompact" class="sm:hidden">{{ labelCompact }}</span>
      </span>
    </slot>
-    <IconCSS v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    <Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
  </component>
 </template>

@@ -22,6 +22,7 @@ import { ref, computed, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
 import NuxtLink from '#app/components/nuxt-link'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'

--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -17,7 +17,7 @@

    <div v-if="open && items.length" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
      <transition appear v-bind="transitionClass">
-        <MenuItems :class="baseClass" static>
+        <MenuItems :class="[baseClass, divideClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
          <div v-for="(subItems, index) of items" :key="index" :class="groupClass">
            <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
              <Component
@@ -27,7 +27,7 @@
                @click="item.click"
              >
                <slot :name="item.slot" :item="item">
-                  <IconCSS v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
+                  <Icon v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
                  <Avatar v-if="item.avatar" v-bind="{ size: 'xxs', ...item.avatar }" :class="itemAvatarClass" />

                  <span class="truncate">{{ item.label }}</span>
@@ -57,6 +57,7 @@ import type { RouteLocationNormalized } from 'vue-router'
 import { ref, computed, onMounted } from 'vue'
 import { defu } from 'defu'
 import NuxtLink from '#app/components/nuxt-link'
+import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
 import { classNames, omit } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
@@ -103,6 +104,26 @@ const props = defineProps({
    type: String,
    default: () => $ui.dropdown.width
  },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.dropdown.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.dropdown.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.dropdown.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.dropdown.ring
+  },
+  divideClass: {
+    type: String,
+    default: () => $ui.dropdown.divide
+  },
  baseClass: {
    type: String,
    default: () => $ui.dropdown.base
--- a/src/runtime/components/elements/Icon.vue
+++ b/src/runtime/components/elements/Icon.vue
@@ -0,0 +1,16 @@
+<template>
+  <span :class="name" />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<script lang="ts">
+export default { name: 'UIcon' }
+</script>
--- a/src/runtime/components/feedback/Alert.vue
+++ b/src/runtime/components/feedback/Alert.vue
@@ -1,8 +1,8 @@
 <template>
  <div class="rounded-md p-4" :class="variantClass">
    <div class="flex">
-      <div class="flex-shrink-0">
-        <IconCSS v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
+      <div class="inline-flex flex-shrink-0">
+        <Icon v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
      </div>
      <div class="ml-3 flex-1 md:flex md:justify-between">
        <p v-if="title" class="text-sm leading-5" :class="titleClass">
@@ -27,6 +27,7 @@
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
+import Icon from '../elements/Icon.vue'

 const props = defineProps({
  variant: {
@@ -56,10 +57,10 @@ const props = defineProps({

 const iconName = computed(() => {
  return ({
-    info: 'heroicons-solid:information-circle',
-    warning: 'heroicons-solid:exclamation',
-    error: 'heroicons-solid:x-circle',
-    success: 'heroicons-solid:check-circle'
+    info: 'i-heroicons-information-circle',
+    warning: 'i-heroicons-exclamation',
+    error: 'i-heroicons-x-circle',
+    success: 'i-heroicons-check-circle'
  })[props.variant]
 })

--- a/src/runtime/components/feedback/AlertDialog.vue
+++ b/src/runtime/components/feedback/AlertDialog.vue
@@ -2,7 +2,7 @@
  <Modal v-model="isOpen" :appear="appear" class="w-full" @close="onClose">
    <div class="sm:flex sm:items-start">
      <div v-if="icon" :class="iconWrapperClass" class="mx-auto flex-shrink-0 flex items-center justify-center rounded-full sm:mx-0">
-        <IconCSS :name="icon" :class="iconClass" />
+        <Icon :name="icon" :class="iconClass" />
      </div>
      <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left space-y-2">
        <DialogTitle v-if="title" as="h3" :class="titleClass">
@@ -23,6 +23,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { DialogTitle, DialogDescription } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import Modal from '../overlays/Modal.vue'
 import Button from '../elements/Button.vue'
 import $ui from '#build/ui'
@@ -54,7 +55,7 @@ const props = defineProps({
  },
  titleClass: {
    type: String,
-    default: () => $ui.alertDialog.icon.title
+    default: () => $ui.alertDialog.title
  },
  description: {
    type: String,
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -19,16 +19,17 @@
    >
    <slot />
    <div v-if="isLeading" :class="iconLeadingWrapperClass">
-      <IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
+      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
    </div>
    <div v-if="isTrailing" :class="iconTrailingWrapperClass">
-      <IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
+      <Icon v-if="iconName" :name="iconName" :class="iconClass" />
    </div>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'

--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -37,7 +37,7 @@
    </select>

    <div v-if="icon" :class="iconWrapperClass">
-      <IconCSS :name="icon" :class="iconClass" />
+      <Icon :name="icon" :class="iconClass" />
    </div>
  </div>
 </template>
@@ -46,6 +46,7 @@
 import { computed } from 'vue'
 import { get } from 'lodash-es'
 import { classNames } from '../../utils'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'

 const props = defineProps({
--- a/src/runtime/components/forms/SelectCustom.vue
+++ b/src/runtime/components/forms/SelectCustom.vue
@@ -21,7 +21,7 @@
          </slot>
          <slot name="icon">
            <span :class="iconWrapperClass">
-              <IconCSS v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
+              <Icon v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
            </span>
          </slot>
        </button>
@@ -58,7 +58,7 @@
              </div>

              <span v-if="selected" :class="resolveOptionIconClass({ active })">
-                <IconCSS v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
+                <Icon v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
              </span>
            </li>
          </ComboboxOption>
@@ -94,6 +94,7 @@ import {
  ComboboxOption,
  ComboboxInput
 } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -5,10 +5,10 @@
  >
    <span :class="[active ? containerActiveClass : containerInactiveClass, containerBaseClass]">
      <span v-if="iconOn" :class="[active ? iconActiveClass : iconInactiveClass, iconBaseClass]" aria-hidden="true">
-        <IconCSS :name="iconOn" :class="iconOnClass" />
+        <Icon :name="iconOn" :class="iconOnClass" />
      </span>
      <span v-if="iconOff" :class="[active ? iconInactiveClass : iconActiveClass, iconBaseClass]" aria-hidden="true">
-        <IconCSS :name="iconOff" :class="iconOffClass" />
+        <Icon :name="iconOff" :class="iconOffClass" />
      </span>
    </span>
  </Switch>
@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Switch } from '@headlessui/vue'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'

 const props = defineProps({
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -9,7 +9,7 @@
  >
    <div :class="$ui.commandPalette.wrapper">
      <div v-show="searchable" class="relative flex items-center">
-        <IconCSS v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
+        <Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
        <ComboboxInput
          ref="comboboxInput"
          :value="query"
@@ -38,7 +38,14 @@
        aria-label="Commands"
        class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"
      >
-        <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" :group-attribute="groupAttribute" :command-attribute="commandAttribute">
+        <CommandPaletteGroup
+          v-for="group of groups"
+          :key="group.key"
+          :query="query"
+          :group="group"
+          :group-attribute="groupAttribute"
+          :command-attribute="commandAttribute"
+        >
          <template v-for="(_, name) in $slots" #[name]="slotData">
            <slot :name="name" v-bind="slotData" />
          </template>
@@ -46,7 +53,7 @@
      </ComboboxOptions>

      <div v-else-if="placeholder" class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
-        <IconCSS v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
+        <Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
        <p class="text-sm text-center u-text-gray-900">
          {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
        </p>
@@ -59,11 +66,13 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { Combobox, ComboboxInput, ComboboxOptions } from '@headlessui/vue'
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { groupBy, map } from 'lodash-es'
 import { defu } from 'defu'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
+import Icon from '../elements/Icon.vue'
 import Button from '../elements/Button.vue'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
 import $ui from '#build/ui'
@@ -132,6 +141,10 @@ const props = defineProps({
  placeholder: {
    type: Boolean,
    default: true
+  },
+  debounce: {
+    type: Number,
+    default: 200
  }
 })

@@ -167,29 +180,44 @@ const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => de
  matchAllWhenSearchEmpty: true
 }))

-const commands = computed(() => props.groups.reduce((acc, group) => {
+const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
  return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
 }, [] as Command[]))

+const searchResults = ref<{ [key: string]: any }>({})
+
 const { results } = useFuse(query, commands, options)

-const groups = computed(() => map(groupBy(results.value, command => command.item.group), (results, key) => {
-  const commands = results.map((result) => {
-    const { item, ...data } = result
+const groups = computed(() => ([
+  ...map(groupBy(results.value, command => command.item.group), (results, key) => {
+    const commands = results.map((result) => {
+      const { item, ...data } = result
+
+      return {
+        ...item,
+        ...data
+      }
+    })

    return {
-      ...item,
-      ...data
-    }
-  })
+      ...props.groups.find(group => group.key === key),
+      commands: commands.slice(0, options.value.resultLimit)
+    } as Group
+  }),
+  ...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length)
+]))

-  return {
-    ...props.groups.find(group => group.key === key),
-    commands: commands.slice(0, options.value.resultLimit)
-  } as Group
-}))
+const debouncedSearch = useDebounceFn(async () => {
+  const searchableGroups = props.groups.filter(group => !!group.search)
+
+  await Promise.all(searchableGroups.map(async (group) => {
+    searchResults.value[group.key] = await group.search(query.value)
+  }))
+}, props.debounce)

 watch(query, () => {
+  debouncedSearch()
+
  // Select first item on search changes
  setTimeout(() => {
    // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
@@ -227,6 +255,7 @@ function onClear () {
 }

 defineExpose({
+  query,
  updateQuery: (q: string) => {
    query.value = q
  },
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="p-2" role="option">
-    <h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
-      {{ group[groupAttribute] }}
+    <h2 v-if="label" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
+      {{ label }}
    </h2>

    <div class="text-sm u-text-gray-700" role="listbox" :aria-label="group[groupAttribute]">
@@ -15,7 +15,7 @@
      >
        <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
          <div class="flex items-center gap-2 min-w-0">
-            <IconCSS v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
+            <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
            <Avatar
              v-else-if="command.avatar"
              v-bind="{ size: 'xxxs', ...command.avatar }"
@@ -35,7 +35,7 @@
            </div>
          </div>

-          <IconCSS v-if="selected" name="heroicons-outline:check" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
+          <Icon v-if="selected" :name="$ui.commandPalette.option.selected.icon.name" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
          <slot v-else-if="active && (group.active || $slots[`${group.key}-active`])" :name="`${group.key}-active`" :group="group" :command="command">
            <span v-if="group.active" class="flex-shrink-0 u-text-gray-500">{{ group.active }}</span>
          </slot>
@@ -52,16 +52,23 @@
 </template>

 <script setup lang="ts">
+import { computed } from 'vue'
 import { ComboboxOption } from '@headlessui/vue'
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
+import $ui from '#build/ui'

-defineProps({
+const props = defineProps({
  group: {
    type: Object as PropType<Group>,
    required: true
  },
+  query: {
+    type: String,
+    default: ''
+  },
  groupAttribute: {
    type: String,
    required: true
@@ -72,6 +79,12 @@ defineProps({
  }
 })

+const label = computed(() => {
+  const label = props.group[props.groupAttribute]
+
+  return typeof label === 'function' ? label(props.query) : label
+})
+
 function highlight ({ indices, value }: { indices: number[][], value:string }, i = 1): string {
  const pair = indices[indices.length - i]
  if (!pair) {
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -19,7 +19,7 @@
        />
      </slot>
      <slot name="icon" :link="link" :is-active="isActive">
-        <IconCSS
+        <Icon
          v-if="link.icon"
          :name="link.icon"
          :class="[iconBaseClass, link.label && iconSpacingClass, isActive ? iconActiveClass : iconInactiveClass, link.iconClass]"
@@ -40,6 +40,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
+import Icon from '../elements/Icon.vue'
 import Link from '../elements/Link.vue'
 import Avatar from '../elements/Avatar.vue'
 import type { Avatar as AvatarType } from '../../types/avatar'
@@ -48,7 +49,7 @@ import $ui from '#build/ui'
 defineProps({
  links: {
    type: Array as PropType<{
-      to?: RouteLocationNormalized
+      to?: RouteLocationNormalized | string
      exact?: boolean
      label: string
      icon?: string
--- a/src/runtime/components/overlays/ContextMenu.vue
+++ b/src/runtime/components/overlays/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
  <div v-if="isOpen" ref="container" :class="[containerClass, widthClass]">
    <transition appear v-bind="transitionClass">
-      <div :class="baseClass">
+      <div :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]">
        <slot />
      </div>
    </transition>
@@ -38,6 +38,22 @@ const props = defineProps({
    type: String,
    default: () => $ui.contextMenu.width
  },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.contextMenu.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.contextMenu.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.contextMenu.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.contextMenu.ring
+  },
  baseClass: {
    type: String,
    default: () => $ui.contextMenu.base
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -9,7 +9,7 @@
        <div class="p-4">
          <div class="flex gap-3" :class="{ 'items-start': description, 'items-center': !description }">
            <div v-if="iconName" class="flex-shrink-0">
-              <IconCSS :name="iconName" :class="iconClass" />
+              <Icon :name="iconName" :class="iconClass" />
            </div>
            <div class="w-0 flex-1">
              <p class="text-sm font-medium u-text-gray-900">
@@ -33,11 +33,11 @@
              </div>

              <button
-                class="transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
+                class="inline-flex transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
                @click.stop="onClose"
              >
                <span class="sr-only">Close</span>
-                <IconCSS name="heroicons-solid:x" class="w-5 h-5" />
+                <Icon :name="$ui.notification.close.icon.name" class="w-5 h-5" />
              </button>
            </div>
          </div>
@@ -53,6 +53,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
 import type { PropType } from 'vue'
+import Icon from '../elements/Icon.vue'
 import { useTimer } from '../../composables/useTimer'
 import { classNames } from '../../utils'
 import type { ToastNotificationAction } from '../../types'
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -17,7 +17,7 @@

    <div v-if="open" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
      <transition appear v-bind="transitionClass">
-        <PopoverPanel :class="baseClass" static>
+        <PopoverPanel :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
          <slot name="panel" :open="open" :close="close" />
        </PopoverPanel>
      </transition>
@@ -62,6 +62,22 @@ const props = defineProps({
    type: String,
    default: () => $ui.popover.base
  },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.popover.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.popover.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.popover.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.popover.ring
+  },
  transitionClass: {
    type: Object,
    default: () => $ui.popover.transition
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/src/runtime/components/overlays/Tooltip.vue
@@ -8,7 +8,7 @@
      <transition appear v-bind="transitionClass">
        <div :class="[baseClass, backgroundClass, roundedClass, shadowClass, ringClass]">
          <slot name="text">
-            <span class="truncate">{{ text }}</span>
+            {{ text }}
          </slot>

          <span v-if="shortcuts?.length" class="inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1">
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -48,7 +48,7 @@ export default function defaultPreset (variantColors: string[]) {
    },
    icon: {
      base: 'flex-shrink-0',
-      loading: 'heroicons-outline:refresh',
+      loading: 'i-heroicons-arrow-path',
      size: {
        xxs: 'h-3.5 w-3.5',
        xs: 'h-4 w-4',
@@ -168,7 +168,7 @@ export default function defaultPreset (variantColors: string[]) {
    },
    icon: {
      base: 'u-text-gray-400',
-      loading: 'heroicons-outline:refresh',
+      loading: 'i-heroicons-arrow-path',
      size: {
        xxs: 'h-3 w-3',
        xs: 'h-4 w-4',
@@ -215,7 +215,7 @@ export default function defaultPreset (variantColors: string[]) {
    wrapper: 'relative',
    base: `${select.base} text-left cursor-default`,
    icon: {
-      name: 'heroicons-solid:selector',
+      name: 'i-heroicons-chevron-up-down-20-solid',
      ...select.icon
    },
    list: {
@@ -233,7 +233,7 @@ export default function defaultPreset (variantColors: string[]) {
        disabled: 'cursor-not-allowed opacity-50',
        empty: 'text-sm u-text-gray-400 px-4 py-2',
        icon: {
-          name: 'heroicons-solid:check',
+          name: 'i-heroicons-check-20-solid',
          base: 'absolute inset-y-0 right-0 flex items-center pr-4',
          active: 'text-white',
          inactive: 'text-primary-600',
@@ -355,18 +355,23 @@ export default function defaultPreset (variantColors: string[]) {

  const alertDialog = {
    icon: {
-      wrapper: 'h-12 w-12 sm:h-10 sm:w-10 bg-primary-100',
-      base: 'text-primary-600'
+      wrapper: 'mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary-100 sm:mx-0 sm:h-10 sm:w-10',
+      base: 'h-6 w-6 text-primary-600'
    },
-    title: 'text-lg leading-6 font-medium text-gray-900',
-    description: 'text-sm text-gray-500'
+    title: 'text-lg leading-6 font-medium u-text-gray-900',
+    description: 'text-sm u-text-gray-500'
  }

  const dropdown = {
    wrapper: 'relative inline-flex text-left',
    container: 'z-20',
    width: 'w-48',
-    base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg focus:outline-none',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'focus:outline-none',
+    divide: 'divide-y u-divide-gray-100',
    group: 'py-1',
    item: {
      base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',
@@ -483,10 +488,10 @@ export default function defaultPreset (variantColors: string[]) {
    rounded: 'rounded-lg',
    ring: 'ring-1 u-ring-gray-200',
    type: {
-      info: 'heroicons-outline:information-circle',
-      success: 'heroicons-outline:check-circle',
-      warning: 'heroicons-outline:exclamation-circle',
-      error: 'heroicons-outline:x-circle'
+      info: 'i-heroicons-information-circle',
+      success: 'i-heroicons-check-circle',
+      warning: 'i-heroicons-exclamation-circle',
+      error: 'i-heroicons-x-circle'
    },
    icon: {
      base: 'w-6 h-6',
@@ -497,6 +502,11 @@ export default function defaultPreset (variantColors: string[]) {
        error: 'text-red-400'
      }
    },
+    close: {
+      icon: {
+        name: 'i-heroicons-x-mark-20-solid'
+      }
+    },
    transition: {
      enterActiveClass: 'transform ease-out duration-300 transition',
      enterFromClass: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
@@ -515,7 +525,7 @@ export default function defaultPreset (variantColors: string[]) {
    shadow: 'shadow',
    rounded: 'rounded',
    ring: 'ring-1 u-ring-gray-200',
-    base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal',
+    base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal truncate',
    transition: {
      enterActiveClass: 'transition ease-out duration-200',
      enterFromClass: 'opacity-0 translate-y-1',
@@ -533,7 +543,11 @@ export default function defaultPreset (variantColors: string[]) {
    wrapper: 'relative',
    container: 'z-20',
    width: '',
-    base: '',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'overflow-hidden focus:outline-none',
    transition: {
      enterActiveClass: 'transition ease-out duration-200',
      enterFromClass: 'opacity-0 translate-y-1',
@@ -551,7 +565,11 @@ export default function defaultPreset (variantColors: string[]) {
    wrapper: 'relative',
    container: 'z-20',
    width: '',
-    base: '',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'overflow-hidden focus:outline-none',
    transition: {
      enterActiveClass: 'transition ease-out duration-200',
      enterFromClass: 'opacity-0 translate-y-1',
@@ -572,7 +590,7 @@ export default function defaultPreset (variantColors: string[]) {
      base: 'w-full h-12 pr-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 pl-[3.25rem] u-text-gray-900 focus:ring-0 sm:text-sm',
      icon: {
        base: 'pointer-events-none absolute top-3.5 left-5 h-5 w-5 u-text-gray-400',
-        name: 'heroicons-outline:search'
+        name: 'i-heroicons-magnifying-glass'
      },
      close: {
        base: 'absolute right-2',
@@ -585,7 +603,14 @@ export default function defaultPreset (variantColors: string[]) {
    },
    empty: {
      icon: {
-        name: 'heroicons-outline:search'
+        name: 'i-heroicons-magnifying-glass'
+      }
+    },
+    option: {
+      selected: {
+        icon: {
+          name: 'i-heroicons-check-20-solid'
+        }
      }
    }
  }
--- a/src/runtime/types/command-palette.d.ts
+++ b/src/runtime/types/command-palette.d.ts
@@ -1,6 +1,7 @@
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { FuseSortFunctionMatch, FuseSortFunctionMatchList } from 'fuse.js'
 import type { Avatar } from './avatar'
+
 export interface Command {
  id: string | number
  prefix?: string
@@ -22,6 +23,5 @@ export interface Group {
  active?: string
  inactive?: string
  commands: Command[]
-  options?: Partial<UseFuseOptions<Command>>
  [key: string]: any
 }
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Benjamin Canac	9719ea3858	chore(release): 1.1.2	2023-02-28 11:58:28 +01:00
Benjamin Canac	a4af6b3805	chore(deps): bump	2023-02-28 10:50:50 +01:00
Benjamin Canac	3493c138d9	chore: split props for `Dropdown`, `ContextMenu` and `Popover`	2023-02-24 17:33:57 +01:00
Benjamin Canac	d08e64d53f	fix(Tooltip): truncate	2023-02-22 15:59:02 +01:00
renovate[bot]	6aecb082d2	chore(deps): update devdependency vue-tsc to ^1.1.7 (#132 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-02-22 12:31:21 +01:00
Sylvain Marroufin	63e27f8b4b	chore(docs): add `ContextMenu` component page (#128 )	2023-02-22 12:31:08 +01:00
Benjamin Canac	7970aefcb0	fix(VerticalNavigation): links `to` type	2023-02-22 12:22:54 +01:00
renovate[bot]	a893d7fa2e	chore(deps): update all non-major dependencies (#124 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-02-21 19:26:03 +01:00
Benjamin Canac	8ace629ff8	chore(release): 1.1.1	2023-02-20 18:06:15 +01:00
Benjamin Canac	0d35b82ecb	chore(CommandPalette): expose query	2023-02-20 18:05:52 +01:00
Benjamin Canac	5f37077835	types(CommandPalette): options no longer exists	2023-02-20 18:05:39 +01:00
Benjamin Canac	948f4b89b1	chore(release): 1.1.0	2023-02-17 19:08:09 +01:00
Benjamin Canac	e6d0dd5898	chore(CommandPalette): set debounce to 200	2023-02-17 19:07:38 +01:00
Benjamin Canac	4702a4f103	fix(CommandPalette): types	2023-02-17 18:14:11 +01:00
Benjamin Canac	efa9674815	feat(CommandPalette): handle async search for specific groups	2023-02-17 18:03:59 +01:00
Benjamin Canac	97d40395d3	chore(release): 1.0.0	2023-02-17 15:35:51 +01:00
Benjamin Canac	a2fb22d835	docs: ts-ignore module import	2023-02-17 14:53:35 +01:00
Benjamin Canac	d14a1a82c2	chore(deps): bump `@egoist/tailwindcss-icons`	2023-02-17 14:50:41 +01:00
Benjamin Canac	a566627a23	chore: bump deps	2023-02-17 14:26:20 +01:00
Benjamin Canac	ee3352278c	feat: migrate to `@egoist/tailwindcss-icons`	2023-02-17 12:58:19 +01:00
Benjamin Canac	b1d9e01818	chore(release): 0.2.1	2023-02-16 17:02:23 +01:00
Benjamin Canac	ca171f3095	chore(ci): disable typecheck	2023-02-16 17:02:07 +01:00
Benjamin Canac	c0e493d96a	chore(deps): bump nuxt-icon	2023-02-16 17:02:00 +01:00