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

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [3.0.0-alpha.5](https://github.com/nuxt/ui/compare/v3.0.0-alpha.4...v3.0.0-alpha.5) (2024-10-02)
+
+
+### Features
+
+* **module:** enable `@nuxtjs/color-mode` ([9dcf903](https://github.com/nuxt/ui/commit/9dcf903926046b6e92b4784043e374d2174e4201))
+* **module:** override `dark` variant with class strategy ([0f86b87](https://github.com/nuxt/ui/commit/0f86b87385375e5bd859e84d21f8b4f06b0a99e0))
+
+
+### Bug Fixes
+
+* **Button:** props specified more than once ([66a04ad](https://github.com/nuxt/ui/commit/66a04add91389910e1336bf0be1cfeada3540f76))
+
 ## [3.0.0-alpha.4](https://github.com/nuxt/ui/compare/v3.0.0-alpha.3...v3.0.0-alpha.4) (2024-10-01)
 
 

README.md

@@ -49,7 +49,7 @@ export default defineNuxtConfig({
 
 ## Documentation
 
-Visit https://ui3.nuxt.com to explore the documentation.
+Visit https://ui3.nuxt.dev to explore the documentation.
 
 ## Credits
 
@@ -70,7 +70,7 @@ Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md)
 [npm-version-href]: https://npmjs.com/package/@nuxt/ui
 
 [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
+[npm-downloads-href]: https://npm.chart.dev/@nuxt/ui
 
 [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
 [license-href]: https://github.com/nuxt/ui/blob/main/LICENSE.md

docs/app/components/Header.vue

@@ -32,12 +32,12 @@ const navigation = inject<Ref<NavItem[]>>('navigation')
         <UContentSearchButton />
       </UTooltip>
 
-      <!-- <UColorModeButton /> -->
+      <ColorModeButton />
 
       <UButton
         color="gray"
         variant="ghost"
-        to="https://github.com/nuxt/ui"
+        to="https://github.com/nuxt/ui/tree/v3"
         target="_blank"
         icon="i-simple-icons-github"
         aria-label="GitHub"

docs/app/components/color-mode/ColorModeButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      color="gray"
+      variant="ghost"
+      v-bind="{
+        ...$attrs
+      }"
+      :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+const colorMode = useColorMode()
+const appConfig = useAppConfig()
+
+// Computed
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>

docs/content/1.getting-started/1.index.md

@@ -86,6 +86,14 @@ Key points to consider:
   We're planning to add Vue support in the near future. For now, Nuxt UI v3 is only available for Nuxt. Track progress on Vue compatibility [in this issue](https://github.com/nuxt/ui/issues/2129).
   ::
 
+  ::accordion-item{label="How does Nuxt UI v3 handle accessibility?"}
+  Nuxt UI v3 enhances accessibility through Radix Vue integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Radix Vue's accessibility documentation](https://www.radix-vue.com/overview/accessibility.html).
+  ::
+
+  ::accordion-item{label="What is the testing approach for Nuxt UI v3?"}
+  Nuxt UI v3 ensures reliability with 800+ Vitest tests, covering core functionality and accessibility. This robust testing suite supports the library's stability and serves as a reference for developers.
+  ::
+
   ::accordion-item{label="Is this version stable and suitable for production use?"}
   As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library. Feel free to report any issues you encounter on our [GitHub repository](https://github.com/nuxt/ui/issues).
   ::

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

@@ -5,7 +5,9 @@ description: 'Learn to customize Nuxt UI components using Tailwind CSS v4 and th
 
 ## Tailwind CSS
 
-Since Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, let's have a look on how to use it.
+Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, let's have a look on how to use it.
+
+### `@theme`
 
 Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:
 
@@ -40,6 +42,38 @@ You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-al
 
 This is exactly what the [`@import "@nuxt/ui";`](https://github.com/nuxt/ui/blob/v3/src/runtime/index.css) is all about, it extends the default Tailwind CSS theme and declares the `primary`, `error` and `gray` colors to be configurable through the [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) but we'll talk more about that in the [Colors](/getting-started/colors) section.
 
+### `@source`
+
+You can use the `@source` directive to add explicit content glob patterns if you want to look for Tailwind classes in other files that are not automatically detected.
+
+This can be useful when writing Tailwind classes in markdown files with `@nuxt/content`:
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@source "../content/**/*.md";
+```
+
+::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14078"}
+You can learn more about the `@source` directive in this pull request.
+::
+
+### `@plugin`
+
+You can use the `@plugin` directive to import Tailwind CSS plugins.
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@plugin "@tailwindcss/typography";
+```
+
+::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14264"}
+You can learn more about the `@plugin` directive in this pull request.
+::
+
 ## Tailwind Variants API
 
 Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/) API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API:

docs/content/1.getting-started/7.color-mode.md

@@ -6,12 +6,11 @@ links:
     to: https://github.com/nuxt-modules/color-mode
     target: _blank
     icon: i-simple-icons-github
-navigation: false
 ---
 
 ## Usage
 
-Nuxt UI automatically registers the `@nuxtjs/color-mode` module for you and takes advantage of [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy, so there's no additional setup required.
+Nuxt UI automatically registers the `@nuxtjs/color-mode` module for you, so there's no additional setup required.
 
 You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
 

docs/nuxt.config.ts

@@ -189,7 +189,7 @@ export default defineNuxtConfig({
   },
 
   site: {
-    url: 'https://ui3.nuxt.com'
+    url: 'https://ui3.nuxt.dev'
   },
 
   compatibilityDate: '2024-07-09'

docs/package.json

@@ -9,7 +9,7 @@
     "@nuxt/content": "^2.13.2",
     "@nuxt/image": "^1.8.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "2.0.0-alpha.3",
+    "@nuxt/ui-pro": "2.0.0-alpha.4",
     "@nuxthub/core": "^0.7.20",
     "@nuxtjs/plausible": "^1.0.2",
     "@octokit/rest": "^21.0.2",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "packageManager": "pnpm@9.11.0",
   "repository": {
     "type": "git",

playground/app/pages/components/button.vue

@@ -17,6 +17,11 @@ function onClick() {
         Button
       </UButton>
     </div>
+    <div class="flex items-center gap-2">
+      <UButton to="/">
+        Link
+      </UButton>
+    </div>
     <div class="flex items-center gap-2">
       <UButton disabled>
         Disabled

pnpm-lock.yaml

@@ -149,8 +149,8 @@ importers:
         specifier: workspace:*
         version: link:..
       '@nuxt/ui-pro':
-        specifier: 2.0.0-alpha.3
-        version: 2.0.0-alpha.3(magicast@0.3.5)(rollup@4.22.5)(vue@3.5.10(typescript@5.6.2))
+        specifier: 2.0.0-alpha.4
+        version: 2.0.0-alpha.4(magicast@0.3.5)(rollup@4.22.5)(vue@3.5.10(typescript@5.6.2))
       '@nuxthub/core':
         specifier: ^0.7.20
         version: 0.7.20(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.22.5)(vite@5.4.8(@types/node@22.7.4)(lightningcss@1.27.0)(terser@5.34.1))
@@ -1372,8 +1372,8 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/ui-pro@2.0.0-alpha.3':
-    resolution: {integrity: sha512-1s/CuPUUqnJrNPTLifodxA0SsI3ZAgMMd8UjokLDKUX2YOiXB9H2gD0h6VE0HgCrjxvS+5VZ2zBqooODIwPVfA==}
+  '@nuxt/ui-pro@2.0.0-alpha.4':
+    resolution: {integrity: sha512-qnnZTcgQi8f2ds8dJ2GGPI6/Ve80hLe8EeuWWU8yIeYtHt/bsKNj4Mv1kbHBGKOnzjaoG93KPRM5eIILpZjPcQ==}
 
   '@nuxt/vite-builder@3.13.2':
     resolution: {integrity: sha512-3dzc3YH3UeTmzGtCevW1jTq0Q8/cm+yXqo/VS/EFM3aIO/tuNPS88is8ZF2YeBButFnLFllq/QenziPbq0YD6Q==}
@@ -8121,7 +8121,7 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/ui-pro@2.0.0-alpha.3(magicast@0.3.5)(rollup@4.22.5)(vue@3.5.10(typescript@5.6.2))':
+  '@nuxt/ui-pro@2.0.0-alpha.4(magicast@0.3.5)(rollup@4.22.5)(vue@3.5.10(typescript@5.6.2))':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.22.5)
       '@nuxt/schema': 3.13.2(rollup@4.22.5)

src/module.ts

@@ -93,11 +93,11 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.icon = defu(nuxt.options.icon, { cssLayer: 'components' })
     }
 
-    // if (!hasNuxtModule('@nuxtjs/color-mode')) {
-    //   await installModule('@nuxtjs/color-mode', { classSuffix: '' })
-    // } else {
-    //   nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: '' })
-    // }
+    if (!hasNuxtModule('@nuxtjs/color-mode')) {
+      await installModule('@nuxtjs/color-mode', { classSuffix: '' })
+    } else {
+      nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: '' })
+    }
 
     addPlugin({
       src: resolve('./runtime/plugins/colors')

src/runtime/components/Button.vue

@@ -44,6 +44,7 @@ import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import UIcon from './Icon.vue'
 import ULink from './Link.vue'
+import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<ButtonProps>()
@@ -92,7 +93,7 @@ const ui = computed(() => button({
     :type="type"
     :disabled="disabled || isLoading"
     :class="ui.base({ class: [props.class, props.ui?.base] })"
-    v-bind="linkProps"
+    v-bind="omit(linkProps, ['type', 'disabled'])"
     raw
     @click="onClickWrapper"
   >

src/runtime/index.css

@@ -49,6 +49,8 @@
   --color-gray-950: var(--color-gray-950);
 }
 
+@variant dark (&:where(.dark, .dark *));
+
 @layer base {
   :root {
     color-scheme: light dark;

src/runtime/plugins/colors.ts

@@ -18,7 +18,7 @@ export default defineNuxtPlugin(() => {
   ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateColor(key, value)).join('\n  ')}
   --color-primary-DEFAULT: var(--color-primary-500);
 }
-@media (prefers-color-scheme: dark) {
+.dark {
   --color-primary-DEFAULT: var(--color-primary-400);
 }
 `