Merge branch 'master' into dev

Author: KaelWD

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.9.5"
+  "version": "3.9.6"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.9.5",
+  "version": "3.9.6",
   "private": true,
   "description": "",
   "scripts": {

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.9.5",
+  "version": "3.9.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/docs/src/composables/markdown.ts

@@ -20,8 +20,8 @@ export function useMarkdown () {
       return
     }
 
-    let markdownContent = `# ${frontmatter.value?.meta.title || 'Page Title'}\\n\\n`
-    markdownContent += `Source: ${window.location.origin}${route.path}\\n\\n`
+    let markdownContent = `# ${frontmatter.value?.meta.title || 'Page Title'}\n\n`
+    markdownContent += `Source: ${window.location.origin}${route.path}\n\n`
 
     try {
       const path = `packages/docs/src/pages${route.path.replace(/\/$/, '')}.md`
@@ -35,7 +35,54 @@ export function useMarkdown () {
 
       if (response.data && 'content' in response.data) {
         const rawMd = atob(response.data.content)
-        const contentWithoutFrontmatter = rawMd.replace(/---[\\s\\S]*?---/, '').trim()
+        let processedMd = rawMd
+
+        // Remove <ApiInline /> and <ExamplesUsage /> tags completely
+        processedMd = processedMd
+          .replace(/<ApiInline[\s\S]*?>([\s\S]*?\/>\n\n)?/g, '')
+          .replace(/<ExamplesUsage[\s\S]*?>([\s\S]*?\/>\n\n)?/g, '')
+
+        // Replace every <ExamplesExample ...> tag with the raw Vue source of its file
+        if (processedMd.includes('<ExamplesExample')) {
+          const tagRegex = /<ExamplesExample\b([^>]*?)>(?:[\s\S]*?<\/ExamplesExample>)|<ExamplesExample\b([^>]*?)\/>/g
+          const matches = [...processedMd.matchAll(tagRegex)]
+
+          for (const m of matches) {
+            const attrs = m[1] ?? m[2] ?? ''
+            const fileMatch = attrs.match(/\bfile\s*=\s*"([^"]+)"/)
+            if (!fileMatch) {
+              // Remove tag if no file attribute
+              processedMd = processedMd.replace(m[0], '')
+              continue
+            }
+
+            const filePath = fileMatch[1].replace(/\\+/g, '/').replace(/\/$/, '')
+            const pathExamples = `packages/docs/src/examples/${filePath}.vue`
+
+            try {
+              const responseExamples = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
+                owner: 'vuetifyjs',
+                repo: 'vuetify',
+                path: pathExamples,
+                ref: branch,
+              })
+
+              if (responseExamples.data && 'content' in responseExamples.data) {
+                const rawVue = atob(responseExamples.data.content)
+                // Replace whole tag with fenced code block of the example source
+                processedMd = processedMd.replace(m[0], `\n\`\`\`vue\n${rawVue}\n\`\`\`\n`)
+              } else {
+                // If fetch fails, strip the tag to avoid leaving placeholders
+                processedMd = processedMd.replace(m[0], '')
+              }
+            } catch (e) {
+              console.error('Error fetching example file', filePath, e)
+              processedMd = processedMd.replace(m[0], '')
+            }
+          }
+        }
+
+        const contentWithoutFrontmatter = processedMd.replace(/---[\s\S]*?---/, '').trim()
         markdownContent += contentWithoutFrontmatter
       } else {
         markdownContent += 'Could not fetch page content.'

packages/docs/src/data/team.json

@@ -100,20 +100,6 @@
     "work": "CEO at Foundational Technologies LLC",
     "joined": "Feb 2021"
   },
