chore(release): 1.0.0

CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.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)
+
+
+### Features
+
+* use `nuxt-icon` ([f5d068b](https://github.com/nuxtlabs/ui/commit/f5d068be9d5778b3d4fcdc11d06d9d765e62075d))
+
+
+### Bug Fixes
+
+* **SelectCustom:** handle search on string arrays ([6018f00](https://github.com/nuxtlabs/ui/commit/6018f009a86cca196d15e4e72dd5eb41aaeb4bad))
+
+### [0.1.38](https://github.com/nuxtlabs/ui/compare/v0.1.37...v0.1.38) (2023-02-03)
+
+### [0.1.37](https://github.com/nuxtlabs/ui/compare/v0.1.36...v0.1.37) (2023-02-03)
+
+
+### Bug Fixes
+
+* **CommandPalette:** improve accessibility ([#129](https://github.com/nuxtlabs/ui/issues/129)) ([bea47b5](https://github.com/nuxtlabs/ui/commit/bea47b5906d1bc665717830d6dc2f3ff2a0374f3))
+
 ### [0.1.36](https://github.com/nuxtlabs/ui/compare/v0.1.35...v0.1.36) (2023-02-02)
 
 

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>
@@ -79,7 +79,7 @@ const toggleDark = () => {
 
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
-  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
+  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }, { label: 'AlertDialog', to: '/components/AlertDialog' }] },
   { 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' }] },

docs/nuxt.config.ts

@@ -4,6 +4,7 @@ import nuxtUI from '../src/module'
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
   modules: [
+    // @ts-ignore
     nuxtUI
   ],
   components: {
@@ -16,6 +17,7 @@ export default defineNuxtConfig({
     },
     preset: {
     },
+    icons: ['heroicons', 'mdi'],
     tailwindcss: {
       theme: {
         extend: {

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' : ''"
@@ -132,7 +132,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 +156,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 +178,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 +209,7 @@ const defaultProps = {
     }]
   },
   Icon: {
-    name: 'heroicons-outline:bell'
+    name: 'i-heroicons-bell'
   },
   Input: {
     name: 'input',

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">
-            <UIcon 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,7 +98,7 @@
 
       <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>
@@ -117,7 +117,7 @@
       </div>
 
       <UTooltip text="Hello tooltip!" :shortcuts="['⌘', 'G']">
-        <UIcon 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>
@@ -174,7 +174,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 +189,7 @@
               placeholder="Select a person"
               text-attribute="name"
               value-attribute="id"
-              icon="heroicons-outline:user"
+              icon="i-heroicons-user"
             />
           </UFormGroup>
 
@@ -198,7 +198,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?">
@@ -302,27 +302,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 +335,7 @@ const customDropdownItems = [
   }],
   [{
     label: 'About',
-    icon: 'heroicons-solid:plus',
+    icon: 'i-heroicons-plus-20-solid',
     to: '/about'
   }]
 ]

docs/pages/migration.vue

@@ -105,13 +105,6 @@ const components = [
     preset: true,
     typescript: true
   },
-  {
-    label: 'Icon',
-    to: '/components/Icon',
-    nuxt3: true,
-    capi: true,
-    typescript: true
-  },
   {
     label: 'Link',
     to: '/components/Link',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "0.1.36",
+  "version": "1.0.0",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -25,37 +25,34 @@
     "release": "yarn lint && standard-version && git push --follow-tags"
   },
   "dependencies": {
-    "@headlessui/vue": "1.7.4",
-    "@iconify/vue": "^4.0.2",
-    "@nuxt/kit": "^3.0.0",
+    "@egoist/tailwindcss-icons": "^1.0.5",
+    "@headlessui/vue": "^1.7.10",
+    "@iconify-json/heroicons": "^1.1.9",
+    "@nuxt/kit": "^3.2.0",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.2.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.11.1",
-    "@vueuse/integrations": "^9.11.1",
-    "defu": "^6.1.1",
+    "@vueuse/core": "^9.12.0",
+    "@vueuse/integrations": "^9.12.0",
+    "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
-    "tailwindcss": "^3.2.4"
+    "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",
-    "eslint": "^8.32.0",
-    "nuxt": "^3.0.0",
+    "@types/node": "^18.13.0",
+    "eslint": "^8.34.0",
+    "nuxt": "^3.2.0",
     "standard-version": "^9.5.0",
-    "unbuild": "^1.1.1",
-    "vue-tsc": "^1.0.24"
-  },
-  "build": {
-    "externals": [
-      "tailwindcss",
-      "tailwindcss/colors.js"
-    ]
+    "unbuild": "^1.1.2",
+    "vue-tsc": "^1.1.2"
   }
 }

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({

src/runtime/components/elements/Icon.vue

@@ -1,54 +1,14 @@
 <template>
-  <span v-if="isFetching" />
-  <Iconify v-else-if="icon" :icon="icon" />
-  <Component :is="component" v-else-if="component" />
-  <span v-else>{{ name }}</span>
+  <span :class="name" />
 </template>
 
 <script setup lang="ts">
-import type { IconifyIcon } from '@iconify/vue'
-import { Icon as Iconify } from '@iconify/vue/dist/offline'
-import { loadIcon } from '@iconify/vue'
-import { useNuxtApp, useState, computed, watch, onMounted } from '#imports'
-
-const props = defineProps({
+defineProps({
   name: {
     type: String,
     required: true
   }
 })
-const nuxtApp = useNuxtApp()
-const state = useState<Record<string, Required<IconifyIcon> | Promise<void> | null>>('u-icons', () => ({}))
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-const isFetching = computed(() => state.value?.[props.name] && ('then' in state.value?.[props.name]!))
-const icon = computed<Required<IconifyIcon> | null>(() =>
-  !state.value?.[props.name] || 'then' in state.value[props.name]!
-    ? null
-    : state.value[props.name] as Required<IconifyIcon>
-)
-const component = computed(() => nuxtApp.vueApp.component(props.name))
-
-const loadIconComponent = (name: string) => {
-  state.value = state.value || {}
-  if (nuxtApp.vueApp.component(props.name) || state.value[name] || state.value[name] === null) { return state.value[name] }
-
-  state.value[name] = loadIcon(name)
-    .then((res) => { state.value[name] = res })
-    // We won't try to load this icon again if it fails
-    .catch(() => { state.value[name] = null })
-
-  // return an awaitable promise
-  return state.value[name]
-}
-
-onMounted(() => {
-  watch(() => props.name, loadIconComponent, { immediate: true })
-})
-
-if (process.server) {
-  await loadIconComponent(props.name)
-}
 </script>
 
 <script lang="ts">

src/runtime/components/feedback/Alert.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="rounded-md p-4" :class="variantClass">
     <div class="flex">
-      <div class="flex-shrink-0">
+      <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">
@@ -57,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]
 })
 

src/runtime/components/feedback/AlertDialog.vue

@@ -23,9 +23,9 @@
 <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 Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({
@@ -55,7 +55,7 @@ const props = defineProps({
   },
   titleClass: {
     type: String,
-    default: () => $ui.alertDialog.icon.title
+    default: () => $ui.alertDialog.title
   },
   description: {
     type: String,

src/runtime/components/forms/Select.vue

@@ -45,8 +45,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { get } from 'lodash-es'
-import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
+import Icon from '../elements/Icon.vue'
 import $ui from '#build/ui'
 
 const props = defineProps({

src/runtime/components/forms/SelectCustom.vue

@@ -110,7 +110,7 @@ const props = defineProps({
     default: undefined
   },
   options: {
-    type: Array as PropType<{ [key: string]: any, disabled?: boolean }[]>,
+    type: Array as PropType<{ [key: string]: any, disabled?: boolean }[] | string[]>,
     default: () => []
   },
   required: {
@@ -292,11 +292,11 @@ const iconClass = computed(() => {
 const filteredOptions = computed(() =>
   query.value === ''
     ? props.options
-    : props.options.filter((option: any) => {
-      return (props.searchAttributes?.length ? props.searchAttributes : [props.textAttribute]).some((searchAttribute: any) => {
-        return option[searchAttribute] && option[searchAttribute].search(new RegExp(query.value, 'i')) !== -1
+    : (props.options as any[]).filter((option: any) => {
+        return (props.searchAttributes?.length ? props.searchAttributes : [props.textAttribute]).some((searchAttribute: any) => {
+          return typeof option === 'string' ? option.search(new RegExp(query.value, 'i')) !== -1 : (option[searchAttribute] && option[searchAttribute].search(new RegExp(query.value, 'i')) !== -1)
+        })
       })
-    })
 )
 
 const queryOption = computed(() => {

src/runtime/components/navigation/CommandPalette.vue

@@ -25,12 +25,19 @@
           :class="$ui.commandPalette.input.close.base"
           :size="$ui.commandPalette.input.close.size"
           :variant="$ui.commandPalette.input.close.variant"
-          aria-label="close"
+          aria-label="Close"
           @click="onClear"
         />
       </div>
 
-      <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
+      <ComboboxOptions
+        v-if="groups.length"
+        static
+        hold
+        as="div"
+        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">
           <template v-for="(_, name) in $slots" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,10 +1,10 @@
 <template>
-  <li class="p-2" role="option">
+  <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>
 
-    <ul class="text-sm u-text-gray-700">
+    <div class="text-sm u-text-gray-700" role="listbox" :aria-label="group[groupAttribute]">
       <ComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"
@@ -13,7 +13,7 @@
         :disabled="command.disabled"
         as="template"
       >
-        <li :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 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">
             <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
@@ -35,7 +35,7 @@
             </div>
           </div>
 
-          <Icon 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>
@@ -45,10 +45,10 @@
             </span>
             <span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>
           </slot>
-        </li>
+        </div>
       </ComboboxOption>
-    </ul>
-  </li>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -57,6 +57,7 @@ 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({
   group: {

src/runtime/components/overlays/Notification.vue

@@ -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>
-                <Icon name="heroicons-solid:x" class="w-5 h-5" />
+                <Icon :name="$ui.notification.close.icon.name" class="w-5 h-5" />
               </button>
             </div>
           </div>

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,11 +355,11 @@ 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 = {
@@ -483,10 +483,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 +497,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',
@@ -572,7 +577,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 +590,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'
+        }
       }
     }
   }

tsconfig.json

@@ -1,14 +1,3 @@
 {
-  "extends": "./docs/.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "module": "esnext"
-  },
-  "include": [
-    "./**/*",
-    "./docs/.nuxt/nuxt.d.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
+  "extends": "./docs/.nuxt/tsconfig.json"
 }