chore(release): v3.0.0-alpha.9

This reverts commit d75f47419d.

.github/workflows/ci-v3.yml

@@ -61,5 +61,8 @@ jobs:
       - name: Build
         run: pnpm run build
 
+      - name: Build vue fixture
+        run: pnpm run test:vue:build
+
       - name: Publish
         run: pnpx pkg-pr-new publish --compact --no-template --pnpm

CHANGELOG.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## [3.0.0-alpha.9](https://github.com/nuxt/ui/compare/v3.0.0-alpha.8...v3.0.0-alpha.9) (2024-11-19)
+
+### Features
+
+* **cli:** add locale command ([#2586](https://github.com/nuxt/ui/issues/2586)) ([824ba56](https://github.com/nuxt/ui/commit/824ba5629183bc4cd59321213558770db211f6e5))
+* **css:** add `--ui-bg-muted` / `--ui-border-muted` variables ([7f6db45](https://github.com/nuxt/ui/commit/7f6db45f1e15ef39cda9b732cb601c552f29570a))
+* **Form:** apply transformations ([#2550](https://github.com/nuxt/ui/issues/2550)) ([75c5e87](https://github.com/nuxt/ui/commit/75c5e87724e7abdf0a6751d7a1dbbafb947f373f))
+* **FormField:** add `error-pattern` prop ([#2601](https://github.com/nuxt/ui/issues/2601)) ([143612e](https://github.com/nuxt/ui/commit/143612ec737d1c7571398601c3222f2eed37996e))
+* **InputMenu/SelectMenu:** add `create-item` prop ([#2472](https://github.com/nuxt/ui/issues/2472)) ([f516d7b](https://github.com/nuxt/ui/commit/f516d7b36da51565f4ab05a4c9cfe5e5b4015124))
+* **InputNumber:** implement component ([#2577](https://github.com/nuxt/ui/issues/2577)) ([bd2f077](https://github.com/nuxt/ui/commit/bd2f077fe8e645d5fce8b1eb5a6eb1068b3e8f7c))
+* **Link:** allow partial query match for its active state ([#2664](https://github.com/nuxt/ui/issues/2664)) ([7329900](https://github.com/nuxt/ui/commit/7329900ae549430b88567a09cbb585d3cf0a6d32))
+* **locale:** add Persian language ([#2682](https://github.com/nuxt/ui/issues/2682)) ([14fb21b](https://github.com/nuxt/ui/commit/14fb21be0034ffc0ba5d213734c00f12e0d6bea8))
+* **locale:** add Polish language ([#2678](https://github.com/nuxt/ui/issues/2678)) ([2fc36c8](https://github.com/nuxt/ui/commit/2fc36c878c67967ec91e4f6999575bad45521d44))
+* **locale:** add support for Arabic ([#2582](https://github.com/nuxt/ui/issues/2582)) ([602a667](https://github.com/nuxt/ui/commit/602a667343be22b72383ab3cf42f36ec9e135082))
+* **locale:** add support for Czech translation ([#2593](https://github.com/nuxt/ui/issues/2593)) ([4889d30](https://github.com/nuxt/ui/commit/4889d30b448296de42e146dc5771738837c31f8c))
+* **locale:** add support for Italian ([#2583](https://github.com/nuxt/ui/issues/2583)) ([4fbbb25](https://github.com/nuxt/ui/commit/4fbbb25f68b0b5ee76e50f2da776a74d54acc041))
+* **locale:** provide `code` ([#2611](https://github.com/nuxt/ui/issues/2611)) ([8a8b1ee](https://github.com/nuxt/ui/commit/8a8b1ee2e1628bc5439ef109d3c68b69bf631f81))
+* **locale:** provide `dir` on `defineLocale` ([#2620](https://github.com/nuxt/ui/issues/2620)) ([937585c](https://github.com/nuxt/ui/commit/937585cb3f8bc902d60a4b5904711598204aee2d))
+* **locale:** translate chinese ([#2580](https://github.com/nuxt/ui/issues/2580)) ([febda5c](https://github.com/nuxt/ui/commit/febda5c2b67374d1358a66694543b77037d239c6))
+* **locale:** translate Spanish ([#2644](https://github.com/nuxt/ui/issues/2644)) ([8ed434c](https://github.com/nuxt/ui/commit/8ed434c105b75ae02aa7493a235cebb64d518d09))
+* **locale:** typing `dir` ([#2643](https://github.com/nuxt/ui/issues/2643)) ([e55c0e2](https://github.com/nuxt/ui/commit/e55c0e25947e7bcef931b26dafaad120f488a627))
+* **module:** support i18n in components ([#2553](https://github.com/nuxt/ui/issues/2553)) ([2636240](https://github.com/nuxt/ui/commit/26362408b161108487b889ff001bec9166059c79))
+* **NavigationMenu:** control items `open` & `defaultOpen` on vertical ([30218f1](https://github.com/nuxt/ui/commit/30218f1b5b0a56207fd4db224ffa0401ac194a04)), closes [#2608](https://github.com/nuxt/ui/issues/2608)
+* **PinInput:** implement component ([#2570](https://github.com/nuxt/ui/issues/2570)) ([95aa6f6](https://github.com/nuxt/ui/commit/95aa6f68b316d02c28d1124d9a826bca55cde81f))
+* **Popover:** add `prevent-close` prop ([ea97759](https://github.com/nuxt/ui/commit/ea97759c2c219bdf5c48b652b47d293ddf513a00)), closes [#2245](https://github.com/nuxt/ui/issues/2245)
+* **SelectMenu:** use `UInput` in search to handle props like icon ([ff1e079](https://github.com/nuxt/ui/commit/ff1e0798d384d40ad82a95fe5faa16acb080efe3)), closes [#2021](https://github.com/nuxt/ui/issues/2021)
+* **Table:** add `caption` prop ([446f9c1](https://github.com/nuxt/ui/commit/446f9c1085e96187afdc5c1d7ce3450f8df1a2e1))
+
+### Bug Fixes
+
+* **App:** missing `vue` imports ([ddb4690](https://github.com/nuxt/ui/commit/ddb46905e7e3480ab578bcd8a478f25dff60081a))
+* **App:** remove `dir` prop ([#2630](https://github.com/nuxt/ui/issues/2630)) ([7cc26d0](https://github.com/nuxt/ui/commit/7cc26d098dff70923bcd9d414d675018951b1967))
+* **Breadcrumb/Carousel/Pagination:** handle icons in RTL mode ([#2633](https://github.com/nuxt/ui/issues/2633)) ([e5119a9](https://github.com/nuxt/ui/commit/e5119a9ca4e217ef769904323c16bd8c0cbc02d9))
+* **Breadcrumb:** render as `nav` ([756f791](https://github.com/nuxt/ui/commit/756f791a1a8dd3a4a88c212b4e4f775584decb55)), closes [#2649](https://github.com/nuxt/ui/issues/2649)
+* **Button:** improve neutral solid variant hover ([8d85498](https://github.com/nuxt/ui/commit/8d85498ee197ec0b26cdd7c4b08f84fec45ddd8f))
+* **Carousel:** use `dir` from locale ([#2647](https://github.com/nuxt/ui/issues/2647)) ([1fbbfe8](https://github.com/nuxt/ui/commit/1fbbfe8df06b3b8b294615ac328d582c5230aa8b))
+* **ContextMenu/DropdownMenu:** relative imports with prefix ([47f58f5](https://github.com/nuxt/ui/commit/47f58f52ef2d03176a184a3ca2154f5cea655edb))
+* **css:** `--font-family-sans` renamed to `--font-sans` ([#2680](https://github.com/nuxt/ui/issues/2680)) ([b2fa657](https://github.com/nuxt/ui/commit/b2fa65734bb59186520c985f7c73fc34a0cb8b37))
+* **css:** remove useless spacing override ([8d00265](https://github.com/nuxt/ui/commit/8d0026558a21efbbca08e9939844f7479a0d6cce))
+* **FormField:** missing conditions to apply container classes ([#2631](https://github.com/nuxt/ui/issues/2631)) ([9241ba1](https://github.com/nuxt/ui/commit/9241ba1230b0fde41595634362d83c92c66b7699))
+* **Form:** match `error-pattern` on input validation ([#2606](https://github.com/nuxt/ui/issues/2606)) ([3584a33](https://github.com/nuxt/ui/commit/3584a3328b8588f024557c9908242bc374853419))
+* **InputMenu/SelectMenu:** init `filter` with `labelKey` ([18931ac](https://github.com/nuxt/ui/commit/18931acdb316bc72a3e5ed6d20985688ad5c8d99))
+* **InputMenu/SelectMenu:** look in `items` only with `value-attribute` ([0ceafe1](https://github.com/nuxt/ui/commit/0ceafe1d54000f3eb49562b00c188d82fa23c4ee)), closes [#2464](https://github.com/nuxt/ui/issues/2464)
+* **InputMenu/SelectMenu:** multiple not working with generic boolean casting ([503f701](https://github.com/nuxt/ui/commit/503f701c7ecdfe27e9057e5ddebfc7e03889d61b)), closes [#2541](https://github.com/nuxt/ui/issues/2541)
+* **InputMenu/SelectMenu:** use `isEqual` from `ohash` ([f943f88](https://github.com/nuxt/ui/commit/f943f88fcc9f4678d8f7bd224799e289a0c57dd8))
+* **Link:** missing relative import ([#2588](https://github.com/nuxt/ui/issues/2588)) ([95a0bbc](https://github.com/nuxt/ui/commit/95a0bbc581a40677f620eed3170f9a423976214b))
+* **locale:** Improve German translation ([#2676](https://github.com/nuxt/ui/issues/2676)) ([992be91](https://github.com/nuxt/ui/commit/992be91823fe1877254ccd092c71c77dd3ff42f7))
+* **locale:** it translation ([#2623](https://github.com/nuxt/ui/issues/2623)) ([73e25ed](https://github.com/nuxt/ui/commit/73e25ed23562f755ea4c66e6c5fb06dd18caac1e))
+* **locale:** Italian translation ([#2584](https://github.com/nuxt/ui/issues/2584)) ([d167c9b](https://github.com/nuxt/ui/commit/d167c9b807a82fdf0fd280ce8417a66f86d7ed72))
+* **Modal/Slideover:** prevent `esc` with `prevent-close` prop ([9e2cc5b](https://github.com/nuxt/ui/commit/9e2cc5b12567472044726924a3896b4b0e7993a1)), closes [#2501](https://github.com/nuxt/ui/issues/2501)
+* **module:** remove `fast-deep-equal` in favor of custom `isEqual` ([37a3597](https://github.com/nuxt/ui/commit/37a359701f4b2ce4a9b0727b64c0e3eea6be00b4))
+* **module:** skip devtools renderer page injection if router integration is disabled ([#2571](https://github.com/nuxt/ui/issues/2571)) ([afe4003](https://github.com/nuxt/ui/commit/afe40033b088d8aedb73fa8387a0284ef78444e4))
+* **PinInput:** missing `useFormField` import ([601f4b2](https://github.com/nuxt/ui/commit/601f4b2cd2027817b935e02a0b4584dc3dce655f))
+* **Textarea:** `autoresize` does not work when initializing `modelValue` ([#2681](https://github.com/nuxt/ui/issues/2681)) ([d3a079a](https://github.com/nuxt/ui/commit/d3a079a644db3dfe2f4e9567973550d74b3ba905))
+* **Toaster:** teleport to `body` ([b0be26d](https://github.com/nuxt/ui/commit/b0be26d67feab467ac5862edd82e52df03a5091c)), closes [#2404](https://github.com/nuxt/ui/issues/2404)
+* **Toast:** unreachable behind overlays ([#2650](https://github.com/nuxt/ui/issues/2650)) ([0daac5b](https://github.com/nuxt/ui/commit/0daac5bafb756c3a2dfaf2bf166c30c0eb476e08))
+* **useLocale:** missing import in various components ([#2603](https://github.com/nuxt/ui/issues/2603)) ([df7a61a](https://github.com/nuxt/ui/commit/df7a61a97a14b3d7943baee6a74686134dfdb10b))
+
+### Reverts
+
+* Revert "docs(ComponentCode/ComponentExample): use relative imports" ([5deadc7](https://github.com/nuxt/ui/commit/5deadc709640bbfd3ec14c1c9363deb55e765d6a))
+
 ## [3.0.0-alpha.8](https://github.com/nuxt/ui/compare/v3.0.0-alpha.7...v3.0.0-alpha.8) (2024-11-07)
 
 ### ⚠ BREAKING CHANGES

cli/commands/make/locale.mjs

@@ -17,6 +17,10 @@ export default defineCommand({
     name: {
       description: 'Locale name to create. For example: English.',
       required: true
+    },
+    dir: {
+      description: 'Locale direction. For example: rtl.',
+      default: 'ltr'
     }
   },
   async setup({ args }) {
@@ -32,6 +36,11 @@ export default defineCommand({
       process.exit(1)
     }
 
+    if (!['ltr', 'rtl'].includes(args.dir)) {
+      consola.error(`🚨 Direction ${args.dir} not supported!`)
+      process.exit(1)
+    }
+
     if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
       consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
       process.exit(1)
@@ -45,7 +54,9 @@ export default defineCommand({
     // Create new locale file
     await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
     const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
-    const rewrittenLocaleFile = localeFile.replace(/defineLocale\('(.*)'/, `defineLocale('${args.name}', '${normalizeLocale(args.code)}'`)
+    const rewrittenLocaleFile = localeFile
+      .replace(/name: '(.*)',/, `name: '${args.name}',`)
+      .replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n  dir: '${args.dir}',` : ''}`)
     await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
 
     consola.success(`🪄 Generated ${newLocaleFilePath}`)

cli/templates.mjs

@@ -163,9 +163,54 @@ describe('${upperName}', () => {
   }
 }
 
+const doc = ({ name, pro }) => {
+  const kebabName = kebabCase(name)
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
+
+  return {
+    filename: `docs/content/${pro ? 'pro' : '3.components'}/${kebabName}.md`,
+    contents: `---
+description:
+links: ${pro
+  ? ''
+  : `
+  - label: ${upperName}
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/${kebabName}.html`}
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+`
+  }
+}
+
 export default {
   playground,
   component,
   theme,
-  test
+  test,
+  doc
 }

devtools/app/app.vue

@@ -168,7 +168,7 @@ const isDark = computed({
 @import '@nuxt/ui';
 
 @theme {
-  --font-family-sans: 'DM Sans', sans-serif;
+  --font-sans: 'DM Sans', sans-serif;
 
   --color-primary-50: var(--ui-color-primary-50);
   --color-primary-100: var(--ui-color-primary-100);

docs/app/app.vue

@@ -126,7 +126,7 @@ provide('navigation', updatedNavigation)
 @theme {
   --container-8xl: 90rem;
 
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;

docs/app/components/content/ComponentCode.vue

@@ -164,7 +164,7 @@ const code = computed(() => {
         continue
       }
 
-      code += ` ${prop?.type.includes('number') ? ':' : ''}${name}="${value}"`
+      code += ` ${typeof value === 'number' ? ':' : ''}${name}="${value}"`
     }
   }
 
@@ -220,7 +220,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 <template>
   <div class="my-5">
     <div>
-      <div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
+      <div v-if="options.length" class="flex items-center gap-2.5 border border-[var(--ui-border-muted)] border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField
             :label="option.label"
@@ -269,7 +269,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
         </template>
       </div>
 
-      <div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
+      <div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-border-muted)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
         <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <MDCSlot :name="slot" unwrap="p">

docs/app/components/content/ComponentExample.vue

@@ -117,8 +117,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
 <template>
   <div class="my-5">
     <template v-if="preview">
-      <div class="border border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
-        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-color-neutral-200)] dark:border-[var(--ui-color-neutral-700)]">
+      <div class="border border-[var(--ui-border-muted)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]">
+        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-border-muted)]">
           <slot name="options" />
 
           <UFormField

docs/app/components/content/SupportedLanguages.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import * as locales from '@nuxt/ui/locale'
+import type { Locale } from '@nuxt/ui'
+
+type LocaleKey = keyof typeof locales
 
 const props = withDefaults(defineProps<{
   default?: string
@@ -7,21 +10,48 @@ const props = withDefaults(defineProps<{
   default: 'en'
 })
 
-const getLocaleKeys = () => Object.keys(locales) as Array<keyof typeof locales>
-const localesList = getLocaleKeys().map(locale => [locale, locales[locale].name])
+const getLocaleKeys = Object.keys(locales) as LocaleKey[]
+const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, locales[locale]])
 </script>
 
 <!-- eslint-disable vue/singleline-html-element-content-newline -->
 <template>
   <div>
-    <ProseUl>
-      <ProseLi v-for="[key, label] in localesList" :key="key">
-        <ProseCode>{{ key }}</ProseCode> - {{ label }}
-        <template v-if="key === props.default">
-          (default)
-        </template>
-      </ProseLi>
-    </ProseUl>
+    <ProseP>
+      By default, the <ProseCode>{{ props.default }}</ProseCode> locale is used.
+    </ProseP>
+    <ProseTable>
+      <ProseThead>
+        <ProseTr>
+          <ProseTh>
+            Language
+          </ProseTh>
+          <ProseTh>
+            Code
+          </ProseTh>
+          <ProseTh>
+            Direction
+          </ProseTh>
+        </ProseTr>
+      </ProseThead>
+      <ProseTbody>
+        <ProseTr v-for="[key, locale] in localesList" :key="key">
+          <ProseTd>
+            {{ locale.name }}
+          </ProseTd>
+          <ProseTd>
+            <ProseCode>
+              {{ locale.code }}
+            </ProseCode>
+          </ProseTd>
+          <ProseTd>
+            <ProseCode>
+              {{ locale.dir }}
+            </ProseCode>
+          </ProseTd>
+        </ProseTr>
+      </ProseTbody>
+    </ProseTable>
     <Note to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
       If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>.
     </Note>

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -4,6 +4,7 @@ import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = z.object({
   input: z.string().min(10),
+  inputNumber: z.number().min(10),
   inputMenu: z.any().refine(option => option?.value === 'option-2', {
     message: 'Select Option 2'
   }),
@@ -29,10 +30,11 @@ const schema = z.object({
   radioGroup: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
-  slider: z.number().max(20, { message: 'Must be less than 20' })
+  slider: z.number().max(20, { message: 'Must be less than 20' }),
+  pin: z.string().regex(/^\d$/).array().length(5)
 })
 
-type Schema = z.output<typeof schema>
+type Schema = z.input<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
 
@@ -52,10 +54,10 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <UForm ref="form" :state="state" :schema="schema" @submit="onSubmit">
+  <UForm ref="form" :state="state" :schema="schema" class="w-full" @submit="onSubmit">
     <div class="grid grid-cols-3 gap-4">
       <UFormField label="Input" name="input">
-        <UInput v-model="state.input" placeholder="john@lennon.com" class="w-40" />
+        <UInput v-model="state.input" placeholder="john@lennon.com" class="w-full" />
       </UFormField>
 
       <div class="flex flex-col gap-4">
@@ -73,34 +75,40 @@ async function onSubmit(event: FormSubmitEvent<any>) {
       </UFormField>
 
       <UFormField name="select" label="Select">
-        <USelect v-model="state.select" :items="items" class="w-48" />
+        <USelect v-model="state.select" :items="items" class="w-full" />
       </UFormField>
 
       <UFormField name="selectMenu" label="Select Menu">
-        <USelectMenu v-model="state.selectMenu" :items="items" class="w-48" />
+        <USelectMenu v-model="state.selectMenu" :items="items" class="w-full" />
       </UFormField>
 
       <UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
-        <USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-48" />
+        <USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-full" />
       </UFormField>
 
       <UFormField name="inputMenu" label="Input Menu">
-        <UInputMenu v-model="state.inputMenu" :items="items" />
+        <UInputMenu v-model="state.inputMenu" :items="items" class="w-full" />
       </UFormField>
 
       <UFormField name="inputMenuMultiple" label="Input Menu (Multiple)">
-        <UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" />
+        <UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" class="w-full" />
       </UFormField>
 
-      <span />
+      <UFormField name="inputNumber" label="Input Number">
+        <UInputNumber v-model="state.inputNumber" class="w-full" />
+      </UFormField>
 
       <UFormField label="Textarea" name="textarea">
-        <UTextarea v-model="state.textarea" />
+        <UTextarea v-model="state.textarea" class="w-full" />
       </UFormField>
 
       <UFormField name="radioGroup">
         <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
       </UFormField>
+
+      <UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
+        <UPinInput v-model="state.pin" />
+      </UFormField>
     </div>
 
     <div class="flex gap-2 mt-8">

docs/app/components/content/examples/input-number/InputNumberCurrencyExample.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const value = ref(1500)
+</script>
+
+<template>
+  <UInputNumber
+    v-model="value"
+    :format-options="{
+      style: 'currency',
+      currency: 'EUR',
+      currencyDisplay: 'code',
+      currencySign: 'accounting'
+    }"
+  />
+</template>

docs/app/components/content/examples/input-number/InputNumberDecimalExample.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const value = ref(5)
+</script>
+
+<template>
+  <UInputNumber
+    v-model="value"
+    :format-options="{
+      signDisplay: 'exceptZero',
+      minimumFractionDigits: 1
+    }"
+  />
+</template>

docs/app/components/content/examples/input-number/InputNumberFormFieldExample.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const retries = ref(0)
+</script>
+
+<template>
+  <UFormField label="Retries" help="Specify number of attempts" required>
+    <UInputNumber v-model="retries" placeholder="Enter retries" />
+  </UFormField>
+</template>

docs/app/components/content/examples/input-number/InputNumberPercentageExample.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const value = ref(0.05)
+</script>
+
+<template>
+  <UInputNumber
+    v-model="value"
+    :step="0.01"
+    :format-options="{
+      style: 'percent'
+    }"
+  />
+</template>

docs/app/components/content/examples/input-number/InputNumberSlotsExample.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const value = ref(5)
+</script>
+
+<template>
+  <UInputNumber v-model="value">
+    <template #decrement>
+      <UButton size="xs" icon="i-lucide-minus" />
+    </template>
+
+    <template #increment>
+      <UButton size="xs" icon="i-lucide-plus" />
+    </template>
+  </UInputNumber>
+</template>

docs/app/components/content/examples/input/InputClearButtonExample.vue

@@ -6,7 +6,7 @@ const value = ref('Click to clear')
   <UInput
     v-model="value"
     placeholder="Type something..."
-    :ui="{ trailing: 'pr-0.5' }"
+    :ui="{ trailing: 'pe-1' }"
   >
     <template v-if="value?.length" #trailing>
       <UButton

docs/app/components/content/examples/input/InputCopyButtonExample.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const value = ref('npx nuxi module add ui')
+const copied = ref(false)
+
+function copy() {
+  navigator.clipboard.writeText(value.value)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <UInput
+    v-model="value"
+    :ui="{ trailing: 'pr-0.5' }"
+  >
+    <template v-if="value?.length" #trailing>
+      <UTooltip text="Copy to clipboard" :content="{ side: 'right' }">
+        <UButton
+          :color="copied ? 'success' : 'neutral'"
+          variant="link"
+          size="sm"
+          :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+          aria-label="Copy to clipboard"
+          @click="copy"
+        />
+      </UTooltip>
+    </template>
+  </UInput>
+</template>

docs/app/components/content/examples/input/InputKbdExample.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const input = useTemplateRef('input')
+
+defineShortcuts({
+  '/': () => {
+    input.value?.inputRef?.focus()
+  }
+})
+</script>
+
+<template>
+  <UInput
+    ref="input"
+    icon="i-lucide-search"
+    placeholder="Search..."
+  >
+    <template #trailing>
+      <UKbd value="/" />
+    </template>
+  </UInput>
+</template>

docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue

@@ -40,7 +40,7 @@ const text = computed(() => {
         placeholder="Password"
         :color="color"
         :type="show ? 'text' : 'password'"
-        :ui="{ trailing: 'pr-0.5' }"
+        :ui="{ trailing: 'pe-1' }"
         :aria-invalid="score < 4"
         aria-describedby="password-strength"
         class="w-full"

docs/app/components/content/examples/input/InputPasswordToggleExample.vue

@@ -8,7 +8,7 @@ const password = ref('password')
     v-model="password"
     placeholder="Password"
     :type="show ? 'text' : 'password'"
-    :ui="{ trailing: 'pr-0.5' }"
+    :ui="{ trailing: 'pe-1' }"
   >
     <template #trailing>
       <UButton

docs/content/1.getting-started/3.theme.md

@@ -16,7 +16,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --breakpoint-3xl: 1920px;
 

docs/content/1.getting-started/5.fonts.md

@@ -17,7 +17,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 }
 ```
 

docs/content/1.getting-started/7.i18n/.navigation.yml

@@ -0,0 +1 @@
+badge: New

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -1,7 +1,7 @@
 ---
 navigation.title: Nuxt
 title: Internationalization (i18n) in a Nuxt app
-description: 'Learn how to internationalize your Nuxt app and support multi-directional support (LTR/RTL).'
+description: 'Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).'
 select:
   items:
     - label: Nuxt
@@ -12,11 +12,13 @@ select:
       to: /getting-started/i18n/vue
 ---
 
+## Usage
+
 ::note{to="/components/app"}
 Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.
 ::
 
-## Locale
+### Locale
 
 Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
 
@@ -38,8 +40,13 @@ You also have the option to add your own locale using `defineLocale`:
 
 ```vue [app.vue]
 <script setup lang="ts">
-const locale = defineLocale('My custom locale', 'en', {
-  // implement pairs
+const locale = defineLocale({
+  name: 'My custom locale',
+  code: 'en',
+  dir: 'ltr',
+  messages: {
+    // implement pairs
+  }
 })
 </script>
 
@@ -51,7 +58,7 @@ const locale = defineLocale('My custom locale', 'en', {
 ```
 
 ::tip
-Look at the second parameter, there you need to pass the iso code of the language. Example:
+Look at the `code` parameter, there you need to pass the iso code of the language. Example:
 * `hi` Hindi (language)
 * `de-AT`: German (language) as used in Austria (region)
 ::
@@ -125,65 +132,36 @@ const { locale } = useI18n()
 
 ::
 
-### Supported languages
-
-:supported-languages
-
-## Direction
-
-Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
-
-```vue [app.vue]
-<template>
-  <UApp dir="rtl">
-    <NuxtPage />
-  </UApp>
-</template>
-```
-
 ### Dynamic direction
 
-To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
+Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.
 
-::steps{level="4"}
-
-#### Install the `@vueuse/core` package
-
-::code-group{sync="pm"}
-
-```bash [pnpm]
-pnpm add @vueuse/core
-```
-
-```bash [yarn]
-yarn add @vueuse/core
-```
-
-```bash [npm]
-npm install @vueuse/core
-```
-
-```bash [bun]
-bun add @vueuse/core
-```
-
-::
-
-#### Set the `dir` prop using `useTextDirection`
+In a multilingual application, you might want to set the `lang` and `dir` attributes on the `<html>` element dynamically based on the user's locale, which you can do with the [useHead](https://nuxt.com/docs/api/composables/use-head) composable:
 
 ```vue [app.vue]
 <script setup lang="ts">
-import { useTextDirection } from '@vueuse/core'
+import * as locales from '@nuxt/ui/locale'
 
-const textDirection = useTextDirection({ initialValue: 'ltr' })
-const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
+const { locale } = useI18n()
+
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
+
+useHead({
+  htmlAttrs: {
+    lang,
+    dir
+  }
+})
 </script>
 
 <template>
-  <UApp :dir="dir">
+  <UApp :locale="locales[locale]">
     <NuxtPage />
   </UApp>
 </template>
 ```
 
-::
+## Supported languages
+
+:supported-languages

docs/content/1.getting-started/7.i18n/2.vue.md

@@ -1,7 +1,7 @@
 ---
 navigation.title: Vue
 title: Internationalization (i18n) in a Vue app
-description: 'Learn how to internationalize your Vue app and support multi-directional support (LTR/RTL).'
+description: 'Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).'
 select:
   items:
     - label: Nuxt
@@ -12,11 +12,13 @@ select:
       to: /getting-started/i18n/vue
 ---
 
+## Usage
+
 ::note{to="/components/app"}
 Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.
 ::
 
-## Locale
+### Locale
 
 Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
 
@@ -40,8 +42,13 @@ You also have the option to add your locale using `defineLocale`:
 <script setup lang="ts">
 import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale'
 
-const locale = defineLocale('My custom locale', 'en', {
-  // implement pairs
+const locale = defineLocale({
+  name: 'My custom locale',
+  code: 'en',
+  dir: 'ltr',
+  messages: {
+    // implement pairs
+  }
 })
 </script>
 
@@ -53,7 +60,7 @@ const locale = defineLocale('My custom locale', 'en', {
 ```
 
 ::tip
-Look at the second parameter, there you need to pass the iso code of the language. Example:
+Look at the `code` parameter, there you need to pass the iso code of the language. Example:
 * `hi` Hindi (language)
 * `de-AT`: German (language) as used in Austria (region)
 ::
@@ -135,64 +142,39 @@ const { locale } = useI18n()
 
 ::
 
-## Supported languages
-
-:supported-languages
-
-## Direction
-
-Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
-
-```vue [App.vue]
-<template>
-  <UApp dir="rtl">
-    <NuxtPage />
-  </UApp>
-</template>
-```
-
 ### Dynamic direction
 
-To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
+Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.
 
-::steps{level="4"}
-
-#### Install the `@vueuse/core` package
-
-::code-group{sync="pm"}
-
-```bash [pnpm]
-pnpm add @vueuse/core
-```
-
-```bash [yarn]
-yarn add @vueuse/core
-```
-
-```bash [npm]
-npm install @vueuse/core
-```
-
-```bash [bun]
-bun add @vueuse/core
-```
-
-::
-
-#### Set the `dir` prop using `useTextDirection`
+In a multilingual application, you might want to set the `lang` and `dir` attributes on the `<html>` element dynamically based on the user's locale, which you can do with the [useHead](https://unhead.unjs.io/usage/composables/use-head) composable:
 
 ```vue [App.vue]
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useTextDirection } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
+import * as locales from '@nuxt/ui/locale'
 
-const textDirection = useTextDirection()
-const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
+const { locale } = useI18n()
+
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
+
+useHead({
+  htmlAttrs: {
+    lang,
+    dir
+  }
+})
 </script>
 
 <template>
-  <UApp :dir="dir">
+  <UApp :locale="locales[locale]">
     <RouterView />
   </UApp>
 </template>
 ```
+
+## Supported languages
+
+:supported-languages

docs/content/3.components/0.app.md

@@ -31,10 +31,6 @@ Use it as at the root of your app:
 Learn how to use the `locale` prop to change the locale of your app.
 ::
 
-::tip{to="/getting-started/i18n/nuxt#direction"}
-Learn how to use the `dir` prop to change the global reading direction of your app.
-::
-
 ## API
 
 ### Props

docs/content/3.components/carousel.md

@@ -67,7 +67,7 @@ class: 'p-8'
 
 ### Prev / Next
 
-Use the `prev` and `next` props to customize the prev and next buttons.
+Use the `prev` and `next` props to customize the prev and next buttons with any [Button](/components/button) props.
 
 ::component-example
 ---
@@ -76,7 +76,7 @@ class: 'p-8'
 ---
 ::
 
-### Prev Icon / Next Icon
+### Prev / Next Icons
 
 Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](/components/icon). Defaults to `i-lucide-arrow-left` / `i-lucide-arrow-right`.
 

docs/content/3.components/input-menu.md

@@ -214,6 +214,42 @@ props:
 ---
 ::
 
+### Create Item
+
+Use the `create-item` prop to allow user input.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+items:
+  createItem:
+    - true
+    - 'always'
+props:
+  modelValue: 'Backlog'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+  createItem: true
+---
+::
+
+::note
+The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
+::
+
+::tip{to="#emits"}
+Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
+::
+
 ### Content
 
 Use the `content` prop to control how the InputMenu content is rendered, like its `align` or `side` for example.

docs/content/3.components/input-number.md

@@ -0,0 +1,291 @@
+---
+title: InputNumber
+description: Input numerical values with a customizable range.
+links:
+  - label: Number Field
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/number-field
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputNumber.vue
+navigation.badge: New
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  defaultValue: 5
+---
+::
+
+### Min / Max
+
+Use the `min` and `max` props to set the minimum and maximum values of the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  min: 0
+  max: 10
+---
+::
+
+### Step
+
+Use the `step` prop to set the step value of the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  step: 2
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  orientation: vertical
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: 'Enter a number'
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the InputNumber is focused.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  color: neutral
+  highlight: true
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  variant: subtle
+  color: neutral
+  highlight: false
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  size: xl
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputNumber.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  disabled: true
+---
+::
+
+### Increment / Decrement
+
+Use the `increment` and `decrement` props to customize the increment and decrement buttons with any [Button](/components/button) props. Defaults to `{ variant: 'link' }`{lang="ts-type"}.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - increment.size
+  - increment.color
+  - increment.variant
+  - decrement.size
+  - decrement.color
+  - decrement.variant
+external:
+  - modelValue
+props:
+  modelValue: 5
+  increment:
+    color: neutral
+    variant: solid
+    size: xs
+  decrement:
+    color: neutral
+    variant: solid
+    size: xs
+---
+::
+
+### Increment / Decrement Icons
+
+Use the `increment-icon` and `decrement-icon` props to customize the buttons [Icon](/components/icon). Defaults to `i-lucide-plus` / `i-lucide-minus`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 5
+  incrementIcon: 'i-lucide-arrow-right'
+  decrementIcon: 'i-lucide-arrow-left'
+---
+::
+
+## Examples
+
+### With decimal format
+
+Use the `format-options` prop to customize the format of the value.
+
+::component-example
+---
+name: 'input-number-decimal-example'
+---
+::
+
+### With percentage format
+
+Use the `format-options` prop with `style: 'percent'` to customize the format of the value.
+
+::component-example
+---
+name: 'input-number-percentage-example'
+---
+::
+
+### With currency format
+
+Use the `format-options` prop with `style: 'currency'` to customize the format of the value.
+
+::component-example
+---
+name: 'input-number-currency-example'
+---
+::
+
+### Within a FormField
+
+You can use the InputNumber within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
+
+::component-example
+---
+name: 'input-number-form-field-example'
+---
+::
+
+### With slots
+
+Use the `#increment` and `#decrement` slots to customize the buttons.
+
+::component-example
+---
+name: 'input-number-slots-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name                       | Type                                            |
+|----------------------------|-------------------------------------------------|
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+
+## Theme
+
+:component-theme

docs/content/3.components/input.md

@@ -25,15 +25,15 @@ props:
 
 Use the `type` prop to change the input type. Defaults to `text`.
 
-Some types have been implemented in their own components such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc. and others have been styled like `file` for example.
+Some types have been implemented in their own components such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), [InputNumber](/components/input-number) etc. and others have been styled like `file` for example.
 
 ::component-code
 ---
 items:
   type:
     - text
-    - password
     - number
+    - password
     - search
     - file
 props:
@@ -214,6 +214,16 @@ name: 'input-clear-button-example'
 ---
 ::
 
+### With copy button
+
+You can put a [Button](/components/button) inside the `#trailing` slot to copy the value to the clipboard.
+
+::component-example
+---
+name: 'input-copy-button-example'
+---
+::
+
 ### With password toggle
 
 You can put a [Button](/components/button) inside the `#trailing` slot to toggle the password visibility.
@@ -245,6 +255,20 @@ name: 'input-character-limit-example'
 ---
 ::
 
+### With keyboard shortcut
+
+You can use the [Kbd](/components/kbd) component inside the `#trailing` slot to add a keyboard shortcut to the Input.
+
+::component-example
+---
+name: 'input-kbd-example'
+---
+::
+
+::note{to="/composables/define-shortcuts"}
+This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
+::
+
 ### With floating label
 
 You can use the `#default` slot to add a floating label to the Input.

docs/content/3.components/link.md

@@ -13,6 +13,7 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 - `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
 - `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
 - `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.
+  - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query. 
 
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 

docs/content/3.components/pin-input.md

@@ -0,0 +1,182 @@
+---
+title: PinInput
+description: An input element to enter a pin.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/PinInput.vue
+navigation.badge: New
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the PinInput.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: []
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+props:
+  defaultValue: ['1','2','3']
+---
+::
+
+### Type
+
+Use the `type` prop to change the input type. Defaults to `text`.
+
+::component-code
+---
+items:
+  type:
+    - text
+    - number
+props:
+  type: 'number'
+---
+::
+
+::note
+When `type` is set to `number`, it will only accept numeric characters.
+::
+
+### Mask
+
+Use the `mask` prop to treat the input like a password.
+
+::component-code
+---
+prettier: true
+ignore:
+  - placeholder
+  - defaultValue
+props:
+  mask: true
+  defaultValue: ['1','2','3','4','5']
+---
+::
+
+### OTP
+
+Use the `otp` prop to enable One-Time Password functionality. When enabled, mobile devices can automatically detect and fill OTP codes from SMS messages or clipboard content, with autocomplete support.
+
+::component-code
+---
+props:
+  otp: true
+---
+::
+
+### Length
+
+Use the `length` prop to change the amount of inputs.
+
+::component-code
+---
+props:
+  length: 6
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: '○'
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the PinInput is focused.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: neutral
+  highlight: true
+  placeholder: '○'
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the PinInput.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: neutral
+  variant: subtle
+  highlight: false
+  placeholder: '○'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the PinInput.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  size: xl
+  placeholder: '○'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the PinInput.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  disabled: true
+  placeholder: '○'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme

docs/content/3.components/select-menu.md

@@ -235,6 +235,48 @@ props:
 ---
 ::
 
+::tip
+You can set the `search-input` prop to `false` to hide the search input.
+::
+
+### Create Item
+
+Use the `create-item` prop to allow user input.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - class
+external:
+  - items
+  - modelValue
+items:
+  createItem:
+    - true
+    - 'always'
+props:
+  modelValue: 'Backlog'
+  createItem: true
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+  class: 'w-48'
+---
+::
+
+::note
+The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.
+::
+
+::tip{to="#emits"}
+Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.
+::
+
 ### Content
 
 Use the `content` prop to control how the SelectMenu content is rendered, like its `align` or `side` for example.

docs/package.json

@@ -3,15 +3,16 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.13",
+    "@iconify-json/logos": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.15",
     "@iconify-json/simple-icons": "^1.2.11",
     "@iconify-json/vscode-icons": "^1.2.2",
     "@nuxt/content": "3.0.0-alpha.6",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@7c62edd",
-    "@nuxthub/core": "^0.8.6",
-    "@nuxtjs/plausible": "^1.0.3",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@574082c",
+    "@nuxthub/core": "^0.8.7",
+    "@nuxtjs/plausible": "^1.1.1",
     "@octokit/rest": "^21.0.2",
     "@vueuse/nuxt": "^11.2.0",
     "joi": "^17.13.3",
@@ -27,6 +28,6 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "wrangler": "^3.86.1"
+    "wrangler": "^3.87.0"
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-alpha.8",
-  "packageManager": "pnpm@9.12.3",
+  "version": "3.0.0-alpha.9",
+  "packageManager": "pnpm@9.13.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -55,6 +55,7 @@
     "build": "nuxt-module-build build && pnpm devtools:build",
     "prepack": "pnpm build",
     "dev": "DEV=true nuxi dev playground",
+    "dev:vue": "DEV=true vite playground-vue",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && nuxi prepare devtools && vite build playground-vue",
     "devtools": "NUXT_UI_DEVTOOLS_LOCAL=true nuxi dev playground",
@@ -68,58 +69,60 @@
     "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && nuxi typecheck devtools && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
+    "test:vue:build": "vite build playground-vue",
     "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
+    "@internationalized/number": "^3.5.4",
     "@nuxt/devtools-kit": "^1.6.0",
     "@nuxt/fonts": "^0.10.2",
-    "@nuxt/icon": "^1.7.2",
+    "@nuxt/icon": "^1.8.1",
     "@nuxt/kit": "^3.14.159",
     "@nuxt/schema": "^3.14.159",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "4.0.0-alpha.33",
-    "@tailwindcss/vite": "4.0.0-alpha.33",
+    "@tailwindcss/postcss": "4.0.0-alpha.34",
+    "@tailwindcss/vite": "4.0.0-alpha.34",
     "@tanstack/vue-table": "^8.20.5",
     "@unhead/vue": "^1.11.11",
     "@vueuse/core": "^11.2.0",
     "@vueuse/integrations": "^11.2.0",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
-    "embla-carousel-auto-height": "^8.3.1",
-    "embla-carousel-auto-scroll": "^8.3.1",
-    "embla-carousel-autoplay": "^8.3.1",
-    "embla-carousel-class-names": "^8.3.1",
-    "embla-carousel-fade": "^8.3.1",
-    "embla-carousel-vue": "^8.3.1",
+    "embla-carousel-auto-height": "^8.4.0",
+    "embla-carousel-auto-scroll": "^8.4.0",
+    "embla-carousel-autoplay": "^8.4.0",
+    "embla-carousel-class-names": "^8.4.0",
+    "embla-carousel-fade": "^8.4.0",
+    "embla-carousel-vue": "^8.4.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "fuse.js": "^7.0.0",
     "get-port-please": "^3.1.2",
     "knitwork": "^1.1.0",
-    "magic-string": "^0.30.12",
-    "mlly": "^1.7.2",
+    "magic-string": "^0.30.13",
+    "mlly": "^1.7.3",
     "ohash": "^1.1.4",
     "pathe": "^1.1.2",
-    "radix-vue": "^1.9.9",
+    "radix-vue": "^1.9.10",
     "scule": "^1.3.0",
     "sirv": "^3.0.0",
-    "tailwind-variants": "^0.2.1",
-    "tailwindcss": "4.0.0-alpha.33",
+    "tailwind-variants": "^0.3.0",
+    "tailwindcss": "4.0.0-alpha.34",
     "tinyglobby": "^0.2.10",
-    "unplugin": "^1.15.0",
-    "unplugin-auto-import": "^0.18.3",
+    "unplugin": "^1.16.0",
+    "unplugin-auto-import": "^0.18.5",
     "unplugin-vue-components": "^0.27.4",
     "vaul-vue": "^0.2.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.6.1",
+    "@nuxt/eslint-config": "^0.7.1",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/test-utils": "^3.14.4",
-    "@release-it/conventional-changelog": "^9.0.2",
+    "@release-it/conventional-changelog": "^9.0.3",
     "@standard-schema/spec": "1.0.0-beta.3",
     "@vue/test-utils": "^2.4.6",
-    "embla-carousel": "^8.3.1",
-    "eslint": "^9.14.0",
+    "embla-carousel": "^8.4.0",
+    "eslint": "^9.15.0",
     "happy-dom": "^15.7.4",
     "joi": "^17.13.3",
     "knitwork": "^1.1.0",
@@ -128,7 +131,7 @@
     "release-it": "^17.10.0",
     "superstruct": "^2.0.2",
     "valibot": "^0.42.1",
-    "vitest": "^2.1.4",
+    "vitest": "^2.1.5",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.1.10",
     "yup": "^1.4.0",

playground-vue/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@nuxt/ui": "latest",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.5",
+    "@vitejs/plugin-vue": "^5.2.0",
     "typescript": "^5.6.3",
-    "unplugin-auto-import": "^0.18.3",
+    "unplugin-auto-import": "^0.18.5",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.11",
     "vue-tsc": "^2.1.10"

playground-vue/src/app.vue

@@ -2,12 +2,14 @@
 import { splitByCase, upperFirst } from 'scule'
 import { useRouter } from 'vue-router'
 import { reactive, ref } from 'vue'
+import { useColorMode } from '@vueuse/core'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore included for compatibility with Nuxt playground
 import { useAppConfig } from '#imports'
 
 const appConfig = useAppConfig()
+const mode = useColorMode()
 
 appConfig.toaster = reactive({
   position: 'bottom-right' as const,
@@ -43,6 +45,7 @@ const components = [
   'modal',
   'navigation-menu',
   'pagination',
+  'pin-input',
   'popover',
   'progress',
   'radio-group',
@@ -83,6 +86,16 @@ defineShortcuts({
       <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
       <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
 
+      <div class="fixed top-4 right-4 flex items-center gap-2">
+        <UButton
+          :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
+          color="neutral"
+          variant="ghost"
+          :aria-label="`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`"
+          @click="mode = mode === 'dark' ? 'light' : 'dark'"
+        />
+      </div>
+
       <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
         <Suspense>
           <RouterView />
@@ -103,7 +116,7 @@ defineShortcuts({
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;

playground/app/app.vue

@@ -1,8 +1,21 @@
 <script setup lang="ts">
 import { splitByCase, upperFirst } from 'scule'
+import { useColorMode } from '#imports'
 
-const appConfig = useAppConfig()
 const router = useRouter()
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+defineOptions({ inheritAttrs: false })
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
 
 const components = [
   'accordion',
@@ -25,11 +38,13 @@ const components = [
   'form-field',
   'input',
   'input-menu',
+  'input-number',
   'kbd',
   'link',
   'modal',
   'navigation-menu',
   'pagination',
+  'pin-input',
   'popover',
   'progress',
   'radio-group',
@@ -72,6 +87,22 @@ defineShortcuts({
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
         <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
 
+        <div class="fixed top-4 right-4 flex items-center gap-2">
+          <ClientOnly v-if="!colorMode?.forced">
+            <UButton
+              :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+              color="neutral"
+              variant="ghost"
+              :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+              @click="isDark = !isDark"
+            />
+
+            <template #fallback>
+              <div class="size-8" />
+            </template>
+          </ClientOnly>
+        </div>
+
         <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
           <NuxtPage />
         </div>
@@ -94,7 +125,7 @@ defineShortcuts({
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;

playground/app/pages/components/input-number.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 w-48">
+      <UInputNumber />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputNumber
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputNumber
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        color="neutral"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputNumber
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        color="error"
+        highlight
+        class="w-48"
+      />
+    </div>
+    <div class="flex flex-col gap-4 w-48">
+      <UInputNumber placeholder="Disabled" disabled />
+      <UInputNumber placeholder="Required" required />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputNumber
+        v-for="size in sizes"
+        :key="size"
+        :size="size"
+        :placeholder="`Horizontal ${size}`"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputNumber
+        v-for="size in sizes"
+        :key="size"
+        :size="size"
+        class="w-48"
+        :placeholder="`Vertical ${size}`"
+        orientation="vertical"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import theme from '#build/ui/input-number'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+</script>

playground/app/pages/components/pin-input.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import theme from '#build/ui/pin-input'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+
+const onComplete = (e: string[]) => {
+  alert(e.join(''))
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex gap-4">
+      <UPinInput placeholder="○" autofocus @complete="onComplete" />
+    </div>
+    <div class="flex items-center gap-4">
+      <UPinInput v-for="variant in variants" :key="variant" placeholder="○" :variant="variant" />
+    </div>
+    <div class="flex items-center gap-4">
+      <UPinInput
+        v-for="variant in variants"
+        :key="variant"
+        placeholder="○"
+        :variant="variant"
+        color="neutral"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UPinInput
+        v-for="variant in variants"
+        :key="variant"
+        placeholder="○"
+        :variant="variant"
+        color="error"
+        highlight
+      />
+    </div>
+    <div class="flex flex-col gap-4">
+      <UPinInput placeholder="○" disabled />
+      <UPinInput placeholder="○" required />
+    </div>
+    <div class="flex items-center gap-4">
+      <UPinInput
+        v-for="size in sizes"
+        :key="size"
+        placeholder="○"
+        :size="size"
+      />
+    </div>
+  </div>
+</template>

playground/package.json

@@ -8,7 +8,8 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.13",
+    "@iconify-json/lucide": "^1.2.15",
+    "@iconify-json/simple-icons": "^1.2.11",
     "@nuxt/ui": "latest",
     "nuxt": "^3.14.159"
   }

src/runtime/components/Alert.vue

@@ -3,7 +3,6 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/alert'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
@@ -29,6 +28,7 @@ export interface AlertProps {
    * Display a list of actions:
    * - under the title and description if multiline
    * - next to the close button if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
   /**
@@ -66,6 +66,7 @@ extendDevtoolsMeta<AlertProps>({ defaultProps: { title: 'Heads up!' } })
 import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
@@ -125,7 +126,7 @@ const ui = computed(() => alert({
           size="md"
           color="neutral"
           variant="link"
-          :aria-label="t('ui.alert.close')"
+          :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : undefined"
           :class="ui.close({ class: props.ui?.close })"
           @click="emits('update:open', false)"

src/runtime/components/App.vue

@@ -3,8 +3,9 @@ import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
 import { localeContextInjectionKey } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ToasterProps, Locale } from '../types'
+import { en } from '../locale'
 
-export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
   locale?: Locale
@@ -32,15 +33,16 @@ import USlideoverProvider from './SlideoverProvider.vue'
 const props = defineProps<AppProps>()
 defineSlots<AppSlots>()
 
-const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
+const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
 
-provide(localeContextInjectionKey, computed(() => props.locale))
+const locale = computed(() => props.locale || en)
+provide(localeContextInjectionKey, locale)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" :dir="locale.dir" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />

src/runtime/components/Breadcrumb.vue

@@ -21,7 +21,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
 export interface BreadcrumbProps<T> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @defaultValue 'nav'
    */
   as?: any
   items?: T[]
@@ -76,8 +76,10 @@ extendDevtoolsMeta({
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">
+import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import { get } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
@@ -86,12 +88,15 @@ import ULinkBase from './LinkBase.vue'
 import ULink from './Link.vue'
 
 const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  as: 'nav',
   labelKey: 'label'
 })
 const slots = defineSlots<BreadcrumbSlots<T>>()
-
+const { dir } = useLocale()
 const appConfig = useAppConfig()
 
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = breadcrumb()
 </script>
@@ -123,7 +128,7 @@ const ui = breadcrumb()
 
         <li v-if="index < items!.length - 1" role="presentation" :class="ui.separator({ class: props.ui?.separator })">
           <slot name="separator">
-            <UIcon :name="separatorIcon || appConfig.ui.icons.chevronRight" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
+            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
           </slot>
         </li>
       </template>

src/runtime/components/Carousel.vue

@@ -10,7 +10,6 @@ import type { FadeOptionsType } from 'embla-carousel-fade'
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/carousel'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ButtonProps } from '../types'
 import type { AcceptableValue, PartialString } from '../types/utils'
@@ -101,6 +100,7 @@ import useEmblaCarousel from 'embla-carousel-vue'
 import { useForwardProps } from 'radix-vue'
 import { reactivePick, computedAsync } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<CarouselProps<T>>(), {
@@ -135,9 +135,12 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
 defineSlots<CarouselSlots<T>>()
 
 const appConfig = useAppConfig()
-const { t } = useLocale()
+const { dir, t } = useLocale()
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight))
+
 const ui = computed(() => carousel({
   orientation: props.orientation
 }))
@@ -146,8 +149,7 @@ const options = computed<EmblaOptionsType>(() => ({
   ...(props.fade ? { align: 'center', containScroll: false } : {}),
   ...rootProps.value,
   axis: props.orientation === 'horizontal' ? 'x' : 'y',
-  // TODO: Get from ConfigProvider
-  direction: 'ltr'
+  direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
 }))
 
 const plugins = computedAsync<EmblaPluginType[]>(async () => {
@@ -277,22 +279,22 @@ defineExpose({
       <div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
         <UButton
           :disabled="!canScrollPrev"
-          :icon="prevIcon || appConfig.ui.icons.arrowLeft"
+          :icon="prevIcon"
           size="md"
           color="neutral"
           variant="outline"
-          :aria-label="t('ui.carousel.prev')"
+          :aria-label="t('carousel.prev')"
           v-bind="typeof prev === 'object' ? prev : undefined"
           :class="ui.prev({ class: props.ui?.prev })"
           @click="scrollPrev"
         />
         <UButton
           :disabled="!canScrollNext"
-          :icon="nextIcon || appConfig.ui.icons.arrowRight"
+          :icon="nextIcon"
           size="md"
           color="neutral"
           variant="outline"
-          :aria-label="t('ui.carousel.next')"
+          :aria-label="t('carousel.next')"
           v-bind="typeof next === 'object' ? next : undefined"
           :class="ui.next({ class: props.ui?.next })"
           @click="scrollNext"
@@ -302,7 +304,7 @@ defineExpose({
       <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
-            :aria-label="t('ui.carousel.goto', { slide: index + 1 })"
+            :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
             @click="scrollTo(index)"
           />

src/runtime/components/CommandPalette.vue

@@ -7,7 +7,6 @@ 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 { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
@@ -36,7 +35,7 @@ export interface CommandPaletteGroup<T> {
   slot?: string
   items?: T[]
   /**
-   * Wether to filter group items with [useFuse](https://vueuse.org/integrations/useFuse).
+   * Whether 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
    */
@@ -125,6 +124,7 @@ import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import { omit, get } from '../utils'
 import { highlight } from '../utils/fuse'
 import UIcon from './Icon.vue'
@@ -247,7 +247,7 @@ const groups = computed(() => {
               size="md"
               color="neutral"
               variant="ghost"
-              :aria-label="t('ui.commandPalette.close')"
+              :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : undefined"
               :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
@@ -261,7 +261,7 @@ const groups = computed(() => {
       <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 ? t('ui.commandPalette.noMatch', { searchTerm }) : t('ui.commandPalette.noData') }}
+            {{ searchTerm ? t('commandPalette.noMatch', { searchTerm }) : t('commandPalette.noData') }}
           </slot>
         </ComboboxEmpty>
 

src/runtime/components/Form.vue

@@ -38,7 +38,7 @@ extendDevtoolsMeta({ example: 'FormExample' })
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
-import { getYupErrors, isYupSchema, getValibotErrors, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema, getStandardErrors, isStandardSchema, getSuperStructErrors, isSuperStructSchema } from '../utils/form'
+import { parseSchema } from '../utils/form'
 import { FormValidationException } from '../types/form'
 
 const props = withDefaults(defineProps<FormProps<T>>(), {
@@ -108,20 +108,11 @@ async function getErrors(): Promise<FormErrorWithId[]> {
   let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
 
   if (props.schema) {
-    if (isZodSchema(props.schema)) {
-      errs = errs.concat(await getZodErrors(props.state, props.schema))
-    } else if (isYupSchema(props.schema)) {
-      errs = errs.concat(await getYupErrors(props.state, props.schema))
-    } else if (isJoiSchema(props.schema)) {
-      errs = errs.concat(await getJoiErrors(props.state, props.schema))
-    } else if (isValibotSchema(props.schema)) {
-      errs = errs.concat(await getValibotErrors(props.state, props.schema))
-    } else if (isSuperStructSchema(props.schema)) {
-      errs = errs.concat(await getSuperStructErrors(props.state, props.schema))
-    } else if (isStandardSchema(props.schema)) {
-      errs = errs.concat(await getStandardErrors(props.state, props.schema))
+    const { errors, result } = await parseSchema(props.state, props.schema as FormSchema<typeof props.state>)
+    if (errors) {
+      errs = errs.concat(errors)
     } else {
-      throw new Error('Form validation failed: Unsupported form schema')
+      Object.assign(props.state, result)
     }
   }
 

src/runtime/components/FormField.vue

@@ -96,7 +96,7 @@ provide(formFieldInjectionKey, computed(() => ({
       </p>
     </div>
 
-    <div :class="[label && ui.container({ class: props.ui?.container })]">
+    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
       <p v-if="(typeof error === 'string' && error) || !!slots.error" :class="ui.error({ class: props.ui?.error })">

src/runtime/components/InputMenu.vue

@@ -6,7 +6,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrWrapped, PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -98,6 +97,11 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
   items?: I
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
+  /**
+   * Determines if custom user input that does not exist in options can be added.
+   * @defaultValue false
+   */
+  createItem?: boolean | 'always' | { placement?: 'top' | 'bottom', when?: 'empty' | 'always' }
   class?: any
   ui?: PartialString<typeof inputMenu.slots>
   /** The controlled value of the Combobox. Can be binded-with with `v-model`. */
@@ -110,6 +114,7 @@ export type InputMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>,
   change: [payload: Event]
   blur: [payload: FocusEvent]
   focus: [payload: FocusEvent]
+  create: [payload: Event, item: T]
 } & SelectModelValueEmits<T, V, M>
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
@@ -124,21 +129,23 @@ export interface InputMenuSlots<T> {
   'item-trailing': SlotProps<T>
   'tags-item-text': SlotProps<T>
   'tags-item-delete': SlotProps<T>
+  'create-item-label'(props: { item: T }): any
 }
 
 extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue> = MaybeArrayOfArray<InputMenuItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
-import { computed, ref, toRef, onMounted } from 'vue'
+import { computed, ref, toRef, onMounted, toRaw } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { isEqual } from 'ohash'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
 import { get, escapeRegExp } from '../utils'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
@@ -170,6 +177,8 @@ const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color,
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
+const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
+
 const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
 
 const ui = computed(() => inputMenu({
@@ -194,23 +203,27 @@ function displayValue(value: T): string {
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
-function filterFunction(items: ArrayOrWrapped<T>, searchTerm: string): ArrayOrWrapped<T> {
+function filterFunction(
+  inputItems: ArrayOrWrapped<T> = items.value as ArrayOrWrapped<T>,
+  filterSearchTerm: string = searchTerm.value,
+  comparator = (item: any, term: string) => String(item).search(new RegExp(term, 'i')) !== -1
+): ArrayOrWrapped<T> {
   if (props.filter === false) {
-    return items
+    return inputItems
   }
 
   const fields = Array.isArray(props.filter) ? props.filter : [props.labelKey]
-  const escapedSearchTerm = escapeRegExp(searchTerm)
+  const escapedSearchTerm = escapeRegExp(filterSearchTerm ?? '')
 
-  return items.filter((item) => {
+  return inputItems.filter((item) => {
     if (typeof item !== 'object') {
-      return String(item).search(new RegExp(escapedSearchTerm, 'i')) !== -1
+      return comparator(item, escapedSearchTerm)
     }
 
     return fields.some((field) => {
       const child = get(item, field as string)
 
-      return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
+      return child !== null && child !== undefined && comparator(child, escapedSearchTerm)
     })
   }) as ArrayOrWrapped<T>
 }
@@ -219,6 +232,36 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 // eslint-disable-next-line vue/no-dupe-keys
 const items = computed(() => groups.value.flatMap(group => group) as T[])
 
+const creatable = computed(() => {
+  if (!props.createItem) {
+    return false
+  }
+
+  const isModelValueCustom = props.modelValue && filterFunction((props.multiple && Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]) as ArrayOrWrapped<T>, searchTerm.value, (item, term) => String(item) === term).length === 1
+
+  if (isModelValueCustom) {
+    return false
+  }
+
+  const filteredItems = filterFunction()
+  const newItem = searchTerm.value && {
+    item: props.valueKey ? { [props.valueKey]: searchTerm.value, [props.labelKey ?? 'label']: searchTerm.value } : searchTerm.value,
+    position: ((typeof props.createItem === 'object' && props.createItem.placement) || 'bottom') as 'top' | 'bottom'
+  }
+
+  if ((typeof props.createItem === 'object' && props.createItem.when === 'always') || props.createItem === 'always') {
+    return (filteredItems.length === 1 && filterFunction(filteredItems, searchTerm.value, (item, term) => String(item) === term).length === 1) ? false : newItem
+  }
+
+  return filteredItems.length > 0 ? false : newItem
+})
+
+const rootItems = computed(() => [
+  ...(creatable.value && creatable.value.position === 'top' ? [creatable.value.item] : []),
+  ...filterFunction(),
+  ...(creatable.value && creatable.value.position === 'bottom' ? [creatable.value.item] : [])
+] as ArrayOrWrapped<T>)
+
 const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
 
 function autoFocus() {
@@ -234,6 +277,9 @@ onMounted(() => {
 })
 
 function onUpdate(value: any) {
+  if (toRaw(props.modelValue) === value) {
+    return
+  }
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emits('change', event)
@@ -267,6 +313,22 @@ defineExpose({
 </script>
 
 <template>
+  <DefineCreateItemTemplate>
+    <ComboboxGroup v-if="creatable" :class="ui.group({ class: props.ui?.group })">
+      <ComboboxItem
+        :class="ui.item({ class: props.ui?.item })"
+        :value="valueKey && typeof creatable.item === 'object' ? get(creatable.item, props.valueKey as string) : creatable.item"
+        @select="e => emits('create', e, (creatable as any).item as T)"
+      >
+        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+          <slot name="create-item-label" :item="(creatable.item as T)">
+            {{ t('inputMenu.create', { label: typeof creatable.item === 'object' ? get(creatable.item, props.labelKey as string) : creatable.item }) }}
+          </slot>
+        </span>
+      </ComboboxItem>
+    </ComboboxGroup>
+  </DefineCreateItemTemplate>
+
   <ComboboxRoot
     :id="id"
     v-slot="{ modelValue, open }"
@@ -276,7 +338,7 @@ defineExpose({
     :disabled="disabled"
     :multiple="multiple"
     :display-value="displayValue"
-    :filter-function="filterFunction"
+    :filter-function="() => rootItems"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :as-child="!!multiple"
     @update:model-value="onUpdate"
@@ -350,11 +412,13 @@ defineExpose({
       <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
           <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? t('ui.inputMenu.noMatch', { searchTerm }) : t('ui.inputMenu.noData') }}
+            {{ searchTerm ? t('inputMenu.noMatch', { searchTerm }) : t('inputMenu.noData') }}
           </slot>
         </ComboboxEmpty>
 
         <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+          <ReuseCreateItemTemplate v-if="creatable && creatable.position === 'top'" />
+
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
@@ -401,6 +465,8 @@ defineExpose({
               </ComboboxItem>
             </template>
           </ComboboxGroup>
+
+          <ReuseCreateItemTemplate v-if="creatable && creatable.position === 'bottom'" />
         </ComboboxViewport>
 
         <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />

src/runtime/components/InputNumber.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { NumberFieldRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/input-number'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { inputNumber: Partial<typeof theme> } }
+
+const inputNumber = tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  ui?: Partial<typeof inputNumber.slots>
+  color?: InputNumberVariants['color']
+  variant?: InputNumberVariants['variant']
+  size?: InputNumberVariants['size']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * The orientation of the input menu.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Configure the increment button. The `color` and `size` are inherited.
+   * @defaultValue { variant: 'link' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @defaultValue appConfig.ui.icons.plus
+   */
+  incrementIcon?: string
+  /**
+   * Configure the decrement button. The `color` and `size` are inherited.
+   * @defaultValue { variant: 'link' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @defaultValue appConfig.ui.icons.minus
+   */
+  decrementIcon?: string
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue UApp.locale.code
+   */
+  locale?: string
+}
+
+export interface InputNumberEmits {
+  (e: 'update:modelValue', payload: number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', payload: Event): void
+}
+
+export interface InputNumberSlots {
+  increment(props?: {}): any
+  decrement(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import UButton from './Button.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal'
+})
+const emits = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emits)
+
+const { emitFormBlur, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled } = useFormField<InputNumberProps>(props)
+
+const { t, code: codeLocale } = useLocale()
+const locale = computed(() => props.locale || codeLocale.value)
+
+const ui = computed(() => inputNumber({
+  color: color.value,
+  variant: props.variant,
+  size: size.value,
+  highlight: highlight.value,
+  orientation: props.orientation
+}))
+
+const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
+const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown))
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="id"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :name="name"
+    :disabled="disabled"
+    :locale="locale"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="$attrs"
+      ref="inputRef"
+      :placeholder="placeholder"
+      :required="required"
+      :class="ui.base({ class: props.ui?.base })"
+      @blur="onBlur"
+    />
+
+    <div :class="ui.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="disabled">
+        <slot name="increment">
+          <UButton
+            :icon="incrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof increment === 'object' ? increment : undefined"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="ui.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="disabled">
+        <slot name="decrement">
+          <UButton
+            :icon="decrementIcon"
+            :color="color"
+            :size="size"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof decrement === 'object' ? decrement : undefined"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>

src/runtime/components/Link.vue

@@ -73,8 +73,8 @@ export interface LinkProps extends NuxtLinkProps {
   active?: boolean
   /** Will only be active if the current route is an exact match. */
   exact?: boolean
-  /** Will only be active if the current route query is an exact match. */
-  exactQuery?: boolean
+  /** Allows controlling how the current route query sets the link as active. */
+  exactQuery?: boolean | 'partial'
   /** Will only be active if the current route hash is an exact match. */
   exactHash?: boolean
   /** The class to apply when the link is inactive. */
@@ -94,7 +94,7 @@ extendDevtoolsMeta({ example: 'LinkExample' })
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isEqual } from 'ohash'
+import { isEqual, diff } from 'ohash'
 import { useForwardProps } from 'radix-vue'
 import { reactiveOmit } from '@vueuse/core'
 import { useRoute } from '#imports'
@@ -124,14 +124,27 @@ const ui = computed(() => tv({
   }
 }))
 
+function isPartiallyEqual(item1: any, item2: any) {
+  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+    if (q.type === 'added') {
+      filtered.push(q.key)
+    }
+    return filtered
+  }, [] as string[])
+  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+}
+
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined) {
     return props.active
   }
 
-  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
-    return false
+  if (props.exactQuery === 'partial') {
+    if (!isPartiallyEqual(linkRoute.query, route.query)) return false
+  } else if (props.exactQuery === true) {
+    if (!isEqual(linkRoute.query, route.query)) return false
   }
+
   if (props.exactHash && linkRoute.hash !== route.hash) {
     return false
   }

src/runtime/components/Modal.vue

@@ -4,7 +4,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/modal'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ButtonProps } from '../types'
 
@@ -78,6 +77,7 @@ import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
@@ -101,7 +101,13 @@ const contentEvents = computed(() => {
     }
   }
 
-  return {}
+  return {
+    interactOutside: (e: Event) => {
+      if (e.target instanceof Element && e.target.closest('[data-sonner-toaster]')) {
+        return e.preventDefault()
+      }
+    }
+  }
 })
 
 const appConfig = useAppConfig()
@@ -146,7 +152,7 @@ const ui = computed(() => modal({
                     size="md"
                     color="neutral"
                     variant="ghost"
-                    :aria-label="t('ui.modal.close')"
+                    :aria-label="t('modal.close')"
                     v-bind="typeof close === 'object' ? close : undefined"
                     :class="ui.close({ class: props.ui?.close })"
                   />

src/runtime/components/Pagination.vue

@@ -103,9 +103,11 @@ extendDevtoolsMeta({ defaultProps: { total: 50 } })
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<PaginationProps>(), {
@@ -124,9 +126,14 @@ const emits = defineEmits<PaginationEmits>()
 const slots = defineSlots<PaginationSlots>()
 
 const appConfig = useAppConfig()
-
+const { dir } = useLocale()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
 
+const firstIcon = computed(() => props.firstIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+const lastIcon = computed(() => props.lastIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
+
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = pagination()
 </script>
@@ -136,12 +143,12 @@ const ui = pagination()
     <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
       <PaginationFirst v-if="showControls || !!slots.first" as-child>
         <slot name="first">
-          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon || appConfig.ui.icons.chevronDoubleLeft" :to="to?.(1)" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
         </slot>
       </PaginationFirst>
       <PaginationPrev v-if="showControls || !!slots.prev" as-child>
         <slot name="prev">
-          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon || appConfig.ui.icons.chevronLeft" :to="page > 1 ? to?.(page - 1) : undefined" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
@@ -169,12 +176,12 @@ const ui = pagination()
 
       <PaginationNext v-if="showControls || !!slots.next" as-child>
         <slot name="next">
-          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon || appConfig.ui.icons.chevronRight" :to="page < pageCount ? to?.(pageCount) : undefined" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(pageCount) : undefined" />
         </slot>
       </PaginationNext>
       <PaginationLast v-if="showControls || !!slots.last" as-child>
         <slot name="last">
-          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon || appConfig.ui.icons.chevronDoubleRight" :to=" to?.(pageCount)" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to=" to?.(pageCount)" />
         </slot>
       </PaginationLast>
     </PaginationList>

src/runtime/components/PinInput.vue

@@ -0,0 +1,96 @@
+<script lang="ts">
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/pin-input'
+import type { AppConfig } from '@nuxt/schema'
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { pinInput: Partial<typeof theme> } }
+
+const pinInput = tv({ extend: tv(theme), ...(appConfig.ui?.pinInput || {}) })
+
+type PinInputVariants = VariantProps<typeof pinInput>
+
+export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  color?: PinInputVariants['color']
+  variant?: PinInputVariants['variant']
+  size?: PinInputVariants['size']
+  length?: number | string
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof pinInput.slots>
+}
+
+export type PinInputEmits = PinInputRootEmits & {
+  change: [payload: Event]
+  blur: [payload: Event]
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { looseToNumber } from '../utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<PinInputProps>(), {
+  type: 'text',
+  length: 5
+})
+const emits = defineEmits<PinInputEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emits)
+const { emitFormInput, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled } = useFormField<PinInputProps>(props)
+
+const ui = computed(() => pinInput({
+  color: color.value,
+  variant: props.variant,
+  size: size.value,
+  highlight: highlight.value
+}))
+
+const completed = ref(false)
+function onComplete(value: string[]) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+}
+
+function onBlur(event: FocusEvent) {
+  if (!event.relatedTarget || completed.value) {
+    emits('blur', event)
+    emitFormBlur()
+  }
+}
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="rootProps"
+    :id="id"
+    :name="name"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="emitFormInput()"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :index="index"
+      :class="ui.base({ class: props.ui?.base })"
+      v-bind="$attrs"
+      :disabled="disabled"
+      @blur="onBlur"
+    />
+  </PinInputRoot>
+</template>

src/runtime/components/SelectMenu.vue

@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/select-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ChipProps, InputProps } from '../types'
 import type { AcceptableValue, ArrayOrWrapped, PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
@@ -35,7 +34,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   /** The placeholder text when the select is empty. */
   placeholder?: string
   /**
-   * Wether to display the search input or not.
+   * Whether to display the search input or not.
    * Can be an object to pass additional props to the input.
    * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
    * @defaultValue true
@@ -90,6 +89,11 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   items?: I
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
+  /**
+   * Determines if custom user input that does not exist in options can be added.
+   * @defaultValue false
+   */
+  createItem?: boolean | 'always' | { placement?: 'top' | 'bottom', when?: 'empty' | 'always' }
   class?: any
   ui?: PartialString<typeof selectMenu.slots>
   /** The controlled value of the Combobox. Can be binded-with with `v-model`. */
@@ -102,6 +106,7 @@ export type SelectMenuEmits<T, V, M extends boolean> = Omit<ComboboxRootEmits<T>
   change: [payload: Event]
   blur: [payload: FocusEvent]
   focus: [payload: FocusEvent]
+  create: [payload: Event, item: T]
 } & SelectModelValueEmits<T, V, M>
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
@@ -115,21 +120,23 @@ export interface SelectMenuSlots<T> {
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
+  'create-item-label'(props: { item: T }): any
 }
 
 extendDevtoolsMeta({ defaultProps: { items: ['Option 1', 'Option 2', 'Option 3'] } })
 </script>
 
 <script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
-import { computed, toRef } from 'vue'
+import { computed, toRef, toRaw } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { isEqual } from 'ohash'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
 import { get, escapeRegExp } from '../utils'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
@@ -160,6 +167,8 @@ const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: 'Sea
 // This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541)
 const multiple = toRef(() => typeof props.multiple === 'string' ? true : props.multiple)
 
+const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate()
+
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -186,28 +195,32 @@ function displayValue(value: T | T[]): string {
     return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
   }
 
-  const item = items.value.find(item => isEqual(get(item as Record<string, any>, props.valueKey as string), value))
+  const item = items.value.find(item => isEqual(get(item as Record<string, any>, props.valueKey as string), value)) ?? (props.createItem && value)
 
   return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
 }
 
-function filterFunction(items: ArrayOrWrapped<T>, searchTerm: string): ArrayOrWrapped<T> {
+function filterFunction(
+  inputItems: ArrayOrWrapped<T> = items.value as ArrayOrWrapped<T>,
+  filterSearchTerm: string = searchTerm.value,
+  comparator = (item: any, term: string) => String(item).search(new RegExp(term, 'i')) !== -1
+): ArrayOrWrapped<T> {
   if (props.filter === false) {
-    return items
+    return inputItems
   }
 
   const fields = Array.isArray(props.filter) ? props.filter : [props.labelKey]
-  const escapedSearchTerm = escapeRegExp(searchTerm)
+  const escapedSearchTerm = escapeRegExp(filterSearchTerm)
 
-  return items.filter((item: T) => {
+  return inputItems.filter((item: T) => {
     if (typeof item !== 'object') {
-      return String(item).search(new RegExp(escapedSearchTerm, 'i')) !== -1
+      return comparator(item, escapedSearchTerm)
     }
 
     return fields.some((field) => {
       const child = get(item, field as string)
 
-      return child !== null && child !== undefined && String(child).search(new RegExp(escapedSearchTerm, 'i')) !== -1
+      return child !== null && child !== undefined && comparator(child, escapedSearchTerm)
     })
   }) as ArrayOrWrapped<T>
 }
@@ -216,7 +229,40 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 // eslint-disable-next-line vue/no-dupe-keys
 const items = computed(() => groups.value.flatMap(group => group) as T[])
 
+const creatable = computed(() => {
+  if (!props.createItem) {
+    return false
+  }
+
+  const isModelValueCustom = props.modelValue && filterFunction((props.multiple && Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]) as ArrayOrWrapped<T>, searchTerm.value, (item, term) => String(item) === term).length === 1
+
+  if (isModelValueCustom) {
+    return false
+  }
+
+  const filteredItems = filterFunction()
+  const newItem = searchTerm.value && {
+    item: props.valueKey ? { [props.valueKey]: searchTerm.value, [props.labelKey ?? 'label']: searchTerm.value } : searchTerm.value,
+    position: ((typeof props.createItem === 'object' && props.createItem.placement) || 'bottom') as 'top' | 'bottom'
+  }
+
+  if ((typeof props.createItem === 'object' && props.createItem.when === 'always') || props.createItem === 'always') {
+    return (filteredItems.length === 1 && filterFunction(filteredItems, searchTerm.value, (item, term) => String(item) === term).length === 1) ? false : newItem
+  }
+
+  return filteredItems.length > 0 ? false : newItem
+})
+
+const rootItems = computed(() => [
+  ...(creatable.value && creatable.value.position === 'top' ? [creatable.value.item] : []),
+  ...filterFunction(),
+  ...(creatable.value && creatable.value.position === 'bottom' ? [creatable.value.item] : [])
+] as ArrayOrWrapped<T>)
+
 function onUpdate(value: any) {
+  if (toRaw(props.modelValue) === value) {
+    return
+  }
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emits('change', event)
@@ -237,6 +283,22 @@ function onUpdateOpen(value: boolean) {
 </script>
 
 <template>
+  <DefineCreateItemTemplate>
+    <ComboboxGroup v-if="creatable" :class="ui.group({ class: props.ui?.group })">
+      <ComboboxItem
+        :class="ui.item({ class: props.ui?.item })"
+        :value="valueKey && typeof creatable.item === 'object' ? get(creatable.item, props.valueKey as string) : creatable.item"
+        @select="e => emits('create', e, (creatable as any).item as T)"
+      >
+        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+          <slot name="create-item-label" :item="(creatable.item as T)">
+            {{ t('selectMenu.create', { label: typeof creatable.item === 'object' ? get(creatable.item, props.labelKey as string) : creatable.item }) }}
+          </slot>
+        </span>
+      </ComboboxItem>
+    </ComboboxGroup>
+  </DefineCreateItemTemplate>
+
   <ComboboxRoot
     :id="id"
     v-slot="{ modelValue, open }"
@@ -247,7 +309,7 @@ function onUpdateOpen(value: boolean) {
     :disabled="disabled"
     :multiple="multiple"
     :display-value="() => searchTerm"
-    :filter-function="filterFunction"
+    :filter-function="() => rootItems"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
@@ -287,11 +349,13 @@ function onUpdateOpen(value: boolean) {
 
         <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
           <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? t('ui.selectMenu.noMatch', { searchTerm }) : t('ui.selectMenu.noData') }}
+            {{ searchTerm ? t('selectMenu.noMatch', { searchTerm }) : t('selectMenu.noData') }}
           </slot>
         </ComboboxEmpty>
 
         <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
+          <ReuseCreateItemTemplate v-if="creatable && creatable.position === 'top'" />
+
           <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
               <ComboboxLabel v-if="item?.type === 'label'" :class="ui.label({ class: props.ui?.label })">
@@ -338,6 +402,8 @@ function onUpdateOpen(value: boolean) {
               </ComboboxItem>
             </template>
           </ComboboxGroup>
+
+          <ReuseCreateItemTemplate v-if="creatable && creatable.position === 'bottom'" />
         </ComboboxViewport>
 
         <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />

src/runtime/components/Slideover.vue

@@ -4,7 +4,6 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slideover'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { ButtonProps } from '../types'
 
@@ -76,6 +75,7 @@ import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<SlideoverProps>(), {
@@ -100,7 +100,13 @@ const contentEvents = computed(() => {
     }
   }
 
-  return {}
+  return {
+    interactOutside: (e: Event) => {
+      if (e.target instanceof Element && e.target.closest('[data-sonner-toaster]')) {
+        return e.preventDefault()
+      }
+    }
+  }
 })
 
 const appConfig = useAppConfig()
@@ -145,7 +151,7 @@ const ui = computed(() => slideover({
                     size="md"
                     color="neutral"
                     variant="ghost"
-                    :aria-label="t('ui.slideover.close')"
+                    :aria-label="t('slideover.close')"
                     v-bind="typeof close === 'object' ? close : undefined"
                     :class="ui.close({ class: props.ui?.close })"
                   />

src/runtime/components/Table.vue

@@ -25,7 +25,6 @@ import type {
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
-import { useLocale } from '../composables/useLocale'
 
 const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
 
@@ -113,6 +112,7 @@ import {
   useVueTable
 } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
+import { useLocale } from '../composables/useLocale'
 
 const props = defineProps<TableProps<T>>()
 defineSlots<TableSlots<T>>()
@@ -241,7 +241,7 @@ defineExpose({
         <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
           <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              {{ t('ui.table.noData') }}
+              {{ t('table.noData') }}
             </slot>
           </td>
         </tr>

src/runtime/components/Textarea.vue

@@ -151,7 +151,7 @@ function autoResize() {
   }
 }
 
-watch(() => modelValue, () => {
+watch(modelValue, () => {
   nextTick(autoResize)
 })
 

src/runtime/components/Toast.vue

@@ -4,7 +4,6 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
-import { useLocale } from '../composables/useLocale'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
@@ -29,6 +28,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * Display a list of actions:
    * - under the title and description if multiline
    * - next to the close button if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
   /**
@@ -64,6 +64,7 @@ import { ref, computed, onMounted } from 'vue'
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
 import UButton from './Button.vue'
@@ -153,7 +154,7 @@ defineExpose({
             size="md"
             color="neutral"
             variant="link"
-            :aria-label="t('ui.toast.close')"
+            :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : undefined"
             :class="ui.close({ class: props.ui?.close })"
             @click.stop

src/runtime/components/Toaster.vue

@@ -41,7 +41,7 @@ extendDevtoolsMeta({ example: 'ToasterExample' })
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
+import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useToast } from '../composables/useToast'
 import { omit } from '../utils'
@@ -126,7 +126,7 @@ function getOffset(index: number) {
       @click="toast.click && toast.click(toast)"
     />
 
-    <Teleport to="body" :disabled="!portal">
+    <ToastPortal :disabled="!portal">
       <ToastViewport
         :data-expanded="expanded"
         :class="ui.viewport({ class: [props.class, props.ui?.viewport] })"
@@ -140,6 +140,6 @@ function getOffset(index: number) {
         @mouseenter="hovered = true"
         @mouseleave="hovered = false"
       />
-    </Teleport>
+    </ToastPortal>
   </ToastProvider>
 </template>

src/runtime/composables/defineLocale.ts

@@ -1,9 +1,13 @@
-import type { Locale, LocalePair } from '../types/locale'
+import { defu } from 'defu'
+import type { Locale, Direction, Messages } from '../types/locale'
 
-export function defineLocale(name: string, code: string, pair: LocalePair): Locale {
-  return {
-    name,
-    code,
-    ui: pair
-  }
+interface DefineLocaleOptions {
+  name: string
+  code: string
+  dir?: Direction
+  messages: Messages
+}
+
+export function defineLocale(options: DefineLocaleOptions): Locale {
+  return defu<DefineLocaleOptions, [{ dir: Direction }]>(options, { dir: 'ltr' })
 }

src/runtime/composables/useLocale.ts

@@ -3,11 +3,17 @@ import type { InjectionKey, Ref } from 'vue'
 import type { Locale } from '../types/locale'
 import { buildLocaleContext } from '../utils/locale'
 import { en } from '../locale'
+import { createSharedComposable } from '@vueuse/core'
 
 export const localeContextInjectionKey: InjectionKey<Ref<Locale | undefined>> = Symbol('nuxt-ui.locale-context')
 
-export const useLocale = (localeOverrides?: Ref<Locale | undefined>) => {
+const _useLocale = (localeOverrides?: Ref<Locale | undefined>) => {
   const locale = localeOverrides || inject(localeContextInjectionKey, ref())!
 
+  /**
+   * If for some reason the developer does not use `UApp`, we get the language back just in case.
+   */
   return buildLocaleContext(computed(() => locale.value || en))
 }
+
+export const useLocale = createSharedComposable(_useLocale)

src/runtime/index.css

@@ -1,9 +1,5 @@
 @import './keyframes.css';
 
-@theme default {
-  --spacing-4_5: 1.125rem;
-}
-
 @variant dark (&:where(.dark, .dark *));
 
 @layer base {

src/runtime/locale/ar.ts

@@ -1,37 +1,48 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('العربية', 'ar', {
-  inputMenu: {
-    noMatch: 'لا توجد نتائج مطابقة',
-    noData: 'لا توجد بيانات'
-  },
-  commandPalette: {
-    noMatch: 'لا توجد نتائج مطابقة',
-    noData: 'لا توجد بيانات',
-    close: 'إغلاق'
-  },
-  selectMenu: {
-    noMatch: 'لا توجد نتائج مطابقة',
-    noData: 'لا توجد بيانات'
-  },
-  toast: {
-    close: 'إغلاق'
-  },
-  carousel: {
-    prev: 'السابق',
-    next: 'التالي',
-    goto: 'الذهاب إلي شريحة {slide}'
-  },
-  modal: {
-    close: 'إغلاق'
-  },
-  slideover: {
-    close: 'إغلاق'
-  },
-  alert: {
-    close: 'إغلاق'
-  },
-  table: {
-    noData: 'لا توجد بيانات'
+export default defineLocale({
+  name: 'العربية',
+  code: 'ar',
+  dir: 'rtl',
+  messages: {
+    inputMenu: {
+      noMatch: 'لا توجد نتائج مطابقة',
+      noData: 'لا توجد بيانات',
+      create: 'إنشاء "{label}"'
+    },
+    inputNumber: {
+      increment: 'زيادة',
+      decrement: 'تقليل'
+    },
+    commandPalette: {
+      noMatch: 'لا توجد نتائج مطابقة',
+      noData: 'لا توجد بيانات',
+      close: 'إغلاق'
+    },
+    selectMenu: {
+      noMatch: 'لا توجد نتائج مطابقة',
+      noData: 'لا توجد بيانات',
+      create: 'إنشاء "{label}"'
+    },
+    toast: {
+      close: 'إغلاق'
+    },
+    carousel: {
+      prev: 'السابق',
+      next: 'التالي',
+      goto: 'الذهاب إلي شريحة {slide}'
+    },
+    modal: {
+      close: 'إغلاق'
+    },
+    slideover: {
+      close: 'إغلاق'
+    },
+    alert: {
+      close: 'إغلاق'
+    },
+    table: {
+      noData: 'لا توجد بيانات'
+    }
   }
 })

src/runtime/locale/cs.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Čeština', 'cs', {
-  inputMenu: {
-    noMatch: 'Žádná shoda',
-    noData: 'Žádná data'
-  },
-  commandPalette: {
-    noMatch: 'Žádná shoda',
-    noData: 'Žádná data',
-    close: 'Zavřít'
-  },
-  selectMenu: {
-    noMatch: 'Žádná shoda',
-    noData: 'Žádná data'
-  },
-  toast: {
-    close: 'Zavřít'
-  },
-  carousel: {
-    prev: 'Předchozí',
-    next: 'Další',
-    goto: 'Přejít na {slide}'
-  },
-  modal: {
-    close: 'Zavřít'
-  },
-  slideover: {
-    close: 'Zavřít'
-  },
-  alert: {
-    close: 'Zavřít'
-  },
-  table: {
-    noData: 'Žádná data'
+export default defineLocale({
+  name: 'Čeština',
+  code: 'cs',
+  messages: {
+    inputMenu: {
+      noMatch: 'Žádná shoda',
+      noData: 'Žádná data',
+      create: 'Vytvořit "{label}"'
+    },
+    inputNumber: {
+      increment: 'Zvýšit',
+      decrement: 'Snížit'
+    },
+    commandPalette: {
+      noMatch: 'Žádná shoda',
+      noData: 'Žádná data',
+      close: 'Zavřít'
+    },
+    selectMenu: {
+      noMatch: 'Žádná shoda',
+      noData: 'Žádná data',
+      create: 'Vytvořit "{label}"'
+    },
+    toast: {
+      close: 'Zavřít'
+    },
+    carousel: {
+      prev: 'Předchozí',
+      next: 'Další',
+      goto: 'Přejít na {slide}'
+    },
+    modal: {
+      close: 'Zavřít'
+    },
+    slideover: {
+      close: 'Zavřít'
+    },
+    alert: {
+      close: 'Zavřít'
+    },
+    table: {
+      noData: 'Žádná data'
+    }
   }
 })

src/runtime/locale/de.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Deutsch', 'de', {
-  inputMenu: {
-    noMatch: 'Nichts gefunden',
-    noData: 'Keine Daten'
-  },
-  commandPalette: {
-    noMatch: 'Nichts gefunden',
-    noData: 'Keine Daten',
-    close: 'Schließen'
-  },
-  selectMenu: {
-    noMatch: 'Nichts gefunden',
-    noData: 'Keine Daten'
-  },
-  toast: {
-    close: 'Schließen'
-  },
-  carousel: {
-    prev: 'Weiter',
-    next: 'Zurück',
-    goto: 'Gehe zu {slide}'
-  },
-  modal: {
-    close: 'Schließen'
-  },
-  slideover: {
-    close: 'Schließen'
-  },
-  alert: {
-    close: 'Schließen'
-  },
-  table: {
-    noData: 'Keine Daten'
+export default defineLocale({
+  name: 'Deutsch',
+  code: 'de',
+  messages: {
+    inputMenu: {
+      noMatch: 'Nichts gefunden',
+      noData: 'Keine Daten',
+      create: '"{label}" erstellen'
+    },
+    inputNumber: {
+      increment: 'Erhöhen',
+      decrement: 'Verringern'
+    },
+    commandPalette: {
+      noMatch: 'Nichts gefunden',
+      noData: 'Keine Daten',
+      close: 'Schließen'
+    },
+    selectMenu: {
+      noMatch: 'Nichts gefunden',
+      noData: 'Keine Daten',
+      create: '"{label}" erstellen'
+    },
+    toast: {
+      close: 'Schließen'
+    },
+    carousel: {
+      prev: 'Weiter',
+      next: 'Zurück',
+      goto: 'Gehe zu {slide}'
+    },
+    modal: {
+      close: 'Schließen'
+    },
+    slideover: {
+      close: 'Schließen'
+    },
+    alert: {
+      close: 'Schließen'
+    },
+    table: {
+      noData: 'Keine Daten'
+    }
   }
 })

src/runtime/locale/en.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('English', 'en', {
-  inputMenu: {
-    noMatch: 'No matching data',
-    noData: 'No data'
-  },
-  commandPalette: {
-    noMatch: 'No matching data',
-    noData: 'No data',
-    close: 'Close'
-  },
-  selectMenu: {
-    noMatch: 'No matching data',
-    noData: 'No data'
-  },
-  toast: {
-    close: 'Close'
-  },
-  carousel: {
-    prev: 'Prev',
-    next: 'Next',
-    goto: 'Go to slide {slide}'
-  },
-  modal: {
-    close: 'Close'
-  },
-  slideover: {
-    close: 'Close'
-  },
-  alert: {
-    close: 'Close'
-  },
-  table: {
-    noData: 'No data'
+export default defineLocale({
+  name: 'English',
+  code: 'en',
+  messages: {
+    inputMenu: {
+      noMatch: 'No matching data',
+      noData: 'No data',
+      create: 'Create "{label}"'
+    },
+    inputNumber: {
+      increment: 'Increment',
+      decrement: 'Decrement'
+    },
+    commandPalette: {
+      noMatch: 'No matching data',
+      noData: 'No data',
+      close: 'Close'
+    },
+    selectMenu: {
+      noMatch: 'No matching data',
+      noData: 'No data',
+      create: 'Create "{label}"'
+    },
+    toast: {
+      close: 'Close'
+    },
+    carousel: {
+      prev: 'Prev',
+      next: 'Next',
+      goto: 'Go to slide {slide}'
+    },
+    modal: {
+      close: 'Close'
+    },
+    slideover: {
+      close: 'Close'
+    },
+    alert: {
+      close: 'Close'
+    },
+    table: {
+      noData: 'No data'
+    }
   }
 })

src/runtime/locale/es.ts

@@ -0,0 +1,47 @@
+import { defineLocale } from '../composables/defineLocale'
+
+export default defineLocale({
+  name: 'Español',
+  code: 'es',
+  messages: {
+    inputMenu: {
+      noMatch: 'No hay datos coincidentes',
+      noData: 'Sin datos',
+      create: 'Crear "{label}"'
+    },
+    inputNumber: {
+      increment: 'Incremento',
+      decrement: 'Decremento'
+    },
+    commandPalette: {
+      noMatch: 'No hay datos coincidentes',
+      noData: 'Sin datos',
+      close: 'Cerrar'
+    },
+    selectMenu: {
+      noMatch: 'No hay datos coincidentes',
+      noData: 'Sin datos',
+      create: 'Crear "{label}"'
+    },
+    toast: {
+      close: 'Cerrar'
+    },
+    carousel: {
+      prev: 'Anterior',
+      next: 'Siguiente',
+      goto: 'Ir a la diapositiva {slide}'
+    },
+    modal: {
+      close: 'Cerrar'
+    },
+    slideover: {
+      close: 'Cerrar'
+    },
+    alert: {
+      close: 'Cerrar'
+    },
+    table: {
+      noData: 'Sin datos'
+    }
+  }
+})

src/runtime/locale/fa_ir.ts

@@ -0,0 +1,48 @@
+import { defineLocale } from '../composables/defineLocale'
+
+export default defineLocale({
+  name: 'فارسی',
+  code: 'fa-IR',
+  dir: 'rtl',
+  messages: {
+    inputMenu: {
+      noMatch: 'داده‌ای یافت نشد',
+      noData: 'داده‌ای موجود نیست',
+      create: 'ایجاد "{label}"'
+    },
+    inputNumber: {
+      increment: 'افزایش',
+      decrement: 'کاهش'
+    },
+    commandPalette: {
+      noMatch: 'داده‌ای یافت نشد',
+      noData: 'داده‌ای موجود نیست',
+      close: 'بستن'
+    },
+    selectMenu: {
+      noMatch: 'داده‌ای یافت نشد',
+      noData: 'داده‌ای موجود نیست',
+      create: 'ایجاد "{label}"'
+    },
+    toast: {
+      close: 'بستن'
+    },
+    carousel: {
+      prev: 'قبلی',
+      next: 'بعدی',
+      goto: 'رفتن به اسلاید {slide}'
+    },
+    modal: {
+      close: 'بستن'
+    },
+    slideover: {
+      close: 'بستن'
+    },
+    alert: {
+      close: 'بستن'
+    },
+    table: {
+      noData: 'داده‌ای موجود نیست'
+    }
+  }
+})

src/runtime/locale/fr.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Français', 'fr', {
-  inputMenu: {
-    noMatch: 'Aucune donnée correspondante',
-    noData: 'Aucune donnée'
-  },
-  commandPalette: {
-    noMatch: 'Aucune donnée correspondante',
-    noData: 'Aucune donnée',
-    close: 'Fermer'
-  },
-  selectMenu: {
-    noMatch: 'Aucune donnée correspondante',
-    noData: 'Aucune donnée'
-  },
-  toast: {
-    close: 'Fermer'
-  },
-  carousel: {
-    prev: 'Précédent',
-    next: 'Suivant',
-    goto: 'Aller à {slide}'
-  },
-  modal: {
-    close: 'Fermer'
-  },
-  slideover: {
-    close: 'Fermer'
-  },
-  alert: {
-    close: 'Fermer'
-  },
-  table: {
-    noData: 'Aucune donnée'
+export default defineLocale({
+  name: 'Français',
+  code: 'fr',
+  messages: {
+    inputMenu: {
+      noMatch: 'Aucune donnée correspondante',
+      noData: 'Aucune donnée',
+      create: 'Créer "{label}"'
+    },
+    inputNumber: {
+      increment: 'Augmenter',
+      decrement: 'Diminuer'
+    },
+    commandPalette: {
+      noMatch: 'Aucune donnée correspondante',
+      noData: 'Aucune donnée',
+      close: 'Fermer'
+    },
+    selectMenu: {
+      noMatch: 'Aucune donnée correspondante',
+      noData: 'Aucune donnée',
+      create: 'Créer "{label}"'
+    },
+    toast: {
+      close: 'Fermer'
+    },
+    carousel: {
+      prev: 'Précédent',
+      next: 'Suivant',
+      goto: 'Aller à {slide}'
+    },
+    modal: {
+      close: 'Fermer'
+    },
+    slideover: {
+      close: 'Fermer'
+    },
+    alert: {
+      close: 'Fermer'
+    },
+    table: {
+      noData: 'Aucune donnée'
+    }
   }
 })

src/runtime/locale/index.ts

@@ -2,8 +2,11 @@ export { default as ar } from './ar'
 export { default as cs } from './cs'
 export { default as de } from './de'
 export { default as en } from './en'
+export { default as es } from './es'
 export { default as fr } from './fr'
+export { default as fa_ir } from './fa_ir'
 export { default as it } from './it'
+export { default as pl } from './pl'
 export { default as ru } from './ru'
 export { default as zh_hans } from './zh_hans'
 export { default as zh_hant } from './zh_hant'

src/runtime/locale/it.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Italiano', 'it', {
-  inputMenu: {
-    noMatch: 'Nessun dato corrispondente',
-    noData: 'Nessun dato'
-  },
-  commandPalette: {
-    noMatch: 'Nessun dato corrispondente',
-    noData: 'Nessun dato',
-    close: 'Chiudi'
-  },
-  selectMenu: {
-    noMatch: 'Nessun dato corrispondente',
-    noData: 'Nessun dato'
-  },
-  toast: {
-    close: 'Chiudi'
-  },
-  carousel: {
-    prev: 'Precedente',
-    next: 'Successiva',
-    goto: 'Vai alla slide {slide}'
-  },
-  modal: {
-    close: 'Chiudi'
-  },
-  slideover: {
-    close: 'Chiudi'
-  },
-  alert: {
-    close: 'Chiudi'
-  },
-  table: {
-    noData: 'Nessuno dato'
+export default defineLocale({
+  name: 'Italiano',
+  code: 'it',
+  messages: {
+    inputMenu: {
+      noMatch: 'Nessun dato corrispondente',
+      noData: 'Nessun dato',
+      create: 'Crea "{label}"'
+    },
+    inputNumber: {
+      increment: 'Aumenta',
+      decrement: 'Diminuisci'
+    },
+    commandPalette: {
+      noMatch: 'Nessun dato corrispondente',
+      noData: 'Nessun dato',
+      close: 'Chiudi'
+    },
+    selectMenu: {
+      noMatch: 'Nessun dato corrispondente',
+      noData: 'Nessun dato',
+      create: 'Crea "{label}"'
+    },
+    toast: {
+      close: 'Chiudi'
+    },
+    carousel: {
+      prev: 'Precedente',
+      next: 'Successiva',
+      goto: 'Vai alla slide {slide}'
+    },
+    modal: {
+      close: 'Chiudi'
+    },
+    slideover: {
+      close: 'Chiudi'
+    },
+    alert: {
+      close: 'Chiudi'
+    },
+    table: {
+      noData: 'Nessun dato'
+    }
   }
 })

src/runtime/locale/pl.ts

@@ -0,0 +1,47 @@
+import { defineLocale } from '../composables/defineLocale'
+
+export default defineLocale({
+  name: 'Polski',
+  code: 'pl',
+  messages: {
+    inputMenu: {
+      noMatch: 'Brak pasujących danych',
+      noData: 'Brak danych',
+      create: 'Utwórz "{label}"'
+    },
+    inputNumber: {
+      increment: 'Zwiększ',
+      decrement: 'Zmniejsz'
+    },
+    commandPalette: {
+      noMatch: 'Brak pasujących danych',
+      noData: 'Brak danych',
+      close: 'Zamknij'
+    },
+    selectMenu: {
+      noMatch: 'Brak pasujących danych',
+      noData: 'Brak danych',
+      create: 'Utwórz "{label}"'
+    },
+    toast: {
+      close: 'Zamknij'
+    },
+    carousel: {
+      prev: 'Poprzedni',
+      next: 'Następny',
+      goto: 'Idź do {slide}'
+    },
+    modal: {
+      close: 'Zamknij'
+    },
+    slideover: {
+      close: 'Zamknij'
+    },
+    alert: {
+      close: 'Zamknij'
+    },
+    table: {
+      noData: 'Brak danych'
+    }
+  }
+})

src/runtime/locale/ru.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Русский', 'ru', {
-  inputMenu: {
-    noMatch: 'Совпадений не найдено',
-    noData: 'Нет данных'
-  },
-  commandPalette: {
-    noMatch: 'Совпадений не найдено',
-    noData: 'Нет данных',
-    close: 'Закрыть'
-  },
-  selectMenu: {
-    noMatch: 'Совпадений не найдено',
-    noData: 'Нет данных'
-  },
-  toast: {
-    close: 'Закрыть'
-  },
-  carousel: {
-    prev: 'Назад',
-    next: 'Далее',
-    goto: 'Перейти к {slide}'
-  },
-  modal: {
-    close: 'Закрыть'
-  },
-  slideover: {
-    close: 'Закрыть'
-  },
-  alert: {
-    close: 'Закрыть'
-  },
-  table: {
-    noData: 'Нет данных'
+export default defineLocale({
+  name: 'Русский',
+  code: 'ru',
+  messages: {
+    inputMenu: {
+      noMatch: 'Совпадений не найдено',
+      noData: 'Нет данных',
+      create: 'Создать "{label}"'
+    },
+    inputNumber: {
+      increment: 'Увеличить',
+      decrement: 'Уменьшить'
+    },
+    commandPalette: {
+      noMatch: 'Совпадений не найдено',
+      noData: 'Нет данных',
+      close: 'Закрыть'
+    },
+    selectMenu: {
+      noMatch: 'Совпадений не найдено',
+      noData: 'Нет данных',
+      create: 'Создать "{label}"'
+    },
+    toast: {
+      close: 'Закрыть'
+    },
+    carousel: {
+      prev: 'Назад',
+      next: 'Далее',
+      goto: 'Перейти к {slide}'
+    },
+    modal: {
+      close: 'Закрыть'
+    },
+    slideover: {
+      close: 'Закрыть'
+    },
+    alert: {
+      close: 'Закрыть'
+    },
+    table: {
+      noData: 'Нет данных'
+    }
   }
 })

src/runtime/locale/zh_hans.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('简体中文', 'zh-Hans', {
-  inputMenu: {
-    noMatch: '没有匹配的数据',
-    noData: '没有数据'
-  },
-  commandPalette: {
-    noMatch: '没有匹配的数据',
-    noData: '没有数据',
-    close: '关闭'
-  },
-  selectMenu: {
-    noMatch: '没有匹配的数据',
-    noData: '没有数据'
-  },
-  toast: {
-    close: '关闭'
-  },
-  carousel: {
-    prev: '上一页',
-    next: '下一页',
-    goto: '跳转到第 {slide} 页'
-  },
-  modal: {
-    close: '关闭'
-  },
-  slideover: {
-    close: '关闭'
-  },
-  alert: {
-    close: '关闭'
-  },
-  table: {
-    noData: '没有数据'
+export default defineLocale({
+  name: '简体中文',
+  code: 'zh-Hans',
+  messages: {
+    inputMenu: {
+      noMatch: '没有匹配的数据',
+      noData: '没有数据',
+      create: '创建 "{label}"'
+    },
+    inputNumber: {
+      increment: '增加',
+      decrement: '减少'
+    },
+    commandPalette: {
+      noMatch: '没有匹配的数据',
+      noData: '没有数据',
+      close: '关闭'
+    },
+    selectMenu: {
+      noMatch: '没有匹配的数据',
+      noData: '没有数据',
+      create: '创建 "{label}"'
+    },
+    toast: {
+      close: '关闭'
+    },
+    carousel: {
+      prev: '上一页',
+      next: '下一页',
+      goto: '跳转到第 {slide} 页'
+    },
+    modal: {
+      close: '关闭'
+    },
+    slideover: {
+      close: '关闭'
+    },
+    alert: {
+      close: '关闭'
+    },
+    table: {
+      noData: '没有数据'
+    }
   }
 })

src/runtime/locale/zh_hant.ts

@@ -1,37 +1,47 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('繁体中文', 'zh-Hant', {
-  inputMenu: {
-    noMatch: '沒有匹配的資料',
-    noData: '沒有資料'
-  },
-  commandPalette: {
-    noMatch: '沒有匹配的資料',
-    noData: '沒有資料',
-    close: '關閉'
-  },
-  selectMenu: {
-    noMatch: '沒有匹配的資料',
-    noData: '沒有資料'
-  },
-  toast: {
-    close: '關閉'
-  },
-  carousel: {
-    prev: '上一頁',
-    next: '下一頁',
-    goto: '跳轉到第 {slide} 頁'
-  },
-  modal: {
-    close: '關閉'
-  },
-  slideover: {
-    close: '關閉'
-  },
-  alert: {
-    close: '關閉'
-  },
-  table: {
-    noData: '沒有資料'
+export default defineLocale({
+  name: '繁体中文',
+  code: 'zh-Hant',
+  messages: {
+    inputMenu: {
+      noMatch: '沒有匹配的資料',
+      noData: '沒有資料',
+      create: '創建 "{label}"'
+    },
+    inputNumber: {
+      increment: '增加',
+      decrement: '减少'
+    },
+    commandPalette: {
+      noMatch: '沒有匹配的資料',
+      noData: '沒有資料',
+      close: '關閉'
+    },
+    selectMenu: {
+      noMatch: '沒有匹配的資料',
+      noData: '沒有資料',
+      create: '創建 "{label}"'
+    },
+    toast: {
+      close: '關閉'
+    },
+    carousel: {
+      prev: '上一頁',
+      next: '下一頁',
+      goto: '跳轉到第 {slide} 頁'
+    },
+    modal: {
+      close: '關閉'
+    },
+    slideover: {
+      close: '關閉'
+    },
+    alert: {
+      close: '關閉'
+    },
+    table: {
+      noData: '沒有資料'
+    }
   }
 })

src/runtime/types/form.ts

@@ -85,6 +85,11 @@ export interface FormFieldInjectedOptions<T> {
   errorPattern?: RegExp
 }
 
+export interface ValidateReturnSchema<T> {
+  result: T
+  errors: FormError[] | null
+}
+
 export class FormValidationException extends Error {
   formId: string | number
   errors: FormErrorWithId[]

src/runtime/types/index.ts

@@ -20,11 +20,13 @@ export * from '../components/Form.vue'
 export * from '../components/FormField.vue'
 export * from '../components/Input.vue'
 export * from '../components/InputMenu.vue'
+export * from '../components/InputNumber.vue'
 export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
 export * from '../components/Pagination.vue'
+export * from '../components/PinInput.vue'
 export * from '../components/Popover.vue'
 export * from '../components/Progress.vue'
 export * from '../components/RadioGroup.vue'

src/runtime/types/locale.ts

@@ -1,7 +1,12 @@
-export type LocalePair = {
+export type Messages = {
   inputMenu: {
     noMatch: string
     noData: string
+    create: string
+  }
+  inputNumber: {
+    increment: string
+    decrement: string
   }
   commandPalette: {
     noMatch: string
@@ -11,6 +16,7 @@ export type LocalePair = {
   selectMenu: {
     noMatch: string
     noData: string
+    create: string
   }
   toast: {
     close: string
@@ -34,8 +40,11 @@ export type LocalePair = {
   }
 }
 
+export type Direction = 'ltr' | 'rtl'
+
 export type Locale = {
   name: string
   code: string
-  ui: LocalePair
+  dir: Direction
+  messages: Messages
 }

src/runtime/utils/form.ts

@@ -4,7 +4,7 @@ import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
 import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot'
 import type { Struct } from 'superstruct'
-import type { FormError } from '../types/form'
+import type { FormSchema, ValidateReturnSchema } from '../types/form'
 
 export function isYupSchema(schema: any): schema is YupObjectSchema<any> {
   return schema.validate && schema.__isYupSchema__
@@ -14,22 +14,6 @@ export function isYupError(error: any): error is YupError {
   return error.inner !== undefined
 }
 
-export async function getYupErrors(state: any, schema: YupObjectSchema<any>): Promise<FormError[]> {
-  try {
-    await schema.validate(state, { abortEarly: false })
-    return []
-  } catch (error) {
-    if (isYupError(error)) {
-      return error.inner.map(issue => ({
-        name: issue.path ?? '',
-        message: issue.message
-      }))
-    } else {
-      throw error
-    }
-  }
-}
-
 export function isSuperStructSchema(schema: any): schema is Struct<any, any> {
   return (
     'schema' in schema
@@ -43,17 +27,6 @@ export function isZodSchema(schema: any): schema is ZodSchema {
   return schema.parse !== undefined
 }
 
-export async function getZodErrors(state: any, schema: ZodSchema): Promise<FormError[]> {
-  const result = await schema.safeParseAsync(state)
-  if (result.success === false) {
-    return result.error.issues.map(issue => ({
-      name: issue.path.join('.'),
-      message: issue.message
-    }))
-  }
-  return []
-}
-
 export function isJoiSchema(schema: any): schema is JoiSchema {
   return schema.validateAsync !== undefined && schema.id !== undefined
 }
@@ -62,61 +35,177 @@ export function isJoiError(error: any): error is JoiError {
   return error.isJoi === true
 }
 
-export async function getJoiErrors(state: any, schema: JoiSchema): Promise<FormError[]> {
-  try {
-    await schema.validateAsync(state, { abortEarly: false })
-    return []
-  } catch (error) {
-    if (isJoiError(error)) {
-      return error.details.map(detail => ({
-        name: detail.path.join('.'),
-        message: detail.message
-      }))
-    } else {
-      throw error
-    }
-  }
-}
-
 export function isValibotSchema(schema: any): schema is ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> {
   return '_run' in schema || (typeof schema === 'function' && 'schema' in schema)
 }
 
-export async function getValibotErrors(
-  state: any,
-  schema: ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
-): Promise<FormError[]> {
-  const result = await ('_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
-  return result.issues?.map(issue => ({
-    // We know that the key for a form schema is always a string or a number
-    name: issue.path?.map((item: any) => item.key).join('.') || '',
-    message: issue.message
-  })) || []
-}
-
 export function isStandardSchema(schema: any): schema is v1.StandardSchema {
   return '~standard' in schema
 }
 
-export async function getStandardErrors(
+export async function validateStandarSchema(
   state: any,
   schema: v1.StandardSchema
-): Promise<FormError[]> {
-  const result = await schema['~standard'].validate(state)
-  return result.issues?.map(issue => ({
-    name: issue.path?.map(item => typeof item === 'object' ? item.key : item).join('.') || '',
-    message: issue.message
-  })) || []
+): Promise<ValidateReturnSchema<typeof state>> {
+  const result = await schema['~standard'].validate({
+    value: state
+  })
+
+  if (result.issues) {
+    return {
+      errors: result.issues?.map(issue => ({
+        name: issue.path?.map(item => typeof item === 'object' ? item.key : item).join('.') || '',
+        message: issue.message
+      })) || [],
+      result: null
+    }
+  }
+
+  return {
+    errors: null,
+    result: result.value
+  }
 }
 
-export async function getSuperStructErrors(state: any, schema: Struct<any, any>): Promise<FormError[]> {
-  const [err] = schema.validate(state)
+async function validateYupSchema(
+  state: any,
+  schema: YupObjectSchema<any>
+): Promise<ValidateReturnSchema<typeof state>> {
+  try {
+    const result = schema.validateSync(state, { abortEarly: false })
+    return {
+      errors: null,
+      result
+    }
+  } catch (error) {
+    if (isYupError(error)) {
+      const errors = error.inner.map(issue => ({
+        name: issue.path ?? '',
+        message: issue.message
+      }))
+
+      return {
+        errors,
+        result: null
+      }
+    } else {
+      throw error
+    }
+  }
+}
+
+async function validateSuperstructSchema(state: any, schema: Struct<any, any>): Promise<ValidateReturnSchema<typeof state>> {
+  const [err, result] = schema.validate(state)
   if (err) {
-    const errors = err.failures()
-    return errors.map(error => ({
+    const errors = err.failures().map(error => ({
       message: error.message,
       name: error.path.join('.')
     }))
+
+    return {
+      errors,
+      result: null
+    }
+  }
+
+  return {
+    errors: null,
+    result
+  }
+}
+
+async function validateZodSchema(
+  state: any,
+  schema: ZodSchema
+): Promise<ValidateReturnSchema<typeof state>> {
+  const result = await schema.safeParseAsync(state)
+  if (result.success === false) {
+    const errors = result.error.issues.map(issue => ({
+      name: issue.path.join('.'),
+      message: issue.message
+    }))
+
+    return {
+      errors,
+      result: null
+    }
+  }
+  return {
+    result: result.data,
+    errors: null
+  }
+}
+
+async function validateJoiSchema(
+  state: any,
+  schema: JoiSchema
+): Promise<ValidateReturnSchema<typeof state>> {
+  try {
+    const result = await schema.validateAsync(state, { abortEarly: false })
+    return {
+      errors: null,
+      result
+    }
+  } catch (error) {
+    if (isJoiError(error)) {
+      const errors = error.details.map(issue => ({
+        name: issue.path.join('.'),
+        message: issue.message
+      }))
+
+      return {
+        errors,
+        result: null
+      }
+    } else {
+      throw error
+    }
+  }
+}
+
+async function validateValibotSchema(
+  state: any,
+  schema: ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>
+): Promise<ValidateReturnSchema<typeof state>> {
+  const result = await ('_run' in schema ? schema._run({ typed: false, value: state }, {}) : schema(state))
+
+  if (!result.issues || result.issues.length === 0) {
+    const output = ('output' in result
+      ? result.output
+      : 'value' in result
+        ? result.value
+        : null)
+    return {
+      errors: null,
+      result: output
+    }
+  }
+
+  const errors = result.issues.map(issue => ({
+    name: issue.path?.map((item: any) => item.key).join('.') || '',
+    message: issue.message
+  }))
+
+  return {
+    errors,
+    result: null
+  }
+}
+
+export function parseSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>> {
+  if (isZodSchema(schema)) {
+    return validateZodSchema(state, schema)
+  } else if (isJoiSchema(schema)) {
+    return validateJoiSchema(state, schema)
+  } else if (isValibotSchema(schema)) {
+    return validateValibotSchema(state, schema)
+  } else if (isYupSchema(schema)) {
+    return validateYupSchema(state, schema)
+  } else if (isSuperStructSchema(schema)) {
+    return validateSuperstructSchema(state, schema)
+  } else if (isStandardSchema(schema)) {
+    return validateStandarSchema(state, schema)
+  } else {
+    throw new Error('Form validation failed: Unsupported form schema')
   }
-  return []
 }

src/runtime/utils/locale.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { Locale } from '../types/locale'
+import type { Locale, Direction } from '../types/locale'
 import type { MaybeRef } from '@vueuse/core'
 import { computed, isRef, ref, unref } from 'vue'
 import { get } from './index'
@@ -9,6 +9,7 @@ export type Translator = (path: string, option?: TranslatorOption) => string
 export type LocaleContext = {
   locale: Ref<Locale>
   lang: Ref<string>
+  dir: Ref<Direction>
   code: Ref<string>
   t: Translator
 }
@@ -18,7 +19,7 @@ export function buildTranslator(locale: MaybeRef<Locale>): Translator {
 }
 
 export function translate(path: string, option: undefined | TranslatorOption, locale: Locale): string {
-  const prop: string = get(locale, path, path)
+  const prop: string = get(locale, `messages.${path}`, path)
 
   return prop.replace(
     /\{(\w+)\}/g,
@@ -29,11 +30,13 @@ export function translate(path: string, option: undefined | TranslatorOption, lo
 export function buildLocaleContext(locale: MaybeRef<Locale>): LocaleContext {
   const lang = computed(() => unref(locale).name)
   const code = computed(() => unref(locale).code)
+  const dir = computed(() => unref(locale).dir)
   const localeRef = isRef(locale) ? locale : ref(locale)
 
   return {
     lang,
     code,
+    dir,
     locale: localeRef,
     t: buildTranslator(locale)
   }

src/theme/button.ts

@@ -103,7 +103,7 @@ export default (options: Required<ModuleOptions>) => ({
   })), {
     color: 'neutral',
     variant: 'solid',
-    class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]'
+    class: 'text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/90 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]'
   }, {
     color: 'neutral',
     variant: 'outline',

src/theme/carousel.ts

@@ -18,8 +18,8 @@ export default (options: Required<ModuleOptions>) => ({
       vertical: {
         container: 'flex-col -mt-4',
         item: 'pt-4',
-        prev: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        next: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90'
+        prev: '-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90',
+        next: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90'
       },
       horizontal: {
         container: 'flex-row -ms-4',

src/theme/icons.ts

@@ -1,16 +1,18 @@
 export default {
+  arrowLeft: 'i-lucide-arrow-left',
+  arrowRight: 'i-lucide-arrow-right',
+  check: 'i-lucide-check',
   chevronDoubleLeft: 'i-lucide-chevrons-left',
   chevronDoubleRight: 'i-lucide-chevrons-right',
   chevronDown: 'i-lucide-chevron-down',
   chevronLeft: 'i-lucide-chevron-left',
   chevronRight: 'i-lucide-chevron-right',
-  arrowLeft: 'i-lucide-arrow-left',
-  arrowRight: 'i-lucide-arrow-right',
-  check: 'i-lucide-check',
   close: 'i-lucide-x',
   ellipsis: 'i-lucide-ellipsis',
   external: 'i-lucide-arrow-up-right',
   loading: 'i-lucide-refresh-ccw',
   minus: 'i-lucide-minus',
-  search: 'i-lucide-search'
+  plus: 'i-lucide-plus',
+  search: 'i-lucide-search',
+  chevronUp: 'i-lucide-chevron-up'
 }

src/theme/index.ts

@@ -20,11 +20,13 @@ export { default as form } from './form'
 export { default as formField } from './form-field'
 export { default as input } from './input'
 export { default as inputMenu } from './input-menu'
+export { default as inputNumber } from './input-number'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
 export { default as pagination } from './pagination'
+export { default as pinInput } from './pin-input'
 export { default as popover } from './popover'
 export { default as progress } from './progress'
 export { default as radioGroup } from './radio-group'

src/theme/input-menu.ts

@@ -34,7 +34,7 @@ export default (options: Required<ModuleOptions>) => {
         true: {
           root: 'flex-wrap',
           base: '',
-          tagsInput: 'border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
+          tagsInput: 'border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
         },
         false: {
           base: 'w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'

src/theme/input-number.ts

@@ -0,0 +1,113 @@
+import type { ModuleOptions } from '../module'
+import inputTheme from './input'
+
+export default (options: Required<ModuleOptions>) => {
+  const input = inputTheme(options)
+
+  return {
+    slots: {
+      root: 'relative inline-flex items-center',
+      base: ['w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+      increment: 'absolute flex items-center',
+      decrement: 'absolute flex items-center'
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+        neutral: ''
+      },
+      size: {
+        xs: 'px-2 py-1 text-xs gap-1',
+        sm: 'px-2.5 py-1.5 text-xs gap-1.5',
+        md: 'px-2.5 py-1.5 text-sm gap-1.5',
+        lg: 'px-3 py-2 text-sm gap-2',
+        xl: 'px-3 py-2 text-base gap-2'
+      },
+      variant: {
+        ...input.variants.variant
+      },
+      disabled: {
+        true: {
+          increment: 'opacity-75 cursor-not-allowed',
+          decrement: 'opacity-75 cursor-not-allowed'
+        }
+      },
+      orientation: {
+        horizontal: {
+          base: 'text-center',
+          increment: 'inset-y-0 end-0 pe-1',
+          decrement: 'inset-y-0 start-0 ps-1'
+        },
+        vertical: {
+          increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
+          decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80'
+        }
+      },
+      highlight: {
+        true: ''
+      }
+    },
+    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: ['outline', 'subtle'],
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+    })), ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      highlight: true,
+      class: `ring ring-inset ring-[var(--ui-${color})]`
+    })), {
+      color: 'neutral',
+      variant: ['outline', 'subtle'],
+      class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
+    }, {
+      color: 'neutral',
+      highlight: true,
+      class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
+    }, {
+      orientation: 'horizontal',
+      size: 'xs',
+      class: 'px-7'
+    }, {
+      orientation: 'horizontal',
+      size: 'sm',
+      class: 'px-8'
+    }, {
+      orientation: 'horizontal',
+      size: 'md',
+      class: 'px-9'
+    }, {
+      orientation: 'horizontal',
+      size: 'lg',
+      class: 'px-10'
+    }, {
+      orientation: 'horizontal',
+      size: 'xl',
+      class: 'px-11'
+    }, {
+      orientation: 'vertical',
+      size: 'xs',
+      class: 'pe-7'
+    }, {
+      orientation: 'vertical',
+      size: 'sm',
+      class: 'pe-8'
+    }, {
+      orientation: 'vertical',
+      size: 'md',
+      class: 'pe-9'
+    }, {
+      orientation: 'vertical',
+      size: 'lg',
+      class: 'pe-10'
+    }, {
+      orientation: 'vertical',
+      size: 'xl',
+      class: 'pe-11'
+    }],
+    defaultVariants: {
+      size: 'md',
+      color: 'primary',
+      variant: 'outline'
+    }
+  }
+}

src/theme/input.ts

@@ -16,7 +16,7 @@ export default (options: Required<ModuleOptions>) => ({
     ...buttonGroupVariantWithRoot,
     size: {
       xs: {
-        base: 'px-2 py-1 text-xs',
+        base: 'px-2 py-1 text-xs gap-1',
         leading: 'ps-2',
         trailing: 'pe-2',
         leadingIcon: 'size-4',
@@ -24,7 +24,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-4'
       },
       sm: {
-        base: 'px-2.5 py-1.5 text-xs',
+        base: 'px-2.5 py-1.5 text-xs gap-1.5',
         leading: 'ps-2.5',
         trailing: 'pe-2.5',
         leadingIcon: 'size-4',
@@ -32,7 +32,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-4'
       },
       md: {
-        base: 'px-2.5 py-1.5 text-sm',
+        base: 'px-2.5 py-1.5 text-sm gap-1.5',
         leading: 'ps-2.5',
         trailing: 'pe-2.5',
         leadingIcon: 'size-5',
@@ -40,7 +40,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-5'
       },
       lg: {
-        base: 'px-3 py-2 text-sm',
+        base: 'px-3 py-2 text-sm gap-2',
         leading: 'ps-3',
         trailing: 'pe-3',
         leadingIcon: 'size-5',
@@ -48,7 +48,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-5'
       },
       xl: {
-        base: 'px-3 py-2 text-base',
+        base: 'px-3 py-2 text-base gap-2',
         leading: 'ps-3',
         trailing: 'pe-3',
         leadingIcon: 'size-6',

src/theme/pin-input.ts

@@ -0,0 +1,63 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'relative inline-flex items-center gap-1.5',
+    base: ['rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors']
+  },
+  variants: {
+    size: {
+      xs: {
+        base: 'size-6 text-xs'
+      },
+      sm: {
+        base: 'size-7 text-xs'
+      },
+      md: {
+        base: 'size-8 text-sm'
+      },
+      lg: {
+        base: 'size-9 text-sm'
+      },
+      xl: {
+        base: 'size-10 text-base'
+      }
+    },
+    variant: {
+      outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]',
+      soft: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50',
+      subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]',
+      ghost: 'text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent',
+      none: 'text-[var(--ui-text-highlighted)] bg-transparent'
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
+    },
+    highlight: {
+      true: ''
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: ['outline', 'subtle'],
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    highlight: true,
+    class: `ring ring-inset ring-[var(--ui-${color})]`
+  })), {
+    color: 'neutral',
+    variant: ['outline', 'subtle'],
+    class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
+  }, {
+    color: 'neutral',
+    highlight: true,
+    class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
+  }],
+  defaultVariants: {
+    size: 'md',
+    color: 'primary',
+    variant: 'outline'
+  }
+})

src/theme/toaster.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
     viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none',
-    base: 'absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
+    base: 'pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
   },
   variants: {
     position: {

test/components/Breadcrumb.spec.ts

@@ -25,6 +25,7 @@ describe('Breadcrumb', () => {
   it.each([
     // Props
     ['with items', { props }],
+    ['with as', { props: { ...props, as: 'div' } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with separatorIcon', { props: { ...props, separatorIcon: 'i-lucide-minus' } }],
     ['with class', { props: { ...props, class: 'w-48' } }],

test/components/Form.spec.ts

@@ -364,6 +364,79 @@ describe('Form', () => {
     })
   })
 
+  describe('apply transform', async () => {
+    it.each([
+      [
+        'zod',
+        z.object({
+          value: z.string().transform(value => value.toUpperCase())
+        }),
+        { value: 'test' },
+        { value: 'TEST' }
+      ],
+      [
+        'yup',
+        yup.object({
+          value: yup.string().transform(value => value.toUpperCase())
+        }),
+        { value: 'test' },
+        { value: 'TEST' }
+      ],
+      [
+        'joi',
+        Joi.object({
+          value: Joi.string().custom(value => value.toUpperCase())
+        }),
+        { value: 'test' },
+        { value: 'TEST' }
+      ],
+      [
+        'valibot',
+        valibot.object({
+          value: valibot.pipe(valibot.string(), valibot.transform(v => v.toUpperCase()))
+        }),
+        { value: 'test' },
+        { value: 'TEST' }
+      ]
+    ])(
+      '%s schema transform works',
+      async (_name: string, schema: any, input: any, expected: any) => {
+        const wrapper = await mountSuspended({
+          components: {
+            UFormField,
+            UForm,
+            UInput
+          },
+          setup() {
+            const form = ref()
+            const state = reactive({})
+            const onSubmit = vi.fn()
+            return { state, schema, form, onSubmit }
+          },
+          template: `
+          <UForm ref="form" :state="state" :schema="schema" @submit="onSubmit">
+            <UFormField name="value">
+              <UInput id="input" v-model="state.value" />
+            </UFormField>
+          </UForm>
+        `
+        })
+        const form = wrapper.setupState.form
+        const state = wrapper.setupState.state
+
+        const inputEl = wrapper.find('#input')
+        inputEl.setValue(input.value)
+
+        form.value.submit()
+        await flushPromises()
+
+        expect(state.value).toEqual(expected.value)
+        expect(wrapper.setupState.onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+          data: expected
+        }))
+      }
+    )
+  })
   test('form field errorPattern works', async () => {
     const wrapper = await mountSuspended({
       components: {

test/components/InputMenu.spec.ts

@@ -76,7 +76,8 @@ describe('InputMenu', () => {
     ['with item slot', { props, slots: { item: () => 'Item slot' } }],
     ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }],
     ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
-    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }]
+    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
+    ['with create-item-label slot', { props: { ...props, searchTerm: 'New value', createItem: true }, slots: { 'create-item-label': () => 'Create item slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputMenuProps<typeof items[number]>, slots?: Partial<InputMenuSlots<typeof items[number]>> }) => {
     const html = await ComponentRender(nameOrHtml, options, InputMenu)
     expect(html).toMatchSnapshot()

test/components/InputNumber.spec.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect, test } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { reactive } from 'vue'
+import InputNumber, { type InputNumberProps, type InputNumberSlots } from '../../src/runtime/components/InputNumber.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/input-number'
+import type { FormInputEvents } from '~/src/module'
+import { renderForm } from '../utils/form'
+
+describe('InputNumber', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+
+  it.each([
+    // Props
+    ['with class', { props: { class: 'absolute' } }],
+    ['with ui', { props: { ui: { base: 'rounded-full' } } }],
+    ['with name', { props: { name: 'name' } }],
+    ['with placeholder', { props: { placeholder: 'Number...' } }],
+    ['with disabled', { props: { disabled: true } }],
+    ['with required', { props: { required: true } }],
+    ['with orientation vertical', { props: { orientation: 'vertical' } }],
+    ['with incrementIcon', { props: { incrementIcon: 'i-lucide-arrow-left' } }],
+    ['with decrementIcon', { props: { decrementIcon: 'i-lucide-arrow-right' } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
+    // Slots
+    ['with increment slot', { slots: { increment: () => '+' } }],
+    ['with decrement slot', { slots: { decrement: () => '-' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputNumberProps, slots?: Partial<InputNumberSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, InputNumber)
+    expect(html).toMatchSnapshot()
+  })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = await mountSuspended(InputNumber)
+      const input = wrapper.findComponent({ name: 'NumberFieldRoot' })
+      await input.setValue(1)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[1]] })
+      expect(1).toBe(1)
+    })
+
+    test('change event', async () => {
+      const wrapper = await mountSuspended(InputNumber)
+      const input = wrapper.findComponent({ name: 'NumberFieldRoot' })
+      await input.setValue(1)
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = await mountSuspended(InputNumber)
+      const input = wrapper.findComponent({ name: 'NumberFieldInput' })
+      await input.trigger('blur')
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        state: reactive({ value: 0 }),
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 1)
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <UInputNumber id="input" v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'NumberFieldRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on blur works', async () => {
+      const { input, wrapper } = await createForm(['blur'])
+      const inputDom = wrapper.find('#input')
+
+      await inputDom.trigger('blur')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue(1)
+      await inputDom.trigger('blur')
+      await flushPromises()
+      expect(wrapper.html()).not.toContain('Error message')
+    })
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      await input.setValue(2)
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue(1)
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+
+      await input.setValue(10)
+      await flushPromises()
+      expect(wrapper.html()).toContain('Error message')
+
+      await input.setValue(1)
+      await flushPromises()
+      expect(wrapper.html()).not.toContain('Error message')
+    })
+  })
+})

test/components/PinInput.spec.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect, test } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import PinInput, { type PinInputProps } from '../../src/runtime/components/PinInput.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/pin-input'
+
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
+
+describe('PinInput', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'span' } }],
+    ['with modelValue', { props: { modelValue: ['1'] } }],
+    ['with defaultValue', { props: { defaultValue: ['1'] } }],
+    ['with id', { props: { id: 'pin-input-id' } }],
+    ['with name', { props: { name: 'pin-input-name' } }],
+    ['with type', { props: { type: 'number' } }],
+    ['with placeholder', { props: { placeholder: '*' } }],
+    ['with length', { props: { length: 6 } }],
+    ['with disabled', { props: { disabled: true } }],
+    ['with required', { props: { required: true } }],
+    ['with mask', { props: { mask: true } }],
+    ['with otp', { props: { otp: true } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant} highlight`, { props: { variant, highlight: true } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant} highlight`, { props: { variant, color: 'neutral', highlight: true } }]),
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: PinInputProps }) => {
+    const html = await ComponentRender(nameOrHtml, options, PinInput)
+    expect(html).toMatchSnapshot()
+  })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(PinInput)
+      const input = wrapper.findComponent({ name: 'PinInputRoot' })
+      await input.vm.$emit('update:modelValue', ['1', '2', '3'])
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[['1', '2', '3']]] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(PinInput)
+      const input = wrapper.findComponent({ name: 'PinInputRoot' })
+      await input.vm.$emit('complete', ['1', '2', '3', '4', '5'])
+      await flushPromises()
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(PinInput)
+      const lastPin = wrapper.find('input[aria-label="pin input 5 of 0"]')
+      lastPin.trigger('blur')
+      await flushPromises()
+
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value?.length !== 5)
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <UPinInput id="input" v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'PinInputRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      await input.vm.$emit('complete', ['1', '2', '3', '4'])
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:modelValue', ['1', '2', '3', '4', '5'])
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on blur works', async () => {
+      const { input, wrapper } = await createForm(['blur'])
+      const lastPin = wrapper.find('input[aria-label="pin input 5 of 5"]')
+
+      await input.vm.$emit('update:modelValue', ['1', '2', '3', '4'])
+      lastPin.trigger('blur')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:modelValue', ['1', '2', '3', '4', '5'])
+      lastPin.trigger('blur')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+
+      await input.vm.$emit('update:modelValue', ['1', '2', '3', '4'])
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:modelValue', ['1', '2', '3', '4', '5'])
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
+})

test/components/SelectMenu.spec.ts

@@ -80,7 +80,8 @@ describe('SelectMenu', () => {
     ['with item slot', { props, slots: { item: () => 'Item slot' } }],
     ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }],
     ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
-    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }]
+    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }],
+    ['with create-item-label slot', { props: { ...props, searchTerm: 'New value', createItem: true }, slots: { 'create-item-label': () => 'Create item slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SelectMenuProps<typeof items[number]>, slots?: Partial<SelectMenuSlots<typeof items[number]>> }) => {
     const html = await ComponentRender(nameOrHtml, options, SelectMenu)
     expect(html).toMatchSnapshot()

test/components/__snapshots__/Breadcrumb-vue.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Breadcrumb > renders with class correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0 w-48">
+exports[`Breadcrumb > renders with as correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -13,8 +13,21 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`Breadcrumb > renders with class correctly 1`] = `
+"<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components</span></span></li>
+    <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
+    <!--v-if-->
+  </ol>
+</nav>"
+`;
+
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -23,11 +36,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold">Custom slot</a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item slot</a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -36,11 +49,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Item label slot</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -49,11 +62,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -62,11 +75,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span>Item trailing slot</a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -75,11 +88,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with items correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -88,11 +101,11 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>
         <!--v-if-->
@@ -103,11 +116,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex">/</li>
@@ -116,11 +129,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -129,11 +142,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with ui correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-text-muted)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></li>
@@ -142,5 +155,5 @@ exports[`Breadcrumb > renders with ui correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-bold"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;

test/components/__snapshots__/Breadcrumb.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Breadcrumb > renders with class correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0 w-48">
+exports[`Breadcrumb > renders with as correctly 1`] = `
+"<div aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -13,8 +13,21 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`Breadcrumb > renders with class correctly 1`] = `
+"<nav aria-label="breadcrumb" class="relative min-w-0 w-48">
+  <ol class="flex items-center gap-1.5">
+    <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
+    <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium cursor-not-allowed opacity-75"><span class="iconify i-lucide:box shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Components</span></span></li>
+    <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
+    <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
+    <!--v-if-->
+  </ol>
+</nav>"
+`;
+
 exports[`Breadcrumb > renders with custom slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -23,11 +36,11 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold">Custom slot</a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item slot</a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -36,11 +49,11 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Item label slot</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -49,11 +62,11 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -62,11 +75,11 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span>Item trailing slot</a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -75,11 +88,11 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with items correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -88,11 +101,11 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with labelKey correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>
         <!--v-if-->
@@ -103,11 +116,11 @@ exports[`Breadcrumb > renders with labelKey correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">i-lucide-link</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with separator slot correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex">/</li>
@@ -116,11 +129,11 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] font-medium hover:text-[var(--ui-text)] transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:minus shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -129,11 +142,11 @@ exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;
 
 exports[`Breadcrumb > renders with ui correctly 1`] = `
-"<div aria-label="breadcrumb" class="relative min-w-0">
+"<nav aria-label="breadcrumb" class="relative min-w-0">
   <ol class="flex items-center gap-1.5">
     <li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] transition-colors font-bold"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span><span class="truncate">Home</span></a></li>
     <li role="presentation" class="flex"><span class="iconify i-lucide:chevron-right shrink-0 size-5 text-[var(--ui-text-muted)]" aria-hidden="true"></span></li>
@@ -142,5 +155,5 @@ exports[`Breadcrumb > renders with ui correctly 1`] = `
     <li class="flex min-w-0"><a href="/components/breadcrumb" class="group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)] text-[var(--ui-primary)] font-bold"><span class="iconify i-lucide:link shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Breadcrumb</span></a></li>
     <!--v-if-->
   </ol>
-</div>"
+</nav>"
 `;

test/components/__snapshots__/Button-vue.spec.ts.snap

@@ -148,7 +148,7 @@ exports[`Button > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`Button > renders with neutral variant solid correctly 1`] = `
-"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]">
+"<button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/90 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]">
   <!--v-if--><span class="truncate">Button</span>
   <!--v-if-->
 </button>"