-  "yuwu9145": {
-    "discord": "yuwu9145",
-    "focus": [
-      "[vuetifyjs](https://github.com/vuetifyjs)"
-    ],
-    "languages": [
-      "English",
-      "Chinese(Mandarin)"
-    ],
-    "location": "Melbourne, Australia",
-    "name": "Yuchao Wu",
-    "team": "core",
-    "joined": "Mar 2023"
-  },
   "userquin": {
     "discord": "userquin",
     "focus": [
@@ -130,26 +116,6 @@
     "team": "core",
     "joined": "Mar 2024"
   },
-  "kieuminhcanh": {
-    "discord": "kieuminhcanh",
-    "focus": [
-      "[vuetifyjs/studio](https://github.com/vuetifyjs/studio)"
-    ],
-    "funding": [
-      "[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)",
-      "[Patreon](https://patreon.com/kieuminhcanh)",
-      "[Open Collective](https://opencollective.com/vuetify)"
-    ],
-    "languages": [
-      "English",
-      "Vietnamese"
-    ],
-    "location": "California, US",
-    "name": "Ken Kieu",
-    "team": "core",
-    "twitter": "kieuminhcanh",
-    "joined": "April 2024"
-  },
   "MatthewAry": {
     "discord": "bitshift_",
     "focus": [
@@ -193,16 +159,6 @@
     "location": "Delhi, India",
     "joined": "March 2025"
   },
-  "eesayas": {
-    "name": "Isaias Briones",
-    "team": "core",
-    "discord": "ibriones",
-    "linkedin": "ibriones",
-    "avatar": "https://avatars.githubusercontent.com/u/47291268",
-    "focus": ["[vuetifyjs/*](https://github.com/vuetifyjs)"],
-    "languages": ["English", "Filipino"],
-    "location": "Edmonton, AB, Canada"
-  },
   "Haviles04": {
     "name": "Henry Aviles",
     "team": "core",
@@ -280,6 +236,40 @@
     "joined": "March 2025",
     "location": "Casablanca, Morocco"
   },
+  "yuwu9145": {
+    "discord": "yuwu9145",
+    "focus": [
+      "[vuetifyjs](https://github.com/vuetifyjs)"
+    ],
+    "languages": [
+      "English",
+      "Chinese(Mandarin)"
+    ],
+    "location": "Melbourne, Australia",
+    "name": "Yuchao Wu",
+    "team": "legends",
+    "joined": "Mar 2023"
+  },
+  "kieuminhcanh": {
+    "discord": "kieuminhcanh",
+    "focus": [
+      "[vuetifyjs/studio](https://github.com/vuetifyjs/studio)"
+    ],
+    "funding": [
+      "[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)",
+      "[Patreon](https://patreon.com/kieuminhcanh)",
+      "[Open Collective](https://opencollective.com/vuetify)"
+    ],
+    "languages": [
+      "English",
+      "Vietnamese"
+    ],
+    "location": "California, US",
+    "name": "Ken Kieu",
+    "team": "legends",
+    "twitter": "kieuminhcanh",
+    "joined": "April 2024"
+  },
   "jacekkarczmarczyk": {
     "discord": "jacek#3542",
     "languages": [

packages/docs/src/examples/v-btn/prop-icon.vue

@@ -6,7 +6,7 @@
       </v-col>
 
       <v-col cols="auto">
-        <v-btn density="comfortable" icon="$vuetify"></v-btn>
+        <v-btn density="comfortable" icon="mdi-cow"></v-btn>
       </v-col>
 
       <v-col cols="auto">
@@ -24,7 +24,7 @@
       </v-col>
 
       <v-col cols="auto">
-        <v-btn icon="$vuetify"></v-btn>
+        <v-btn icon="mdi-cow"></v-btn>
       </v-col>
 
       <v-col cols="auto">

packages/docs/src/pages/en/components/icon-buttons.md

@@ -10,7 +10,7 @@ related:
   - /components/buttons/
   - /components/floating-action-buttons/
 features:
-  github: /components/VIconBtn/
+  github: /labs/VIconBtn/
   label: 'C: VIconBtn'
   report: true
   spec: https://m3.material.io/components/icon-buttons/

packages/docs/src/pages/en/features/icon-fonts.md

@@ -439,12 +439,64 @@ app.mount('#app')
 </template>
 ```
 
-## Built-in aliases
+## Icon aliases
 
-The following icons are available as aliases for use in Vuetify components:
+Icon aliases allow you to define short, reusable names for icons that can map to different sources — such as icon names from a set, local Vue components, or raw SVG paths. Aliases are referenced with an initial `$` followed by the name of the alias, e.g. `$product`. The following icons are available as aliases for use in Vuetify components:
 
 <DocIconTable />
 
+### Custom aliases
+
+If you are developing custom Vuetify components, you can extend the `aliases` object to utilize the same functionality that internal Vuetify components use. This makes it easier to manage icons consistently throughout your project.
+
+Here’s an example:
+
+```js { resource="src/plugins/vuetify.js" }
+import { createVuetify } from 'vuetify'
+import AccountIcon from './account-icon.vue'
+import ClosetIcon from './closet-icon.vue'
+
+export const customIcons = {
+  mdiCustomAlias: 'mdi-cow',
+  account: AccountIcon,
+  annotation: [
+    'M14 9.45h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2Zm6.46.18A8.5 8.5 0 1 0 6 16.46l5.3 5.31a1 1 0 0 0 1.42 0L18 16.46a8.46 8.46 0 0 0 2.46-6.83Zm-3.86 5.42l-4.6 4.6l-4.6-4.6a6.49 6.49 0 0 1-1.87-5.22A6.57 6.57 0 0 1 8.42 5a6.47 6.47 0 0 1 7.16 0a6.57 6.57 0 0 1 2.89 4.81a6.49 6.49 0 0 1-1.87 5.24Z',
+  ],
+  closet: ClosetIcon,
+}
+
+export const vuetify = createVuetify({
+  theme: {
+    defaultTheme: 'light',
+    //
+  },
+  icons: {
+    defaultSet: 'mdi',
+    aliases: {
+      ...customIcons,
+    },
+  },
+})
+```
+
+```html
+<template>
+  <v-btn prepend-icon="$account">Custom Icon 1</v-btn>
+  <v-btn prepend-icon="$mdiCustomAlias">Custom Icon 2</v-btn>
+  <v-btn prepend-icon="$closet">Custom Icon 3</v-btn>
+  <v-btn prepend-icon="$annotation">Custom Icon 4</v-btn>
+  <v-btn prepend-icon="mdi-close">Default MDI Icon</v-btn>
+</template>
+```
+
+In this setup:
+
+* $account and $closet render your own Vue component SVG icons.
+* $mdiCustomAlias references an alias for the mdi-cow icon.
+* $annotation references inline SVG path data.
+
+This approach gives you flexibility: you can mix external libraries with your own icons seamlessly, while keeping your templates cleaner and easier to maintain.
+
 ## Multiple icon sets
 
 Out of the box, Vuetify supports the use of multiple *different* icon sets at the same time. The following example demonstrates how to change the default icon font to Font Awesome (`fa`) while still maintaining access to the original Material Design Icons (`mdi`) through the use of a prefix:
@@ -550,29 +602,3 @@ export default createVuetify({
   },
 })
 ```
-
-## Extending available aliases
-
-If you are developing custom Vuetify components, you can extend the `aliases` object to utilize the same functionality that internal Vuetify components use. Icon aliases are referenced with an initial `$` followed by the name of the alias, e.g. `$product`.
-
-```js { resource="src/plugins/vuetify.js" }
-import { createVuetify } from 'vuetify'
-import { aliases, mdi } from 'vuetify/iconsets/mdi'
-
-export default createVuetify({
-  icons: {
-    aliases: {
-      ...aliases,
-      product: 'mdi-dropbox',
-      support: 'mdi-lifebuoy',
-    },
-  },
-})
-```
-
-```html
-<template>
-  <v-icon icon="$product" />
-  <v-icon icon="$support" />
-</template>
-```

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.9.5",
+  "version": "3.9.6",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -268,3 +268,15 @@
 
     .v-pagination__item--is-active .v-btn__overlay
       opacity: $button-pagination-active-overlay-opacity
+
+@media (forced-colors: active)
+  .v-btn
+    &:not(
+      &--variant-text,
+      &--variant-plain
+    )
+      border: thin solid
+
+    &:focus-visible
+      outline: 2px solid
+      outline-offset: 2px