Merge remote-tracking branch 'origin/v3' into fix/3394

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

docs/app/components/content/SupportedLanguages.vue

@@ -25,6 +25,7 @@ function getEmojiFlag(locale: string): string {
     kk: 'kz', // Kazakh -> Kazakhstan
     km: 'kh', // Khmer -> Cambodia
     ko: 'kr', // Korean -> South Korea
+    ms: 'my', // Malay -> Malaysia
     nb: 'no', // Norwegian Bokmål -> Norway
     sl: 'si', // Slovenian -> Slovenia
     sv: 'se', // Swedish -> Sweden

docs/app/pages/showcase.vue

@@ -67,17 +67,6 @@ defineOgImageComponent('Docs', {
           </li>
         </ul>
       </div>
-
-      <div class="flex justify-center -mb-[36px]">
-        <UButton
-          label="Submit your project"
-          trailing-icon="i-lucide-plus"
-          color="neutral"
-          size="lg"
-          to="https://github.com/nuxt/ui/edit/v3/docs/content/showcase.yml"
-          target="_blank"
-        />
-      </div>
     </UPageHero>
   </UMain>
 </template>

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

@@ -21,10 +21,10 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
-- `tooltip?: TooltipProps`{lang="ts-type"} :badge{label="Soon"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
-- `collapsible?: boolean`{lang="ts-type"} :badge{label="Soon"}
+- `collapsible?: boolean`{lang="ts-type"}
 - `defaultOpen?: boolean`{lang="ts-type"}
 - `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
@@ -885,7 +885,7 @@ You can inspect the DOM to see each item's content being rendered.
 
 ## Examples
 
-### With tooltips in items :badge{label="Soon" class="align-text-top"}
+### With tooltips in items :badge{label="New" class="align-text-top"}
 
 You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
 

docs/content/3.components/slider.md

@@ -136,7 +136,7 @@ props:
 ---
 ::
 
-### Tooltip :badge{label="Soon" class="align-text-top"}
+### Tooltip :badge{label="New" class="align-text-top"}
 
 Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.
 

docs/package.json

@@ -5,20 +5,20 @@
   "dependencies": {
     "@ai-sdk/vue": "^1.2.12",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.43",
+    "@iconify-json/lucide": "^1.2.44",
     "@iconify-json/simple-icons": "^1.2.34",
     "@iconify-json/vscode-icons": "^1.2.21",
     "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@a30de4d",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@9038c43",
     "@nuxthub/core": "^0.8.27",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.1",
     "@rollup/plugin-yaml": "^4.1.2",
     "@vueuse/integrations": "^13.2.0",
     "@vueuse/nuxt": "^13.2.0",
-    "ai": "^4.3.15",
+    "ai": "^4.3.16",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
     "motion-v": "^1.0.2",

package.json

@@ -116,15 +116,15 @@
     "@internationalized/date": "^3.8.0",
     "@internationalized/number": "^3.6.1",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.12.0",
+    "@nuxt/icon": "^1.13.0",
     "@nuxt/kit": "^3.17.3",
     "@nuxt/schema": "^3.17.3",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.6",
+    "@tailwindcss/postcss": "^4.1.7",
-    "@tailwindcss/vite": "^4.1.6",
+    "@tailwindcss/vite": "^4.1.7",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.8",
+    "@unhead/vue": "^2.0.9",
     "@vueuse/core": "^13.2.0",
     "@vueuse/integrations": "^13.2.0",
     "colortranslator": "^4.1.0",
@@ -147,7 +147,7 @@
     "reka-ui": "^2.2.1",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.6",
+    "tailwindcss": "^4.1.7",
     "tinyglobby": "^0.2.13",
     "unplugin": "^2.3.4",
     "unplugin-auto-import": "^19.2.0",
@@ -156,13 +156,13 @@
     "vue-component-type-helpers": "^2.2.10"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.3.1",
+    "@nuxt/eslint-config": "^1.4.0",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.18.0",
+    "@nuxt/test-utils": "^3.19.0",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.0",
     "happy-dom": "^17.4.7",
     "nuxt": "^3.17.3",
     "release-it": "^19.0.2",

playground/package.json

@@ -9,7 +9,7 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.43",
+    "@iconify-json/lucide": "^1.2.44",
     "@iconify-json/simple-icons": "^1.2.34",
     "@nuxt/ui": "latest",
     "@nuxthub/core": "^0.8.27",

src/defaults.ts

@@ -2,7 +2,7 @@ import icons from './theme/icons'
 
 import { pick } from './runtime/utils'
 
-export const getDefaultUiConfig = (colors?: string[]) => ({
+export const getDefaultUiConfig = (colors?: string[], csp?: { nonce?: string }) => ({
   colors: pick({
     primary: 'green',
     secondary: 'blue',
@@ -12,7 +12,10 @@ export const getDefaultUiConfig = (colors?: string[]) => ({
     error: 'red',
     neutral: 'slate'
   }, [...(colors || []), 'neutral' as any]),
-  icons
+  icons,
+  csp: csp || {
+    nonce: ''
+  }
 })
 
 export const defaultOptions = {
@@ -22,6 +25,9 @@ export const defaultOptions = {
   theme: {
     colors: undefined,
     transitions: true
+  },
+  csp: {
+    nonce: ''
   }
 }
 

src/module.ts

@@ -28,6 +28,19 @@ export interface ModuleOptions {
    */
   colorMode?: boolean
 
+  /**
+   * Configure Content Security Policy for Nuxt UI
+   * @defaultValue `{ nonce: '' }`
+   * @link https://ui.nuxt.com/getting-started/installation/nuxt#csp
+   */
+  csp?: {
+    /**
+     * Enable nonce for inline styles.
+     * @defaultValue ``
+     */
+    nonce?: string
+  }
+
   /**
    * Customize how the theme is generated
    * @link https://ui.nuxt.com/getting-started/theme
@@ -70,7 +83,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.alias['#ui'] = resolve('./runtime')
 
-    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors))
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultUiConfig(options.theme.colors, options.csp))
 
     // Isolate root node from portaled components
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}

src/runtime/locale/index.ts

@@ -21,9 +21,11 @@ export { default as hy } from './hy'
 export { default as id } from './id'
 export { default as it } from './it'
 export { default as ja } from './ja'
-export { default as km } from './km'
 export { default as kk } from './kk'
+export { default as km } from './km'
 export { default as ko } from './ko'
+export { default as lt } from './lt'
+export { default as ms } from './ms'
 export { default as nb_no } from './nb_no'
 export { default as nl } from './nl'
 export { default as pl } from './pl'
@@ -37,8 +39,8 @@ export { default as sv } from './sv'
 export { default as th } from './th'
 export { default as tj } from './tj'
 export { default as tr } from './tr'
-export { default as uk } from './uk'
 export { default as ug_cn } from './ug_cn'
+export { default as uk } from './uk'
 export { default as ur } from './ur'
 export { default as uz } from './uz'
 export { default as vi } from './vi'

src/runtime/locale/lt.ts

@@ -0,0 +1,56 @@
+import type { Messages } from '../types'
+import { defineLocale } from '../composables/defineLocale'
+
+export default defineLocale<Messages>({
+  name: 'Lietuvių',
+  code: 'lt',
+  messages: {
+    inputMenu: {
+      noMatch: 'Nėra atitinkančių duomenų',
+      noData: 'Nėra duomenų',
+      create: 'Sukurti „{label}“'
+    },
+    calendar: {
+      prevYear: 'Ankstesni metai',
+      nextYear: 'Kiti metai',
+      prevMonth: 'Ankstesnis mėnuo',
+      nextMonth: 'Kitas mėnuo'
+    },
+    inputNumber: {
+      increment: 'Padidinti',
+      decrement: 'Sumažinti'
+    },
+    commandPalette: {
+      placeholder: 'Įveskite komandą arba ieškokite...',
+      noMatch: 'Nėra atitinkančių duomenų',
+      noData: 'Nėra duomenų',
+      close: 'Uždaryti'
+    },
+    selectMenu: {
+      noMatch: 'Nėra atitinkančių duomenų',
+      noData: 'Nėra duomenų',
+      create: 'Sukurti „{label}“',
+      search: 'Ieškoti...'
+    },
+    toast: {
+      close: 'Uždaryti'
+    },
+    carousel: {
+      prev: 'Atgal',
+      next: 'Pirmyn',
+      goto: 'Eiti į skaidrę {slide}'
+    },
+    modal: {
+      close: 'Uždaryti'
+    },
+    slideover: {
+      close: 'Uždaryti'
+    },
+    alert: {
+      close: 'Uždaryti'
+    },
+    table: {
+      noData: 'Nėra duomenų'
+    }
+  }
+})

src/runtime/locale/ms.ts

@@ -0,0 +1,56 @@
+import type { Messages } from '../types'
+import { defineLocale } from '../composables/defineLocale'
+
+export default defineLocale<Messages>({
+  name: 'Melayu',
+  code: 'ms',
+  messages: {
+    inputMenu: {
+      noMatch: 'Tiada data yang sepadan',
+      noData: 'Tiada data',
+      create: 'Cipta "{label}"'
+    },
+    calendar: {
+      prevYear: 'Tahun sebelum',
+      nextYear: 'Tahun seterusnya',
+      prevMonth: 'Bulan sebelum',
+      nextMonth: 'Bulan seterusnya'
+    },
+    inputNumber: {
+      increment: 'Naikkan',
+      decrement: 'Kurangkan'
+    },
+    commandPalette: {
+      placeholder: 'Taip arahan atau carian...',
+      noMatch: 'Tiada data yang sepadan',
+      noData: 'Tiada data',
+      close: 'Tutup'
+    },
+    selectMenu: {
+      noMatch: 'Tiada data yang sepadan',
+      noData: 'Tiada data',
+      create: 'Cipta "{label}"',
+      search: 'Cari...'
+    },
+    toast: {
+      close: 'Tutup'
+    },
+    carousel: {
+      prev: 'Sebelum',
+      next: 'Seterusnya',
+      goto: 'Pergi ke slaid {slide}'
+    },
+    modal: {
+      close: 'Tutup'
+    },
+    slideover: {
+      close: 'Tutup'
+    },
+    alert: {
+      close: 'Tutup'
+    },
+    table: {
+      noData: 'Tiada data'
+    }
+  }
+})

src/runtime/plugins/colors.ts

@@ -23,6 +23,8 @@ export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
   const nuxtApp = useNuxtApp()
 
+  const nonce = computed(() => appConfig.ui?.csp?.nonce)
+
   const root = computed(() => {
     const { neutral, ...colors } = appConfig.ui.colors
 
@@ -44,7 +46,8 @@ export default defineNuxtPlugin(() => {
     style: [{
       innerHTML: () => root.value,
       tagPriority: -2,
-      id: 'nuxt-ui-colors'
+      id: 'nuxt-ui-colors',
+      ...(nonce.value ? { nonce: nonce.value } : {})
     }]
   }
 
@@ -54,10 +57,15 @@ export default defineNuxtPlugin(() => {
 
     style.innerHTML = root.value
     style.setAttribute('data-nuxt-ui-colors', '')
+
+    if (nonce.value) {
+      style.setAttribute('nonce', nonce.value)
+    }
     document.head.appendChild(style)
 
     headData.script = [{
-      innerHTML: 'document.head.removeChild(document.querySelector(\'[data-nuxt-ui-colors]\'))'
+      innerHTML: 'document.head.removeChild(document.querySelector(\'[data-nuxt-ui-colors]\'))',
+      ...(nonce.value ? { nonce: nonce.value } : {})
     }]
   }
 

src/templates.ts

@@ -165,6 +165,9 @@ type AppConfigUI = {
   }
   icons?: Partial<typeof icons>
   tv?: typeof defaultConfig
+  csp?: {
+    nonce?: string
+  }
 } & TVConfig<typeof ui>
 
 declare module '@nuxt/schema' {