docs: create new homepage

.github/actions/download-locales/action.yml

@@ -10,7 +10,23 @@ inputs:
 runs:
   using: composite
   steps:
+    - id: get-date
+      run: |
+        echo "date=$(/bin/date -u "+%Y%m%d")" >> $GITHUB_OUTPUT
+      shell: bash
+    - uses: actions/cache@v4
+      id: cache-crowdin
+      with:
+        key: crowdin-${{ inputs.crowdin-branch }}-${{ steps.get-date.outputs.date }}
+        path: |-
+          packages/api-generator/src/locale/**/*.json
+          !packages/api-generator/src/locale/en/**/*.json
+          packages/docs/src/pages/**/*.md
+          !packages/docs/src/pages/en/**/*.md
+          packages/docs/src/i18n/messages/*.json
+          !packages/docs/src/i18n/messages/en.json
     - name: Download eo-UY
+      if: ${{ steps.cache-crowdin.outputs.cache-hit != 'true' }}
       uses: crowdin/[email protected]
       with:
         download_language: eo
@@ -21,6 +37,7 @@ runs:
         export_only_approved: false
         crowdin_branch_name: ${{ inputs.crowdin-branch }}
     - name: Download es-MX
+      if: ${{ steps.cache-crowdin.outputs.cache-hit != 'true' }}
       uses: crowdin/[email protected]
       with:
         download_language: es-MX
@@ -31,6 +48,7 @@ runs:
         export_only_approved: false
         crowdin_branch_name: ${{ inputs.crowdin-branch }}
     - name: Download ja-JP
+      if: ${{ steps.cache-crowdin.outputs.cache-hit != 'true' }}
       uses: crowdin/[email protected]
       with:
         download_language: ja
@@ -41,6 +59,7 @@ runs:
         export_only_approved: false
         crowdin_branch_name: ${{ inputs.crowdin-branch }}
     - name: Download zh-CN
+      if: ${{ steps.cache-crowdin.outputs.cache-hit != 'true' }}
       uses: crowdin/[email protected]
       with:
         download_language: zh-CN

.github/workflows/ci.yml

@@ -58,26 +58,20 @@ jobs:
         env:
           SCOPES: ${{ matrix.scopes }}
 
-  test-unit:
-    name: Test (Unit)
-    needs: pre_job
-    if: needs.pre_job.outputs.should_skip != 'true'
-    runs-on: ubuntu-24.04
-    steps:
-      - uses: actions/checkout@v4
-      - uses: vuetifyjs/setup-action@master
-      - run: pnpm run test --project unit
-        working-directory: ./packages/vuetify
-
-  test-e2e:
-    name: Test (e2e)
+  test:
+    name: Test
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('./pnpm-lock.yaml') }}
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm run test --project browser
+      - run: pnpm exec playwright install chromium
+      - run: pnpm run test
         working-directory: ./packages/vuetify
       - uses: actions/upload-artifact@v4
         if: failure()
@@ -88,7 +82,7 @@ jobs:
           overwrite: true
 
   deploy:
-    needs: [lint, test-unit, test-e2e, build-vuetify]
+    needs: [lint, test, build-vuetify]
     runs-on: ubuntu-24.04
     if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs'
     environment: production
@@ -155,7 +149,7 @@ jobs:
           path: packages/docs/dist
 
   publish-docs:
-    needs: [lint, test-unit, build-docs]
+    needs: [lint, test, build-docs]
     runs-on: ubuntu-24.04
     environment: ${{ github.ref_name }}
     steps:

.github/workflows/nightly.yml

@@ -96,7 +96,7 @@ jobs:
         env:
           FULL_VERSION: ${{ steps.nightly-release.outputs.full-version }}
 
-  percy:
+  vizzly:
     name: Visual regression tests
     runs-on: ubuntu-24.04
     if: ${{ github.event_name == 'schedule' && github.repository_owner == 'vuetifyjs' }}
@@ -115,10 +115,7 @@ jobs:
           fi
       - uses: vuetifyjs/setup-action@master
       - run: echo "COMMIT=$(git rev-parse HEAD)" >> $GITHUB_ENV
-      - run: pnpm test:percy
+      - run: pnpm vizzly run "pnpm test:browser"
         working-directory: ./packages/vuetify
         env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-          PERCY_BRANCH: master
-          PERCY_TARGET_BRANCH: master
-          PERCY_COMMIT: ${{ env.COMMIT }}
+          VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}

.nvmrc

@@ -1 +1 @@
-24.8.0
+24.11.1

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.11.0"
-}
+  "version": "3.11.2"
+}

package.json

@@ -12,85 +12,85 @@
     "lint": "pnpm run -r --parallel --stream lint",
     "lint:fix": "pnpm run -r --parallel lint:fix",
     "version": "node scripts/confirm-npm-tag.js",
-    "prepare": "husky; node scripts/post-install.js",
+    "prepare": "husky; node scripts/post-install.js; $CI || pnpm exec playwright install chromium",
     "postversion": "node scripts/post-release-merge.js",
     "clean": "pnpm -r exec rm -r node_modules && rm -r node_modules",
     "changelog": "conventional-changelog -u -p vuetify",
-    "all-checks": "pnpm run lint && pnpm run -r test && pnpm run -r cy:run && pnpm run -r --stream build",
+    "all-checks": "pnpm run -r --stream build && pnpm run lint && pnpm run -r test",
     "vue-ecosystem-ci:build": "pnpm --filter vuetify run build",
     "vue-ecosystem-ci:test": "pnpm --filter vuetify run lint && pnpm --filter vuetify run test"
   },
   "engines": {
-    "node": ">=24.8.0"
+    "node": ">=24.11.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.0",
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-typescript": "^7.27.0",
-    "@lerna-lite/cli": "^4.7.3",
-    "@lerna-lite/version": "^4.7.3",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@lerna-lite/cli": "^4.9.3",
+    "@lerna-lite/version": "^4.9.3",
     "@mdi/font": "7.4.47",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@octokit/core": "^6.1.5",
+    "@rollup/plugin-terser": "^0.4.4",
     "@stylistic/eslint-plugin-ts": "^3.1.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "24.4.0",
-    "@types/yargs": "^17.0.33",
+    "@types/node": "24.10.1",
+    "@types/yargs": "^17.0.35",
     "@typescript-eslint/eslint-plugin": "^8.32.0",
     "@typescript-eslint/parser": "^8.32.0",
     "@typescript/native-preview": "7.0.0-dev.20250912.1",
-    "@unhead/vue": "^2.0.5",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/compiler-sfc": "^3.5.21",
-    "@vue/language-server": "^3.0.7",
-    "@vue/runtime-core": "^3.5.21",
-    "@vue/runtime-dom": "^3.5.21",
+    "@unhead/vue": "^2.0.19",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/compiler-sfc": "^3.5.25",
+    "@vue/language-server": "^3.1.5",
+    "@vue/runtime-core": "^3.5.25",
+    "@vue/runtime-dom": "^3.5.25",
     "@vuetify/github-releaser": "^4.0.3",
     "@vueuse/head": "^1.3.1",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.1",
     "conventional-changelog-cli": "^5.0.0",
     "conventional-changelog-vuetify": "^2.0.2",
     "cross-spawn": "^7.0.6",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-formatter-codeframe": "^7.32.2",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-local-rules": "^2.0.1",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-sonarjs": "^0.25.1",
-    "eslint-plugin-vue": "^10.4.0",
-    "eslint-plugin-vuetify": "^2.5.2",
-    "glob": "^11.0.1",
+    "eslint-plugin-vue": "^10.6.0",
+    "eslint-plugin-vuetify": "^2.5.3",
+    "glob": "^11.1.0",
     "husky": "^9.1.7",
     "inquirer": "^12.6.0",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.30.17",
+    "magic-string": "^0.30.21",
     "mkdirp": "^3.0.1",
     "moment": "^2.30.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.43.0",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-sass": "^1.15.2",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.3",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-sass": "^1.15.3",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.87.0",
-    "sass-embedded": "^1.87.0",
-    "semver": "^7.7.1",
+    "sass": "^1.94.2",
+    "sass-embedded": "^1.93.3",
+    "semver": "^7.7.3",
     "shelljs": "^0.10.0",
     "stringify-object": "^5.0.0",
     "typescript": "~5.8.3",
     "upath": "^2.0.1",
-    "vite": "^7.1.5",
+    "vite": "^7.2.4",
     "vite-plugin-inspect": "11.3.3",
-    "vue": "^3.5.21",
+    "vue": "^3.5.25",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.0.7",
+    "vue-tsc": "^3.1.5",
     "vuetify": "workspace:*",
     "yargs": "^17.7.2"
   },
-  "packageManager": "pnpm@10.17.0"
+  "packageManager": "pnpm@10.23.0"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.11.0",
+  "version": "3.11.2",
   "private": true,
   "description": "",
   "scripts": {
@@ -14,9 +14,9 @@
   "dependencies": {
     "deepmerge": "^4.3.1",
     "piscina": "^4.9.2",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "ts-morph": "^25.0.1",
-    "vue": "^3.5.21",
+    "vue": "^3.5.25",
     "vuetify": "workspace:*"
   },
   "devDependencies": {

packages/api-generator/src/locale/en/VExpansionPanels.json

@@ -6,6 +6,7 @@
     "flat": "Removes the expansion-panel's elevation and borders.",
     "hover": "Applies a background-color shift on hover to expansion panel headers.",
     "inset": "Makes the expansion panel open with a inset style.",
+    "modelValue": "Controls expanded panel(s). Defaults to an empty array when using **multiple** prop. It is recommended to set unique `value` prop for the panels inside, otherwise index is used instead.",
     "popout": "Makes the expansion-panel open with an popout style.",
     "readonly": "Makes the entire expansion panel read only.",
     "static": "Remove title size expansion when selected.",

packages/api-generator/src/locale/en/VSlideGroup.json

@@ -6,7 +6,7 @@
     "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.",
     "nextIcon": "The appended slot when arrows are shown.",
     "prevIcon": "The prepended slot when arrows are shown.",
-    "showArrows": "Change when the overflow arrow indicators are shown. By **default**, arrows *always* display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A **show-arrows** value of `true` allows these arrows to show on Mobile if the container overflowing. A value of `desktop` *always* displays arrows on Desktop while a value of `mobile` always displays arrows on Mobile. A value of `always` always displays arrows on Desktop *and* Mobile. Find more information on how to customize breakpoint thresholds on the [breakpoints page](/customizing/breakpoints)."
+    "showArrows": "Change when the overflow arrow indicators are shown. By **default**, arrows *always* display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A **show-arrows** value of `true` allows these arrows to show on Mobile if the container overflowing. A value of `desktop` *always* displays arrows on Desktop while a value of `mobile` always displays arrows on Mobile. A value of `always` always displays arrows on Desktop *and* Mobile. Use **never** to turn arrows off. Find more information on how to customize breakpoint thresholds on the [breakpoints page](/customizing/breakpoints)."
   },
   "slots": {
     "next": "The next slot.",

packages/api-generator/src/locale/en/VTab.json

@@ -2,6 +2,7 @@
   "props": {
     "direction": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`.",
     "hideSlider": "Hides the active tab slider component (no exit or enter animation).",
+    "inset": "Changes the slider to take full height. Automatically propagated from VTabs.",
     "fixed": "Forces component to take up all available space up to their maximum width (300px), and centers it.",
     "sliderColor": "Applies specified color to the slider when active on that component - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "sliderTransition": "Changes slider transition to one of the predefined animation presets.",

packages/api-generator/src/locale/en/VTabs.json

@@ -8,8 +8,8 @@
     "cycle": "Will reset to first or last tab when swiping left or right if at the end of indexes.",
     "dark": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).",
     "direction": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`.",
-    "fixedTabs": "`v-tabs-item` min-width 160px, max-width 360px.",
-    "grow": "Force `v-tab`'s to take up all available space.",
+    "fixedTabs": "Tabs will be centered and each tab item will grow up to 300px width.",
+    "grow": "Forces tabs to take up all available space.",
     "height": "Sets the height of the tabs bar.",
     "hideSlider": "Hide's the generated `v-tabs-slider`.",
     "iconsAndText": "Will stack icon and text vertically.",

packages/docs/.markdownlintrc

@@ -11,5 +11,6 @@
   "no-bare-urls": false,
   "emphasis-style": false,
   "link-fragments": false,
-  "descriptive-link-text": false
+  "descriptive-link-text": false,
+  "table-column-style": false
 }

packages/docs/auto-imports.d.ts

@@ -172,6 +172,9 @@ declare global {
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
+  export type { CodeSection } from './src/composables/playground'
+  import('./src/composables/playground')
+  // @ts-ignore
   export type { Category } from './src/stores/app'
   import('./src/stores/app')
   // @ts-ignore

packages/docs/components.d.ts

@@ -100,7 +100,6 @@ declare module 'vue' {
     DocMadeWithVueAttribution: typeof import('./src/components/doc/MadeWithVueAttribution.vue')['default']
     DocMadeWithVuetifyGallery: typeof import('./src/components/doc/MadeWithVuetifyGallery.vue')['default']
     DocMadeWithVuetifyLink: typeof import('./src/components/doc/MadeWithVuetifyLink.vue')['default']
-    DocPremiumThemesGallery: typeof import('./src/components/doc/PremiumThemesGallery.vue')['default']
     DocReadyForMore: typeof import('./src/components/doc/ReadyForMore.vue')['default']
     DocRelatedPage: typeof import('./src/components/doc/RelatedPage.vue')['default']
     DocRelatedPages: typeof import('./src/components/doc/RelatedPages.vue')['default']
@@ -120,13 +119,40 @@ declare module 'vue' {
     FeaturesSassApi: typeof import('./src/components/features/SassApi.vue')['default']
     GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default']
     HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default']
+    HomeBlogs: typeof import('./src/components/home/Blogs.vue')['default']
+    HomeCommonCard: typeof import('./src/components/home/Common/Card.vue')['default']
+    HomeCommonGradient: typeof import('./src/components/home/Common/Gradient.vue')['default']
+    HomeCommonMarquee: typeof import('./src/components/home/Common/Marquee.vue')['default']
+    HomeCommonTitle: typeof import('./src/components/home/Common/Title.vue')['default']
+    HomeComponentGallery: typeof import('./src/components/home/ComponentGallery.vue')['default']
+    HomeDiscord: typeof import('./src/components/home/Discord.vue')['default']
+    HomeEcosystem: typeof import('./src/components/home/Ecosystem.vue')['default']
     HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
     HomeEpicmaxSupport: typeof import('./src/components/home/EpicmaxSupport.vue')['default']
-    HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
     HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
+    HomeGalleryAnalytics: typeof import('./src/components/home/Gallery/Analytics.vue')['default']
+    HomeGalleryChatChat: typeof import('./src/components/home/Gallery/Chat/Chat.vue')['default']
+    HomeGalleryChatDetail: typeof import('./src/components/home/Gallery/Chat/Detail.vue')['default']
+    HomeGalleryChatInbox: typeof import('./src/components/home/Gallery/Chat/Inbox.vue')['default']
+    HomeGalleryChatList: typeof import('./src/components/home/Gallery/Chat/List.vue')['default']
+    HomeGalleryComponentGallery: typeof import('./src/components/home/Gallery/ComponentGallery.vue')['default']
+    HomeGalleryComponents: typeof import('./src/components/home/Gallery/Components.vue')['default']
+    HomeGalleryDashboard: typeof import('./src/components/home/Gallery/Dashboard.vue')['default']
+    HomeGalleryData: typeof import('./src/components/home/Gallery/Data.vue')['default']
+    HomeGalleryForm: typeof import('./src/components/home/Gallery/Form.vue')['default']
+    HomeGalleryLogin: typeof import('./src/components/home/Gallery/Login.vue')['default']
+    HomeGallerySelection: typeof import('./src/components/home/Gallery/Selection.vue')['default']
+    HomeGallerySettings: typeof import('./src/components/home/Gallery/Settings.vue')['default']
+    HomeGallerySnipsExample: typeof import('./src/components/home/Gallery/SnipsExample.vue')['default']
     HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
+    HomeSnips: typeof import('./src/components/home/Snips.vue')['default']
+    HomeSnipsExample: typeof import('./src/components/home/SnipsExample.vue')['default']
     HomeSpecialSponsor: typeof import('./src/components/home/SpecialSponsor.vue')['default']
     HomeSponsors: typeof import('./src/components/home/Sponsors.vue')['default']
+    HomeStore: typeof import('./src/components/home/Store.vue')['default']
+    HomeSupport: typeof import('./src/components/home/Support.vue')['default']
+    HomeTooling: typeof import('./src/components/home/Tooling.vue')['default']
+    HomeVuetifyOne: typeof import('./src/components/home/VuetifyOne.vue')['default']
     IconsChevronDown: typeof import('./src/components/icons/ChevronDown.vue')['default']
     IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
     IntroductionConsultingServices: typeof import('./src/components/introduction/ConsultingServices.vue')['default']