chore(release): 2.8.1

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.8.1](https://github.com/nuxt/ui/compare/v2.8.0...v2.8.1) (2023-09-09)
+
+
+### Bug Fixes
+
+* **Form:** fix `getValibotError` to avoid importing `safeParseAsync` ([#640](https://github.com/nuxt/ui/issues/640)) ([e8daf7f](https://github.com/nuxt/ui/commit/e8daf7f81018c01c28c2c38aed6ee57ef887f823))
+* **Form:** fix valibot imports ([#617](https://github.com/nuxt/ui/issues/617)) ([1a7eb27](https://github.com/nuxt/ui/commit/1a7eb27cad9f3357c4dcde188530cdb0001d3ae6))
+* **Pagination:** page numbers not clickable ([#624](https://github.com/nuxt/ui/issues/624)) ([c1e0654](https://github.com/nuxt/ui/commit/c1e0654417ad39df8be3f2172ab4e0af6dacb631))
+
 ## [2.8.0](https://github.com/nuxt/ui/compare/v2.7.0...v2.8.0) (2023-09-07)
 
 

docs/components/Footer.vue

@@ -7,7 +7,7 @@
 
   <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
     <template #left>
-      <div class="text-sm text-gray-600 dark:text-gray-300">
+      <div class="text-sm text-gray-500 dark:text-gray-400">
         Made by
         <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
           <LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
@@ -16,7 +16,7 @@
     </template>
 
     <template #center>
-      <span class="text-sm text-gray-600 dark:text-gray-300">
+      <span class="text-sm text-gray-500 dark:text-gray-400">
         Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
           MIT License
         </NuxtLink>
@@ -25,7 +25,7 @@
 
     <template #right>
       <USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
-      <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" />
+      <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" />
       <USocialButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" />
     </template>
   </UFooter>

docs/components/Header.vue

@@ -7,23 +7,23 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
         <Logo class="w-auto h-6" />
       </NuxtLink>
     </template>
 
     <template v-if="$route.path !== '/'" #center>
-      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+      <UDocsSearchButton class="ml-1.5 hidden lg:flex lg:w-64 xl:w-96" />
     </template>
 
     <template #right>
       <ColorPicker />
 
-      <UDocsSearchButton v-if="$route.path === '/'" icon-only />
+      <UDocsSearchButton :class="[$route.path !== '/' && 'lg:hidden']" icon-only />
 
       <UColorModeButton v-if="!$colorMode.forced" />
 
-      <USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+      <USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" aria-label="GitHub" class="hidden lg:inline-flex" />
     </template>
 
     <template #panel>

docs/components/content/ComponentCard.vue

@@ -205,7 +205,7 @@ function renderObject (obj: any) {
   return obj
 }
 
-const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(props)}`, () => transformContent('content:_markdown.md', code.value, {
+const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(componentProps)}`, () => transformContent('content:_markdown.md', code.value, {
   highlight: {
     theme: {
       light: 'material-theme-lighter',

docs/components/content/ComponentPropsField.vue

@@ -19,8 +19,8 @@
         <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
       </FieldGroup>
     </Collapsible>
-    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type)" class="space-x-1 leading-7 -my-1">
-      <code v-for="value in prop.schema.schema" :key="value">{{ value }}</code>
+    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type) && !prop.schema.type.startsWith(prop.schema.schema[0])" class="space-x-1 leading-7 -my-1">
+      <code v-for="value in prop.schema.schema.filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words">{{ value }}</code>
     </div>
   </Field>
 </template>

docs/components/content/examples/AccordionExampleItemSlot.vue

@@ -61,9 +61,9 @@ const items = [{
       </div>
 
       <div class="flex flex-col items-center">
-        <code>$ npm install @nuxt/ui</code>
-        <code>$ nnpm install -D @nuxt/ui</code>
-        <code>$ pnpm i -D @nuxt/ui</code>
+        <code>$ npm i @nuxt/ui</code>
+        <code>$ yarn add @nuxt/ui</code>
+        <code>$ pnpm add @nuxt/ui</code>
       </div>
     </template>
   </UAccordion>

docs/components/content/examples/FormExampleValibot.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { string, object, email, minLength, Input } from 'valibot'
+import { string, objectAsync, email, minLength, Input } from 'valibot'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
-const schema = object({
+const schema = objectAsync({
   email: string([email('Invalid email')]),
   password: string([minLength(8, 'Must be at least 8 characters')])
 })

docs/components/content/examples/PaginationExampleRTL.vue

@@ -5,7 +5,7 @@ const items = ref(Array(55))
 
 <template>
   <div class="w-full divide-y divide-gray-200 dark:divide-gray-700 space-y-4">
-    <div class="flex justify-between w-full">
+    <div class="flex flex-wrap gap-1 justify-between w-full">
       <div dir="ltr">
         <UInput
           icon="i-heroicons-magnifying-glass-20-solid"
@@ -27,7 +27,7 @@ const items = ref(Array(55))
       </div>
     </div>
 
-    <div class="flex justify-between w-full pt-4">
+    <div class="flex flex-wrap gap-1 justify-between w-full pt-4">
       <div dir="ltr">
         <UPagination
           v-model="page"

docs/components/content/examples/TableExampleAdvanced.vue

@@ -143,7 +143,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
           <UButton
             icon="i-heroicons-chevron-down"
             trailing
-            variant="soft"
+            color="gray"
             size="xs"
           >
             Mark as
@@ -153,7 +153,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
         <USelectMenu v-model="selectedColumns" :options="columns" multiple>
           <UButton
             icon="i-heroicons-view-columns"
-            variant="soft"
+            color="gray"
             size="xs"
           >
             Columns
@@ -162,8 +162,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
 
         <UButton
           icon="i-heroicons-funnel"
-          variant="soft"
-          color="red"
+          color="gray"
           size="xs"
           :disabled="search === '' && selectedStatus.length === 0"
           @click="resetFilters"
@@ -181,6 +180,8 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
       :loading="pending"
       sort-asc-icon="i-heroicons-arrow-up"
       sort-desc-icon="i-heroicons-arrow-down"
+      class="w-full"
+      :ui="{ td: { base: 'max-w-[0] truncate' } }"
       @select="select"
     >
       <template #completed-data="{ row }">
@@ -212,7 +213,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
 
     <!-- Number of rows & Pagination -->
     <template #footer>
-      <div class="flex justify-between items-center">
+      <div class="flex flex-wrap justify-between items-center">
         <div>
           <span class="text-sm leading-5">
             Showing

docs/components/content/examples/TabsExampleItemCustomSlot.vue

@@ -24,9 +24,9 @@ function onSubmitPassword () {
     <template #account="{ item }">
       <UCard @submit.prevent="onSubmitAccount">
         <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             {{ item.label }}
-          </h3>
+          </p>
           <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
             Make changes to your account here. Click save when you're done.
           </p>

docs/components/content/examples/TabsExampleItemSlot.vue

@@ -22,9 +22,9 @@ function onSubmit (form) {
     <template #item="{ item }">
       <UCard @submit.prevent="() => onSubmit(item.key === 'account' ? accountForm : passwordForm)">
         <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             {{ item.label }}
-          </h3>
+          </p>
           <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
             {{ item.description }}
           </p>

docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue

@@ -2,7 +2,8 @@
 const links = [{
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',
+    alt: 'benjamincanac'
   },
   label: 'benjamincanac',
   to: 'https://github.com/benjamincanac',
@@ -10,7 +11,8 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',
+    alt: 'Atinux'
   },
   label: 'Atinux',
   to: 'https://github.com/Atinux',
@@ -18,7 +20,8 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',
+    alt: 'smarroufin'
   },
   label: 'smarroufin',
   to: 'https://github.com/smarroufin',

docs/components/home/HomeDemo.vue

@@ -19,16 +19,22 @@
             src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
             srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
             alt="benjamincanac"
+            width="40"
+            height="40"
           />
           <UAvatar
             src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
             srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
             alt="Atinux"
+            width="40"
+            height="40"
           />
           <UAvatar
             src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
             srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
             alt="smarroufin"
+            width="40"
+            height="40"
           />
         </UAvatarGroup>
 

docs/components/home/HomeTetris.vue

@@ -8,13 +8,19 @@
     >
       <div
         ref="el"
-        class="absolute inset-0 grid justify-center auto-rows-[var(--cell)] -space-y-px"
+        class="absolute inset-0 grid justify-center auto-rows-[--cell] -space-y-px"
       >
         <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid grid-flow-col auto-cols-[--cell] flex-1 -space-x-px">
-          <div v-for="(cell, cellIndex) in row" :key="cellIndex" class="transition-[background] duration-1000 border border-primary-200/50 dark:border-primary-900/25 bg-opacity-10 hover:bg-opacity-20 dark:bg-opacity-5 dark:hover:bg-opacity-10" :class="[cell && `bg-primary-500 dark:bg-primary-400 cursor-pointer`]" @click="removeCell(rowIndex, cellIndex)" />
+          <div
+            v-for="(cell, cellIndex) in row"
+            :key="cellIndex"
+            class="relative border border-primary-200/50 dark:border-primary-900/25"
+          >
+            <div class="absolute inset-0 bg-primary-500/10 hover:bg-primary-500/20 dark:bg-primary-400/5 dark:hover:bg-primary-400/10 opacity-0 transition-opacity will-change-[opacity] duration-1000" :class="[cell && 'opacity-100 cursor-pointer']" @click="cell && removeCell(rowIndex, cellIndex)" />
+          </div>
         </div>
 
-        <div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900" />
+        <div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900 pointer-events-none" />
       </div>
     </div>
   </Transition>
@@ -28,13 +34,8 @@ const grid = ref([])
 const rows = ref(0)
 const cols = ref(0)
 
-const colors = useAppConfig()?.ui.colors
 const { width, height } = useElementSize(el)
 
-function getRandomColor () {
-  return colors[Math.floor(Math.random() * (colors.length - 1))]
-}
-
 function createGrid () {
   grid.value = []
 
@@ -44,10 +45,9 @@ function createGrid () {
 }
 
 function createNewCell () {
-  const color = getRandomColor()
   const x = Math.floor(Math.random() * cols.value)
 
-  grid.value[0][x] = color
+  grid.value[0][x] = true
 }
 
 function moveCellsDown () {

docs/content/1.getting-started/2.installation.md

@@ -9,15 +9,15 @@ description: 'Learn how to install and configure the module in your Nuxt app.'
 ::code-group
 
 ```sh [pnpm]
-pnpm i -D @nuxt/ui
+pnpm add @nuxt/ui
 ```
 
 ```bash [yarn]
-yarn add -D @nuxt/ui
+yarn add @nuxt/ui
 ```
 
 ```bash [npm]
-npm install -D @nuxt/ui
+npm install @nuxt/ui
 ```
 
 ::

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

@@ -1,7 +1,5 @@
 ---
 description: 'Learn how to customize the look and feel of the components.'
-navigation:
-  badge: 'New'
 ---
 
 ## Overview
@@ -39,7 +37,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
-The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc.
 
 ### Smart Safelisting
 
@@ -109,7 +107,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
 You can find the default classes for each component under the `Preset` section.
 ::
 
-Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything.
 
 For example, the default preset of the `FormGroup` component looks like this:
 
@@ -144,7 +142,7 @@ You can also use the `class` attribute to add classes to the component.
 </template>
 ```
 
-Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config.
 
 ### Default values
 
@@ -229,15 +227,15 @@ However, you will need to install either `@iconify/json` (full icon collections,
 ::code-group
 
 ```bash [yarn]
-yarn add -D @iconify-json/{collection_name}
+yarn add @iconify-json/{collection_name}
 ```
 
 ```bash [npm]
-npm install -D @iconify-json/{collection_name}
+npm install @iconify-json/{collection_name}
 ```
 
 ```sh [pnpm]
-pnpm i -D @iconify-json/{collection_name}
+pnpm i @iconify-json/{collection_name}
 ```
 
 ::

docs/content/1.getting-started/6.roadmap.md

@@ -4,4 +4,4 @@ description: Discover our Volta board for @nuxt/ui development status.
 toc: false
 ---
 
-:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXRlIiwibGlzdE9yZGVyIjoiY3JlYXRlZF9hdCIsInRpbWVsaW5lWm9vbSI6Im1vbnRoIiwidGltZWxpbmVPcmRlciI6InN0YXRlIiwidGltZWxpbmVEaXNwbGF5IjoiYWxsX21pbGVzdG9uZXMiLCJmaWx0ZXJzIjp7fSwib3duZXIiOiJudXh0bGFicyIsIm5hbWUiOiJ1aSJ9"}
+:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9"}

docs/content/2.elements/1.accordion.md

@@ -263,8 +263,8 @@ const items = [{
 
       <div class="flex flex-col items-center">
         <code>$ npm install @nuxt/ui</code>
-        <code>$ nnpm install -D @nuxt/ui</code>
-        <code>$ pnpm i -D @nuxt/ui</code>
+        <code>$ yarn add @nuxt/ui</code>
+        <code>$ pnpm add @nuxt/ui</code>
       </div>
     </template>
   </UAccordion>

docs/content/2.elements/3.avatar.md

@@ -4,8 +4,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -55,7 +53,7 @@ baseProps:
 
 If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`.
 
-#### Icon :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+#### Icon
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.avatar.default.icon` to display an icon on top of the background.
 

docs/content/2.elements/5.button.md

@@ -4,8 +4,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -278,7 +276,7 @@ excludedProps:
 To stack buttons as a group, use the `ButtonGroup` component.
 
 - To size all the buttons equally, pass the `size` prop
-- To change the orientation of the buttons, set the `orientation` prop to `vertical` :u-badge{label="New" class="!rounded-full" variant="subtle"}
+- To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
 ::component-card{slug="ButtonGroup"}

docs/content/3.forms/10.form.md

@@ -4,8 +4,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -234,7 +232,7 @@ async function submit (event: FormSubmitEvent<any>) {
 ```
 ::
 
-### Valibot :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Valibot
 
 ::component-example
 #default

docs/content/5.navigation/4.tabs.md

@@ -4,8 +4,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -87,7 +85,7 @@ const items = [...]
   This will have no effect if you are using a `v-model` to control the selected index.
 ::
 
-### Listen to changes :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Listen to changes
 
 You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
 
@@ -113,7 +111,7 @@ function onChange (index) {
 ```
 ::
 
-### Control the selected index :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Control the selected index
 
 Use a `v-model` to control the selected index.
 

docs/content/6.overlays/1.modal.md

@@ -7,8 +7,6 @@ links:
   - label: 'Dialog'
     icon: i-simple-icons-headlessui
     to: 'https://headlessui.com/vue/dialog'
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -180,7 +178,7 @@ defineShortcuts({
 </script>
 ```
 
-### Fullscreen :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+### Fullscreen
 
 Set the `fullscreen` prop to `true` to enable it.
 

docs/content/index.yml

@@ -16,27 +16,39 @@ sections:
         icon: i-heroicons-swatch
         to: /getting-started/theming#colors
         class: 'col-span-7 row-span-3'
-        image: /illustrations/color-palette
+        image:
+          path: /illustrations/color-palette
+          width: 363
+          height: 152
         orientation: 'horizontal'
       - title: Fully Customizable
         description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
         icon: i-heroicons-wrench-screwdriver
         to: /getting-started/theming#components
-        image: /illustrations/fully-customizable
+        image:
+          path: /illustrations/fully-customizable
+          width: 444
+          height: 160
         class: 'col-span-5 row-span-5 lg:mb-10'
         orientation: 'vertical'
       - title: Icons
         description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
         icon: i-heroicons-face-smile
         to: /getting-started/theming#icons
-        image: /illustrations/icon-library
+        image:
+          path: /illustrations/icon-library
+          width: 362
+          height: 184
         class: 'col-span-7 row-span-3'
         orientation: 'horizontal'
       - title: Light & Dark
         description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
         to: /getting-started/theming#dark-mode
         icon: i-heroicons-moon
-        image: /illustrations/dark-mode
+        image:
+          path: /illustrations/dark-mode
+          width: 444
+          height: 160
         class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
         orientation: 'vertical'
       - title: Keyboard Shortcuts
@@ -44,10 +56,13 @@ sections:
         icon: i-heroicons-computer-desktop
         to: /getting-started/shortcuts
         class: 'col-span-7 row-span-3'
-        image: /illustrations/keyboard-shortcuts
+        image:
+          path: /illustrations/keyboard-shortcuts
+          width: 444
+          height: 160
         orientation: 'horizontal'
     links:
-      - label: Learn more
+      - label: Explore the docs
         to: /getting-started/theming
         color: white
         size: lg
@@ -65,27 +80,33 @@ sections:
     categories:
       - label: Elements
         to: /elements/dropdown
-        image: /illustrations/elements
+        image:
+          path: /illustrations/elements
         badge: 9
       - label: Forms
         to: /forms/form
-        image: /illustrations/forms
+        image:
+          path: /illustrations/forms
         badge: 10
       - label: Data
         to: /data/table
-        image: /illustrations/data
+        image:
+          path: /illustrations/data
         badge: 1
       - label: Navigation
         to: /navigation/command-palette
-        image: /illustrations/navigation
+        image:
+          path: /illustrations/navigation
         badge: 4
       - label: Overlays
         to: /overlays/modal
-        image: /illustrations/overlays
+        image:
+          path: /illustrations/overlays
         badge: 6
       - label: Layout
         to: /layout/card
-        image: /illustrations/layout
+        image:
+          path: /illustrations/layout
         badge: 3
 cta:
   title: Trusted and supported by our<br class="hidden lg:block"> amazing community

docs/package.json

@@ -10,7 +10,7 @@
     "@nuxt/content": "^2.8.2",
     "@nuxt/devtools": "^0.8.2",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28234841.b091775",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28236037.22a1d4d",
     "@nuxthq/studio": "^0.13.4",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",

docs/pages/[...slug].vue

@@ -65,7 +65,7 @@ const headline = computed(() => findPageHeadline(page.value))
 const links = computed(() => [{
   icon: 'i-heroicons-pencil-square',
   label: 'Edit this page',
-  to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
+  to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file.split('/').slice(1).join('/')}`,
   target: '_blank'
 }, {
   icon: 'i-heroicons-star',

docs/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]' }" class="mb-[calc(var(--header-height)*2)]">
+    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]">
       <template #title>
         <span v-html="page.hero?.title" />
       </template>
@@ -71,7 +71,14 @@
             class="flex flex-col"
           >
             <div v-if="feature.image">
-              <UColorModeImage :light="`${feature.image}-light.svg`" :dark="`${feature.image}-dark.svg`" class="object-cover w-full" />
+              <UColorModeImage
+                :light="`${feature.image.path}-light.svg`"
+                :dark="`${feature.image.path}-dark.svg`"
+                :width="feature.image.width"
+                :height="feature.image.height"
+                :alt="feature.title"
+                class="object-cover w-full"
+              />
             </div>
           </ULandingCard>
         </ULandingGrid>
@@ -85,7 +92,14 @@
             :to="category.to"
             class="hover:bg-gradient-to-b hover:from-gray-200/50 dark:hover:from-gray-800/50 rounded-lg"
           >
-            <UColorModeImage :light="`${category.image}-light.svg`" :dark="`${category.image}-dark.svg`" class="object-cover w-full" />
+            <UColorModeImage
+              :light="`${category.image.path}-light.svg`"
+              :dark="`${category.image.path}-dark.svg`"
+              width="363"
+              height="190"
+              :alt="category.label"
+              class="object-cover w-full"
+            />
 
             <div class="flex items-center justify-center gap-2 mt-1 mb-2">
               <span class="font-semibold text-lg">{{ category.label }}</span>
@@ -116,28 +130,32 @@
         </template>
 
         <template #links>
-          <UAvatarGroup :max="xlAndLarger ? 13 : lgAndLarger ? 10 : mdAndLarger ? 16 : 8" size="md" class="flex-wrap-reverse [&_span:first-child]:text-xs justify-center">
-            <UTooltip
-              v-for="(contributor, index) of module.contributors"
-              :key="index"
-              :text="contributor.username"
-              class="rounded-full"
-              :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50' }"
-              :popper="{ offsetDistance: 16 }"
-            >
-              <UAvatar
-                :alt="contributor.username"
-                :src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
-                :srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
-                class="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
-                size="md"
+          <ClientOnly>
+            <UAvatarGroup :max="xlAndLarger ? 13 : lgAndLarger ? 10 : mdAndLarger ? 16 : 8" size="md" class="flex-wrap-reverse [&_span:first-child]:text-xs justify-center">
+              <UTooltip
+                v-for="(contributor, index) of module.contributors"
+                :key="index"
+                :text="contributor.username"
+                class="rounded-full"
+                :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50' }"
+                :popper="{ offsetDistance: 16 }"
               >
-                <NuxtLink :to="`https://github.com/${contributor.username}`" target="_blank" class="focus:outline-none" tabindex="-1">
-                  <span class="absolute inset-0" aria-hidden="true" />
-                </NuxtLink>
-              </UAvatar>
-            </UTooltip>
-          </UAvatarGroup>
+                <UAvatar
+                  :alt="contributor.username"
+                  :src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
+                  :srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
+                  class="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
+                  width="40"
+                  height="40"
+                  size="md"
+                >
+                  <NuxtLink :to="`https://github.com/${contributor.username}`" target="_blank" class="focus:outline-none" tabindex="-1">
+                    <span class="absolute inset-0" aria-hidden="true" />
+                  </NuxtLink>
+                </UAvatar>
+              </UTooltip>
+            </UAvatarGroup>
+          </ClientOnly>
         </template>
 
         <div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">

docs/public/icon.svg

@@ -1,15 +1,3 @@
 <svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
-<style>
-  path {
-    fill: black;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    path {
-      fill: white;
-    }
-  }
-</style>
-
-<path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" />
+<path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="#00DC82" />
 </svg>

docs/public/robots.txt

@@ -1 +1,2 @@
-Disallow: /dev/*
+user-agent: *
+disallow: /dev/*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "repository": "https://github.com/nuxt/ui",
   "license": "MIT",
   "exports": {

src/runtime/components/forms/Form.vue

@@ -10,8 +10,7 @@ import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
-import type { ObjectSchema as ValibotObjectSchema } from 'valibot'
-import { safeParseAsync } from 'valibot'
+import type { ObjectSchemaAsync as ValibotObjectSchema } from 'valibot'
 import type { FormError, FormEvent, FormEventType, FormSubmitEvent, Form } from '../../types/form'
 
 export default defineComponent({
@@ -218,8 +217,8 @@ async function getValibotError (
   state: any,
   schema: ValibotObjectSchema<any>
 ): Promise<FormError[]> {
-  const result = await safeParseAsync(schema, state)
-  if (result.success === false) {
+  const result = await schema._parse(state)
+  if (result.issues) {
     return result.issues.map((issue) => ({
       path: issue.path.map(p => p.key).join('.'),
       message: issue.message

src/runtime/components/navigation/Pagination.vue

@@ -14,7 +14,7 @@
 
     <UButton
       v-for="(page, index) of displayedPages"
-      :key="index"
+      :key="`${page}-${index}`"
       :size="size"
       :label="`${page}`"
       v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"