diff --git a/.eslintrc.js b/.eslintrc.js
index 92ae70b7419..4138d442178 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -94,6 +94,14 @@ module.exports = {
     'vue/require-prop-types': 'off',
     'vue/one-component-per-file': 'off',
     'vue/custom-event-name-casing': ['error', { ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }],
+
+    'vue/attributes-order': ['error', {
+      order: [
+        'DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'UNIQUE', 'GLOBAL', 'SLOT',
+        'TWO_WAY_BINDING', 'ATTR_DYNAMIC', 'ATTR_STATIC', 'ATTR_SHORTHAND_BOOL', 'OTHER_DIRECTIVES', 'EVENTS', 'CONTENT',
+      ],
+      alphabetical: true,
+    }],
   },
   overrides: [
     {
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
new file mode 100644
index 00000000000..2b7abfdfc6d
--- /dev/null
+++ b/.github/workflows/stale.yml
@@ -0,0 +1,19 @@
+name: 'Close stale issues'
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '08 11 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          days-before-stale: 180
+          days-before-close: 14
+          only-labels: 'S: triage'
+          stale-issue-label: 'S: stale'
+          stale-pr-label: 'S: stale'
+          exempt-all-milestones: true
+          exempt-draft-pr: true
diff --git a/lerna.json b/lerna.json
index 5c9cb5dff1e..9203879c545 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.3",
+  "version": "3.5.8",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index 7eab0934c09..f76165e6f1f 100755
--- a/package.json
+++ b/package.json
@@ -43,12 +43,12 @@
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "@unhead/vue": "^1.8.9",
-    "@vue/compiler-sfc": "^3.4.7",
+    "@vue/compiler-sfc": "^3.4.19",
     "@vueuse/head": "^1.3.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
     "conventional-changelog-cli": "^4.1.0",
-    "conventional-changelog-vuetify": "^1.1.0",
+    "conventional-changelog-vuetify": "^1.2.1",
     "conventional-github-releaser": "^3.1.5",
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
@@ -82,10 +82,14 @@
     "upath": "^2.0.1",
     "vite-plugin-inspect": "^0.7.42",
     "vite-plugin-warmup": "^0.1.0",
-    "vue": "^3.4.7",
+    "vue": "^3.4.19",
     "vue-analytics": "^5.16.1",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27",
     "yargs": "^17.7.2"
+  },
+  "resolutions": {
+    "conventional-changelog": "4.0.0",
+    "conventional-changelog-preset-loader": "3.0.0"
   }
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index f8647adbe9e..c15d98935d6 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.3",
+  "version": "3.5.8",
   "private": true,
   "description": "",
   "scripts": {
@@ -16,8 +16,8 @@
     "prettier": "^3.1.1",
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
-    "vue": "^3.4.7",
-    "vuetify": "^3.5.3"
+    "vue": "^3.4.19",
+    "vuetify": "^3.5.8"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/api-generator/src/index.ts b/packages/api-generator/src/index.ts
index 7115d5693a8..0521edd3a1f 100644
--- a/packages/api-generator/src/index.ts
+++ b/packages/api-generator/src/index.ts
@@ -4,6 +4,7 @@ import { components } from 'vuetify/dist/vuetify-labs.js'
 import importMap from 'vuetify/dist/json/importMap.json' assert { type: 'json' }
 import importMapLabs from 'vuetify/dist/json/importMap-labs.json' assert { type: 'json' }
 import { kebabCase } from './helpers/text'
+import type { BaseData, ComponentData, DirectiveData } from './types'
 import { generateComposableDataFromTypes, generateDirectiveDataFromTypes } from './types'
 import Piscina from 'piscina'
 import { addDescriptions, addDirectiveDescriptions, addPropData, stringifyProps } from './utils'
@@ -36,6 +37,9 @@ const componentsInfo: Record<string, { from: string }> = {
   ...importMapLabs.components,
 }
 
+type Truthy<T> = Exclude<T, null | undefined | 0 | '' | false>;
+const BooleanFilter = <T>(x: T): x is Truthy<T> => Boolean(x)
+
 const run = async () => {
   const argv = await yar.argv
 
@@ -64,7 +68,7 @@ const run = async () => {
   const outPath = path.resolve('./dist/api')
   await mkdirp(outPath)
 
-  const componentData = await Promise.all(
+  const componentData = (await Promise.all(
     Object.entries(components).map(async ([componentName, componentInstance]) => {
       if (argv.components && !argv.components.includes(componentName)) return null
 
@@ -74,40 +78,50 @@ const run = async () => {
       await addDescriptions(componentName, data, locales, sources)
       const sass = parseSassVariables(componentName)
 
-      const component = { displayName: componentName, fileName: kebabCase(componentName), ...data, sass }
-      await fs.writeFile(path.resolve(outPath, `${componentName}.json`), JSON.stringify(component, null, 2))
+      const component = {
+        displayName: componentName,
+        fileName: componentName,
+        pathName: kebabCase(componentName),
+        ...data,
+        sass,
+      } satisfies ComponentData
+      await fs.writeFile(path.resolve(outPath, `${component.fileName}.json`), JSON.stringify(component, null, 2))
 
       return component
-    }).filter(Boolean)
-  )
+    })
+  )).filter(BooleanFilter)
 
   // Composables
   if (!argv.skipComposables) {
     const composables = await Promise.all((await generateComposableDataFromTypes()).map(async composable => {
-      console.log(blue, composable.name, reset)
-      const kebabName = kebabCase(composable.name)
-      await addDescriptions(composable.name, composable.data, locales)
-      return { fileName: kebabName, displayName: composable.name, ...composable }
+      console.log(blue, composable.displayName, reset)
+      await addDescriptions(composable.fileName, composable, locales)
+      return composable
     }))
 
-    for (const { displayName, fileName, data } of composables) {
-      await fs.writeFile(path.resolve(outPath, `${displayName}.json`), JSON.stringify({ displayName, fileName, ...data }, null, 2))
+    for (const composable of composables) {
+      await fs.writeFile(
+        path.resolve(outPath, `${composable.fileName}.json`),
+        JSON.stringify(composable, null, 2)
+      )
     }
   }
 
   // Directives
-  let directives: any[] = []
+  let directives: DirectiveData[] = []
   if (!argv.skipDirectives) {
-    directives = await Promise.all((await generateDirectiveDataFromTypes()).map(async directive => {
-      const name = `v-${kebabCase(directive.name)}`
-      console.log(blue, name, reset)
-      await addDirectiveDescriptions(name, directive, locales)
+    directives = await Promise.all((await generateDirectiveDataFromTypes()).map(async data => {
+      console.log(blue, data.fileName, reset)
+      await addDirectiveDescriptions(data.fileName, data, locales)
 
-      return { fileName: name, displayName: name, ...directive }
+      return data
     }))
 
-    for (const { displayName, fileName, ...directive } of directives) {
-      await fs.writeFile(path.resolve(outPath, `${fileName}.json`), JSON.stringify({ displayName, fileName, ...directive }, null, 2))
+    for (const directive of directives) {
+      await fs.writeFile(
+        path.resolve(outPath, `${directive.fileName}.json`),
+        JSON.stringify(directive, null, 2)
+      )
     }
   }
 
diff --git a/packages/api-generator/src/locale/en/Select.json b/packages/api-generator/src/locale/en/Select.json
index 46d3a4625b9..e2af9a03120 100644
--- a/packages/api-generator/src/locale/en/Select.json
+++ b/packages/api-generator/src/locale/en/Select.json
@@ -5,6 +5,7 @@
     "closableChips": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.",
     "hideSelected": "Do not display in the select menu items that are already selected.",
     "itemColor": "Sets color of selected items.",
+    "listProps": "Pass props through to the `v-list` component. Accepts an object with anything from [v-list](/api/v-list/#props) props, camelCase keys are recommended.",
     "menuProps": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended.",
     "multiple": "Changes select to multiple. Accepts array for value.",
     "openOnClear": "Open's the menu whenever the clear icon is clicked.",
diff --git a/packages/api-generator/src/locale/en/VBtn.json b/packages/api-generator/src/locale/en/VBtn.json
index 222417ff8e5..4b1b7db3bf8 100644
--- a/packages/api-generator/src/locale/en/VBtn.json
+++ b/packages/api-generator/src/locale/en/VBtn.json
@@ -6,5 +6,8 @@
     "plain": "Removes the default background change applied when hovering over the button.",
     "stacked": "Displays the button as a flex-column.",
     "slim": "Reduces padding to 0 8px."
+  },
+  "exposed": {
+    "group": "Internal representation when used in VBtnToggle."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VChipGroup.json b/packages/api-generator/src/locale/en/VChipGroup.json
index 3d6c467320d..66adad8c9ed 100644
--- a/packages/api-generator/src/locale/en/VChipGroup.json
+++ b/packages/api-generator/src/locale/en/VChipGroup.json
@@ -3,7 +3,6 @@
     "centerActive": "Forces the selected chip to be centered.",
     "column": "Remove horizontal pagination and wrap items as needed.",
     "filter": "Applies an checkmark icon in front of every chip for using it like a filter.",
-    "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.",
     "nextIcon": "Specify the icon to use for the next icon.",
     "prependIcon": "This icon used in the prepend slot (if shown).",
     "prevIcon": "Specify the icon to use for the prev icon.",
diff --git a/packages/api-generator/src/locale/en/VConfirmEdit.json b/packages/api-generator/src/locale/en/VConfirmEdit.json
new file mode 100644
index 00000000000..2ebe5cdd16f
--- /dev/null
+++ b/packages/api-generator/src/locale/en/VConfirmEdit.json
@@ -0,0 +1,6 @@
+{
+  "props": {
+    "cancelText": "Text for the cancel button",
+    "okText": "Text for the ok button"
+  }
+}
diff --git a/packages/api-generator/src/locale/en/VDataTableRows.json b/packages/api-generator/src/locale/en/VDataTableRows.json
index 5a1a023e788..65a41784031 100644
--- a/packages/api-generator/src/locale/en/VDataTableRows.json
+++ b/packages/api-generator/src/locale/en/VDataTableRows.json
@@ -1,8 +1,10 @@
 {
   "props": {
+    "cellProps": "An object of additional props to be passed to each `<td>` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.",
     "loading": "Displays `loading` slot if set to `true`",
     "loadingText": "Text shown when the data is loading.",
-    "multiSort": "Allows sorting by multiple columns."
+    "multiSort": "Allows sorting by multiple columns.",
+    "rowProps": "An object of additional props to be passed to each `<tr>` in the table body. Also accepts a function that will be called for each row."
   },
   "events": {
     "click:row": "Emitted when a row is clicked. Native event is passed as the first argument, row data as the second."
diff --git a/packages/api-generator/src/locale/en/VDatePicker.json b/packages/api-generator/src/locale/en/VDatePicker.json
index 2f5349e6fad..2234f5b312e 100644
--- a/packages/api-generator/src/locale/en/VDatePicker.json
+++ b/packages/api-generator/src/locale/en/VDatePicker.json
@@ -1,6 +1,5 @@
 {
   "props": {
-    "activePicker": "Determines which picker in the date or month picker is being displayed. Allowed values: `'DATE'`, `'MONTH'`, `'YEAR'`.",
     "allowedDates": "Restricts which dates can be selected.",
     "calendarIcon": "The icon shown in the header when in 'input' **input-mode**.",
     "dayFormat": "Allows you to customize the format of the day string that appears in the date table. Called with date (ISO 8601 **date** string) arguments.",
@@ -18,6 +17,7 @@
     "localeFirstDayOfYear": "Sets the day that determines the first week of the year, starting with 0 for **Sunday**. For ISO 8601 this should be 4.",
     "max": "Maximum allowed date/month (ISO 8601 format).",
     "min": "Minimum allowed date/month (ISO 8601 format).",
+    "modeIcon": "Icon displayed next to the current month and year, toggles year selection when clicked.",
     "monthFormat": "Formatting function used for displaying months in the months table. Called with date (ISO 8601 **date** string) arguments.",
     "multiple": "Allow the selection of multiple dates. The **range** value selects all dates between two selections.",
     "nextIcon": "Sets the icon for next month/year button.",
@@ -33,6 +33,7 @@
     "titleDateFormat": "Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 **date** string) arguments.",
     "type": "Determines the type of the picker - `date` for date picker, `month` for month picker.",
     "value": "Date picker model (ISO 8601 format, YYYY-mm-dd or YYYY-mm).",
+    "viewMode": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.",
     "weekdayFormat": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Called with date (ISO 8601 **date** string) arguments.",
     "width": "Width of the picker.",
     "yearFormat": "Allows you to customize the format of the year string that appears in the header of the calendar. Called with date (ISO 8601 **date** string) arguments.",
@@ -43,7 +44,6 @@
     "<domevent>:month": "Emitted when the specified DOM event occurs on the month button.",
     "<domevent>:year": "Emitted when the specified DOM event occurs on the year button.",
     "change": "Reactive date picker emits `input` even when any part of the date (year/month/day) changes, but `change` event is emitted only when the day (for date pickers) or month (for month pickers) changes. If `range` prop is set, date picker emits `change` when both [from, to] are selected.",
-    "update:activePicker": "The `.sync` event for `active-picker` prop.",
     "update:pickerDate": "The `.sync` event for `picker-date` prop."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VEmptyState.json b/packages/api-generator/src/locale/en/VEmptyState.json
new file mode 100644
index 00000000000..7e0a4593d30
--- /dev/null
+++ b/packages/api-generator/src/locale/en/VEmptyState.json
@@ -0,0 +1,18 @@
+{
+  "props": {
+    "actionText": "The text used for the action button.",
+    "headline": "A large headline often used for 404 pages.",
+    "href": "The URL the action button links to.",
+    "justify": "Control the justification of the text.",
+    "textWidth": "Sets the width of the text container.",
+    "to": "The URL the action button links to."
+  },
+  "events": {
+    "click:action": "Event emitted when the action button is clicked."
+  },
+  "slots": {
+    "actions": "Slot for the action button.",
+    "headline": "Slot for the component's headline.",
+    "media": "Slot for the component's media."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/VFab.json b/packages/api-generator/src/locale/en/VFab.json
new file mode 100644
index 00000000000..d40545ee82b
--- /dev/null
+++ b/packages/api-generator/src/locale/en/VFab.json
@@ -0,0 +1,9 @@
+{
+  "props": {
+    "app": "If true, attaches to the closest layout and positions according to the value of **location**.",
+    "appear": "Used to control the animation of the FAB.",
+    "extended": "An alternate style for the FAB that expects text.",
+    "location": "The location of the fab relative to the layout. Only works when using **app**.",
+    "offset": "Translates the Fab up or down, depending on if location is set to **top** or **bottom**."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/VMenu.json b/packages/api-generator/src/locale/en/VMenu.json
index eb773776e0d..1c722b31e76 100644
--- a/packages/api-generator/src/locale/en/VMenu.json
+++ b/packages/api-generator/src/locale/en/VMenu.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "attach": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.",
+    "id": "The unique identifier of the component.",
     "closeOnClick": "Designates if menu should close on outside-activator click.",
     "closeOnContentClick": "Designates if menu should close when its content is clicked.",
     "closeDelay": "Milliseconds to wait before closing component. Only works with the **open-on-hover** prop.",
diff --git a/packages/api-generator/src/locale/en/VSlideGroup.json b/packages/api-generator/src/locale/en/VSlideGroup.json
index 2ba3a20de32..4003ee86c94 100644
--- a/packages/api-generator/src/locale/en/VSlideGroup.json
+++ b/packages/api-generator/src/locale/en/VSlideGroup.json
@@ -1,6 +1,7 @@
 {
   "props": {
     "centerActive": "Forces the selected component to be centered.",
+    "direction": "Switch between horizontal and vertical modes.",
     "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.",
diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json
new file mode 100644
index 00000000000..b60f4b1ce3f
--- /dev/null
+++ b/packages/api-generator/src/locale/en/display.json
@@ -0,0 +1,5 @@
+{
+  "props": {
+    "mobileBreakpoint": "Sets the designated mobile breakpoint for the component."
+  }
+}
diff --git a/packages/api-generator/src/locale/en/rounded.json b/packages/api-generator/src/locale/en/rounded.json
index 68f51481c65..6d712a651b6 100644
--- a/packages/api-generator/src/locale/en/rounded.json
+++ b/packages/api-generator/src/locale/en/rounded.json
@@ -1,5 +1,6 @@
 {
   "props": {
-    "rounded": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius)."
+    "rounded": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius).",
+    "tile": "Removes any applied **border-radius** from the component."
   }
 }
diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts
index 16076570d83..998b7b83481 100644
--- a/packages/api-generator/src/types.ts
+++ b/packages/api-generator/src/types.ts
@@ -1,6 +1,7 @@
 import type { Node, Type } from 'ts-morph'
 import { Project, ts } from 'ts-morph'
 import { prettifyType } from './utils'
+import { kebabCase } from './helpers/text'
 
 const project = new Project({
   tsConfigFilePath: './tsconfig.json',
@@ -29,15 +30,15 @@ async function inspect (project: Project, node?: Node<ts.Node>) {
   throw new Error(`Unsupported node kind: ${kind}`)
 }
 
-export async function generateComposableDataFromTypes () {
+export async function generateComposableDataFromTypes (): Promise<ComposableData[]> {
   const sourceFile = project.addSourceFileAtPath('./templates/composables.d.ts')
 
   const composables = await inspect(project, sourceFile.getTypeAlias('Composables'))
 
-  return await Promise.all(
+  return Promise.all(
     Object.entries(composables.properties).map(async ([name, data]) => {
       const returnType = (data as FunctionDefinition).returnType
-      let exposed: Record<string, Definition> | undefined
+      let exposed: Record<string, Definition> = {}
       if (returnType.type === 'allOf') {
         exposed = returnType.items.reduce((acc, item) => {
           const props = (item as ObjectDefinition).properties
@@ -56,33 +57,38 @@ export async function generateComposableDataFromTypes () {
         )
       }
 
+      const kebabName = kebabCase(name)
+
       return {
-        name,
-        data: {
-          exposed,
-        },
+        fileName: name,
+        displayName: name,
+        pathName: kebabName,
+        exposed,
       }
     })
-  ) as { name: string, data: { exposed: Record<string, Definition> } }[]
+  )
 }
 
-export async function generateDirectiveDataFromTypes () {
+export async function generateDirectiveDataFromTypes (): Promise<DirectiveData[]> {
   const sourceFile = project.addSourceFileAtPath('./templates/directives.d.ts')
 
   const directives = await inspect(project, sourceFile.getTypeAlias('Directives'))
 
-  return await Promise.all(
+  return Promise.all(
     Object.entries(directives.properties).map(async ([name, data]) => {
+      const kebabName = kebabCase(name)
       return {
-        name,
+        fileName: `v-${kebabName}`,
+        displayName: `v-${kebabName}`,
+        pathName: `v-${kebabName}-directive`,
         argument: { value: await prettifyType(name, (data as ObjectDefinition).properties.value) },
         modifiers: ((data as ObjectDefinition).properties.modifiers as ObjectDefinition).properties,
       }
     })
-  ) as { name: string, argument: { value: Definition }, modifiers: Record<string, Definition> }[]
+  )
 }
 
-export async function generateComponentDataFromTypes (component: string) {
+export async function generateComponentDataFromTypes (component: string): Promise<ComponentData> {
   const sourceFile = project.addSourceFileAtPath(`./templates/tmp/${component}.d.ts`)
 
   const props = await inspect(project, sourceFile.getTypeAlias('ComponentProps'))
@@ -200,6 +206,40 @@ export type Definition =
   | RecordDefinition
   | InterfaceDefinition
 
+export type BaseData = {
+  displayName: string // user visible name used in page titles
+  fileName: string // file name for translation strings and generated types
+  pathName: string // kebab-case name for use in urls
+}
+export type ComponentData = BaseData & {
+  sass: Record<string, { default: string }>
+  props: Record<string, Definition>
+  slots: Record<string, Definition>
+  events: Record<string, Definition>
+  exposed: Record<string, Definition>
+  argument?: never
+  modifiers?: never
+}
+export type DirectiveData = BaseData & {
+  sass?: never
+  props?: never
+  slots?: never
+  events?: never
+  exposed?: never
+  argument: { value: Definition }
+  modifiers: Record<string, Definition>
+}
+export type ComposableData = BaseData & {
+  sass?: never
+  props?: never
+  slots?: never
+  events?: never
+  exposed: Record<string, Definition>
+  argument?: never
+  modifiers?: never
+}
+export type PartData = ComponentData | DirectiveData | ComposableData
+
 function isExternalDeclaration (declaration?: Node<ts.Node>, definitionText?: string) {
   const filePath = declaration?.getSourceFile().getFilePath()
 
diff --git a/packages/api-generator/src/vetur.ts b/packages/api-generator/src/vetur.ts
index f36473eaf15..08b771426b5 100644
--- a/packages/api-generator/src/vetur.ts
+++ b/packages/api-generator/src/vetur.ts
@@ -1,15 +1,6 @@
 import fs from 'fs'
 import { kebabCase } from './helpers/text'
-import type { Definition } from './types'
-
-type ComponentData = {
-  props: Record<string, Definition>
-  slots: Record<string, Definition>
-  events: Record<string, Definition>
-  exposed: Record<string, Definition>
-  displayName: string
-  fileName: string
-}
+import type { ComponentData } from './types'
 
 export function createVeturApi (componentData: ComponentData[]) {
   const tags = componentData.reduce((obj, component) => {
diff --git a/packages/api-generator/src/web-types.ts b/packages/api-generator/src/web-types.ts
index 559d74db2c9..2303e7a2271 100644
--- a/packages/api-generator/src/web-types.ts
+++ b/packages/api-generator/src/web-types.ts
@@ -1,24 +1,8 @@
 import fs from 'fs'
 import { capitalize } from './helpers/text'
-import type { Definition, ObjectDefinition } from './types'
+import type { ComponentData, DirectiveData } from './types'
 import pkg from '../package.json' assert { type: 'json' }
 
-type ComponentData = {
-  props: Definition
-  slots: Definition
-  events: Definition
-  exposed: Definition
-  displayName: string
-  fileName: string
-}
-
-type DirectiveData = {
-  name: string
-  fileName: string
-  argument: { value: Definition }
-  modifiers: Record<string, Definition>
-}
-
 export const createWebTypesApi = (componentData: ComponentData[], directiveData: DirectiveData[]) => {
   const getDocUrl = (cmp: string, heading?: string) =>
     `https://vuetifyjs.com/api/${cmp}` + (heading ? `#${heading}` : '')
@@ -36,7 +20,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
         name,
         pattern: undefined,
         description: slot.description.en || '',
-        'doc-url': getDocUrl(component.fileName, 'slots'),
+        'doc-url': getDocUrl(component.pathName, 'slots'),
         'vue-properties': slot.properties &&
           Object.entries(slot.properties ?? {}).map(([name, prop]) => createTypedEntity(name, (prop as any).formatted)),
       }
@@ -46,7 +30,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
       return {
         name,
         description: event.description.en || '',
-        'doc-url': getDocUrl(component.fileName, 'events'),
+        'doc-url': getDocUrl(component.pathName, 'events'),
         arguments: [createTypedEntity('argument', event.formatted)],
       }
     }
@@ -78,7 +62,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
       },
       aliases: undefined, // TODO: are we using this? deprecated name changes?
       description: '', // TODO: we should probably include component description in locale files
-      'doc-url': getDocUrl(component.fileName),
+      'doc-url': getDocUrl(component.pathName),
       attributes: Object.entries(component.props ?? {}).map(createTagAttribute),
       events: Object.entries(component.events ?? {}).map(createTagEvent),
       slots: Object.entries(component.slots ?? {}).map(createTagSlot),
@@ -94,7 +78,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
       return {
         pattern: undefined,
         description: argument.description.en,
-        'doc-url': getDocUrl(directive.name, 'argument'),
+        'doc-url': getDocUrl(directive.pathName, 'argument'),
         required: undefined,
       }
     }
@@ -104,7 +88,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
         name,
         pattern: undefined,
         description: modifier.description.en || '',
-        'doc-url': getDocUrl(directive.name, 'modifiers'),
+        'doc-url': getDocUrl(directive.pathName, 'modifiers'),
       }
     }
 
@@ -116,16 +100,16 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
     }
 
     return {
-      name: directive.name,
+      name: directive.displayName,
       aliases: undefined,
       description: '', // TODO: we should probably include directive description in locale files
-      'doc-url': getDocUrl(directive.name),
+      'doc-url': getDocUrl(directive.pathName),
       default: '',
       required: false,
       value: createAttributeValue(directive.argument),
       source: {
         module: './src/directives/index.ts',
-        symbol: capitalize(directive.name.slice(2)),
+        symbol: capitalize(directive.displayName.slice(2)),
       },
       'vue-argument': directive.argument?.value && createAttributeVueArgument(directive.argument?.value), // TODO: how to use this in comparison to value?
       'vue-modifiers': directive.modifiers &&
diff --git a/packages/docs/.eslintrc.js b/packages/docs/.eslintrc.js
index 34f8338c918..80ac3912be8 100644
--- a/packages/docs/.eslintrc.js
+++ b/packages/docs/.eslintrc.js
@@ -3,6 +3,7 @@ module.exports = {
     'vue/setup-compiler-macros': true,
   },
   rules: {
+    'no-undef': 'off',
     'vue/multi-word-component-names': 'off',
   },
   overrides: [
diff --git a/packages/docs/auto-imports.d.ts b/packages/docs/auto-imports.d.ts
new file mode 100644
index 00000000000..3bc41125982
--- /dev/null
+++ b/packages/docs/auto-imports.d.ts
@@ -0,0 +1,273 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const ComponentPublicInstance: typeof import('vue')['ComponentPublicInstance']
+  const IN_BROWSER: typeof import('./src/utils/globals')['IN_BROWSER']
+  const IS_DEBUG: typeof import('./src/utils/globals')['IS_DEBUG']
+  const IS_PROD: typeof import('./src/utils/globals')['IS_PROD']
+  const IS_SERVER: typeof import('./src/utils/globals')['IS_SERVER']
+  const PropType: typeof import('vue')['PropType']
+  const anyLanguagePattern: typeof import('./src/utils/routes')['anyLanguagePattern']
+  const camelCase: typeof import('lodash-es')['camelCase']
+  const camelize: typeof import('vue')['camelize']
+  const computed: typeof import('vue')['computed']
+  const configureMarkdown: typeof import('./src/utils/markdown-it')['configureMarkdown']
+  const copyElementContent: typeof import('./src/utils/helpers')['copyElementContent']
+  const createAdProps: typeof import('./src/composables/ad')['createAdProps']
+  const createOne: typeof import('@vuetify/one')['createOne']
+  const defineStore: typeof import('pinia')['defineStore']
+  const disabledLanguagePattern: typeof import('./src/utils/routes')['disabledLanguagePattern']
+  const distance: typeof import('./src/utils/helpers')['distance']
+  const eventName: typeof import('./src/utils/helpers')['eventName']
+  const genAppMetaInfo: typeof import('./src/utils/metadata')['genAppMetaInfo']
+  const genMetaInfo: typeof import('./src/utils/metadata')['genMetaInfo']
+  const generatedRoutes: typeof import('./src/utils/routes')['generatedRoutes']
+  const getBranch: typeof import('./src/utils/helpers')['getBranch']
+  const getMatchMedia: typeof import('./src/utils/helpers')['getMatchMedia']
+  const gtagClick: typeof import('./src/utils/analytics')['gtagClick']
+  const h: typeof import('vue')['h']
+  const insertLinks: typeof import('./src/utils/api')['insertLinks']
+  const isOn: typeof import('./src/utils/helpers')['isOn']
+  const kebabCase: typeof import('lodash-es')['kebabCase']
+  const languagePattern: typeof import('./src/utils/routes')['languagePattern']
+  const leadingSlash: typeof import('./src/utils/routes')['leadingSlash']
+  const markdownItRules: typeof import('./src/utils/markdown-it-rules')['default']
+  const mergeProps: typeof import('vue')['mergeProps']
+  const nextTick: typeof import('vue')['nextTick']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnMount: typeof import('vue')['onBeforeUnMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onMounted: typeof import('vue')['onMounted']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const preferredLocale: typeof import('./src/utils/routes')['preferredLocale']
+  const propsToString: typeof import('./src/utils/helpers')['propsToString']
+  const redirectRoutes: typeof import('./src/utils/routes')['redirectRoutes']
+  const ref: typeof import('vue')['ref']
+  const rpath: typeof import('./src/utils/routes')['rpath']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const stripLinks: typeof import('./src/utils/api')['stripLinks']
+  const trailingSlash: typeof import('./src/utils/routes')['trailingSlash']
+  const upperFirst: typeof import('lodash-es')['upperFirst']
+  const useAd: typeof import('./src/composables/ad')['useAd']
+  const useAdsStore: typeof import('./src/stores/ads')['useAdsStore']
+  const useAppStore: typeof import('./src/stores/app')['useAppStore']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useAuthStore: typeof import('@vuetify/one')['useAuthStore']
+  const useCommitsStore: typeof import('./src/stores/commits')['useCommitsStore']
+  const useCosmic: typeof import('./src/composables/cosmic')['useCosmic']
+  const useDate: typeof import('vuetify')['useDate']
+  const useDisplay: typeof import('vuetify')['useDisplay']
+  const useGoTo: typeof import('vuetify')['useGoTo']
+  const useGtag: typeof import('vue-gtag-next')['useGtag']
+  const useHttpStore: typeof import('@vuetify/one')['useHttpStore']
+  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useJobsStore: typeof import('./src/stores/jobs')['useJobsStore']
+  const useLocaleStore: typeof import('./src/stores/locale')['useLocaleStore']
+  const useMadeWithVuetifyStore: typeof import('./src/stores/made-with-vuetify')['useMadeWithVuetifyStore']
+  const useOneStore: typeof import('@vuetify/one')['useOneStore']
+  const usePinsStore: typeof import('./src/stores/pins')['usePinsStore']
+  const usePlayground: typeof import('./src/composables/playground')['usePlayground']
+  const usePromotionsStore: typeof import('./src/stores/promotions')['usePromotionsStore']
+  const useReleasesStore: typeof import('./src/stores/releases')['useReleasesStore']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useRtl: typeof import('vuetify')['useRtl']
+  const useSettingsStore: typeof import('@vuetify/one')['useSettingsStore']
+  const useShopifyStore: typeof import('./src/stores/shopify')['useShopifyStore']
+  const useSponsorsStore: typeof import('./src/stores/sponsors')['useSponsorsStore']
+  const useSpotStore: typeof import('./src/stores/spot')['useSpotStore']
+  const useTeamStore: typeof import('./src/stores/team')['useTeamStore']
+  const useTheme: typeof import('vuetify')['useTheme']
+  const useUserStore: typeof import('@vuetify/one')['useUserStore']
+  const wait: typeof import('./src/utils/helpers')['wait']
+  const waitForReadystate: typeof import('./src/utils/helpers')['waitForReadystate']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const wrapInArray: typeof import('./src/utils/helpers')['wrapInArray']
+}
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    readonly IN_BROWSER: UnwrapRef<typeof import('./src/utils/globals')['IN_BROWSER']>
+    readonly IS_DEBUG: UnwrapRef<typeof import('./src/utils/globals')['IS_DEBUG']>
+    readonly IS_PROD: UnwrapRef<typeof import('./src/utils/globals')['IS_PROD']>
+    readonly IS_SERVER: UnwrapRef<typeof import('./src/utils/globals')['IS_SERVER']>
+    readonly anyLanguagePattern: UnwrapRef<typeof import('./src/utils/routes')['anyLanguagePattern']>
+    readonly camelCase: UnwrapRef<typeof import('lodash-es')['camelCase']>
+    readonly camelize: UnwrapRef<typeof import('vue')['camelize']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly configureMarkdown: UnwrapRef<typeof import('./src/utils/markdown-it')['configureMarkdown']>
+    readonly copyElementContent: UnwrapRef<typeof import('./src/utils/helpers')['copyElementContent']>
+    readonly createAdProps: UnwrapRef<typeof import('./src/composables/ad')['createAdProps']>
+    readonly createOne: UnwrapRef<typeof import('@vuetify/one')['createOne']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly disabledLanguagePattern: UnwrapRef<typeof import('./src/utils/routes')['disabledLanguagePattern']>
+    readonly distance: UnwrapRef<typeof import('./src/utils/helpers')['distance']>
+    readonly eventName: UnwrapRef<typeof import('./src/utils/helpers')['eventName']>
+    readonly genAppMetaInfo: UnwrapRef<typeof import('./src/utils/metadata')['genAppMetaInfo']>
+    readonly genMetaInfo: UnwrapRef<typeof import('./src/utils/metadata')['genMetaInfo']>
+    readonly generatedRoutes: UnwrapRef<typeof import('./src/utils/routes')['generatedRoutes']>
+    readonly getBranch: UnwrapRef<typeof import('./src/utils/helpers')['getBranch']>
+    readonly getMatchMedia: UnwrapRef<typeof import('./src/utils/helpers')['getMatchMedia']>
+    readonly gtagClick: UnwrapRef<typeof import('./src/utils/analytics')['gtagClick']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly insertLinks: UnwrapRef<typeof import('./src/utils/api')['insertLinks']>
+    readonly isOn: UnwrapRef<typeof import('./src/utils/helpers')['isOn']>
+    readonly kebabCase: UnwrapRef<typeof import('lodash-es')['kebabCase']>
+    readonly languagePattern: UnwrapRef<typeof import('./src/utils/routes')['languagePattern']>
+    readonly leadingSlash: UnwrapRef<typeof import('./src/utils/routes')['leadingSlash']>
+    readonly markdownItRules: UnwrapRef<typeof import('./src/utils/markdown-it-rules')['default']>
+    readonly mergeProps: UnwrapRef<typeof import('vue')['mergeProps']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly preferredLocale: UnwrapRef<typeof import('./src/utils/routes')['preferredLocale']>
+    readonly propsToString: UnwrapRef<typeof import('./src/utils/helpers')['propsToString']>
+    readonly redirectRoutes: UnwrapRef<typeof import('./src/utils/routes')['redirectRoutes']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly rpath: UnwrapRef<typeof import('./src/utils/routes')['rpath']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly stripLinks: UnwrapRef<typeof import('./src/utils/api')['stripLinks']>
+    readonly trailingSlash: UnwrapRef<typeof import('./src/utils/routes')['trailingSlash']>
+    readonly upperFirst: UnwrapRef<typeof import('lodash-es')['upperFirst']>
+    readonly useAd: UnwrapRef<typeof import('./src/composables/ad')['useAd']>
+    readonly useAdsStore: UnwrapRef<typeof import('./src/stores/ads')['useAdsStore']>
+    readonly useAppStore: UnwrapRef<typeof import('./src/stores/app')['useAppStore']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useAuthStore: UnwrapRef<typeof import('@vuetify/one')['useAuthStore']>
+    readonly useCommitsStore: UnwrapRef<typeof import('./src/stores/commits')['useCommitsStore']>
+    readonly useCosmic: UnwrapRef<typeof import('./src/composables/cosmic')['useCosmic']>
+    readonly useDate: UnwrapRef<typeof import('vuetify')['useDate']>
+    readonly useDisplay: UnwrapRef<typeof import('vuetify')['useDisplay']>
+    readonly useGoTo: UnwrapRef<typeof import('vuetify')['useGoTo']>
+    readonly useGtag: UnwrapRef<typeof import('vue-gtag-next')['useGtag']>
+    readonly useHttpStore: UnwrapRef<typeof import('@vuetify/one')['useHttpStore']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useJobsStore: UnwrapRef<typeof import('./src/stores/jobs')['useJobsStore']>
+    readonly useLocaleStore: UnwrapRef<typeof import('./src/stores/locale')['useLocaleStore']>
+    readonly useMadeWithVuetifyStore: UnwrapRef<typeof import('./src/stores/made-with-vuetify')['useMadeWithVuetifyStore']>
+    readonly useOneStore: UnwrapRef<typeof import('@vuetify/one')['useOneStore']>
+    readonly usePinsStore: UnwrapRef<typeof import('./src/stores/pins')['usePinsStore']>
+    readonly usePlayground: UnwrapRef<typeof import('./src/composables/playground')['usePlayground']>
+    readonly usePromotionsStore: UnwrapRef<typeof import('./src/stores/promotions')['usePromotionsStore']>
+    readonly useReleasesStore: UnwrapRef<typeof import('./src/stores/releases')['useReleasesStore']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRtl: UnwrapRef<typeof import('vuetify')['useRtl']>
+    readonly useSettingsStore: UnwrapRef<typeof import('@vuetify/one')['useSettingsStore']>
+    readonly useShopifyStore: UnwrapRef<typeof import('./src/stores/shopify')['useShopifyStore']>
+    readonly useSponsorsStore: UnwrapRef<typeof import('./src/stores/sponsors')['useSponsorsStore']>
+    readonly useSpotStore: UnwrapRef<typeof import('./src/stores/spot')['useSpotStore']>
+    readonly useTeamStore: UnwrapRef<typeof import('./src/stores/team')['useTeamStore']>
+    readonly useTheme: UnwrapRef<typeof import('vuetify')['useTheme']>
+    readonly useUserStore: UnwrapRef<typeof import('@vuetify/one')['useUserStore']>
+    readonly wait: UnwrapRef<typeof import('./src/utils/helpers')['wait']>
+    readonly waitForReadystate: UnwrapRef<typeof import('./src/utils/helpers')['waitForReadystate']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly wrapInArray: UnwrapRef<typeof import('./src/utils/helpers')['wrapInArray']>
+  }
+}
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly IN_BROWSER: UnwrapRef<typeof import('./src/utils/globals')['IN_BROWSER']>
+    readonly IS_DEBUG: UnwrapRef<typeof import('./src/utils/globals')['IS_DEBUG']>
+    readonly IS_PROD: UnwrapRef<typeof import('./src/utils/globals')['IS_PROD']>
+    readonly IS_SERVER: UnwrapRef<typeof import('./src/utils/globals')['IS_SERVER']>
+    readonly anyLanguagePattern: UnwrapRef<typeof import('./src/utils/routes')['anyLanguagePattern']>
+    readonly camelCase: UnwrapRef<typeof import('lodash-es')['camelCase']>
+    readonly camelize: UnwrapRef<typeof import('vue')['camelize']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly configureMarkdown: UnwrapRef<typeof import('./src/utils/markdown-it')['configureMarkdown']>
+    readonly copyElementContent: UnwrapRef<typeof import('./src/utils/helpers')['copyElementContent']>
+    readonly createAdProps: UnwrapRef<typeof import('./src/composables/ad')['createAdProps']>
+    readonly createOne: UnwrapRef<typeof import('@vuetify/one')['createOne']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly disabledLanguagePattern: UnwrapRef<typeof import('./src/utils/routes')['disabledLanguagePattern']>
+    readonly distance: UnwrapRef<typeof import('./src/utils/helpers')['distance']>
+    readonly eventName: UnwrapRef<typeof import('./src/utils/helpers')['eventName']>
+    readonly genAppMetaInfo: UnwrapRef<typeof import('./src/utils/metadata')['genAppMetaInfo']>
+    readonly genMetaInfo: UnwrapRef<typeof import('./src/utils/metadata')['genMetaInfo']>
+    readonly generatedRoutes: UnwrapRef<typeof import('./src/utils/routes')['generatedRoutes']>
+    readonly getBranch: UnwrapRef<typeof import('./src/utils/helpers')['getBranch']>
+    readonly getMatchMedia: UnwrapRef<typeof import('./src/utils/helpers')['getMatchMedia']>
+    readonly gtagClick: UnwrapRef<typeof import('./src/utils/analytics')['gtagClick']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly insertLinks: UnwrapRef<typeof import('./src/utils/api')['insertLinks']>
+    readonly isOn: UnwrapRef<typeof import('./src/utils/helpers')['isOn']>
+    readonly kebabCase: UnwrapRef<typeof import('lodash-es')['kebabCase']>
+    readonly languagePattern: UnwrapRef<typeof import('./src/utils/routes')['languagePattern']>
+    readonly leadingSlash: UnwrapRef<typeof import('./src/utils/routes')['leadingSlash']>
+    readonly markdownItRules: UnwrapRef<typeof import('./src/utils/markdown-it-rules')['default']>
+    readonly mergeProps: UnwrapRef<typeof import('vue')['mergeProps']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly preferredLocale: UnwrapRef<typeof import('./src/utils/routes')['preferredLocale']>
+    readonly propsToString: UnwrapRef<typeof import('./src/utils/helpers')['propsToString']>
+    readonly redirectRoutes: UnwrapRef<typeof import('./src/utils/routes')['redirectRoutes']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly rpath: UnwrapRef<typeof import('./src/utils/routes')['rpath']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly stripLinks: UnwrapRef<typeof import('./src/utils/api')['stripLinks']>
+    readonly trailingSlash: UnwrapRef<typeof import('./src/utils/routes')['trailingSlash']>
+    readonly upperFirst: UnwrapRef<typeof import('lodash-es')['upperFirst']>
+    readonly useAd: UnwrapRef<typeof import('./src/composables/ad')['useAd']>
+    readonly useAdsStore: UnwrapRef<typeof import('./src/stores/ads')['useAdsStore']>
+    readonly useAppStore: UnwrapRef<typeof import('./src/stores/app')['useAppStore']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useAuthStore: UnwrapRef<typeof import('@vuetify/one')['useAuthStore']>
+    readonly useCommitsStore: UnwrapRef<typeof import('./src/stores/commits')['useCommitsStore']>
+    readonly useCosmic: UnwrapRef<typeof import('./src/composables/cosmic')['useCosmic']>
+    readonly useDate: UnwrapRef<typeof import('vuetify')['useDate']>
+    readonly useDisplay: UnwrapRef<typeof import('vuetify')['useDisplay']>
+    readonly useGoTo: UnwrapRef<typeof import('vuetify')['useGoTo']>
+    readonly useGtag: UnwrapRef<typeof import('vue-gtag-next')['useGtag']>
+    readonly useHttpStore: UnwrapRef<typeof import('@vuetify/one')['useHttpStore']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useJobsStore: UnwrapRef<typeof import('./src/stores/jobs')['useJobsStore']>
+    readonly useLocaleStore: UnwrapRef<typeof import('./src/stores/locale')['useLocaleStore']>
+    readonly useMadeWithVuetifyStore: UnwrapRef<typeof import('./src/stores/made-with-vuetify')['useMadeWithVuetifyStore']>
+    readonly useOneStore: UnwrapRef<typeof import('@vuetify/one')['useOneStore']>
+    readonly usePinsStore: UnwrapRef<typeof import('./src/stores/pins')['usePinsStore']>
+    readonly usePlayground: UnwrapRef<typeof import('./src/composables/playground')['usePlayground']>
+    readonly usePromotionsStore: UnwrapRef<typeof import('./src/stores/promotions')['usePromotionsStore']>
+    readonly useReleasesStore: UnwrapRef<typeof import('./src/stores/releases')['useReleasesStore']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRtl: UnwrapRef<typeof import('vuetify')['useRtl']>
+    readonly useSettingsStore: UnwrapRef<typeof import('@vuetify/one')['useSettingsStore']>
+    readonly useShopifyStore: UnwrapRef<typeof import('./src/stores/shopify')['useShopifyStore']>
+    readonly useSponsorsStore: UnwrapRef<typeof import('./src/stores/sponsors')['useSponsorsStore']>
+    readonly useSpotStore: UnwrapRef<typeof import('./src/stores/spot')['useSpotStore']>
+    readonly useTeamStore: UnwrapRef<typeof import('./src/stores/team')['useTeamStore']>
+    readonly useTheme: UnwrapRef<typeof import('vuetify')['useTheme']>
+    readonly useUserStore: UnwrapRef<typeof import('@vuetify/one')['useUserStore']>
+    readonly wait: UnwrapRef<typeof import('./src/utils/helpers')['wait']>
+    readonly waitForReadystate: UnwrapRef<typeof import('./src/utils/helpers')['waitForReadystate']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly wrapInArray: UnwrapRef<typeof import('./src/utils/helpers')['wrapInArray']>
+  }
+}
diff --git a/packages/docs/build/api-plugin.ts b/packages/docs/build/api-plugin.ts
index 2459cd7c820..8da512afb60 100644
--- a/packages/docs/build/api-plugin.ts
+++ b/packages/docs/build/api-plugin.ts
@@ -14,12 +14,20 @@ const API_PAGES_ROOT = resolve('./node_modules/.cache/api-pages')
 
 const require = createRequire(import.meta.url)
 
+const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'argument', 'modifiers'] as const
+// This can't be imported from the api-generator because it mixes the type definitions up
+type Data = {
+  displayName: string // user visible name used in page titles
+  fileName: string // file name for translation strings and generated types
+  pathName: string // kebab-case name for use in urls
+} & Record<typeof sections[number], Record<string, any>>
+
 const localeList = locales
   .filter(item => item.enabled)
   .map(item => item.alternate || item.locale)
 
 function genApiLinks (componentName: string, header: string) {
-  const section = ['<entry />', '<api-search />']
+  const section = ['<promoted-entry />', '<api-search />']
   const links = (Object.keys(pageToApi) as (keyof typeof pageToApi)[])
     .filter(page => pageToApi[page].includes(componentName))
     .reduce<string[]>((acc, href) => {
@@ -73,24 +81,24 @@ async function loadMessages (locale: string) {
   }
 }
 
-async function createMdFile (component: Record<string, any>, locale: string) {
+async function createMdFile (component: Data, locale: string) {
   const messages = await loadMessages(locale)
   let str = ''
 
   str += genHeader(component.displayName)
   str += genApiLinks(component.displayName, messages.links)
 
-  for (const section of ['props', 'events', 'slots', 'exposed', 'sass', 'options', 'argument', 'modifiers']) {
+  for (const section of sections) {
     if (Object.keys(component[section] ?? {}).length) {
       str += `## ${messages[section]} {#${section}}\n\n`
-      str += `<api-section name="${component.displayName}" section="${section}" />\n\n`
+      str += `<api-section name="${component.fileName}" section="${section}" />\n\n`
     }
   }
 
   return str
 }
 
-async function writeFile (componentApi: Record<string, any>, locale: string) {
+async function writeFile (componentApi: Data, locale: string) {
   if (!componentApi?.fileName) return
 
   const folder = resolve(API_PAGES_ROOT, locale, 'api')
@@ -99,22 +107,17 @@ async function writeFile (componentApi: Record<string, any>, locale: string) {
     fs.mkdirSync(folder, { recursive: true })
   }
 
-  fs.writeFileSync(resolve(folder, `${sanitize(componentApi.fileName)}.md`), await createMdFile(componentApi, locale))
+  fs.writeFileSync(resolve(folder, `${sanitize(componentApi.pathName)}.md`), await createMdFile(componentApi, locale))
 }
 
 function getApiData () {
   const files = fs.readdirSync(API_ROOT)
-  const data: Record<string, any>[] = []
+  const data: Data[] = []
 
   for (const file of files) {
-    const name = path.basename(file.slice(file.lastIndexOf('/') + 1), '.json')
     const obj = JSON.parse(fs.readFileSync(resolve(API_ROOT, file), 'utf-8'))
 
-    data.push({
-      name,
-      displayName: name,
-      ...obj,
-    })
+    data.push(obj)
   }
 
   return data
diff --git a/packages/docs/build/markdown-it.ts b/packages/docs/build/markdown-it.ts
index 0241302f25c..ddeee9b98ab 100644
--- a/packages/docs/build/markdown-it.ts
+++ b/packages/docs/build/markdown-it.ts
@@ -3,8 +3,8 @@ import path from 'path'
 import Ajv from 'ajv'
 import fm from 'front-matter'
 import MarkdownIt from 'markdown-it'
-import { configureMarkdown } from '../src/util/markdown-it'
-export { configureMarkdown } from '../src/util/markdown-it'
+import { configureMarkdown } from '../src/utils/markdown-it'
+export { configureMarkdown } from '../src/utils/markdown-it'
 
 export const md = configureMarkdown(new MarkdownIt())
 
diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
new file mode 100644
index 00000000000..876ad3c6deb
--- /dev/null
+++ b/packages/docs/components.d.ts
@@ -0,0 +1,154 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AboutTeamMember: typeof import('./src/components/about/TeamMember.vue')['default']
+    AboutTeamMembers: typeof import('./src/components/about/TeamMembers.vue')['default']
+    Alert: typeof import('./src/components/Alert.vue')['default']
+    ApiApiTable: typeof import('./src/components/api/ApiTable.vue')['default']
+    ApiEventsTable: typeof import('./src/components/api/EventsTable.vue')['default']
+    ApiExposedTable: typeof import('./src/components/api/ExposedTable.vue')['default']
+    ApiInline: typeof import('./src/components/api/Inline.vue')['default']
+    ApiLinks: typeof import('./src/components/api/Links.vue')['default']
+    ApiNameCell: typeof import('./src/components/api/NameCell.vue')['default']
+    ApiPrismCell: typeof import('./src/components/api/PrismCell.vue')['default']
+    ApiPropsTable: typeof import('./src/components/api/PropsTable.vue')['default']
+    ApiSassTable: typeof import('./src/components/api/SassTable.vue')['default']
+    ApiSearch: typeof import('./src/components/api/Search.vue')['default']
+    ApiSection: typeof import('./src/components/api/Section.vue')['default']
+    ApiSlotsTable: typeof import('./src/components/api/SlotsTable.vue')['default']
+    AppBackToTop: typeof import('./src/components/app/BackToTop.vue')['default']
+    AppBarBar: typeof import('./src/components/app/bar/Bar.vue')['default']
+    AppBarEcosystemMenu: typeof import('./src/components/app/bar/EcosystemMenu.vue')['default']
+    AppBarEnterpriseLink: typeof import('./src/components/app/bar/EnterpriseLink.vue')['default']
+    AppBarJobsLink: typeof import('./src/components/app/bar/JobsLink.vue')['default']
+    AppBarLanguageMenu: typeof import('./src/components/app/bar/LanguageMenu.vue')['default']
+    AppBarLearnMenu: typeof import('./src/components/app/bar/LearnMenu.vue')['default']
+    AppBarLogo: typeof import('./src/components/app/bar/Logo.vue')['default']
+    AppBarNotificationsMenu: typeof import('./src/components/app/bar/NotificationsMenu.vue')['default']
+    AppBarPlaygroundLink: typeof import('./src/components/app/bar/PlaygroundLink.vue')['default']
+    AppBarSettingsToggle: typeof import('./src/components/app/bar/SettingsToggle.vue')['default']
+    AppBarSponsorLink: typeof import('./src/components/app/bar/SponsorLink.vue')['default']
+    AppBarStoreLink: typeof import('./src/components/app/bar/StoreLink.vue')['default']
+    AppBarSupportMenu: typeof import('./src/components/app/bar/SupportMenu.vue')['default']
+    AppBarTeamLink: typeof import('./src/components/app/bar/TeamLink.vue')['default']
+    AppBarThemeToggle: typeof import('./src/components/app/bar/ThemeToggle.vue')['default']
+    AppBtn: typeof import('./src/components/app/Btn.vue')['default']
+    AppCaption: typeof import('./src/components/app/Caption.vue')['default']
+    AppDivider: typeof import('./src/components/app/Divider.vue')['default']
+    AppDrawerAppend: typeof import('./src/components/app/drawer/Append.vue')['default']
+    AppDrawerDrawer: typeof import('./src/components/app/drawer/Drawer.vue')['default']
+    AppDrawerDrawerToggleRail: typeof import('./src/components/app/drawer/DrawerToggleRail.vue')['default']
+    AppDrawerPinnedItems: typeof import('./src/components/app/drawer/PinnedItems.vue')['default']
+    AppFigure: typeof import('./src/components/app/Figure.vue')['default']
+    AppHeading: typeof import('./src/components/app/Heading.vue')['default']
+    AppHeadline: typeof import('./src/components/app/Headline.vue')['default']
+    AppLink: typeof import('./src/components/app/Link.vue')['default']
+    AppListLinkListItem: typeof import('./src/components/app/list/LinkListItem.vue')['default']
+    AppListList: typeof import('./src/components/app/list/List.vue')['default']
+    AppMarkdown: typeof import('./src/components/app/Markdown.vue')['default']
+    AppMarkup: typeof import('./src/components/app/Markup.vue')['default']
+    AppMenuMenu: typeof import('./src/components/app/menu/Menu.vue')['default']
+    AppSearchSearch: typeof import('./src/components/app/search/Search.vue')['default']
+    AppSearchSearchRecent: typeof import('./src/components/app/search/SearchRecent.vue')['default']
+    AppSearchSearchResults: typeof import('./src/components/app/search/SearchResults.vue')['default']
+    AppSettingsAdvancedOptions: typeof import('./src/components/app/settings/AdvancedOptions.vue')['default']
+    AppSettingsAppend: typeof import('./src/components/app/settings/Append.vue')['default']
+    AppSettingsDeveloperMode: typeof import('./src/components/app/settings/DeveloperMode.vue')['default']
+    AppSettingsDocumentationBuild: typeof import('./src/components/app/settings/DocumentationBuild.vue')['default']
+    AppSettingsDrawer: typeof import('./src/components/app/settings/Drawer.vue')['default']
+    AppSettingsLatestCommit: typeof import('./src/components/app/settings/LatestCommit.vue')['default']
+    AppSettingsLatestRelease: typeof import('./src/components/app/settings/LatestRelease.vue')['default']
+    AppSettingsOptions: typeof import('./src/components/app/settings/Options.vue')['default']
+    AppSettingsOptionsAdOption: typeof import('./src/components/app/settings/options/AdOption.vue')['default']
+    AppSettingsOptionsApiOption: typeof import('./src/components/app/settings/options/ApiOption.vue')['default']
+    AppSettingsOptionsAvatarOption: typeof import('./src/components/app/settings/options/AvatarOption.vue')['default']
+    AppSettingsOptionsBannerOption: typeof import('./src/components/app/settings/options/BannerOption.vue')['default']
+    AppSettingsOptionsCodeOption: typeof import('./src/components/app/settings/options/CodeOption.vue')['default']
+    AppSettingsOptionsNotificationsOption: typeof import('./src/components/app/settings/options/NotificationsOption.vue')['default']
+    AppSettingsOptionsPinOption: typeof import('./src/components/app/settings/options/PinOption.vue')['default']
+    AppSettingsOptionsQuickbarOption: typeof import('./src/components/app/settings/options/QuickbarOption.vue')['default']
+    AppSettingsOptionsRailDrawerOption: typeof import('./src/components/app/settings/options/RailDrawerOption.vue')['default']
+    AppSettingsOptionsSlashSearchOption: typeof import('./src/components/app/settings/options/SlashSearchOption.vue')['default']
+    AppSettingsOptionsThemeOption: typeof import('./src/components/app/settings/options/ThemeOption.vue')['default']
+    AppSettingsPerksOptions: typeof import('./src/components/app/settings/PerksOptions.vue')['default']
+    AppSettingsSettingsHeader: typeof import('./src/components/app/settings/SettingsHeader.vue')['default']
+    AppSheet: typeof import('./src/components/app/Sheet.vue')['default']
+    AppSnackbarQueue: typeof import('./src/components/app/SnackbarQueue.vue')['default']
+    AppTable: typeof import('./src/components/app/Table.vue')['default']
+    AppTextField: typeof import('./src/components/app/TextField.vue')['default']
+    AppTitle: typeof import('./src/components/app/Title.vue')['default']
+    AppToc: typeof import('./src/components/app/Toc.vue')['default']
+    AppTooltipBtn: typeof import('./src/components/app/TooltipBtn.vue')['default']
+    AppV2Banner: typeof import('./src/components/app/V2Banner.vue')['default']
+    AppVerticalDivider: typeof import('./src/components/app/VerticalDivider.vue')['default']
+    Backmatter: typeof import('./src/components/Backmatter.vue')['default']
+    ComponentsListItem: typeof import('./src/components/components/ListItem.vue')['default']
+    DocContribute: typeof import('./src/components/doc/Contribute.vue')['default']
+    DocExplorer: typeof import('./src/components/doc/Explorer.vue')['default']
+    DocIconList: typeof import('./src/components/doc/IconList.vue')['default']
+    DocIconTable: typeof import('./src/components/doc/IconTable.vue')['default']
+    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']
+    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']
+    DocReleases: typeof import('./src/components/doc/Releases.vue')['default']
+    DocTabs: typeof import('./src/components/doc/Tabs.vue')['default']
+    DocThemeCard: typeof import('./src/components/doc/ThemeCard.vue')['default']
+    DocThemeVendor: typeof import('./src/components/doc/ThemeVendor.vue')['default']
+    DocUpNext: typeof import('./src/components/doc/UpNext.vue')['default']
+    DocVueJobs: typeof import('./src/components/doc/VueJobs.vue')['default']
+    ExamplesExample: typeof import('./src/components/examples/Example.vue')['default']
+    ExamplesExampleMissing: typeof import('./src/components/examples/ExampleMissing.vue')['default']
+    ExamplesUsage: typeof import('./src/components/examples/Usage.vue')['default']
+    ExamplesUsageExample: typeof import('./src/components/examples/UsageExample.vue')['default']
+    ExamplesVueFile: typeof import('./src/components/examples/VueFile.vue')['default']
+    FeaturesBreakpointsTable: typeof import('./src/components/features/BreakpointsTable.vue')['default']
+    FeaturesColorPalette: typeof import('./src/components/features/ColorPalette.vue')['default']
+    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']
+    HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
+    HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
+    HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
+    HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
+    HomeSpecialSponsor: typeof import('./src/components/home/SpecialSponsor.vue')['default']
+    HomeSponsors: typeof import('./src/components/home/Sponsors.vue')['default']
+    IconsChevronDown: typeof import('./src/components/icons/ChevronDown.vue')['default']
+    IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
+    IntroductionDirectSupport: typeof import('./src/components/introduction/DirectSupport.vue')['default']
+    IntroductionDiscordDeck: typeof import('./src/components/introduction/DiscordDeck.vue')['default']
+    IntroductionEnterpriseDeck: typeof import('./src/components/introduction/EnterpriseDeck.vue')['default']
+    IntroductionEnterpriseForm: typeof import('./src/components/introduction/EnterpriseForm.vue')['default']
+    PageFeatures: typeof import('./src/components/PageFeatures.vue')['default']
+    PromotedBase: typeof import('./src/components/promoted/Base.vue')['default']
+    PromotedCarbon: typeof import('./src/components/promoted/Carbon.vue')['default']
+    PromotedDiscovery: typeof import('./src/components/promoted/Discovery.vue')['default']
+    PromotedEntry: typeof import('./src/components/promoted/Entry.vue')['default']
+    PromotedInline: typeof import('./src/components/promoted/Inline.vue')['default']
+    PromotedPromoted: typeof import('./src/components/promoted/Promoted.vue')['default']
+    PromotedRandom: typeof import('./src/components/promoted/Random.vue')['default']
+    PromotedScript: typeof import('./src/components/promoted/Script.vue')['default']
+    PromotedVuetify: typeof import('./src/components/promoted/Vuetify.vue')['default']
+    PromotionsPromotionCard: typeof import('./src/components/promotions/PromotionCard.vue')['default']
+    ResourcesColorPalette: typeof import('./src/components/resources/ColorPalette.vue')['default']
+    ResourcesLogos: typeof import('./src/components/resources/Logos.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SponsorCard: typeof import('./src/components/sponsor/Card.vue')['default']
+    SponsorLink: typeof import('./src/components/sponsor/Link.vue')['default']
+    SponsorSponsors: typeof import('./src/components/sponsor/Sponsors.vue')['default']
+    UserBadgesUserAdminBadge: typeof import('./src/components/user/badges/UserAdminBadge.vue')['default']
+    UserBadgesUserOneBadge: typeof import('./src/components/user/badges/UserOneBadge.vue')['default']
+    UserBadgesUserSponsorBadge: typeof import('./src/components/user/badges/UserSponsorBadge.vue')['default']
+    UserOneSubCard: typeof import('./src/components/user/OneSubCard.vue')['default']
+    UserUserTabs: typeof import('./src/components/user/UserTabs.vue')['default']
+  }
+}
diff --git a/packages/docs/package.json b/packages/docs/package.json
index ea466374765..53342dc8b59 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.5.3",
+  "version": "3.5.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^0.6.3",
+    "@vuetify/one": "^1.1.1",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
@@ -33,12 +33,12 @@
     "prismjs": "^1.29.0",
     "roboto-fontface": "^0.10.0",
     "vee-validate": "^4.12.4",
-    "vue": "^3.4.7",
+    "vue": "^3.4.19",
     "vue-gtag-next": "^1.14.0",
     "vue-i18n": "^9.7.1",
     "vue-instantsearch": "^4.12.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.5.3"
+    "vuetify": "^3.5.8"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.11.0",
@@ -49,8 +49,8 @@
     "@types/prismjs": "^1.26.3",
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.4.7",
-    "@vuetify/api-generator": "^3.5.3",
+    "@vue/compiler-sfc": "^3.4.19",
+    "@vuetify/api-generator": "^3.5.8",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^2.30.0",
@@ -69,8 +69,9 @@
     "markdown-it-meta": "^0.0.1",
     "markdown-it-prism": "^2.3.0",
     "markdownlint-cli": "^0.37.0",
+    "unplugin-auto-import": "0.17.3",
     "unplugin-fonts": "1.0.3",
-    "unplugin-vue-components": "^0.25.2",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^4.5.1",
     "vite-plugin-md": "^0.21.5",
     "vite-plugin-pages": "^0.32.0",
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
index 4f7d2ff0a3f..dc7b5caf2be 100644
--- a/packages/docs/src/App.vue
+++ b/packages/docs/src/App.vue
@@ -9,20 +9,6 @@
 <script setup lang="ts">
   // Composables
   import { useHead } from '@unhead/vue'
-  import { useI18n } from 'vue-i18n'
-  import { useRoute, useRouter } from 'vue-router'
-  import { useTheme } from 'vuetify'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue'
-  import { genAppMetaInfo } from '@/util/metadata'
-  import { getMatchMedia } from '@/util/helpers'
-
-  // Globals
-  import { IN_BROWSER } from '@/util/globals'
 
   const user = useUserStore()
   const router = useRouter()
@@ -64,7 +50,8 @@
     // set current route lang if root
     const currentRoute = router.currentRoute.value
     if (currentRoute.path === '/') {
-      router.replace(`/${locale.value}`)
+      const query = currentRoute.query
+      router.replace({ path: `/${locale.value}`, query })
     }
   })
 
diff --git a/packages/docs/src/components/Alert.vue b/packages/docs/src/components/Alert.vue
index 189b249dc1d..b47b2453124 100644
--- a/packages/docs/src/components/Alert.vue
+++ b/packages/docs/src/components/Alert.vue
@@ -17,8 +17,6 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue'
-
   const props = defineProps({ type: String })
 
   const type = computed(() => {
diff --git a/packages/docs/src/components/Backmatter.vue b/packages/docs/src/components/Backmatter.vue
index 095868badff..ba43212da6e 100644
--- a/packages/docs/src/components/Backmatter.vue
+++ b/packages/docs/src/components/Backmatter.vue
@@ -3,24 +3,16 @@
     id="ready-for-more"
     class="mt-16"
   >
-    <ready-for-more />
+    <DocReadyForMore />
 
-    <related-pages />
+    <DocRelatedPages />
 
-    <app-divider />
+    <AppDivider />
 
-    <up-next />
+    <DocUpNext />
 
-    <promoted />
+    <PromotedPromoted />
 
-    <contribute />
+    <DocContribute />
   </section>
 </template>
-
-<script setup>
-  // Components
-  import Contribute from '@/components/doc/Contribute.vue'
-  import ReadyForMore from '@/components/doc/ReadyForMore.vue'
-  import RelatedPages from '@/components/doc/RelatedPages.vue'
-  import UpNext from '@/components/doc/UpNext.vue'
-</script>
diff --git a/packages/docs/src/components/PageFeatures.vue b/packages/docs/src/components/PageFeatures.vue
index 6efe14d1daf..79ff37e1743 100644
--- a/packages/docs/src/components/PageFeatures.vue
+++ b/packages/docs/src/components/PageFeatures.vue
@@ -14,10 +14,10 @@
     <page-feature-chip
       v-if="route.meta?.features?.figma"
       :text="t('figma-design')"
-      prepend-icon="mdi-image"
       href="https://figma.vuetifyjs.com/"
-      target="_blank"
+      prepend-icon="mdi-image"
       rel="noopener noreferrer"
+      target="_blank"
     >
       <template #prepend>
         <v-icon color="purple" />
@@ -27,10 +27,10 @@
     <page-feature-chip
       v-if="route.meta?.features?.report"
       :text="t('report-a-bug')"
+      href="https://issues.vuetifyjs.com/"
       prepend-icon="mdi-bug-outline"
-      target="_blank"
       rel="noopener noreferrer"
-      href="https://issues.vuetifyjs.com/"
+      target="_blank"
     >
       <template #prepend>
         <v-icon color="red" />
@@ -42,8 +42,8 @@
       :href="label"
       :text="t('open-issues')"
       prepend-icon="mdi-alert-circle-outline"
-      target="_blank"
       rel="noopener noreferrer"
+      target="_blank"
     >
       <template #prepend>
         <v-icon color="warning" />
@@ -52,11 +52,11 @@
 
     <page-feature-chip
       v-if="route.meta?.features?.github"
+      :href="`https://github.com/vuetifyjs/vuetify/tree/${branch}/packages/vuetify/src${route.meta.features.github}`"
       :text="t('view-in-github')"
       prepend-icon="mdi-github"
-      :href="`https://github.com/vuetifyjs/vuetify/tree/${branch}/packages/vuetify/src${route.meta.features.github}`"
-      target="_blank"
       rel="noopener noreferrer"
+      target="_blank"
     >
       <template #prepend>
         <v-icon color="black" />
@@ -65,11 +65,11 @@
 
     <page-feature-chip
       v-if="route.meta?.features?.spec"
+      :href="route.meta.features.spec"
       :text="t('design-spec')"
       prepend-icon="mdi-material-design"
-      :href="route.meta.features.spec"
-      target="_blank"
       rel="noopener noreferrer"
+      target="_blank"
     >
       <template #prepend>
         <v-icon color="surface-variant" />
@@ -79,18 +79,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { getBranch } from '@/util/helpers'
-
-  // Stores
-  import { useOneStore } from '@vuetify/one'
-  import { usePinsStore } from '@/store/pins'
-
   const one = useOneStore()
   const pins = usePinsStore()
   const route = useRoute()
diff --git a/packages/docs/src/components/about/TeamMember.vue b/packages/docs/src/components/about/TeamMember.vue
index 62fac61b1fa..db96e038b66 100644
--- a/packages/docs/src/components/about/TeamMember.vue
+++ b/packages/docs/src/components/about/TeamMember.vue
@@ -42,8 +42,8 @@
                   @click.prevent="copyTextToClipboard(link.copyText)"
                 >
                   <v-icon
-                    :icon="link.icon"
                     :color="link.color"
+                    :icon="link.icon"
                     size="small"
                   />
                 </div>
@@ -67,7 +67,7 @@
           </div>
 
           <template v-for="(focus, k) in member.focus" :key="k">
-            <app-markdown :content="focus" />
+            <AppMarkdown :content="focus" />
 
             <span
               v-if="k < member.focus.length - 1"
@@ -92,7 +92,7 @@
           </div>
 
           <template v-for="(funding, k) in member.funding" :key="k">
-            <app-markdown :content="funding" />
+            <AppMarkdown :content="funding" />
 
             <span
               v-if="k < member.funding.length - 1"
@@ -111,13 +111,13 @@
             class="text-subtitle d-flex align-center my-2"
           >
             <v-icon
-              start
               :icon="icons[field]"
+              start
             />
 
             <template v-if="Array.isArray(member[field])">
               <template v-for="(focus, j) in member[field]" :key="j">
-                <app-markdown :content="focus" />
+                <AppMarkdown :content="focus" />
 
                 <span
                   v-if="j < member[field]!.length - 1"
@@ -146,14 +146,8 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-
   // Types
-  import type { Member } from '@/store/team'
+  import type { Member } from '@/stores/team'
   import type { PropType } from 'vue'
 
   const props = defineProps({
diff --git a/packages/docs/src/components/about/TeamMembers.vue b/packages/docs/src/components/about/TeamMembers.vue
index d72d3a8e423..2bb7ef1edc7 100644
--- a/packages/docs/src/components/about/TeamMembers.vue
+++ b/packages/docs/src/components/about/TeamMembers.vue
@@ -5,7 +5,7 @@
         <v-col
           cols="12"
         >
-          <team-member v-bind="{ member }" />
+          <AboutTeamMember v-bind="{ member }" />
         </v-col>
 
         <v-divider
@@ -19,15 +19,6 @@
 </template>
 
 <script setup>
-  // Components
-  import TeamMember from './TeamMember.vue'
-
-  // Composables
-  import { useTeamStore } from '@/store/team'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const props = defineProps({ team: String })
   const teams = useTeamStore()
   const members = computed(() => teams.members.filter(member => member.team === props.team))
diff --git a/packages/docs/src/components/api/ApiTable.vue b/packages/docs/src/components/api/ApiTable.vue
index a2615d1fcf3..06ee575b55f 100644
--- a/packages/docs/src/components/api/ApiTable.vue
+++ b/packages/docs/src/components/api/ApiTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-sheet>
+  <AppSheet>
     <v-table class="api-table" density="comfortable">
       <thead>
         <tr>
@@ -29,9 +29,9 @@
           />
 
           <tr v-if="item.description || (user.dev && item.source)">
-            <td colspan="3" class="text-mono pt-4">
+            <td class="text-mono pt-4" colspan="3">
               <template v-if="item.description">
-                <app-markdown
+                <AppMarkdown
                   v-if="localeStore.locale !== 'eo-UY'"
                   :content="item.description"
                   class="mb-0"
@@ -51,27 +51,18 @@
         </template>
 
         <tr v-if="!filtered.length">
-          <td colspan="4" class="text-center text-disabled text-body-2">
+          <td class="text-center text-disabled text-body-2" colspan="4">
             {{ t('search.no-results') }}
           </td>
         </tr>
       </tbody>
     </v-table>
-  </app-sheet>
+  </AppSheet>
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed, PropType } from 'vue'
-  import { camelCase } from 'lodash-es'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-  import { useLocaleStore } from '@/store/locale'
-  import { useUserStore } from '@vuetify/one'
+  // Types
+  import type { PropType } from 'vue'
 
   const props = defineProps({
     headers: {
diff --git a/packages/docs/src/components/api/EventsTable.vue b/packages/docs/src/components/api/EventsTable.vue
index 7dbd574368f..c16e0e8959d 100644
--- a/packages/docs/src/components/api/EventsTable.vue
+++ b/packages/docs/src/components/api/EventsTable.vue
@@ -1,22 +1,17 @@
 <template>
-  <ApiTable :headers="headers">
+  <ApiApiTable :headers="headers">
     <template #row="{ props, item }">
       <tr v-bind="props">
-        <NameCell section="events" :name="item.name" :new-in="item.newIn" />
+        <ApiNameCell :name="item.name" :new-in="item.newIn" section="events" />
 
         <td>
-          <PrismCell :code="item.formatted" />
+          <ApiPrismCell :code="item.formatted" />
         </td>
       </tr>
     </template>
-  </ApiTable>
+  </ApiApiTable>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import ApiTable from './ApiTable.vue'
-  import NameCell from './NameCell.vue'
-  import PrismCell from './PrismCell.vue'
-
   const headers = ['name', 'type']
 </script>
diff --git a/packages/docs/src/components/api/ExposedTable.vue b/packages/docs/src/components/api/ExposedTable.vue
index 1ac59fd02a4..9329c02388f 100644
--- a/packages/docs/src/components/api/ExposedTable.vue
+++ b/packages/docs/src/components/api/ExposedTable.vue
@@ -1,23 +1,17 @@
 <template>
-  <ApiTable>
+  <ApiApiTable>
     <template #row="{ props, item }">
       <tr v-bind="props">
-        <NameCell section="exposed" :name="item.name" :new-in="item.newIn" />
+        <ApiNameCell :name="item.name" :new-in="item.newIn" section="exposed" />
       </tr>
 
       <tr>
-        <app-markup
+        <AppMarkup
           :code="item.formatted"
           :rounded="false"
           language="ts"
         />
       </tr>
     </template>
-  </ApiTable>
+  </ApiApiTable>
 </template>
-
-<script setup lang="ts">
-  // Components
-  import ApiTable from './ApiTable.vue'
-  import NameCell from './NameCell.vue'
-</script>
diff --git a/packages/docs/src/components/api/Inline.vue b/packages/docs/src/components/api/Inline.vue
index 676ae70b1f6..745aaf091ea 100644
--- a/packages/docs/src/components/api/Inline.vue
+++ b/packages/docs/src/components/api/Inline.vue
@@ -7,7 +7,7 @@
   />
 
   <div v-if="components" :class="showInline && 'mt-4'">
-    <api-links v-if="!showInline && !hideLinks" :components="components" />
+    <ApiLinks v-if="!showInline && !hideLinks" :components="components" />
 
     <div v-if="showInline">
       <div class="d-flex justify-space-between align-center">
@@ -17,16 +17,16 @@
           :readonly="components.length === 1"
           class="mb-2"
           color="primary"
-          hide-details
           label="Component API"
           prepend-inner-icon="mdi-view-dashboard"
           style="max-width: 250px;"
           variant="outlined"
+          hide-details
         />
       </div>
 
       <template v-for="section of sections" :key="section">
-        <api-section
+        <ApiSection
           :name="name"
           :section="section"
           show-headline
@@ -37,14 +37,6 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed, onBeforeMount, ref } from 'vue'
-
   // Data
   import pageToApi from '@/data/page-to-api.json'
 
diff --git a/packages/docs/src/components/api/Links.vue b/packages/docs/src/components/api/Links.vue
index d23f9617b58..40ed85fc8a7 100644
--- a/packages/docs/src/components/api/Links.vue
+++ b/packages/docs/src/components/api/Links.vue
@@ -1,19 +1,12 @@
 <template>
   <div class="mb-4 d-flex flex-column">
     <div v-for="link in links" :key="link.name">
-      <app-link :href="link.href">{{ link.name }}</app-link>
+      <AppLink :href="link.href">{{ link.name }}</AppLink>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-
   // Data
   import pageToApi from '@/data/page-to-api.json'
 
@@ -30,7 +23,7 @@
 
     return apis.map(name => ({
       name,
-      href: `/${locale.value}/api/${name}`,
+      href: `/${locale.value}/api/` + (name.startsWith('v-') ? `${name}-directive` : name),
     }))
   })
 </script>
diff --git a/packages/docs/src/components/api/NameCell.vue b/packages/docs/src/components/api/NameCell.vue
index 5bbdb0447d4..f74397dab3c 100644
--- a/packages/docs/src/components/api/NameCell.vue
+++ b/packages/docs/src/components/api/NameCell.vue
@@ -2,9 +2,9 @@
   <td :id="`${section}-${name.replace('$', '')}`">
     <div class="d-inline-flex align-center">
       <kbd class="name-item text-mono">
-        <app-link :href="href" class="font-weight-bold">
+        <AppLink :href="href" class="font-weight-bold">
           {{ name }}
-        </app-link>
+        </AppLink>
       </kbd>
 
       <new-in-chip
@@ -17,13 +17,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const props = defineProps({
     section: String,
     name: String,
diff --git a/packages/docs/src/components/api/PrismCell.vue b/packages/docs/src/components/api/PrismCell.vue
index 16c27b74ad7..f4c13d6ed93 100644
--- a/packages/docs/src/components/api/PrismCell.vue
+++ b/packages/docs/src/components/api/PrismCell.vue
@@ -9,9 +9,8 @@
   import 'prismjs/components/prism-scss.js'
   import 'prismjs/components/prism-typescript.js'
 
-  // Utilities
-  import { insertLinks, stripLinks } from './utils'
-  import { PropType, ref, watchEffect } from 'vue'
+  // Types
+  import type { PropType } from 'vue'
 
   const props = defineProps({
     code: null,
diff --git a/packages/docs/src/components/api/PropsTable.vue b/packages/docs/src/components/api/PropsTable.vue
index e123e123809..a15cd5b2f0f 100644
--- a/packages/docs/src/components/api/PropsTable.vue
+++ b/packages/docs/src/components/api/PropsTable.vue
@@ -1,29 +1,21 @@
 <template>
-  <ApiTable :headers="headers">
+  <ApiApiTable :headers="headers">
     <template #row="{ props, item }">
       <tr v-bind="props">
-        <NameCell section="props" :name="kebabCase(item.name)" :new-in="item.newIn" />
+        <ApiNameCell :name="kebabCase(item.name)" :new-in="item.newIn" section="props" />
 
         <td>
-          <PrismCell :code="item.formatted" />
+          <ApiPrismCell :code="item.formatted" />
         </td>
 
         <td>
-          <PrismCell :code="item.default" />
+          <ApiPrismCell :code="item.default" />
         </td>
       </tr>
     </template>
-  </ApiTable>
+  </ApiApiTable>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import ApiTable from './ApiTable.vue'
-  import NameCell from './NameCell.vue'
-  import PrismCell from './PrismCell.vue'
-
-  // Utilities
-  import { kebabCase } from 'lodash-es'
-
   const headers = ['name', 'type', 'default']
 </script>
diff --git a/packages/docs/src/components/api/SassTable.vue b/packages/docs/src/components/api/SassTable.vue
index 017467931ed..a47b4a1e174 100644
--- a/packages/docs/src/components/api/SassTable.vue
+++ b/packages/docs/src/components/api/SassTable.vue
@@ -1,22 +1,17 @@
 <template>
-  <ApiTable :headers="headers">
+  <ApiApiTable :headers="headers">
     <template #row="{ props, item }">
       <tr v-bind="props">
-        <NameCell section="sass" :name="item.name" :new-in="item.newIn" />
+        <ApiNameCell :name="item.name" :new-in="item.newIn" section="sass" />
 
         <td>
-          <PrismCell :code="item.default" />
+          <ApiPrismCell :code="item.default" />
         </td>
       </tr>
     </template>
-  </ApiTable>
+  </ApiApiTable>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import ApiTable from './ApiTable.vue'
-  import NameCell from './NameCell.vue'
-  import PrismCell from './PrismCell.vue'
-
   const headers = ['name', 'default']
 </script>
diff --git a/packages/docs/src/components/api/Search.vue b/packages/docs/src/components/api/Search.vue
index 07a39ac83da..525f4ef05df 100644
--- a/packages/docs/src/components/api/Search.vue
+++ b/packages/docs/src/components/api/Search.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex mb-2">
-    <app-text-field
+    <AppTextField
       v-model="appStore.apiSearch"
       :placeholder="t('search-api')"
       clearable
@@ -9,13 +9,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { onBeforeUnmount } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-
   const appStore = useAppStore()
   const { t } = useI18n()
 
diff --git a/packages/docs/src/components/api/Section.vue b/packages/docs/src/components/api/Section.vue
index 830a25512bb..558924c8668 100644
--- a/packages/docs/src/components/api/Section.vue
+++ b/packages/docs/src/components/api/Section.vue
@@ -1,32 +1,28 @@
 <template>
   <div v-if="items?.length" class="mb-4">
     <!-- <div class="d-flex mb-2">
-      <app-text-field
+      <AppTextField
         clearable
         icon="$mdiMagnify"
         label="Filter"
         @input="filter = $event"
       />
     </div> -->
-    <app-headline v-if="showHeadline" :path="`api-headers.${section}`" />
-    <TableComponent :name="name" :items="items" />
+    <AppHeadline v-if="showHeadline" :path="`api-headers.${section}`" />
+    <TableComponent :items="items" :name="name" />
   </div>
 </template>
 
 <script setup lang="ts">
   // Components
-  import EventsTable from './EventsTable.vue'
-  import ExposedTable from './ExposedTable.vue'
-  import PropsTable from './PropsTable.vue'
-  import SassTable from './SassTable.vue'
-  import SlotsTable from './SlotsTable.vue'
-
-  // Composables
-  import { useLocaleStore } from '@/store/locale'
-
-  // Utilities
-  import { Item } from './utils'
-  import { computed, ref, watch } from 'vue'
+  import EventsTable from '@/components/api/EventsTable.vue'
+  import ExposedTable from '@/components/api/ExposedTable.vue'
+  import PropsTable from '@/components/api/PropsTable.vue'
+  import SassTable from '@/components/api/SassTable.vue'
+  import SlotsTable from '@/components/api/SlotsTable.vue'
+
+  // Types
+  import type { Item } from './utils'
 
   // Data
   import newIn from '@/data/new-in.json'
diff --git a/packages/docs/src/components/api/SlotsTable.vue b/packages/docs/src/components/api/SlotsTable.vue
index 8451a089d46..db54f3c1773 100644
--- a/packages/docs/src/components/api/SlotsTable.vue
+++ b/packages/docs/src/components/api/SlotsTable.vue
@@ -1,19 +1,13 @@
 <template>
-  <ApiTable>
+  <ApiApiTable>
     <template #row="{ props, item }">
       <tr v-bind="props">
-        <NameCell section="slots" :name="item.name" :new-in="item.newIn" />
+        <ApiNameCell :name="item.name" :new-in="item.newIn" section="slots" />
       </tr>
 
       <tr v-if="item.formatted !== 'never' && item.text !== 'undefined'">
-        <app-markup :code="item.formatted" language="ts" :rounded="false" />
+        <AppMarkup :code="item.formatted" :rounded="false" language="ts" />
       </tr>
     </template>
-  </ApiTable>
+  </ApiApiTable>
 </template>
-
-<script setup lang="ts">
-  // Components
-  import ApiTable from './ApiTable.vue'
-  import NameCell from './NameCell.vue'
-</script>
diff --git a/packages/docs/src/components/app/BackToTop.vue b/packages/docs/src/components/app/BackToTop.vue
index b37cfbe26e5..5865a6309b8 100644
--- a/packages/docs/src/components/app/BackToTop.vue
+++ b/packages/docs/src/components/app/BackToTop.vue
@@ -1,10 +1,10 @@
 <template>
   <v-layout-item
-    v-scroll="onScroll"
     class="text-end pointer-events-none"
-    model-value
     position="bottom"
     size="88"
+    model-value
+    v-scroll="onScroll"
   >
     <div class="ma-4">
       <v-fab-transition>
@@ -23,12 +23,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useGoTo } from 'vuetify'
-
-  // Utilities
-  import { shallowRef } from 'vue'
-
   const goTo = useGoTo({ layout: true })
 
   const model = shallowRef(false)
diff --git a/packages/docs/src/components/app/Banner.vue b/packages/docs/src/components/app/Banner.vue
deleted file mode 100644
index 762b0e022ab..00000000000
--- a/packages/docs/src/components/app/Banner.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <v-app-bar
-    v-if="banner"
-    id="app-banner-bar"
-    :color="banner.metadata.color"
-    :height="height"
-    :image="banner.metadata.images.bg?.url"
-    :theme="banner.metadata.theme.key"
-    :model-value="hasPromotion"
-    flat
-  >
-    <a
-      :href="banner.metadata.link"
-      class="d-flex align-center flex-grow-1 text-decoration-none"
-      rel="noopener"
-      target="_blank"
-      v-bind="banner.metadata.attributes"
-      @click="onClick"
-    >
-      <v-list-item lines="two">
-        <template v-if="banner.metadata.images.logo" #prepend>
-          <v-avatar :image="banner.metadata.images.logo.url" size="x-large" />
-        </template>
-
-        <v-list-item-title
-          v-if="banner.metadata.text"
-          class="text-subtitle-2 text-md-subtitle-1 font-weight-medium"
-        >
-          <app-markdown :content="banner.metadata.text" />
-        </v-list-item-title>
-
-        <v-list-item-subtitle v-if="banner.metadata.subtext">
-          {{ banner.metadata.subtext }}
-        </v-list-item-subtitle>
-      </v-list-item>
-
-      <v-spacer />
-    </a>
-
-    <template #append>
-      <v-hover v-if="mdAndUp && banner.metadata.link && banner.metadata.link_text">
-        <template #default="{ isHovering, props }">
-          <v-btn
-            :color="banner.metadata.link_color"
-            :href="banner.metadata.link"
-            :elevation="isHovering ? 8 : 0"
-            v-bind="{ ...props, ...banner.metadata.attributes }"
-            append-icon="mdi-open-in-new"
-            class="text-none me-2"
-            rel="noopener"
-            target="_blank"
-            variant="elevated"
-            @click="onClick"
-          >
-            {{ banner.metadata.link_text }}
-          </v-btn>
-
-        </template>
-      </v-hover>
-
-      <v-btn
-        v-if="banner.metadata.closable"
-        class="ms-6 me-2"
-        density="comfortable"
-        size="small"
-        icon="$clear"
-        variant="plain"
-        @click="onClose"
-      />
-    </template>
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  // Composables
-  import { useBannersStore } from '@/store/banners'
-  import { useDisplay } from 'vuetify'
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed, onBeforeMount } from 'vue'
-
-  const { event } = useGtag()
-  const { mdAndUp } = useDisplay()
-  const { name } = useRoute()
-  const user = useUserStore()
-  const banners = useBannersStore()
-
-  const banner = computed(() => banners.banner)
-  const height = computed(() => banner.value?.metadata.height || (banner.value?.metadata.subtext ? 88 : 48))
-  const hasPromotion = computed(() => {
-    return !banner.value || !user.notifications.last.banner.includes(banner.value.slug)
-  })
-
-  function onClick () {
-    if (!banner.value) return
-
-    event('click', {
-      event_category: 'vuetify-banner',
-      event_label: banner.value.slug,
-      value: name?.toString().toLowerCase(),
-    })
-  }
-
-  function onClose () {
-    if (!banner.value) return
-
-    user.notifications.last.banner.push(banner.value.slug)
-  }
-
-  onBeforeMount(banners.fetch)
-</script>
-
-<style lang="sass">
-  #app-banner-bar
-    a
-      color: inherit
-
-    p
-      margin-bottom: 0
-</style>
diff --git a/packages/docs/src/components/app/Btn.vue b/packages/docs/src/components/app/Btn.vue
index 9311a967a7b..f368c82bcdb 100644
--- a/packages/docs/src/components/app/Btn.vue
+++ b/packages/docs/src/components/app/Btn.vue
@@ -1,7 +1,7 @@
 <template>
   <v-btn
-    :variant="variant"
     :icon="!!icon"
+    :variant="variant"
     class="text-body-2 text-capitalize px-3 app-btn"
     color="medium-emphasis"
   >
@@ -20,9 +20,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   defineProps({
     icon: String,
     text: String,
diff --git a/packages/docs/src/components/app/Caption.vue b/packages/docs/src/components/app/Caption.vue
index 661598e6d90..efe71c80896 100644
--- a/packages/docs/src/components/app/Caption.vue
+++ b/packages/docs/src/components/app/Caption.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-headline
+  <AppHeadline
     :path="path"
     color="grey"
     size="caption"
@@ -11,7 +11,7 @@
   defineProps({
     path: {
       type: String,
-      required: true,
+      default: '',
     },
   })
 </script>
diff --git a/packages/docs/src/components/app/Figure.vue b/packages/docs/src/components/app/Figure.vue
index 2e1adfe0947..56b13d69572 100644
--- a/packages/docs/src/components/app/Figure.vue
+++ b/packages/docs/src/components/app/Figure.vue
@@ -16,9 +16,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, useAttrs } from 'vue'
-
   const attrs = useAttrs()
 
   defineProps({
diff --git a/packages/docs/src/components/app/Heading.vue b/packages/docs/src/components/app/Heading.vue
index 2f88ed42bbf..040fc76d4e6 100644
--- a/packages/docs/src/components/app/Heading.vue
+++ b/packages/docs/src/components/app/Heading.vue
@@ -6,9 +6,9 @@
     <router-link
       v-if="href"
       :to="href"
+      aria-hidden="true"
       class="text-decoration-none text-end text-md-start d-none d-sm-inline-block"
       style="user-select: none"
-      aria-hidden="true"
     >
       <span class="text-primary">#</span>
     </router-link>
@@ -20,9 +20,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { computed } from 'vue'
-
   const HEADING_CLASSES = {
     1: 'text-h3 text-sm-h3',
     2: 'text-h4 text-sm-h4',
diff --git a/packages/docs/src/components/app/Headline.vue b/packages/docs/src/components/app/Headline.vue
index 385d37940c5..a54ae4cc5ad 100644
--- a/packages/docs/src/components/app/Headline.vue
+++ b/packages/docs/src/components/app/Headline.vue
@@ -8,9 +8,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   defineProps({
     color: String,
     size: {
@@ -27,7 +24,7 @@
     },
     path: {
       type: String,
-      required: true,
+      default: '',
     },
   })
 
diff --git a/packages/docs/src/components/app/Link.vue b/packages/docs/src/components/app/Link.vue
index b07964ae3f5..f27aebfb59d 100644
--- a/packages/docs/src/components/app/Link.vue
+++ b/packages/docs/src/components/app/Link.vue
@@ -17,10 +17,6 @@
 </template>
 
 <script setup lang="ts">
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const props = defineProps({
     href: {
       type: String,
diff --git a/packages/docs/src/components/app/Markdown.vue b/packages/docs/src/components/app/Markdown.vue
index 6e0ce34c8a0..05098706840 100644
--- a/packages/docs/src/components/app/Markdown.vue
+++ b/packages/docs/src/components/app/Markdown.vue
@@ -6,8 +6,6 @@
 
 <script setup>
   // Utilities
-  import { computed } from 'vue'
-  import { configureMarkdown } from '@/util/markdown-it'
   import MarkdownIt from 'markdown-it'
 
   const md = configureMarkdown(MarkdownIt({
diff --git a/packages/docs/src/components/app/Markup.vue b/packages/docs/src/components/app/Markup.vue
index c788ef2a950..fda0e5687a3 100644
--- a/packages/docs/src/components/app/Markup.vue
+++ b/packages/docs/src/components/app/Markup.vue
@@ -68,15 +68,8 @@
   import 'prismjs/components/prism-scss.js'
   import 'prismjs/components/prism-typescript.js'
 
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useTheme } from 'vuetify'
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { ComponentPublicInstance, computed, ref, watchEffect } from 'vue'
-  import { wait } from '@/util/helpers'
-  import { stripLinks } from '@/components/api/utils'
+  // Types
+  import type { ComponentPublicInstance } from 'vue'
 
   const props = defineProps({
     resource: String,
diff --git a/packages/docs/src/components/app/SnackbarQueue.vue b/packages/docs/src/components/app/SnackbarQueue.vue
index b9e5b829ba3..94558df38d0 100644
--- a/packages/docs/src/components/app/SnackbarQueue.vue
+++ b/packages/docs/src/components/app/SnackbarQueue.vue
@@ -2,9 +2,9 @@
   <v-snackbar
     v-if="isVisible && current"
     v-model="isActive"
+    :color="current.color"
     :timeout="current.timeout"
     timer
-    :color="current.color"
     @after-leave="onAfterLeave"
   >
     {{ current.message }}
@@ -12,11 +12,8 @@
 </template>
 
 <script setup lang="ts">
-  // Utilities
-  import { nextTick, ref, shallowRef, watch } from 'vue'
-
-  // Stores
-  import { type Notification, useAppStore } from '@/store/app'
+  // Types
+  import type { Notification } from '@/stores/app'
 
   const store = useAppStore()
   const isActive = ref(false)
diff --git a/packages/docs/src/components/app/Table.vue b/packages/docs/src/components/app/Table.vue
index 9690ead53f9..0237afb8f21 100644
--- a/packages/docs/src/components/app/Table.vue
+++ b/packages/docs/src/components/app/Table.vue
@@ -1,12 +1,12 @@
 <template>
-  <app-sheet class="mb-4 app-table">
+  <AppSheet class="mb-4 app-table">
     <v-table
       density="comfortable"
       v-bind="$attrs"
     >
       <slot />
     </v-table>
-  </app-sheet>
+  </AppSheet>
 </template>
 
 <script>
diff --git a/packages/docs/src/components/app/TextField.vue b/packages/docs/src/components/app/TextField.vue
index 15d8dede9aa..1c1ae98922d 100644
--- a/packages/docs/src/components/app/TextField.vue
+++ b/packages/docs/src/components/app/TextField.vue
@@ -2,11 +2,11 @@
   <v-text-field
     :placeholder="t('search.label')"
     base-color="disabled"
+    prepend-inner-icon="mdi-magnify"
+    variant="outlined"
     hide-details
     persistent-placeholder
-    prepend-inner-icon="mdi-magnify"
     single-line
-    variant="outlined"
   >
     <template v-if="$slots['append-inner']" #append-inner>
       <slot name="append-inner" />
@@ -15,7 +15,5 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-
   const { t } = useI18n()
 </script>
diff --git a/packages/docs/src/components/app/Title.vue b/packages/docs/src/components/app/Title.vue
index 7cdb3e8d8aa..b13791955b4 100644
--- a/packages/docs/src/components/app/Title.vue
+++ b/packages/docs/src/components/app/Title.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-headline size="subtitle-2" weight="black" />
+  <AppHeadline size="subtitle-2" weight="black" />
 </template>
 
 <script setup>
diff --git a/packages/docs/src/components/app/Toc.vue b/packages/docs/src/components/app/Toc.vue
index 8092beff699..22814196c7e 100644
--- a/packages/docs/src/components/app/Toc.vue
+++ b/packages/docs/src/components/app/Toc.vue
@@ -4,16 +4,16 @@
     id="app-toc"
     v-model="tocDrawer"
     color="background"
-    floating
     location="right"
-    sticky
     width="256"
+    floating
+    sticky
   >
     <template
-      v-if="toc?.length"
+      v-if="routeToc?.length"
       #prepend
     >
-      <app-headline
+      <AppHeadline
         class="mt-4 mb-2 ms-4"
         path="contents"
       />
@@ -21,9 +21,9 @@
 
     <ul class="ms-5">
       <router-link
-        v-for="{ to, level, text } in toc"
-        v-slot="{ href }"
+        v-for="{ to, level, text } in routeToc"
         :key="text"
+        v-slot="{ href }"
         :to="to"
         custom
       >
@@ -50,7 +50,7 @@
 
     <template #append>
       <v-container>
-        <app-headline
+        <AppHeadline
           v-if="sponsors.length"
           :to="rpath('/introduction/sponsors-and-backers/')"
           class="mb-1 mt-n1 text-high-emphasis text-decoration-none"
@@ -77,20 +77,18 @@
               <v-btn
                 :to="rpath('/introduction/sponsors-and-backers/')"
                 append-icon="$vuetify"
-                block
                 class="text-none"
                 color="primary"
                 size="large"
-                variant="tonal"
                 text="Support"
+                variant="tonal"
+                block
               />
             </v-col>
           </template>
 
           <v-col v-else cols="12">
             <v-btn
-              block
-              border
               class="text-none border-opacity-50 border-primary"
               color="primary"
               href="https://github.com/sponsors/johnleider"
@@ -100,6 +98,8 @@
               target="_blank"
               text="Your Logo Here"
               variant="tonal"
+              block
+              border
             />
           </v-col>
 
@@ -109,8 +109,8 @@
           >
             <a
               :href="spot.spot.href"
-              target="_blank"
               rel="noopener noreferrer sponsored"
+              target="_blank"
               @click="gtagClick('toc', 'promotion', spot.spot.sponsor)"
             >
               <v-img :src="spot.spot.image.url" />
@@ -123,25 +123,6 @@
 </template>
 
 <script setup lang="ts">
-  // Components
-  import SponsorCard from '@/components/sponsor/Card.vue'
-
-  // Composables
-  import { useRoute, useRouter } from 'vue-router'
-  import { useTheme } from 'vuetify'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-  import { useUserStore } from '@vuetify/one'
-  import { useSponsorsStore } from '@/store/sponsors'
-  import { useSpotStore } from '@/store/spot'
-
-  // Utilities
-  import { computed, nextTick, onMounted, onScopeDispose, ref, watch } from 'vue'
-  import { gtagClick } from '@/util/analytics'
-  import { rpath } from '@/util/routes'
-  import { storeToRefs } from 'pinia'
-
   type TocItem = {
     to: string;
     text: string;
@@ -197,13 +178,14 @@
     if (!val || internalScrolling) return
 
     scrolling.value = true
+    const query = route.query
 
     if (val === routeToc.value?.[0]?.to.slice(1) && route.hash) {
-      router.replace({ path: route.path })
+      router.replace({ path: route.path, query })
     } else {
       const toc = routeToc.value?.find(v => v.to.slice(1) === val)
       if (toc) {
-        await router.replace({ path: route.path, hash: toc.to })
+        await router.replace({ path: route.path, hash: toc.to, query })
       }
     }
     clearTimeout(timeout)
@@ -224,7 +206,7 @@
 
   const sponsorStore = useSponsorsStore()
 
-  const toc = computed(() => route.meta.toc as TocItem[])
+  // const toc = computed(() => route.meta.toc as TocItem[])
 
   const sponsors = computed(() => (
     sponsorStore.sponsors
diff --git a/packages/docs/src/components/app/TooltipBtn.vue b/packages/docs/src/components/app/TooltipBtn.vue
index c9d033a565d..06393eaef1a 100644
--- a/packages/docs/src/components/app/TooltipBtn.vue
+++ b/packages/docs/src/components/app/TooltipBtn.vue
@@ -32,9 +32,6 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   // Types
   import type { PropType } from 'vue'
   import type { VBtn } from 'vuetify/components'
diff --git a/packages/docs/src/components/app/V2Banner.vue b/packages/docs/src/components/app/V2Banner.vue
index 339393ed704..4a133b1467f 100644
--- a/packages/docs/src/components/app/V2Banner.vue
+++ b/packages/docs/src/components/app/V2Banner.vue
@@ -2,8 +2,8 @@
   <v-system-bar
     v-if="showBanner"
     color="#e7f0f6"
-    theme="light"
     height="52"
+    theme="light"
   >
     <div class="text-blue-darken-3 text-start ms-4">
       <div class="text-caption">
@@ -27,8 +27,8 @@
     <v-btn
       class="ms-4 ms-md-6 me-2"
       density="comfortable"
-      size="small"
       icon="$clear"
+      size="small"
       variant="plain"
       @click="onClose"
     />
@@ -36,9 +36,6 @@
 </template>
 
 <script setup>
-  import { useUserStore } from '@vuetify/one'
-  import { computed } from 'vue'
-
   const user = useUserStore()
 
   const showBanner = computed(() => !user.notifications.last.v2banner)
diff --git a/packages/docs/src/components/app/VerticalDivider.vue b/packages/docs/src/components/app/VerticalDivider.vue
index dd5c135aa82..8bcd6c4ef8e 100644
--- a/packages/docs/src/components/app/VerticalDivider.vue
+++ b/packages/docs/src/components/app/VerticalDivider.vue
@@ -1,9 +1,9 @@
 <template>
   <v-divider
     class="mx-2 my-auto"
+    style="height: 16px;"
     inset
     vertical
-    style="height: 16px;"
   />
 </template>
 
diff --git a/packages/docs/src/components/app/bar/AuthDialog.vue b/packages/docs/src/components/app/bar/AuthDialog.vue
deleted file mode 100644
index dd99794d32b..00000000000
--- a/packages/docs/src/components/app/bar/AuthDialog.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <app-btn
-    v-if="!auth.user && !auth.isLoading"
-    v-bind="{
-      [`${lgAndUp ? 'append-' : ''}icon`]: 'mdi-login',
-      text: lgAndUp ? 'login.login' : undefined,
-    }"
-    :rounded="mdAndDown"
-    class="ms-1"
-    color="primary"
-    variant="outlined"
-  >
-    <v-dialog activator="parent" max-width="480">
-      <v-card class="pt-6 pb-1 pb-sm-4 px-4 px-sm-8">
-        <v-img
-          :src="`https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-${theme.name.value}.svg`"
-          class="mb-4"
-          height="30"
-        />
-
-        <div class="text-center mb-6">
-          <v-card-title class="text-h5 mb-1 text-md-h4 font-weight-bold">
-            {{ auth.lastLoginProvider() ? t('login.welcome-back') : t('login.to-vuetify') }}
-          </v-card-title>
-
-          <v-card-subtitle class="text-wrap">{{ t('login.tagline') }}</v-card-subtitle>
-        </div>
-
-        <v-list class="mx-auto" max-width="300" width="100%">
-          <GithubLogin class="mb-3" />
-
-          <DiscordLogin />
-        </v-list>
-      </v-card>
-    </v-dialog>
-  </app-btn>
-
-  <v-btn
-    v-else
-    id="login-btn"
-    :loading="auth.isLoading"
-    class="ms-1"
-    icon
-  >
-    <app-menu
-      :disabled="!auth.user || auth.isLoading"
-      :items="items"
-      :open-on-hover="false"
-      activator="parent"
-    />
-
-    <v-avatar :image="user.avatar || auth.user?.picture || ''" />
-
-    <template #loader>
-      <v-skeleton-loader type="avatar" />
-    </template>
-  </v-btn>
-</template>
-
-<script setup lang="ts">
-  // Components
-  import GithubLogin from '@/components/user/GithubLogin.vue'
-  import DiscordLogin from '@/components/user/DiscordLogin.vue'
-
-  // Composables
-  import { useDisplay, useTheme } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
-  const auth = useAuthStore()
-  const user = useUserStore()
-
-  const { mdAndDown, lgAndUp } = useDisplay()
-  const theme = useTheme()
-  const { t } = useI18n()
-
-  const items = [
-    { subheader: t('options') },
-    {
-      title: t('my-dashboard'),
-      appendIcon: 'mdi-view-dashboard-outline',
-      to: rpath('/user/dashboard/'),
-    },
-    {
-      title: t('login.logout'),
-      appendIcon: 'mdi-logout-variant',
-      onClick: () => {
-        user.railDrawer = false
-
-        auth.logout()
-      },
-    },
-  ]
-</script>
-
-<style lang="sass">
-  #login-btn
-    .v-skeleton-loader__avatar
-      min-height: 40px
-      height: 40px
-      width: 40px
-      max-height: 40px
-      min-width: 40px
-      max-width: 40px
-</style>
diff --git a/packages/docs/src/components/app/bar/Bar.vue b/packages/docs/src/components/app/bar/Bar.vue
index 40ce20ed192..605857d21ce 100644
--- a/packages/docs/src/components/app/bar/Bar.vue
+++ b/packages/docs/src/components/app/bar/Bar.vue
@@ -1,20 +1,20 @@
 <template>
   <v-app-bar
     id="app-bar"
-    :image="image"
+    :image="settings.suit['app-bar']"
     border="b"
     flat
   >
     <template #prepend>
       <app-bar-logo />
 
-      <app-btn
+      <AppBtn
         v-if="route.meta.layout !== 'home' && mdAndDown"
         icon="mdi-menu"
         @click="app.drawer = !app.drawer"
       />
 
-      <app-search />
+      <AppSearchSearch />
     </template>
 
     <template #append>
@@ -32,64 +32,26 @@
         <app-bar-enterprise-link />
       </template>
 
-      <template v-if="!user.quickbar">
-        <app-vertical-divider v-if="smAndUp" class="ms-3 me-2" />
+      <app-vertical-divider v-if="smAndUp" class="ms-3 me-2" />
 
-        <app-bar-store-link v-if="smAndUp" />
+      <app-bar-store-link v-if="smAndUp" />
 
-        <app-bar-jobs-link v-if="smAndUp" />
+      <app-bar-jobs-link v-if="smAndUp" />
 
-        <app-bar-notifications-menu />
+      <app-bar-language-menu v-if="smAndUp" />
 
-        <app-bar-language-menu v-if="smAndUp" />
-
-        <app-bar-settings-toggle />
-      </template>
+      <app-bar-settings-toggle />
 
       <app-vertical-divider v-if="lgAndUp" class="ms-2 me-3" />
 
-      <vo-auth-dialog />
+      <VoAuthBtn />
     </template>
   </v-app-bar>
 </template>
 
 <script setup>
-  // Components
-  import AppBarEcosystemMenu from './EcosystemMenu.vue'
-  import AppBarEnterpriseLink from './EnterpriseLink.vue'
-  import AppBarJobsLink from './JobsLink.vue'
-  import AppBarLanguageMenu from './LanguageMenu.vue'
-  import AppBarLearnMenu from './LearnMenu.vue'
-  import AppBarLogo from './Logo.vue'
-  import AppBarNotificationsMenu from './NotificationsMenu.vue'
-  import AppBarPlaygroundLink from './PlaygroundLink.vue'
-  import AppBarSettingsToggle from './SettingsToggle.vue'
-  import AppBarStoreLink from './StoreLink.vue'
-  import AppBarSupportMenu from './SupportMenu.vue'
-  import AppBarTeamLink from './TeamLink.vue'
-  import AppSearch from '@/components/app/search/Search.vue'
-  import AppVerticalDivider from '@/components/app/VerticalDivider.vue'
-
-  // Composables
-  import { useAppStore } from '@/store/app'
-  import { useDisplay, useTheme } from 'vuetify'
-  import { useRoute } from 'vue-router'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const app = useAppStore()
-  const user = useUserStore()
   const { smAndUp, mdAndUp, lgAndUp, mdAndDown } = useDisplay()
   const route = useRoute()
-  const theme = useTheme()
-
-  const image = computed(() => {
-    if (['dark', 'light'].includes(theme.name.value)) return undefined
-
-    return `https://cdn.vuetifyjs.com/docs/images/themes/${theme.name.value}-app-bar.png`
-  })
+  const settings = useSettingsStore()
 </script>
diff --git a/packages/docs/src/components/app/bar/EcosystemMenu.vue b/packages/docs/src/components/app/bar/EcosystemMenu.vue
index 90a5267a141..e86b13e0edd 100644
--- a/packages/docs/src/components/app/bar/EcosystemMenu.vue
+++ b/packages/docs/src/components/app/bar/EcosystemMenu.vue
@@ -1,28 +1,18 @@
 <template>
-  <app-btn>
+  <AppBtn>
     Ecosystem
 
-    <chevron-down />
+    <IconsChevronDown />
 
-    <app-menu
+    <AppMenuMenu
       :items="items"
       activator="parent"
       width="200"
     />
-  </app-btn>
+  </AppBtn>
 </template>
 
 <script setup>
-  // Components
-  import ChevronDown from '@/components/icons/ChevronDown.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const { t } = useI18n()
   const items = computed(() => ([
     { subheader: t('social') },
diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue
index 17e7e820ebd..a1956e2ee60 100644
--- a/packages/docs/src/components/app/bar/EnterpriseLink.vue
+++ b/packages/docs/src/components/app/bar/EnterpriseLink.vue
@@ -1,23 +1,15 @@
 <template>
-  <app-btn
+  <AppBtn
     :to="rpath('/introduction/enterprise-support/')"
     class="ms-1"
     @click="gtagClick('app-bar', 'enterprise', name)"
   >
 
     {{ t('enterprise') }}
-  </app-btn>
+  </AppBtn>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-  import { gtagClick } from '@/util/analytics'
-
   const { t } = useI18n()
   const { name } = useRoute()
 </script>
diff --git a/packages/docs/src/components/app/bar/JobsLink.vue b/packages/docs/src/components/app/bar/JobsLink.vue
index 601f96a5032..a793854e56d 100644
--- a/packages/docs/src/components/app/bar/JobsLink.vue
+++ b/packages/docs/src/components/app/bar/JobsLink.vue
@@ -2,27 +2,19 @@
   <v-badge
     :model-value="newJobs.length > 0"
     color="#ED561B"
-    dot
     location="top end"
+    dot
   >
-    <app-btn
+    <AppBtn
+      :icon="icon"
       :to="rpath('/resources/jobs-for-vue/')"
       class="jobs-link"
-      :icon="icon"
       @click="onClick"
     />
   </v-badge>
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute, useRouter } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const { currentRoute } = useRouter()
   const { event } = useGtag()
   const { name } = useRoute()
diff --git a/packages/docs/src/components/app/bar/LanguageMenu.vue b/packages/docs/src/components/app/bar/LanguageMenu.vue
index 7147c71036f..91e04c39421 100644
--- a/packages/docs/src/components/app/bar/LanguageMenu.vue
+++ b/packages/docs/src/components/app/bar/LanguageMenu.vue
@@ -1,27 +1,20 @@
 <template>
-  <app-menu
+  <AppMenuMenu
     key="language-menu"
-    :open-on-hover="false"
     :items="items"
+    :open-on-hover="false"
   >
     <template #activator="{ props }">
-      <app-btn
+      <AppBtn
         color="medium-emphasis"
         icon="mdi-translate"
         v-bind="props"
       />
     </template>
-  </app-menu>
+  </AppMenuMenu>
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-
   // Language
   import locales from '@/i18n/locales.json'
 
diff --git a/packages/docs/src/components/app/bar/LearnMenu.vue b/packages/docs/src/components/app/bar/LearnMenu.vue
index 2014a33bbfb..aa59d7c73d8 100644
--- a/packages/docs/src/components/app/bar/LearnMenu.vue
+++ b/packages/docs/src/components/app/bar/LearnMenu.vue
@@ -1,28 +1,18 @@
 <template>
-  <app-btn>
+  <AppBtn>
     {{ title }}
 
-    <chevron-down />
+    <IconsChevronDown />
 
-    <app-menu
+    <AppMenuMenu
       :items="items"
       activator="parent"
       width="200"
     />
-  </app-btn>
+  </AppBtn>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import ChevronDown from '@/components/icons/ChevronDown.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const { t } = useI18n()
   const title = t('learn')
   const items = computed(() => ([
diff --git a/packages/docs/src/components/app/bar/Logo.vue b/packages/docs/src/components/app/bar/Logo.vue
index 12f911731cb..8093d98ad90 100644
--- a/packages/docs/src/components/app/bar/Logo.vue
+++ b/packages/docs/src/components/app/bar/Logo.vue
@@ -7,22 +7,14 @@
       :key="logo"
       :alt="`Vuetify ${t('logo')}`"
       :src="`https://cdn.vuetifyjs.com/docs/images/logos/${logo}`"
+      :transition="false"
       :width="lgAndUp ? 148 : 34"
       class="shrink"
-      :transition="false"
     />
   </router-link>
 </template>
 
 <script setup>
-  // Composables
-  import { useDisplay, useTheme } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   defineProps({
     alt: Boolean,
   })
diff --git a/packages/docs/src/components/app/bar/NotificationsMenu.vue b/packages/docs/src/components/app/bar/NotificationsMenu.vue
index 8840d926766..3cabc890de1 100644
--- a/packages/docs/src/components/app/bar/NotificationsMenu.vue
+++ b/packages/docs/src/components/app/bar/NotificationsMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-menu
+  <AppMenuMenu
     v-if="user.notifications.show"
     v-model="menu"
     :close-on-content-click="false"
@@ -7,13 +7,13 @@
     :width="width"
   >
     <template #activator="{ props }">
-      <app-tooltip-btn v-bind="props">
+      <AppTooltipBtn v-bind="props">
         <template #icon>
           <v-badge
             :model-value="unread.length > 0"
             color="#ED561B"
-            dot
             location="top end"
+            dot
           >
             <v-icon
               :icon="icon"
@@ -22,7 +22,7 @@
             />
           </v-badge>
         </template>
-      </app-tooltip-btn>
+      </AppTooltipBtn>
     </template>
 
     <v-toolbar
@@ -53,7 +53,7 @@
       >
         <p>{{ t('done') }}</p>
 
-        <v-icon icon="$vuetify" size="96" color="#D7D7D7" />
+        <v-icon color="#D7D7D7" icon="$vuetify" size="96" />
       </div>
 
       <template v-else>
@@ -82,7 +82,7 @@
               <div class="text-caption mb-1 font-weight-bold text-medium-emphasis">{{ format(notification.created_at) }}</div>
 
               <div class="text-medium-emphasis text-caption">
-                <app-markdown :content="notification.metadata.text" class="mb-n3" />
+                <AppMarkdown :content="notification.metadata.text" class="mb-n3" />
 
                 <border-chip
                   :href="notification.metadata.action"
@@ -106,25 +106,10 @@
         </v-list>
       </template>
     </v-responsive>
-  </app-menu>
+  </AppMenuMenu>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import AppTooltipBtn from '@/components/app/TooltipBtn.vue'
-
-  // Composables
-  import { useCosmic } from '@/composables/cosmic'
-  import { useDate, useDisplay } from 'vuetify'
-  import { useGtag } from 'vue-gtag-next'
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed, onMounted, ref } from 'vue'
-
   // Types
   interface Notification {
     metadata: {
diff --git a/packages/docs/src/components/app/bar/PlaygroundLink.vue b/packages/docs/src/components/app/bar/PlaygroundLink.vue
index e19f2b2fc8a..9a79427a1d1 100644
--- a/packages/docs/src/components/app/bar/PlaygroundLink.vue
+++ b/packages/docs/src/components/app/bar/PlaygroundLink.vue
@@ -1,21 +1,17 @@
 <template>
-  <app-btn
-    href="https://play.vuetifyjs.com"
-    target="_blank"
-    rel="noopener noreferrer"
+  <AppBtn
     class="ms-1"
     color="medium-emphasis"
-    variant="text"
+    href="https://play.vuetifyjs.com"
+    rel="noopener noreferrer"
+    target="_blank"
     text="playground"
+    variant="text"
     @click="onClick"
   />
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-
   const { event } = useGtag()
   const { name } = useRoute()
 
diff --git a/packages/docs/src/components/app/bar/SettingsToggle.vue b/packages/docs/src/components/app/bar/SettingsToggle.vue
index 31c4d84e7d0..6235488eb76 100644
--- a/packages/docs/src/components/app/bar/SettingsToggle.vue
+++ b/packages/docs/src/components/app/bar/SettingsToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-btn
+  <AppBtn
     id="settings-toggle"
     :icon="app.settings ? 'mdi-cog' : 'mdi-cog-outline'"
     color="medium-emphasis"
@@ -8,15 +8,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useRoute } from 'vue-router'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-
-  // Utilities
-  import { gtagClick } from '@/util/analytics'
-
   const app = useAppStore()
   const { name } = useRoute()
 
diff --git a/packages/docs/src/components/app/bar/SponsorLink.vue b/packages/docs/src/components/app/bar/SponsorLink.vue
index 065c146d344..5769f634d15 100644
--- a/packages/docs/src/components/app/bar/SponsorLink.vue
+++ b/packages/docs/src/components/app/bar/SponsorLink.vue
@@ -1,22 +1,15 @@
 <template>
-  <app-btn
+  <AppBtn
     :to="rpath('/introduction/sponsors-and-backers/')"
     class="ms-1"
     color="medium-emphasis"
-    variant="text"
     text="sponsor"
+    variant="text"
     @click="onClick"
   />
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   const { event } = useGtag()
   const { name } = useRoute()
 
diff --git a/packages/docs/src/components/app/bar/StoreLink.vue b/packages/docs/src/components/app/bar/StoreLink.vue
index 49d871c7466..42b82169a52 100644
--- a/packages/docs/src/components/app/bar/StoreLink.vue
+++ b/packages/docs/src/components/app/bar/StoreLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-btn
+  <AppBtn
     color="medium-emphasis"
     href="https://store.vuetifyjs.com/?utm_source=vuetifyjs.com&utm_medium=toolbar"
     icon="mdi-cart-outline"
@@ -10,10 +10,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-
   const { event } = useGtag()
   const { name } = useRoute()
 
diff --git a/packages/docs/src/components/app/bar/SupportMenu.vue b/packages/docs/src/components/app/bar/SupportMenu.vue
index df371b1b710..a74e3bafad0 100644
--- a/packages/docs/src/components/app/bar/SupportMenu.vue
+++ b/packages/docs/src/components/app/bar/SupportMenu.vue
@@ -1,31 +1,21 @@
 <template>
-  <app-btn
-    color="medium-emphasis"
+  <AppBtn
     class="ms-1"
+    color="medium-emphasis"
   >
     {{ title }}
 
-    <chevron-down />
+    <IconsChevronDown />
 
-    <app-menu
+    <AppMenuMenu
       :items="items"
       activator="parent"
       width="220"
     />
-  </app-btn>
+  </AppBtn>
 </template>
 
 <script setup>
-  // Components
-  import ChevronDown from '@/components/icons/ChevronDown.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const { t } = useI18n()
   const title = t('support')
   const items = computed(() => ([
diff --git a/packages/docs/src/components/app/bar/TeamLink.vue b/packages/docs/src/components/app/bar/TeamLink.vue
index 6ed9a32ddc9..2f59c8037bb 100644
--- a/packages/docs/src/components/app/bar/TeamLink.vue
+++ b/packages/docs/src/components/app/bar/TeamLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-btn
+  <AppBtn
     :to="rpath('/about/meet-the-team/')"
     class="ms-1"
     color="medium-emphasis"
@@ -10,13 +10,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   const { event } = useGtag()
   const { name } = useRoute()
 
diff --git a/packages/docs/src/components/app/bar/ThemeToggle.vue b/packages/docs/src/components/app/bar/ThemeToggle.vue
index e1fa40d9d6a..1786d87c08e 100644
--- a/packages/docs/src/components/app/bar/ThemeToggle.vue
+++ b/packages/docs/src/components/app/bar/ThemeToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-btn
+  <AppBtn
     v-if="!hasToggle"
     :icon="icon"
     color="medium-emphasis"
@@ -9,15 +9,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useRoute } from 'vue-router'
-  import { useTheme } from 'vuetify'
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { gtagClick } from '@/util/analytics'
-
   const theme = useTheme()
   const user = useUserStore()
   const { name } = useRoute()
diff --git a/packages/docs/src/components/app/drawer/Append.vue b/packages/docs/src/components/app/drawer/Append.vue
index 8be55d7c1a1..75cceb27367 100644
--- a/packages/docs/src/components/app/drawer/Append.vue
+++ b/packages/docs/src/components/app/drawer/Append.vue
@@ -2,20 +2,20 @@
   <v-divider />
 
   <div class="d-flex align-center text-caption text-medium-emphasis pa-2">
-    <drawer-toggle-rail v-if="auth.isSubscriber" class="me-2" />
+    <AppDrawerDrawerToggleRail v-if="auth.isSubscriber" class="me-2" />
 
     <div class="d-flex ms-auto overflow-hidden">
       <v-btn
         v-if="commits.latest"
-        :text="commits.latest?.sha.slice(0, 7)"
         :href="`https://github.com/vuetifyjs/vuetify/commit/${commits.latest?.sha}`"
+        :text="commits.latest?.sha.slice(0, 7)"
         class="text-caption me-2"
         prepend-icon="mdi-source-commit"
         rel="noopener noreferrer"
         size="small"
-        slim
         target="_blank"
         variant="text"
+        slim
       />
 
       <v-btn
@@ -24,23 +24,15 @@
         class="text-caption"
         prepend-icon="mdi-tag-outline"
         size="small"
-        slim
         variant="text"
+        slim
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import DrawerToggleRail from '@/components/app/drawer/DrawerToggleRail.vue'
-
-  // Stores
-  import { useAuthStore } from '@vuetify/one'
-  import { useCommitsStore } from '@/store/commits'
-
   // Utilities
-  import { rpath } from '@/util/routes'
   import { version } from 'vuetify'
 
   const auth = useAuthStore()
diff --git a/packages/docs/src/components/app/drawer/Drawer.vue b/packages/docs/src/components/app/drawer/Drawer.vue
index 735a8d30504..c993e8b8258 100644
--- a/packages/docs/src/components/app/drawer/Drawer.vue
+++ b/packages/docs/src/components/app/drawer/Drawer.vue
@@ -2,16 +2,16 @@
   <v-navigation-drawer
     id="app-drawer"
     v-model="app.drawer"
-    :rail="railEnabled"
     :expand-on-hover="railEnabled"
-    :image="image"
+    :image="settings.suit['drawer']"
     :order="mobile ? -1 : undefined"
+    :rail="railEnabled"
     width="300"
     @update:rail="onUpdateRail"
   >
-    <pinned-items />
+    <AppDrawerPinnedItems />
 
-    <app-list
+    <AppListList
       v-model:opened="opened"
       :items="app.items"
       nav
@@ -19,37 +19,24 @@
       <template #divider>
         <v-divider class="my-3 mb-4 ms-10" />
       </template>
-    </app-list>
+    </AppListList>
 
     <template #append>
-      <app-drawer-append />
+      <AppDrawerAppend />
     </template>
   </v-navigation-drawer>
 </template>
 
 <script setup>
-  // Components
-  import AppDrawerAppend from './Append.vue'
-  import PinnedItems from './PinnedItems.vue'
-
   // Composables
-  import { useDisplay, useTheme } from 'vuetify'
-
-  // Utilities
-  import { computed, onMounted, ref, watch } from 'vue'
-  import { wait } from '@/util/helpers'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-  import { usePinsStore } from '@/store/pins'
-  import { useUserStore } from '@vuetify/one'
+  import { scrollTo } from 'vuetify/lib/composables/goto'
 
   const app = useAppStore()
   const pins = usePinsStore()
+  const settings = useSettingsStore()
   const user = useUserStore()
 
   const { mobile } = useDisplay()
-  const theme = useTheme()
 
   const rail = ref(user.railDrawer)
   const _opened = ref([])
@@ -63,10 +50,17 @@
   })
   const railEnabled = computed(() => user.railDrawer)
 
-  const image = computed(() => {
-    if (['dark', 'light'].includes(theme.name.value)) return undefined
-
-    return `https://cdn.vuetifyjs.com/docs/images/themes/${theme.name.value}-app-drawer.png`
+  // Restore scroll position when drawer is expanded
+  let scrollingElement
+  let lastScroll = 0
+  watch(rail, val => {
+    if (val) {
+      lastScroll = scrollingElement.scrollTop
+    } else {
+      scrollTo(lastScroll, {
+        container: scrollingElement,
+      })
+    }
   })
 
   watch(railEnabled, val => {
@@ -74,6 +68,8 @@
   })
 
   onMounted(async () => {
+    scrollingElement = document.querySelector('#app-drawer .v-navigation-drawer__content')
+
     if (pins.pageIsPinned) {
       _opened.value = []
 
diff --git a/packages/docs/src/components/app/drawer/DrawerToggleRail.vue b/packages/docs/src/components/app/drawer/DrawerToggleRail.vue
index 195a3d98e2c..9d5f3ac89f1 100644
--- a/packages/docs/src/components/app/drawer/DrawerToggleRail.vue
+++ b/packages/docs/src/components/app/drawer/DrawerToggleRail.vue
@@ -2,20 +2,14 @@
   <v-btn
     :icon="icon"
     height="28"
-    rounded
     size="small"
     variant="text"
+    rounded
     @click="onClick"
   />
 </template>
 
 <script setup>
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const user = useUserStore()
 
   const icon = computed(() => {
diff --git a/packages/docs/src/components/app/drawer/PinnedItems.vue b/packages/docs/src/components/app/drawer/PinnedItems.vue
index 6bcff645808..7efe983b9a0 100644
--- a/packages/docs/src/components/app/drawer/PinnedItems.vue
+++ b/packages/docs/src/components/app/drawer/PinnedItems.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-list
+  <AppListList
     v-if="auth.isSubscriber && user.pins"
     v-model:opened="opened"
     :items="pinned"
@@ -19,9 +19,9 @@
             <template #append>
               <v-icon
                 v-if="isHovering"
+                class="me-1"
                 icon="mdi-pin-off"
                 size="16"
-                class="me-1"
                 @click.prevent.stop="onClickPinRemove(itemProps)"
               />
             </template>
@@ -29,20 +29,10 @@
         </template>
       </v-hover>
     </template>
-  </app-list>
+  </AppListList>
 </template>
 
 <script setup>
-  // Composables
-  import { useRouter } from 'vue-router'
-
-  // Utilities
-  import { computed, onBeforeMount, ref, watch } from 'vue'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-  import { usePinsStore } from '@/store/pins'
-
   const auth = useAuthStore()
   const pins = usePinsStore()
   const user = useUserStore()
diff --git a/packages/docs/src/components/app/list/List.vue b/packages/docs/src/components/app/list/List.vue
index 75450655943..7f4f8cf1c8e 100644
--- a/packages/docs/src/components/app/list/List.vue
+++ b/packages/docs/src/components/app/list/List.vue
@@ -1,9 +1,9 @@
 <template>
   <v-list
     v-model:opened="opened"
-    :nav="nav"
     :items="computedItems"
     :lines="false"
+    :nav="nav"
     color="primary"
     density="compact"
     item-props
@@ -57,15 +57,8 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utiltities
-  import { computed, ref } from 'vue'
-  import { generatedRoutes as routes } from '@/util/routes'
-  import { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
-
   // Types
+  import type { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
   import type { Prop } from 'vue'
 
   export type Item = {
@@ -88,7 +81,7 @@
   }
 
   function generateApiItems (locale: string) {
-    return (routes as RouteRecordRaw[])
+    return (generatedRoutes as RouteRecordRaw[])
       .filter(route => route.path.includes(`${locale}/api/`))
       .map(route => {
         return {
@@ -111,8 +104,8 @@
       if (litem.subfolder) path = litem.subfolder
 
       const route = litem.routeMatch
-        ? routes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.routeMatch}/`))
-        : routes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.title}/`))
+        ? generatedRoutes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.routeMatch}/`))
+        : generatedRoutes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.title}/`))
 
       const to = litem.routePath
         ? `/${locale}/${path}/${litem.routePath}/`
diff --git a/packages/docs/src/components/app/menu/Menu.vue b/packages/docs/src/components/app/menu/Menu.vue
index efe78afe4e7..488aca2c707 100644
--- a/packages/docs/src/components/app/menu/Menu.vue
+++ b/packages/docs/src/components/app/menu/Menu.vue
@@ -9,20 +9,18 @@
       <slot name="activator" v-bind="{ props }" />
     </template>
 
-    <app-sheet>
+    <AppSheet>
       <slot v-if="$slots.default" />
 
-      <app-list v-else nav :items="items" />
-    </app-sheet>
+      <AppListList v-else :items="items" nav />
+    </AppSheet>
   </v-menu>
 </template>
 
 <script setup lang="ts">
   // Components
-  import { Item } from '@/components/app/list/List.vue'
-
-  // Utilities
-  import { PropType } from 'vue'
+  import type { Item } from '@/components/app/list/List.vue'
+  import type { PropType } from 'vue'
 
   defineProps({
     items: {
diff --git a/packages/docs/src/components/app/search/Search.vue b/packages/docs/src/components/app/search/Search.vue
index e705090f505..df296e0ac62 100644
--- a/packages/docs/src/components/app/search/Search.vue
+++ b/packages/docs/src/components/app/search/Search.vue
@@ -5,12 +5,12 @@
     v-model="model"
     content-class="overflow-visible align-self-start mt-16"
     max-height="900"
-    scrollable
     width="600"
+    scrollable
     @after-leave="searchString = ''"
   >
     <template #activator="{ props: activatorProps }">
-      <app-btn
+      <AppBtn
         :active="model"
         :icon="xs ? 'mdi-magnify' : undefined"
         :prepend-icon="smAndUp ? 'mdi-magnify' : undefined"
@@ -32,27 +32,27 @@
             </span>
           </span>
         </span>
-      </app-btn>
+      </AppBtn>
     </template>
 
     <v-card>
-      <app-text-field
+      <AppTextField
         v-model="searchString"
         :placeholder="`${t('search.looking') }...`"
-        autofocus
         class="flex-grow-0 mb-4"
         variant="filled"
+        autofocus
       >
         <template #append-inner>
-          <app-btn border size="small">
+          <AppBtn size="small" border>
             <span class="text-caption text-disabled">{{ t('esc') }}</span>
-          </app-btn>
+          </AppBtn>
         </template>
-      </app-text-field>
+      </AppTextField>
 
       <v-card-text :class="['px-4 py-0 d-flex flex-wrap justify-center', searchString ? 'align-start' : 'align-center']">
 
-        <search-recent
+        <AppSearchSearchRecent
           v-if="searches.length && !searchString"
           :searches="searches"
           @click:delete="onClickDelete"
@@ -76,8 +76,8 @@
 
         <ais-instant-search
           v-else
-          class="flex-grow-1"
           :search-client="searchClient"
+          class="flex-grow-1"
           index-name="vuetifyjs-v3"
           @state-change="searchFunction"
         >
@@ -88,7 +88,7 @@
           />
 
           <ais-hits v-slot="{ items }">
-            <search-results
+            <AppSearchSearchResults
               ref="list"
               :groups="transformItems(items)"
               @click:result="onClickResult"
@@ -105,23 +105,13 @@
 </template>
 
 <script setup lang="ts">
-  // Components
-  import SearchRecent from './SearchRecent.vue'
-  import SearchResults from './SearchResults.vue'
-
-  // Composables
-  import { useDisplay } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-  import { onBeforeRouteLeave, useRoute } from 'vue-router'
+  // Types
+  import SearchResults from '@/components/app/drawer/SearchResults.vue'
 
   // Utilities
   import { AisConfigure, AisHits, AisInstantSearch, AisPoweredBy } from 'vue-instantsearch/vue3/es/src/instantsearch.js'
-  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
   import algoliasearch from 'algoliasearch'
 
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
   // Types
   import type { AlgoliaSearchHelper } from 'algoliasearch-helper'
 
diff --git a/packages/docs/src/components/app/search/SearchRecent.vue b/packages/docs/src/components/app/search/SearchRecent.vue
index 09cf5606b65..d5c4f033830 100644
--- a/packages/docs/src/components/app/search/SearchRecent.vue
+++ b/packages/docs/src/components/app/search/SearchRecent.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-sheet v-if="searches.length" border class="pa-3 flex-1-1-100">
+  <AppSheet v-if="searches.length" class="pa-3 flex-1-1-100" border>
     <div class="text-high-emphasis font-weight-bold d-flex align-center text-h6 mb-2">
       <v-icon
         class="me-2"
@@ -18,8 +18,8 @@
         append-icon="mdi-delete-outline"
         density="comfortable"
         lines="one"
-        nav
         prepend-icon="mdi-file-document-outline"
+        nav
         slim
       >
         <template v-if="search.hash" #subtitle>
@@ -38,13 +38,10 @@
         </template>
       </v-list-item>
     </template>
-  </app-sheet>
+  </AppSheet>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   defineProps({
     searches: {
       type: Array,
diff --git a/packages/docs/src/components/app/search/SearchResults.vue b/packages/docs/src/components/app/search/SearchResults.vue
index f5273861bff..d8601eeeeda 100644
--- a/packages/docs/src/components/app/search/SearchResults.vue
+++ b/packages/docs/src/components/app/search/SearchResults.vue
@@ -10,12 +10,12 @@
     nav
   >
     <template v-for="(group, i) in props.groups">
-      <app-sheet border :class="['pa-3', i !== 0 && 'mt-4']">
+      <AppSheet :class="['pa-3', i !== 0 && 'mt-4']" border>
         <div class="text-high-emphasis font-weight-bold d-flex align-center text-h6 mb-2">
           <v-icon
             :icon="getIcon(group)"
-            color="medium-emphasis"
             class="me-2"
+            color="medium-emphasis"
             size="22"
           />
 
@@ -25,8 +25,8 @@
         <template v-for="(child, ci) in group.items">
           <v-list-item
             :to="getPathname(child)"
-            class="mb-0"
             append-icon="mdi-chevron-right"
+            class="mb-0"
             prepend-icon="mdi-home-outline"
             slim
             @click="onSearchClick(child.name, getPathname(child))"
@@ -48,9 +48,9 @@
             <v-list-item
               v-for="(item, it) in child.items"
               :key="`search-${i}-${ci}-${it}-children`"
-              :to="item.url"
-              :prepend-icon="item.url.indexOf('#') > -1 ? 'mdi-pound' : undefined"
               :append-icon="item.url.indexOf('#') > -1 ? 'mdi-chevron-right' : undefined"
+              :prepend-icon="item.url.indexOf('#') > -1 ? 'mdi-pound' : undefined"
+              :to="item.url"
               class="ps-6 mb-0"
               slim
               @click="onSearchClick(child.name, item.url)"
@@ -76,18 +76,15 @@
             </v-list-item>
           </template>
         </template>
-      </app-sheet>
+      </AppSheet>
     </template>
   </v-list>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  // Types
   import type { VList } from 'vuetify/components'
 
-  // Stores
-  import { useAppStore } from '@/store/app'
-
   const props = defineProps<{ groups: any[] }>()
   const emit = defineEmits(['click:result'])
 
diff --git a/packages/docs/src/components/app/settings/AdvancedOptions.vue b/packages/docs/src/components/app/settings/AdvancedOptions.vue
index c77f310313a..b14db9eb93b 100644
--- a/packages/docs/src/components/app/settings/AdvancedOptions.vue
+++ b/packages/docs/src/components/app/settings/AdvancedOptions.vue
@@ -1,12 +1,12 @@
 <template>
-  <settings-header
-    title="communication"
+  <AppSettingsSettingsHeader
     text="communication-message"
+    title="communication"
   />
 
-  <banner-option />
+  <AppSettingsOptionsBannerOption />
 
-  <notifications-option />
+  <AppSettingsOptionsNotificationsOption />
 
   <br>
 
@@ -23,12 +23,12 @@
 
   <v-divider class="my-3" />
 
-  <settings-header
-    title="dashboard.advanced-options.danger-zone"
+  <AppSettingsSettingsHeader
     text="dashboard.advanced-options.danger-zone-message"
+    title="dashboard.advanced-options.danger-zone"
   />
 
-  <developer-mode />
+  <AppSettingsDeveloperMode />
 
   <br>
 
@@ -45,21 +45,6 @@
 </template>
 
 <script setup>
-  // Components
-  import BannerOption from './options/BannerOption.vue'
-  import DeveloperMode from './DeveloperMode.vue'
-  import NotificationsOption from './options/NotificationsOption.vue'
-  import SettingsHeader from '@/components/app/settings/SettingsHeader.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const { t } = useI18n()
   const user = useUserStore()
 
diff --git a/packages/docs/src/components/app/settings/Append.vue b/packages/docs/src/components/app/settings/Append.vue
index 81a410c534c..57e64b35598 100644
--- a/packages/docs/src/components/app/settings/Append.vue
+++ b/packages/docs/src/components/app/settings/Append.vue
@@ -2,17 +2,10 @@
   <div>
     <v-divider />
 
-    <latest-release />
+    <AppSettingsLatestRelease />
 
-    <documentation-build />
+    <AppSettingsDocumentationBuild />
 
-    <latest-commit />
+    <AppSettingsLatestCommit />
   </div>
 </template>
-
-<script setup>
-  // Components
-  import DocumentationBuild from '@/components/app/settings/DocumentationBuild.vue'
-  import LatestCommit from '@/components/app/settings/LatestCommit.vue'
-  import LatestRelease from '@/components/app/settings/LatestRelease.vue'
-</script>
diff --git a/packages/docs/src/components/app/settings/DeveloperMode.vue b/packages/docs/src/components/app/settings/DeveloperMode.vue
index e27e03119e9..31885eddefa 100644
--- a/packages/docs/src/components/app/settings/DeveloperMode.vue
+++ b/packages/docs/src/components/app/settings/DeveloperMode.vue
@@ -12,10 +12,9 @@
       class="ps-1"
       color="error"
       density="comfortable"
-      inset
-
-      true-icon="mdi-check"
       false-icon="$close"
+      true-icon="mdi-check"
+      inset
     >
       <template #label>
         <div v-text="t('developer-mode')" />
@@ -25,12 +24,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const user = useUserStore()
 </script>
diff --git a/packages/docs/src/components/app/settings/DocumentationBuild.vue b/packages/docs/src/components/app/settings/DocumentationBuild.vue
index 7f3c516af08..cc347d290b0 100644
--- a/packages/docs/src/components/app/settings/DocumentationBuild.vue
+++ b/packages/docs/src/components/app/settings/DocumentationBuild.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-link-list-item
+  <AppListLinkListItem
     v-if="GITHUB_SHA"
     :append-icon="appendIcon"
     :href="`https://github.com/vuetifyjs/vuetify/commit/${GITHUB_SHA}`"
@@ -12,9 +12,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   const GITHUB_SHA = import.meta.env.VITE_GITHUB_SHA
 
   const { t } = useI18n()
diff --git a/packages/docs/src/components/app/settings/Drawer.vue b/packages/docs/src/components/app/settings/Drawer.vue
index 2f94211589c..efd2490a096 100644
--- a/packages/docs/src/components/app/settings/Drawer.vue
+++ b/packages/docs/src/components/app/settings/Drawer.vue
@@ -3,10 +3,10 @@
     id="settings-drawer"
     v-model="app.settings"
     :location="isRtl ? 'left' : 'right'"
+    width="350"
     disable-route-watcher
     temporary
     touchless
-    width="350"
   >
     <v-toolbar :title="t('settings')" flat>
       <template #append>
@@ -21,34 +21,20 @@
     <v-divider />
 
     <v-container class="px-3 py-3">
-      <options />
+      <AppSettingsOptions />
 
-      <ad-option v-if="auth.isSubscriber" />
+      <AppSettingsOptionsAdOption v-if="auth.isSubscriber" />
 
-      <developer-mode />
+      <AppSettingsDeveloperMode />
     </v-container>
 
     <template #append>
-      <app-settings-append />
+      <AppSettingsAppend />
     </template>
   </v-navigation-drawer>
 </template>
 
 <script setup>
-  // Components
-  import AdOption from '@/components/app/settings/options/AdOption.vue'
-  import AppSettingsAppend from './Append.vue'
-  import DeveloperMode from '@/components/app/settings/DeveloperMode.vue'
-  import Options from '@/components/app/settings/Options.vue'
-
-  // Composables
-  import { useRtl } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-  import { useAuthStore } from '@vuetify/one'
-
   const app = useAppStore()
   const auth = useAuthStore()
 
diff --git a/packages/docs/src/components/app/settings/LatestCommit.vue b/packages/docs/src/components/app/settings/LatestCommit.vue
index da36b10f707..855b02518f1 100644
--- a/packages/docs/src/components/app/settings/LatestCommit.vue
+++ b/packages/docs/src/components/app/settings/LatestCommit.vue
@@ -1,27 +1,18 @@
 <template>
-  <app-link-list-item
+  <AppListLinkListItem
     v-if="commits.latest"
     :href="`https://github.com/vuetifyjs/vuetify/commit/${commits.latest?.sha}`"
-    :title="commits.latest?.sha.slice(0, 7)"
     :label="t('latest-commit')"
+    :title="commits.latest?.sha.slice(0, 7)"
     append-icon="mdi-open-in-new"
+    min-width="90"
     prepend-icon="mdi-source-commit"
     rel="noopener noreferrer"
     target="_blank"
-    min-width="90"
   />
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useCommitsStore } from '@/store/commits'
-
-  // Utilities
-  import { onBeforeMount } from 'vue'
-
   const commits = useCommitsStore()
   const { t } = useI18n()
 
diff --git a/packages/docs/src/components/app/settings/LatestRelease.vue b/packages/docs/src/components/app/settings/LatestRelease.vue
index 07223ceb82c..e9db419701b 100644
--- a/packages/docs/src/components/app/settings/LatestRelease.vue
+++ b/packages/docs/src/components/app/settings/LatestRelease.vue
@@ -1,8 +1,8 @@
 <template>
-  <app-link-list-item
-    :to="rpath(`/getting-started/release-notes/?version=v${version}`)"
-    :title="`v${version}`"
+  <AppListLinkListItem
     :label="t('latest-release')"
+    :title="`v${version}`"
+    :to="rpath(`/getting-started/release-notes/?version=v${version}`)"
     append-icon="mdi-page-next"
     prepend-icon="mdi-tag-outline"
     @click="onClick"
@@ -10,13 +10,7 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  // Stores
-  import { useAppStore } from '@/store/app'
-
   // Utilities
-  import { rpath } from '@/util/routes'
   import { version } from 'vuetify'
 
   const app = useAppStore()
diff --git a/packages/docs/src/components/app/settings/Options.vue b/packages/docs/src/components/app/settings/Options.vue
index 96cd2236fe0..f59e6d0d9b2 100644
--- a/packages/docs/src/components/app/settings/Options.vue
+++ b/packages/docs/src/components/app/settings/Options.vue
@@ -1,35 +1,23 @@
 <template>
   <div>
-    <settings-header
-      title="theme"
+    <AppSettingsSettingsHeader
       text="theme-message"
+      title="theme"
     />
 
-    <theme-option />
+    <AppSettingsOptionsThemeOption />
 
     <v-divider class="mt-4 mb-3" />
 
-    <settings-header
-      title="general"
+    <AppSettingsSettingsHeader
       text="general-message"
+      title="general"
     />
 
-    <code-option />
-
-    <api-option />
+    <AppSettingsOptionsCodeOption />
 
-    <slash-search-option />
+    <AppSettingsOptionsApiOption />
 
-    <sync-option />
+    <AppSettingsOptionsSlashSearchOption />
   </div>
 </template>
-
-<script setup>
-  // Components
-  import ApiOption from '@/components/app/settings/options/ApiOption.vue'
-  import CodeOption from '@/components/app/settings/options/CodeOption.vue'
-  import SettingsHeader from '@/components/app/settings/SettingsHeader.vue'
-  import SlashSearchOption from '@/components/app/settings/options/SlashSearchOption.vue'
-  import SyncOption from '@/components/app/settings/options/SyncOption.vue'
-  import ThemeOption from '@/components/app/settings/options/ThemeOption.vue'
-</script>
diff --git a/packages/docs/src/components/app/settings/PerksOptions.vue b/packages/docs/src/components/app/settings/PerksOptions.vue
index 17d293be466..a4ff9db0c92 100644
--- a/packages/docs/src/components/app/settings/PerksOptions.vue
+++ b/packages/docs/src/components/app/settings/PerksOptions.vue
@@ -1,61 +1,44 @@
 <template>
-  <alert
+  <Alert
     v-if="!auth.isSubscriber"
     type="success"
   >
     {{ t('dashboard.perks.alert') }}
 
-    <app-link :href="rpath('/user/subscriptions/')">$2.99 per month</app-link>
+    <AppLink :href="rpath('/user/subscriptions/')">$2.99 per month</AppLink>
   </alert>
 
-  <settings-header
-    title="dashboard.perks.experience"
+  <AppSettingsSettingsHeader
     text="dashboard.perks.experience-message"
+    title="dashboard.perks.experience"
   />
 
-  <ad-option />
+  <AppSettingsOptionsAdOption />
 
-  <pin-option />
+  <AppSettingsOptionsPinOption />
 
   <v-divider class="mt-4 mb-3" />
 
-  <settings-header
-    title="dashboard.perks.avatar"
+  <AppSettingsSettingsHeader
     text="dashboard.perks.avatar-message"
+    title="dashboard.perks.avatar"
   />
 
-  <avatar-option />
+  <AppSettingsOptionsAvatarOption />
 
   <v-divider class="mt-4 mb-3" />
 
-  <settings-header
-    title="dashboard.perks.layout"
+  <AppSettingsSettingsHeader
     text="dashboard.perks.layout-message"
+    title="dashboard.perks.layout"
   />
 
-  <quickbar-option />
+  <AppSettingsOptionsQuickbarOption />
 
-  <rail-drawer-option />
+  <AppSettingsOptionsRailDrawerOption />
 </template>
 
 <script setup lang="ts">
-  // Components
-  import AdOption from '@/components/app/settings/options/AdOption.vue'
-  import AvatarOption from '@/components/app/settings/options/AvatarOption.vue'
-  import PinOption from '@/components/app/settings/options/PinOption.vue'
-  import QuickbarOption from '@/components/app/settings/options/QuickbarOption.vue'
-  import RailDrawerOption from '@/components/app/settings/options/RailDrawerOption.vue'
-  import SettingsHeader from '@/components/app/settings/SettingsHeader.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
-  // Stores
-  import { useAuthStore } from '@vuetify/one'
-
   const auth = useAuthStore()
   const { t } = useI18n()
 </script>
diff --git a/packages/docs/src/components/app/settings/SettingsHeader.vue b/packages/docs/src/components/app/settings/SettingsHeader.vue
index 0cf0f793a12..eea01e80774 100644
--- a/packages/docs/src/components/app/settings/SettingsHeader.vue
+++ b/packages/docs/src/components/app/settings/SettingsHeader.vue
@@ -7,9 +7,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   defineProps({
     title: {
       type: String,
diff --git a/packages/docs/src/components/app/settings/options/AdOption.vue b/packages/docs/src/components/app/settings/options/AdOption.vue
index 7d58277f062..8bd72e7eccc 100644
--- a/packages/docs/src/components/app/settings/options/AdOption.vue
+++ b/packages/docs/src/components/app/settings/options/AdOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.disableAds"
       :disabled="!auth.isSubscriber"
       :label="t('dashboard.perks.disable-ads')"
@@ -17,12 +17,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const auth = useAuthStore()
   const user = useUserStore()
diff --git a/packages/docs/src/components/app/settings/options/ApiOption.vue b/packages/docs/src/components/app/settings/options/ApiOption.vue
index e1d220bb5c4..3a5e9f92f09 100644
--- a/packages/docs/src/components/app/settings/options/ApiOption.vue
+++ b/packages/docs/src/components/app/settings/options/ApiOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.api"
       :label="t('enable-inline-api')"
       :messages="t('enable-inline-api-message')"
@@ -17,10 +17,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const user = useUserStore()
 </script>
diff --git a/packages/docs/src/components/app/settings/options/AvatarOption.vue b/packages/docs/src/components/app/settings/options/AvatarOption.vue
index 0feb5603c1e..0192a918ef3 100644
--- a/packages/docs/src/components/app/settings/options/AvatarOption.vue
+++ b/packages/docs/src/components/app/settings/options/AvatarOption.vue
@@ -32,12 +32,12 @@
               <v-badge :model-value="user.avatar === avatar">
                 <v-avatar
                   v-bind="hoverProps"
+                  :class="{ 'cursor-pointer': auth.isSubscriber }"
                   :style="auth.isSubscriber ? {} : {
                     filter: isHovering ? 'grayscale(0%)' : 'grayscale(100%)',
                     opacity: isHovering ? '1' : '.12',
                   }"
                   size="56"
-                  :class="{ 'cursor-pointer': auth.isSubscriber }"
                   @click="onClick(avatar)"
                 >
                   <v-img :src="avatar">
@@ -65,9 +65,6 @@
 </template>
 
 <script setup>
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
   const auth = useAuthStore()
   const user = useUserStore()
 
diff --git a/packages/docs/src/components/app/settings/options/BannerOption.vue b/packages/docs/src/components/app/settings/options/BannerOption.vue
index bcf9e2d7068..2883fce5a30 100644
--- a/packages/docs/src/components/app/settings/options/BannerOption.vue
+++ b/packages/docs/src/components/app/settings/options/BannerOption.vue
@@ -7,9 +7,9 @@
     }"
   >
     <settings-switch
-      :model-value="true"
       :label="t('enable-banners')"
       :messages="t('enable-banners-message')"
+      :model-value="true"
       color="disabled"
       readonly
     >
@@ -18,8 +18,8 @@
           :color="isDisabled ? undefined : 'primary'"
           :disabled="isDisabled"
           :text="t('reset')"
-          variant="outlined"
           size="small"
+          variant="outlined"
           @click="onResetNotifications"
         />
       </template>
@@ -28,15 +28,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const { t } = useI18n()
   const user = useUserStore()
 
diff --git a/packages/docs/src/components/app/settings/options/CodeOption.vue b/packages/docs/src/components/app/settings/options/CodeOption.vue
index ade6e846392..184ebb4b8d5 100644
--- a/packages/docs/src/components/app/settings/options/CodeOption.vue
+++ b/packages/docs/src/components/app/settings/options/CodeOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.composition"
       :label="t('enable-composition')"
       :messages="t('enable-composition-message')"
@@ -17,12 +17,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Composables
-  import { useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const user = useUserStore()
 </script>
diff --git a/packages/docs/src/components/app/settings/options/NotificationsOption.vue b/packages/docs/src/components/app/settings/options/NotificationsOption.vue
index 3a73e5d7db8..142439dab8d 100644
--- a/packages/docs/src/components/app/settings/options/NotificationsOption.vue
+++ b/packages/docs/src/components/app/settings/options/NotificationsOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.notifications.show"
       :label="t('enable-notifications')"
       :messages="t('enable-notifications-message')"
@@ -21,20 +21,11 @@
           @click="onResetNotifications"
         />
       </template>
-    </settings-switch>
+    </SettingsSwitch>
   </v-defaults-provider>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const { t } = useI18n()
   const user = useUserStore()
 
diff --git a/packages/docs/src/components/app/settings/options/PinOption.vue b/packages/docs/src/components/app/settings/options/PinOption.vue
index 56367d046b2..b8607721126 100644
--- a/packages/docs/src/components/app/settings/options/PinOption.vue
+++ b/packages/docs/src/components/app/settings/options/PinOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.pins"
       :disabled="!auth.isSubscriber"
       :messages="t('dashboard.perks.enable-pins-message')"
@@ -22,17 +22,11 @@
           variant="outlined"
         />
       </template>
-    </settings-switch>
+    </SettingsSwitch>
   </v-defaults-provider>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const auth = useAuthStore()
   const user = useUserStore()
diff --git a/packages/docs/src/components/app/settings/options/QuickbarOption.vue b/packages/docs/src/components/app/settings/options/QuickbarOption.vue
index 3ba3839c030..f5c804210d0 100644
--- a/packages/docs/src/components/app/settings/options/QuickbarOption.vue
+++ b/packages/docs/src/components/app/settings/options/QuickbarOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.quickbar"
       :disabled="!auth.isSubscriber"
       :label="t('dashboard.perks.disable-quickbar')"
@@ -17,12 +17,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const auth = useAuthStore()
   const user = useUserStore()
diff --git a/packages/docs/src/components/app/settings/options/RailDrawerOption.vue b/packages/docs/src/components/app/settings/options/RailDrawerOption.vue
index 64a3b709461..eb05211da62 100644
--- a/packages/docs/src/components/app/settings/options/RailDrawerOption.vue
+++ b/packages/docs/src/components/app/settings/options/RailDrawerOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.railDrawer"
       :disabled="!auth.isSubscriber"
       :label="t('dashboard.perks.rail-drawer')"
@@ -17,12 +17,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const auth = useAuthStore()
   const user = useUserStore()
diff --git a/packages/docs/src/components/app/settings/options/SlashSearchOption.vue b/packages/docs/src/components/app/settings/options/SlashSearchOption.vue
index 413d6083b6c..786c299f400 100644
--- a/packages/docs/src/components/app/settings/options/SlashSearchOption.vue
+++ b/packages/docs/src/components/app/settings/options/SlashSearchOption.vue
@@ -6,7 +6,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.slashSearch"
       :label="t('slash-search')"
       :messages="t('slash-search-message')"
@@ -15,12 +15,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
   const { t } = useI18n()
   const user = useUserStore()
 </script>
diff --git a/packages/docs/src/components/app/settings/options/SyncOption.vue b/packages/docs/src/components/app/settings/options/SyncOption.vue
deleted file mode 100644
index ea8d360002c..00000000000
--- a/packages/docs/src/components/app/settings/options/SyncOption.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <v-defaults-provider
-    v-if="auth.user"
-    :defaults="{
-      VIcon: {
-        color: user.syncSettings ? 'primary' : 'disabled'
-      }
-    }"
-  >
-    <settings-switch
-      v-model="user.syncSettings"
-      :label="t('sync-settings')"
-      :messages="t('sync-settings-message')"
-    />
-  </v-defaults-provider>
-</template>
-
-<script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
-  const { t } = useI18n()
-  const user = useUserStore()
-  const auth = useAuthStore()
-</script>
diff --git a/packages/docs/src/components/app/settings/options/ThemeOption.vue b/packages/docs/src/components/app/settings/options/ThemeOption.vue
index 1bd189e593e..3ab70509ed3 100644
--- a/packages/docs/src/components/app/settings/options/ThemeOption.vue
+++ b/packages/docs/src/components/app/settings/options/ThemeOption.vue
@@ -3,8 +3,8 @@
     v-model="user.theme"
     class="mb-2"
     color="primary"
-    hide-details
     true-icon="mdi-check-circle-outline"
+    hide-details
   >
     <v-radio
       v-for="(item, i) in items"
@@ -27,7 +27,7 @@
       }
     }"
   >
-    <settings-switch
+    <SettingsSwitch
       v-model="user.mixedTheme"
       :label="t('dark-code')"
       :messages="t('dark-code-message')"
@@ -36,11 +36,6 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useUserStore } from '@vuetify/one'
-  import { useI18n } from 'vue-i18n'
-  import { useTheme } from 'vuetify'
-
   const { t } = useI18n()
   const theme = useTheme()
   const user = useUserStore()
diff --git a/packages/docs/src/components/components/ListItem.vue b/packages/docs/src/components/components/ListItem.vue
index b211e5a8b63..87290ca2c93 100644
--- a/packages/docs/src/components/components/ListItem.vue
+++ b/packages/docs/src/components/components/ListItem.vue
@@ -1,8 +1,8 @@
 <template>
   <v-col
     cols="12"
-    md="6"
     lg="4"
+    md="6"
   >
     <v-card
       :image="image"
@@ -17,12 +17,12 @@
             v-if="labs"
             :to="rpath('/labs/introduction/')"
             color="success"
-            label
             prepend-icon="mdi-beaker-outline"
             rounded="bs-0 te-0"
             size="small"
             text="Labs Component"
             variant="flat"
+            label
             @click.stop
           />
         </v-img>
@@ -38,10 +38,6 @@
 </template>
 
 <script setup lang="ts">
-  // Utilities
-  import { computed, shallowRef } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const props = defineProps({
     name: String,
     labs: Boolean,
diff --git a/packages/docs/src/components/doc/Contribute.vue b/packages/docs/src/components/doc/Contribute.vue
index c87219c915b..a49c6658aab 100644
--- a/packages/docs/src/components/doc/Contribute.vue
+++ b/packages/docs/src/components/doc/Contribute.vue
@@ -3,21 +3,13 @@
     <span class="font-weight-bold me-1 text-medium-emphasis">
       {{ t('edit-this-page') }}
     </span>
-    <app-link :href="href">
+    <AppLink :href="href">
       {{ t('github') }}
-    </app-link>
+    </AppLink>
   </div>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { getBranch } from '@/util/helpers'
-
   const { t } = useI18n()
   const route = useRoute()
 
diff --git a/packages/docs/src/components/doc/Explorer.vue b/packages/docs/src/components/doc/Explorer.vue
index 553402baef2..639842a329e 100644
--- a/packages/docs/src/components/doc/Explorer.vue
+++ b/packages/docs/src/components/doc/Explorer.vue
@@ -3,37 +3,37 @@
     <v-autocomplete
       v-model="model"
       :items="components"
-      autofocus
-      auto-select-first
       base-color="disabled"
-      chips
       class="mb-2"
+      placeholder="Search Vuetify API"
+      prepend-inner-icon="mdi-database-search-outline"
+      variant="outlined"
+      auto-select-first
+      autofocus
+      chips
       clearable
       hide-details
       item-props
       persistent-clear
-      placeholder="Search Vuetify API"
-      prepend-inner-icon="mdi-database-search-outline"
-      variant="outlined"
     >
       <template #chip="{ props, item }">
         <v-chip
           v-bind="props"
           :prepend-icon="item.props.prependIcon"
           color="primary"
-          label
           variant="flat"
+          label
         />
       </template>
     </v-autocomplete>
 
     <template v-if="model">
-      <api-search ref="search" />
+      <ApiSearch ref="search" />
 
       <template v-for="(section, i) in sections" :key="i">
-        <api-section
-          :section="section"
+        <ApiSection
           :name="model"
+          :section="section"
           show-headline
         />
       </template>
@@ -56,11 +56,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { camelize, nextTick, ref, shallowRef, watch } from 'vue'
-  import { useRoute, useRouter } from 'vue-router'
-  import { kebabCase } from 'lodash-es'
-
   const route = useRoute()
   const router = useRouter()
 
diff --git a/packages/docs/src/components/doc/IconList.vue b/packages/docs/src/components/doc/IconList.vue
index 4559c340ff0..10b1b22b1f8 100644
--- a/packages/docs/src/components/doc/IconList.vue
+++ b/packages/docs/src/components/doc/IconList.vue
@@ -2,13 +2,13 @@
   <v-autocomplete
     v-model="selection"
     v-model:search="search"
-    :items="filteredIcons"
     :item-props="itemProps"
+    :items="filteredIcons"
     :placeholder="t('search.icons')"
     item-title="name"
     item-value="name"
-    no-filter
     variant="outlined"
+    no-filter
   >
     <template #prepend-inner>
       <v-expand-x-transition>
@@ -44,13 +44,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { camelize, computed, shallowRef, watch } from 'vue'
-  import { distance } from '@/util/helpers'
-
   // Data
   import icons from '@mdi/svg/meta.json'
   import * as paths from '@mdi/js'
diff --git a/packages/docs/src/components/doc/IconTable.vue b/packages/docs/src/components/doc/IconTable.vue
index 2c70a835ffe..0aa59c83f58 100644
--- a/packages/docs/src/components/doc/IconTable.vue
+++ b/packages/docs/src/components/doc/IconTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-table>
+  <AppTable>
     <thead>
       <tr>
         <th>Alias</th>
@@ -23,7 +23,7 @@
         </td>
       </tr>
     </tbody>
-  </app-table>
+  </AppTable>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/components/doc/MadeWithVueAttribution.vue b/packages/docs/src/components/doc/MadeWithVueAttribution.vue
index c7367b0628a..3a0bbf41037 100644
--- a/packages/docs/src/components/doc/MadeWithVueAttribution.vue
+++ b/packages/docs/src/components/doc/MadeWithVueAttribution.vue
@@ -2,15 +2,10 @@
   <div class="d-flex align-center justify-center px-4">
     <small class="font-weight-bold text-no-wrap">Powered By</small>
 
-    <sponsor-card
+    <SponsorCard
       min-height="64"
       slug="made-with-vuejs"
       width="180"
     />
   </div>
 </template>
-
-<script setup>
-  // Components
-  import SponsorCard from '@/components/sponsor/Card.vue'
-</script>
diff --git a/packages/docs/src/components/doc/MadeWithVuetify.vue b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
similarity index 93%
rename from packages/docs/src/components/doc/MadeWithVuetify.vue
rename to packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
index 8fa61b4e5bc..be75beb1399 100644
--- a/packages/docs/src/components/doc/MadeWithVuetify.vue
+++ b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
@@ -20,8 +20,8 @@
     <v-data-iterator
       v-else
       :items="items"
-      :page="page"
       :items-per-page="itemsPerPage"
+      :page="page"
     >
       <template #default="{ items: _items }">
         <v-row style="min-height: 750px;">
@@ -33,19 +33,19 @@
           >
             <a
               :href="project.raw.url"
-              target="_blank"
-              rel="noopener noreferrer"
               class="d-block text-decoration-none"
+              rel="noopener noreferrer"
               style="min-height: 205px;"
+              target="_blank"
             >
-              <app-figure
-                class="border"
+              <AppFigure
                 :name="project.raw.title"
                 :src="project.raw.image"
                 :title="project.raw.title"
-                eager
+                class="border"
                 height="180"
                 min-height="180"
+                eager
               />
             </a>
           </v-col>
@@ -67,12 +67,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useMadeWithVuetifyStore } from '@/store/made-with-vuetify'
-
-  // Utilities
-  import { computed, ref } from 'vue'
-
   defineProps({
     itemsPerPage: {
       type: [Number, String],
diff --git a/packages/docs/src/components/doc/MadeWithVuetifyLink.vue b/packages/docs/src/components/doc/MadeWithVuetifyLink.vue
index 84c9357a85f..8f6af981d5b 100644
--- a/packages/docs/src/components/doc/MadeWithVuetifyLink.vue
+++ b/packages/docs/src/components/doc/MadeWithVuetifyLink.vue
@@ -15,14 +15,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   defineProps({
     size: {
       type: String,
diff --git a/packages/docs/src/components/doc/ReadyForMore.vue b/packages/docs/src/components/doc/ReadyForMore.vue
index 77a3d1f3716..e1788c7b11b 100644
--- a/packages/docs/src/components/doc/ReadyForMore.vue
+++ b/packages/docs/src/components/doc/ReadyForMore.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="mb-3">
-    <app-heading
+    <AppHeading
       :content="t('ready')"
-      level="2"
       class="mb-2"
+      level="2"
     />
 
     <!-- https://vue-i18n.intlify.dev/guide/advanced/component.html#scope-resolving -->
@@ -13,20 +13,14 @@
       tag="div"
     >
       <template #team>
-        <app-link :href="rpath('/about/meet-the-team/')">
+        <AppLink :href="rpath('/about/meet-the-team/')">
           {{ t('team') }}
-        </app-link>
+        </AppLink>
       </template>
     </i18n-t>
   </div>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   const { t } = useI18n()
 </script>
diff --git a/packages/docs/src/components/doc/RelatedPage.vue b/packages/docs/src/components/doc/RelatedPage.vue
index 102a4c5702f..1e8a52d1cc9 100644
--- a/packages/docs/src/components/doc/RelatedPage.vue
+++ b/packages/docs/src/components/doc/RelatedPage.vue
@@ -4,8 +4,8 @@
     :subtitle="subtitle"
     :title="item.meta.nav ?? item.meta.title"
     :to="item.path"
-    border
     lines="two"
+    border
     rounded
   >
     <template #prepend>
@@ -20,17 +20,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useRouter } from 'vue-router'
-
-  // Store
-  import { useAppStore } from '@/store/app'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-  import { upperFirst } from 'lodash-es'
-
   const appStore = useAppStore()
   const props = defineProps({ to: String })
   const routes = useRouter().getRoutes()
diff --git a/packages/docs/src/components/doc/RelatedPages.vue b/packages/docs/src/components/doc/RelatedPages.vue
index 8ac5dbac050..f48ac71df57 100644
--- a/packages/docs/src/components/doc/RelatedPages.vue
+++ b/packages/docs/src/components/doc/RelatedPages.vue
@@ -7,20 +7,14 @@
       v-for="(to, i) in related"
       :key="i"
       cols="12"
-      xs="6"
       sm="4"
+      xs="6"
     >
-      <related-page :to="to" />
+      <DocRelatedPage :to="to" />
     </v-col>
   </v-row>
 </template>
 
 <script setup>
-  // Components
-  import RelatedPage from '@/components/doc/RelatedPage.vue'
-
-  // Composables
-  import { useRoute } from 'vue-router'
-
   const related = useRoute().meta.related
 </script>
diff --git a/packages/docs/src/components/doc/Releases.vue b/packages/docs/src/components/doc/Releases.vue
index 177b228f86f..3093c9d9809 100644
--- a/packages/docs/src/components/doc/Releases.vue
+++ b/packages/docs/src/components/doc/Releases.vue
@@ -7,13 +7,13 @@
       :items="releases"
       :menu-props="menuProps"
       :placeholder="tag"
-      hide-details
-      hide-no-data
       density="comfortable"
       item-title="name"
       label="Select Release Version"
-      persistent-placeholder
       prepend-inner-icon="mdi-text-box-search-outline"
+      hide-details
+      hide-no-data
+      persistent-placeholder
       return-object
     >
       <template #selection>
@@ -68,8 +68,8 @@
     </v-autocomplete>
 
     <v-card
-      variant="flat"
       rounded="t-0 b"
+      variant="flat"
     >
       <div
         v-if="model?.author"
@@ -88,13 +88,13 @@
         </div>
 
         <div class="d-flex align-center">
-          <app-tooltip-btn
+          <AppTooltipBtn
             v-for="(tooltip, i) in tooltips"
             :key="i"
+            :color="tooltip.color ?? 'text-high-emphasis'"
             :href="tooltip.href"
             :icon="tooltip.icon"
             :path="tooltip.path"
-            :color="tooltip.color ?? 'text-high-emphasis'"
             :target="tooltip.href ? '_blank' : undefined"
             class="text-white ms-2"
             density="comfortable"
@@ -109,7 +109,7 @@
         <v-divider />
 
         <div class="px-4 pt-4">
-          <app-markdown
+          <AppMarkdown
             :content="model.body"
             class="releases"
           />
@@ -121,37 +121,37 @@
           <div class="px-4 pb-4">
             <h2 class="text-h6 font-weight-bold">Assets</h2>
 
-            <app-sheet>
+            <AppSheet>
               <v-list-item
                 :href="model.zipball_url"
-                target="_blank"
+                append-icon="mdi-download-box-outline"
                 prepend-icon="mdi-folder-zip-outline"
+                target="_blank"
                 title="Source code (zip)"
-                slim
                 nav
-                append-icon="mdi-download-box-outline"
+                slim
               />
 
               <v-divider />
 
               <v-list-item
                 :href="model.tarball_url"
-                target="_blank"
+                append-icon="mdi-download-box-outline"
                 prepend-icon="mdi-folder-zip-outline"
+                target="_blank"
                 title="Source code (tar.gz)"
-                slim
                 nav
-                append-icon="mdi-download-box-outline"
+                slim
               />
-            </app-sheet>
+            </AppSheet>
           </div>
         </template>
       </template>
 
       <v-skeleton-loader
         v-if="!model && store.isLoading"
-        type="heading, article, heading, subtitle, text, sentences"
         class="pa-4"
+        type="heading, article, heading, subtitle, text, sentences"
       />
     </v-card>
   </div>
@@ -159,16 +159,10 @@
 
 <script setup lang="ts">
   // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useDate, useDisplay, version } from 'vuetify'
-  import { useRoute, useRouter } from 'vue-router'
-
-  // Stores
-  import { Release, useReleasesStore } from '@/store/releases'
+  import { version } from 'vuetify'
 
-  // Utilities
-  import { computed, onBeforeMount, ref, shallowRef, watch } from 'vue'
-  import { wait } from '@/util/helpers'
+  // Types
+  import type { Release } from '@/stores/releases'
 
   const reactions = {
     '+1': '👍',
diff --git a/packages/docs/src/components/doc/Tabs.vue b/packages/docs/src/components/doc/Tabs.vue
index cbc36946ead..6cab572031a 100644
--- a/packages/docs/src/components/doc/Tabs.vue
+++ b/packages/docs/src/components/doc/Tabs.vue
@@ -14,7 +14,5 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
-
   const model = ref()
 </script>
diff --git a/packages/docs/src/components/doc/ThemeCard.vue b/packages/docs/src/components/doc/ThemeCard.vue
index b5024924160..005d2b146bd 100644
--- a/packages/docs/src/components/doc/ThemeCard.vue
+++ b/packages/docs/src/components/doc/ThemeCard.vue
@@ -5,14 +5,14 @@
     rel="noopener"
     target="_blank"
   >
-    <app-figure
+    <AppFigure
       :alt="product.title"
       :name="product.title"
       :src="product.src"
-      cover
       height="230"
       max-height="230"
       min-height="230"
+      cover
     >
       <figcaption class="d-flex text-subtitle-2 align-center text-capitalize mt-3">
         <span v-text="product.title" />
@@ -21,9 +21,9 @@
           v-if="product.price === 0"
           class="text-uppercase px-1 ms-2"
           color="primary"
-          label
           size="x-small"
           text="Free"
+          label
         />
 
         <span
@@ -32,7 +32,7 @@
           v-text="`$${product.price}`"
         />
       </figcaption>
-    </app-figure>
+    </AppFigure>
   </a>
 </template>
 
diff --git a/packages/docs/src/components/doc/ThemeVendor.vue b/packages/docs/src/components/doc/ThemeVendor.vue
index e121e5123bf..983939bc8b8 100644
--- a/packages/docs/src/components/doc/ThemeVendor.vue
+++ b/packages/docs/src/components/doc/ThemeVendor.vue
@@ -6,38 +6,26 @@
       cols="12"
       sm="6"
     >
-      <ThemeCard :product="product" />
+      <DocThemeCard :product="product" />
     </v-col>
 
     <v-col class="text-center mb-8" cols="12">
-      <app-btn
+      <AppBtn
         :href="vendor.moreUrl"
         append-icon="mdi-open-in-new"
         color="primary"
+        rel="noopener noreferrer"
         size="large"
         target="_blank"
-        rel="noopener noreferrer"
         variant="outlined"
       >
         {{ t('see-more-themes-from', { vendor: vendor.name }) }}
-      </app-btn>
+      </AppBtn>
     </v-col>
   </v-row>
 </template>
 
 <script setup>
-  // Components
-  import ThemeCard from './ThemeCard.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-
-  // Stores
-  import { useShopifyStore } from '@/store/shopify'
-
   const { t } = useI18n()
   const store = useShopifyStore()
 
diff --git a/packages/docs/src/components/doc/UpNext.vue b/packages/docs/src/components/doc/UpNext.vue
index c92451dfa01..9df28a7f0eb 100644
--- a/packages/docs/src/components/doc/UpNext.vue
+++ b/packages/docs/src/components/doc/UpNext.vue
@@ -42,15 +42,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useRoute, useRouter } from 'vue-router'
-  import { useRtl } from 'vuetify'
-  import { useAppStore } from '@/store/app'
-
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const { pages } = useAppStore()
   const route = useRoute()
   const path = computed(() => route.path.split('/').slice(2, -1))
diff --git a/packages/docs/src/components/doc/VueJobs.vue b/packages/docs/src/components/doc/VueJobs.vue
index a3697f3ef90..4c8b29bff54 100644
--- a/packages/docs/src/components/doc/VueJobs.vue
+++ b/packages/docs/src/components/doc/VueJobs.vue
@@ -2,7 +2,7 @@
   <v-row>
     <v-col cols="12">
       <div class="d-flex">
-        <app-text-field
+        <AppTextField
           v-model="search"
           :append-inner-icon="view ? 'mdi-view-grid-outline' : 'mdi-view-list-outline'"
           :placeholder="placeholder"
@@ -14,17 +14,17 @@
     <v-col
       v-for="job in items"
       :key="job.id"
-      cols="12"
       :md="view ? 6 : undefined"
+      cols="12"
     >
       <v-card
         :href="job.url"
-        border
         class="transition-swing"
         max-height="225"
         rel="sponsored"
         target="_blank"
         variant="flat"
+        border
         @click="onClick(job)"
       >
         <v-list-item
@@ -33,8 +33,8 @@
         >
           <template #prepend>
             <v-avatar
-              :color="!job.avatar ? 'primary' : undefined"
               :class="!job.avatar && 'pt-1'"
+              :color="!job.avatar ? 'primary' : undefined"
               :image="job.avatar"
               icon="$vuetify"
             />
@@ -54,8 +54,8 @@
 
           <template #append>
             <v-btn
-              color="success"
               class="ms-6"
+              color="success"
               size="small"
               style="pointer-events: none;"
               variant="flat"
@@ -64,15 +64,15 @@
 
               <v-icon
                 icon="mdi-open-in-new"
-                end
                 size="small"
+                end
               />
             </v-btn>
           </template>
         </v-list-item>
 
         <v-card-text class="text-medium-emphasis py-0">
-          <app-markdown :content="job.description" />
+          <AppMarkdown :content="job.description" />
         </v-card-text>
 
         <div class="text-end text-caption text-disabled mb-1 me-2">
@@ -84,14 +84,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-  import { useJobsStore } from '@/store/jobs'
-
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { useGtag } from 'vue-gtag-next'
-
   const { event } = useGtag()
   const { jobs } = useJobsStore()
   const { t } = useI18n()
diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue
index 89ba3d721e5..ff0ae47ffe9 100644
--- a/packages/docs/src/components/examples/Example.vue
+++ b/packages/docs/src/components/examples/Example.vue
@@ -5,7 +5,7 @@
     }"
     scoped
   >
-    <app-sheet class="mb-9">
+    <AppSheet class="mb-9">
       <v-lazy
         v-if="!preview"
         v-model="hasRendered"
@@ -14,8 +14,8 @@
         <v-toolbar
           border="b"
           class="px-1"
-          flat
           height="44"
+          flat
         >
           <v-fade-transition hide-on-leave>
             <div v-if="showCode">
@@ -24,8 +24,8 @@
                 :key="section.name"
                 :active="template === i"
                 class="ma-1 text-none"
-                variant="text"
                 size="small"
+                variant="text"
                 @click="template = i"
               >
                 <span :class="template === i ? 'text-high-emphasis' : 'text-medium-emphasis'">
@@ -78,7 +78,7 @@
               :eager="i === 0 || isEager"
             >
               <v-theme-provider :theme="theme">
-                <app-markup
+                <AppMarkup
                   :code="section.content"
                   :rounded="false"
                 />
@@ -96,27 +96,16 @@
           <component :is="ExampleComponent" v-if="isLoaded" />
         </v-theme-provider>
       </div>
-    </app-sheet>
+    </AppSheet>
   </v-defaults-provider>
 </template>
 
 <script setup lang="ts">
   // Components
-  import ExampleMissing from './ExampleMissing.vue'
-
-  // Composables
-  import { useDisplay, useTheme } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-  import { usePlayground } from '@/composables/playground'
-
-  // Stores
-  import { useUserStore } from '@vuetify/one'
+  import ExampleMissing from '@/components/examples/ExampleMissing.vue'
 
   // Utilities
-  import { computed, mergeProps, onMounted, ref, shallowRef, watch } from 'vue'
-  import { getBranch, wait } from '@/util/helpers'
   import { getExample } from 'virtual:examples'
-  import { upperFirst } from 'lodash-es'
 
   const { xs } = useDisplay()
   const { t } = useI18n()
diff --git a/packages/docs/src/components/examples/ExampleMissing.vue b/packages/docs/src/components/examples/ExampleMissing.vue
index 64d2f69cf5b..3dd00e018e3 100644
--- a/packages/docs/src/components/examples/ExampleMissing.vue
+++ b/packages/docs/src/components/examples/ExampleMissing.vue
@@ -1,13 +1,11 @@
 <template>
-  <app-markdown
+  <AppMarkdown
     class="v-example-missing text-center"
     v-text="t('missing', { file })"
   />
 </template>
 
 <script setup>
-  import { useI18n } from 'vue-i18n'
-
   defineProps({
     file: {
       type: String,
diff --git a/packages/docs/src/components/examples/Usage.vue b/packages/docs/src/components/examples/Usage.vue
index e8697e7abdd..c5934b30184 100644
--- a/packages/docs/src/components/examples/Usage.vue
+++ b/packages/docs/src/components/examples/Usage.vue
@@ -1,7 +1,7 @@
 <template>
-  <app-sheet class="mb-4">
-    <vue-file :file="`${name}/usage`" />
-  </app-sheet>
+  <AppSheet class="mb-4">
+    <ExamplesVueFile :file="`${name}/usage`" />
+  </AppSheet>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/components/examples/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue
index 2825e515b4a..cd2a6d6debc 100644
--- a/packages/docs/src/components/examples/UsageExample.vue
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -3,8 +3,8 @@
     <v-toolbar
       border="b"
       class="ps-1"
-      flat
       height="44"
+      flat
     >
       <v-slide-group
         v-model="model"
@@ -48,9 +48,9 @@
       <v-tooltip location="bottom">
         <template #activator="{ props: activatorProps }">
           <v-btn
+            :href="playgroundLink"
             class="me-1 text-medium-emphasis"
             density="comfortable"
-            :href="playgroundLink"
             icon="$vuetify-play"
             target="_blank"
             v-bind="activatorProps"
@@ -63,9 +63,9 @@
       <v-tooltip location="bottom">
         <template #activator="{ props: activatorProps }">
           <v-btn
+            :icon="!show ? 'mdi-code-tags' : 'mdi-chevron-up'"
             class="me-1 text-medium-emphasis"
             density="comfortable"
-            :icon="!show ? 'mdi-code-tags' : 'mdi-chevron-up'"
             v-bind="activatorProps"
             @click="show = !show"
           />
@@ -93,9 +93,9 @@
         v-model="tune"
         location="right"
         name="tune"
+        width="250"
         permanent
         touchless
-        width="250"
       >
         <v-list>
           <div class="px-4 usage-example pt-2">
@@ -118,11 +118,11 @@
     <v-expand-transition>
       <div v-if="show">
         <div class="pa-2">
-          <app-markup :code="code" />
+          <AppMarkup :code="code" />
         </div>
 
         <div v-if="script" class="pa-2 pt-0">
-          <app-markup :code="script" language="js" />
+          <AppMarkup :code="script" language="js" />
         </div>
       </div>
     </v-expand-transition>
@@ -130,15 +130,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useDisplay } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-  import { usePlayground } from '@/composables/playground'
-
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { upperFirst } from 'lodash-es'
-
   const props = defineProps({
     name: String,
     code: String,
diff --git a/packages/docs/src/components/examples/VueFile.vue b/packages/docs/src/components/examples/VueFile.vue
index e8efcb3cc13..a917aa5ac26 100644
--- a/packages/docs/src/components/examples/VueFile.vue
+++ b/packages/docs/src/components/examples/VueFile.vue
@@ -8,7 +8,6 @@
 <script setup>
   // Utilities
   import { getExample } from 'virtual:examples'
-  import { onBeforeMount, shallowRef } from 'vue'
 
   const props = defineProps({
     file: {
diff --git a/packages/docs/src/components/features/BreakpointsTable.vue b/packages/docs/src/components/features/BreakpointsTable.vue
index f3da55f47cc..43dbc5852c1 100644
--- a/packages/docs/src/components/features/BreakpointsTable.vue
+++ b/packages/docs/src/components/features/BreakpointsTable.vue
@@ -1,6 +1,6 @@
 <template>
-  <app-table>
-    <caption class="pa-4">{{ t('breakpoints-table.caption') }}</caption>
+  <AppTable>
+    <AppCaption class="pa-4">{{ t('breakpoints-table.caption') }}</AppCaption>
 
     <thead>
       <tr class="text-start">
@@ -59,13 +59,10 @@
         </td>
       </tr>
     </tfoot>
-  </app-table>
+  </AppTable>
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   const breakpoints = [
     {
       icon: 'mdi-cellphone',
diff --git a/packages/docs/src/components/features/ColorPalette.vue b/packages/docs/src/components/features/ColorPalette.vue
index 4ac1c37a22f..de0b9caf35f 100644
--- a/packages/docs/src/components/features/ColorPalette.vue
+++ b/packages/docs/src/components/features/ColorPalette.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="material-colors" class="mb-4">
-    <app-text-field
+    <AppTextField
       v-model="search"
       class="mb-4"
     />
@@ -13,8 +13,8 @@
           v-for="(color, key) in computedColors"
           :key="key"
           cols="12"
-          md="6"
           lg="4"
+          md="6"
         >
           <v-card
             :color="key"
@@ -39,15 +39,15 @@
             <v-card-text>
               <v-row>
                 <v-col
-                  cols="7"
                   class="text-caption"
+                  cols="7"
                 >
                   {{ convertToClass(key, key2) }}
                 </v-col>
 
                 <v-col
-                  cols="5"
                   class="text-right"
+                  cols="5"
                 >
                   <span
                     v-if="subColor !== 'transparent'"
@@ -63,54 +63,33 @@
   </section>
 </template>
 
-<script>
-  // Utilities
-  import kebabCase from 'lodash/kebabCase'
+<script setup>
   import colors from 'vuetify/util/colors'
 
-  export default {
-    name: 'ColorPalette',
-
-    data: () => ({
-      colors,
-      search: '',
-    }),
-
-    computed: {
-      computedColors () {
-        const colors = {}
-        const search = this.search.toLowerCase()
+  const search = shallowRef('')
 
-        Object.keys(this.colors).forEach(key => {
-          const kebabKey = kebabCase(key).toLowerCase()
+  const computedColors = computed(() => {
+    const _colors = {}
+    const _search = search.value.toLowerCase()
 
-          if (kebabKey.indexOf(search) > -1) {
-            colors[kebabKey] = this.colors[key]
-          }
-        })
+    Object.keys(colors).forEach(key => {
+      const kebabKey = kebabCase(key).toLowerCase()
 
-        return colors
-      },
-    },
+      if (kebabKey.indexOf(_search) > -1) {
+        _colors[kebabKey] = colors[key]
+      }
+    })
 
-    methods: {
-      convertToClass (base, variant) {
-        if (variant === 'base') return base
+    return _colors
+  })
 
-        const lastChar = variant.at(-1)
+  function convertToClass (base, variant) {
+    if (variant === 'base') return base
 
-        if (isNaN(Number(lastChar))) return variant
+    const lastChar = variant.at(-1)
 
-        return `${base}-${variant.slice(0, -1)}-${lastChar}`
-      },
-      getColorClass (key) {
-        if (['white', 'transparent'].includes(key) ||
-          key.indexOf('light') > -1 ||
-          key.indexOf('accent') > -1
-        ) return 'black--text'
+    if (isNaN(Number(lastChar))) return variant
 
-        return 'white--text'
-      },
-    },
+    return `${base}-${variant.slice(0, -1)}-${lastChar}`
   }
 </script>
diff --git a/packages/docs/src/components/features/SassApi.vue b/packages/docs/src/components/features/SassApi.vue
index e966c3ef132..befc732aab4 100644
--- a/packages/docs/src/components/features/SassApi.vue
+++ b/packages/docs/src/components/features/SassApi.vue
@@ -1,31 +1,31 @@
 <template>
   <v-autocomplete
     v-model="model"
-    :items="variables"
     :custom-filter="customFilter"
-    item-props
-    auto-select-first
+    :items="variables"
     base-color="disabled"
+    placeholder="Search SASS API"
+    prepend-inner-icon="mdi-database-search-outline"
+    variant="outlined"
+    auto-select-first
     chips
     clearable
+    item-props
     multiple
     persistent-clear
-    placeholder="Search SASS API"
-    prepend-inner-icon="mdi-database-search-outline"
-    variant="outlined"
     return-object
   >
     <template #chip="{ props }">
       <v-chip
         v-bind="props"
         color="primary"
-        label
         variant="flat"
+        label
       />
     </template>
   </v-autocomplete>
 
-  <app-markup
+  <AppMarkup
     v-if="model.length > 0"
     :code="code"
     class="mb-6"
@@ -35,9 +35,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-
   const files = import.meta.glob('../../../../api-generator/dist/api/*.json')
 
   const variables = ref([])
diff --git a/packages/docs/src/components/getting-started/WireframeExamples.vue b/packages/docs/src/components/getting-started/WireframeExamples.vue
index 82531f79e7f..656c3e0caf5 100644
--- a/packages/docs/src/components/getting-started/WireframeExamples.vue
+++ b/packages/docs/src/components/getting-started/WireframeExamples.vue
@@ -4,8 +4,8 @@
       v-for="([name, wireframe], i) in wireframes"
       :key="i"
       cols="12"
-      md="6"
       lg="4"
+      md="6"
     >
       <router-link
         :to="rpath(`/wireframes/${wireframe}/`)"
@@ -13,11 +13,11 @@
         rel="nofollow noopener"
         target="_blank"
       >
-        <app-figure
+        <AppFigure
           :alt="`${name} layout`"
           :aspect-ratio="16/9"
-          :title="name"
           :src="`https://cdn.vuetifyjs.com/docs/images/wireframes/${wireframe}.svg`"
+          :title="name"
           class="border"
         />
       </router-link>
@@ -26,10 +26,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import kebabCase from 'lodash/kebabCase'
-  import { rpath } from '@/util/routes'
-
   const wireframes = [
     'Baseline',
     'Extended toolbar',
diff --git a/packages/docs/src/components/home/ActionBtns.vue b/packages/docs/src/components/home/ActionBtns.vue
index 2ec9d316537..e379c7ccdcb 100644
--- a/packages/docs/src/components/home/ActionBtns.vue
+++ b/packages/docs/src/components/home/ActionBtns.vue
@@ -19,11 +19,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { rpath } from '@/util/routes'
-  import { useDisplay } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-
   const { mdAndDown } = useDisplay()
 
   const { t } = useI18n()
diff --git a/packages/docs/src/components/home/Entry.vue b/packages/docs/src/components/home/Entry.vue
index fea7c2685aa..60b17ce3b3c 100644
--- a/packages/docs/src/components/home/Entry.vue
+++ b/packages/docs/src/components/home/Entry.vue
@@ -5,10 +5,10 @@
       justify="center"
     >
       <v-col cols="auto">
-        <home-logo size="300" />
+        <HomeLogo size="300" />
       </v-col>
 
-      <v-col cols="auto" class="text-center text-lg-start">
+      <v-col class="text-center text-lg-start" cols="auto">
         <h1 class="text-h2 font-weight-medium mb-3 ms-n1">
           Vue Component Framework
         </h1>
@@ -17,18 +17,18 @@
           Vuetify is a no design skills required Open Source UI Library with beautifully handcrafted Vue Components.
         </p>
 
-        <home-action-btns />
+        <HomeActionBtns />
 
         <br>
 
         <v-hover>
           <template #default="{ isHovering, props }">
             <v-sheet
-              border
               class="px-2 py-2 d-inline-flex align-center text-mono text-body-2 text-no-wrap"
               color="surface"
-              rounded
               width="215"
+              border
+              rounded
               v-bind="props"
             >
               <v-icon
@@ -63,13 +63,6 @@
 </template>
 
 <script setup>
-  // Components
-  import HomeLogo from '@/components/home/Logo.vue'
-  import HomeActionBtns from '@/components/home/ActionBtns.vue'
-
-  // Utilities
-  import { shallowRef } from 'vue'
-
   const isCopying = shallowRef(false)
 
   function copy () {
diff --git a/packages/docs/src/components/home/Features.vue b/packages/docs/src/components/home/Features.vue
index 5b50c5a6b17..dfda4d37c7b 100644
--- a/packages/docs/src/components/home/Features.vue
+++ b/packages/docs/src/components/home/Features.vue
@@ -13,17 +13,17 @@
             :rel="feature.href && 'noopener noreferrer'"
             :target="feature.href && '_blank'"
             :to="feature.to"
-            border
             class="text-xs-center mx-auto"
-            flat
             max-width="350"
+            border
+            flat
           >
             <v-img
               :alt="feature.title"
               :aspect-ratio="2.6"
               :src="feature.src"
-              cover
               width="100%"
+              cover
             />
             <v-card-text>
               <h3
@@ -43,9 +43,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   const features = [
     {
       text: 'When you run into a roadblock, you need assistance right away. Vuetify offers support in our massive community on Discord.',
diff --git a/packages/docs/src/components/home/Footer.vue b/packages/docs/src/components/home/Footer.vue
index 853e2875932..10256196ec9 100644
--- a/packages/docs/src/components/home/Footer.vue
+++ b/packages/docs/src/components/home/Footer.vue
@@ -10,15 +10,15 @@
           <v-img
             :src="`https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-${theme.name.value}-slim.svg`"
             class="mx-auto"
-            contain
             height="64"
             width="64"
+            contain
           />
         </v-col>
 
         <v-col
-          cols="12"
           class="pb-0"
+          cols="12"
         >
           <a
             v-for="(social, i) in socials"
@@ -83,10 +83,6 @@
 </template>
 
 <script setup>
-// Composables
-  import { useI18n } from 'vue-i18n'
-  import { useTheme } from 'vuetify'
-
   const { t } = useI18n()
   const theme = useTheme()
   const links = [
diff --git a/packages/docs/src/components/home/Logo.vue b/packages/docs/src/components/home/Logo.vue
index d72b07ba0d3..6ce261ac14c 100644
--- a/packages/docs/src/components/home/Logo.vue
+++ b/packages/docs/src/components/home/Logo.vue
@@ -10,11 +10,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useTheme } from 'vuetify'
-  // Utilities
-  import { computed } from 'vue'
-
   defineProps({
     size: String,
   })
diff --git a/packages/docs/src/components/home/SpecialSponsor.vue b/packages/docs/src/components/home/SpecialSponsor.vue
index 57229cb2a2d..e991327296a 100644
--- a/packages/docs/src/components/home/SpecialSponsor.vue
+++ b/packages/docs/src/components/home/SpecialSponsor.vue
@@ -5,7 +5,7 @@
     <div class="d-flex align-center justify-center my-1 px-4">
       <small class="font-weight-bold me-4 text-no-wrap">Special Sponsor</small>
 
-      <sponsor-card
+      <SponsorCard
         min-height="64"
         slug="teamwork"
         width="240"
@@ -17,15 +17,6 @@
 </template>
 
 <script setup>
-  // Components
-  import SponsorCard from '@/components/sponsor/Card.vue'
-
-  // Stores
-  import { useSponsorsStore } from '@/store/sponsors'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const store = useSponsorsStore()
 
   const hasSpecialSponsor = computed(() => store.byTier[-2]?.length > 0)
diff --git a/packages/docs/src/components/home/Sponsors.vue b/packages/docs/src/components/home/Sponsors.vue
index 47f60c3b4ac..76aa251d6ce 100644
--- a/packages/docs/src/components/home/Sponsors.vue
+++ b/packages/docs/src/components/home/Sponsors.vue
@@ -7,8 +7,8 @@
   >
     <v-responsive min-height="500">
       <v-row
-        dense
         justify="center"
+        dense
       >
         <v-col
           v-for="sponsor in sponsors"
@@ -16,7 +16,7 @@
           class="d-flex align-center justify-center"
           cols="auto"
         >
-          <sponsor-card
+          <SponsorCard
             :comfortable="Number(sponsor.metadata.tier) === 2"
             :compact="Number(sponsor.metadata.tier) > 2"
             :sponsor="sponsor"
@@ -30,22 +30,11 @@
     <br>
     <br>
 
-    <sponsor-link size="large" />
+    <SponsorLink size="large" />
   </v-sheet>
 </template>
 
 <script setup>
-  // Components
-  import SponsorCard from '@/components/sponsor/Card.vue'
-  import SponsorLink from '@/components/sponsor/Link.vue'
-
-  // Composables
-  import { useDisplay } from 'vuetify'
-  import { useSponsorsStore } from '@/store/sponsors'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const { smAndDown } = useDisplay()
   const sponsorStore = useSponsorsStore()
 
diff --git a/packages/docs/src/components/icons/ChevronDown.vue b/packages/docs/src/components/icons/ChevronDown.vue
index 4428a35f734..a4d29b93bef 100644
--- a/packages/docs/src/components/icons/ChevronDown.vue
+++ b/packages/docs/src/components/icons/ChevronDown.vue
@@ -1,8 +1,8 @@
 <template>
   <v-icon
     class="hidden-sm-and-down"
-    size="14"
     icon="mdi-chevron-down"
+    size="14"
   />
 </template>
 
diff --git a/packages/docs/src/components/introduction/Comparison.vue b/packages/docs/src/components/introduction/Comparison.vue
index 164e421f1b6..4050d7bdbb8 100644
--- a/packages/docs/src/components/introduction/Comparison.vue
+++ b/packages/docs/src/components/introduction/Comparison.vue
@@ -6,9 +6,9 @@
     rounded
   >
     <v-table>
-      <caption class="pa-4 text-h6">
+      <AppCaption class="pa-4 text-h6">
         {{ t('comparison.caption', { year: (new Date()).getFullYear() }) }}
-      </caption>
+      </AppCaption>
 
       <thead>
         <tr>
@@ -26,10 +26,10 @@
                 v-if="framework.src"
                 :src="framework.src"
                 class="me-2"
-                contain
                 height="24"
                 max-width="24"
                 width="24"
+                contain
               />
 
               <div v-text="framework.name" />
@@ -83,9 +83,6 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   // Types
   type Framework = {
     a11y?: boolean,
diff --git a/packages/docs/src/components/introduction/DirectSupport.vue b/packages/docs/src/components/introduction/DirectSupport.vue
index 620f0994bb9..cc2c5f44e21 100644
--- a/packages/docs/src/components/introduction/DirectSupport.vue
+++ b/packages/docs/src/components/introduction/DirectSupport.vue
@@ -4,12 +4,12 @@
       v-for="(person, index) in direct"
       :key="index"
       cols="12"
-      sm="6"
       md="5"
+      sm="6"
       xl="4"
     >
-      <app-sheet class="text-center px-10 py-8">
-        <v-avatar size="x-large" :image="person.image" />
+      <AppSheet class="text-center px-10 py-8">
+        <v-avatar :image="person.image" size="x-large" />
 
         <div class="text-h6 text-high-emphasis mb-8">
           {{ person.name }}
@@ -31,14 +31,14 @@
         <v-btn
           :href="person.link"
           append-icon="mdi-open-in-new"
-          block
           color="primary"
           target="_blank"
           variant="flat"
+          block
         >
           Book Now
         </v-btn>
-      </app-sheet>
+      </AppSheet>
     </v-col>
   </v-row>
 </template>
diff --git a/packages/docs/src/components/introduction/DiscordDeck.vue b/packages/docs/src/components/introduction/DiscordDeck.vue
index b9507d2dff1..bc877a1fc9a 100644
--- a/packages/docs/src/components/introduction/DiscordDeck.vue
+++ b/packages/docs/src/components/introduction/DiscordDeck.vue
@@ -15,7 +15,7 @@
       <v-row justify="space-around" dense>
         <template v-for="(tier, i) in tiers" :key="i">
           <v-col cols="12" md="4">
-            <v-responsive class="mb-4" :min-height="mdAndUp ? 96 : undefined">
+            <v-responsive :min-height="mdAndUp ? 96 : undefined" class="mb-4">
               <h3 class="d-flex align-center text-h6 font-weight-medium mb-4">
                 <v-avatar :image="tier.src" class="me-3" />
 
@@ -32,11 +32,11 @@
                 :href="tier.href"
                 :text="tierText(tier)"
                 :variant="i === 1 ? 'flat' : 'outlined'"
-                block
                 class="mb-6 text-none"
                 color="primary"
                 rel="noopener"
                 target="_blank"
+                block
               />
 
               <div class="text-caption">{{ tier.text }}</div>
@@ -63,18 +63,16 @@
     </v-container>
 
     <div class="px-4 pb-3 text-medium-emphasis text-caption">
-      *View more detailed information on our <app-link
+      *View more detailed information on our <AppLink
         href="https://discord.com/servers/vuetify-340160225338195969"
       >
         Discord Welcome Page
-      </app-link>
+      </AppLink>
     </div>
   </v-sheet>
 </template>
 
 <script setup>
-  import { useDisplay } from 'vuetify'
-
   const { mdAndUp } = useDisplay()
 
   const tiers = [
diff --git a/packages/docs/src/components/introduction/EnterpriseDeck.vue b/packages/docs/src/components/introduction/EnterpriseDeck.vue
index de3f0d1a660..fcf9efaef8d 100644
--- a/packages/docs/src/components/introduction/EnterpriseDeck.vue
+++ b/packages/docs/src/components/introduction/EnterpriseDeck.vue
@@ -15,7 +15,7 @@
       <v-row>
         <template v-for="(item, i) in items" :key="i">
           <v-col cols="12" md="4">
-            <v-responsive class="mb-4" :min-height="mdAndUp ? 96 : undefined">
+            <v-responsive :min-height="mdAndUp ? 96 : undefined" class="mb-4">
               <h3 class="text-h5 font-weight-medium">
                 {{ item.name }}
               </h3>
@@ -32,14 +32,14 @@
 
             <v-btn
               :href="item.href"
-              target="_blank"
-              rel="noopener"
+              :variant="i === 0 ? 'flat' : 'outlined'"
               class="mb-6 text-none"
               color="primary"
-              block
-              text="Book Now"
+              rel="noopener"
               size="x-large"
-              :variant="i === 0 ? 'flat' : 'outlined'"
+              target="_blank"
+              text="Book Now"
+              block
             />
 
             <ul class="text-caption ps-1" style="list-style-type: none;">
@@ -63,9 +63,6 @@
 </template>
 
 <script setup>
-  // eslint-disable
-  import { useDisplay } from 'vuetify'
-
   const { mdAndUp } = useDisplay()
 
   const items = [
diff --git a/packages/docs/src/components/introduction/EnterpriseForm.vue b/packages/docs/src/components/introduction/EnterpriseForm.vue
index 360e1c7d593..470ab871892 100644
--- a/packages/docs/src/components/introduction/EnterpriseForm.vue
+++ b/packages/docs/src/components/introduction/EnterpriseForm.vue
@@ -9,15 +9,15 @@
   >
     <v-card
       id="request-service"
-      border
       class="pa-2"
       title="Request Support"
       variant="flat"
+      border
     >
       <template #append>
         <v-img
-          width="96"
           :src="logo"
+          width="96"
         />
       </template>
 
@@ -31,17 +31,17 @@
 
           <v-row class="mb-4">
             <v-col cols="12" md="6">
-              <app-text-field
+              <AppTextField
                 v-model="name"
+                :placeholder="t('name')"
                 :rules="[rules.required]"
                 name="name"
-                :placeholder="t('name')"
                 prepend-inner-icon="mdi-account-circle-outline"
               />
             </v-col>
 
             <v-col cols="12" md="6">
-              <app-text-field
+              <AppTextField
                 v-model="email"
                 :placeholder="t('email-address')"
                 :rules="[rules.required, rules.email]"
@@ -90,12 +90,12 @@
 
           <v-switch
             v-model="sponsor"
-            density="compact"
             color="primary"
-            inset
-            hide-details
+            density="compact"
             label="Yes"
             name="sponsor"
+            hide-details
+            inset
           />
 
           <small class="text-medium-emphasis">
@@ -111,10 +111,10 @@
             :color="success ? 'success' : valid ? 'primary' : undefined"
             :disabled="loading || !valid"
             :loading="loading"
-            block
             size="large"
             type="submit"
             variant="flat"
+            block
           >
             <span v-if="!success && !loading">Submit</span>
 
@@ -126,8 +126,8 @@
           <small>
             Issues with this form?
             <a
-              href="mailto:support@vuetifyjs.com?subject=Enterprise Support"
               class="text-primary"
+              href="mailto:support@vuetifyjs.com?subject=Enterprise Support"
               target="_blank"
             >
               Contact Us
@@ -140,13 +140,7 @@
 </template>
 
 <script setup lang="ts">
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   // Utilities
-  import { computed, ref, watch } from 'vue'
-  import { rpath } from '@/util/routes'
-  import { useTheme } from 'vuetify'
   import emailjs from '@emailjs/browser'
 
   const theme = useTheme()
diff --git a/packages/docs/src/components/promoted/Base.vue b/packages/docs/src/components/promoted/Base.vue
index d0ee2a6688d..17af46e6862 100644
--- a/packages/docs/src/components/promoted/Base.vue
+++ b/packages/docs/src/components/promoted/Base.vue
@@ -6,10 +6,10 @@
     <v-sheet
       v-bind="$attrs"
       :min-height="minHeight"
-      color="surface-bright"
       class="v-app-ad d-inline-flex flex-child-1 grow-shrink-0"
-      rounded
+      color="surface-bright"
       width="100%"
+      rounded
     >
       <slot />
     </v-sheet>
@@ -17,9 +17,6 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { computed } from 'vue'
-
   const props = defineProps({
     density: {
       type: String,
diff --git a/packages/docs/src/components/promoted/Carbon.vue b/packages/docs/src/components/promoted/Carbon.vue
index e3b62dac99f..6ecd9729c4c 100644
--- a/packages/docs/src/components/promoted/Carbon.vue
+++ b/packages/docs/src/components/promoted/Carbon.vue
@@ -4,15 +4,15 @@
     min-height="118"
   >
     <template v-if="!error1 && !error2">
-      <promoted-base
+      <PromotedBase
         ref="script"
         :class="[
           isDark ? 'theme--dark' : 'theme--light',
         ]"
-        border
         max-width="360"
+        border
       >
-        <promoted-script
+        <PromotedScript
           v-if="!error1"
           id="carbonads-script"
           script-id="_carbonads_js"
@@ -20,32 +20,21 @@
           @script:error="error1 = true"
         />
 
-        <promoted-script
+        <PromotedScript
           v-if="error1"
           id="bsa-zone_1691166982595-9_123456"
           :src="`https://cdn4.buysellads.net/pub/vuetifyjs.js?${Date.now() % 600000}`"
           script-id="bsa-optimize"
           @script:error="error2 = true"
         />
-      </promoted-base>
+      </PromotedBase>
     </template>
 
-    <promotion-card v-else />
+    <PromotionsPromotionCard v-else />
   </v-responsive>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import PromotionCard from '@/components/promotions/PromotionCard.vue'
-  import PromotedBase from './Base.vue'
-  import PromotedScript from './Script.vue'
-
-  // Composables
-  import { useTheme } from 'vuetify'
-
-  // Utilities
-  import { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watch } from 'vue'
-
   const error1 = shallowRef(false)
   const error2 = shallowRef(false)
   const script = shallowRef(null)
diff --git a/packages/docs/src/components/promoted/Discovery.vue b/packages/docs/src/components/promoted/Discovery.vue
index 5faf75f7f03..fea9021aade 100644
--- a/packages/docs/src/components/promoted/Discovery.vue
+++ b/packages/docs/src/components/promoted/Discovery.vue
@@ -1,7 +1,3 @@
 <template>
-  <promoted class="mb-5" medium="discovery" type="discovery" />
+  <PromotedPromoted class="mb-5" medium="discovery" type="discovery" />
 </template>
-
-<script setup>
-  //
-</script>
diff --git a/packages/docs/src/components/promoted/Entry.vue b/packages/docs/src/components/promoted/Entry.vue
index d271b530371..05e61663953 100644
--- a/packages/docs/src/components/promoted/Entry.vue
+++ b/packages/docs/src/components/promoted/Entry.vue
@@ -1,12 +1,9 @@
 <template>
-  <carbon v-if="!user.disableAds" />
+  <PromotedCarbon v-if="!user.disableAds" />
 
   <br>
 </template>
 
 <script setup>
-  // Stores
-  import { useUserStore } from '@vuetify/one'
-
   const user = useUserStore()
 </script>
diff --git a/packages/docs/src/components/promoted/Inline.vue b/packages/docs/src/components/promoted/Inline.vue
index c668192c629..e8ef5f7a3ea 100644
--- a/packages/docs/src/components/promoted/Inline.vue
+++ b/packages/docs/src/components/promoted/Inline.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-markdown
+  <AppMarkdown
     v-if="ad"
     :content="description"
     class="v-markdown--inline d-inline"
@@ -8,9 +8,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { createAdProps, useAd } from '@/composables/ad'
-
   const props = defineProps(createAdProps())
 
   const { ad, description } = useAd(props)
diff --git a/packages/docs/src/components/promoted/Promoted.vue b/packages/docs/src/components/promoted/Promoted.vue
index 5cb7f5b1958..f2f10802d56 100644
--- a/packages/docs/src/components/promoted/Promoted.vue
+++ b/packages/docs/src/components/promoted/Promoted.vue
@@ -7,7 +7,7 @@
       v-bind="attrs"
       @click="onClick"
     >
-      <promoted-base
+      <PromotedBase
         v-bind="$attrs"
         class="v-vuetify--promoted"
         density="compact"
@@ -25,38 +25,26 @@
               :alt="`Link to ${ad.title}`"
               :src="logo"
               class="mx-1 mx-md-2"
-              contain
               height="56"
               max-width="56"
+              contain
             />
 
-            <app-markdown
+            <AppMarkdown
               v-if="description"
               :content="description"
               class="text-subtitle-2 text-sm-h6 font-weight-light text-white"
             />
           </div>
         </v-img>
-      </promoted-base>
+      </PromotedBase>
     </a>
 
-    <vuetify v-else />
+    <PromotedVuetify v-else />
   </div>
 </template>
 
 <script setup>
-  // Components
-  import PromotedBase from './Base.vue'
-  import Vuetify from './Vuetify.vue'
-
-  // Composables
-  import { createAdProps, useAd } from '@/composables/ad'
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const props = defineProps({
     ...createAdProps(),
 
diff --git a/packages/docs/src/components/promoted/Random.vue b/packages/docs/src/components/promoted/Random.vue
index 786f40511ed..ee65bf7f586 100644
--- a/packages/docs/src/components/promoted/Random.vue
+++ b/packages/docs/src/components/promoted/Random.vue
@@ -1,7 +1,3 @@
 <template>
-  <vuetify class="mb-5" />
+  <PromotedVuetify class="mb-5" />
 </template>
-
-<script setup>
-  //
-</script>
diff --git a/packages/docs/src/components/promoted/Script.vue b/packages/docs/src/components/promoted/Script.vue
index 67be6b5f0ec..1ae442563bf 100644
--- a/packages/docs/src/components/promoted/Script.vue
+++ b/packages/docs/src/components/promoted/Script.vue
@@ -1,12 +1,8 @@
 <template>
-  <div :id="id" ref="rootEl" />
+  <div ref="rootEl" :id="id" />
 </template>
 
 <script setup lang="ts">
-  // Utilities
-  import { IN_BROWSER } from '@/util/globals'
-  import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
-
   const props = defineProps({
     id: {
       type: String,
diff --git a/packages/docs/src/components/promoted/Vuetify.vue b/packages/docs/src/components/promoted/Vuetify.vue
index ae4d2726394..f828a9afce3 100644
--- a/packages/docs/src/components/promoted/Vuetify.vue
+++ b/packages/docs/src/components/promoted/Vuetify.vue
@@ -1,36 +1,29 @@
 <template>
-  <promoted-base
+  <PromotedBase
     v-if="ad"
-    border
     class="v-vuetify"
     density="comfortable"
+    border
   >
     <v-list-item
+      :append-icon="smAndUp ? 'mdi-open-in-new' : undefined"
       :prepend-avatar="src"
       :title="ad.title"
-      :append-icon="smAndUp ? 'mdi-open-in-new' : undefined"
       style="min-height: inherit; width: 100%"
       v-bind="attrs"
     >
       <template #subtitle>
-        <app-markdown
+        <AppMarkdown
           v-if="description"
           :content="description"
           class="text-caption"
         />
       </template>
     </v-list-item>
-  </promoted-base>
+  </PromotedBase>
 </template>
 
 <script setup>
-  // Components
-  import PromotedBase from './Base.vue'
-
-  // Composables
-  import { useDisplay } from 'vuetify'
-  import { createAdProps, useAd } from '@/composables/ad'
-
   const props = defineProps({
     color: String,
 
diff --git a/packages/docs/src/components/promotions/PromotionCard.vue b/packages/docs/src/components/promotions/PromotionCard.vue
index fea9ad3f181..c7ea81f5dc1 100644
--- a/packages/docs/src/components/promotions/PromotionCard.vue
+++ b/packages/docs/src/components/promotions/PromotionCard.vue
@@ -1,15 +1,15 @@
 <template>
-  <promoted-base
+  <PromotedBase
     v-if="promotion"
-    border
     class="v-promotion-card"
     max-width="360"
+    border
   >
     <a
       :href="promotion.metadata.url"
       class="d-inline-block text-medium-emphasis"
-      target="_blank"
       rel="noopener"
+      target="_blank"
     >
       <v-container class="pa-2">
         <v-row dense>
@@ -23,7 +23,7 @@
 
           <v-col>
             <div class="px-2">
-              <app-markdown :content="promotion.metadata.text" />
+              <AppMarkdown :content="promotion.metadata.text" />
             </div>
           </v-col>
         </v-row>
@@ -33,19 +33,10 @@
         ADS VIA VUETIFY
       </span>
     </a>
-  </promoted-base>
+  </PromotedBase>
 </template>
 
 <script setup>
-  // Components
-  import PromotedBase from '@/components/promoted/Base.vue'
-
-  // Utilities
-  import { computed } from 'vue'
-
-  // Stores
-  import { usePromotionsStore } from '@/store/promotions'
-
   const props = defineProps({
     color: String,
     slug: String,
diff --git a/packages/docs/src/components/resources/ColorPalette.vue b/packages/docs/src/components/resources/ColorPalette.vue
index 2d050fe347d..c54dadbad17 100644
--- a/packages/docs/src/components/resources/ColorPalette.vue
+++ b/packages/docs/src/components/resources/ColorPalette.vue
@@ -1,14 +1,14 @@
 <template>
   <v-container class="px-0">
     <v-row>
-      <v-col cols="12" class="pb-0 font-weight-bold">{{ t('colors') }}</v-col>
+      <v-col class="pb-0 font-weight-bold" cols="12">{{ t('colors') }}</v-col>
 
       <v-col v-for="(color, i) in colors" :key="i" cols="3">
         <v-sheet
           :color="color"
-          border
           class="d-flex align-center justify-center text-mono"
           height="150"
+          border
           rounded
         >
           {{ color }}
@@ -19,9 +19,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   const { t } = useI18n()
 
   const colors = [
diff --git a/packages/docs/src/components/resources/Logos.vue b/packages/docs/src/components/resources/Logos.vue
index 859b77f0597..e1d737e1921 100644
--- a/packages/docs/src/components/resources/Logos.vue
+++ b/packages/docs/src/components/resources/Logos.vue
@@ -1,19 +1,19 @@
 <template>
-  <app-btn
-    border
+  <AppBtn
     href="https://cdn.vuetifyjs.com/docs/images/brand-kit/vuetify-brand-kit.zip"
     prepend-icon="mdi-download-box-outline"
     target="_blank"
     text="download-brand-kit"
+    border
   />
 
   <v-container class="px-0">
     <v-row>
-      <v-col cols="12" class="pb-0 font-weight-bold">{{ t('logo') }}</v-col>
+      <v-col class="pb-0 font-weight-bold" cols="12">{{ t('logo') }}</v-col>
 
       <v-col v-for="logo in logos" :key="logo.title" cols="auto">
-        <v-sheet rounded border class="pa-4">
-          <app-figure
+        <v-sheet class="pa-4" border rounded>
+          <AppFigure
             :src="`${logo.src}.svg`"
             :title="logo.title"
             class="mb-4 mx-auto"
@@ -44,17 +44,17 @@
         </v-sheet>
       </v-col>
 
-      <v-col cols="12" class="pb-0 font-weight-bold">{{ t('text') }}</v-col>
+      <v-col class="pb-0 font-weight-bold" cols="12">{{ t('text') }}</v-col>
 
       <v-col v-for="logo in text" :key="logo.title" cols="auto">
         <v-sheet
           :theme="logo.src.indexOf('dark') > -1 ? 'dark' : 'light'"
-          border
           class="pa-4"
-          rounded
           width="300"
+          border
+          rounded
         >
-          <app-figure
+          <AppFigure
             :src="`${logo.src}.svg`"
             :title="logo.title"
             class="mb-4"
@@ -85,7 +85,7 @@
         </v-sheet>
       </v-col>
 
-      <v-col cols="12" class="pb-0 font-weight-bold">{{ t('icon') }}</v-col>
+      <v-col class="pb-0 font-weight-bold" cols="12">{{ t('icon') }}</v-col>
 
       <v-col
         v-for="icon in icons"
@@ -94,9 +94,9 @@
         sm="6"
       >
         <v-sheet
-          rounded
-          border
           class="pa-2"
+          border
+          rounded
         >
           <div class="text-center">
             <v-icon
@@ -110,7 +110,7 @@
             {{ icon.title }}
           </figcaption>
 
-          <app-markup :code="icon.code" />
+          <AppMarkup :code="icon.code" />
         </v-sheet>
       </v-col>
     </v-row>
@@ -118,9 +118,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
   const { t } = useI18n()
 
   const logos = [
diff --git a/packages/docs/src/components/sponsor/Card.vue b/packages/docs/src/components/sponsor/Card.vue
index 8cce8aa842a..4ab5291dace 100644
--- a/packages/docs/src/components/sponsor/Card.vue
+++ b/packages/docs/src/components/sponsor/Card.vue
@@ -6,31 +6,22 @@
     class="d-inline-flex align-center pa-2"
     color="transparent"
     rel="noopener"
-    rounded
     target="_blank"
     variant="flat"
+    rounded
     @click="onClick"
   >
     <v-img
       :alt="sponsor?.metadata.name"
       :src="src"
       :width="imgWidth"
-      contain
       max-height="64"
+      contain
     />
   </v-card>
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useRoute } from 'vue-router'
-  import { useSponsorsStore } from '@/store/sponsors'
-  import { useTheme } from 'vuetify'
-
-  // Utilities
-  import { computed, ref, watch } from 'vue'
-
   const props = defineProps({
     slug: String,
     sponsor: Object,
diff --git a/packages/docs/src/components/sponsor/Link.vue b/packages/docs/src/components/sponsor/Link.vue
index a169ba9afc9..fb9cfa885e1 100644
--- a/packages/docs/src/components/sponsor/Link.vue
+++ b/packages/docs/src/components/sponsor/Link.vue
@@ -15,14 +15,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useGtag } from 'vue-gtag-next'
-  import { useI18n } from 'vue-i18n'
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   defineProps({
     size: String,
   })
diff --git a/packages/docs/src/components/sponsor/Sponsors.vue b/packages/docs/src/components/sponsor/Sponsors.vue
index 0688601ddb6..5d272da2e4a 100644
--- a/packages/docs/src/components/sponsor/Sponsors.vue
+++ b/packages/docs/src/components/sponsor/Sponsors.vue
@@ -10,7 +10,7 @@
       :key="sponsor.slug"
       cols="auto"
     >
-      <sponsor-card
+      <SponsorCard
         :comfortable="Number(tier) === 2"
         :compact="Number(tier) > 2"
         :sponsor="sponsor"
@@ -20,27 +20,18 @@
   </v-row>
 
   <div v-else class="mb-4">
-    <app-btn
-      text="become-a-sponsor"
+    <AppBtn
+      append-icon="mdi-open-in-new"
       href="https://github.com/sponsors/johnleider"
-      border
-      target="_blank"
       rel="noopener"
-      append-icon="mdi-open-in-new"
+      target="_blank"
+      text="become-a-sponsor"
+      border
     />
   </div>
 </template>
 
 <script setup lang="ts">
-  // Components
-  import SponsorCard from '@/components/sponsor/Card.vue'
-
-  // Composables
-  import { useSponsorsStore } from '@/store/sponsors'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const props = defineProps({
     tier: {
       type: [Number, String],
diff --git a/packages/docs/src/components/user/DiscordLogin.vue b/packages/docs/src/components/user/DiscordLogin.vue
deleted file mode 100644
index fbc2299e256..00000000000
--- a/packages/docs/src/components/user/DiscordLogin.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <v-list-item
-    :title="t(auth.user ? 'login.connect-discord' : 'login.with-discord')"
-    nav
-    base-color="#5865F2"
-    prepend-icon="mdi-discord"
-    variant="flat"
-    @click="auth.login('discord')"
-  >
-    <template #prepend>
-      <v-icon class="me-n6" />
-    </template>
-
-    <template #subtitle>
-      <span v-if="!auth.user && auth.lastLoginProvider() === 'discord'">
-        {{ t('login.last-used') }}
-      </span>
-    </template>
-  </v-list-item>
-</template>
-
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { useAuthStore } from '@vuetify/one'
-
-  const auth = useAuthStore()
-
-  const { t } = useI18n()
-</script>
diff --git a/packages/docs/src/components/user/GithubLogin.vue b/packages/docs/src/components/user/GithubLogin.vue
deleted file mode 100644
index 97d858622cb..00000000000
--- a/packages/docs/src/components/user/GithubLogin.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <v-list-item
-    :title="t(auth.user ? 'login.connect-github' : 'login.with-github')"
-    nav
-    base-color="#2a2a2a"
-    prepend-icon="mdi-github"
-    variant="flat"
-    @click="auth.login('github')"
-  >
-    <template #prepend>
-      <v-icon class="me-n6" />
-    </template>
-
-    <template #subtitle>
-      <span v-if="!auth.user && auth.lastLoginProvider() === 'github'">
-        {{ t('login.last-used') }}
-      </span>
-    </template>
-  </v-list-item>
-</template>
-
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { useAuthStore } from '@vuetify/one'
-
-  const auth = useAuthStore()
-
-  const { t } = useI18n()
-</script>
diff --git a/packages/docs/src/components/user/OneSubCard.vue b/packages/docs/src/components/user/OneSubCard.vue
index 682857fe416..0a1bffe924d 100644
--- a/packages/docs/src/components/user/OneSubCard.vue
+++ b/packages/docs/src/components/user/OneSubCard.vue
@@ -2,9 +2,9 @@
   <v-card
     v-if="one.isSubscriber"
     class="pa-4 text-white font-weight-bold d-flex align-start flex-column mt-2"
-    flat
     image="https://cdn.vuetifyjs.com/docs/images/one/banners/one-sub-banner.png"
     width="250"
+    flat
   >
     <div>
       Vuetify One
@@ -19,15 +19,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useDate } from 'vuetify'
-
-  // Stores
-  import { useOneStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const adapter = useDate()
   const one = useOneStore()
 
diff --git a/packages/docs/src/components/user/UserBadges.vue b/packages/docs/src/components/user/UserBadges.vue
deleted file mode 100644
index dc565d9eff6..00000000000
--- a/packages/docs/src/components/user/UserBadges.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="d-flex ga-1 justify-center">
-    <user-admin-badge :size="size" />
-
-    <user-sponsor-badge :size="size" />
-
-    <user-one-badge :size="size" />
-  </div>
-</template>
-
-<script setup>
-  // Components
-  import UserAdminBadge from '@/components/user/badges/UserAdminBadge.vue'
-  import UserOneBadge from '@/components/user/badges/UserOneBadge.vue'
-  import UserSponsorBadge from '@/components/user/badges/UserSponsorBadge.vue'
-
-  defineProps({ size: [Number, String] })
-</script>
diff --git a/packages/docs/src/components/user/UserProfile.vue b/packages/docs/src/components/user/UserProfile.vue
deleted file mode 100644
index 2c6f8ade5b0..00000000000
--- a/packages/docs/src/components/user/UserProfile.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <app-sheet width="250">
-    <v-skeleton-loader
-      :loading="auth.isLoading"
-      type="image, paragraph, divider, list-item-avatar"
-    >
-      <template v-if="!auth.user">
-        <v-list class="flex-1-0 d-flex flex-column ga-2">
-          <template v-for="button in loginButtons" :key="button">
-            <component :is="button" class="mx-2 mb-0" />
-          </template>
-        </v-list>
-      </template>
-
-      <template v-else>
-        <div class="text-center py-4 flex-grow-1">
-          <v-avatar :image="user.avatar || auth.user.picture || ''" size="80" />
-
-          <v-card-title class="mb-n2">{{ auth.user.name }}</v-card-title>
-
-          <user-badges />
-        </div>
-
-        <v-divider />
-
-        <v-list class="flex-grow-1">
-          <v-list-subheader class="text-high-emphasis">
-            {{ t('dashboard.connected-accounts') }}:
-          </v-list-subheader>
-
-          <template v-for="identity in auth.user.identities" :key="identity.id">
-            <v-list-item slim>
-              <template #prepend>
-                <v-avatar
-                  :icon="`mdi-${identity.provider}`"
-                  rounded="0"
-                  size="25"
-                />
-              </template>
-
-              <template #title>
-                <strong class="text-medium-emphasis">{{ t(identity.provider) }}:</strong>
-              </template>
-
-              <template #append>
-                <div class="text-caption text-medium-emphasis">{{ identity.userHandle }}</div>
-              </template>
-            </v-list-item>
-          </template>
-
-          <template v-for="button in loginButtons" :key="button">
-            <component :is="button" class="mx-2" />
-          </template>
-        </v-list>
-      </template>
-    </v-skeleton-loader>
-  </app-sheet>
-
-  <one-sub-card />
-</template>
-
-<script setup lang="ts">
-  // Components
-  import DiscordLogin from '@/components/user/DiscordLogin.vue'
-  import GithubLogin from '@/components/user/GithubLogin.vue'
-  import OneSubCard from '@/components/user/OneSubCard.vue'
-  import UserBadges from '@/components/user/UserBadges.vue'
-
-  // Composables
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { computed } from 'vue'
-
-  // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
-
-  const auth = useAuthStore()
-  const user = useUserStore()
-
-  const { t } = useI18n()
-
-  const loginButtons = computed(() => {
-    if (!auth.user) {
-      return [GithubLogin, DiscordLogin]
-    }
-    return Object.fromEntries(
-      Object.entries({
-        github: GithubLogin,
-        discord: DiscordLogin,
-      }).filter(([k, v]) => !auth.user!.identities.some((i: any) => i.provider === k))
-    )
-  })
-</script>
diff --git a/packages/docs/src/components/user/UserTabs.vue b/packages/docs/src/components/user/UserTabs.vue
index e9ec15aef36..2c91e476656 100644
--- a/packages/docs/src/components/user/UserTabs.vue
+++ b/packages/docs/src/components/user/UserTabs.vue
@@ -10,27 +10,13 @@
 </template>
 
 <script setup>
-  // Utilities
-  import { computed } from 'vue'
-  import { rpath } from '@/util/routes'
-
   const tabs = computed(() => {
     return [
       {
         prependIcon: 'mdi-view-dashboard-outline',
-        text: 'Dashboard',
+        text: 'My Dashboard',
         to: rpath('/user/dashboard/'),
       },
-      {
-        prependIcon: 'mdi-cog-outline',
-        text: 'Options',
-        to: rpath('/user/options/'),
-      },
-      {
-        prependIcon: '$vuetify',
-        text: 'Subscriptions',
-        to: rpath('/user/subscriptions/'),
-      },
     ]
   })
 </script>
diff --git a/packages/docs/src/components/user/account/ConnectedAccounts.vue b/packages/docs/src/components/user/account/ConnectedAccounts.vue
deleted file mode 100644
index 236ec96e8a4..00000000000
--- a/packages/docs/src/components/user/account/ConnectedAccounts.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <app-sheet>
-    <v-data-table
-      :headers="headers"
-      :items="identities"
-      hide-footer
-    >
-      <template #item.provider="item">
-        <div class="d-flex align-center">
-          <v-icon :icon="`mdi-${item.value}`" color="medium-emphasis" class="me-1" />
-
-          <span class="text-capitalize">
-            {{ item.value }}
-          </span>
-        </div>
-      </template>
-
-      <template #item.status="{ item }">
-        <v-btn
-          :color="!item.status ? 'success' : 'error'"
-          class="text-none text-caption"
-          size="small"
-          variant="outlined"
-          width="100"
-          @click="onClick(item)"
-        >
-          {{ item.status ? 'Disconnect' : 'Connect' }}
-        </v-btn>
-      </template>
-
-      <template #bottom />
-    </v-data-table>
-
-  </app-sheet>
-</template>
-
-<script setup>
-  // Stores
-  import { useAuthStore } from '@vuetify/one'
-
-  // Utilities
-  import { computed, ref } from 'vue'
-
-  const auth = useAuthStore()
-  const headers = ref([
-    { title: 'Provider', key: 'provider' },
-    { title: 'Status', key: 'status', align: 'end' },
-  ])
-  const identities = computed(() => {
-    return ['github', 'discord'].map(identity => {
-      const found = auth.user?.identities.find(i => i.provider === identity)
-
-      return {
-        provider: identity,
-        status: !!found,
-      }
-    })
-  })
-
-  function onClick (item) {
-    const url = import.meta.env.VITE_API_SERVER_URL
-
-    if (item.status) {
-      fetch(`${url}/auth/${item.provider}/logout`, {
-        method: 'POST',
-        credentials: 'include',
-      })
-    } else {
-      //
-    }
-  }
-</script>
diff --git a/packages/docs/src/components/user/account/OneSubscription.vue b/packages/docs/src/components/user/account/OneSubscription.vue
deleted file mode 100644
index 7968dd7be97..00000000000
--- a/packages/docs/src/components/user/account/OneSubscription.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <v-list-item
-    :disabled="!auth.user"
-    :subtitle="one.isSubscriber ? 'Active' : 'Inactive'"
-    border
-    lines="two"
-    prepend-icon="$vuetify"
-    rounded
-    title="Subscription Status"
-  >
-    <template #prepend>
-      <div class="pe-2">
-        <v-icon :color="one.isSubscriber ? 'primary' : undefined" />
-      </div>
-    </template>
-
-    <template #append>
-      <PrimaryBtn
-        v-if="!one.isSubscriber"
-        :loading="one.isLoading"
-        color="success"
-        prepend-icon="mdi-check"
-        text="Activate"
-        @click="one.subscribe"
-      >
-        <template #loader>
-          <v-progress-circular />
-        </template>
-      </PrimaryBtn>
-
-      <PrimaryBtn
-        v-if="hasBilling"
-        :loading="billing"
-        class="ms-2"
-        prepend-icon="mdi-credit-card-outline"
-        text="Billing"
-        @click="onClickBilling"
-      >
-        <template #loader>
-          <v-progress-circular />
-        </template>
-      </PrimaryBtn>
-    </template>
-  </v-list-item>
-</template>
-
-<script setup>
-  // Utilities
-  import { computed, shallowRef } from 'vue'
-
-  // Store
-  import { useAuthStore, useHttpStore, useOneStore } from '@vuetify/one'
-
-  const auth = useAuthStore()
-  const http = useHttpStore()
-  const one = useOneStore()
-
-  const hasBilling = computed(() => !!one.subscription?.tierName)
-
-  const billing = shallowRef(false)
-
-  function onClickBilling () {
-    billing.value = true
-    window.location.href = http.url + '/one/manage'
-  }
-</script>
diff --git a/packages/docs/src/components/user/badges/UserAdminBadge.vue b/packages/docs/src/components/user/badges/UserAdminBadge.vue
index c742ef375a2..500c720c3e7 100644
--- a/packages/docs/src/components/user/badges/UserAdminBadge.vue
+++ b/packages/docs/src/components/user/badges/UserAdminBadge.vue
@@ -15,8 +15,5 @@
 </template>
 
 <script setup>
-  // Stores
-  import { useAuthStore } from '@vuetify/one'
-
   const auth = useAuthStore()
 </script>
diff --git a/packages/docs/src/components/user/badges/UserOneBadge.vue b/packages/docs/src/components/user/badges/UserOneBadge.vue
index adbc4efbf6b..3dce9e70a6e 100644
--- a/packages/docs/src/components/user/badges/UserOneBadge.vue
+++ b/packages/docs/src/components/user/badges/UserOneBadge.vue
@@ -1,8 +1,8 @@
 <template>
   <v-tooltip
     v-if="one.isSubscriber"
-    text="Vuetify One Subscriber"
     location="bottom"
+    text="Vuetify One Subscriber"
   >
     <template #activator="{ props: activatorProps }">
       <v-icon
@@ -15,8 +15,5 @@
 </template>
 
 <script setup>
-  // Stores
-  import { useOneStore } from '@vuetify/one'
-
   const one = useOneStore()
 </script>
diff --git a/packages/docs/src/components/user/badges/UserSponsorBadge.vue b/packages/docs/src/components/user/badges/UserSponsorBadge.vue
index d63b57b4dfb..40fcb05f30d 100644
--- a/packages/docs/src/components/user/badges/UserSponsorBadge.vue
+++ b/packages/docs/src/components/user/badges/UserSponsorBadge.vue
@@ -15,8 +15,5 @@
 </template>
 
 <script setup>
-  // Stores
-  import { useAuthStore } from '@vuetify/one'
-
   const auth = useAuthStore()
 </script>
diff --git a/packages/docs/src/composables/ad.ts b/packages/docs/src/composables/ad.ts
index 9757b6a64f3..ec130a08abf 100644
--- a/packages/docs/src/composables/ad.ts
+++ b/packages/docs/src/composables/ad.ts
@@ -1,15 +1,3 @@
-// Composables
-import { useAdsStore } from '@/store/ads'
-import { useI18n } from 'vue-i18n'
-
-// Stores
-import { useUserStore } from '@vuetify/one'
-
-// Utilities
-import { computed } from 'vue'
-import { kebabCase } from 'lodash-es'
-import { leadingSlash, trailingSlash } from '@/util/routes'
-
 interface AdProps {
   medium: string
   slug?: string
@@ -54,7 +42,7 @@ export const useAd = (props: AdProps) => {
       return leadingSlash(trailingSlash(`${locale.value}${url}`))
     }
 
-    if (query && query.indexOf('utm_source') !== -1) {
+    if (query && query.includes('utm_source')) {
       return `${url}?${query}`
     }
 
diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json
index 02a8cc5821b..1da6f6f4fda 100644
--- a/packages/docs/src/data/301.json
+++ b/packages/docs/src/data/301.json
@@ -124,5 +124,12 @@
   "components/server-side-data-tables": "/components/data-tables/server-side-tables",
   "components/skeleton-loaders": "/introduction/roadmap",
   "components/speed-dials": "/introduction/roadmap",
-  "components/virtual-data-tables": "/components/data-tables/virtual-tables"
+  "components/virtual-data-tables": "/components/data-tables/virtual-tables",
+  "api/v-click-outside": "/api/v-click-outside-directive",
+  "api/v-intersect": "/api/v-intersect-directive",
+  "api/v-mutate": "/api/v-mutate-directive",
+  "api/v-resize": "/api/v-resize-directive",
+  "api/v-ripple": "/api/v-ripple-directive",
+  "api/v-scroll": "/api/v-scroll-directive",
+  "api/v-touch": "/api/v-touch-directive"
 }
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index ca6eab9b389..df27b068125 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -223,6 +223,22 @@
       {
         "title": "calendars",
         "subfolder": "components"
+      },
+      {
+        "title": "empty-states",
+        "subfolder": "components"
+      },
+      {
+        "title": "floating-action-buttons",
+        "subfolder": "components"
+      },
+      {
+        "title": "sparklines",
+        "subfolder": "components"
+      },
+      {
+        "title": "speed-dials",
+        "subfolder": "components"
       }
     ]
   },
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index 91e51a644f9..54f377f2521 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -71,8 +71,9 @@
   "components/date-pickers-month": ["VDatePicker"],
   "components/date-pickers": ["VDatePicker"],
   "components/defaults-providers": ["VDefaultsProvider"],
-  "components/dialogs": ["VDialog"],
+  "components/dialogs": ["VDialog", "VOverlay"],
   "components/dividers": ["VDivider"],
+  "components/empty-states": ["VEmptyState"],
   "components/expansion-panels": [
     "VExpansionPanel",
     "VExpansionPanels",
@@ -80,6 +81,7 @@
     "VExpansionPanelTitle"
   ],
   "components/file-inputs": ["VFileInput"],
+  "components/floating-action-buttons": ["VFab"],
   "components/footers": ["VFooter"],
   "components/forms": ["VForm"],
   "components/grids": ["VCol", "VContainer", "VRow", "VSpacer"],
diff --git a/packages/docs/src/examples/accessibility/menu.vue b/packages/docs/src/examples/accessibility/menu.vue
index 21aa67bc7c7..785a8b9950b 100644
--- a/packages/docs/src/examples/accessibility/menu.vue
+++ b/packages/docs/src/examples/accessibility/menu.vue
@@ -7,15 +7,15 @@
 
       <v-list>
         <v-list-item @click="onClick">
-          <v-list-item-title title="Option 1"></v-list-item-title>
+          <v-list-item-title>Option 1</v-list-item-title>
         </v-list-item>
 
         <v-list-item disabled>
-          <v-list-item-title title="Option 2"></v-list-item-title>
+          <v-list-item-title>Option 2</v-list-item-title>
         </v-list-item>
 
         <v-list-item @click="onClick">
-          <v-list-item-title title="Option 3"></v-list-item-title>
+          <v-list-item-title>Option 3</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>
diff --git a/packages/docs/src/examples/application-layout/discord.vue b/packages/docs/src/examples/application-layout/discord.vue
index 40e55f0b050..7bddc9258bb 100644
--- a/packages/docs/src/examples/application-layout/discord.vue
+++ b/packages/docs/src/examples/application-layout/discord.vue
@@ -4,14 +4,14 @@
 
     <v-navigation-drawer
       color="grey-darken-2"
-      permanent
       width="72"
+      permanent
     ></v-navigation-drawer>
 
     <v-navigation-drawer
       color="grey-darken-1"
-      permanent
       width="150"
+      permanent
     ></v-navigation-drawer>
 
     <v-app-bar
@@ -23,15 +23,15 @@
     <v-navigation-drawer
       color="grey-lighten-1"
       location="right"
-      permanent
       width="150"
+      permanent
     ></v-navigation-drawer>
 
     <v-app-bar
       color="grey-lighten-2"
-      flat
       height="48"
       location="bottom"
+      flat
     ></v-app-bar>
 
     <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
diff --git a/packages/docs/src/examples/application-layout/dynamic.vue b/packages/docs/src/examples/application-layout/dynamic.vue
index 20210ce32fb..2d09e9c3777 100644
--- a/packages/docs/src/examples/application-layout/dynamic.vue
+++ b/packages/docs/src/examples/application-layout/dynamic.vue
@@ -5,17 +5,17 @@
     <v-app-bar
       :order="order"
       color="grey-lighten-2"
-      flat
       title="Application bar"
+      flat
     >
       <template v-slot:append>
         <v-switch
           v-model="order"
-          hide-details
-          inset
+          false-value="0"
           label="Toggle order"
           true-value="-1"
-          false-value="0"
+          hide-details
+          inset
         ></v-switch>
       </template>
     </v-app-bar>
diff --git a/packages/docs/src/examples/application-layout/layout-information-composable.vue b/packages/docs/src/examples/application-layout/layout-information-composable.vue
index da9a6979ed5..0a521e76d2d 100644
--- a/packages/docs/src/examples/application-layout/layout-information-composable.vue
+++ b/packages/docs/src/examples/application-layout/layout-information-composable.vue
@@ -8,8 +8,8 @@
 
     <v-navigation-drawer
       color="grey-darken-2"
-      permanent
       name="drawer"
+      permanent
     >
       <div class="d-flex justify-center align-center h-100">
         <child v-slot="{ print }">
@@ -23,8 +23,8 @@
     </v-main>
 
     <v-footer
-      app
       name="footer"
+      app
     >
       <v-btn
         class="mx-auto"
diff --git a/packages/docs/src/examples/application-layout/layout-information-ref.vue b/packages/docs/src/examples/application-layout/layout-information-ref.vue
index 50aed6d80a9..78612ac0464 100644
--- a/packages/docs/src/examples/application-layout/layout-information-ref.vue
+++ b/packages/docs/src/examples/application-layout/layout-information-ref.vue
@@ -6,9 +6,9 @@
 
     <v-navigation-drawer
       color="grey-darken-2"
-      permanent
-      name="drawer"
       location="end"
+      name="drawer"
+      permanent
     >
       <div class="d-flex justify-center align-center h-100">
         <v-btn @click="print('drawer')">Get data</v-btn>
@@ -20,8 +20,8 @@
     </v-main>
 
     <v-footer
-      app
       name="footer"
+      app
     >
       <v-btn
         class="mx-auto"
diff --git a/packages/docs/src/examples/blueprints/md1.vue b/packages/docs/src/examples/blueprints/md1.vue
index 00ce019731e..c254860d647 100644
--- a/packages/docs/src/examples/blueprints/md1.vue
+++ b/packages/docs/src/examples/blueprints/md1.vue
@@ -2,7 +2,7 @@
   <div>
     <v-defaults-provider :defaults="md1.defaults">
       <div class="d-flex align-center">
-        <v-btn class="me-6 text-white" :color="color">Button</v-btn>
+        <v-btn :color="color" class="me-6 text-white">Button</v-btn>
 
         <v-tabs :color="color">
           <v-tab>Tab One</v-tab>
@@ -20,8 +20,8 @@
         <template v-slot:prepend>
           <!-- rounded added due to bug -->
           <v-avatar
-            icon="$vuetify"
             class="text-white"
+            icon="$vuetify"
             rounded="circle"
           ></v-avatar>
         </template>
diff --git a/packages/docs/src/examples/blueprints/md2.vue b/packages/docs/src/examples/blueprints/md2.vue
index 43cfb22e71a..5e3a0ba6dfe 100644
--- a/packages/docs/src/examples/blueprints/md2.vue
+++ b/packages/docs/src/examples/blueprints/md2.vue
@@ -2,7 +2,7 @@
   <div>
     <v-defaults-provider :defaults="md2.defaults">
       <div class="d-flex align-center">
-        <v-btn class="me-6 text-white" :color="color">Button</v-btn>
+        <v-btn :color="color" class="me-6 text-white">Button</v-btn>
 
         <v-tabs :color="color">
           <v-tab>Tab One</v-tab>
@@ -20,8 +20,8 @@
         <template v-slot:prepend>
           <!-- rounded added due to bug -->
           <v-avatar
-            icon="$vuetify"
             class="text-white"
+            icon="$vuetify"
             rounded="circle"
           ></v-avatar>
         </template>
diff --git a/packages/docs/src/examples/blueprints/md3.vue b/packages/docs/src/examples/blueprints/md3.vue
index 5c2b946291b..9ea0c8d74a8 100644
--- a/packages/docs/src/examples/blueprints/md3.vue
+++ b/packages/docs/src/examples/blueprints/md3.vue
@@ -2,7 +2,7 @@
   <div>
     <v-defaults-provider :defaults="md3.defaults">
       <div class="d-flex align-center">
-        <v-btn class="me-6 text-white" :color="color">Button</v-btn>
+        <v-btn :color="color" class="me-6 text-white">Button</v-btn>
 
         <v-tabs :color="color">
           <v-tab>Tab One</v-tab>
@@ -20,8 +20,8 @@
         <template v-slot:prepend>
           <!-- rounded added due to bug -->
           <v-avatar
-            icon="$vuetify"
             class="text-white"
+            icon="$vuetify"
             rounded="circle"
           ></v-avatar>
         </template>
diff --git a/packages/docs/src/examples/border-radius/usage.vue b/packages/docs/src/examples/border-radius/usage.vue
index 838bddaa3bd..502e3b6ecb1 100644
--- a/packages/docs/src/examples/border-radius/usage.vue
+++ b/packages/docs/src/examples/border-radius/usage.vue
@@ -2,23 +2,23 @@
   <div class="text-center">
     <v-row class="pa-4">
       <v-radio-group v-model="model" inline>
-        <v-radio value="rounded-0" label="rounded-0"></v-radio>
-        <v-radio value="rounded-sm" label="rounded-sm"></v-radio>
-        <v-radio value="rounded" label="rounded"></v-radio>
-        <v-radio value="rounded-lg" label="rounded-lg"></v-radio>
-        <v-radio value="rounded-xl" label="rounded-xl"></v-radio>
-        <v-radio value="rounded-pill" label="rounded-pill"></v-radio>
-        <v-radio value="rounded-circle" label="rounded-circle"></v-radio>
-        <v-radio value="rounded-shaped" label="rounded-shaped"></v-radio>
+        <v-radio label="rounded-0" value="rounded-0"></v-radio>
+        <v-radio label="rounded-sm" value="rounded-sm"></v-radio>
+        <v-radio label="rounded" value="rounded"></v-radio>
+        <v-radio label="rounded-lg" value="rounded-lg"></v-radio>
+        <v-radio label="rounded-xl" value="rounded-xl"></v-radio>
+        <v-radio label="rounded-pill" value="rounded-pill"></v-radio>
+        <v-radio label="rounded-circle" value="rounded-circle"></v-radio>
+        <v-radio label="rounded-shaped" value="rounded-shaped"></v-radio>
       </v-radio-group>
     </v-row>
 
     <v-sheet
       :class="model"
-      max-width="256"
       class="mx-auto mt-8"
       elevation="12"
       height="128"
+      max-width="256"
       width="100%"
     ></v-sheet>
 
diff --git a/packages/docs/src/examples/cursor/usage.vue b/packages/docs/src/examples/cursor/usage.vue
index af5794817cf..22cb7490056 100644
--- a/packages/docs/src/examples/cursor/usage.vue
+++ b/packages/docs/src/examples/cursor/usage.vue
@@ -3,8 +3,8 @@
     <v-row justify="space-between">
       <v-col v-for="cursor in cursors" :key="cursor" cols="3">
         <v-btn
-          :text="cursor"
           :class="`cursor-${cursor}`"
+          :text="cursor"
           block
         ></v-btn>
       </v-col>
diff --git a/packages/docs/src/examples/elevation/usage.vue b/packages/docs/src/examples/elevation/usage.vue
index a0c3d2faf32..4fa22b7c64c 100644
--- a/packages/docs/src/examples/elevation/usage.vue
+++ b/packages/docs/src/examples/elevation/usage.vue
@@ -7,9 +7,9 @@
         cols="auto"
       >
         <v-card
+          :class="['d-flex justify-center align-center bg-secondary', `elevation-${n}`]"
           height="100"
           width="100"
-          :class="['d-flex justify-center align-center bg-secondary', `elevation-${n}`]"
         >
           <div>{{ n }}</div>
         </v-card>
diff --git a/packages/docs/src/examples/flex/grow-shrink.vue b/packages/docs/src/examples/flex/grow-shrink.vue
index 6d2f19a29d8..cea44f5cc84 100644
--- a/packages/docs/src/examples/flex/grow-shrink.vue
+++ b/packages/docs/src/examples/flex/grow-shrink.vue
@@ -1,12 +1,12 @@
 <template>
   <v-container>
     <v-row
-      no-gutters
       class="flex-nowrap bg-surface-variant"
+      no-gutters
     >
       <v-col
-        cols="2"
         class="flex-grow-0 flex-shrink-0"
+        cols="2"
       >
         <v-sheet class="ma-2 pa-2">
           I'm 2 column wide
@@ -14,9 +14,9 @@
       </v-col>
 
       <v-col
+        class="flex-grow-1 flex-shrink-0"
         cols="1"
         style="min-width: 100px; max-width: 100%;"
-        class="flex-grow-1 flex-shrink-0"
       >
         <v-sheet class="ma-2 pa-2">
           I'm 1 column wide and I grow to take all the space
@@ -24,9 +24,9 @@
       </v-col>
 
       <v-col
+        class="flex-grow-0 flex-shrink-1"
         cols="5"
         style="min-width: 100px;"
-        class="flex-grow-0 flex-shrink-1"
       >
         <v-sheet class="ma-2 pa-2">
           I'm 5 column wide and I shrink if there's not enough space
diff --git a/packages/docs/src/examples/grid/misc-margin-helpers.vue b/packages/docs/src/examples/grid/misc-margin-helpers.vue
index 7e9b7db982f..81a3d2f8c00 100644
--- a/packages/docs/src/examples/grid/misc-margin-helpers.vue
+++ b/packages/docs/src/examples/grid/misc-margin-helpers.vue
@@ -7,8 +7,8 @@
         </v-sheet>
       </v-col>
       <v-col
-        md="4"
         class="ms-auto"
+        md="4"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-md-4 .ms-auto
@@ -18,16 +18,16 @@
 
     <v-row>
       <v-col
-        md="4"
         class="ms-md-auto"
+        md="4"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-md-4 .ms-md-auto
         </v-sheet>
       </v-col>
       <v-col
-        md="4"
         class="ms-md-auto"
+        md="4"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-md-4 .ms-md-auto
@@ -37,8 +37,8 @@
 
     <v-row>
       <v-col
-        cols="auto"
         class="me-auto"
+        cols="auto"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-auto .me-auto
diff --git a/packages/docs/src/examples/grid/misc-nested-grid.vue b/packages/docs/src/examples/grid/misc-nested-grid.vue
index 812f1e7c74c..e4ddb7e596a 100644
--- a/packages/docs/src/examples/grid/misc-nested-grid.vue
+++ b/packages/docs/src/examples/grid/misc-nested-grid.vue
@@ -6,7 +6,7 @@
           Level 1: .v-col-8
         </v-sheet>
 
-        <v-row no-gutters class="bg-red">
+        <v-row class="bg-red" no-gutters>
           <v-col
             cols="8"
           >
diff --git a/packages/docs/src/examples/grid/misc-unique-layouts.vue b/packages/docs/src/examples/grid/misc-unique-layouts.vue
index 4d98d2482c3..85ea116e3aa 100644
--- a/packages/docs/src/examples/grid/misc-unique-layouts.vue
+++ b/packages/docs/src/examples/grid/misc-unique-layouts.vue
@@ -8,8 +8,8 @@
       >
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           .col-12 .col-md-8
         </v-card>
@@ -20,8 +20,8 @@
       >
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           .col-6 .col-md-4
         </v-card>
@@ -38,8 +38,8 @@
       >
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           .col-6 .col-md-4
         </v-card>
@@ -55,8 +55,8 @@
       >
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           .col-6
         </v-card>
diff --git a/packages/docs/src/examples/grid/misc-variable-content.vue b/packages/docs/src/examples/grid/misc-variable-content.vue
index 2076bb893c4..a16942778f9 100644
--- a/packages/docs/src/examples/grid/misc-variable-content.vue
+++ b/packages/docs/src/examples/grid/misc-variable-content.vue
@@ -8,8 +8,8 @@
       <v-col lg="2">
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           1 of 3
         </v-card>
@@ -17,8 +17,8 @@
       <v-col md="auto">
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           Variable width content
         </v-card>
@@ -26,8 +26,8 @@
       <v-col lg="2">
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           3 of 3
         </v-card>
@@ -37,8 +37,8 @@
       <v-col>
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           1 of 3
         </v-card>
@@ -46,8 +46,8 @@
       <v-col md="auto">
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           Variable width content
         </v-card>
@@ -55,8 +55,8 @@
       <v-col lg="2">
         <v-card
           class="pa-2"
-          variant="outlined"
           rounded="0"
+          variant="outlined"
         >
           3 of 3
         </v-card>
diff --git a/packages/docs/src/examples/grid/prop-align.vue b/packages/docs/src/examples/grid/prop-align.vue
index b742d22ab74..04ebbb0a871 100644
--- a/packages/docs/src/examples/grid/prop-align.vue
+++ b/packages/docs/src/examples/grid/prop-align.vue
@@ -5,8 +5,8 @@
     >
       <v-row
         align="start"
-        no-gutters
         style="height: 150px;"
+        no-gutters
       >
         <v-col
           v-for="n in 3"
@@ -24,8 +24,8 @@
     >
       <v-row
         align="center"
-        no-gutters
         style="height: 150px;"
+        no-gutters
       >
         <v-col
           v-for="n in 3"
@@ -43,8 +43,8 @@
     >
       <v-row
         align="end"
-        no-gutters
         style="height: 150px;"
+        no-gutters
       >
         <v-col
           v-for="n in 3"
@@ -59,8 +59,8 @@
 
     <v-container class="bg-surface-variant">
       <v-row
-        no-gutters
         style="height: 150px;"
+        no-gutters
       >
         <v-col align-self="start">
           <v-sheet class="pa-2 ma-2">
diff --git a/packages/docs/src/examples/grid/prop-offset-breakpoint.vue b/packages/docs/src/examples/grid/prop-offset-breakpoint.vue
index adcef13beca..2f6cce02ea2 100644
--- a/packages/docs/src/examples/grid/prop-offset-breakpoint.vue
+++ b/packages/docs/src/examples/grid/prop-offset-breakpoint.vue
@@ -5,18 +5,18 @@
       no-gutters
     >
       <v-col
-        sm="5"
         md="6"
+        sm="5"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-sm-5 .v-col-md-6
         </v-sheet>
       </v-col>
       <v-col
-        sm="5"
-        offset-sm="2"
         md="6"
         offset-md="0"
+        offset-sm="2"
+        sm="5"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-sm-5 .offset-sm-2 .v-col-md-6 .offset-md-0
@@ -25,20 +25,20 @@
     </v-row>
     <v-row no-gutters>
       <v-col
-        sm="6"
-        md="5"
         lg="6"
+        md="5"
+        sm="6"
       >
         <v-sheet class="pa-2 ma-2">
           sm-6 md-5 lg-6
         </v-sheet>
       </v-col>
       <v-col
-        sm="6"
-        md="5"
-        offset-md="2"
         lg="6"
+        md="5"
         offset-lg="0"
+        offset-md="2"
+        sm="6"
       >
         <v-sheet class="pa-2 ma-2">
           .v-col-sm-6 md-5 .offset-md-2 .v-col-lg-6 .offset-lg-0
diff --git a/packages/docs/src/examples/overflow/overflow.vue b/packages/docs/src/examples/overflow/overflow.vue
index 9a40d1ee585..acedfc4d502 100644
--- a/packages/docs/src/examples/overflow/overflow.vue
+++ b/packages/docs/src/examples/overflow/overflow.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="auto">
-      <v-card width="200" height="200" class="overflow-auto">
+      <v-card class="overflow-auto" height="200" width="200">
         <v-card-text>
           <h3>Overflow Auto</h3>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
@@ -12,7 +12,7 @@
       </v-card>
     </v-col>
     <v-col cols="auto">
-      <v-card width="200" height="200" class="overflow-hidden">
+      <v-card class="overflow-hidden" height="200" width="200">
         <v-card-text>
           <h3>Overflow Hidden</h3>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
@@ -23,7 +23,7 @@
       </v-card>
     </v-col>
     <v-col cols="auto">
-      <v-card width="200" height="200" class="overflow-visible">
+      <v-card class="overflow-visible" height="200" width="200">
         <v-card-text>
           <h3>Overflow visible</h3>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
diff --git a/packages/docs/src/examples/scroll/usage.vue b/packages/docs/src/examples/scroll/usage.vue
index 81cd19f0fae..496fa9e74c9 100644
--- a/packages/docs/src/examples/scroll/usage.vue
+++ b/packages/docs/src/examples/scroll/usage.vue
@@ -6,10 +6,10 @@
           <v-select
             v-model="target"
             :items="targets"
-            hide-details
             label="Target"
             prepend-inner-icon="mdi-bullseye"
             variant="outlined"
+            hide-details
           ></v-select>
         </v-col>
 
@@ -17,7 +17,6 @@
           <v-text-field
             v-if="target === 'By Number'"
             v-model.number="number"
-            hide-details
             label="Number"
             max="2000"
             min="0"
@@ -25,6 +24,7 @@
             step="1"
             type="number"
             variant="outlined"
+            hide-details
             @keydown.enter="onClick"
           ></v-text-field>
 
@@ -32,20 +32,20 @@
             v-else-if="target === 'By Query Selector'"
             v-model="query"
             :items="queries"
-            hide-details
             label="Query Selector"
             prepend-inner-icon="mdi-format-header-1"
             variant="outlined"
+            hide-details
           ></v-select>
 
           <v-select
             v-else
             v-model="component"
             :items="components"
-            hide-details
             label="Component / Element"
             prepend-inner-icon="mdi-card-bulleted"
             variant="outlined"
+            hide-details
           ></v-select>
         </v-col>
 
@@ -53,17 +53,16 @@
           <v-select
             v-model="easing"
             :items="easings"
-            hide-details
             label="Easing"
             prepend-inner-icon="mdi-sine-wave"
             variant="outlined"
+            hide-details
           ></v-select>
         </v-col>
 
         <v-col cols="12" md="6">
           <v-text-field
             v-model.number="duration"
-            hide-details
             label="Duration"
             max="2000"
             min="50"
@@ -71,6 +70,7 @@
             step="1"
             type="number"
             variant="outlined"
+            hide-details
           ></v-text-field>
         </v-col>
 
@@ -78,33 +78,33 @@
           <v-slider
             v-model="offset"
             append-icon="mdi-axis-arrow"
-            hide-details
             label="Offset"
             max="100"
             min="-100"
             step="1"
+            hide-details
             thumb-label
           ></v-slider>
         </v-col>
 
         <v-divider class="my-3 mx-n1"></v-divider>
 
-        <v-col cols="10" class="mt-n2">
+        <v-col class="mt-n2" cols="10">
           <v-btn
-            block
             color="surface-variant"
-            variant="flat"
             text="Go To"
+            variant="flat"
+            block
             @click="onClick"
           ></v-btn>
         </v-col>
 
-        <v-col cols="2" class="mt-n2">
+        <v-col class="mt-n2" cols="2">
           <v-btn
-            block
+            color="error"
             text="Reset"
             variant="outlined"
-            color="error"
+            block
             @click="onClickReset"
           ></v-btn>
         </v-col>
@@ -130,9 +130,9 @@
 
         <v-card
           :ref="instance => cards.card1 = instance"
-          flat
-          title="Card 1"
           text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+          title="Card 1"
+          flat
         ></v-card>
 
         <div style="height: 420px;"></div>
@@ -145,9 +145,9 @@
 
         <v-card
           :ref="instance => cards.card2 = instance"
-          flat
-          title="Card 2"
           text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+          title="Card 2"
+          flat
         ></v-card>
 
         <div style="height: 420px;"></div>
@@ -160,9 +160,9 @@
 
         <v-card
           :ref="instance => cards.card3 = instance"
-          flat
-          title="Card 3"
           text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+          title="Card 3"
+          flat
         ></v-card>
 
         <div style="height: 420px;"></div>
@@ -175,9 +175,9 @@
 
         <v-card
           :ref="instance => cards.card4 = instance"
-          flat
-          title="Card 4"
           text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+          title="Card 4"
+          flat
         ></v-card>
 
         <div style="height: 180px;"></div>
@@ -279,6 +279,10 @@
   import { useGoTo } from 'vuetify'
 
   export default {
+    setup () {
+      const goTo = useGoTo()
+      return { goTo }
+    },
     data () {
       return {
         duration: 300,
@@ -340,13 +344,12 @@
     },
     methods: {
       onClick () {
-        const goTo = useGoTo()
         if (this.target === 'By Number') {
-          goTo(this.number, this.options)
+          this.goTo(this.number, this.options)
         } else if (this.target === 'By Query Selector') {
-          goTo(this.query, this.options)
+          this.goTo(this.query, this.options)
         } else if (this.target === 'By Component / Element') {
-          goTo(this.cards[this.component].$el, this.options)
+          this.goTo(this.cards[this.component].$el, this.options)
         }
       },
       onClickReset () {
@@ -358,8 +361,7 @@
         this.query = '#heading-3'
         this.target = 'By Number'
 
-        const goTo = useGoTo()
-        goTo(0, { container: '#goto-container-example' })
+        this.goTo(0, { container: '#goto-container-example' })
       },
     },
   }
diff --git a/packages/docs/src/examples/spacing/negative-margin.vue b/packages/docs/src/examples/spacing/negative-margin.vue
index cdd8e92c852..ec42d51bb99 100644
--- a/packages/docs/src/examples/spacing/negative-margin.vue
+++ b/packages/docs/src/examples/spacing/negative-margin.vue
@@ -2,16 +2,16 @@
   <div>
     <v-card
       class="mx-auto"
+      color="secondary"
       height="100"
       max-width="200"
-      color="secondary"
     ></v-card>
     <v-card
       class="mt-n12 mx-auto"
+      color="secondary"
       elevation="12"
       height="200"
       max-width="300"
-      color="secondary"
     >
       <v-card-text>This card has negative top margin applied</v-card-text>
     </v-card>
diff --git a/packages/docs/src/examples/text-and-typography/text-decoration.vue b/packages/docs/src/examples/text-and-typography/text-decoration.vue
index 3bb953116c2..774503ca420 100644
--- a/packages/docs/src/examples/text-and-typography/text-decoration.vue
+++ b/packages/docs/src/examples/text-and-typography/text-decoration.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="d-flex justify-space-between flex-row">
     <a
-      href="#"
       class="text-decoration-none"
+      href="#"
     >
       Non-underlined link
     </a>
diff --git a/packages/docs/src/examples/transitions/misc-expand-x.vue b/packages/docs/src/examples/transitions/misc-expand-x.vue
index 22fea655a40..32c0cca9a18 100644
--- a/packages/docs/src/examples/transitions/misc-expand-x.vue
+++ b/packages/docs/src/examples/transitions/misc-expand-x.vue
@@ -16,9 +16,9 @@
       <v-expand-transition>
         <v-card
           v-show="expand"
+          class="mx-auto bg-secondary"
           height="100"
           width="100"
-          class="mx-auto bg-secondary"
         ></v-card>
       </v-expand-transition>
     </v-col>
@@ -37,9 +37,9 @@
       <v-expand-x-transition>
         <v-card
           v-show="expand2"
+          class="mx-auto bg-secondary"
           height="100"
           width="100"
-          class="mx-auto bg-secondary"
         ></v-card>
       </v-expand-x-transition>
     </v-col>
diff --git a/packages/docs/src/examples/transitions/misc-fab.vue b/packages/docs/src/examples/transitions/misc-fab.vue
index 6eab0a975f5..40a863405b7 100644
--- a/packages/docs/src/examples/transitions/misc-fab.vue
+++ b/packages/docs/src/examples/transitions/misc-fab.vue
@@ -3,8 +3,8 @@
     <v-menu transition="fab-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          dark
           color="primary"
+          dark
           v-bind="props"
         >
           Fab Transition
diff --git a/packages/docs/src/examples/transitions/misc-fade.vue b/packages/docs/src/examples/transitions/misc-fade.vue
index 341760aabf9..9d5d76ca31f 100644
--- a/packages/docs/src/examples/transitions/misc-fade.vue
+++ b/packages/docs/src/examples/transitions/misc-fade.vue
@@ -3,8 +3,8 @@
     <v-menu transition="fade-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          dark
           color="primary"
+          dark
           v-bind="props"
         >
           Fade Transition
diff --git a/packages/docs/src/examples/transitions/misc-scale.vue b/packages/docs/src/examples/transitions/misc-scale.vue
index 3da441afdeb..4e1f4b8394b 100644
--- a/packages/docs/src/examples/transitions/misc-scale.vue
+++ b/packages/docs/src/examples/transitions/misc-scale.vue
@@ -3,8 +3,8 @@
     <v-menu transition="scale-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          dark
           color="primary"
+          dark
           v-bind="props"
         >
           Scale Transition
diff --git a/packages/docs/src/examples/transitions/misc-scroll-x.vue b/packages/docs/src/examples/transitions/misc-scroll-x.vue
index 2d25c5f1765..4233446cf62 100644
--- a/packages/docs/src/examples/transitions/misc-scroll-x.vue
+++ b/packages/docs/src/examples/transitions/misc-scroll-x.vue
@@ -5,8 +5,8 @@
     <v-menu transition="scroll-x-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="primary"
           class="ma-2"
+          color="primary"
           v-bind="props"
         >
           Scroll X Transition
@@ -28,8 +28,8 @@
     <v-menu transition="scroll-x-reverse-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="secondary"
           class="ma-2"
+          color="secondary"
           v-bind="props"
         >
           Scroll X Reverse Transition
diff --git a/packages/docs/src/examples/transitions/misc-scroll-y.vue b/packages/docs/src/examples/transitions/misc-scroll-y.vue
index 382369750ee..950f1abed84 100644
--- a/packages/docs/src/examples/transitions/misc-scroll-y.vue
+++ b/packages/docs/src/examples/transitions/misc-scroll-y.vue
@@ -5,8 +5,8 @@
     <v-menu transition="scroll-y-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="primary"
           class="ma-2"
+          color="primary"
           v-bind="props"
         >
           Scroll Y Transition
@@ -28,8 +28,8 @@
     <v-menu transition="scroll-y-reverse-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="secondary"
           class="ma-2"
+          color="secondary"
           v-bind="props"
         >
           Scroll Y Reverse Transition
diff --git a/packages/docs/src/examples/transitions/misc-slide-x.vue b/packages/docs/src/examples/transitions/misc-slide-x.vue
index 435847378ee..f61d69cb0ee 100644
--- a/packages/docs/src/examples/transitions/misc-slide-x.vue
+++ b/packages/docs/src/examples/transitions/misc-slide-x.vue
@@ -5,8 +5,8 @@
     <v-menu transition="slide-x-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="primary"
           class="ma-2"
+          color="primary"
           v-bind="props"
         >
           Slide X Transition
@@ -28,8 +28,8 @@
     <v-menu transition="slide-x-reverse-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="secondary"
           class="ma-2"
+          color="secondary"
           v-bind="props"
         >
           Slide X Reverse Transition
diff --git a/packages/docs/src/examples/transitions/misc-slide-y.vue b/packages/docs/src/examples/transitions/misc-slide-y.vue
index b7c25f5add0..a57ee08cec2 100644
--- a/packages/docs/src/examples/transitions/misc-slide-y.vue
+++ b/packages/docs/src/examples/transitions/misc-slide-y.vue
@@ -5,8 +5,8 @@
     <v-menu transition="slide-y-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="primary"
           class="ma-2"
+          color="primary"
           v-bind="props"
         >
           Slide Y Transition
@@ -28,8 +28,8 @@
     <v-menu transition="slide-y-reverse-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="secondary"
           class="ma-2"
+          color="secondary"
           v-bind="props"
         >
           Slide Y Reverse Transition
diff --git a/packages/docs/src/examples/transitions/misc-todo.vue b/packages/docs/src/examples/transitions/misc-todo.vue
index 6e0b726a9df..10df5b76edc 100644
--- a/packages/docs/src/examples/transitions/misc-todo.vue
+++ b/packages/docs/src/examples/transitions/misc-todo.vue
@@ -30,8 +30,8 @@
     <v-divider class="mt-4"></v-divider>
 
     <v-row
-      class="my-1"
       align="center"
+      class="my-1"
     >
       <strong class="mx-4 text-info-darken-2">
         Remaining: {{ remainingTasks }}
@@ -56,8 +56,8 @@
     <v-card v-if="tasks.length > 0">
       <v-slide-y-transition
         class="py-0"
-        group
         tag="v-list"
+        group
       >
         <template v-for="(task, i) in tasks" :key="`${i}-${task.text}`">
           <v-divider
diff --git a/packages/docs/src/examples/transitions/prop-custom-origin.vue b/packages/docs/src/examples/transitions/prop-custom-origin.vue
index 5c1bc89fc7b..7c36696c22e 100644
--- a/packages/docs/src/examples/transitions/prop-custom-origin.vue
+++ b/packages/docs/src/examples/transitions/prop-custom-origin.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="text-center">
     <v-menu
-      transition="scale-transition"
       origin="center center"
+      transition="scale-transition"
     >
       <template v-slot:activator="{ props }">
         <v-btn
-          dark
           color="primary"
+          dark
           v-bind="props"
         >
           Scale Transition
diff --git a/packages/docs/src/examples/transitions/usage.vue b/packages/docs/src/examples/transitions/usage.vue
index c6a810e7772..0e65a6d1ad1 100644
--- a/packages/docs/src/examples/transitions/usage.vue
+++ b/packages/docs/src/examples/transitions/usage.vue
@@ -3,8 +3,8 @@
     <v-menu transition="slide-x-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="primary"
           class="ma-2"
+          color="primary"
           v-bind="props"
         >
           Slide X Transition
@@ -26,8 +26,8 @@
     <v-menu transition="scroll-y-transition">
       <template v-slot:activator="{ props }">
         <v-btn
-          color="secondary"
           class="ma-2"
+          color="secondary"
           v-bind="props"
         >
           Scroll Y Transition
diff --git a/packages/docs/src/examples/v-alert/prop-closable.vue b/packages/docs/src/examples/v-alert/prop-closable.vue
index 0e3b9bc90b0..31dba84d0b7 100644
--- a/packages/docs/src/examples/v-alert/prop-closable.vue
+++ b/packages/docs/src/examples/v-alert/prop-closable.vue
@@ -3,11 +3,11 @@
     <v-alert
       v-model="alert"
       border="start"
-      variant="tonal"
-      closable
       close-label="Close Alert"
       color="deep-purple-accent-4"
       title="Closable Alert"
+      variant="tonal"
+      closable
     >
       Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
 
diff --git a/packages/docs/src/examples/v-alert/prop-content.vue b/packages/docs/src/examples/v-alert/prop-content.vue
index 73c076fc8d0..5b973bf15c0 100644
--- a/packages/docs/src/examples/v-alert/prop-content.vue
+++ b/packages/docs/src/examples/v-alert/prop-content.vue
@@ -1,6 +1,6 @@
 <template>
   <v-alert
-    title="Alert title"
     text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+    title="Alert title"
   ></v-alert>
 </template>
diff --git a/packages/docs/src/examples/v-alert/prop-density.vue b/packages/docs/src/examples/v-alert/prop-density.vue
index c0552e79e18..beb0cf9acf5 100644
--- a/packages/docs/src/examples/v-alert/prop-density.vue
+++ b/packages/docs/src/examples/v-alert/prop-density.vue
@@ -1,8 +1,8 @@
 <template>
   <v-alert
     density="compact"
-    type="warning"
-    title="Alert title"
     text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+    title="Alert title"
+    type="warning"
   ></v-alert>
 </template>
diff --git a/packages/docs/src/examples/v-alert/prop-icon.vue b/packages/docs/src/examples/v-alert/prop-icon.vue
index 4fa7348ff80..4486af30442 100644
--- a/packages/docs/src/examples/v-alert/prop-icon.vue
+++ b/packages/docs/src/examples/v-alert/prop-icon.vue
@@ -2,9 +2,9 @@
   <div>
     <v-alert
       color="#2A3B4D"
-      theme="dark"
-      icon="mdi-firework"
       density="compact"
+      icon="mdi-firework"
+      theme="dark"
     >
       Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi. Quisque ut nisi. Maecenas malesuada.
     </v-alert>
@@ -13,8 +13,8 @@
 
     <v-alert
       color="#C51162"
-      theme="dark"
       icon="mdi-material-design"
+      theme="dark"
       border
     >
       Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. In ut quam vitae odio lacinia tincidunt.
@@ -24,8 +24,8 @@
 
     <v-alert
       color="primary"
-      theme="dark"
       icon="$vuetify"
+      theme="dark"
       prominent
     >
       Praesent congue erat at massa. Nullam vel sem. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur at lacus ac velit ornare lobortis.
diff --git a/packages/docs/src/examples/v-alert/prop-outlined.vue b/packages/docs/src/examples/v-alert/prop-outlined.vue
index 30a9d9dd423..a9c5d0c1b79 100644
--- a/packages/docs/src/examples/v-alert/prop-outlined.vue
+++ b/packages/docs/src/examples/v-alert/prop-outlined.vue
@@ -23,10 +23,10 @@
     <br>
 
     <v-alert
-      variant="outlined"
+      border="top"
       type="warning"
+      variant="outlined"
       prominent
-      border="top"
     >
       Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum. Nullam vel sem. Pellentesque dapibus hendrerit tortor.
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/prop-prominent.vue b/packages/docs/src/examples/v-alert/prop-prominent.vue
index cff503713de..d9c8ceab6f1 100644
--- a/packages/docs/src/examples/v-alert/prop-prominent.vue
+++ b/packages/docs/src/examples/v-alert/prop-prominent.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <v-alert
-      prominent
       type="error"
+      prominent
     >
       <template v-slot:text>
         Nunc nonummy metus. Nunc interdum lacus sit amet orci Nullam dictum felis eu pede.
@@ -28,8 +28,8 @@
 
     <v-alert
       icon="mdi-shield-lock-outline"
-      prominent
       type="info"
+      prominent
     >
       Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Sed in libero ut nibh placerat accumsan.. Curabitur blandit mollis lacus. Curabitur blandit mollis lacus.
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/prop-rounded.vue b/packages/docs/src/examples/v-alert/prop-rounded.vue
index 52d1b249b7b..e845c6ef0c0 100644
--- a/packages/docs/src/examples/v-alert/prop-rounded.vue
+++ b/packages/docs/src/examples/v-alert/prop-rounded.vue
@@ -2,8 +2,8 @@
   <div>
     <v-alert
       rounded="0"
-      type="info"
       title="Info"
+      type="info"
     >
       I'm an alert with no rounded borders. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur recusandae, est itaque laboriosam amet officia? Officia repellat provident sed est adipisci voluptatibus, voluptas reprehenderit dicta voluptatum, optio enim, placeat nostrum.
     </v-alert>
@@ -12,9 +12,9 @@
 
     <v-alert
       rounded="xl"
-      variant="outlined"
       title="Success"
       type="success"
+      variant="outlined"
     >
       I'm an alert with extra large rounded borders. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim cumque vel sapiente suscipit officia ullam quam possimus provident id neque, cupiditate fuga animi expedita, beatae ipsam in veniam inventore totam.
     </v-alert>
@@ -22,8 +22,8 @@
     <br>
 
     <v-alert
-      title="Warning"
       rounded="pill"
+      title="Warning"
       type="warning"
       prominent
     >
@@ -33,10 +33,10 @@
     <br>
 
     <v-alert
-      title="Error"
-      prominent
       rounded="t-xl b-lg"
+      title="Error"
       type="error"
+      prominent
     >
       I'm an alert with top and bottom borders. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum esse quis eius delectus odio repellat voluptates ullam doloribus eaque dignissimos
     </v-alert>
diff --git a/packages/docs/src/examples/v-alert/prop-type.vue b/packages/docs/src/examples/v-alert/prop-type.vue
index 5d6cff3241d..8faf84b4d8f 100644
--- a/packages/docs/src/examples/v-alert/prop-type.vue
+++ b/packages/docs/src/examples/v-alert/prop-type.vue
@@ -1,7 +1,7 @@
 <template>
   <v-alert
-    type="success"
-    title="Alert title"
     text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+    title="Alert title"
+    type="success"
   ></v-alert>
 </template>
diff --git a/packages/docs/src/examples/v-alert/prop-variant.vue b/packages/docs/src/examples/v-alert/prop-variant.vue
index 610e2554e15..96a900e763b 100644
--- a/packages/docs/src/examples/v-alert/prop-variant.vue
+++ b/packages/docs/src/examples/v-alert/prop-variant.vue
@@ -1,8 +1,8 @@
 <template>
   <v-alert
-    type="info"
-    title="Alert title"
     text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+    title="Alert title"
+    type="info"
     variant="tonal"
   ></v-alert>
 </template>
diff --git a/packages/docs/src/examples/v-alert/usage.vue b/packages/docs/src/examples/v-alert/usage.vue
index 5aefa53fe50..ed185817612 100644
--- a/packages/docs/src/examples/v-alert/usage.vue
+++ b/packages/docs/src/examples/v-alert/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -42,14 +42,10 @@
 
       <v-checkbox v-model="icon" label="Custom icon"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-alert'
   const model = ref('default')
   const alert = ref(true)
diff --git a/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue b/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue
index 228a47cfd7e..60b756c0565 100644
--- a/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue
+++ b/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue
@@ -1,8 +1,8 @@
 <template>
   <v-layout style="overflow: hidden">
     <v-app-bar
-      absolute
       color="deep-purple"
+      absolute
     >
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
@@ -14,8 +14,8 @@
       temporary
     >
       <v-list
-        nav
         dense
+        nav
       >
         <v-list-item-group
           v-model="group"
diff --git a/packages/docs/src/examples/v-app-bar/misc-menu.vue b/packages/docs/src/examples/v-app-bar/misc-menu.vue
index f300df4b9d6..0103f1e8857 100644
--- a/packages/docs/src/examples/v-app-bar/misc-menu.vue
+++ b/packages/docs/src/examples/v-app-bar/misc-menu.vue
@@ -1,14 +1,14 @@
 <template>
   <v-layout>
     <v-app-bar
-      absolute
       color="#6A76AB"
-      dark
-      shrink-on-scroll
-      prominent
+      scroll-target="#scrolling-techniques-4"
       src="https://picsum.photos/1920/1080?random"
+      absolute
+      dark
       fade-img-on-scroll
-      scroll-target="#scrolling-techniques-4"
+      prominent
+      shrink-on-scroll
     >
       <template v-slot:image>
         <v-img gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"></v-img>
@@ -31,8 +31,8 @@
       <v-menu>
         <template v-slot:activator="{ props }">
           <v-btn
-            icon
             color="yellow"
+            icon
             v-bind="props"
           >
             <v-icon>mdi-dots-vertical</v-icon>
diff --git a/packages/docs/src/examples/v-app-bar/prop-dense.vue b/packages/docs/src/examples/v-app-bar/prop-dense.vue
index eac08368006..41a992cc273 100644
--- a/packages/docs/src/examples/v-app-bar/prop-dense.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-dense.vue
@@ -2,8 +2,8 @@
   <div>
     <v-app-bar
       color="deep-purple-accent-4"
-      dense
       dark
+      dense
     >
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
diff --git a/packages/docs/src/examples/v-app-bar/prop-image.vue b/packages/docs/src/examples/v-app-bar/prop-image.vue
index ca3bb62023f..4bed7ceee97 100644
--- a/packages/docs/src/examples/v-app-bar/prop-image.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-image.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card max-width="448" class="mx-auto" color="grey-lighten-3">
+  <v-card class="mx-auto" color="grey-lighten-3" max-width="448">
     <v-layout>
       <v-app-bar
         color="teal-darken-4"
@@ -41,8 +41,8 @@
               cols="12"
             >
               <v-card
-                :title="`Content ${n}`"
                 :subtitle="`Subtitle for Content ${n}`"
+                :title="`Content ${n}`"
                 text="Lorem ipsum dolor sit amet consectetur, adipisicing elit.?"
               ></v-card>
             </v-col>
diff --git a/packages/docs/src/examples/v-app-bar/prop-prominent.vue b/packages/docs/src/examples/v-app-bar/prop-prominent.vue
index 491f1e7f70b..9bb5c723f25 100644
--- a/packages/docs/src/examples/v-app-bar/prop-prominent.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-prominent.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card max-width="448" class="mx-auto">
+  <v-card class="mx-auto" max-width="448">
     <v-layout>
       <v-app-bar
         color="info"
@@ -21,15 +21,15 @@
       <v-main>
         <v-container fluid>
           <v-card
-            border
             class="mb-2"
             density="compact"
             prepend-avatar="https://randomuser.me/api/portraits/women/10.jpg"
             subtitle="Salsa, merengue, y cumbia"
             title="Cuba"
             variant="text"
+            border
           >
-            <v-img src="https://picsum.photos/512/128?image=660" height="128" cover></v-img>
+            <v-img height="128" src="https://picsum.photos/512/128?image=660" cover></v-img>
 
             <v-card-text>
               During my last trip to South America, I spent 2 weeks traveling through Patagonia in Chile.
@@ -43,14 +43,14 @@
           </v-card>
 
           <v-card
-            border
             density="comfortable"
             prepend-avatar="https://randomuser.me/api/portraits/women/17.jpg"
             subtitle="Salsa, merengue, y cumbia"
             title="Florida"
             variant="text"
+            border
           >
-            <v-img src="https://picsum.photos/512/128?random" height="128" cover></v-img>
+            <v-img height="128" src="https://picsum.photos/512/128?random" cover></v-img>
 
             <v-card-text>
               During my last trip to Florida, I spent 2 weeks traveling through the Everglades.
diff --git a/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue b/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue
index 1be1c45ad43..cd25b2b1e69 100644
--- a/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue
@@ -1,6 +1,6 @@
 <template>
-  <app-sheet class="mb-6">
-    <usage-example
+  <AppSheet class="mb-6">
+    <ExamplesUsageExample
       v-model="model"
       :code="code"
       :name="name"
@@ -10,9 +10,9 @@
         <v-main id="scroll-behavior-layout" class="pt-0" scrollable>
           <v-app-bar
             v-bind="props"
-            style="position: sticky"
-            scroll-target="#scroll-behavior-layout > .v-main__scroller"
             color="secondary"
+            scroll-target="#scroll-behavior-layout > .v-main__scroller"
+            style="position: sticky"
           >
             <template v-slot:prepend>
               <v-app-bar-nav-icon></v-app-bar-nav-icon>
@@ -34,20 +34,16 @@
       </v-layout>
 
       <template v-slot:configuration>
-        <v-checkbox v-for="option in behaviors" :key="option.value" v-model="selectedBehaviors" :value="option.value" :label="option.title"></v-checkbox>
+        <v-checkbox v-for="option in behaviors" :key="option.value" v-model="selectedBehaviors" :label="option.title" :value="option.value"></v-checkbox>
         <v-divider></v-divider>
-        <v-checkbox v-model="selectedBehaviors" value="inverted" label="Inverted"></v-checkbox>
-        <v-slider v-model="scrollThreshold" label="Threshold" step="1" min="0" max="1000"></v-slider>
+        <v-checkbox v-model="selectedBehaviors" label="Inverted" value="inverted"></v-checkbox>
+        <v-slider v-model="scrollThreshold" label="Threshold" max="1000" min="0" step="1"></v-slider>
       </template>
-    </usage-example>
-  </app-sheet>
+    </ExamplesUsageExample>
+  </AppSheet>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-app-bar'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-app-bar/usage.vue b/packages/docs/src/examples/v-app-bar/usage.vue
index ff5c7186f9b..90f627860d3 100644
--- a/packages/docs/src/examples/v-app-bar/usage.vue
+++ b/packages/docs/src/examples/v-app-bar/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -28,16 +28,12 @@
     <template v-slot:configuration>
       <v-checkbox v-model="actions" label="Actions"></v-checkbox>
 
-      <v-slider v-model="elevation" label="Elevation" step="1" min="0" max="24"></v-slider>
+      <v-slider v-model="elevation" label="Elevation" max="24" min="0" step="1"></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-app-bar'
   const model = ref('default')
   const actions = ref(false)
diff --git a/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue b/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue
index 598c4e360a0..08626ca9837 100644
--- a/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue
+++ b/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue
@@ -5,14 +5,14 @@
     <v-autocomplete
       v-model="select"
       v-model:search="search"
-      :loading="loading"
       :items="items"
+      :loading="loading"
       class="mx-4"
       density="comfortable"
-      hide-no-data
-      hide-details
       label="What state are you from?"
       style="max-width: 300px;"
+      hide-details
+      hide-no-data
     ></v-autocomplete>
 
     <v-btn icon="mdi-dots-vertical"></v-btn>
diff --git a/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue b/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue
index c06dd46bb90..458135a970b 100644
--- a/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue
+++ b/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue
@@ -1,95 +1,98 @@
 <template>
-  <v-card theme="dark" class="pa-8 d-flex justify-center flex-wrap">
-    <v-responsive max-width="550">
-      <v-img
-        class="mx-auto mt-12 mb-16"
-        max-height="140"
-        max-width="240"
-        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg"
-      ></v-img>
-
-      <v-autocomplete
-        :items="items"
-        append-inner-icon="mdi-microphone"
-        auto-select-first
-        class="flex-full-width"
-        density="comfortable"
-        item-props
-        menu-icon=""
-        placeholder="Search Google or type a URL"
-        prepend-inner-icon="mdi-magnify"
-        rounded
-        theme="light"
-        variant="solo"
-      ></v-autocomplete>
-
-      <v-container class="text-center">
-        <v-row justify="center" dense>
-          <v-col
-            v-for="(shortcut, i) in shortcuts"
-            :key="i"
-            cols="auto"
+  <v-card class="pa-8 d-flex justify-center flex-wrap" theme="dark">
+    <v-container class="text-center">
+      <v-row justify="center" dense>
+        <v-col cols="12">
+          <v-img
+            class="mx-auto mt-12 mb-16"
+            max-height="140"
+            max-width="240"
+            src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-dark-text.svg"
+          ></v-img>
+        </v-col>
+
+        <v-col cols="12">
+          <v-autocomplete
+            :items="items"
+            append-inner-icon="mdi-microphone"
+            class="mx-auto"
+            density="comfortable"
+            menu-icon=""
+            placeholder="Search Google or type a URL"
+            prepend-inner-icon="mdi-magnify"
+            style="max-width: 350px;"
+            theme="light"
+            variant="solo"
+            auto-select-first
+            item-props
+            rounded
+          ></v-autocomplete>
+        </v-col>
+
+        <v-col
+          v-for="(shortcut, i) in shortcuts"
+          :key="i"
+          cols="auto"
+        >
+          <v-card
+            :href="shortcut.href"
+            class="pa-4"
+            rel="noopener noreferer"
+            target="_blank"
+            width="112"
+            flat
           >
-            <v-card
-              :href="shortcut.href"
-              class="pa-4"
-              flat
-              rel="noopener noreferer"
-              target="_blank"
-              width="112"
-            >
-              <v-avatar :icon="shortcut.icon" color="white" variant="tonal" class="mb-2"></v-avatar>
-
-              <div class="text-caption text-truncate" v-text="shortcut.title"></div>
-            </v-card>
-          </v-col>
+            <v-avatar :icon="shortcut.icon" class="mb-2" color="white" variant="tonal"></v-avatar>
 
-          <v-col cols="auto">
-            <v-dialog v-model="dialog" max-width="500">
-              <template v-slot:activator="{ props }">
-                <v-card flat width="112" v-bind="props" class="pa-4">
+            <div class="text-caption text-truncate" v-text="shortcut.title"></div>
+          </v-card>
+        </v-col>
 
-                  <v-avatar icon="mdi-plus" color="white" variant="tonal" class="mb-2"></v-avatar>
+        <v-col cols="auto">
+          <v-dialog v-model="dialog" max-width="500">
+            <template v-slot:activator="{ props }">
+              <v-card v-bind="props" class="pa-4" width="112" flat>
 
-                  <div class="text-caption text-truncate">Add shortcut</div>
-                </v-card>
-              </template>
+                <v-avatar class="mb-2" color="white" icon="mdi-plus" variant="tonal"></v-avatar>
 
-              <v-card title="Add shortcut" rounded="lg">
-                <template v-slot:text>
-                  <v-label class="text-caption">Name</v-label>
-
-                  <v-text-field density="compact" variant="solo-filled" flat></v-text-field>
-
-                  <v-label class="text-caption">URL</v-label>
-
-                  <v-text-field density="compact" variant="solo-filled" flat></v-text-field>
-                </template>
-
-                <div class="py-4 px-5 text-end">
-                  <v-btn
-                    border
-                    class="text-none me-2"
-                    color="blue"
-                    text="Cancel"
-                    variant="text"
-                    @click="dialog = false"
-                  ></v-btn>
-
-                  <v-btn
-                    class="text-none"
-                    color="blue"
-                    text="Done"
-                    variant="flat"
-                    @click="dialog = false"
-                  ></v-btn>
-                </div>
+                <div class="text-caption text-truncate">Add shortcut</div>
               </v-card>
-            </v-dialog>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-responsive>
+            </template>
+
+            <v-card rounded="lg" title="Add shortcut">
+              <template v-slot:text>
+                <v-label class="text-caption">Name</v-label>
+
+                <v-text-field density="compact" variant="solo-filled" flat></v-text-field>
+
+                <v-label class="text-caption">URL</v-label>
+
+                <v-text-field density="compact" variant="solo-filled" flat></v-text-field>
+              </template>
+
+              <div class="py-4 px-5 text-end">
+                <v-btn
+                  class="text-none me-2"
+                  color="blue"
+                  text="Cancel"
+                  variant="text"
+                  border
+                  @click="dialog = false"
+                ></v-btn>
+
+                <v-btn
+                  class="text-none"
+                  color="blue"
+                  text="Done"
+                  variant="flat"
+                  @click="dialog = false"
+                ></v-btn>
+              </div>
+            </v-card>
+          </v-dialog>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-card>
 </template>
 
diff --git a/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue b/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue
index bd766872f66..ed8bf707562 100644
--- a/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue
+++ b/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue
@@ -11,10 +11,10 @@
         v-model="model"
         :hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
         :items="states"
-        :readonly="!isEditing"
         :label="`State — ${isEditing ? 'Editable' : 'Readonly'}`"
-        persistent-hint
+        :readonly="!isEditing"
         prepend-icon="mdi-city"
+        persistent-hint
       >
         <template v-slot:append>
           <v-slide-x-reverse-transition mode="out-in">
diff --git a/packages/docs/src/examples/v-autocomplete/prop-filter.vue b/packages/docs/src/examples/v-autocomplete/prop-filter.vue
index 044a56a9cae..3d8eac1f090 100644
--- a/packages/docs/src/examples/v-autocomplete/prop-filter.vue
+++ b/packages/docs/src/examples/v-autocomplete/prop-filter.vue
@@ -4,7 +4,7 @@
     color="purple-lighten-1"
     max-width="500"
   >
-    <v-toolbar flat color="purple">
+    <v-toolbar color="purple" flat>
       <v-btn icon="mdi-account"></v-btn>
 
       <v-toolbar-title class="font-weight-light">
@@ -33,9 +33,9 @@
       ></v-text-field>
 
       <v-autocomplete
+        :custom-filter="customFilter"
         :disabled="!isEditing"
         :items="states"
-        :custom-filter="customFilter"
         base-color="white"
         item-title="name"
         item-value="abbr"
@@ -59,9 +59,9 @@
     <v-snackbar
       v-model="hasSaved"
       :timeout="2000"
-      attach
-      position="absolute"
       location="bottom left"
+      position="absolute"
+      attach
     >
       Your profile has been updated
     </v-snackbar>
diff --git a/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue b/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue
index cbc3263e389..335346779f4 100644
--- a/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue
+++ b/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue
@@ -1,8 +1,8 @@
 <template>
   <v-card
     :loading="isUpdating"
-    color="blue-grey-darken-1"
     class="mx-auto"
+    color="blue-grey-darken-1"
     max-width="420"
   >
     <template v-slot:loader="{ isActive }">
@@ -15,9 +15,9 @@
     </template>
 
     <v-img
-      cover
       height="200"
       src="https://cdn.vuetifyjs.com/images/cards/dark-beach.jpg"
+      cover
     >
       <v-row class="pa-3">
         <v-col cols="12">
@@ -29,8 +29,8 @@
             <template v-slot:activator="{ props }">
               <v-btn
                 v-bind="props"
-                icon="mdi-dots-vertical"
                 density="comfortable"
+                icon="mdi-dots-vertical"
                 variant="tonal"
               ></v-btn>
             </template>
@@ -80,12 +80,12 @@
               v-model="friends"
               :disabled="isUpdating"
               :items="people"
-              chips
-              closable-chips
               color="blue-grey-lighten-2"
               item-title="name"
               item-value="name"
               label="Select"
+              chips
+              closable-chips
               multiple
             >
               <template v-slot:chip="{ props, item }">
@@ -100,8 +100,8 @@
                 <v-list-item
                   v-bind="props"
                   :prepend-avatar="item.raw.avatar"
-                  :title="item.raw.name"
                   :subtitle="item.raw.group"
+                  :title="item.raw.name"
                 ></v-list-item>
               </template>
             </v-autocomplete>
@@ -119,8 +119,8 @@
         class="mt-0 ms-2"
         color="green-lighten-2"
         density="compact"
-        hide-details
         label="Auto Update"
+        hide-details
       ></v-switch>
 
       <v-spacer></v-spacer>
diff --git a/packages/docs/src/examples/v-autocomplete/usage.vue b/packages/docs/src/examples/v-autocomplete/usage.vue
index 91d83adc62b..f2ea41c1697 100644
--- a/packages/docs/src/examples/v-autocomplete/usage.vue
+++ b/packages/docs/src/examples/v-autocomplete/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-autocomplete v-bind="props"></v-autocomplete>
@@ -16,14 +16,10 @@
 
       <v-checkbox v-model="multiple" label="Multiple"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-autocomplete'
   const model = ref('default')
   const clear = ref(false)
diff --git a/packages/docs/src/examples/v-avatar/misc-advanced.vue b/packages/docs/src/examples/v-avatar/misc-advanced.vue
index e930ac489d1..3756cce2a26 100644
--- a/packages/docs/src/examples/v-avatar/misc-advanced.vue
+++ b/packages/docs/src/examples/v-avatar/misc-advanced.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panels variant="popout" class="pa-4">
+  <v-expansion-panels class="pa-4" variant="popout">
     <v-expansion-panel
       v-for="(message, i) in messages"
       :key="i"
@@ -13,8 +13,8 @@
         >
           <v-col
             cols="4"
-            sm="2"
             md="1"
+            sm="2"
           >
             <v-avatar
               size="36px"
@@ -34,8 +34,8 @@
 
           <v-col
             class="hidden-xs-only text-left ms-2"
-            sm="5"
             md="3"
+            sm="5"
           >
             <strong v-html="message.name"></strong>
             <span
diff --git a/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue b/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue
index 362ea353566..fbcd51e6889 100644
--- a/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue
+++ b/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container
-    fluid
     style="height: 300px"
+    fluid
   >
     <v-row justify="center">
       <v-menu
@@ -35,15 +35,15 @@
               </p>
               <v-divider class="my-3"></v-divider>
               <v-btn
-                rounded
                 variant="text"
+                rounded
               >
                 Edit Account
               </v-btn>
               <v-divider class="my-3"></v-divider>
               <v-btn
-                rounded
                 variant="text"
+                rounded
               >
                 Disconnect
               </v-btn>
diff --git a/packages/docs/src/examples/v-avatar/misc-profile-card.vue b/packages/docs/src/examples/v-avatar/misc-profile-card.vue
index d6520acdebb..76c90addf8b 100644
--- a/packages/docs/src/examples/v-avatar/misc-profile-card.vue
+++ b/packages/docs/src/examples/v-avatar/misc-profile-card.vue
@@ -6,20 +6,20 @@
   >
     <v-img
       height="100%"
-      cover
       src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"
+      cover
     >
       <v-avatar
         color="grey"
-        size="150"
         rounded="0"
+        size="150"
       >
-        <v-img cover src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
+        <v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg" cover></v-img>
       </v-avatar>
       <v-list-item
         class="text-white"
-        title="Marcus Obrien"
         subtitle="Network Engineer"
+        title="Marcus Obrien"
       ></v-list-item>
     </v-img>
   </v-card>
diff --git a/packages/docs/src/examples/v-avatar/prop-tile.vue b/packages/docs/src/examples/v-avatar/prop-tile.vue
index e03e490efbe..ee9dc498485 100644
--- a/packages/docs/src/examples/v-avatar/prop-tile.vue
+++ b/packages/docs/src/examples/v-avatar/prop-tile.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="text-center">
     <v-avatar
-      rounded="0"
       color="blue-darken-2"
+      rounded="0"
     >
       <v-icon icon="mdi-alarm"></v-icon>
     </v-avatar>
diff --git a/packages/docs/src/examples/v-avatar/slot-default.vue b/packages/docs/src/examples/v-avatar/slot-default.vue
index 0eddf2ddc82..cd4270dcf37 100644
--- a/packages/docs/src/examples/v-avatar/slot-default.vue
+++ b/packages/docs/src/examples/v-avatar/slot-default.vue
@@ -6,8 +6,8 @@
 
     <v-avatar>
       <v-img
-        src="https://cdn.vuetifyjs.com/images/john.jpg"
         alt="John"
+        src="https://cdn.vuetifyjs.com/images/john.jpg"
       ></v-img>
     </v-avatar>
 
diff --git a/packages/docs/src/examples/v-avatar/usage.vue b/packages/docs/src/examples/v-avatar/usage.vue
index 78c1f304c51..2e290fb755d 100644
--- a/packages/docs/src/examples/v-avatar/usage.vue
+++ b/packages/docs/src/examples/v-avatar/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :options="options"
@@ -19,20 +19,16 @@
 
       <v-slider
         v-model="size"
-        min="40"
+        label="Size"
         max="80"
+        min="40"
         step="1"
-        label="Size"
       ></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const model = ref('default')
   const icon = ref(false)
   const image = ref(false)
diff --git a/packages/docs/src/examples/v-badge/misc-customization.vue b/packages/docs/src/examples/v-badge/misc-customization.vue
index 3b34ea1ad7c..3c81f63fb90 100644
--- a/packages/docs/src/examples/v-badge/misc-customization.vue
+++ b/packages/docs/src/examples/v-badge/misc-customization.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="d-flex justify-space-around align-center flex-column flex-md-row fill-height">
     <v-badge
-      bordered
       color="error"
       icon="mdi-lock"
+      bordered
     >
       <v-btn
         color="error"
@@ -14,12 +14,12 @@
     </v-badge>
 
     <v-badge
-      bordered
-      location="bottom end"
       color="deep-purple-accent-4"
-      dot
+      location="bottom end"
       offset-x="2"
       offset-y="4"
+      bordered
+      dot
     >
       <v-avatar size="large">
         <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
diff --git a/packages/docs/src/examples/v-badge/prop-content.vue b/packages/docs/src/examples/v-badge/prop-content.vue
index 40b97d07dd3..e179869d61b 100644
--- a/packages/docs/src/examples/v-badge/prop-content.vue
+++ b/packages/docs/src/examples/v-badge/prop-content.vue
@@ -3,7 +3,7 @@
     <v-spacer></v-spacer>
 
     <v-btn class="text-none" stacked>
-      <v-badge dot color="success">
+      <v-badge color="success" dot>
         <v-icon>mdi-home-outline</v-icon>
       </v-badge>
     </v-btn>
@@ -13,13 +13,13 @@
     </v-btn>
 
     <v-btn class="text-none" stacked>
-      <v-badge content="9+" color="error">
+      <v-badge color="error" content="9+">
         <v-icon>mdi-store-outline</v-icon>
       </v-badge>
     </v-btn>
 
     <v-btn class="text-none" stacked>
-      <v-badge content="2" color="error">
+      <v-badge color="error" content="2">
         <v-icon>mdi-bell-outline</v-icon>
       </v-badge>
     </v-btn>
diff --git a/packages/docs/src/examples/v-badge/prop-dot.vue b/packages/docs/src/examples/v-badge/prop-dot.vue
index bf849787d9f..8b1c3a2b99f 100644
--- a/packages/docs/src/examples/v-badge/prop-dot.vue
+++ b/packages/docs/src/examples/v-badge/prop-dot.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-toolbar title="Application" color="grey-lighten-3">
+  <v-toolbar color="grey-lighten-3" title="Application">
     <v-btn stacked>
       <v-badge
         color="error"
@@ -13,8 +13,8 @@
 
     <v-btn stacked>
       <v-badge
-        dot
         color="error"
+        dot
       >
         <v-icon icon="mdi-post"></v-icon>
       </v-badge>
@@ -23,8 +23,8 @@
     </v-btn>
 
     <v-btn
-      stacked
       variant="tonal"
+      stacked
     >
       <v-icon icon="mdi-login"></v-icon>
 
diff --git a/packages/docs/src/examples/v-badge/prop-inline.vue b/packages/docs/src/examples/v-badge/prop-inline.vue
index 195037ee2b2..e9dc2ad36e4 100644
--- a/packages/docs/src/examples/v-badge/prop-inline.vue
+++ b/packages/docs/src/examples/v-badge/prop-inline.vue
@@ -1,13 +1,13 @@
 <template>
   <v-list
-    border
     class="mx-auto"
     max-width="256"
+    border
   >
     <v-list-item
-      link
       prepend-icon="mdi-inbox-arrow-down"
       title="Inbox"
+      link
     >
       <template v-slot:append>
         <v-badge
@@ -19,15 +19,15 @@
     </v-list-item>
 
     <v-list-item
-      link
       prepend-icon="mdi-send"
       title="Sent Mail"
+      link
     ></v-list-item>
 
     <v-list-item
-      link
       prepend-icon="mdi-delete"
       title="Trash"
+      link
     >
       <template v-slot:append>
         <v-badge
@@ -39,9 +39,9 @@
     </v-list-item>
 
     <v-list-item
-      link
       prepend-icon="mdi-alert-circle"
       title="Spam"
+      link
     ></v-list-item>
   </v-list>
 </template>
diff --git a/packages/docs/src/examples/v-badge/usage.vue b/packages/docs/src/examples/v-badge/usage.vue
index d093767709f..5b4409e1245 100644
--- a/packages/docs/src/examples/v-badge/usage.vue
+++ b/packages/docs/src/examples/v-badge/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="text-center">
       <v-badge v-bind="props">
@@ -20,19 +20,15 @@
       <v-slider
         v-model="content"
         label="Value"
-        min="0"
         max="100"
+        min="0"
         step="1"
       ></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-badge'
   const model = ref('default')
   const content = ref(0)
diff --git a/packages/docs/src/examples/v-banner/prop-lines.vue b/packages/docs/src/examples/v-banner/prop-lines.vue
index 9c24efc9012..cc16f01ec9d 100644
--- a/packages/docs/src/examples/v-banner/prop-lines.vue
+++ b/packages/docs/src/examples/v-banner/prop-lines.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <v-banner
-      lines="one"
-      icon="mdi-lock"
-      color="deep-purple-accent-4"
       class="my-4"
+      color="deep-purple-accent-4"
+      icon="mdi-lock"
+      lines="one"
     >
       <v-banner-text>
         Banner with one line of text.
@@ -16,10 +16,10 @@
     </v-banner>
 
     <v-banner
-      lines="two"
-      icon="mdi-weather-hurricane"
-      color="error"
       class="my-4"
+      color="error"
+      icon="mdi-weather-hurricane"
+      lines="two"
     >
       <v-banner-text>
         Banner with two lines of text. If the text is too long to fit on two lines then an ellipsis will be used to hide the remaining content. So this next line will be hidden.
@@ -31,10 +31,10 @@
     </v-banner>
 
     <v-banner
-      lines="three"
-      icon="$warning"
-      color="warning"
       class="my-4"
+      color="warning"
+      icon="$warning"
+      lines="three"
     >
       <v-banner-text>
         Banner with three lines of text. One or two lines is preferable. Three lines should be considered the absolute maximum length on desktop in order to keep messages short and actionable.
diff --git a/packages/docs/src/examples/v-banner/prop-sticky.vue b/packages/docs/src/examples/v-banner/prop-sticky.vue
index c1b1fac8cf1..7e4497e0d59 100644
--- a/packages/docs/src/examples/v-banner/prop-sticky.vue
+++ b/packages/docs/src/examples/v-banner/prop-sticky.vue
@@ -12,9 +12,9 @@
       <template v-slot:append>
         <v-switch
           v-model="sticky"
+          color="secondary"
           label="Sticky Banner"
           hide-details
-          color="secondary"
         ></v-switch>
       </template>
     </v-toolbar>
diff --git a/packages/docs/src/examples/v-banner/slot-actions.vue b/packages/docs/src/examples/v-banner/slot-actions.vue
index 8d4acbbae9a..71d80d1cdcf 100644
--- a/packages/docs/src/examples/v-banner/slot-actions.vue
+++ b/packages/docs/src/examples/v-banner/slot-actions.vue
@@ -1,8 +1,8 @@
 <template>
   <v-banner
-    lines="one"
-    icon="mdi-wifi-strength-alert-outline"
     color="warning"
+    icon="mdi-wifi-strength-alert-outline"
+    lines="one"
   >
     <template v-slot:text>
       No Internet connection
diff --git a/packages/docs/src/examples/v-banner/slot-prepend.vue b/packages/docs/src/examples/v-banner/slot-prepend.vue
index 4c76ba54460..87d8e45c3d0 100644
--- a/packages/docs/src/examples/v-banner/slot-prepend.vue
+++ b/packages/docs/src/examples/v-banner/slot-prepend.vue
@@ -1,7 +1,7 @@
 <template>
   <v-banner
-    lines="two"
     color="deep-purple-accent-4"
+    lines="two"
   >
     <template v-slot:prepend>
       <v-avatar
diff --git a/packages/docs/src/examples/v-banner/usage.vue b/packages/docs/src/examples/v-banner/usage.vue
index 9b4d884798c..599823f7172 100644
--- a/packages/docs/src/examples/v-banner/usage.vue
+++ b/packages/docs/src/examples/v-banner/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-banner
@@ -41,14 +41,10 @@
 
       <v-checkbox v-if="actions" v-model="stacked" label="Stacked"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-banner'
   const model = ref('default')
   const options = ['One line', 'Two lines', 'Three lines']
diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-color.vue b/packages/docs/src/examples/v-bottom-navigation/prop-color.vue
index 472af93d65a..0565d6796e4 100644
--- a/packages/docs/src/examples/v-bottom-navigation/prop-color.vue
+++ b/packages/docs/src/examples/v-bottom-navigation/prop-color.vue
@@ -2,8 +2,8 @@
   <v-layout class="overflow-visible" style="height: 56px;">
     <v-bottom-navigation
       v-model="value"
-      active
       color="primary"
+      active
     >
       <v-btn>
         <v-icon>mdi-history</v-icon>
diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue b/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue
index 9044fe7840b..b419d8b8ca4 100644
--- a/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue
+++ b/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue
@@ -5,10 +5,10 @@
     max-width="500"
   >
     <v-bottom-navigation
+      scroll-target="#hide-on-scroll-example"
       absolute
       hide-on-scroll
       horizontal
-      scroll-target="#hide-on-scroll-example"
     >
       <v-btn
         color="deep-purple-accent-4"
diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue b/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue
index 4526e45157a..d3a1283ff88 100644
--- a/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue
+++ b/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue
@@ -5,12 +5,12 @@
     max-width="500"
   >
     <v-bottom-navigation
-      absolute
       color="white"
-      hide-on-scroll
-      horizontal
       scroll-target="#scroll-threshold-example"
       scroll-threshold="500"
+      absolute
+      hide-on-scroll
+      horizontal
     >
       <v-btn>
         <span>Recents</span>
diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue b/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue
index d9ecb9bf46b..fca86d26512 100644
--- a/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue
+++ b/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout style="height: 128px;" class="border rounded">
+  <v-layout class="border rounded" style="height: 128px;">
     <div class="mx-auto my-4">
       <v-btn
         color="deep-purple"
diff --git a/packages/docs/src/examples/v-bottom-navigation/usage.vue b/packages/docs/src/examples/v-bottom-navigation/usage.vue
index d6d88b5dee4..7c3e9dd1a8e 100644
--- a/packages/docs/src/examples/v-bottom-navigation/usage.vue
+++ b/packages/docs/src/examples/v-bottom-navigation/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -28,16 +28,12 @@
     </v-layout>
 
     <template v-slot:configuration>
-      <v-slider v-model="elevation" label="Elevation" step="1" min="0" max="24"></v-slider>
+      <v-slider v-model="elevation" label="Elevation" max="24" min="0" step="1"></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-bottom-navigation'
   const model = ref('default')
   const options = ['grow', 'shift']
diff --git a/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue b/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue
index 29767f6fa91..de6b5782157 100644
--- a/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue
+++ b/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="text-center">
     <v-btn
-      text="Click Me"
       size="x-large"
+      text="Click Me"
       @click="sheet = !sheet"
     ></v-btn>
 
diff --git a/packages/docs/src/examples/v-bottom-sheet/usage.vue b/packages/docs/src/examples/v-bottom-sheet/usage.vue
index b1993b373f3..4ce3de6b9c5 100644
--- a/packages/docs/src/examples/v-bottom-sheet/usage.vue
+++ b/packages/docs/src/examples/v-bottom-sheet/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -19,18 +19,14 @@
       </template>
 
       <v-card
-        title="Bottom Sheet"
         text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut, eos? Nulla aspernatur odio rem, culpa voluptatibus eius debitis dolorem perspiciatis asperiores sed consectetur praesentium! Delectus et iure maxime eaque exercitationem!"
+        title="Bottom Sheet"
       ></v-card>
     </v-bottom-sheet>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-bottom-sheet'
   const model = ref('default')
   const options = ['inset']
diff --git a/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue b/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue
index 61380141832..9487738bf0f 100644
--- a/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue
+++ b/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue
@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs :items="items">
     <template v-slot:prepend>
-      <v-icon size="small" icon="$vuetify"></v-icon>
+      <v-icon icon="$vuetify" size="small"></v-icon>
     </template>
   </v-breadcrumbs>
 </template>
diff --git a/packages/docs/src/examples/v-breadcrumbs/usage.vue b/packages/docs/src/examples/v-breadcrumbs/usage.vue
index f29b4a6845e..099832af55a 100644
--- a/packages/docs/src/examples/v-breadcrumbs/usage.vue
+++ b/packages/docs/src/examples/v-breadcrumbs/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-breadcrumbs v-bind="props">
@@ -20,16 +20,12 @@
     </div>
 
     <template v-slot:configuration>
-      <v-select v-model="color" label="Background color" :items="['primary', 'success', 'info']" clearable></v-select>
+      <v-select v-model="color" :items="['primary', 'success', 'info']" label="Background color" clearable></v-select>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-breadcrumbs'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-btn-fab/misc-display-animation.vue b/packages/docs/src/examples/v-btn-fab/misc-display-animation.vue
deleted file mode 100644
index dd8271c78d3..00000000000
--- a/packages/docs/src/examples/v-btn-fab/misc-display-animation.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <v-container fluid>
-    <v-row>
-      <v-col
-        cols="12"
-        sm="12"
-        md="6"
-        offset-md="3"
-      >
-        <v-card>
-          <v-toolbar extended>
-            <v-app-bar-nav-icon></v-app-bar-nav-icon>
-            <template v-slot:extension>
-              <v-fab-transition>
-                <v-btn
-                  v-show="!hidden"
-                  color="pink"
-                  fab
-                  size="small"
-                  absolute
-                  location="bottom left"
-                >
-                  <v-icon>mdi-plus</v-icon>
-                </v-btn>
-              </v-fab-transition>
-            </template>
-          </v-toolbar>
-          <v-card-text
-            style="height: 300px;"
-            class="bg-grey-lighten-5 text-center"
-          >
-            <v-btn
-              color="primary"
-              @click="hidden = !hidden"
-            >
-              {{ hidden ? 'Show' : 'Hide' }}
-            </v-btn>
-          </v-card-text>
-          <v-card-text style="height: 100px; position: relative">
-            <v-fab-transition>
-              <v-btn
-                v-show="!hidden"
-                color="pink"
-                absolute
-                location="top right"
-                fab
-              >
-                <v-icon>mdi-plus</v-icon>
-              </v-btn>
-            </v-fab-transition>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const hidden = ref(false)
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      hidden: false,
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/v-btn-fab/misc-lateral-screens.vue b/packages/docs/src/examples/v-btn-fab/misc-lateral-screens.vue
deleted file mode 100644
index b229940bb65..00000000000
--- a/packages/docs/src/examples/v-btn-fab/misc-lateral-screens.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <v-card id="lateral">
-    <v-toolbar
-      dark
-      tabs
-      flat
-      color="indigo"
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-      <v-toolbar-title>Page title</v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
-      <template v-slot:extension>
-        <v-tabs
-          v-model="tabs"
-          align-tabs="title"
-        >
-          <v-tab href="#one">
-            Item One
-          </v-tab>
-          <v-tab href="#two">
-            Item Two
-          </v-tab>
-          <v-tab href="#three">
-            Item Three
-          </v-tab>
-          <v-tabs-slider color="pink"></v-tabs-slider>
-        </v-tabs>
-      </template>
-    </v-toolbar>
-    <v-card-text>
-      <v-tabs-items v-model="tabs">
-        <v-tab-item
-          v-for="content in ['one', 'two', 'three']"
-          :key="content"
-          :value="content"
-        >
-          <v-card
-            height="200px"
-            flat
-          >
-          </v-card>
-        </v-tab-item>
-      </v-tabs-items>
-    </v-card-text>
-    <v-fab-transition>
-      <v-btn
-        :key="activeFab.icon"
-        :color="activeFab.color"
-        fab
-        size="large"
-        location="bottom left"
-        class="v-btn--example"
-      >
-        <v-icon>{{ activeFab.icon }}</v-icon>
-      </v-btn>
-    </v-fab-transition>
-  </v-card>
-</template>
-
-<script setup>
-  import { computed, ref } from 'vue'
-
-  const tabs = ref(null)
-  const activeFab = computed(() => {
-    switch (tabs.value) {
-      case 'one': return { color: 'success', icon: 'mdi-share-variant' }
-      case 'two': return { color: 'red', icon: 'mdi-pencil' }
-      case 'three': return { color: 'green', icon: 'mdi-chevron-up' }
-      default: return {}
-    }
-  })
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      tabs: null,
-    }),
-
-    computed: {
-      activeFab () {
-        switch (this.tabs) {
-          case 'one': return { color: 'success', icon: 'mdi-share-variant' }
-          case 'two': return { color: 'red', icon: 'mdi-pencil' }
-          case 'three': return { color: 'green', icon: 'mdi-chevron-up' }
-          default: return {}
-        }
-      },
-    },
-  }
-</script>
-
-<style>
-  /* This is for documentation purposes and will not be needed in your application */
-  #lateral .v-btn--example {
-    bottom: 0;
-    position: absolute;
-    margin: 0 0 16px 16px;
-  }
-</style>
diff --git a/packages/docs/src/examples/v-btn-fab/misc-small.vue b/packages/docs/src/examples/v-btn-fab/misc-small.vue
deleted file mode 100644
index 21e0c26b4f7..00000000000
--- a/packages/docs/src/examples/v-btn-fab/misc-small.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <v-row>
-    <v-col
-      cols="12"
-      sm="6"
-      offset-sm="3"
-    >
-      <v-card>
-        <v-toolbar
-          color="light-blue"
-          light
-          extended
-        >
-          <v-app-bar-nav-icon></v-app-bar-nav-icon>
-          <v-toolbar-title class="text-white">
-            My files
-          </v-toolbar-title>
-          <v-spacer></v-spacer>
-          <v-btn icon>
-            <v-icon>mdi-magnify</v-icon>
-          </v-btn>
-          <v-btn icon>
-            <v-icon>mdi-view-module</v-icon>
-          </v-btn>
-          <template v-slot:extension>
-            <v-btn
-              fab
-              color="cyan-accent-2"
-              location="bottom left"
-              absolute
-              @click="dialog = !dialog"
-            >
-              <v-icon>mdi-plus</v-icon>
-            </v-btn>
-          </template>
-        </v-toolbar>
-        <v-list
-          lines="two"
-          subheader
-        >
-          <v-list-subheader inset>
-            Folders
-          </v-list-subheader>
-
-          <v-list-item
-            v-for="item in items"
-            :key="item.title"
-            link
-          >
-            <v-list-item-avatar>
-              <v-icon :class="[item.iconClass]">
-                {{ item.icon }}
-              </v-icon>
-            </v-list-item-avatar>
-
-            <v-list-item-content>
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-
-              <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
-            </v-list-item-content>
-
-            <v-list-item-action>
-              <v-btn icon>
-                <v-icon color="grey-lighten-1">
-                  mdi-information
-                </v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
-
-          <v-divider inset></v-divider>
-
-          <v-list-subheader inset>
-            Files
-          </v-list-subheader>
-
-          <v-list-item
-            v-for="item in items2"
-            :key="item.title"
-            link
-          >
-            <v-list-item-avatar>
-              <v-icon :class="[item.iconClass]">
-                {{ item.icon }}
-              </v-icon>
-            </v-list-item-avatar>
-
-            <v-list-item-content>
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-
-              <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
-            </v-list-item-content>
-
-            <v-list-item-action>
-              <v-btn
-                icon
-                ripple
-              >
-                <v-icon color="grey-lighten-1">
-                  mdi-information
-                </v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
-        </v-list>
-
-        <v-dialog
-          v-model="dialog"
-          max-width="500px"
-        >
-          <v-card>
-            <v-card-text>
-              <v-text-field label="File name"></v-text-field>
-
-              <small class="text-grey">* This doesn't actually save.</small>
-            </v-card-text>
-
-            <v-card-actions>
-              <v-spacer></v-spacer>
-
-              <v-btn
-                variant="text"
-                color="primary"
-                @click="dialog = false"
-              >
-                Submit
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-dialog>
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const dialog = ref(false)
-  const items = ref([
-    { icon: 'mdi-folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
-    { icon: 'mdi-folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
-    { icon: 'mdi-folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
-  ])
-  const items2 = ref([
-    { icon: 'mdi-clipboard-text', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
-    { icon: 'mdi-gesture-tap-button', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
-  ])
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        dialog: false,
-        items: [
-          { icon: 'mdi-folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
-          { icon: 'mdi-folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
-          { icon: 'mdi-folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
-        ],
-        items2: [
-          { icon: 'mdi-clipboard-text', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
-          { icon: 'mdi-gesture-tap-button', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
-        ],
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-btn-fab/usage.vue b/packages/docs/src/examples/v-btn-fab/usage.vue
deleted file mode 100644
index ad02bbfea84..00000000000
--- a/packages/docs/src/examples/v-btn-fab/usage.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <v-row
-    align="center"
-    justify="center"
-  >
-    <v-btn
-      v-bind="$attrs"
-    >
-      <v-icon v-if="$attrs.fab || $attrs.icon">
-        $mdiVuetify
-      </v-icon>
-
-      <span v-else>Click Me</span>
-    </v-btn>
-  </v-row>
-</template>
-
-<script>
-  export default {
-    name: 'Usage',
-
-    inheritAttrs: false,
-
-    data: () => ({
-      defaults: {
-        block: false,
-        color: null,
-        depressed: false,
-        disabled: false,
-        elevation: 2,
-        fab: true,
-        icon: false,
-        large: false,
-        loading: false,
-        outlined: false,
-        rounded: false,
-        small: false,
-        text: false,
-        tile: false,
-        'x-large': false,
-        'x-small': false,
-      },
-      options: {
-        booleans: [
-          'block',
-          'disabled',
-          'large',
-          'loading',
-          'small',
-          'x-large',
-          'x-small',
-        ],
-        sliders: {
-          elevation: [0, 24],
-        },
-        selects: {
-          color: [
-            'accent',
-            'primary',
-            'secondary',
-          ],
-        },
-      },
-      tabs: [
-        'depressed',
-        'icon',
-        'outlined',
-        'raised',
-        'rounded',
-        'text',
-        'tile',
-      ],
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue b/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue
index 79a06cf3aad..7949548473e 100644
--- a/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue
+++ b/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue
@@ -24,8 +24,8 @@
 
     <v-btn-toggle
       v-model="toggleMultiple"
-      variant="plain"
       color="primary"
+      variant="plain"
       multiple
     >
       <v-btn
@@ -53,8 +53,8 @@
 
     <v-btn-toggle
       v-model="toggleExclusive"
-      variant="plain"
       color="primary"
+      variant="plain"
       dense
       group
     >
diff --git a/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue b/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue
index 02bc324d3f9..d8029f46b5b 100644
--- a/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue
+++ b/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue
@@ -1,14 +1,14 @@
 <template>
   <v-card
-    max-width="600"
     class="mx-auto"
+    max-width="600"
   >
     <div class="d-flex justify-space-between pa-4 pb-0">
       <v-btn-toggle
         v-model="formatting"
-        multiple
         variant="outlined"
         divided
+        multiple
       >
         <v-btn>
           <v-icon icon="mdi-format-italic"></v-icon>
@@ -27,10 +27,10 @@
             <v-icon icon="mdi-format-color-text"></v-icon>
 
             <v-sheet
-              tile
+              color="purple"
               height="4"
               width="26"
-              color="purple"
+              tile
             ></v-sheet>
           </div>
         </v-btn>
@@ -58,10 +58,10 @@
     <v-sheet class="pa-4 text-center">
       <v-textarea
         v-model="value"
+        rows="2"
         variant="outlined"
         auto-grow
         full-width
-        rows="2"
         hide-details
       ></v-textarea>
     </v-sheet>
diff --git a/packages/docs/src/examples/v-btn-toggle/usage.vue b/packages/docs/src/examples/v-btn-toggle/usage.vue
index 491e6470014..9f33d0085a0 100644
--- a/packages/docs/src/examples/v-btn-toggle/usage.vue
+++ b/packages/docs/src/examples/v-btn-toggle/usage.vue
@@ -2,9 +2,9 @@
   <v-container>
     <v-row>
       <v-col
+        class="py-2"
         cols="12"
         sm="6"
-        class="py-2"
       >
         <p>Exclusive</p>
 
@@ -28,9 +28,9 @@
       </v-col>
 
       <v-col
+        class="py-2"
         cols="12"
         sm="6"
-        class="py-2"
       >
         <p>Multiple</p>
 
@@ -59,9 +59,9 @@
       </v-col>
 
       <v-col
+        class="py-2"
         cols="12"
         sm="6"
-        class="py-2"
       >
         <p>No Options Selected</p>
 
@@ -84,16 +84,16 @@
       </v-col>
 
       <v-col
+        class="py-2"
         cols="12"
         sm="6"
-        class="py-2"
       >
         <p>Mandatory</p>
 
         <v-btn-toggle
           v-model="toggle_one"
-          shaped
           mandatory
+          shaped
         >
           <v-btn>
             <v-icon>mdi-format-align-left</v-icon>
@@ -114,15 +114,15 @@
       </v-col>
 
       <v-col
-        cols="12"
         class="py-2"
+        cols="12"
       >
         <p>Text Options</p>
 
         <v-btn-toggle
           v-model="text"
-          rounded="0"
           color="deep-purple-accent-3"
+          rounded="0"
           group
         >
           <v-btn value="left">
@@ -144,8 +144,8 @@
       </v-col>
 
       <v-col
-        cols="12"
         class="py-2"
+        cols="12"
       >
         <p>Text &amp; Icon Options</p>
 
diff --git a/packages/docs/src/examples/v-btn/defaults-btn-group.vue b/packages/docs/src/examples/v-btn/defaults-btn-group.vue
index 5640487cb08..d6d632abda1 100644
--- a/packages/docs/src/examples/v-btn/defaults-btn-group.vue
+++ b/packages/docs/src/examples/v-btn/defaults-btn-group.vue
@@ -2,8 +2,8 @@
   <div class="d-flex align-center flex-column pa-6">
     <v-btn-toggle
       v-model="toggle"
-      divided
       variant="outlined"
+      divided
     >
       <v-btn icon="mdi-format-align-left"></v-btn>
       <v-btn icon="mdi-format-align-center"></v-btn>
diff --git a/packages/docs/src/examples/v-btn/defaults-card-actions.vue b/packages/docs/src/examples/v-btn/defaults-card-actions.vue
index d9b7348d09a..8197ee0d408 100644
--- a/packages/docs/src/examples/v-btn/defaults-card-actions.vue
+++ b/packages/docs/src/examples/v-btn/defaults-card-actions.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card
     class="mx-auto"
-    title="Card title"
-    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
     max-width="500"
+    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+    title="Card title"
   >
     <v-card-actions>
       <v-btn>Action Button</v-btn>
diff --git a/packages/docs/src/examples/v-btn/defaults-toolbar.vue b/packages/docs/src/examples/v-btn/defaults-toolbar.vue
index 12b89f59aa9..e90ef7d85d5 100644
--- a/packages/docs/src/examples/v-btn/defaults-toolbar.vue
+++ b/packages/docs/src/examples/v-btn/defaults-toolbar.vue
@@ -6,7 +6,7 @@
       <v-btn>Resources</v-btn>
     </v-toolbar-items>
 
-    <v-divider vertical class="mx-2"></v-divider>
+    <v-divider class="mx-2" vertical></v-divider>
 
     <v-btn icon="mdi-dots-vertical"></v-btn>
   </v-toolbar>
diff --git a/packages/docs/src/examples/v-btn/misc-dialog-action.vue b/packages/docs/src/examples/v-btn/misc-dialog-action.vue
index 44e97aa0987..22526c9835c 100644
--- a/packages/docs/src/examples/v-btn/misc-dialog-action.vue
+++ b/packages/docs/src/examples/v-btn/misc-dialog-action.vue
@@ -5,8 +5,8 @@
   >
     <div class="position-absolute d-flex align-center justify-center w-100 h-100">
       <v-btn
-        size="x-large"
         color="deep-purple-darken-2"
+        size="x-large"
         @click="dialog = !dialog"
       >
         Open Dialog
@@ -46,8 +46,8 @@
             class="text-none"
             color="medium-emphasis"
             min-width="92"
-            rounded
             variant="outlined"
+            rounded
             @click="dialog = false"
           >
             Close
diff --git a/packages/docs/src/examples/v-btn/misc-discord-event.vue b/packages/docs/src/examples/v-btn/misc-discord-event.vue
index e6d479a2bc6..c0cf8e06b02 100644
--- a/packages/docs/src/examples/v-btn/misc-discord-event.vue
+++ b/packages/docs/src/examples/v-btn/misc-discord-event.vue
@@ -20,7 +20,7 @@
           </v-card-title>
         </template>
 
-        <v-divider vertical class="mx-2"></v-divider>
+        <v-divider class="mx-2" vertical></v-divider>
 
         <v-btn
           class="text-none text-subtitle-1"
@@ -119,10 +119,10 @@
         </v-btn>
 
         <v-btn
-          border
           class="text-none"
           prepend-icon="mdi-check"
           variant="text"
+          border
         >
           Interested
         </v-btn>
diff --git a/packages/docs/src/examples/v-btn/misc-group-survey.vue b/packages/docs/src/examples/v-btn/misc-group-survey.vue
index 92c672cfaa8..974a9544bad 100644
--- a/packages/docs/src/examples/v-btn/misc-group-survey.vue
+++ b/packages/docs/src/examples/v-btn/misc-group-survey.vue
@@ -11,8 +11,8 @@
     <template v-slot:append>
       <div class="me-n2">
         <v-btn
-          icon="$close"
           density="comfortable"
+          icon="$close"
           variant="plain"
         ></v-btn>
       </div>
@@ -28,12 +28,12 @@
       >
         <template v-slot:default="{ toggle }">
           <v-btn
-            :icon="`mdi-numeric-${n}`"
             :active="model != null && model + 1 >= n"
-            border
+            :icon="`mdi-numeric-${n}`"
             height="40"
             variant="text"
             width="40"
+            border
             @click="toggle"
           ></v-btn>
         </template>
diff --git a/packages/docs/src/examples/v-btn/misc-tax-form.vue b/packages/docs/src/examples/v-btn/misc-tax-form.vue
index 85ccb365eb5..9553ff2e14a 100644
--- a/packages/docs/src/examples/v-btn/misc-tax-form.vue
+++ b/packages/docs/src/examples/v-btn/misc-tax-form.vue
@@ -15,29 +15,29 @@
 
       <v-text-field
         label="Enter value here"
-        single-line
         variant="outlined"
+        single-line
       ></v-text-field>
 
       <v-btn
         :disabled="loading"
         :loading="loading"
-        block
         class="text-none mb-4"
         color="indigo-darken-3"
         size="x-large"
         variant="flat"
+        block
         @click="loading = !loading"
       >
         Verify and continue
       </v-btn>
 
       <v-btn
-        block
         class="text-none"
         color="grey-lighten-3"
         size="x-large"
         variant="flat"
+        block
       >
         Cancel
       </v-btn>
diff --git a/packages/docs/src/examples/v-btn/misc-toolbar.vue b/packages/docs/src/examples/v-btn/misc-toolbar.vue
index 8bc2e747bc1..58077a5df70 100644
--- a/packages/docs/src/examples/v-btn/misc-toolbar.vue
+++ b/packages/docs/src/examples/v-btn/misc-toolbar.vue
@@ -4,7 +4,7 @@
       <v-btn icon="mdi-arrow-left"></v-btn>
     </template>
 
-    <v-btn icon="mdi-archive-plus-outline" class="ms-5"></v-btn>
+    <v-btn class="ms-5" icon="mdi-archive-plus-outline"></v-btn>
 
     <v-btn icon="mdi-alert-circle-outline"></v-btn>
 
diff --git a/packages/docs/src/examples/v-btn/prop-density.vue b/packages/docs/src/examples/v-btn/prop-density.vue
index 17c2102c238..d49829480fc 100644
--- a/packages/docs/src/examples/v-btn/prop-density.vue
+++ b/packages/docs/src/examples/v-btn/prop-density.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <v-row justify="center" align="center">
+    <v-row align="center" justify="center">
       <v-col cols="auto">
         <v-btn density="compact">Compact Button</v-btn>
       </v-col>
diff --git a/packages/docs/src/examples/v-btn/prop-flat.vue b/packages/docs/src/examples/v-btn/prop-flat.vue
index 4109c24b003..fbc157e5d94 100644
--- a/packages/docs/src/examples/v-btn/prop-flat.vue
+++ b/packages/docs/src/examples/v-btn/prop-flat.vue
@@ -5,15 +5,15 @@
     </v-btn>
 
     <v-btn
-      variant="flat"
       color="secondary"
+      variant="flat"
     >
       Secondary
     </v-btn>
 
     <v-btn
-      variant="flat"
       color="error"
+      variant="flat"
     >
       Error
     </v-btn>
diff --git a/packages/docs/src/examples/v-btn/prop-floating.vue b/packages/docs/src/examples/v-btn/prop-floating.vue
index 9e23ea37f47..74c3be88257 100644
--- a/packages/docs/src/examples/v-btn/prop-floating.vue
+++ b/packages/docs/src/examples/v-btn/prop-floating.vue
@@ -2,10 +2,10 @@
   <div class="text-center">
     <v-btn
       class="mx-2"
-      fab
-      dark
-      size="small"
       color="primary"
+      size="small"
+      dark
+      fab
     >
       <v-icon dark>
         mdi-minus
@@ -14,10 +14,10 @@
 
     <v-btn
       class="mx-2"
-      fab
-      dark
-      size="small"
       color="pink"
+      size="small"
+      dark
+      fab
     >
       <v-icon dark>
         mdi-heart
@@ -26,9 +26,9 @@
 
     <v-btn
       class="mx-2"
-      fab
-      dark
       color="indigo"
+      dark
+      fab
     >
       <v-icon dark>
         mdi-plus
@@ -37,9 +37,9 @@
 
     <v-btn
       class="mx-2"
-      fab
-      dark
       color="teal"
+      dark
+      fab
     >
       <v-icon dark>
         mdi-format-list-bulleted-square
@@ -48,10 +48,10 @@
 
     <v-btn
       class="mx-2"
-      fab
-      dark
-      size="large"
       color="cyan"
+      size="large"
+      dark
+      fab
     >
       <v-icon dark>
         mdi-pencil
@@ -60,10 +60,10 @@
 
     <v-btn
       class="mx-2"
-      fab
-      dark
-      size="large"
       color="purple"
+      size="large"
+      dark
+      fab
     >
       <v-icon dark>
         mdi-android
diff --git a/packages/docs/src/examples/v-btn/prop-loaders.vue b/packages/docs/src/examples/v-btn/prop-loaders.vue
index c4241317c24..18aa87ec9ca 100644
--- a/packages/docs/src/examples/v-btn/prop-loaders.vue
+++ b/packages/docs/src/examples/v-btn/prop-loaders.vue
@@ -2,8 +2,8 @@
   <v-card
     class="mx-auto"
     max-width="450"
-    title="Strengthen your passwords"
     text="Update your weak or re-used passwords with Password Checkup. It's free and only takes a few minutes. Click the Take Checkup button to get started."
+    title="Strengthen your passwords"
   >
 
     <template v-slot:actions>
diff --git a/packages/docs/src/examples/v-btn/prop-outlined.vue b/packages/docs/src/examples/v-btn/prop-outlined.vue
index 1ca76749fa2..083fac23151 100644
--- a/packages/docs/src/examples/v-btn/prop-outlined.vue
+++ b/packages/docs/src/examples/v-btn/prop-outlined.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="d-flex justify-space-around align-center flex-column flex-sm-row">
     <v-btn
-      variant="outlined"
       color="primary"
+      variant="outlined"
     >
       Outlined Button
     </v-btn>
     <v-btn
+      color="secondary"
       variant="outlined"
       icon
-      color="secondary"
     >
       <v-icon>mdi-format-list-bulleted-square</v-icon>
     </v-btn>
     <v-btn
-      variant="outlined"
+      color="info"
       size="large"
+      variant="outlined"
       icon
-      color="info"
     >
       <v-icon>mdi-pencil</v-icon>
     </v-btn>
diff --git a/packages/docs/src/examples/v-btn/prop-rounded.vue b/packages/docs/src/examples/v-btn/prop-rounded.vue
index a865d2682e2..e96308edf72 100644
--- a/packages/docs/src/examples/v-btn/prop-rounded.vue
+++ b/packages/docs/src/examples/v-btn/prop-rounded.vue
@@ -1,28 +1,28 @@
 <template>
   <v-container class="text-center">
     <v-row justify="center">
-      <v-col cols="12" sm="6" md="4">
-        <v-btn block rounded="0" size="x-large">Rounded 0</v-btn>
+      <v-col cols="12" md="4" sm="6">
+        <v-btn rounded="0" size="x-large" block>Rounded 0</v-btn>
       </v-col>
 
-      <v-col cols="12" sm="6" md="4">
-        <v-btn block rounded="xs" size="x-large">Rounded xs</v-btn>
+      <v-col cols="12" md="4" sm="6">
+        <v-btn rounded="xs" size="x-large" block>Rounded xs</v-btn>
       </v-col>
 
-      <v-col cols="12" sm="6" md="4">
-        <v-btn block rounded="sm" size="x-large">Rounded sm</v-btn>
+      <v-col cols="12" md="4" sm="6">
+        <v-btn rounded="sm" size="x-large" block>Rounded sm</v-btn>
       </v-col>
 
-      <v-col cols="12" sm="6" md="4">
-        <v-btn block size="x-large">Button</v-btn>
+      <v-col cols="12" md="4" sm="6">
+        <v-btn size="x-large" block>Button</v-btn>
       </v-col>
 
-      <v-col cols="12" sm="6" md="4">
-        <v-btn block rounded="lg" size="x-large">Rounded lg</v-btn>
+      <v-col cols="12" md="4" sm="6">
+        <v-btn rounded="lg" size="x-large" block>Rounded lg</v-btn>
       </v-col>
 
-      <v-col cols="12" sm="6" md="4">
-        <v-btn block rounded="xl" size="x-large">Rounded xl</v-btn>
+      <v-col cols="12" md="4" sm="6">
+        <v-btn rounded="xl" size="x-large" block>Rounded xl</v-btn>
       </v-col>
     </v-row>
   </v-container>
diff --git a/packages/docs/src/examples/v-btn/prop-tile.vue b/packages/docs/src/examples/v-btn/prop-tile.vue
index 6eda66466cc..c66de493ef1 100644
--- a/packages/docs/src/examples/v-btn/prop-tile.vue
+++ b/packages/docs/src/examples/v-btn/prop-tile.vue
@@ -4,8 +4,8 @@
     justify="space-around"
   >
     <v-btn
-      tile
       color="success"
+      tile
     >
       <v-icon start>
         mdi-pencil
diff --git a/packages/docs/src/examples/v-btn/slot-prepend-append.vue b/packages/docs/src/examples/v-btn/slot-prepend-append.vue
index 6f47637e1ae..4b24eedc9d3 100644
--- a/packages/docs/src/examples/v-btn/slot-prepend-append.vue
+++ b/packages/docs/src/examples/v-btn/slot-prepend-append.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="text-center">
     <v-btn
-      prepend-icon="mdi-check-circle"
       append-icon="mdi-account-circle"
+      prepend-icon="mdi-check-circle"
     >
       <template v-slot:prepend>
         <v-icon color="success"></v-icon>
diff --git a/packages/docs/src/examples/v-btn/usage.vue b/packages/docs/src/examples/v-btn/usage.vue
index 4b2079f7bb0..84fdcae7b7c 100644
--- a/packages/docs/src/examples/v-btn/usage.vue
+++ b/packages/docs/src/examples/v-btn/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="text-center">
       <v-btn v-bind="props">
@@ -17,14 +17,10 @@
       <v-checkbox v-model="append" label="Append icon"></v-checkbox>
       <v-checkbox v-model="stacked" label="Stacked"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref, watch } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const variants = ['outlined', 'tonal', 'text', 'plain']
   const name = 'v-btn'
   const model = ref('default')
diff --git a/packages/docs/src/examples/v-calendar/event-click.vue b/packages/docs/src/examples/v-calendar/event-click.vue
index 056538c82dd..89e4db20fe3 100644
--- a/packages/docs/src/examples/v-calendar/event-click.vue
+++ b/packages/docs/src/examples/v-calendar/event-click.vue
@@ -6,18 +6,18 @@
           flat
         >
           <v-btn
-            variant="outlined"
             class="me-4"
             color="grey-darken-2"
+            variant="outlined"
             @click="setToday"
           >
             Today
           </v-btn>
           <v-btn
-            fab
-            variant="text"
-            size="small"
             color="grey-darken-2"
+            size="small"
+            variant="text"
+            fab
             @click="prev"
           >
             <v-icon size="small">
@@ -25,10 +25,10 @@
             </v-icon>
           </v-btn>
           <v-btn
-            fab
-            variant="text"
-            size="small"
             color="grey-darken-2"
+            size="small"
+            variant="text"
+            fab
             @click="next"
           >
             <v-icon size="small">
@@ -42,8 +42,8 @@
           <v-menu location="bottom end">
             <template v-slot:activator="{ on, attrs }">
               <v-btn
-                variant="outlined"
                 color="grey-darken-2"
+                variant="outlined"
                 v-bind="attrs"
                 v-on="on"
               >
@@ -74,19 +74,19 @@
         <v-calendar
           ref="calendar"
           v-model="focus"
-          color="primary"
-          :events="events"
           :event-color="getEventColor"
+          :events="events"
           :type="type"
+          color="primary"
+          @change="updateRange"
+          @click:date="viewDay"
           @click:event="showEvent"
           @click:more="viewDay"
-          @click:date="viewDay"
-          @change="updateRange"
         ></v-calendar>
         <v-menu
           v-model="selectedOpen"
-          :close-on-content-click="false"
           :activator="selectedElement"
+          :close-on-content-click="false"
           offset-x
         >
           <v-card
@@ -115,8 +115,8 @@
             </v-card-text>
             <v-card-actions>
               <v-btn
-                variant="text"
                 color="secondary"
+                variant="text"
                 @click="selectedOpen = false"
               >
                 Cancel
diff --git a/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue b/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue
index 6ee64454dfd..8b5ab6e31ef 100644
--- a/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue
+++ b/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue
@@ -5,17 +5,17 @@
         <v-calendar
           ref="calendar"
           v-model="value"
-          color="primary"
-          type="4day"
-          :events="events"
           :event-color="getEventColor"
           :event-ripple="false"
+          :events="events"
+          color="primary"
+          type="4day"
           @change="getEvents"
           @mousedown:event="startDrag"
           @mousedown:time="startTime"
+          @mouseleave="cancelDrag"
           @mousemove:time="mouseMove"
           @mouseup:time="endDrag"
-          @mouseleave="cancelDrag"
         >
           <template v-slot:event="{ event, timed /*, eventSummary */ }">
             <!--<div class="v-event-draggable">
diff --git a/packages/docs/src/examples/v-calendar/prop-type-month.vue b/packages/docs/src/examples/v-calendar/prop-type-month.vue
index 03e3872bab6..a148de1302b 100644
--- a/packages/docs/src/examples/v-calendar/prop-type-month.vue
+++ b/packages/docs/src/examples/v-calendar/prop-type-month.vue
@@ -5,9 +5,9 @@
         <v-calendar
           ref="calendar"
           v-model="today"
+          :events="events"
           color="primary"
           type="month"
-          :events="events"
         ></v-calendar>
       </v-sheet>
     </v-col>
diff --git a/packages/docs/src/examples/v-calendar/prop-type-week.vue b/packages/docs/src/examples/v-calendar/prop-type-week.vue
index c052b8d80e0..b207a042531 100644
--- a/packages/docs/src/examples/v-calendar/prop-type-week.vue
+++ b/packages/docs/src/examples/v-calendar/prop-type-week.vue
@@ -5,11 +5,11 @@
         <v-select
           v-model="weekday"
           :items="weekdays"
-          dense
+          class="ma-2"
+          label="weekdays"
           variant="outlined"
+          dense
           hide-details
-          label="weekdays"
-          class="ma-2"
         ></v-select>
       </v-sheet>
     </v-col>
diff --git a/packages/docs/src/examples/v-calendar/slot-day-body.vue b/packages/docs/src/examples/v-calendar/slot-day-body.vue
index cfdba407056..8db68d75238 100644
--- a/packages/docs/src/examples/v-calendar/slot-day-body.vue
+++ b/packages/docs/src/examples/v-calendar/slot-day-body.vue
@@ -9,9 +9,9 @@
         >
           <template v-slot:day-body="{ date, week }">
             <div
-              class="v-current-time"
               :class="{ first: date === week[0].date }"
               :style="{ top: nowY }"
+              class="v-current-time"
             ></div>
           </template>
         </v-calendar>
diff --git a/packages/docs/src/examples/v-calendar/slot-day.vue b/packages/docs/src/examples/v-calendar/slot-day.vue
index 0e53acf4763..bfccf99f7b0 100644
--- a/packages/docs/src/examples/v-calendar/slot-day.vue
+++ b/packages/docs/src/examples/v-calendar/slot-day.vue
@@ -15,8 +15,8 @@
                 <v-sheet
                   v-for="(percent, i) in tracked[date]"
                   :key="i"
-                  :title="category[i]"
                   :color="colors[i]"
+                  :title="category[i]"
                   :width="`${percent}%`"
                   height="100%"
                   tile
diff --git a/packages/docs/src/examples/v-calendar/usage.vue b/packages/docs/src/examples/v-calendar/usage.vue
index 9f1fbe75959..65124fdf35a 100644
--- a/packages/docs/src/examples/v-calendar/usage.vue
+++ b/packages/docs/src/examples/v-calendar/usage.vue
@@ -1,36 +1,36 @@
 <template>
   <div>
     <v-sheet
-      tile
-      height="54"
       class="d-flex"
+      height="54"
+      tile
     >
       <v-select
         v-model="type"
         :items="types"
-        dense
-        variant="outlined"
-        hide-details
         class="ma-2"
         label="View Mode"
+        variant="outlined"
+        dense
+        hide-details
       ></v-select>
       <v-select
         v-model="weekday"
         :items="weekdays"
-        dense
+        class="ma-2"
+        label="weekdays"
         variant="outlined"
+        dense
         hide-details
-        label="weekdays"
-        class="ma-2"
       ></v-select>
     </v-sheet>
     <v-sheet>
       <v-calendar
         ref="calendar"
         v-model="value"
-        :weekdays="weekday"
-        :view-mode="type"
         :events="events"
+        :view-mode="type"
+        :weekdays="weekday"
       ></v-calendar>
     </v-sheet>
   </div>
diff --git a/packages/docs/src/examples/v-card/basics-combine.vue b/packages/docs/src/examples/v-card/basics-combine.vue
index ebca21b9815..2a10904019b 100644
--- a/packages/docs/src/examples/v-card/basics-combine.vue
+++ b/packages/docs/src/examples/v-card/basics-combine.vue
@@ -1,8 +1,8 @@
 <template>
   <v-card
     class="mx-auto"
-    width="400"
     prepend-icon="mdi-home"
+    width="400"
   >
     <template v-slot:title>
       This is a title
diff --git a/packages/docs/src/examples/v-card/basics-content.vue b/packages/docs/src/examples/v-card/basics-content.vue
index d525260dcf0..63d99b233ad 100644
--- a/packages/docs/src/examples/v-card/basics-content.vue
+++ b/packages/docs/src/examples/v-card/basics-content.vue
@@ -3,10 +3,10 @@
     <div class="text-subtitle-2">With props</div>
 
     <v-card
-      width="400"
-      title="This is a title"
       subtitle="This is a subtitle"
       text="This is content"
+      title="This is a title"
+      width="400"
     ></v-card>
 
     <div class="mt-4 text-subtitle-2">With slots</div>
diff --git a/packages/docs/src/examples/v-card/misc-card-reveal.vue b/packages/docs/src/examples/v-card/misc-card-reveal.vue
index d9de9d4e594..1d388b1ed99 100644
--- a/packages/docs/src/examples/v-card/misc-card-reveal.vue
+++ b/packages/docs/src/examples/v-card/misc-card-reveal.vue
@@ -16,8 +16,8 @@
     </v-card-text>
     <v-card-actions>
       <v-btn
-        variant="text"
         color="teal-accent-4"
+        variant="text"
         @click="reveal = true"
       >
         Learn More
@@ -38,8 +38,8 @@
         </v-card-text>
         <v-card-actions class="pt-0">
           <v-btn
-            variant="text"
             color="teal-accent-4"
+            variant="text"
             @click="reveal = false"
           >
             Close
diff --git a/packages/docs/src/examples/v-card/misc-content-wrapping.vue b/packages/docs/src/examples/v-card/misc-content-wrapping.vue
index 00bb109e44b..33fe3177f0c 100644
--- a/packages/docs/src/examples/v-card/misc-content-wrapping.vue
+++ b/packages/docs/src/examples/v-card/misc-content-wrapping.vue
@@ -3,10 +3,10 @@
     <v-row justify="space-around">
       <v-card width="400">
         <v-img
+          class="text-white"
           height="200"
           src="https://cdn.vuetifyjs.com/docs/images/cards/purple-flowers.jpg"
           cover
-          class="text-white"
         >
           <v-toolbar
             color="rgba(0, 0, 0, 0)"
@@ -31,7 +31,7 @@
             Today
           </div>
 
-          <v-timeline density="compact" align="start">
+          <v-timeline align="start" density="compact">
             <v-timeline-item
               v-for="message in messages"
               :key="message.time"
diff --git a/packages/docs/src/examples/v-card/misc-custom-actions.vue b/packages/docs/src/examples/v-card/misc-custom-actions.vue
index d9ec614b125..d123555dea4 100644
--- a/packages/docs/src/examples/v-card/misc-custom-actions.vue
+++ b/packages/docs/src/examples/v-card/misc-custom-actions.vue
@@ -4,8 +4,8 @@
     max-width="344"
   >
     <v-img
-      src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
       height="200px"
+      src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
       cover
     ></v-img>
 
diff --git a/packages/docs/src/examples/v-card/misc-grids.vue b/packages/docs/src/examples/v-card/misc-grids.vue
index 51535dba715..bb0ba2894e2 100644
--- a/packages/docs/src/examples/v-card/misc-grids.vue
+++ b/packages/docs/src/examples/v-card/misc-grids.vue
@@ -3,32 +3,6 @@
     class="mx-auto"
     max-width="500"
   >
-    <!-- <v-system-bar
-      color="indigo darken-2"
-      dark
-    >
-      <v-spacer></v-spacer>
-
-      <v-icon icon="mdi-window-minimize"></v-icon>
-
-      <v-icon icon="mdi-window-maximize"></v-icon>
-
-      <v-icon icon="mdi-close"></v-icon>
-    </v-system-bar>
-
-    <v-toolbar
-      color="indigo"
-      dark
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-      <v-toolbar-title>Discover</v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn icon="mdi-magnify"></v-btn>
-    </v-toolbar> -->
-
     <v-container fluid>
       <v-row dense>
         <v-col
@@ -50,11 +24,11 @@
             <v-card-actions>
               <v-spacer></v-spacer>
 
-              <v-btn size="small" color="surface-variant" variant="text" icon="mdi-heart"></v-btn>
+              <v-btn color="surface-variant" icon="mdi-heart" size="small" variant="text"></v-btn>
 
-              <v-btn size="small" color="surface-variant" variant="text" icon="mdi-bookmark"></v-btn>
+              <v-btn color="surface-variant" icon="mdi-bookmark" size="small" variant="text"></v-btn>
 
-              <v-btn size="small" color="surface-variant" variant="text" icon="mdi-share-variant"></v-btn>
+              <v-btn color="surface-variant" icon="mdi-share-variant" size="small" variant="text"></v-btn>
             </v-card-actions>
           </v-card>
         </v-col>
diff --git a/packages/docs/src/examples/v-card/misc-horizontal-cards.vue b/packages/docs/src/examples/v-card/misc-horizontal-cards.vue
index 393532c25ce..1a6ac87a8cc 100644
--- a/packages/docs/src/examples/v-card/misc-horizontal-cards.vue
+++ b/packages/docs/src/examples/v-card/misc-horizontal-cards.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
-    max-width="400"
     class="mx-auto"
+    max-width="400"
   >
     <!-- <v-system-bar
       color="pink darken-2"
@@ -68,8 +68,8 @@
                 <v-card-actions>
                   <v-btn
                     class="ms-2"
-                    variant="outlined"
                     size="small"
+                    variant="outlined"
                   >
                     START RADIO
                   </v-btn>
@@ -78,8 +78,8 @@
 
               <v-avatar
                 class="ma-3"
-                size="125"
                 rounded="0"
+                size="125"
               >
                 <v-img src="https://cdn.vuetifyjs.com/images/cards/foster.jpg"></v-img>
               </v-avatar>
@@ -111,8 +111,8 @@
 
               <v-avatar
                 class="ma-3"
-                size="125"
                 rounded="0"
+                size="125"
               >
                 <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
               </v-avatar>
diff --git a/packages/docs/src/examples/v-card/misc-information-card.vue b/packages/docs/src/examples/v-card/misc-information-card.vue
index cd296c0da5a..e667ac67d54 100644
--- a/packages/docs/src/examples/v-card/misc-information-card.vue
+++ b/packages/docs/src/examples/v-card/misc-information-card.vue
@@ -16,8 +16,8 @@
     </v-card-text>
     <v-card-actions>
       <v-btn
-        variant="text"
         color="deep-purple-accent-4"
+        variant="text"
       >
         Learn More
       </v-btn>
diff --git a/packages/docs/src/examples/v-card/misc-intermediate.vue b/packages/docs/src/examples/v-card/misc-intermediate.vue
index 6aac332a26b..bedc618a938 100644
--- a/packages/docs/src/examples/v-card/misc-intermediate.vue
+++ b/packages/docs/src/examples/v-card/misc-intermediate.vue
@@ -5,14 +5,14 @@
         <v-col cols="auto">
           <v-img
             height="200"
-            width="200"
             src="https://cdn.vuetifyjs.com/images/cards/store.jpg"
+            width="200"
           ></v-img>
         </v-col>
 
         <v-col
-          cols="auto"
           class="text-center ps-0"
+          cols="auto"
         >
           <v-row
             class="flex-column ma-0 fill-height"
diff --git a/packages/docs/src/examples/v-card/misc-twitter-card.vue b/packages/docs/src/examples/v-card/misc-twitter-card.vue
index fbc42293efa..778c07b43c2 100644
--- a/packages/docs/src/examples/v-card/misc-twitter-card.vue
+++ b/packages/docs/src/examples/v-card/misc-twitter-card.vue
@@ -2,9 +2,9 @@
   <v-card
     class="mx-auto"
     color="#26c6da"
-    theme="dark"
     max-width="400"
     prepend-icon="mdi-twitter"
+    theme="dark"
     title="Twitter"
   >
     <template v-slot:prepend>
diff --git a/packages/docs/src/examples/v-card/misc-weather-card.vue b/packages/docs/src/examples/v-card/misc-weather-card.vue
index b6ea2b5754a..ea6bd7876d2 100644
--- a/packages/docs/src/examples/v-card/misc-weather-card.vue
+++ b/packages/docs/src/examples/v-card/misc-weather-card.vue
@@ -6,10 +6,10 @@
     <v-card-item title="Florida">
       <template v-slot:subtitle>
         <v-icon
+          class="me-1 pb-1"
+          color="error"
           icon="mdi-alert"
           size="18"
-          color="error"
-          class="me-1 pb-1"
         ></v-icon>
 
         Extreme Weather Alert
@@ -25,7 +25,7 @@
           64&deg;F
         </v-col>
 
-        <v-col cols="6" class="text-right">
+        <v-col class="text-right" cols="6">
           <v-icon
             color="error"
             icon="mdi-weather-hurricane"
@@ -62,9 +62,9 @@
             class="mx-4"
             color="primary"
             density="compact"
-            hide-details
             show-ticks="always"
             thumb-size="10"
+            hide-details
           ></v-slider>
         </div>
 
@@ -72,9 +72,9 @@
           <v-list-item
             v-for="item in forecast"
             :key="item.day"
-            :title="item.day"
             :append-icon="item.icon"
             :subtitle="item.temp"
+            :title="item.day"
           >
           </v-list-item>
         </v-list>
diff --git a/packages/docs/src/examples/v-card/prop-color.vue b/packages/docs/src/examples/v-card/prop-color.vue
index a9e6aeeb38e..fda234e6a58 100644
--- a/packages/docs/src/examples/v-card/prop-color.vue
+++ b/packages/docs/src/examples/v-card/prop-color.vue
@@ -9,23 +9,23 @@
           inline
         >
           <v-radio
-            label="indigo"
             color="indigo"
+            label="indigo"
             value="indigo"
           ></v-radio>
           <v-radio
-            label="indigo-darken-3"
             color="indigo-darken-3"
+            label="indigo-darken-3"
             value="indigo-darken-3"
           ></v-radio>
           <v-radio
-            label="primary"
             color="primary"
+            label="primary"
             value="primary"
           ></v-radio>
           <v-radio
-            label="secondary"
             color="secondary"
+            label="secondary"
             value="secondary"
           ></v-radio>
         </v-radio-group>
@@ -38,10 +38,10 @@
         cols="auto"
       >
         <v-card
-          class="mx-auto"
-          max-width="344"
           :color="color"
           :variant="variant"
+          class="mx-auto"
+          max-width="344"
         >
           <v-card-item>
             <div>
diff --git a/packages/docs/src/examples/v-card/prop-disabled.vue b/packages/docs/src/examples/v-card/prop-disabled.vue
index 67eaa4ee154..b0190c2ffee 100644
--- a/packages/docs/src/examples/v-card/prop-disabled.vue
+++ b/packages/docs/src/examples/v-card/prop-disabled.vue
@@ -2,9 +2,9 @@
   <v-card
     class="mx-auto my-8"
     max-width="344"
-    title="Disabled card"
     subtitle="The card stays disabled"
-    link
+    title="Disabled card"
     disabled
+    link
   ></v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-elevation.vue b/packages/docs/src/examples/v-card/prop-elevation.vue
index 1fa8f6c12b9..b866f60c393 100644
--- a/packages/docs/src/examples/v-card/prop-elevation.vue
+++ b/packages/docs/src/examples/v-card/prop-elevation.vue
@@ -1,8 +1,8 @@
 <template>
   <v-card
     class="mx-auto my-8"
-    max-width="344"
     elevation="16"
+    max-width="344"
   >
     <v-card-item>
       <v-card-title>
diff --git a/packages/docs/src/examples/v-card/prop-href.vue b/packages/docs/src/examples/v-card/prop-href.vue
index 2d9bc84429d..286b9130c6f 100644
--- a/packages/docs/src/examples/v-card/prop-href.vue
+++ b/packages/docs/src/examples/v-card/prop-href.vue
@@ -1,12 +1,12 @@
 <template>
   <v-card
+    append-icon="mdi-open-in-new"
     class="mx-auto my-8"
+    href="https://github.com/vuetifyjs/vuetify/"
     max-width="344"
-    title="Vuetify on GitHub"
     prepend-icon="mdi-github"
-    append-icon="mdi-open-in-new"
-    href="https://github.com/vuetifyjs/vuetify/"
-    target="_blank"
     rel="noopener"
+    target="_blank"
+    title="Vuetify on GitHub"
   ></v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-image.vue b/packages/docs/src/examples/v-card/prop-image.vue
index c4117027a79..b93eb54f9c3 100644
--- a/packages/docs/src/examples/v-card/prop-image.vue
+++ b/packages/docs/src/examples/v-card/prop-image.vue
@@ -1,10 +1,10 @@
 <template>
   <v-card
     class="mx-auto"
-    max-width="200"
     height="200"
     image="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
-    title="Card title"
+    max-width="200"
     theme="dark"
+    title="Card title"
   ></v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-link.vue b/packages/docs/src/examples/v-card/prop-link.vue
index 02457923e6c..49bfce75cdc 100644
--- a/packages/docs/src/examples/v-card/prop-link.vue
+++ b/packages/docs/src/examples/v-card/prop-link.vue
@@ -2,8 +2,8 @@
   <v-card
     class="mx-auto my-8"
     max-width="344"
-    title="Hover and click me"
     subtitle="Same looks, no anchor"
+    title="Hover and click me"
     link
   ></v-card>
 </template>
diff --git a/packages/docs/src/examples/v-card/prop-loading.vue b/packages/docs/src/examples/v-card/prop-loading.vue
index 8fdaeed4c18..1ea7075c493 100644
--- a/packages/docs/src/examples/v-card/prop-loading.vue
+++ b/packages/docs/src/examples/v-card/prop-loading.vue
@@ -14,9 +14,9 @@
     </template>
 
     <v-img
-      cover
       height="250"
       src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+      cover
     ></v-img>
 
     <v-card-item>
@@ -42,9 +42,9 @@
           :model-value="4.5"
           color="amber"
           density="compact"
+          size="small"
           half-increments
           readonly
-          size="small"
         ></v-rating>
 
         <div class="text-grey ms-4">
diff --git a/packages/docs/src/examples/v-card/prop-variant.vue b/packages/docs/src/examples/v-card/prop-variant.vue
index 707c4e8b4a5..ee36af1a01e 100644
--- a/packages/docs/src/examples/v-card/prop-variant.vue
+++ b/packages/docs/src/examples/v-card/prop-variant.vue
@@ -7,9 +7,9 @@
         cols="auto"
       >
         <v-card
+          :variant="variant"
           class="mx-auto"
           max-width="344"
-          :variant="variant"
         >
           <v-card-item>
             <div>
diff --git a/packages/docs/src/examples/v-card/slot-prepend-append.vue b/packages/docs/src/examples/v-card/slot-prepend-append.vue
index 3824cdedad0..6f006073e6c 100644
--- a/packages/docs/src/examples/v-card/slot-prepend-append.vue
+++ b/packages/docs/src/examples/v-card/slot-prepend-append.vue
@@ -2,12 +2,12 @@
   <v-row align="center" justify="center">
     <v-col cols="auto">
       <v-card
+        append-icon="mdi-check"
         class="mx-auto"
         max-width="344"
-        title="Icons"
-        subtitle="prepend-icon and append-icon"
         prepend-icon="mdi-account"
-        append-icon="mdi-check"
+        subtitle="prepend-icon and append-icon"
+        title="Icons"
       >
         <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
       </v-card>
@@ -17,14 +17,14 @@
       <v-card
         class="mx-auto"
         max-width="344"
-        title="Icons"
         subtitle="prepend and append"
+        title="Icons"
       >
         <template v-slot:prepend>
-          <v-icon icon="mdi-account" color="primary"></v-icon>
+          <v-icon color="primary" icon="mdi-account"></v-icon>
         </template>
         <template v-slot:append>
-          <v-icon icon="mdi-check" color="success"></v-icon>
+          <v-icon color="success" icon="mdi-check"></v-icon>
         </template>
         <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
       </v-card>
@@ -32,12 +32,12 @@
 
     <v-col cols="auto">
       <v-card
+        append-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
         class="mx-auto"
         max-width="344"
-        title="Avatars"
-        subtitle="prepend-avatar and append-avatar"
         prepend-avatar="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
-        append-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
+        subtitle="prepend-avatar and append-avatar"
+        title="Avatars"
       >
         <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</v-card-text>
       </v-card>
@@ -47,8 +47,8 @@
       <v-card
         class="mx-auto"
         max-width="344"
-        title="Avatars"
         subtitle="prepend and append"
+        title="Avatars"
       >
         <template v-slot:prepend>
           <v-avatar color="blue-darken-2">
@@ -58,8 +58,8 @@
         <template v-slot:append>
           <v-avatar size="24">
             <v-img
-              src="https://cdn.vuetifyjs.com/images/john.png"
               alt="John"
+              src="https://cdn.vuetifyjs.com/images/john.png"
             ></v-img>
           </v-avatar>
         </template>
diff --git a/packages/docs/src/examples/v-card/usage.vue b/packages/docs/src/examples/v-card/usage.vue
index 7dbf420d635..c764ff79857 100644
--- a/packages/docs/src/examples/v-card/usage.vue
+++ b/packages/docs/src/examples/v-card/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
 
@@ -27,14 +27,10 @@
 
       <v-checkbox v-model="loading" label="Loading"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-card'
   const model = ref('default')
   const actions = ref(false)
diff --git a/packages/docs/src/examples/v-carousel/prop-custom-icons.vue b/packages/docs/src/examples/v-carousel/prop-custom-icons.vue
index 31875eb3371..fde68e1b27a 100644
--- a/packages/docs/src/examples/v-carousel/prop-custom-icons.vue
+++ b/packages/docs/src/examples/v-carousel/prop-custom-icons.vue
@@ -1,15 +1,15 @@
 <template>
   <v-card
+    class="mx-auto"
     elevation="24"
     max-width="444"
-    class="mx-auto"
   >
     <v-carousel
       :continuous="false"
       :show-arrows="false"
-      hide-delimiter-background
       delimiter-icon="mdi-square"
       height="300"
+      hide-delimiter-background
     >
       <v-carousel-item
         v-for="(slide, i) in slides"
diff --git a/packages/docs/src/examples/v-carousel/prop-custom-transition.vue b/packages/docs/src/examples/v-carousel/prop-custom-transition.vue
index 5b8ef2338cb..cd600dc1d2d 100644
--- a/packages/docs/src/examples/v-carousel/prop-custom-transition.vue
+++ b/packages/docs/src/examples/v-carousel/prop-custom-transition.vue
@@ -4,9 +4,9 @@
       v-for="(item,i) in items"
       :key="i"
       :src="item.src"
-      cover
       reverse-transition="fade-transition"
       transition="fade-transition"
+      cover
     ></v-carousel-item>
   </v-carousel>
 </template>
diff --git a/packages/docs/src/examples/v-carousel/prop-cycle.vue b/packages/docs/src/examples/v-carousel/prop-cycle.vue
index ea2e72622c3..fde566dd9f8 100644
--- a/packages/docs/src/examples/v-carousel/prop-cycle.vue
+++ b/packages/docs/src/examples/v-carousel/prop-cycle.vue
@@ -1,9 +1,9 @@
 <template>
   <v-carousel
-    cycle
     height="400"
-    hide-delimiter-background
     show-arrows="hover"
+    cycle
+    hide-delimiter-background
   >
     <v-carousel-item
       v-for="(slide, i) in slides"
diff --git a/packages/docs/src/examples/v-carousel/prop-model.vue b/packages/docs/src/examples/v-carousel/prop-model.vue
index e219949eada..f1ce1441cd0 100644
--- a/packages/docs/src/examples/v-carousel/prop-model.vue
+++ b/packages/docs/src/examples/v-carousel/prop-model.vue
@@ -2,14 +2,14 @@
   <div>
     <div class="d-flex justify-space-around align-center py-4">
       <v-btn
-        variant="text"
         icon="mdi-minus"
+        variant="text"
         @click="model = Math.max(model - 1, 0)"
       ></v-btn>
       {{ model }}
       <v-btn
-        variant="text"
         icon="mdi-plus"
+        variant="text"
         @click="model = Math.min(model + 1, 4)"
       ></v-btn>
     </div>
diff --git a/packages/docs/src/examples/v-carousel/prop-progress.vue b/packages/docs/src/examples/v-carousel/prop-progress.vue
index 2341fc4821e..563ed68c98c 100644
--- a/packages/docs/src/examples/v-carousel/prop-progress.vue
+++ b/packages/docs/src/examples/v-carousel/prop-progress.vue
@@ -1,8 +1,8 @@
 <template>
   <v-carousel
     height="400"
-    hide-delimiters
     progress="primary"
+    hide-delimiters
   >
     <v-carousel-item
       v-for="(slide, i) in slides"
diff --git a/packages/docs/src/examples/v-carousel/slots-next-prev.vue b/packages/docs/src/examples/v-carousel/slots-next-prev.vue
index a7cddf6b993..b8161d636bb 100644
--- a/packages/docs/src/examples/v-carousel/slots-next-prev.vue
+++ b/packages/docs/src/examples/v-carousel/slots-next-prev.vue
@@ -1,20 +1,20 @@
 <template>
   <v-carousel
     height="400"
-    show-arrows
     hide-delimiter-background
+    show-arrows
   >
     <template v-slot:prev="{ props }">
       <v-btn
-        variant="elevated"
         color="success"
+        variant="elevated"
         @click="props.onClick"
       >Previous slide</v-btn>
     </template>
     <template v-slot:next="{ props }">
       <v-btn
-        variant="elevated"
         color="info"
+        variant="elevated"
         @click="props.onClick"
       >Next slide</v-btn>
     </template>
diff --git a/packages/docs/src/examples/v-carousel/usage.vue b/packages/docs/src/examples/v-carousel/usage.vue
index 98b4a20b538..a34810e0712 100644
--- a/packages/docs/src/examples/v-carousel/usage.vue
+++ b/packages/docs/src/examples/v-carousel/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-carousel v-bind="props">
@@ -23,14 +23,10 @@
         ></v-carousel-item>
       </v-carousel>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-carousel'
   const model = ref('default')
   const options = ['Hide delimiters', 'Show arrows on hover']
diff --git a/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue b/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue
index ae07ab5f34a..72ef2dc2ec2 100644
--- a/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue
+++ b/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue
@@ -18,8 +18,8 @@
         ></v-checkbox-btn>
         <v-text-field
           :disabled="!enabled"
-          hide-details
           label="I only work if you check the box"
+          hide-details
         ></v-text-field>
       </div>
     </v-card-text>
diff --git a/packages/docs/src/examples/v-checkbox/prop-colors.vue b/packages/docs/src/examples/v-checkbox/prop-colors.vue
index b5501798602..18116a58b7d 100644
--- a/packages/docs/src/examples/v-checkbox/prop-colors.vue
+++ b/packages/docs/src/examples/v-checkbox/prop-colors.vue
@@ -4,60 +4,60 @@
       <v-row>
         <v-col
           cols="12"
-          sm="4"
           md="4"
+          sm="4"
         >
           <v-checkbox
             v-model="ex4"
-            label="red"
             color="red"
+            label="red"
             value="red"
             hide-details
           ></v-checkbox>
           <v-checkbox
             v-model="ex4"
-            label="red-darken-3"
             color="red-darken-3"
+            label="red-darken-3"
             value="red-darken-3"
             hide-details
           ></v-checkbox>
         </v-col>
         <v-col
           cols="12"
-          sm="4"
           md="4"
+          sm="4"
         >
           <v-checkbox
             v-model="ex4"
-            label="indigo"
             color="indigo"
+            label="indigo"
             value="indigo"
             hide-details
           ></v-checkbox>
           <v-checkbox
             v-model="ex4"
-            label="indigo-darken-3"
             color="indigo-darken-3"
+            label="indigo-darken-3"
             value="indigo-darken-3"
             hide-details
           ></v-checkbox>
         </v-col>
         <v-col
           cols="12"
-          sm="4"
           md="4"
+          sm="4"
         >
           <v-checkbox
             v-model="ex4"
-            label="orange"
             color="orange"
+            label="orange"
             value="orange"
             hide-details
           ></v-checkbox>
           <v-checkbox
             v-model="ex4"
-            label="orange-darken-3"
             color="orange-darken-3"
+            label="orange-darken-3"
             value="orange-darken-3"
             hide-details
           ></v-checkbox>
@@ -67,60 +67,60 @@
       <v-row class="mt-12">
         <v-col
           cols="12"
-          sm="4"
           md="4"
+          sm="4"
         >
           <v-checkbox
             v-model="ex4"
-            label="primary"
             color="primary"
+            label="primary"
             value="primary"
             hide-details
           ></v-checkbox>
           <v-checkbox
             v-model="ex4"
-            label="secondary"
             color="secondary"
+            label="secondary"
             value="secondary"
             hide-details
           ></v-checkbox>
         </v-col>
         <v-col
           cols="12"
-          sm="4"
           md="4"
+          sm="4"
         >
           <v-checkbox
             v-model="ex4"
-            label="success"
             color="success"
+            label="success"
             value="success"
             hide-details
           ></v-checkbox>
           <v-checkbox
             v-model="ex4"
-            label="info"
             color="info"
+            label="info"
             value="info"
             hide-details
           ></v-checkbox>
         </v-col>
         <v-col
           cols="12"
-          sm="4"
           md="4"
+          sm="4"
         >
           <v-checkbox
             v-model="ex4"
-            label="warning"
             color="warning"
+            label="warning"
             value="warning"
             hide-details
           ></v-checkbox>
           <v-checkbox
             v-model="ex4"
-            label="error"
             color="error"
+            label="error"
             value="error"
             hide-details
           ></v-checkbox>
diff --git a/packages/docs/src/examples/v-checkbox/slot-label.vue b/packages/docs/src/examples/v-checkbox/slot-label.vue
index 6776f816fe8..eb5096bd16a 100644
--- a/packages/docs/src/examples/v-checkbox/slot-label.vue
+++ b/packages/docs/src/examples/v-checkbox/slot-label.vue
@@ -7,8 +7,8 @@
           <v-tooltip location="bottom">
             <template v-slot:activator="{ props }">
               <a
-                target="_blank"
                 href="https://vuetifyjs.com"
+                target="_blank"
                 v-bind="props"
                 @click.stop
               >
diff --git a/packages/docs/src/examples/v-checkbox/usage.vue b/packages/docs/src/examples/v-checkbox/usage.vue
index 58ef4bdea5c..3f6eed50679 100644
--- a/packages/docs/src/examples/v-checkbox/usage.vue
+++ b/packages/docs/src/examples/v-checkbox/usage.vue
@@ -1,21 +1,17 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-checkbox v-bind="props" hide-details></v-checkbox>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-checkbox'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-chip-group/misc-product-card.vue b/packages/docs/src/examples/v-chip-group/misc-product-card.vue
index 21fb76f8ce3..81d7fb6ecf3 100644
--- a/packages/docs/src/examples/v-chip-group/misc-product-card.vue
+++ b/packages/docs/src/examples/v-chip-group/misc-product-card.vue
@@ -37,8 +37,8 @@
 
     <v-card-actions>
       <v-btn
-        block
         color="deep-purple-accent-4"
+        block
       >
         Add to Cart
       </v-btn>
diff --git a/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue b/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue
index 1a0775a5e85..f4b946a8aa6 100644
--- a/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue
+++ b/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue
@@ -35,8 +35,8 @@
 
     <v-card-actions>
       <v-btn
-        block
         color="deep-purple-accent-4"
+        block
       >
         Add to Cart
       </v-btn>
diff --git a/packages/docs/src/examples/v-chip-group/prop-column.vue b/packages/docs/src/examples/v-chip-group/prop-column.vue
index 78d76675aef..3cf0069f192 100644
--- a/packages/docs/src/examples/v-chip-group/prop-column.vue
+++ b/packages/docs/src/examples/v-chip-group/prop-column.vue
@@ -2,9 +2,9 @@
   <v-row justify="center">
     <v-col
       cols="12"
-      sm="7"
-      md="6"
       lg="5"
+      md="6"
+      sm="7"
     >
       <v-sheet
         elevation="10"
diff --git a/packages/docs/src/examples/v-chip-group/prop-filter.vue b/packages/docs/src/examples/v-chip-group/prop-filter.vue
index d215b2082e4..27970343cf8 100644
--- a/packages/docs/src/examples/v-chip-group/prop-filter.vue
+++ b/packages/docs/src/examples/v-chip-group/prop-filter.vue
@@ -4,9 +4,9 @@
     max-width="400"
   >
     <v-toolbar
-      flat
       color="deep-purple-accent-4"
       dark
+      flat
     >
       <v-btn icon>
         <v-icon>mdi-close</v-icon>
@@ -25,38 +25,38 @@
         multiple
       >
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Elevator
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Washer / Dryer
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Fireplace
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Wheelchair access
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Dogs ok
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Cats ok
         </v-chip>
@@ -74,38 +74,38 @@
         multiple
       >
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Snowy Rock Place
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Honeylane Circle
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Donna Drive
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Elaine Street
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Court Street
         </v-chip>
         <v-chip
-          filter
           variant="outlined"
+          filter
         >
           Kennedy Park
         </v-chip>
diff --git a/packages/docs/src/examples/v-chip-group/prop-mandatory.vue b/packages/docs/src/examples/v-chip-group/prop-mandatory.vue
index 74ef47eed51..a50fde0ac7e 100644
--- a/packages/docs/src/examples/v-chip-group/prop-mandatory.vue
+++ b/packages/docs/src/examples/v-chip-group/prop-mandatory.vue
@@ -2,12 +2,12 @@
   <v-row justify="space-around">
     <v-col cols="auto">
       <v-sheet
-        elevation="10"
         class="py-4 px-1"
+        elevation="10"
       >
         <v-chip-group
-          mandatory
           selected-class="text-primary"
+          mandatory
         >
           <v-chip
             v-for="tag in tags"
diff --git a/packages/docs/src/examples/v-chip-group/prop-multiple.vue b/packages/docs/src/examples/v-chip-group/prop-multiple.vue
index 6c5f848bda3..7596a715089 100644
--- a/packages/docs/src/examples/v-chip-group/prop-multiple.vue
+++ b/packages/docs/src/examples/v-chip-group/prop-multiple.vue
@@ -2,12 +2,12 @@
   <v-row justify="space-around">
     <v-col cols="auto">
       <v-sheet
-        elevation="10"
         class="py-4 px-1"
+        elevation="10"
       >
         <v-chip-group
-          multiple
           selected-class="text-primary"
+          multiple
         >
           <v-chip
             v-for="tag in tags"
diff --git a/packages/docs/src/examples/v-chip-group/usage.vue b/packages/docs/src/examples/v-chip-group/usage.vue
index b79809cfbf7..cdc9a63bf11 100644
--- a/packages/docs/src/examples/v-chip-group/usage.vue
+++ b/packages/docs/src/examples/v-chip-group/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-chip-group v-bind="props">
@@ -14,14 +14,10 @@
         <v-chip>Chip 3</v-chip>
       </v-chip-group>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-chip-group'
   const model = ref('default')
   const options = ['filter']
diff --git a/packages/docs/src/examples/v-chip/event-action-chips.vue b/packages/docs/src/examples/v-chip/event-action-chips.vue
index 931a76e1e84..6303aa9cab4 100644
--- a/packages/docs/src/examples/v-chip/event-action-chips.vue
+++ b/packages/docs/src/examples/v-chip/event-action-chips.vue
@@ -4,9 +4,9 @@
     max-width="450"
   >
     <v-img
+      :aspect-ratio="16/9"
       src="https://cdn.vuetifyjs.com/images/cards/house.jpg"
       cover
-      :aspect-ratio="16/9"
     >
     </v-img>
     <v-card-title class="flex-column align-start">
@@ -18,8 +18,8 @@
       </div>
       <div class="d-flex align-center">
         <v-avatar
-          size="24"
           class="me-4"
+          size="24"
         >
           <v-img
             src="https://cdn.vuetifyjs.com/images/weather/part-cloud-48px.png"
diff --git a/packages/docs/src/examples/v-chip/misc-custom-list.vue b/packages/docs/src/examples/v-chip/misc-custom-list.vue
index d882825f402..8377112a5ba 100644
--- a/packages/docs/src/examples/v-chip/misc-custom-list.vue
+++ b/packages/docs/src/examples/v-chip/misc-custom-list.vue
@@ -28,8 +28,8 @@
         <v-col
           v-for="(selection, i) in selections"
           :key="selection.text"
-          cols="auto"
           class="py-1 pe-0"
+          cols="auto"
         >
           <v-chip
             :disabled="loading"
@@ -52,8 +52,8 @@
           <v-text-field
             ref="searchField"
             v-model="search"
-            hide-details
             label="Search"
+            hide-details
             single-line
           ></v-text-field>
         </v-col>
diff --git a/packages/docs/src/examples/v-chip/misc-expandable.vue b/packages/docs/src/examples/v-chip/misc-expandable.vue
index a705a3bc525..389c5b513cf 100644
--- a/packages/docs/src/examples/v-chip/misc-expandable.vue
+++ b/packages/docs/src/examples/v-chip/misc-expandable.vue
@@ -17,9 +17,9 @@
       >
         <template v-slot:activator="{ props }">
           <v-chip
-            pill
             v-bind="props"
             link
+            pill
           >
             <v-avatar start>
               <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
@@ -43,8 +43,8 @@
               <template v-slot:append>
                 <v-list-item-action>
                   <v-btn
-                    icon
                     variant="text"
+                    icon
                     @click="menu = false"
                   >
                     <v-icon>mdi-close-circle</v-icon>
@@ -55,7 +55,7 @@
           </v-list>
 
           <v-list>
-            <v-list-item link prepend-icon="mdi-briefcase">
+            <v-list-item prepend-icon="mdi-briefcase" link>
               <v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
             </v-list-item>
           </v-list>
@@ -69,14 +69,14 @@
       <v-text-field
         label="Subject"
         model-value="Re: Vacation Request"
-        single-line
         variant="underlined"
+        single-line
       ></v-text-field>
 
       <v-textarea
         label="Message"
-        single-line
         variant="underlined"
+        single-line
       ></v-textarea>
     </div>
   </v-card>
diff --git a/packages/docs/src/examples/v-chip/misc-filtering.vue b/packages/docs/src/examples/v-chip/misc-filtering.vue
index 76d47096931..2f2d73c40c7 100644
--- a/packages/docs/src/examples/v-chip/misc-filtering.vue
+++ b/packages/docs/src/examples/v-chip/misc-filtering.vue
@@ -15,10 +15,10 @@
 
       <v-text-field
         v-model="search"
-        clearable
-        hide-details
         label="Search News"
         prepend-inner-icon="mdi-magnify"
+        clearable
+        hide-details
         single-line
       ></v-text-field>
 
diff --git a/packages/docs/src/examples/v-chip/misc-in-selects.vue b/packages/docs/src/examples/v-chip/misc-in-selects.vue
index cbeba425562..861c3013afb 100644
--- a/packages/docs/src/examples/v-chip/misc-in-selects.vue
+++ b/packages/docs/src/examples/v-chip/misc-in-selects.vue
@@ -2,12 +2,12 @@
   <v-combobox
     v-model="chips"
     :items="items"
-    chips
-    clearable
     label="Your favorite hobbies"
-    multiple
     prepend-icon="mdi-filter-variant"
     variant="solo"
+    chips
+    clearable
+    multiple
   >
     <template v-slot:selection="{ attrs, item, select, selected }">
       <v-chip
diff --git a/packages/docs/src/examples/v-chip/prop-closable.vue b/packages/docs/src/examples/v-chip/prop-closable.vue
index 4e973874b5b..2e9e7936257 100644
--- a/packages/docs/src/examples/v-chip/prop-closable.vue
+++ b/packages/docs/src/examples/v-chip/prop-closable.vue
@@ -11,8 +11,8 @@
 
     <v-btn
       v-if="!chip"
-      close
       color="primary"
+      close
       dark
       @click="chip = true"
     >
diff --git a/packages/docs/src/examples/v-chip/prop-colored.vue b/packages/docs/src/examples/v-chip/prop-colored.vue
index 919dbeba3ea..8069b9f6db2 100644
--- a/packages/docs/src/examples/v-chip/prop-colored.vue
+++ b/packages/docs/src/examples/v-chip/prop-colored.vue
@@ -25,19 +25,19 @@
       Default flat
     </v-chip>
 
-    <v-chip variant="flat" color="primary">
+    <v-chip color="primary" variant="flat">
       Primary flat
     </v-chip>
 
-    <v-chip variant="flat" color="secondary">
+    <v-chip color="secondary" variant="flat">
       Secondary flat
     </v-chip>
 
-    <v-chip variant="flat" color="red">
+    <v-chip color="red" variant="flat">
       Red flat
     </v-chip>
 
-    <v-chip variant="flat" color="green">
+    <v-chip color="green" variant="flat">
       Green flat
     </v-chip>
   </div>
diff --git a/packages/docs/src/examples/v-chip/prop-filter.vue b/packages/docs/src/examples/v-chip/prop-filter.vue
index d91ef6ad907..5947372469c 100644
--- a/packages/docs/src/examples/v-chip/prop-filter.vue
+++ b/packages/docs/src/examples/v-chip/prop-filter.vue
@@ -1,30 +1,30 @@
 <template>
   <v-row
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-chip
-      class="ma-2"
       :model-value="active"
+      class="ma-2"
       filter
     >
       I'm v-chip
     </v-chip>
 
     <v-chip
-      class="ma-2"
       :model-value="active"
-      filter
+      class="ma-2"
       filter-icon="mdi-plus"
+      filter
     >
       I'm v-chip
     </v-chip>
 
     <v-chip
-      class="ma-2"
       :model-value="active"
-      filter
+      class="ma-2"
       filter-icon="mdi-minus"
+      filter
     >
       I'm v-chip
     </v-chip>
diff --git a/packages/docs/src/examples/v-chip/prop-label.vue b/packages/docs/src/examples/v-chip/prop-label.vue
index 4ba04b19abc..420ae6a4123 100644
--- a/packages/docs/src/examples/v-chip/prop-label.vue
+++ b/packages/docs/src/examples/v-chip/prop-label.vue
@@ -12,7 +12,7 @@
       color="pink"
       label
     >
-      <v-icon start icon="mdi-label"></v-icon>
+      <v-icon icon="mdi-label" start></v-icon>
       Tags
     </v-chip>
 
@@ -21,17 +21,17 @@
       color="primary"
       label
     >
-      <v-icon start icon="mdi-account-circle-outline"></v-icon>
+      <v-icon icon="mdi-account-circle-outline" start></v-icon>
       John Leider
     </v-chip>
 
     <v-chip
       class="ma-2"
-      closable
       color="cyan"
+      closable
       label
     >
-      <v-icon start icon="mdi-twitter"></v-icon>
+      <v-icon icon="mdi-twitter" start></v-icon>
       New Tweets
     </v-chip>
   </div>
diff --git a/packages/docs/src/examples/v-chip/prop-outlined.vue b/packages/docs/src/examples/v-chip/prop-outlined.vue
index 261867937a1..ab0a9512c19 100644
--- a/packages/docs/src/examples/v-chip/prop-outlined.vue
+++ b/packages/docs/src/examples/v-chip/prop-outlined.vue
@@ -5,7 +5,7 @@
       color="success"
       variant="outlined"
     >
-      <v-icon start icon="mdi-server-plus"></v-icon>
+      <v-icon icon="mdi-server-plus" start></v-icon>
       Server Status
     </v-chip>
 
@@ -15,7 +15,7 @@
       variant="outlined"
     >
       User Account
-      <v-icon end icon="mdi-account-outline"></v-icon>
+      <v-icon icon="mdi-account-outline" end></v-icon>
     </v-chip>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-chip/prop-sizes.vue b/packages/docs/src/examples/v-chip/prop-sizes.vue
index 57c9ec65970..005c1ac720a 100644
--- a/packages/docs/src/examples/v-chip/prop-sizes.vue
+++ b/packages/docs/src/examples/v-chip/prop-sizes.vue
@@ -25,11 +25,11 @@
   <div class="d-flex justify-center align-center ga-2 mt-2">
     <v-label style="width: 100px">comfortable</v-label>
 
-    <v-chip size="x-small" density="comfortable">
+    <v-chip density="comfortable" size="x-small">
       x-small
     </v-chip>
 
-    <v-chip size="small" density="comfortable">
+    <v-chip density="comfortable" size="small">
       small
     </v-chip>
 
@@ -37,22 +37,22 @@
       default
     </v-chip>
 
-    <v-chip size="large" density="comfortable">
+    <v-chip density="comfortable" size="large">
       large
     </v-chip>
 
-    <v-chip size="x-large" density="comfortable">
+    <v-chip density="comfortable" size="x-large">
       x-large
     </v-chip>
   </div>
   <div class="d-flex justify-center align-center ga-2 mt-2">
     <v-label style="width: 100px">compact</v-label>
 
-    <v-chip size="x-small" density="compact">
+    <v-chip density="compact" size="x-small">
       x-small
     </v-chip>
 
-    <v-chip size="small" density="compact">
+    <v-chip density="compact" size="small">
       small
     </v-chip>
 
@@ -60,11 +60,11 @@
       default
     </v-chip>
 
-    <v-chip size="large" density="compact">
+    <v-chip density="compact" size="large">
       large
     </v-chip>
 
-    <v-chip size="x-large" density="compact">
+    <v-chip density="compact" size="x-large">
       x-large
     </v-chip>
   </div>
diff --git a/packages/docs/src/examples/v-chip/slot-icon.vue b/packages/docs/src/examples/v-chip/slot-icon.vue
index b434f698b61..073f471a6da 100644
--- a/packages/docs/src/examples/v-chip/slot-icon.vue
+++ b/packages/docs/src/examples/v-chip/slot-icon.vue
@@ -9,17 +9,17 @@
     </v-chip>
 
     <v-chip
+      append-icon="mdi-star"
       class="ma-2"
       color="orange"
-      append-icon="mdi-star"
     >
       Premium
     </v-chip>
 
     <v-chip
+      append-icon="mdi-cake-variant"
       class="ma-2"
       color="primary"
-      append-icon="mdi-cake-variant"
     >
       1 Year
     </v-chip>
@@ -39,22 +39,22 @@
     </v-chip>
 
     <v-chip
+      :model-value="true"
       class="ma-2"
-      closable
       color="teal"
       prepend-icon="mdi-checkbox-marked-circle"
-      :model-value="true"
+      closable
     >
       Confirmed
     </v-chip>
 
     <v-chip
+      :model-value="true"
       class="ma-2"
-      closable
-      color="teal"
       close-icon="mdi-delete"
+      color="teal"
       prepend-icon="mdi-checkbox-marked-circle"
-      :model-value="true"
+      closable
     >
       Confirmed
     </v-chip>
diff --git a/packages/docs/src/examples/v-chip/usage.vue b/packages/docs/src/examples/v-chip/usage.vue
index a15c3abd487..53eb03743bf 100644
--- a/packages/docs/src/examples/v-chip/usage.vue
+++ b/packages/docs/src/examples/v-chip/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="text-center">
       <v-chip v-bind="props" v-model="chipModel">
@@ -22,14 +22,10 @@
         </template>
       </v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref, watch } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const variants = ['outlined', 'elevated', 'text', 'plain']
   const name = 'v-chip'
   const model = ref('default')
diff --git a/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue b/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue
index c794be2a33b..bb6640abc22 100644
--- a/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue
+++ b/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue
@@ -1,16 +1,16 @@
 <template>
   <v-switch v-model="clickOutsideEnabled" :label="`Click outside ${clickOutsideEnabled ? 'enabled' : 'disabled'}`"></v-switch>
   <v-card
-    v-click-outside="{
-      handler: onClickOutside,
-      closeConditional: onCloseConditional
-    }"
     :color="active ? 'primary' : undefined"
     :dark="active"
     class="mx-auto"
     height="256"
     rounded="xl"
     width="256"
+    v-click-outside="{
+      handler: onClickOutside,
+      closeConditional: onCloseConditional
+    }"
     @click="active = true"
   >
     <div class="text-h6 text-md-h4 fill-height d-flex align-center justify-center">
diff --git a/packages/docs/src/examples/v-click-outside/option-include.vue b/packages/docs/src/examples/v-click-outside/option-include.vue
index 89667dd95bc..53b5a37893d 100644
--- a/packages/docs/src/examples/v-click-outside/option-include.vue
+++ b/packages/docs/src/examples/v-click-outside/option-include.vue
@@ -1,15 +1,15 @@
 <template>
   <v-card
-    v-click-outside="{
-      handler: onClickOutside,
-      include
-    }"
     :color="active ? 'primary' : undefined"
     :dark="active"
     class="mx-auto"
     height="256"
     rounded="xl"
     width="256"
+    v-click-outside="{
+      handler: onClickOutside,
+      include
+    }"
     @click="active = true"
   >
     <div class="text-h6 text-md-h4 fill-height d-flex align-center justify-center">
@@ -19,8 +19,8 @@
 
   <div class="d-flex justify-center">
     <v-card
-      rounded="lg"
       class="ma-2 included"
+      rounded="lg"
     >
       <v-card-text class="text-h6">
         This element is included
@@ -28,8 +28,8 @@
     </v-card>
 
     <v-card
-      rounded="lg"
       class="ma-2"
+      rounded="lg"
     >
       <v-card-text class="text-h6">
         This element is not included
diff --git a/packages/docs/src/examples/v-click-outside/usage.vue b/packages/docs/src/examples/v-click-outside/usage.vue
index f5b48491950..b44b49d1357 100644
--- a/packages/docs/src/examples/v-click-outside/usage.vue
+++ b/packages/docs/src/examples/v-click-outside/usage.vue
@@ -1,12 +1,12 @@
 <template>
   <v-card
-    v-click-outside="onClickOutside"
     :color="active ? 'primary' : undefined"
     :dark="active"
     class="mx-auto"
     height="256"
     rounded="xl"
     width="256"
+    v-click-outside="onClickOutside"
     @click="active = true"
   >
     <div class="text-h6 text-md-h4 fill-height d-flex align-center justify-center">
diff --git a/packages/docs/src/examples/v-color-picker/prop-swatches.vue b/packages/docs/src/examples/v-color-picker/prop-swatches.vue
index 4702ce72ff8..9a7b6d6ead0 100644
--- a/packages/docs/src/examples/v-color-picker/prop-swatches.vue
+++ b/packages/docs/src/examples/v-color-picker/prop-swatches.vue
@@ -2,12 +2,12 @@
   <div class="d-flex justify-space-around">
     <v-color-picker
       class="ma-2"
-      show-swatches
       swatches-max-height="400px"
+      show-swatches
     ></v-color-picker>
     <v-color-picker
-      class="ma-2"
       :swatches="swatches"
+      class="ma-2"
       show-swatches
     ></v-color-picker>
   </div>
diff --git a/packages/docs/src/examples/v-color-picker/usage.vue b/packages/docs/src/examples/v-color-picker/usage.vue
index 8da36b70e29..cc53a2c0393 100644
--- a/packages/docs/src/examples/v-color-picker/usage.vue
+++ b/packages/docs/src/examples/v-color-picker/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="d-flex justify-center">
       <v-color-picker v-bind="props"></v-color-picker>
@@ -14,14 +14,10 @@
 
       <v-checkbox v-model="hideInputs" label="Hide inputs"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-color-picker'
   const model = ref('default')
   const options = ['Disabled', 'Show swatches']
diff --git a/packages/docs/src/examples/v-combobox/misc-advanced.vue b/packages/docs/src/examples/v-combobox/misc-advanced.vue
index 38980ec21db..0b945b77a25 100644
--- a/packages/docs/src/examples/v-combobox/misc-advanced.vue
+++ b/packages/docs/src/examples/v-combobox/misc-advanced.vue
@@ -6,11 +6,11 @@
       :custom-filter="filter"
       :hide-no-data="!search"
       :items="items"
-      hide-selected
       label="Search for an option"
+      variant="solo"
+      hide-selected
       multiple
       small-chips
-      variant="solo"
     >
       <template v-slot:no-data>
         <v-list-item>
@@ -48,11 +48,11 @@
         <v-text-field
           v-if="editing === item"
           v-model="editing.text"
+          bg-color="transparent"
+          variant="solo"
           autofocus
           flat
-          bg-color="transparent"
           hide-details
-          variant="solo"
           @keyup.enter="edit(index, item)"
         ></v-text-field>
         <v-chip
diff --git a/packages/docs/src/examples/v-combobox/prop-multiple.vue b/packages/docs/src/examples/v-combobox/prop-multiple.vue
index 708b822416c..d76923c145d 100644
--- a/packages/docs/src/examples/v-combobox/prop-multiple.vue
+++ b/packages/docs/src/examples/v-combobox/prop-multiple.vue
@@ -14,8 +14,8 @@
           v-model="select"
           :items="items"
           label="I use chips"
-          multiple
           chips
+          multiple
         ></v-combobox>
       </v-col>
       <v-col cols="12">
@@ -29,8 +29,8 @@
             <v-chip
               :key="JSON.stringify(data.item)"
               v-bind="data.attrs"
-              :model-value="data.selected"
               :disabled="data.disabled"
+              :model-value="data.selected"
               size="small"
               @click:close="data.parent.selectItem(data.item)"
             >
diff --git a/packages/docs/src/examples/v-combobox/slot-no-data.vue b/packages/docs/src/examples/v-combobox/slot-no-data.vue
index acef79f95fb..4d0a881d9e8 100644
--- a/packages/docs/src/examples/v-combobox/slot-no-data.vue
+++ b/packages/docs/src/examples/v-combobox/slot-no-data.vue
@@ -5,9 +5,9 @@
       v-model:search="search"
       :hide-no-data="false"
       :items="items"
-      hide-selected
       hint="Maximum of 5 tags"
       label="Add some tags"
+      hide-selected
       multiple
       persistent-hint
       small-chips
diff --git a/packages/docs/src/examples/v-combobox/usage.vue b/packages/docs/src/examples/v-combobox/usage.vue
index ccb1ca563b8..15d1f3e0d74 100644
--- a/packages/docs/src/examples/v-combobox/usage.vue
+++ b/packages/docs/src/examples/v-combobox/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-combobox v-bind="props"></v-combobox>
@@ -16,14 +16,10 @@
 
       <v-checkbox v-model="multiple" label="Multiple"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-combobox'
   const model = ref('default')
   const clear = ref(false)
diff --git a/packages/docs/src/examples/v-data-iterator/misc-filter.vue b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
index 07410290d3e..d671d17b4ec 100644
--- a/packages/docs/src/examples/v-data-iterator/misc-filter.vue
+++ b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
@@ -9,13 +9,13 @@
         <v-toolbar class="px-2">
           <v-text-field
             v-model="search"
-            clearable
             density="comfortable"
-            hide-details
             placeholder="Search"
             prepend-inner-icon="mdi-magnify"
             style="max-width: 300px;"
             variant="solo"
+            clearable
+            hide-details
           ></v-text-field>
         </v-toolbar>
       </template>
@@ -32,7 +32,7 @@
               <v-card class="pb-3" border flat>
                 <v-img :src="item.raw.img"></v-img>
 
-                <v-list-item class="mb-2" :subtitle="item.raw.subtitle">
+                <v-list-item :subtitle="item.raw.subtitle" class="mb-2">
                   <template v-slot:title>
                     <strong class="text-h6 mb-2">{{ item.raw.title }}</strong>
                   </template>
@@ -46,11 +46,11 @@
                   </div>
 
                   <v-btn
-                    border
-                    flat
-                    size="small"
                     class="text-none"
+                    size="small"
                     text="Read"
+                    border
+                    flat
                   >
                   </v-btn>
                 </div>
@@ -64,8 +64,8 @@
         <div class="d-flex align-center justify-center pa-4">
           <v-btn
             :disabled="page === 1"
-            icon="mdi-arrow-left"
             density="comfortable"
+            icon="mdi-arrow-left"
             variant="tonal"
             rounded
             @click="prevPage"
@@ -77,8 +77,8 @@
 
           <v-btn
             :disabled="page >= pageCount"
-            icon="mdi-arrow-right"
             density="comfortable"
+            icon="mdi-arrow-right"
             variant="tonal"
             rounded
             @click="nextPage"
diff --git a/packages/docs/src/examples/v-data-iterator/slot-default.vue b/packages/docs/src/examples/v-data-iterator/slot-default.vue
index aa950039ae5..dfd76a77a53 100644
--- a/packages/docs/src/examples/v-data-iterator/slot-default.vue
+++ b/packages/docs/src/examples/v-data-iterator/slot-default.vue
@@ -9,16 +9,16 @@
           v-for="item in items"
           :key="item.raw.name"
           cols="12"
-          sm="12"
           md="6"
+          sm="12"
         >
           <v-card>
             <v-card-title class="d-flex align-center">
               <v-icon
                 :color="item.raw.color"
                 :icon="item.raw.icon"
-                start
                 size="18"
+                start
               ></v-icon>
 
               <h4>{{ item.raw.name }}</h4>
@@ -30,8 +30,8 @@
 
             <div class="px-4">
               <v-switch
-                :model-value="isExpanded(item)"
                 :label="`${isExpanded(item) ? 'Hide' : 'Show'} details`"
+                :model-value="isExpanded(item)"
                 density="compact"
                 inset
                 @click="() => toggleExpand(item)"
@@ -42,7 +42,7 @@
 
             <v-expand-transition>
               <div v-if="isExpanded(item)">
-                <v-list density="compact" :lines="false">
+                <v-list :lines="false" density="compact">
                   <v-list-item :title="`🔥 Calories: ${item.raw.calories}`" active></v-list-item>
                   <v-list-item :title="`🍔 Fat: ${item.raw.fat}`"></v-list-item>
                   <v-list-item :title="`🍞 Carbs: ${item.raw.carbs}`"></v-list-item>
diff --git a/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
index bba513e3e2f..bc843aef55c 100644
--- a/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
+++ b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
@@ -21,10 +21,10 @@
           <div class="d-inline-flex">
             <v-btn
               :disabled="page === 1"
+              class="me-2"
               icon="mdi-arrow-left"
               size="small"
               variant="tonal"
-              class="me-2"
               @click="prevPage"
             ></v-btn>
 
@@ -53,14 +53,14 @@
             <v-img
               :gradient="`to top right, rgba(255, 255, 255, .1), rgba(${item.raw.color}, .15)`"
               :src="item.raw.src"
-              cover
               height="150"
+              cover
             ></v-img>
 
             <v-list-item
               :title="item.raw.name"
-              lines="two"
               density="comfortable"
+              lines="two"
               subtitle="Lorem ipsum dil orei namdie dkaf"
             >
               <template v-slot:title>
@@ -70,7 +70,7 @@
               </template>
             </v-list-item>
 
-            <v-table density="compact" class="text-caption">
+            <v-table class="text-caption" density="compact">
               <tbody>
                 <tr align="right">
                   <th>DPI:</th>
@@ -110,8 +110,8 @@
 
     <template v-slot:footer="{ page, pageCount }">
       <v-footer
-        color="surface-variant"
         class="justify-space-between text-body-2 mt-4"
+        color="surface-variant"
       >
         Total mice: {{ mice.length }}
 
diff --git a/packages/docs/src/examples/v-data-iterator/usage.vue b/packages/docs/src/examples/v-data-iterator/usage.vue
index f8b4d657a7f..d76504918d5 100644
--- a/packages/docs/src/examples/v-data-iterator/usage.vue
+++ b/packages/docs/src/examples/v-data-iterator/usage.vue
@@ -1,10 +1,10 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :script="script"
     :name="name"
     :options="options"
+    :script="script"
   >
     <div>
       <v-data-iterator
@@ -29,14 +29,10 @@
         </template>
       </v-data-iterator>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-data-iterator'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-data-table/misc-crud.vue b/packages/docs/src/examples/v-data-table/misc-crud.vue
index e36e025acee..a4c9378fbf0 100644
--- a/packages/docs/src/examples/v-data-table/misc-crud.vue
+++ b/packages/docs/src/examples/v-data-table/misc-crud.vue
@@ -21,9 +21,9 @@
         >
           <template v-slot:activator="{ props }">
             <v-btn
+              class="mb-2"
               color="primary"
               dark
-              class="mb-2"
               v-bind="props"
             >
               New Item
@@ -39,8 +39,8 @@
                 <v-row>
                   <v-col
                     cols="12"
-                    sm="6"
                     md="4"
+                    sm="6"
                   >
                     <v-text-field
                       v-model="editedItem.name"
@@ -49,8 +49,8 @@
                   </v-col>
                   <v-col
                     cols="12"
-                    sm="6"
                     md="4"
+                    sm="6"
                   >
                     <v-text-field
                       v-model="editedItem.calories"
@@ -59,8 +59,8 @@
                   </v-col>
                   <v-col
                     cols="12"
-                    sm="6"
                     md="4"
+                    sm="6"
                   >
                     <v-text-field
                       v-model="editedItem.fat"
@@ -69,8 +69,8 @@
                   </v-col>
                   <v-col
                     cols="12"
-                    sm="6"
                     md="4"
+                    sm="6"
                   >
                     <v-text-field
                       v-model="editedItem.carbs"
@@ -79,8 +79,8 @@
                   </v-col>
                   <v-col
                     cols="12"
-                    sm="6"
                     md="4"
+                    sm="6"
                   >
                     <v-text-field
                       v-model="editedItem.protein"
@@ -125,8 +125,8 @@
     </template>
     <template v-slot:item.actions="{ item }">
       <v-icon
-        size="small"
         class="me-2"
+        size="small"
         @click="editItem(item)"
       >
         mdi-pencil
diff --git a/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue b/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue
index 03b9500e7f5..47f3e693714 100644
--- a/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue
+++ b/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue
@@ -7,10 +7,10 @@
       <template v-slot:item.name="props">
         <v-edit-dialog
           v-model:return-value="props.item.name"
-          @save="save"
           @cancel="cancel"
-          @open="open"
           @close="close"
+          @open="open"
+          @save="save"
         >
           {{ props.item.name }}
           <template v-slot:input>
@@ -18,8 +18,8 @@
               v-model="props.item.name"
               :rules="[max25chars]"
               label="Edit"
-              single-line
               counter
+              single-line
             ></v-text-field>
           </template>
         </v-edit-dialog>
@@ -29,10 +29,10 @@
           v-model:return-value="props.item.iron"
           large
           persistent
-          @save="save"
           @cancel="cancel"
-          @open="open"
           @close="close"
+          @open="open"
+          @save="save"
         >
           <div>{{ props.item.iron }}</div>
           <template v-slot:input>
@@ -43,9 +43,9 @@
               v-model="props.item.iron"
               :rules="[max25chars]"
               label="Edit"
-              single-line
-              counter
               autofocus
+              counter
+              single-line
             ></v-text-field>
           </template>
         </v-edit-dialog>
@@ -54,8 +54,8 @@
 
     <v-snackbar
       v-model="snack"
-      :timeout="3000"
       :color="snackColor"
+      :timeout="3000"
     >
       {{ snackText }}
 
diff --git a/packages/docs/src/examples/v-data-table/misc-external-paginate.vue b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
index a72f4bab2ff..892da54b34f 100644
--- a/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
+++ b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
@@ -9,11 +9,11 @@
       <v-text-field
         :model-value="itemsPerPage"
         class="pa-2"
-        hide-details
         label="Items per page"
-        min="-1"
         max="15"
+        min="-1"
         type="number"
+        hide-details
         @update:model-value="itemsPerPage = parseInt($event, 10)"
       ></v-text-field>
     </template>
diff --git a/packages/docs/src/examples/v-data-table/misc-external-sort.vue b/packages/docs/src/examples/v-data-table/misc-external-sort.vue
index 833ea362f9c..ee425a49def 100644
--- a/packages/docs/src/examples/v-data-table/misc-external-sort.vue
+++ b/packages/docs/src/examples/v-data-table/misc-external-sort.vue
@@ -8,8 +8,8 @@
     ></v-data-table>
     <div class="text-center pt-2">
       <v-btn
-        color="primary"
         class="me-2"
+        color="primary"
         @click="toggleOrder"
       >
         Toggle sort order
diff --git a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
index 2838f13c13c..d79ccfb436c 100644
--- a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
+++ b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
@@ -2,8 +2,8 @@
   <v-data-table-server
     v-model:items-per-page="itemsPerPage"
     :headers="headers"
-    :items-length="totalItems"
     :items="serverItems"
+    :items-length="totalItems"
     :loading="loading"
     :search="search"
     item-value="name"
diff --git a/packages/docs/src/examples/v-data-table/prop-custom-filter.vue b/packages/docs/src/examples/v-data-table/prop-custom-filter.vue
index ab84b9d9d77..019bcbbf6ef 100644
--- a/packages/docs/src/examples/v-data-table/prop-custom-filter.vue
+++ b/packages/docs/src/examples/v-data-table/prop-custom-filter.vue
@@ -9,8 +9,8 @@
     <template v-slot:top>
       <v-text-field
         v-model="search"
-        label="Search (UPPER CASE ONLY)"
         class="pa-2"
+        label="Search (UPPER CASE ONLY)"
       ></v-text-field>
     </template>
   </v-data-table>
diff --git a/packages/docs/src/examples/v-data-table/prop-filterable.vue b/packages/docs/src/examples/v-data-table/prop-filterable.vue
index 8e152e73b03..8024b1182f2 100644
--- a/packages/docs/src/examples/v-data-table/prop-filterable.vue
+++ b/packages/docs/src/examples/v-data-table/prop-filterable.vue
@@ -8,13 +8,13 @@
 
       <v-text-field
         v-model="search"
-        prepend-inner-icon="mdi-magnify"
         density="compact"
         label="Search"
-        single-line
+        prepend-inner-icon="mdi-magnify"
+        variant="solo-filled"
         flat
         hide-details
-        variant="solo-filled"
+        single-line
       ></v-text-field>
     </v-card-title>
 
@@ -50,8 +50,8 @@
             :color="item.stock ? 'green' : 'red'"
             :text="item.stock ? 'In stock' : 'Out of stock'"
             class="text-uppercase"
-            label
             size="small"
+            label
           ></v-chip>
         </div>
       </template>
diff --git a/packages/docs/src/examples/v-data-table/prop-footer-props.vue b/packages/docs/src/examples/v-data-table/prop-footer-props.vue
index 1be145254b2..63d36a0f9c5 100644
--- a/packages/docs/src/examples/v-data-table/prop-footer-props.vue
+++ b/packages/docs/src/examples/v-data-table/prop-footer-props.vue
@@ -8,8 +8,8 @@
       nextIcon: 'mdi-plus'
     }"
     :headers="headers"
-    :items-per-page="5"
     :items="desserts"
+    :items-per-page="5"
     item-key="name"
   ></v-data-table>
 </template>
diff --git a/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue b/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue
index 9e6b0fd3bfd..f00803bc280 100644
--- a/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue
+++ b/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue
@@ -2,8 +2,8 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
-    hide-default-header
     hide-default-footer
+    hide-default-header
   ></v-data-table>
 </template>
 
diff --git a/packages/docs/src/examples/v-data-table/prop-item-selectable.vue b/packages/docs/src/examples/v-data-table/prop-item-selectable.vue
index 87cd0551326..54c47be36ba 100644
--- a/packages/docs/src/examples/v-data-table/prop-item-selectable.vue
+++ b/packages/docs/src/examples/v-data-table/prop-item-selectable.vue
@@ -2,9 +2,9 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
-    items-per-page="5"
-    item-value="name"
     item-selectable="selectable"
+    item-value="name"
+    items-per-page="5"
     show-select
   ></v-data-table>
 </template>
diff --git a/packages/docs/src/examples/v-data-table/prop-item-value.vue b/packages/docs/src/examples/v-data-table/prop-item-value.vue
index 92cf37977a4..19c6f3a7c36 100644
--- a/packages/docs/src/examples/v-data-table/prop-item-value.vue
+++ b/packages/docs/src/examples/v-data-table/prop-item-value.vue
@@ -1,9 +1,9 @@
 <template>
   <v-data-table
     :headers="headers"
+    :item-value="item => `${item.name}-${item.version}`"
     :items="desserts"
     items-per-page="5"
-    :item-value="item => `${item.name}-${item.version}`"
     show-select
   ></v-data-table>
 </template>
diff --git a/packages/docs/src/examples/v-data-table/prop-loading.vue b/packages/docs/src/examples/v-data-table/prop-loading.vue
index b0de6b72b28..56fdb27c90a 100644
--- a/packages/docs/src/examples/v-data-table/prop-loading.vue
+++ b/packages/docs/src/examples/v-data-table/prop-loading.vue
@@ -2,7 +2,7 @@
   <v-data-table-server
     :items-length="0"
     item-key="name"
-    loading
     loading-text="Loading... Please wait"
+    loading
   ></v-data-table-server>
 </template>
diff --git a/packages/docs/src/examples/v-data-table/prop-return-object.vue b/packages/docs/src/examples/v-data-table/prop-return-object.vue
index 2de8c38fd16..24cd4b4a6ba 100644
--- a/packages/docs/src/examples/v-data-table/prop-return-object.vue
+++ b/packages/docs/src/examples/v-data-table/prop-return-object.vue
@@ -3,8 +3,8 @@
     v-model="selected"
     :headers="headers"
     :items="desserts"
-    items-per-page="5"
     item-value="name"
+    items-per-page="5"
     return-object
     show-select
   ></v-data-table>
diff --git a/packages/docs/src/examples/v-data-table/prop-search.vue b/packages/docs/src/examples/v-data-table/prop-search.vue
index af9571e2c34..20140060198 100644
--- a/packages/docs/src/examples/v-data-table/prop-search.vue
+++ b/packages/docs/src/examples/v-data-table/prop-search.vue
@@ -1,16 +1,16 @@
 <template>
   <v-card
-    flat
     title="Nutrition"
+    flat
   >
     <template v-slot:text>
       <v-text-field
         v-model="search"
         label="Search"
         prepend-inner-icon="mdi-magnify"
-        single-line
         variant="outlined"
         hide-details
+        single-line
       ></v-text-field>
     </template>
 
diff --git a/packages/docs/src/examples/v-data-table/server-search.vue b/packages/docs/src/examples/v-data-table/server-search.vue
index 185ccb1f4d2..a91ed5b866c 100644
--- a/packages/docs/src/examples/v-data-table/server-search.vue
+++ b/packages/docs/src/examples/v-data-table/server-search.vue
@@ -1,27 +1,27 @@
 <template>
   <v-data-table-server
     v-model:items-per-page="itemsPerPage"
-    :search="search"
     :headers="headers"
-    :items-length="totalItems"
     :items="serverItems"
+    :items-length="totalItems"
     :loading="loading"
+    :search="search"
     item-value="name"
     @update:options="loadItems"
   >
     <template v-slot:tfoot>
       <tr>
         <td>
-          <v-text-field v-model="name" hide-details placeholder="Search name..." class="ma-2" density="compact"></v-text-field>
+          <v-text-field v-model="name" class="ma-2" density="compact" placeholder="Search name..." hide-details></v-text-field>
         </td>
         <td>
           <v-text-field
             v-model="calories"
-            hide-details
-            placeholder="Minimum calories"
-            type="number"
             class="ma-2"
             density="compact"
+            placeholder="Minimum calories"
+            type="number"
+            hide-details
           ></v-text-field>
         </td>
       </tr>
diff --git a/packages/docs/src/examples/v-data-table/server.vue b/packages/docs/src/examples/v-data-table/server.vue
index c3f8470285d..cf3d0372a7d 100644
--- a/packages/docs/src/examples/v-data-table/server.vue
+++ b/packages/docs/src/examples/v-data-table/server.vue
@@ -2,8 +2,8 @@
   <v-data-table-server
     v-model:items-per-page="itemsPerPage"
     :headers="headers"
-    :items-length="totalItems"
     :items="serverItems"
+    :items-length="totalItems"
     :loading="loading"
     item-value="name"
     @update:options="loadItems"
diff --git a/packages/docs/src/examples/v-data-table/slot-group-header.vue b/packages/docs/src/examples/v-data-table/slot-group-header.vue
index ac2b4eb572b..1d02cf3bd41 100644
--- a/packages/docs/src/examples/v-data-table/slot-group-header.vue
+++ b/packages/docs/src/examples/v-data-table/slot-group-header.vue
@@ -1,17 +1,17 @@
 <template>
   <v-data-table
+    :group-by="groupBy"
     :headers="headers"
     :items="desserts"
-    :group-by="groupBy"
     item-value="name"
   >
     <template v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }">
       <tr>
         <td :colspan="columns.length">
           <VBtn
+            :icon="isGroupOpen(item) ? '$expand' : '$next'"
             size="small"
             variant="text"
-            :icon="isGroupOpen(item) ? '$expand' : '$next'"
             @click="toggleGroup(item)"
           ></VBtn>
           {{ item.value ? 'Contains gluten' : 'Gluten free' }}
diff --git a/packages/docs/src/examples/v-data-table/slot-loading.vue b/packages/docs/src/examples/v-data-table/slot-loading.vue
index da4ca028159..0be77d8342f 100644
--- a/packages/docs/src/examples/v-data-table/slot-loading.vue
+++ b/packages/docs/src/examples/v-data-table/slot-loading.vue
@@ -9,7 +9,7 @@
     ></v-btn>
   </div>
 
-  <v-data-table :loading="loading" :items="items">
+  <v-data-table :items="items" :loading="loading">
     <template v-slot:loading>
       <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
     </template>
diff --git a/packages/docs/src/examples/v-data-table/slot-main.vue b/packages/docs/src/examples/v-data-table/slot-main.vue
index 09661cde9a7..091d4b43653 100644
--- a/packages/docs/src/examples/v-data-table/slot-main.vue
+++ b/packages/docs/src/examples/v-data-table/slot-main.vue
@@ -8,14 +8,14 @@
     ></v-select>
     <v-data-table
       :headers="headerArray"
+      :hide-default-header="hideHeaders"
       :items="itemsArray"
+      :loading="isLoading"
       :search="search"
-      :hide-default-header="hideHeaders"
       :show-select="showSelect"
-      :loading="isLoading"
-      hide-default-footer
-      item-key="name"
       class="elevation-1"
+      item-key="name"
+      hide-default-footer
     >
       <template
         v-if="isEnabled('top')"
@@ -53,8 +53,8 @@
         v-slot:progress
       >
         <v-progress-linear
-          color="purple"
           :height="10"
+          color="purple"
           indeterminate
         ></v-progress-linear>
       </template>
@@ -64,8 +64,8 @@
         v-slot:item.data-table-select="{ isSelected, select }"
       >
         <v-checkbox-btn
-          color="green"
           :value="isSelected"
+          color="green"
           @input="select($event)"
         ></v-checkbox-btn>
       </template>
diff --git a/packages/docs/src/examples/v-data-table/usage.vue b/packages/docs/src/examples/v-data-table/usage.vue
index 89a2991611d..0d345af90d9 100644
--- a/packages/docs/src/examples/v-data-table/usage.vue
+++ b/packages/docs/src/examples/v-data-table/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -11,13 +11,10 @@
         :items="items"
       ></v-data-table>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-data-table'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-data-table/virtualized.vue b/packages/docs/src/examples/v-data-table/virtualized.vue
index 6ce9ea0236f..134410b1ec1 100644
--- a/packages/docs/src/examples/v-data-table/virtualized.vue
+++ b/packages/docs/src/examples/v-data-table/virtualized.vue
@@ -1,8 +1,8 @@
 <template>
   <v-data-table
     :headers="headers"
-    :items-per-page="-1"
     :items="items"
+    :items-per-page="-1"
     height="500"
     hide-default-footer
     virtual-rows
diff --git a/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue
index 9a60af672f4..ea26f3d94d3 100644
--- a/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue
+++ b/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue
@@ -9,10 +9,10 @@
         v-model="menuActive"
         v-model:return-value="date"
         :close-on-content-click="false"
-        transition="scale-transition"
-        offset-y
         max-width="290px"
         min-width="auto"
+        transition="scale-transition"
+        offset-y
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
@@ -32,15 +32,15 @@
         >
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="menu = false"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="menu.save(date)"
           >
             OK
@@ -57,8 +57,8 @@
         ref="dialog"
         v-model="modal"
         v-model:return-value="date"
-        persistent
         width="290px"
+        persistent
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
@@ -77,15 +77,15 @@
         >
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="modal = false"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="dialog.save(date)"
           >
             OK
diff --git a/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue b/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue
index 04bb040da3d..6ccc243b726 100644
--- a/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue
+++ b/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue
@@ -2,13 +2,13 @@
   <v-row justify="space-around">
     <v-date-picker
       v-model="picker"
-      type="month"
       locale="th"
+      type="month"
     ></v-date-picker>
     <v-date-picker
       v-model="picker"
-      type="month"
       locale="sv-se"
+      type="month"
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue b/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue
index 2f132ebec42..3196b323274 100644
--- a/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue
+++ b/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue
@@ -3,10 +3,10 @@
     <v-date-picker
       v-model="date"
       :allowed-dates="allowedMonths"
-      type="month"
       class="mt-4"
-      min="2017-06"
       max="2019-10"
+      min="2017-06"
+      type="month"
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker-month/prop-colors.vue b/packages/docs/src/examples/v-date-picker-month/prop-colors.vue
index da096900710..7a513b72503 100644
--- a/packages/docs/src/examples/v-date-picker-month/prop-colors.vue
+++ b/packages/docs/src/examples/v-date-picker-month/prop-colors.vue
@@ -2,14 +2,14 @@
   <v-row justify="space-around">
     <v-date-picker
       v-model="picker"
-      type="month"
       color="green-lighten-1"
+      type="month"
     ></v-date-picker>
     <v-date-picker
       v-model="picker2"
-      type="month"
       color="green-lighten-1"
       header-color="primary"
+      type="month"
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker-month/prop-icons.vue b/packages/docs/src/examples/v-date-picker-month/prop-icons.vue
index cd4f8919c0e..fcfd8d22739 100644
--- a/packages/docs/src/examples/v-date-picker-month/prop-icons.vue
+++ b/packages/docs/src/examples/v-date-picker-month/prop-icons.vue
@@ -2,10 +2,10 @@
   <v-row justify="center">
     <v-date-picker
       v-model="picker"
+      next-icon="mdi-skip-next"
+      prev-icon="mdi-skip-previous"
       type="month"
       year-icon="mdi-calendar-blank"
-      prev-icon="mdi-skip-previous"
-      next-icon="mdi-skip-next"
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue b/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue
index 504efa80817..8db38cc2502 100644
--- a/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue
+++ b/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue
@@ -7,8 +7,8 @@
     ></v-date-picker>
     <v-date-picker
       v-model="month2"
-      type="month"
       show-current="2013-07"
+      type="month"
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker-month/prop-width.vue b/packages/docs/src/examples/v-date-picker-month/prop-width.vue
index 65b7a1e3559..283aecafffb 100644
--- a/packages/docs/src/examples/v-date-picker-month/prop-width.vue
+++ b/packages/docs/src/examples/v-date-picker-month/prop-width.vue
@@ -2,15 +2,15 @@
   <v-row justify="space-around">
     <v-date-picker
       v-model="date"
+      class="mt-4"
       type="month"
       width="290"
-      class="mt-4"
     ></v-date-picker>
     <v-date-picker
       v-model="date"
-      full-width
-      type="month"
       class="mt-4"
+      type="month"
+      full-width
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker/misc-birthday.vue b/packages/docs/src/examples/v-date-picker/misc-birthday.vue
index dbb68ef500e..6ff68bf4fce 100644
--- a/packages/docs/src/examples/v-date-picker/misc-birthday.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-birthday.vue
@@ -5,9 +5,9 @@
       ref="menu"
       v-model="menuActive"
       :close-on-content-click="false"
+      min-width="auto"
       transition="scale-transition"
       offset-y
-      min-width="auto"
     >
       <template v-slot:activator="{ on, attrs }">
         <v-text-field
diff --git a/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue
index 96f4055bef7..591a77e5d9a 100644
--- a/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue
@@ -2,17 +2,17 @@
   <v-row>
     <v-col
       cols="12"
-      sm="6"
       md="4"
+      sm="6"
     >
       <v-menu
         ref="menu"
         v-model="menuActive"
         v-model:return-value="date"
         :close-on-content-click="false"
+        min-width="auto"
         transition="scale-transition"
         offset-y
-        min-width="auto"
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
@@ -31,15 +31,15 @@
         >
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="menu = false"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="menu.save(date)"
           >
             OK
@@ -50,15 +50,15 @@
     <v-spacer></v-spacer>
     <v-col
       cols="12"
-      sm="6"
       md="4"
+      sm="6"
     >
       <v-dialog
         ref="dialog"
         v-model="modal"
         v-model:return-value="date"
-        persistent
         width="290px"
+        persistent
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
@@ -76,15 +76,15 @@
         >
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="modal = false"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="dialog.save(date)"
           >
             OK
@@ -94,16 +94,16 @@
     </v-col>
     <v-col
       cols="12"
-      sm="6"
       md="4"
+      sm="6"
     >
       <v-menu
         v-model="menu2"
         :close-on-content-click="false"
         :nudge-right="40"
+        min-width="auto"
         transition="scale-transition"
         offset-y
-        min-width="auto"
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
diff --git a/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue b/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue
index e651dc6c7e2..184eef8f14a 100644
--- a/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue
@@ -13,8 +13,8 @@
           <template v-slot:activator="{ on, attrs }">
             <v-text-field
               :model-value="computedDateFormattedMomentjs"
-              clearable
               label="Formatted with Moment.js"
+              clearable
               readonly
               v-bind="attrs"
               v-on="on"
@@ -40,8 +40,8 @@
           <template v-slot:activator="{ on, attrs }">
             <v-text-field
               :model-value="computedDateFormattedDatefns"
-              clearable
               label="Formatted with datefns"
+              clearable
               readonly
               v-bind="attrs"
               v-on="on"
diff --git a/packages/docs/src/examples/v-date-picker/misc-formatting.vue b/packages/docs/src/examples/v-date-picker/misc-formatting.vue
index 0bd7668aac3..e799f45c508 100644
--- a/packages/docs/src/examples/v-date-picker/misc-formatting.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-formatting.vue
@@ -9,21 +9,21 @@
           ref="menu1"
           v-model="menu1Active"
           :close-on-content-click="false"
-          transition="scale-transition"
-          offset-y
           max-width="290px"
           min-width="auto"
+          transition="scale-transition"
+          offset-y
         >
           <template v-slot:activator="{ on, attrs }">
             <v-text-field
               v-model="dateFormatted"
-              label="Date"
               hint="MM/DD/YYYY format"
-              persistent-hint
+              label="Date"
               prepend-icon="mdi-calendar"
+              persistent-hint
               v-bind="attrs"
-              @blur="date = parseDate(dateFormatted)"
               v-on="on"
+              @blur="date = parseDate(dateFormatted)"
             ></v-text-field>
           </template>
           <v-date-picker
@@ -42,18 +42,18 @@
         <v-menu
           v-model="menu2"
           :close-on-content-click="false"
-          transition="scale-transition"
-          offset-y
           max-width="290px"
           min-width="auto"
+          transition="scale-transition"
+          offset-y
         >
           <template v-slot:activator="{ on, attrs }">
             <v-text-field
               v-model="computedDateFormatted"
-              label="Date (read only text field)"
               hint="MM/DD/YYYY format"
-              persistent-hint
+              label="Date (read only text field)"
               prepend-icon="mdi-calendar"
+              persistent-hint
               readonly
               v-bind="attrs"
               v-on="on"
diff --git a/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue b/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue
index e54b1c34772..5c40e7ea926 100644
--- a/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue
+++ b/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue
@@ -4,8 +4,8 @@
       <v-date-picker
         v-model="date"
         :allowed-dates="allowedDates"
-        min="2016-06-15"
         max="2018-03-20"
+        min="2016-06-15"
       ></v-date-picker>
     </v-row>
   </v-container>
diff --git a/packages/docs/src/examples/v-date-picker/prop-icons.vue b/packages/docs/src/examples/v-date-picker/prop-icons.vue
index 360bf439b8f..a0e59e53dcc 100644
--- a/packages/docs/src/examples/v-date-picker/prop-icons.vue
+++ b/packages/docs/src/examples/v-date-picker/prop-icons.vue
@@ -2,9 +2,9 @@
   <v-row justify="center">
     <v-date-picker
       v-model="picker"
-      year-icon="mdi-calendar-blank"
-      prev-icon="mdi-skip-previous"
       next-icon="mdi-skip-next"
+      prev-icon="mdi-skip-previous"
+      year-icon="mdi-calendar-blank"
     ></v-date-picker>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-date-picker/prop-multiple.vue b/packages/docs/src/examples/v-date-picker/prop-multiple.vue
index 90bd1c76b9a..ed28f8cbe81 100644
--- a/packages/docs/src/examples/v-date-picker/prop-multiple.vue
+++ b/packages/docs/src/examples/v-date-picker/prop-multiple.vue
@@ -18,19 +18,19 @@
         v-model="menuActive"
         v-model:return-value="dates"
         :close-on-content-click="false"
+        min-width="auto"
         transition="scale-transition"
         offset-y
-        min-width="auto"
       >
         <template v-slot:activator="{ on, attrs }">
           <v-combobox
             v-model="dates"
-            multiple
-            chips
-            small-chips
             label="Multiple picker in menu"
             prepend-icon="mdi-calendar"
+            chips
+            multiple
             readonly
+            small-chips
             v-bind="attrs"
             v-on="on"
           ></v-combobox>
@@ -43,15 +43,15 @@
         >
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="menu = false"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="menu.save(dates)"
           >
             OK
diff --git a/packages/docs/src/examples/v-date-picker/prop-picker-date.vue b/packages/docs/src/examples/v-date-picker/prop-picker-date.vue
index 174f00be6cd..6e9f079676a 100644
--- a/packages/docs/src/examples/v-date-picker/prop-picker-date.vue
+++ b/packages/docs/src/examples/v-date-picker/prop-picker-date.vue
@@ -1,9 +1,9 @@
 <template>
   <v-row>
     <v-col
+      class="my-2 px-1"
       cols="12"
       sm="6"
-      class="my-2 px-1"
     >
       <v-date-picker
         ref="picker"
@@ -13,9 +13,9 @@
       ></v-date-picker>
     </v-col>
     <v-col
+      class="my-2 px-1"
       cols="12"
       sm="6"
-      class="my-2 px-1"
     >
       <div class="text-h6">
         Month news ({{ pickerDate || 'change month...' }})
diff --git a/packages/docs/src/examples/v-date-picker/usage.vue b/packages/docs/src/examples/v-date-picker/usage.vue
index f6c2eba61f5..ea12adc8cd6 100644
--- a/packages/docs/src/examples/v-date-picker/usage.vue
+++ b/packages/docs/src/examples/v-date-picker/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -15,14 +15,10 @@
       <!-- <v-checkbox v-model="hideActions" label="Hide actions"></v-checkbox> -->
       <v-checkbox v-model="adjacent" label="Show adjacent months"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-date-picker'
   const model = ref('default')
   const date = ref()
diff --git a/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue b/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue
index 4a5e48cda9b..371cc86473c 100644
--- a/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue
+++ b/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <v-card title="Title" subtitle="Subtitle" class="ma-10"></v-card>
+    <v-card class="ma-10" subtitle="Subtitle" title="Title"></v-card>
     <v-defaults-provider :defaults="defaults">
-      <v-card title="Title" subtitle="Subtitle" class="ma-10"></v-card>
+      <v-card class="ma-10" subtitle="Subtitle" title="Title"></v-card>
     </v-defaults-provider>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-defaults-provider/usage.vue b/packages/docs/src/examples/v-defaults-provider/usage.vue
index f9493795382..871b57f17c7 100644
--- a/packages/docs/src/examples/v-defaults-provider/usage.vue
+++ b/packages/docs/src/examples/v-defaults-provider/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -22,14 +22,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="button" label="Use v-btn defaults"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-defaults-provider'
   const model = ref('default')
   const button = ref(false)
diff --git a/packages/docs/src/examples/v-dialog/misc-form.vue b/packages/docs/src/examples/v-dialog/misc-form.vue
index 1926f8bb649..6a115ea439e 100644
--- a/packages/docs/src/examples/v-dialog/misc-form.vue
+++ b/packages/docs/src/examples/v-dialog/misc-form.vue
@@ -1,120 +1,149 @@
 <template>
-  <v-row justify="center">
+  <div class="pa-4 text-center">
     <v-dialog
       v-model="dialog"
-      persistent
-      width="1024"
+      max-width="600"
     >
-      <template v-slot:activator="{ props }">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          v-bind="props"
-        >
-          Open Dialog
-        </v-btn>
+          class="text-none font-weight-regular"
+          prepend-icon="mdi-account"
+          text="Edit Profile"
+          variant="tonal"
+          v-bind="activatorProps"
+        ></v-btn>
       </template>
-      <v-card>
-        <v-card-title>
-          <span class="text-h5">User Profile</span>
-        </v-card-title>
+
+      <v-card
+        prepend-icon="mdi-account"
+        title="User Profile"
+      >
         <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-text-field
-                  label="Legal first name*"
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-text-field
-                  label="Legal middle name"
-                  hint="example of helper text only on focus"
-                ></v-text-field>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-text-field
-                  label="Legal last name*"
-                  hint="example of persistent helper text"
-                  persistent-hint
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-text-field
-                  label="Email*"
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12">
-                <v-text-field
-                  label="Password*"
-                  type="password"
-                  required
-                ></v-text-field>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-              >
-                <v-select
-                  :items="['0-17', '18-29', '30-54', '54+']"
-                  label="Age*"
-                  required
-                ></v-select>
-              </v-col>
-              <v-col
-                cols="12"
-                sm="6"
-              >
-                <v-autocomplete
-                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
-                  label="Interests"
-                  multiple
-                ></v-autocomplete>
-              </v-col>
-            </v-row>
-          </v-container>
-          <small>*indicates required field</small>
+          <v-row dense>
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <v-text-field
+                label="First name*"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <v-text-field
+                hint="example of helper text only on focus"
+                label="Middle name"
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <v-text-field
+                hint="example of persistent helper text"
+                label="Last name*"
+                persistent-hint
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <v-text-field
+                label="Email*"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <v-text-field
+                label="Password*"
+                type="password"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <v-text-field
+                label="Confirm Password*"
+                type="password"
+                required
+              ></v-text-field>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+            >
+              <v-select
+                :items="['0-17', '18-29', '30-54', '54+']"
+                label="Age*"
+                required
+              ></v-select>
+            </v-col>
+
+            <v-col
+              cols="12"
+              sm="6"
+            >
+              <v-autocomplete
+                :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
+                label="Interests"
+                auto-select-first
+                multiple
+              ></v-autocomplete>
+            </v-col>
+          </v-row>
+
+          <small class="text-caption text-medium-emphasis">*indicates required field</small>
         </v-card-text>
+
+        <v-divider></v-divider>
+
         <v-card-actions>
           <v-spacer></v-spacer>
+
           <v-btn
-            color="blue-darken-1"
-            variant="text"
+            text="Close"
+            variant="plain"
             @click="dialog = false"
-          >
-            Close
-          </v-btn>
+          ></v-btn>
+
           <v-btn
-            color="blue-darken-1"
-            variant="text"
+            color="primary"
+            text="Save"
+            variant="tonal"
             @click="dialog = false"
-          >
-            Save
-          </v-btn>
+          ></v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const dialog = ref(false)
+  const dialog = shallowRef(false)
 </script>
 
 <script>
diff --git a/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue b/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue
new file mode 100644
index 00000000000..4d53dd8cf46
--- /dev/null
+++ b/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="pa-4 text-center">
+    <v-btn-group
+      color="#b2d7ef"
+      density="comfortable"
+      rounded="pill"
+      divided
+    >
+      <v-btn
+        class="pe-2"
+        prepend-icon="mdi-account-multiple-outline"
+        variant="flat"
+      >
+        <div class="text-none font-weight-regular">
+          Share
+        </div>
+
+        <v-dialog activator="parent" max-width="500">
+          <template v-slot:default="{ isActive }">
+            <v-card rounded="lg">
+              <v-card-title class="d-flex justify-space-between align-center">
+                <div class="text-h5 text-medium-emphasis ps-2">
+                  Invite John to connect
+                </div>
+
+                <v-btn
+                  icon="mdi-close"
+                  variant="text"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-title>
+
+              <v-divider class="mb-4"></v-divider>
+
+              <v-card-text>
+                <div class="text-medium-emphasis mb-4">
+                  Invite collaborators to your network and grow your connections.
+                </div>
+
+                <div class="mb-2">Message (optional)</div>
+
+                <v-textarea
+                  :counter="300"
+                  class="mb-2"
+                  rows="2"
+                  variant="outlined"
+                  persistent-counter
+                ></v-textarea>
+
+                <div class="text-overline mb-2">💎 PREMIUM</div>
+
+                <div class="text-medium-emphasis mb-1">
+                  Share with unlimited people and get more insights about your network. Try Premium Free for 30 days.
+                </div>
+
+                <v-btn
+                  class="text-none font-weight-bold ms-n4"
+                  color="primary"
+                  text="Retry Premium Free"
+                  variant="text"
+                ></v-btn>
+              </v-card-text>
+
+              <v-divider class="mt-2"></v-divider>
+
+              <v-card-actions class="my-2 d-flex justify-end">
+                <v-btn
+                  class="text-none"
+                  rounded="xl"
+                  text="Cancel"
+                  @click="isActive.value = false"
+                ></v-btn>
+
+                <v-btn
+                  class="text-none"
+                  color="primary"
+                  rounded="xl"
+                  text="Send"
+                  variant="flat"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-btn>
+
+      <v-btn
+        size="small"
+        icon
+      >
+        <v-icon icon="mdi-menu-down"></v-icon>
+
+        <v-menu
+          activator="parent"
+          location="bottom end"
+          transition="fade-transition"
+        >
+          <v-list
+            density="compact"
+            min-width="250"
+            rounded="lg"
+            slim
+          >
+            <v-list-item
+              prepend-icon="mdi-link"
+              title="Copy link"
+              link
+            ></v-list-item>
+
+            <v-divider class="my-2"></v-divider>
+
+            <v-list-item min-height="24">
+              <template v-slot:subtitle>
+                <div class="text-caption">
+                  Shared with John + 1 more
+                </div>
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-btn>
+    </v-btn-group>
+  </div>
+</template>
diff --git a/packages/docs/src/examples/v-dialog/misc-loader.vue b/packages/docs/src/examples/v-dialog/misc-loader.vue
index 6363aa35685..b977caf8cf3 100644
--- a/packages/docs/src/examples/v-dialog/misc-loader.vue
+++ b/packages/docs/src/examples/v-dialog/misc-loader.vue
@@ -1,39 +1,52 @@
 <template>
-  <div class="text-center">
+  <div class="pa-4 text-center">
     <v-btn
       :disabled="dialog"
-      :loading="dialog"
-      color="purple-darken-2"
+      color="primary"
+      icon="mdi-refresh"
+      text="Start loading"
       @click="dialog = true"
-    >
-      Start loading
-    </v-btn>
+    ></v-btn>
+
     <v-dialog
       v-model="dialog"
-      :scrim="false"
+      max-width="320"
       persistent
-      width="auto"
     >
-      <v-card
+      <v-list
+        class="py-2"
         color="primary"
+        elevation="12"
+        rounded="lg"
       >
-        <v-card-text>
-          Please stand by
-          <v-progress-linear
-            indeterminate
-            color="white"
-            class="mb-0"
-          ></v-progress-linear>
-        </v-card-text>
-      </v-card>
+        <v-list-item
+          prepend-icon="$vuetify-outline"
+          title="Refreshing Application..."
+        >
+          <template v-slot:prepend>
+            <div class="pe-4">
+              <v-icon color="primary" size="x-large"></v-icon>
+            </div>
+          </template>
+
+          <template v-slot:append>
+            <v-progress-circular
+              color="primary"
+              indeterminate="disable-shrink"
+              size="16"
+              width="2"
+            ></v-progress-circular>
+          </template>
+        </v-list-item>
+      </v-list>
     </v-dialog>
   </div>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue'
+  import { shallowRef, watch } from 'vue'
 
-  const dialog = ref(false)
+  const dialog = shallowRef(false)
   watch(dialog, val => {
     if (!val) return
     setTimeout(() => (dialog.value = false), 4000)
diff --git a/packages/docs/src/examples/v-dialog/misc-nesting.vue b/packages/docs/src/examples/v-dialog/misc-nesting.vue
index bc0147c304c..6dce1e8f395 100644
--- a/packages/docs/src/examples/v-dialog/misc-nesting.vue
+++ b/packages/docs/src/examples/v-dialog/misc-nesting.vue
@@ -1,101 +1,85 @@
 <template>
-  <div>
-    <v-row
-      justify="center"
+  <div class="pa-4 text-center">
+    <v-btn
+      text="Open Dialog 1"
+      @click="dialog = true"
+    ></v-btn>
+
+    <v-dialog
+      v-model="dialog"
+      max-width="480"
+    >
+      <v-card title="Dialog 1">
+        <template v-slot:text>
+          <v-btn
+            class="my-2"
+            text="Open Dialog 2"
+            @click="dialog2 = true"
+          ></v-btn>
+        </template>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn
+            text="Close"
+            variant="text"
+            @click="dialog = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      v-model="dialog2"
+      max-width="240"
     >
-      <v-btn
-        color="primary"
-        class="ma-2"
-        @click="dialog = true"
-      >
-        Open Dialog 1
-      </v-btn>
-      <v-dialog
-        v-model="dialog"
-        width="auto"
-      >
-        <v-card>
-          <v-card-title>
-            Dialog 1
-          </v-card-title>
-          <v-card-text>
-            <v-btn
-              color="primary"
-              class="ma-2"
-              @click="dialog2 = true"
-            >
-              Open Dialog 2
-            </v-btn>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              variant="text"
-              @click="dialog = false"
-            >
-              Close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
+      <v-card title="Dialog 2">
+        <template v-slot:text>
+          <v-btn
+            class="my-2"
+            text="Open Dialog 3"
+            @click="dialog3 = !dialog3"
+          ></v-btn>
+        </template>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
 
-      <v-dialog
-        v-model="dialog2"
-        width="auto"
-      >
-        <v-card>
-          <v-card-title>
-            Dialog 2
-          </v-card-title>
-          <v-card-text>
-            <v-btn
-              color="primary"
-              @click="dialog3 = !dialog3"
-            >
-              Open Dialog 3
-            </v-btn>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              variant="text"
-              @click="dialog2 = false"
-            >
-              Close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
+          <v-btn
+            text="Close"
+            variant="text"
+            @click="dialog2 = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      v-model="dialog3"
+      width="auto"
+    >
+      <v-card title="Dialog 3">
+        <v-card-actions>
+          <v-spacer></v-spacer>
 
-      <v-dialog
-        v-model="dialog3"
-        width="auto"
-      >
-        <v-card>
-          <v-card-title>
-            <span>Dialog 3</span>
-          </v-card-title>
-          <v-card-actions>
-            <v-btn
-              color="primary"
-              variant="text"
-              @click="dialog3 = false"
-            >
-              Close
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-row>
+          <v-btn
+            text="Close"
+            variant="text"
+            @click="dialog3 = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const dialog = ref(false)
-  const dialog2 = ref(false)
-  const dialog3 = ref(false)
+  const dialog = shallowRef(false)
+  const dialog2 = shallowRef(false)
+  const dialog3 = shallowRef(false)
 </script>
 
 <script>
diff --git a/packages/docs/src/examples/v-dialog/misc-overflowed.vue b/packages/docs/src/examples/v-dialog/misc-overflowed.vue
index a45f1578efc..0616fc591eb 100644
--- a/packages/docs/src/examples/v-dialog/misc-overflowed.vue
+++ b/packages/docs/src/examples/v-dialog/misc-overflowed.vue
@@ -1,68 +1,70 @@
 <template>
-  <v-row justify="center">
-    <v-dialog
-      v-model="dialog"
-      width="800"
-    >
-      <template v-slot:activator="{ props }">
+  <div class="pa-4 text-center">
+    <v-dialog max-width="800">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          v-bind="props"
-        >
-          Open Dialog
-        </v-btn>
+          v-bind="activatorProps"
+          text="Open Dialog"
+        ></v-btn>
+      </template>
+
+      <template v-slot:default="{ isActive }">
+        <v-card title="Use Google's location service?">
+          <template v-slot:text>
+            Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
+
+            <br>
+
+            Justo ex quisque nulla accusamus venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui integer, nonummy pede placeat nec in sit leo. Faucibus porttitor illo taciti odio, amet viverra scelerisque quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor torquent nunc. Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum nulla, tortor donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus sit pulvinar justo sed. Vehicula convallis, et nulla wisi, amet vestibulum risus, quam ac egestas.
+
+            <br>
+
+            Et vitae, nulla gravida erat scelerisque nullam nunc pellentesque, a dictumst cras augue, purus imperdiet non. Varius montes cursus varius vel tortor, nec leo a qui, magni cras, velit vel consectetuer lobortis vel. Nibh erat et wisi felis leo porttitor, sapien nibh sapien pede mi, sed eget porttitor, repellendus arcu ac quis. Luctus vulputate aut est sem magna, placerat accumsan nunc vestibulum ipsum ac auctor, maecenas lorem in ut nec mauris tortor, doloribus varius sem tortor vestibulum mollis, eleifend tortor felis tempus lacus eu eu. Eleifend vel eu, nullam maecenas mauris nec nunc euismod, tortor porta ridiculus potenti, massa tristique nam magna, et wisi placerat et erat ante. Eget pede erat in facilisis, fermentum venenatis sodales. Ac tortor sociis et non animi tristique, rhoncus malesuada, ut arcu volutpat scelerisque sollicitudin, elit curabitur dui pede purus dolor, integer aenean risus taciti nulla eleifend accumsan. At pulvinar diam parturient, interdum mi velit aliquet et a. Arcu at ac placerat eget justo semper, purus sociis curabitur mi ipsum consequat ut, mollis vestibulum, est ante ornare lacus sem. Neque magna mauris, commodo quisque, praesent semper suscipit lobortis nam. Justo malesuada cursus ac nunc litora nunc. Tellus ac, in lobortis nunc, montes lectus purus fermentum.
+
+            <br>
+
+            Ac sit wisi. Sodales aliquam, sed vestibulum nullam arcu sit risus arcu, id luctus vitae lorem nibh, integer nec nullam class cursus mi, purus arcu lectus. Vel ante suscipit volutpat potenti mattis sed, wisi eu placerat aliquam erat, lectus morbi lobortis at assumenda. Consequat neque purus ipsum voluptas odio, netus vestibulum ut nec, suspendisse pellentesque nec enim in. Wisi dictum sed semper a, ipsum erat tellus habitasse est, erat sem ornare, vitae quisque ultricies. Dui sed blandit. Tempor et faucibus justo sed luctus, nec vitae vitae. Nunc nibh pede, ipsum vestibulum aenean leo ante ultricies, nam cras quis sed penatibus amet. In mauris a. Integer metus mauris tortor, et rutrum vestibulum ultricies, ut phasellus in ullamcorper ut mollit, eu justo. Cursus pretium venenatis.
+            Cras pellentesque vel sodales accumsan aenean. Feugiat metus sit nec in aliquet amet, porttitor pretium vulputate massa. Consequat ipsum luctus quisque adipiscing libero. Wisi sollicitudin. Eget vitae ac lobortis, lorem natoque vestibulum et, aliquet faucibus at morbi nibh, vel condimentum. Massa unde orci sed id sed, odio donec congue nec praesent amet. Hymenaeos velit lacus, quis vivamus libero tempus duis, eu nisi eu, ipsum at accumsan pede justo morbi donec, massa et libero sit risus neque tortor. Ut sed sed etiam hendrerit dapibus, quis metus suspendisse nibh.
+
+            <br>
+
+            Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque, volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse. Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus ultrices, posuere morbi nunc tellus gravida vivamus.
+
+            <br>
+
+            Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus nonummy hendrerit wisi, etiam ut.
+
+            <br>
+
+            Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam, cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui, aliquam et et amet nostra ligula.
+
+            <br>
+
+            Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus. Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet. Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa vivamus, rutrum elit, ultricies metus volutpat.
+
+            <br>
+
+            Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu. Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse turpis.
+          </template>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+
+            <v-btn
+              text="Disagree"
+              variant="text"
+              @click="isActive.value = false"
+            ></v-btn>
+
+            <v-btn
+              color="surface-variant"
+              text="Agree"
+              variant="flat"
+              @click="isActive.value = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
       </template>
-      <v-card>
-        <v-card-title>
-          <span class="text-h5">Use Google's location service?</span>
-        </v-card-title>
-        <v-card-text>
-          Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
-          Justo ex quisque nulla accusamus venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui integer, nonummy pede placeat nec in sit leo. Faucibus porttitor illo taciti odio, amet viverra scelerisque quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor torquent nunc. Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum nulla, tortor donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus sit pulvinar justo sed. Vehicula convallis, et nulla wisi, amet vestibulum risus, quam ac egestas.
-          Et vitae, nulla gravida erat scelerisque nullam nunc pellentesque, a dictumst cras augue, purus imperdiet non. Varius montes cursus varius vel tortor, nec leo a qui, magni cras, velit vel consectetuer lobortis vel. Nibh erat et wisi felis leo porttitor, sapien nibh sapien pede mi, sed eget porttitor, repellendus arcu ac quis. Luctus vulputate aut est sem magna, placerat accumsan nunc vestibulum ipsum ac auctor, maecenas lorem in ut nec mauris tortor, doloribus varius sem tortor vestibulum mollis, eleifend tortor felis tempus lacus eu eu. Eleifend vel eu, nullam maecenas mauris nec nunc euismod, tortor porta ridiculus potenti, massa tristique nam magna, et wisi placerat et erat ante. Eget pede erat in facilisis, fermentum venenatis sodales. Ac tortor sociis et non animi tristique, rhoncus malesuada, ut arcu volutpat scelerisque sollicitudin, elit curabitur dui pede purus dolor, integer aenean risus taciti nulla eleifend accumsan. At pulvinar diam parturient, interdum mi velit aliquet et a. Arcu at ac placerat eget justo semper, purus sociis curabitur mi ipsum consequat ut, mollis vestibulum, est ante ornare lacus sem. Neque magna mauris, commodo quisque, praesent semper suscipit lobortis nam. Justo malesuada cursus ac nunc litora nunc. Tellus ac, in lobortis nunc, montes lectus purus fermentum.
-          Ac sit wisi. Sodales aliquam, sed vestibulum nullam arcu sit risus arcu, id luctus vitae lorem nibh, integer nec nullam class cursus mi, purus arcu lectus. Vel ante suscipit volutpat potenti mattis sed, wisi eu placerat aliquam erat, lectus morbi lobortis at assumenda. Consequat neque purus ipsum voluptas odio, netus vestibulum ut nec, suspendisse pellentesque nec enim in. Wisi dictum sed semper a, ipsum erat tellus habitasse est, erat sem ornare, vitae quisque ultricies. Dui sed blandit. Tempor et faucibus justo sed luctus, nec vitae vitae. Nunc nibh pede, ipsum vestibulum aenean leo ante ultricies, nam cras quis sed penatibus amet. In mauris a. Integer metus mauris tortor, et rutrum vestibulum ultricies, ut phasellus in ullamcorper ut mollit, eu justo. Cursus pretium venenatis.
-          Cras pellentesque vel sodales accumsan aenean. Feugiat metus sit nec in aliquet amet, porttitor pretium vulputate massa. Consequat ipsum luctus quisque adipiscing libero. Wisi sollicitudin. Eget vitae ac lobortis, lorem natoque vestibulum et, aliquet faucibus at morbi nibh, vel condimentum. Massa unde orci sed id sed, odio donec congue nec praesent amet. Hymenaeos velit lacus, quis vivamus libero tempus duis, eu nisi eu, ipsum at accumsan pede justo morbi donec, massa et libero sit risus neque tortor. Ut sed sed etiam hendrerit dapibus, quis metus suspendisse nibh.
-          Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque, volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse. Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus ultrices, posuere morbi nunc tellus gravida vivamus.
-          Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus nonummy hendrerit wisi, etiam ut.
-          Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam, cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui, aliquam et et amet nostra ligula.
-          Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus. Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet. Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa vivamus, rutrum elit, ultricies metus volutpat.
-          Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu. Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse turpis.
-          +
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Disagree
-          </v-btn>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Agree
-          </v-btn>
-        </v-card-actions>
-      </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const dialog = ref(false)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        dialog: false,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-dialog/prop-activator.vue b/packages/docs/src/examples/v-dialog/prop-activator.vue
index 1167413e1d6..85bdb21da71 100644
--- a/packages/docs/src/examples/v-dialog/prop-activator.vue
+++ b/packages/docs/src/examples/v-dialog/prop-activator.vue
@@ -1,39 +1,133 @@
 <template>
-  <div class="text-center">
-    <v-btn
-      color="primary"
-    >
-      Open Dialog
-
-      <v-dialog
-        v-model="dialog"
-        activator="parent"
-        width="auto"
-      >
-        <v-card>
-          <v-card-text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </v-card-text>
-          <v-card-actions>
-            <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-btn>
-  </div>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12" md="6">
+        <v-dialog max-width="340">
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn
+              v-bind="activatorProps"
+              prepend-icon="mdi-package"
+              width="204"
+            >
+              Slot Activator
+            </v-btn>
+          </template>
+
+          <template v-slot:default="{ isActive }">
+            <v-card
+              prepend-icon="mdi-package"
+              text="When using the activator slot, you must bind the slot props to the activator element."
+              title="Slot Activator"
+            >
+              <template v-slot:actions>
+                <v-btn
+                  class="ml-auto"
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-btn
+          prepend-icon="mdi-picture-in-picture-bottom-right"
+          width="204"
+        >
+          Parent Activator
+
+          <v-dialog activator="parent" max-width="340">
+            <template v-slot:default="{ isActive }">
+              <v-card
+                prepend-icon="mdi-picture-in-picture-bottom-right"
+                text="When using the parent as the activator, the dialog will bind its listeners to the parent element."
+                title="Parent Activator"
+              >
+                <template v-slot:actions>
+                  <v-btn
+                    class="ml-auto"
+                    text="Close"
+                    @click="isActive.value = false"
+                  ></v-btn>
+                </template>
+              </v-card>
+            </template>
+          </v-dialog>
+        </v-btn>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-btn
+          ref="btn"
+          prepend-icon="mdi-variable"
+          width="204"
+        >
+          Ref Activator
+        </v-btn>
+
+        <v-dialog :activator="btn" max-width="340">
+          <template v-slot:default="{ isActive }">
+            <v-card
+              prepend-icon="mdi-variable"
+              text="When using a ref, the dialog will bind its listeners to the ref element. This works for any element and custom components."
+              title="Ref Activator"
+            >
+              <template v-slot:actions>
+                <v-btn
+                  class="ml-auto"
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-btn
+          id="activator-target"
+          prepend-icon="mdi-bullseye-arrow"
+          width="204"
+        >
+          Target Activator
+        </v-btn>
+
+        <v-dialog activator="#activator-target" max-width="340">
+          <template v-slot:default="{ isActive }">
+            <v-card
+              prepend-icon="mdi-bullseye-arrow"
+              text="Pass any valid querySelector to the activator prop to bind the dialog to the target element."
+              title="Target Activator"
+            >
+              <template v-slot:actions>
+                <v-btn
+                  class="ml-auto"
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </template>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
   import { ref } from 'vue'
 
-  const dialog = ref(false)
+  const btn = ref(null)
 </script>
 
 <script>
   export default {
     data () {
       return {
-        dialog: false,
+        btn: null,
       }
     },
   }
diff --git a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
index 889c7b0e8d4..7e0e9896349 100644
--- a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
+++ b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
@@ -1,85 +1,109 @@
 <template>
-  <v-row justify="center">
+  <div class="text-center pa-4">
     <v-dialog
       v-model="dialog"
-      fullscreen
-      :scrim="false"
       transition="dialog-bottom-transition"
+      fullscreen
     >
-      <template v-slot:activator="{ props }">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          dark
-          v-bind="props"
-        >
-          Open Dialog
-        </v-btn>
+          prepend-icon="mdi-cog"
+          size="small"
+          text="Settings"
+          v-bind="activatorProps"
+        ></v-btn>
       </template>
+
       <v-card>
-        <v-toolbar
-          dark
-          color="primary"
-        >
+        <v-toolbar>
           <v-btn
-            icon
-            dark
+            icon="mdi-close"
             @click="dialog = false"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
+          ></v-btn>
+
           <v-toolbar-title>Settings</v-toolbar-title>
+
           <v-spacer></v-spacer>
+
           <v-toolbar-items>
             <v-btn
+              text="Save"
               variant="text"
               @click="dialog = false"
-            >
-              Save
-            </v-btn>
+            ></v-btn>
           </v-toolbar-items>
         </v-toolbar>
+
         <v-list
           lines="two"
           subheader
         >
           <v-list-subheader>User Controls</v-list-subheader>
-          <v-list-item title="Content filtering" subtitle="Set the content filtering level to restrict apps that can be downloaded"></v-list-item>
-          <v-list-item title="Password" subtitle="Require password for purchase or use password to restrict purchase"></v-list-item>
-        </v-list>
-        <v-divider></v-divider>
-        <v-list
-          lines="two"
-          subheader
-        >
+
+          <v-list-item
+            subtitle="Set the content filtering level to restrict apps that can be downloaded"
+            title="Content filtering"
+            link
+          ></v-list-item>
+
+          <v-list-item
+            subtitle="Require password for purchase or use password to restrict purchase"
+            title="Password"
+            link
+          ></v-list-item>
+
+          <v-divider></v-divider>
+
           <v-list-subheader>General</v-list-subheader>
-          <v-list-item title="Notifications" subtitle="Notify me about updates to apps or games that I downloaded">
+
+          <v-list-item
+            subtitle="Notify me about updates to apps or games that I downloaded"
+            title="Notifications"
+            @click="notifications = !notifications"
+          >
             <template v-slot:prepend>
-              <v-checkbox v-model="notifications"></v-checkbox>
+              <v-list-item-action start>
+                <v-checkbox-btn v-model="notifications" color="primary"></v-checkbox-btn>
+              </v-list-item-action>
             </template>
           </v-list-item>
-          <v-list-item title="Sound" subtitle="Auto-update apps at any time. Data charges may apply">
+
+          <v-list-item
+            subtitle="Auto-update apps at any time. Data charges may apply"
+            title="Sound"
+            @click="sound = !sound"
+          >
             <template v-slot:prepend>
-              <v-checkbox v-model="sound"></v-checkbox>
+              <v-list-item-action start>
+                <v-checkbox-btn v-model="sound" color="primary"></v-checkbox-btn>
+              </v-list-item-action>
             </template>
           </v-list-item>
-          <v-list-item title="Auto-add widgets" subtitle="Automatically add home screen widgets">
+
+          <v-list-item
+            subtitle="Automatically add home screen widgets"
+            title="Auto-add widgets"
+            @click="widgets = !widgets"
+          >
             <template v-slot:prepend>
-              <v-checkbox v-model="widgets"></v-checkbox>
+              <v-list-item-action start>
+                <v-checkbox-btn v-model="widgets" color="primary"></v-checkbox-btn>
+              </v-list-item-action>
             </template>
           </v-list-item>
         </v-list>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
-  const dialog = ref(false)
-  const notifications = ref(false)
-  const sound = ref(true)
-  const widgets = ref(false)
+  const dialog = shallowRef(false)
+  const notifications = shallowRef(false)
+  const sound = shallowRef(true)
+  const widgets = shallowRef(false)
 </script>
 
 <script>
@@ -94,10 +118,3 @@
     },
   }
 </script>
-
-<style>
-.dialog-bottom-transition-enter-active,
-.dialog-bottom-transition-leave-active {
-  transition: transform .2s ease-in-out;
-}
-</style>
diff --git a/packages/docs/src/examples/v-dialog/prop-model.vue b/packages/docs/src/examples/v-dialog/prop-model.vue
index 061b33dfe1b..356d4ab980c 100644
--- a/packages/docs/src/examples/v-dialog/prop-model.vue
+++ b/packages/docs/src/examples/v-dialog/prop-model.vue
@@ -1,9 +1,6 @@
 <template>
-  <div class="text-center">
-    <v-btn
-      color="primary"
-      @click="dialog = true"
-    >
+  <div class="text-center pa-4">
+    <v-btn @click="dialog = true">
       Open Dialog
     </v-btn>
 
@@ -11,13 +8,19 @@
       v-model="dialog"
       width="auto"
     >
-      <v-card>
-        <v-card-text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
-        </v-card-actions>
+      <v-card
+        max-width="400"
+        prepend-icon="mdi-update"
+        text="Your application will relaunch automatically after the update is complete."
+        title="Update in progress"
+      >
+        <template v-slot:actions>
+          <v-btn
+            class="ms-auto"
+            text="Ok"
+            @click="dialog = false"
+          ></v-btn>
+        </template>
       </v-card>
     </v-dialog>
   </div>
diff --git a/packages/docs/src/examples/v-dialog/prop-persistent.vue b/packages/docs/src/examples/v-dialog/prop-persistent.vue
index c7f24ca8a51..dae79ee9c89 100644
--- a/packages/docs/src/examples/v-dialog/prop-persistent.vue
+++ b/packages/docs/src/examples/v-dialog/prop-persistent.vue
@@ -1,43 +1,35 @@
 <template>
-  <v-row justify="center">
+  <div class="text-center pa-4">
     <v-dialog
       v-model="dialog"
+      max-width="400"
       persistent
-      width="auto"
     >
-      <template v-slot:activator="{ props }">
-        <v-btn
-          color="primary"
-          v-bind="props"
-        >
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-btn v-bind="activatorProps">
           Open Dialog
         </v-btn>
       </template>
-      <v-card>
-        <v-card-title class="text-h5">
-          Use Google's location service?
-        </v-card-title>
-        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
-        <v-card-actions>
+
+      <v-card
+        prepend-icon="mdi-map-marker"
+        text="Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
+        title="Use Google's location service?"
+      >
+        <template v-slot:actions>
           <v-spacer></v-spacer>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
+
+          <v-btn @click="dialog = false">
             Disagree
           </v-btn>
-          <v-btn
-            color="green-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
+
+          <v-btn @click="dialog = false">
             Agree
           </v-btn>
-        </v-card-actions>
+        </template>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/examples/v-dialog/prop-scrollable.vue b/packages/docs/src/examples/v-dialog/prop-scrollable.vue
index f983a0a578b..8d0bda4f638 100644
--- a/packages/docs/src/examples/v-dialog/prop-scrollable.vue
+++ b/packages/docs/src/examples/v-dialog/prop-scrollable.vue
@@ -1,135 +1,158 @@
 <template>
-  <v-row justify="center">
+  <div class="pa-4 text-center">
     <v-dialog
-      v-model="dialog"
-      scrollable
       width="auto"
+      scrollable
     >
-      <template v-slot:activator="{ props }">
+      <template v-slot:activator="{ props: activatorProps }">
         <v-btn
-          color="primary"
-          v-bind="props"
+          color="brown"
+          prepend-icon="mdi-earth"
+          text="Select Country"
+          variant="outlined"
+          v-bind="activatorProps"
+        ></v-btn>
+      </template>
+
+      <template v-slot:default="{ isActive }">
+        <v-card
+          prepend-icon="mdi-earth"
+          title="Select Country"
         >
-          Open Dialog
-        </v-btn>
+          <v-divider class="mt-3"></v-divider>
+
+          <v-card-text class="px-4" style="height: 300px;">
+            <v-radio-group
+              v-model="dialog"
+              messages="Select a Country from the radio group"
+              column
+            >
+              <v-radio
+                label="Bahamas, The"
+                value="bahamas"
+              ></v-radio>
+
+              <v-radio
+                label="Bahrain"
+                value="bahrain"
+              ></v-radio>
+
+              <v-radio
+                label="Bangladesh"
+                value="bangladesh"
+              ></v-radio>
+
+              <v-radio
+                label="Barbados"
+                value="barbados"
+              ></v-radio>
+
+              <v-radio
+                label="Belarus"
+                value="belarus"
+              ></v-radio>
+
+              <v-radio
+                label="Belgium"
+                value="belgium"
+              ></v-radio>
+
+              <v-radio
+                label="Belize"
+                value="belize"
+              ></v-radio>
+
+              <v-radio
+                label="Benin"
+                value="benin"
+              ></v-radio>
+
+              <v-radio
+                label="Bhutan"
+                value="bhutan"
+              ></v-radio>
+
+              <v-radio
+                label="Bolivia"
+                value="bolivia"
+              ></v-radio>
+
+              <v-radio
+                label="Bosnia and Herzegovina"
+                value="bosnia"
+              ></v-radio>
+
+              <v-radio
+                label="Botswana"
+                value="botswana"
+              ></v-radio>
+
+              <v-radio
+                label="Brazil"
+                value="brazil"
+              ></v-radio>
+
+              <v-radio
+                label="Brunei"
+                value="brunei"
+              ></v-radio>
+
+              <v-radio
+                label="Bulgaria"
+                value="bulgaria"
+              ></v-radio>
+
+              <v-radio
+                label="Burkina Faso"
+                value="burkina"
+              ></v-radio>
+
+              <v-radio
+                label="Burma"
+                value="burma"
+              ></v-radio>
+
+              <v-radio
+                label="Burundi"
+                value="burundi"
+              ></v-radio>
+            </v-radio-group>
+          </v-card-text>
+
+          <v-divider></v-divider>
+
+          <v-card-actions>
+            <v-btn
+              text="Close"
+              @click="isActive.value = false"
+            ></v-btn>
+
+            <v-spacer></v-spacer>
+
+            <v-btn
+              color="surface-variant"
+              text="Save"
+              variant="flat"
+              @click="isActive.value = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
       </template>
-      <v-card>
-        <v-card-title>Select Country</v-card-title>
-        <v-divider></v-divider>
-        <v-card-text style="height: 300px;">
-          <v-radio-group
-            v-model="dialogm1"
-            column
-          >
-            <v-radio
-              label="Bahamas, The"
-              value="bahamas"
-            ></v-radio>
-            <v-radio
-              label="Bahrain"
-              value="bahrain"
-            ></v-radio>
-            <v-radio
-              label="Bangladesh"
-              value="bangladesh"
-            ></v-radio>
-            <v-radio
-              label="Barbados"
-              value="barbados"
-            ></v-radio>
-            <v-radio
-              label="Belarus"
-              value="belarus"
-            ></v-radio>
-            <v-radio
-              label="Belgium"
-              value="belgium"
-            ></v-radio>
-            <v-radio
-              label="Belize"
-              value="belize"
-            ></v-radio>
-            <v-radio
-              label="Benin"
-              value="benin"
-            ></v-radio>
-            <v-radio
-              label="Bhutan"
-              value="bhutan"
-            ></v-radio>
-            <v-radio
-              label="Bolivia"
-              value="bolivia"
-            ></v-radio>
-            <v-radio
-              label="Bosnia and Herzegovina"
-              value="bosnia"
-            ></v-radio>
-            <v-radio
-              label="Botswana"
-              value="botswana"
-            ></v-radio>
-            <v-radio
-              label="Brazil"
-              value="brazil"
-            ></v-radio>
-            <v-radio
-              label="Brunei"
-              value="brunei"
-            ></v-radio>
-            <v-radio
-              label="Bulgaria"
-              value="bulgaria"
-            ></v-radio>
-            <v-radio
-              label="Burkina Faso"
-              value="burkina"
-            ></v-radio>
-            <v-radio
-              label="Burma"
-              value="burma"
-            ></v-radio>
-            <v-radio
-              label="Burundi"
-              value="burundi"
-            ></v-radio>
-          </v-radio-group>
-        </v-card-text>
-        <v-divider></v-divider>
-        <v-card-actions>
-          <v-btn
-            color="blue-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Close
-          </v-btn>
-          <v-btn
-            color="blue-darken-1"
-            variant="text"
-            @click="dialog = false"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup>
   import { ref } from 'vue'
 
-  const dialogm1 = ref('')
-  const dialog = ref(false)
+  const dialog = ref('')
 </script>
 
 <script>
   export default {
     data () {
       return {
-        dialogm1: '',
-        dialog: false,
+        dialog: '',
       }
     },
   }
diff --git a/packages/docs/src/examples/v-dialog/prop-transitions.vue b/packages/docs/src/examples/v-dialog/prop-transitions.vue
index 562a67db7f2..bf760a30a4d 100644
--- a/packages/docs/src/examples/v-dialog/prop-transitions.vue
+++ b/packages/docs/src/examples/v-dialog/prop-transitions.vue
@@ -1,65 +1,68 @@
 <template>
-  <v-row justify="space-around">
-    <v-col cols="auto">
-      <v-dialog
-        transition="dialog-bottom-transition"
-        width="auto"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-            color="primary"
-            v-bind="props"
-          >From the bottom</v-btn>
-        </template>
-        <template v-slot:default="{ isActive }">
-          <v-card>
-            <v-toolbar
-              color="primary"
-              title="Opening from the bottom"
-            ></v-toolbar>
-            <v-card-text>
-              <div class="text-h2 pa-12">Hello world!</div>
-            </v-card-text>
-            <v-card-actions class="justify-end">
-              <v-btn
-                variant="text"
-                @click="isActive.value = false"
-              >Close</v-btn>
-            </v-card-actions>
-          </v-card>
-        </template>
-      </v-dialog>
-    </v-col>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="12" md="6">
+        <v-dialog
+          transition="dialog-bottom-transition"
+          width="auto"
+        >
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn
+              v-bind="activatorProps"
+              text="Transition from Bottom"
+              block
+            ></v-btn>
+          </template>
 
-    <v-col cols="auto">
-      <v-dialog
-        transition="dialog-top-transition"
-        width="auto"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-            color="primary"
-            v-bind="props"
-          >From the top</v-btn>
-        </template>
-        <template v-slot:default="{ isActive }">
-          <v-card>
-            <v-toolbar
-              color="primary"
-              title="Opening from the top"
-            ></v-toolbar>
-            <v-card-text>
-              <div class="text-h2 pa-12">Hello world!</div>
-            </v-card-text>
-            <v-card-actions class="justify-end">
-              <v-btn
-                variant="text"
-                @click="isActive.value = false"
-              >Close</v-btn>
-            </v-card-actions>
-          </v-card>
-        </template>
-      </v-dialog>
-    </v-col>
-  </v-row>
+          <template v-slot:default="{ isActive }">
+            <v-card>
+              <v-toolbar title="Opening from the Bottom"></v-toolbar>
+
+              <v-card-text class="text-h2 pa-12">
+                Hello world!
+              </v-card-text>
+
+              <v-card-actions class="justify-end">
+                <v-btn
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-dialog
+          transition="dialog-top-transition"
+          width="auto"
+        >
+          <template v-slot:activator="{ props: activatorProps }">
+            <v-btn
+              v-bind="activatorProps"
+              text="Transition from Top"
+              block
+            ></v-btn>
+          </template>
+          <template v-slot:default="{ isActive }">
+            <v-card>
+              <v-toolbar title="Opening from the Top"></v-toolbar>
+
+              <v-card-text class="text-h2 pa-12">
+                Hello world!
+              </v-card-text>
+
+              <v-card-actions class="justify-end">
+                <v-btn
+                  text="Close"
+                  @click="isActive.value = false"
+                ></v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </v-dialog>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-dialog/slot-default.vue b/packages/docs/src/examples/v-dialog/slot-default.vue
new file mode 100644
index 00000000000..356d4ab980c
--- /dev/null
+++ b/packages/docs/src/examples/v-dialog/slot-default.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="text-center pa-4">
+    <v-btn @click="dialog = true">
+      Open Dialog
+    </v-btn>
+
+    <v-dialog
+      v-model="dialog"
+      width="auto"
+    >
+      <v-card
+        max-width="400"
+        prepend-icon="mdi-update"
+        text="Your application will relaunch automatically after the update is complete."
+        title="Update in progress"
+      >
+        <template v-slot:actions>
+          <v-btn
+            class="ms-auto"
+            text="Ok"
+            @click="dialog = false"
+          ></v-btn>
+        </template>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const dialog = ref(false)
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        dialog: false,
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-dialog/usage.vue b/packages/docs/src/examples/v-dialog/usage.vue
index a33ce2de50b..ba6e24aac42 100644
--- a/packages/docs/src/examples/v-dialog/usage.vue
+++ b/packages/docs/src/examples/v-dialog/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -34,14 +34,10 @@
         </template>
       </v-dialog>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-dialog'
   const model = ref('default')
   const dialog = ref(false)
@@ -49,14 +45,19 @@
 
   const props = computed(() => {
     return {
-      width: '500',
+      'max-width': '500',
     }
   })
 
   const slots = computed(() => {
     return `
-  <template v-slot:activator="{ props }">
-    <v-btn v-bind="props" text="Open Dialog"> </v-btn>
+  <template v-slot:activator="{ props: activatorProps }">
+    <v-btn
+      v-bind="activatorProps"
+      color="surface-variant"
+      text="Open Dialog"
+      variant="flat"
+    ></v-btn>
   </template>
 
   <template v-slot:default="{ isActive }">
diff --git a/packages/docs/src/examples/v-divider/misc-portrait-view.vue b/packages/docs/src/examples/v-divider/misc-portrait-view.vue
index f2b921e1149..7920b75482f 100644
--- a/packages/docs/src/examples/v-divider/misc-portrait-view.vue
+++ b/packages/docs/src/examples/v-divider/misc-portrait-view.vue
@@ -57,9 +57,9 @@
     </v-list>
 
     <v-img
-      cover
       height="200"
       src="https://picsum.photos/700?image=996"
+      cover
     ></v-img>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-divider/usage.vue b/packages/docs/src/examples/v-divider/usage.vue
index 46f0be04d97..0b1291f2f61 100644
--- a/packages/docs/src/examples/v-divider/usage.vue
+++ b/packages/docs/src/examples/v-divider/usage.vue
@@ -1,29 +1,25 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
-    <div style="height: 200px;" class="d-flex align-center justify-center">
+    <div class="d-flex align-center justify-center" style="height: 200px;">
       <v-divider v-bind="props"></v-divider>
     </div>
 
     <template v-slot:configuration>
-      <v-slider v-model="thickness" min="1" max="20" label="Thickness"></v-slider>
+      <v-slider v-model="thickness" label="Thickness" max="20" min="1"></v-slider>
 
-      <v-select v-model="opacity" label="Opacity" :items="opacities"></v-select>
+      <v-select v-model="opacity" :items="opacities" label="Opacity"></v-select>
 
-      <v-select v-model="color" label="Color" :items="colors"></v-select>
+      <v-select v-model="color" :items="colors" label="Color"></v-select>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-divider'
   const model = ref('default')
   const color = ref()
diff --git a/packages/docs/src/examples/v-empty-state/misc-astro-cat.vue b/packages/docs/src/examples/v-empty-state/misc-astro-cat.vue
new file mode 100644
index 00000000000..e80e5d92a32
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/misc-astro-cat.vue
@@ -0,0 +1,120 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="360"
+    variant="flat"
+    border
+  >
+    <v-layout>
+      <v-system-bar class="ga-1" color="surface-light">
+        <v-icon icon="mdi-square" size="x-small"></v-icon>
+
+        <v-icon icon="mdi-circle" size="x-small"></v-icon>
+
+        <v-icon icon="mdi-triangle" size="x-small"></v-icon>
+      </v-system-bar>
+
+      <v-app-bar title="My Library">
+        <template v-slot:prepend>
+          <v-app-bar-nav-icon></v-app-bar-nav-icon>
+        </template>
+
+        <template v-slot:extension>
+          <v-tabs v-model="tabs" color="#4c00d5" grow>
+            <v-tab text="My Movies"></v-tab>
+
+            <v-tab text="My Tv Shows"></v-tab>
+          </v-tabs>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <div class="pt-4 pb-16">
+          <v-window v-model="tabs">
+            <v-window-item class="pa-2" value="0">
+              <v-card>
+                <v-empty-state
+                  class="pa-0"
+                  image="https://vuetifyjs.b-cdn.net/docs/images/components/v-empty-state/astro-cat.svg"
+                  size="200"
+                >
+                  <template v-slot:media>
+                    <v-sheet class="py-4 mb-4" color="#fdefff">
+                      <v-img></v-img>
+                    </v-sheet>
+                  </template>
+
+                  <template v-slot:title>
+                    <div class="text-h6 text-high-emphasis">Get Started</div>
+                  </template>
+
+                  <template v-slot:text>
+                    <div class="text-body-2 font-weight-medium text-medium-emphasis">
+                      Find a great movie, then relax and enjoy with the Movies & TV app.
+                    </div>
+                  </template>
+
+                  <template v-slot:actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn color="#4c00d5" text="Shop Movies"></v-btn>
+
+                    <v-spacer></v-spacer>
+                  </template>
+                </v-empty-state>
+              </v-card>
+            </v-window-item>
+
+            <v-window-item class="pa-2" value="0">
+              <v-card>
+                <v-empty-state
+                  class="pa-0"
+                  image="https://vuetifyjs.b-cdn.net/docs/images/components/v-empty-state/astro-dog.svg"
+                  size="200"
+                >
+                  <template v-slot:media>
+                    <v-sheet class="py-4 mb-4" color="#fdefff">
+                      <v-img></v-img>
+                    </v-sheet>
+                  </template>
+
+                  <template v-slot:title>
+                    <div class="text-h6 text-high-emphasis">Get Started</div>
+                  </template>
+
+                  <template v-slot:text>
+                    <div class="text-body-2 font-weight-medium text-medium-emphasis">
+                      Watch your favorite TV Shows with the Movies & TV app.
+                    </div>
+                  </template>
+
+                  <template v-slot:actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn color="#4c00d5" text="Shop TV Shows"></v-btn>
+
+                    <v-spacer></v-spacer>
+                  </template>
+                </v-empty-state>
+              </v-card>
+            </v-window-item>
+          </v-window>
+        </div>
+      </v-main>
+    </v-layout>
+  </v-card>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const tabs = shallowRef(0)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      tabs: 0,
+    }),
+  }
+</script>
diff --git a/packages/docs/src/examples/v-empty-state/misc-astro-dog.vue b/packages/docs/src/examples/v-empty-state/misc-astro-dog.vue
new file mode 100644
index 00000000000..bb7268c909c
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/misc-astro-dog.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-card class="mx-auto" max-width="360">
+    <v-layout>
+      <v-system-bar class="ga-1" color="#4c00d5">
+        <v-icon icon="mdi-square" size="x-small"></v-icon>
+
+        <v-icon icon="mdi-circle" size="x-small"></v-icon>
+
+        <v-icon icon="mdi-triangle" size="x-small"></v-icon>
+      </v-system-bar>
+
+      <v-app-bar color="#6200ee" title="Drafts">
+        <template v-slot:prepend>
+          <v-app-bar-nav-icon></v-app-bar-nav-icon>
+        </template>
+
+        <template v-slot:append>
+          <v-btn icon="mdi-magnify"></v-btn>
+
+          <v-btn icon="mdi-dots-vertical"></v-btn>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <v-empty-state
+          image="https://vuetifyjs.b-cdn.net/docs/images/components/v-empty-state/astro-dog.svg"
+          size="200"
+          text-width="250"
+        >
+          <template v-slot:media>
+            <v-img class="mb-8"></v-img>
+          </template>
+
+          <template v-slot:title>
+            <div class="text-h6 text-high-emphasis">Empty in drafts</div>
+          </template>
+
+          <template v-slot:text>
+            <div class="text-body-1">Save a draft message and it will show up here</div>
+          </template>
+        </v-empty-state>
+      </v-main>
+
+      <v-layout-item
+        class="text-end"
+        position="bottom"
+        size="80"
+        model-value
+      >
+        <v-btn
+          class="ma-4"
+          color="#4c00d5"
+          elevation="8"
+          icon="mdi-plus"
+        ></v-btn>
+      </v-layout-item>
+    </v-layout>
+  </v-card>
+</template>
diff --git a/packages/docs/src/examples/v-empty-state/prop-actions.vue b/packages/docs/src/examples/v-empty-state/prop-actions.vue
new file mode 100644
index 00000000000..fbee31f7d12
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/prop-actions.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-empty-state
+    action-text="Retry Request"
+    image="https://cdn.vuetifyjs.com/docs/images/components/v-empty-state/connection.svg"
+    text="There might be a problem with your connection or our servers. Please check your internet connection or try again later. We appreciate your patience."
+    title="Something Went Wrong"
+    @click:action="onClickAction"
+  ></v-empty-state>
+</template>
+
+<script setup>
+  function onClickAction () {
+    alert('You clicked the action button')
+  }
+</script>
+
+<script>
+  export default {
+    methods: {
+      onClickAction () {
+        alert('You clicked the action button')
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-empty-state/prop-content.vue b/packages/docs/src/examples/v-empty-state/prop-content.vue
new file mode 100644
index 00000000000..0a1aa524366
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/prop-content.vue
@@ -0,0 +1,14 @@
+<template>
+  <v-empty-state
+    headline="No Messages Yet"
+    text="You haven't received any messages yet. When you do, they'll appear here."
+    title="Check back later."
+    @click:action="onClickAction"
+  ></v-empty-state>
+</template>
+
+<script setup>
+  function onClickAction () {
+    alert('You clicked the action button')
+  }
+</script>
diff --git a/packages/docs/src/examples/v-empty-state/prop-media.vue b/packages/docs/src/examples/v-empty-state/prop-media.vue
new file mode 100644
index 00000000000..acb1b5484dd
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/prop-media.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-empty-state
+    icon="mdi-magnify"
+    text="Try adjusting your search terms or filters. Sometimes less specific terms or broader queries can help you find what you're looking for."
+    title="We couldn't find a match."
+  ></v-empty-state>
+</template>
diff --git a/packages/docs/src/examples/v-empty-state/slot-actions.vue b/packages/docs/src/examples/v-empty-state/slot-actions.vue
new file mode 100644
index 00000000000..c2eff21a5ec
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/slot-actions.vue
@@ -0,0 +1,36 @@
+<template>
+  <v-empty-state image="https://cdn.vuetifyjs.com/docs/images/components/v-empty-state/teamwork.png">
+    <template v-slot:title>
+      <div class="text-subtitle-2 mt-8">
+        Manage your inventory transfers
+      </div>
+    </template>
+
+    <template v-slot:text>
+      <div class="text-caption">
+        Track and receive your incoming inventory from suppliers
+      </div>
+    </template>
+
+    <template v-slot:actions>
+      <v-btn
+        class="text-none"
+        color="white"
+        elevation="1"
+        rounded="lg"
+        size="small"
+        text="Learn more"
+        width="96"
+      ></v-btn>
+
+      <v-btn
+        class="text-none"
+        elevation="1"
+        rounded="lg"
+        size="small"
+        text="Add transfer"
+        width="96"
+      ></v-btn>
+    </template>
+  </v-empty-state>
+</template>
diff --git a/packages/docs/src/examples/v-empty-state/slot-default.vue b/packages/docs/src/examples/v-empty-state/slot-default.vue
new file mode 100644
index 00000000000..7031aed1027
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/slot-default.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-empty-state
+    headline="Welcome,"
+    icon="$vuetify"
+    title="What would you like to do today?"
+  >
+    <v-container>
+      <v-row>
+        <v-col cols="6">
+          <v-card
+            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
+            prepend-icon="$vuetify"
+            target="_blank"
+            text="Start with our dedicated feature guides"
+            title="Learn Vuetify"
+          ></v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            href="https://play.vuetifyjs.com"
+            prepend-icon="$vuetify-play"
+            target="_blank"
+            text="Test Vuetify out in our playground"
+            title="Create a Playground"
+          ></v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            href="https://bin.vuetifyjs.com"
+            prepend-icon="mdi-delete"
+            target="_blank"
+            text="Create a new bin to store your code"
+            title="Create a Bin"
+          ></v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            href="https://issues.vuetifyjs.com"
+            prepend-icon="$warning"
+            target="_blank"
+            text="File a bug report for Vuetify"
+            title="Report a Bug"
+          ></v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-empty-state>
+</template>
diff --git a/packages/docs/src/examples/v-empty-state/slot-title.vue b/packages/docs/src/examples/v-empty-state/slot-title.vue
new file mode 100644
index 00000000000..ea50826bae6
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/slot-title.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-empty-state icon="$success">
+    <template v-slot:media>
+      <v-icon color="surface-variant"></v-icon>
+    </template>
+
+    <template v-slot:headline>
+      <div class="text-h4">
+        All Done For Now!
+      </div>
+    </template>
+
+    <template v-slot:title>
+      <div class="text-h6">
+        You're all caught up.
+      </div>
+    </template>
+
+    <template v-slot:text>
+      <div class="text-medium-emphasis text-caption">
+        Great job on completing all your tasks! This might be a good time to relax or consider planning your next set of goals. If you think of something new, just hit the button below to add a new task.
+      </div>
+    </template>
+  </v-empty-state>
+</template>
diff --git a/packages/docs/src/examples/v-empty-state/usage.vue b/packages/docs/src/examples/v-empty-state/usage.vue
new file mode 100644
index 00000000000..521a36ba918
--- /dev/null
+++ b/packages/docs/src/examples/v-empty-state/usage.vue
@@ -0,0 +1,35 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <v-empty-state
+      v-bind="props"
+    ></v-empty-state>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-empty-state'
+  const model = ref('default')
+  const options = []
+
+  const props = computed(() => {
+    return {
+      headline: 'Whoops, 404',
+      title: 'Page not found',
+      text: 'The page you were looking for does not exist',
+      image: 'https://vuetifyjs.b-cdn.net/docs/images/logos/v.png',
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>
diff --git a/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue b/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue
index 1640beec053..025b6feb2d4 100644
--- a/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue
+++ b/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue
@@ -4,12 +4,12 @@
       <v-expansion-panel-title>
         <template v-slot:default="{ expanded }">
           <v-row no-gutters>
-            <v-col cols="4" class="d-flex justify-start">
+            <v-col class="d-flex justify-start" cols="4">
               Trip name
             </v-col>
             <v-col
-              cols="8"
               class="text-grey"
+              cols="8"
             >
               <v-fade-transition leave-absolute>
                 <span
@@ -32,8 +32,8 @@
       <v-expansion-panel-text>
         <v-text-field
           v-model="trip.name"
-          hide-details
           placeholder="Caribbean Cruise"
+          hide-details
         ></v-text-field>
       </v-expansion-panel-text>
     </v-expansion-panel>
@@ -41,12 +41,12 @@
     <v-expansion-panel>
       <v-expansion-panel-title v-slot="{ open }">
         <v-row no-gutters>
-          <v-col cols="4" class="d-flex justify-start">
+          <v-col class="d-flex justify-start" cols="4">
             Location
           </v-col>
           <v-col
-            cols="8"
             class="text--secondary"
+            cols="8"
           >
             <v-fade-transition leave-absolute>
               <span
@@ -72,15 +72,15 @@
             <v-select
               v-model="trip.location"
               :items="locations"
+              variant="solo"
               chips
               flat
-              variant="solo"
             ></v-select>
           </v-col>
 
           <v-divider
-            vertical
             class="mx-4"
+            vertical
           ></v-divider>
 
           <v-col cols="3">
@@ -93,14 +93,14 @@
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="secondary"
+            variant="text"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
           >
             Save
           </v-btn>
@@ -111,24 +111,24 @@
     <v-expansion-panel>
       <v-expansion-panel-title v-slot="{ open }">
         <v-row no-gutters>
-          <v-col cols="4" class="d-flex justify-start">
+          <v-col class="d-flex justify-start" cols="4">
             Start and end dates
           </v-col>
           <v-col
-            cols="8"
             class="text--secondary"
+            cols="8"
           >
             <v-fade-transition leave-absolute>
               <span v-if="open">When do you want to travel?</span>
               <v-row
                 v-else
-                no-gutters
                 style="width: 100%"
+                no-gutters
               >
-                <v-col cols="6" class="d-flex justify-start">
+                <v-col class="d-flex justify-start" cols="6">
                   Start date: {{ trip.start || 'Not set' }}
                 </v-col>
-                <v-col cols="6" class="d-flex justify-start">
+                <v-col class="d-flex justify-start" cols="6">
                   End date: {{ trip.end || 'Not set' }}
                 </v-col>
               </v-row>
diff --git a/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue b/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue
index 58d879164ce..3998a137d0b 100644
--- a/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue
+++ b/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue
@@ -14,7 +14,7 @@
 
     <v-expansion-panels>
       <v-expansion-panel>
-        <v-expansion-panel-title expand-icon="mdi-plus" collapse-icon="mdi-minus">
+        <v-expansion-panel-title collapse-icon="mdi-minus" expand-icon="mdi-plus">
           Item
         </v-expansion-panel-title>
         <v-expansion-panel-text>
diff --git a/packages/docs/src/examples/v-expansion-panels/prop-model.vue b/packages/docs/src/examples/v-expansion-panels/prop-model.vue
index e5dad9470cb..1dc94e4f341 100644
--- a/packages/docs/src/examples/v-expansion-panels/prop-model.vue
+++ b/packages/docs/src/examples/v-expansion-panels/prop-model.vue
@@ -16,20 +16,20 @@
       multiple
     >
       <v-expansion-panel
-        title="Foo"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Foo"
         value="foo"
       ></v-expansion-panel>
 
       <v-expansion-panel
-        title="Bar"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Bar"
         value="bar"
       ></v-expansion-panel>
 
       <v-expansion-panel
-        title="Baz"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Baz"
         value="baz"
       ></v-expansion-panel>
     </v-expansion-panels>
diff --git a/packages/docs/src/examples/v-expansion-panels/prop-variant.vue b/packages/docs/src/examples/v-expansion-panels/prop-variant.vue
index 555c9f34d68..231cc47bfb1 100644
--- a/packages/docs/src/examples/v-expansion-panels/prop-variant.vue
+++ b/packages/docs/src/examples/v-expansion-panels/prop-variant.vue
@@ -5,8 +5,8 @@
       <v-expansion-panel
         v-for="i in 3"
         :key="i"
-        title="Item"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Item"
       ></v-expansion-panel>
     </v-expansion-panels>
 
@@ -16,30 +16,30 @@
       <v-expansion-panel
         v-for="i in 3"
         :key="i"
-        title="Item"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Item"
       ></v-expansion-panel>
     </v-expansion-panels>
 
     <div class="text-subtitle-2 mt-4 mb-2">Inset</div>
 
-    <v-expansion-panels variant="inset" class="my-4">
+    <v-expansion-panels class="my-4" variant="inset">
       <v-expansion-panel
         v-for="i in 3"
         :key="i"
-        title="Item"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Item"
       ></v-expansion-panel>
     </v-expansion-panels>
 
     <div class="text-subtitle-2 mt-4 mb-2">Popout</div>
 
-    <v-expansion-panels variant="popout" class="my-4">
+    <v-expansion-panels class="my-4" variant="popout">
       <v-expansion-panel
         v-for="i in 3"
         :key="i"
-        title="Item"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Item"
       ></v-expansion-panel>
     </v-expansion-panels>
   </div>
diff --git a/packages/docs/src/examples/v-expansion-panels/usage.vue b/packages/docs/src/examples/v-expansion-panels/usage.vue
index 3ce69905be9..20a206049db 100644
--- a/packages/docs/src/examples/v-expansion-panels/usage.vue
+++ b/packages/docs/src/examples/v-expansion-panels/usage.vue
@@ -1,27 +1,23 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-expansion-panels v-bind="props">
         <v-expansion-panel
-          title="Title"
           text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima"
+          title="Title"
         >
         </v-expansion-panel>
       </v-expansion-panels>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-expansion-panels'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-fab/misc-display-animation.vue b/packages/docs/src/examples/v-fab/misc-display-animation.vue
new file mode 100644
index 00000000000..48ab3a2fcee
--- /dev/null
+++ b/packages/docs/src/examples/v-fab/misc-display-animation.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="360"
+  >
+    <v-layout>
+      <v-app-bar absolute extended>
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+        <template v-slot:extension>
+          <v-fab
+            :active="!hidden"
+            class="ms-4"
+            icon="mdi-plus"
+            location="bottom start"
+            size="small"
+            absolute
+            offset
+          ></v-fab>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <v-sheet class="pa-4 text-center" color="surface-light" height="300">
+          <v-btn
+            :text="hidden ? 'Show' : 'Hide'"
+            color="surface-variant"
+            width="80"
+            @click="hidden = !hidden"
+          >
+          </v-btn>
+        </v-sheet>
+
+        <v-sheet height="125">
+          <v-fab
+            :active="!hidden"
+            class="me-4"
+            icon="mdi-plus"
+            location="top end"
+            absolute
+            offset
+          ></v-fab>
+        </v-sheet>
+      </v-main>
+    </v-layout>
+  </v-card>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const hidden = ref(false)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      hidden: false,
+    }),
+  }
+</script>
diff --git a/packages/docs/src/examples/v-fab/misc-lateral-screens.vue b/packages/docs/src/examples/v-fab/misc-lateral-screens.vue
new file mode 100644
index 00000000000..a57d7790387
--- /dev/null
+++ b/packages/docs/src/examples/v-fab/misc-lateral-screens.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-card>
+    <v-layout>
+      <v-app-bar
+        color="indigo"
+        absolute
+        flat
+      >
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+        <v-app-bar-title>Page title</v-app-bar-title>
+
+        <v-spacer></v-spacer>
+
+        <v-btn icon="mdi-magnify"></v-btn>
+
+        <v-btn icon="mdi-dots-vertical">
+          <v-icon></v-icon>
+        </v-btn>
+
+        <template v-slot:extension>
+          <v-tabs
+            v-model="tabs"
+            align-tabs="title"
+          >
+            <v-tab text="Item One" value="one"></v-tab>
+
+            <v-tab text="Item Two" value="two"></v-tab>
+
+            <v-tab text="Item Three" value="three"></v-tab>
+
+            <v-tabs-slider color="pink"></v-tabs-slider>
+          </v-tabs>
+        </template>
+      </v-app-bar>
+
+      <v-main>
+        <v-sheet height="150"></v-sheet>
+      </v-main>
+
+      <v-fab
+        :key="activeFab.icon"
+        :color="activeFab.color"
+        :icon="activeFab.icon"
+        class="ms-4 mb-4"
+        location="bottom start"
+        size="64"
+        absolute
+        app
+        appear
+      ></v-fab>
+    </v-layout>
+  </v-card>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+
+  const tabs = ref(null)
+  const activeFab = computed(() => {
+    switch (tabs.value) {
+      case 'one': return { color: 'success', icon: 'mdi-share-variant' }
+      case 'two': return { color: 'red', icon: 'mdi-pencil' }
+      case 'three': return { color: 'green', icon: 'mdi-chevron-up' }
+      default: return {}
+    }
+  })
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      tabs: null,
+    }),
+
+    computed: {
+      activeFab () {
+        switch (this.tabs) {
+          case 'one': return { color: 'success', icon: 'mdi-share-variant' }
+          case 'two': return { color: 'red', icon: 'mdi-pencil' }
+          case 'three': return { color: 'green', icon: 'mdi-chevron-up' }
+          default: return {}
+        }
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-fab/misc-small.vue b/packages/docs/src/examples/v-fab/misc-small.vue
new file mode 100644
index 00000000000..6d3e8cbd714
--- /dev/null
+++ b/packages/docs/src/examples/v-fab/misc-small.vue
@@ -0,0 +1,123 @@
+<template>
+  <v-card class="mx-auto" max-width="365">
+    <v-toolbar
+      color="light-blue"
+      extended
+      light
+    >
+      <v-app-bar-nav-icon color="grey-darken-4"></v-app-bar-nav-icon>
+
+      <v-toolbar-title>My files</v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <v-btn color="grey-darken-4" icon="mdi-magnify"></v-btn>
+
+      <v-btn color="grey-darken-4" icon="mdi-view-module"></v-btn>
+
+      <template v-slot:extension>
+        <v-fab
+          class="ms-4"
+          color="cyan-accent-2"
+          icon="mdi-plus"
+          location="bottom left"
+          size="40"
+          absolute
+          offset
+          @click="dialog = !dialog"
+        ></v-fab>
+      </template>
+    </v-toolbar>
+
+    <v-list
+      lines="two"
+      subheader
+    >
+      <v-list-subheader title="Folders" inset></v-list-subheader>
+
+      <v-list-item
+        v-for="item in items"
+        :key="item.title"
+        link
+      >
+        <template v-slot:prepend>
+          <v-avatar :class="[item.iconClass]" :icon="item.icon"></v-avatar>
+        </template>
+
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
+
+        <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
+
+        <template v-slot:append>
+          <v-list-item-action>
+            <v-btn color="grey-lighten-1" icon="mdi-information" variant="text"></v-btn>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+
+      <v-divider inset></v-divider>
+
+      <v-list-subheader title="Files" inset></v-list-subheader>
+
+      <v-list-item
+        v-for="item in items2"
+        :key="item.title"
+        link
+      >
+        <template v-slot:prepend>
+          <v-avatar :class="[item.iconClass]" :icon="item.icon"></v-avatar>
+        </template>
+
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
+
+        <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
+
+        <template v-slot:append>
+          <v-list-item-action>
+            <v-btn color="grey-lighten-1" icon="mdi-information" variant="text"></v-btn>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list>
+
+    <v-dialog
+      v-model="dialog"
+      max-width="500"
+    >
+      <v-card>
+        <v-card-text>
+          <v-text-field label="File name"></v-text-field>
+
+          <small class="text-grey">* This doesn't actually save.</small>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn
+            color="primary"
+            variant="text"
+            @click="dialog = false"
+          >
+            Submit
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const dialog = ref(false)
+  const items = ref([
+    { icon: 'mdi-folder', iconClass: 'bg-grey-lighten-1 text-white', title: 'Photos', subtitle: 'Jan 9, 2014' },
+    { icon: 'mdi-folder', iconClass: 'bg-grey-lighten-1 text-white', title: 'Recipes', subtitle: 'Jan 17, 2014' },
+    { icon: 'mdi-folder', iconClass: 'bg-grey-lighten-1 text-white', title: 'Work', subtitle: 'Jan 28, 2014' },
+  ])
+  const items2 = ref([
+    { icon: 'mdi-clipboard-text', iconClass: 'bg-blue text-white', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
+    { icon: 'mdi-gesture-tap-button', iconClass: 'bg-amber text-white', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
+  ])
+</script>
diff --git a/packages/docs/src/examples/v-btn-fab/misc-speed-dial.vue b/packages/docs/src/examples/v-fab/misc-speed-dial.vue
similarity index 100%
rename from packages/docs/src/examples/v-btn-fab/misc-speed-dial.vue
rename to packages/docs/src/examples/v-fab/misc-speed-dial.vue
index 3e9d0c8ad2c..a7acf084758 100644
--- a/packages/docs/src/examples/v-btn-fab/misc-speed-dial.vue
+++ b/packages/docs/src/examples/v-fab/misc-speed-dial.vue
@@ -4,8 +4,8 @@
       <v-row class="child-flex">
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <div class="text-subheader-2 pa-2">Options</div>
           <v-checkbox
@@ -16,8 +16,8 @@
         </v-col>
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <div class="text-subheader-2 pa-2">FAB location</div>
           <v-checkbox
@@ -43,8 +43,8 @@
         </v-col>
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <div class="text-subheader-2 pa-2">Speed dial direction</div>
           <v-radio-group
@@ -52,27 +52,27 @@
             hide-details
           >
             <v-radio
-              value="top"
               label="Top"
+              value="top"
             ></v-radio>
             <v-radio
-              value="right"
               label="Right"
+              value="right"
             ></v-radio>
             <v-radio
-              value="bottom"
               label="Bottom"
+              value="bottom"
             ></v-radio>
             <v-radio
-              value="left"
               label="Left"
+              value="left"
             ></v-radio>
           </v-radio-group>
         </v-col>
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <div class="text-subheader-2 pa-2">Transition</div>
           <v-radio-group
@@ -80,24 +80,24 @@
             hide-details
           >
             <v-radio
-              value="slide-y-transition"
               label="Slide y"
+              value="slide-y-transition"
             ></v-radio>
             <v-radio
-              value="slide-y-reverse-transition"
               label="Slide y reverse"
+              value="slide-y-reverse-transition"
             ></v-radio>
             <v-radio
-              value="slide-x-transition"
               label="Slide x"
+              value="slide-x-transition"
             ></v-radio>
             <v-radio
-              value="slide-x-reverse-transition"
               label="Slide x reverse"
+              value="slide-x-reverse-transition"
             ></v-radio>
             <v-radio
-              value="scale-transition"
               label="Scale"
+              value="scale-transition"
             ></v-radio>
           </v-radio-group>
         </v-col>
@@ -105,12 +105,12 @@
     </v-container>
     <v-speed-dial
       v-model="fab"
-      :top="top"
       :bottom="bottom"
-      :right="right"
-      :left="left"
       :direction="direction"
+      :left="left"
       :open-on-hover="hover"
+      :right="right"
+      :top="top"
       :transition="transition"
     >
       <template v-slot:activator>
@@ -129,26 +129,26 @@
         </v-btn>
       </template>
       <v-btn
-        fab
-        dark
-        size="small"
         color="green"
+        size="small"
+        dark
+        fab
       >
         <v-icon>mdi-pencil</v-icon>
       </v-btn>
       <v-btn
-        fab
-        dark
-        size="small"
         color="indigo"
+        size="small"
+        dark
+        fab
       >
         <v-icon>mdi-plus</v-icon>
       </v-btn>
       <v-btn
-        fab
-        dark
-        size="small"
         color="red"
+        size="small"
+        dark
+        fab
       >
         <v-icon>mdi-delete</v-icon>
       </v-btn>
diff --git a/packages/docs/src/examples/v-fab/usage.vue b/packages/docs/src/examples/v-fab/usage.vue
new file mode 100644
index 00000000000..0c4715ff2bd
--- /dev/null
+++ b/packages/docs/src/examples/v-fab/usage.vue
@@ -0,0 +1,51 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div class="text-center">
+      <v-fab v-bind="props"></v-fab>
+    </div>
+
+    <template v-slot:configuration>
+      <v-select
+        v-model="color"
+        :items="items"
+        label="Color"
+        clearable
+      ></v-select>
+      <v-checkbox v-model="extended" label="Extended"></v-checkbox>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const variants = ['outlined', 'tonal', 'flat', 'text', 'plain']
+  const name = 'v-fab'
+  const model = shallowRef('default')
+  const options = [...variants]
+  const extended = shallowRef(false)
+  const color = shallowRef()
+  const items = ['primary', 'success', 'surface-variant']
+
+  const props = computed(() => {
+    return {
+      color: color.value,
+      extended: extended.value || undefined,
+      icon: !extended.value ? '$vuetify' : undefined,
+      'prepend-icon': extended.value ? '$vuetify' : undefined,
+      text: extended.value ? 'Extended' : undefined,
+      variant: variants.includes(model.value) ? model.value : undefined,
+    }
+  })
+
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>
diff --git a/packages/docs/src/examples/v-file-input/misc-complex-selection.vue b/packages/docs/src/examples/v-file-input/misc-complex-selection.vue
index b106b40ca6c..57c873aa0cc 100644
--- a/packages/docs/src/examples/v-file-input/misc-complex-selection.vue
+++ b/packages/docs/src/examples/v-file-input/misc-complex-selection.vue
@@ -1,23 +1,23 @@
 <template>
   <v-file-input
     v-model="files"
+    :show-size="1000"
     color="deep-purple-accent-4"
-    counter
     label="File input"
-    multiple
     placeholder="Select your files"
     prepend-icon="mdi-paperclip"
     variant="outlined"
-    :show-size="1000"
+    counter
+    multiple
   >
     <template v-slot:selection="{ fileNames }">
       <template v-for="(fileName, index) in fileNames" :key="fileName">
         <v-chip
           v-if="index < 2"
+          class="me-2"
           color="deep-purple-accent-4"
-          label
           size="small"
-          class="me-2"
+          label
         >
           {{ fileName }}
         </v-chip>
diff --git a/packages/docs/src/examples/v-file-input/prop-chips.vue b/packages/docs/src/examples/v-file-input/prop-chips.vue
index 8000628774e..ea72e2770df 100644
--- a/packages/docs/src/examples/v-file-input/prop-chips.vue
+++ b/packages/docs/src/examples/v-file-input/prop-chips.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <v-file-input
+      label="File input w/ chips"
       chips
       multiple
-      label="File input w/ chips"
     ></v-file-input>
     <v-file-input
-      small-chips
-      multiple
       label="File input w/ small chips"
+      multiple
+      small-chips
     ></v-file-input>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-file-input/prop-counter.vue b/packages/docs/src/examples/v-file-input/prop-counter.vue
index 856f81e5907..b2e820881b8 100644
--- a/packages/docs/src/examples/v-file-input/prop-counter.vue
+++ b/packages/docs/src/examples/v-file-input/prop-counter.vue
@@ -1,8 +1,8 @@
 <template>
   <v-file-input
-    show-size
+    label="File input"
     counter
     multiple
-    label="File input"
+    show-size
   ></v-file-input>
 </template>
diff --git a/packages/docs/src/examples/v-file-input/prop-dense.vue b/packages/docs/src/examples/v-file-input/prop-dense.vue
index 7d6eee5d41b..a0fdcd9a940 100644
--- a/packages/docs/src/examples/v-file-input/prop-dense.vue
+++ b/packages/docs/src/examples/v-file-input/prop-dense.vue
@@ -1,6 +1,6 @@
 <template>
   <v-file-input
-    label="File input"
     density="compact"
+    label="File input"
   ></v-file-input>
 </template>
diff --git a/packages/docs/src/examples/v-file-input/prop-multiple.vue b/packages/docs/src/examples/v-file-input/prop-multiple.vue
index 61ece716fa2..62a83ad0c6e 100644
--- a/packages/docs/src/examples/v-file-input/prop-multiple.vue
+++ b/packages/docs/src/examples/v-file-input/prop-multiple.vue
@@ -1,6 +1,6 @@
 <template>
   <v-file-input
-    multiple
     label="File input"
+    multiple
   ></v-file-input>
 </template>
diff --git a/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue b/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue
index 4dbfb832baa..fc72ae75a31 100644
--- a/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue
+++ b/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue
@@ -1,7 +1,7 @@
 <template>
   <v-file-input
     label="File input"
-    variant="filled"
     prepend-icon="mdi-camera"
+    variant="filled"
   ></v-file-input>
 </template>
diff --git a/packages/docs/src/examples/v-file-input/prop-show-size.vue b/packages/docs/src/examples/v-file-input/prop-show-size.vue
index c64a219ea87..91501199aef 100644
--- a/packages/docs/src/examples/v-file-input/prop-show-size.vue
+++ b/packages/docs/src/examples/v-file-input/prop-show-size.vue
@@ -1,6 +1,6 @@
 <template>
   <v-file-input
-    show-size
     label="File input"
+    show-size
   ></v-file-input>
 </template>
diff --git a/packages/docs/src/examples/v-file-input/prop-validation.vue b/packages/docs/src/examples/v-file-input/prop-validation.vue
index b782e23e3f4..966349688cc 100644
--- a/packages/docs/src/examples/v-file-input/prop-validation.vue
+++ b/packages/docs/src/examples/v-file-input/prop-validation.vue
@@ -2,9 +2,9 @@
   <v-file-input
     :rules="rules"
     accept="image/png, image/jpeg, image/bmp"
+    label="Avatar"
     placeholder="Pick an avatar"
     prepend-icon="mdi-camera"
-    label="Avatar"
   ></v-file-input>
 </template>
 
diff --git a/packages/docs/src/examples/v-file-input/slot-selection.vue b/packages/docs/src/examples/v-file-input/slot-selection.vue
index 8ecf7cb2850..dd88ebe750e 100644
--- a/packages/docs/src/examples/v-file-input/slot-selection.vue
+++ b/packages/docs/src/examples/v-file-input/slot-selection.vue
@@ -1,18 +1,18 @@
 <template>
   <v-file-input
     v-model="files"
-    placeholder="Upload your documents"
     label="File input"
-    multiple
+    placeholder="Upload your documents"
     prepend-icon="mdi-paperclip"
+    multiple
   >
     <template v-slot:selection="{ fileNames }">
       <template v-for="fileName in fileNames" :key="fileName">
         <v-chip
+          class="me-2"
+          color="primary"
           size="small"
           label
-          color="primary"
-          class="me-2"
         >
           {{ fileName }}
         </v-chip>
diff --git a/packages/docs/src/examples/v-file-input/usage.vue b/packages/docs/src/examples/v-file-input/usage.vue
index f31cd0f0ef2..0744a631dd7 100644
--- a/packages/docs/src/examples/v-file-input/usage.vue
+++ b/packages/docs/src/examples/v-file-input/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-file-input v-bind="props"></v-file-input>
@@ -14,14 +14,10 @@
 
       <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-file-input'
   const model = ref('default')
   const options = ['outlined', 'underlined', 'solo', 'solo-filled', 'solo-inverted']
diff --git a/packages/docs/src/examples/v-footer/misc-company-footer.vue b/packages/docs/src/examples/v-footer/misc-company-footer.vue
index 8c540b39819..3dda5d978db 100644
--- a/packages/docs/src/examples/v-footer/misc-company-footer.vue
+++ b/packages/docs/src/examples/v-footer/misc-company-footer.vue
@@ -4,10 +4,10 @@
       <v-btn
         v-for="link in links"
         :key="link"
-        color="white"
-        variant="text"
         class="mx-2"
+        color="white"
         rounded="xl"
+        variant="text"
       >
         {{ link }}
       </v-btn>
diff --git a/packages/docs/src/examples/v-footer/misc-indigo-footer.vue b/packages/docs/src/examples/v-footer/misc-indigo-footer.vue
index 1fa6983824e..be2edd48aa0 100644
--- a/packages/docs/src/examples/v-footer/misc-indigo-footer.vue
+++ b/packages/docs/src/examples/v-footer/misc-indigo-footer.vue
@@ -6,8 +6,8 @@
       <v-btn
         v-for="icon in icons"
         :key="icon"
-        class="mx-4"
         :icon="icon"
+        class="mx-4"
         variant="text"
       ></v-btn>
     </div>
diff --git a/packages/docs/src/examples/v-footer/misc-teal-footer.vue b/packages/docs/src/examples/v-footer/misc-teal-footer.vue
index f205a0b1d4e..696e0b89d65 100644
--- a/packages/docs/src/examples/v-footer/misc-teal-footer.vue
+++ b/packages/docs/src/examples/v-footer/misc-teal-footer.vue
@@ -8,10 +8,10 @@
       <v-btn
         v-for="icon in icons"
         :key="icon"
-        class="mx-4"
         :icon="icon"
-        variant="plain"
+        class="mx-4"
         size="small"
+        variant="plain"
       ></v-btn>
     </div>
 
diff --git a/packages/docs/src/examples/v-footer/usage.vue b/packages/docs/src/examples/v-footer/usage.vue
index fa5ec0c9887..b0d4ba70dd5 100644
--- a/packages/docs/src/examples/v-footer/usage.vue
+++ b/packages/docs/src/examples/v-footer/usage.vue
@@ -1,23 +1,19 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-footer v-bind="props">
         {{ new Date().getFullYear() }} — <strong>Vuetify, LLC</strong>
       </v-footer>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-footer'
   const model = ref('default')
   const options = ['bordered']
diff --git a/packages/docs/src/examples/v-form/misc-exposed.vue b/packages/docs/src/examples/v-form/misc-exposed.vue
index aea2147dd42..97d3eb8e373 100644
--- a/packages/docs/src/examples/v-form/misc-exposed.vue
+++ b/packages/docs/src/examples/v-form/misc-exposed.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-sheet width="300" class="mx-auto">
+  <v-sheet class="mx-auto" width="300">
 
     <v-form ref="form">
       <v-text-field
@@ -27,8 +27,8 @@
 
       <div class="d-flex flex-column">
         <v-btn
-          color="success"
           class="mt-4"
+          color="success"
           block
           @click="validate"
         >
@@ -36,8 +36,8 @@
         </v-btn>
 
         <v-btn
-          color="error"
           class="mt-4"
+          color="error"
           block
           @click="reset"
         >
@@ -45,8 +45,8 @@
         </v-btn>
 
         <v-btn
-          color="warning"
           class="mt-4"
+          color="warning"
           block
           @click="resetValidation"
         >
diff --git a/packages/docs/src/examples/v-form/misc-vee-validate.vue b/packages/docs/src/examples/v-form/misc-vee-validate.vue
index 302b9db348c..8d1d387019b 100644
--- a/packages/docs/src/examples/v-form/misc-vee-validate.vue
+++ b/packages/docs/src/examples/v-form/misc-vee-validate.vue
@@ -22,17 +22,17 @@
 
     <v-select
       v-model="select.value.value"
-      :items="items"
       :error-messages="select.errorMessage.value"
+      :items="items"
       label="Select"
     ></v-select>
 
     <v-checkbox
       v-model="checkbox.value.value"
       :error-messages="checkbox.errorMessage.value"
-      value="1"
       label="Option"
       type="checkbox"
+      value="1"
     ></v-checkbox>
 
     <v-btn
diff --git a/packages/docs/src/examples/v-form/misc-vuelidate.vue b/packages/docs/src/examples/v-form/misc-vuelidate.vue
index f63843e7fd2..bbbfbc5fd86 100644
--- a/packages/docs/src/examples/v-form/misc-vuelidate.vue
+++ b/packages/docs/src/examples/v-form/misc-vuelidate.vue
@@ -2,12 +2,12 @@
   <form>
     <v-text-field
       v-model="state.name"
-      :error-messages="v$.name.$errors.map(e => e.$message)"
       :counter="10"
+      :error-messages="v$.name.$errors.map(e => e.$message)"
       label="Name"
       required
-      @input="v$.name.$touch"
       @blur="v$.name.$touch"
+      @input="v$.name.$touch"
     ></v-text-field>
 
     <v-text-field
@@ -15,18 +15,18 @@
       :error-messages="v$.email.$errors.map(e => e.$message)"
       label="E-mail"
       required
-      @input="v$.email.$touch"
       @blur="v$.email.$touch"
+      @input="v$.email.$touch"
     ></v-text-field>
 
     <v-select
       v-model="state.select"
-      :items="items"
       :error-messages="v$.select.$errors.map(e => e.$message)"
+      :items="items"
       label="Item"
       required
-      @change="v$.select.$touch"
       @blur="v$.select.$touch"
+      @change="v$.select.$touch"
     ></v-select>
 
     <v-checkbox
@@ -34,8 +34,8 @@
       :error-messages="v$.checkbox.$errors.map(e => e.$message)"
       label="Do you agree?"
       required
-      @change="v$.checkbox.$touch"
       @blur="v$.checkbox.$touch"
+      @change="v$.checkbox.$touch"
     ></v-checkbox>
 
     <v-btn
diff --git a/packages/docs/src/examples/v-form/prop-disabled.vue b/packages/docs/src/examples/v-form/prop-disabled.vue
index 020d54cd733..c3f10f106c3 100644
--- a/packages/docs/src/examples/v-form/prop-disabled.vue
+++ b/packages/docs/src/examples/v-form/prop-disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-sheet width="300" class="mx-auto">
+  <v-sheet class="mx-auto" width="300">
     <v-form disabled>
       <v-text-field
         v-model="firstName"
diff --git a/packages/docs/src/examples/v-form/prop-fast-fail.vue b/packages/docs/src/examples/v-form/prop-fast-fail.vue
index 3c60e7e8bc8..661af32d0db 100644
--- a/packages/docs/src/examples/v-form/prop-fast-fail.vue
+++ b/packages/docs/src/examples/v-form/prop-fast-fail.vue
@@ -1,19 +1,19 @@
 <template>
-  <v-sheet width="300" class="mx-auto">
+  <v-sheet class="mx-auto" width="300">
     <v-form fast-fail @submit.prevent>
       <v-text-field
         v-model="firstName"
-        label="First name"
         :rules="firstNameRules"
+        label="First name"
       ></v-text-field>
 
       <v-text-field
         v-model="lastName"
-        label="Last name"
         :rules="lastNameRules"
+        label="Last name"
       ></v-text-field>
 
-      <v-btn type="submit" block class="mt-2">Submit</v-btn>
+      <v-btn class="mt-2" type="submit" block>Submit</v-btn>
     </v-form>
   </v-sheet>
 </template>
diff --git a/packages/docs/src/examples/v-form/rules-async.vue b/packages/docs/src/examples/v-form/rules-async.vue
index 3c05e739d94..129a76f945b 100644
--- a/packages/docs/src/examples/v-form/rules-async.vue
+++ b/packages/docs/src/examples/v-form/rules-async.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-sheet max-width="300" class="mx-auto">
+  <v-sheet class="mx-auto" max-width="300">
     <v-form validate-on="submit lazy" @submit.prevent="submit">
       <v-text-field
         v-model="userName"
@@ -9,10 +9,10 @@
 
       <v-btn
         :loading="loading"
-        type="submit"
-        block
         class="mt-2"
         text="Submit"
+        type="submit"
+        block
       ></v-btn>
     </v-form>
   </v-sheet>
diff --git a/packages/docs/src/examples/v-form/rules-required.vue b/packages/docs/src/examples/v-form/rules-required.vue
index 94bb72e2dd4..5461c7a4a63 100644
--- a/packages/docs/src/examples/v-form/rules-required.vue
+++ b/packages/docs/src/examples/v-form/rules-required.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-sheet width="300" class="mx-auto">
+  <v-sheet class="mx-auto" width="300">
     <v-form @submit.prevent>
       <v-text-field
         v-model="firstName"
         :rules="rules"
         label="First name"
       ></v-text-field>
-      <v-btn type="submit" block class="mt-2">Submit</v-btn>
+      <v-btn class="mt-2" type="submit" block>Submit</v-btn>
     </v-form>
   </v-sheet>
 </template>
diff --git a/packages/docs/src/examples/v-form/usage.vue b/packages/docs/src/examples/v-form/usage.vue
index 74e34072ac6..9b8a3716615 100644
--- a/packages/docs/src/examples/v-form/usage.vue
+++ b/packages/docs/src/examples/v-form/usage.vue
@@ -8,11 +8,11 @@
         >
           <v-text-field
             v-model="firstname"
-            :rules="nameRules"
             :counter="10"
+            :rules="nameRules"
             label="First name"
-            required
             hide-details
+            required
           ></v-text-field>
         </v-col>
 
@@ -22,8 +22,8 @@
         >
           <v-text-field
             v-model="lastname"
-            :rules="nameRules"
             :counter="10"
+            :rules="nameRules"
             label="Last name"
             hide-details
             required
diff --git a/packages/docs/src/examples/v-hover/misc-hover-list.vue b/packages/docs/src/examples/v-hover/misc-hover-list.vue
index 5ac703afeee..69660fdb749 100644
--- a/packages/docs/src/examples/v-hover/misc-hover-list.vue
+++ b/packages/docs/src/examples/v-hover/misc-hover-list.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container class="pa-4 text-center">
     <v-row
-      class="fill-height"
       align="center"
+      class="fill-height"
       justify="center"
     >
       <template v-for="(item, i) in items" :key="i">
@@ -12,8 +12,8 @@
         >
           <v-hover v-slot="{ isHovering, props }">
             <v-card
-              :elevation="isHovering ? 12 : 2"
               :class="{ 'on-hover': isHovering }"
+              :elevation="isHovering ? 12 : 2"
               v-bind="props"
             >
               <v-img
@@ -39,10 +39,10 @@
                   <v-btn
                     v-for="(icon, index) in icons"
                     :key="index"
-                    variant="text"
                     :class="{ 'show-btns': isHovering }"
                     :color="transparent"
                     :icon="icon"
+                    variant="text"
                   ></v-btn>
                 </div>
               </v-img>
diff --git a/packages/docs/src/examples/v-hover/misc-transition.vue b/packages/docs/src/examples/v-hover/misc-transition.vue
index 83a12cfde3b..1f898d6bbd2 100644
--- a/packages/docs/src/examples/v-hover/misc-transition.vue
+++ b/packages/docs/src/examples/v-hover/misc-transition.vue
@@ -9,8 +9,8 @@
       >
         <v-img
           :aspect-ratio="16/9"
-          cover
           src="https://cdn.vuetifyjs.com/images/cards/kitchen.png"
+          cover
         >
           <v-expand-transition>
             <div
diff --git a/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue b/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue
index 87d5e4fadf4..e6b3da8747d 100644
--- a/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue
+++ b/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue
@@ -9,8 +9,8 @@
         open-delay="200"
       >
         <v-card
-          :elevation="isHovering ? 16 : 2"
           :class="{ 'on-hover': isHovering }"
+          :elevation="isHovering ? 16 : 2"
           class="mx-auto"
           height="350"
           max-width="350"
@@ -32,8 +32,8 @@
         close-delay="200"
       >
         <v-card
-          :elevation="isHovering ? 16 : 2"
           :class="{ 'on-hover': isHovering }"
+          :elevation="isHovering ? 16 : 2"
           class="mx-auto"
           height="350"
           max-width="350"
diff --git a/packages/docs/src/examples/v-hover/usage.vue b/packages/docs/src/examples/v-hover/usage.vue
index 2592a63ada6..948a7b175e3 100644
--- a/packages/docs/src/examples/v-hover/usage.vue
+++ b/packages/docs/src/examples/v-hover/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-hover v-bind="props">
@@ -11,20 +11,16 @@
           <v-card
             v-bind="hoverProps"
             :color="isHovering ? 'primary' : undefined"
-            title="Hover over me"
             text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+            title="Hover over me"
           ></v-card>
         </template>
       </v-hover>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-hover'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-icon/misc-buttons.vue b/packages/docs/src/examples/v-icon/misc-buttons.vue
index 5d912e2c882..f9779fd66a0 100644
--- a/packages/docs/src/examples/v-icon/misc-buttons.vue
+++ b/packages/docs/src/examples/v-icon/misc-buttons.vue
@@ -7,8 +7,8 @@
       >
         Accept
         <v-icon
-          end
           icon="mdi-checkbox-marked-circle"
+          end
         ></v-icon>
       </v-btn>
 
@@ -18,8 +18,8 @@
       >
         Decline
         <v-icon
-          end
           icon="mdi-cancel"
+          end
         ></v-icon>
       </v-btn>
 
@@ -27,8 +27,8 @@
         class="ma-2"
       >
         <v-icon
-          start
           icon="mdi-minus-circle"
+          start
         ></v-icon>
         Cancel
       </v-btn>
@@ -40,8 +40,8 @@
         color="orange-darken-2"
       >
         <v-icon
-          start
           icon="mdi-arrow-left"
+          start
         ></v-icon>
         Back
       </v-btn>
@@ -62,16 +62,16 @@
     <div>
       <v-btn
         class="ma-2"
-        variant="text"
-        icon="mdi-thumb-up"
         color="blue-lighten-2"
+        icon="mdi-thumb-up"
+        variant="text"
       ></v-btn>
 
       <v-btn
         class="ma-2"
-        variant="text"
-        icon="mdi-thumb-down"
         color="red-lighten-2"
+        icon="mdi-thumb-down"
+        variant="text"
       ></v-btn>
     </div>
   </div>
diff --git a/packages/docs/src/examples/v-icon/prop-color.vue b/packages/docs/src/examples/v-icon/prop-color.vue
index ab7df71494c..fb1f8f29657 100644
--- a/packages/docs/src/examples/v-icon/prop-color.vue
+++ b/packages/docs/src/examples/v-icon/prop-color.vue
@@ -1,39 +1,39 @@
 <template>
   <v-row justify="space-around">
     <v-icon
-      size="large"
       color="green-darken-2"
       icon="mdi-domain"
+      size="large"
     ></v-icon>
 
     <v-icon
-      size="large"
       color="blue-darken-2"
       icon="mdi-message-text"
+      size="large"
     ></v-icon>
 
     <v-icon
-      size="large"
       color="purple-darken-2"
       icon="mdi-dialpad"
+      size="large"
     ></v-icon>
 
     <v-icon
-      size="large"
       color="teal-darken-2"
       icon="mdi-email"
+      size="large"
     ></v-icon>
 
     <v-icon
-      size="large"
       color="blue-grey-darken-2"
       icon="mdi-call-split"
+      size="large"
     ></v-icon>
 
     <v-icon
-      size="large"
       color="orange-darken-2"
       icon="mdi-arrow-up-bold-box-outline"
+      size="large"
     ></v-icon>
   </v-row>
 </template>
diff --git a/packages/docs/src/examples/v-icon/usage.vue b/packages/docs/src/examples/v-icon/usage.vue
index f577ac1bfd5..1c03cfadc49 100644
--- a/packages/docs/src/examples/v-icon/usage.vue
+++ b/packages/docs/src/examples/v-icon/usage.vue
@@ -1,29 +1,25 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="text-center">
       <v-icon v-bind="props"></v-icon>
     </div>
 
     <template v-slot:configuration>
-      <v-select v-model="size" label="Size" :items="sizes"></v-select>
+      <v-select v-model="size" :items="sizes" label="Size"></v-select>
 
-      <v-select v-model="color" label="Color" :items="colors"></v-select>
+      <v-select v-model="color" :items="colors" label="Color"></v-select>
 
-      <v-select v-model="icon" label="Icon" :items="icons" clearable></v-select>
+      <v-select v-model="icon" :items="icons" label="Icon" clearable></v-select>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-icon'
   const model = ref('default')
   const icon = ref()
diff --git a/packages/docs/src/examples/v-img/complex-grid.vue b/packages/docs/src/examples/v-img/complex-grid.vue
index df57cfda5ba..a0fe24f6421 100644
--- a/packages/docs/src/examples/v-img/complex-grid.vue
+++ b/packages/docs/src/examples/v-img/complex-grid.vue
@@ -4,18 +4,18 @@
       <v-col :cols="image.cols">
         <v-img
           :src="`https://picsum.photos/500/300?image=${image.cols * 20}`"
-          cover
           height="100%"
+          cover
         ></v-img>
       </v-col>
 
-      <v-col v-if="image.children" cols="6" class="d-flex flex-column">
+      <v-col v-if="image.children" class="d-flex flex-column" cols="6">
         <v-row>
           <v-col v-for="(children,childIdx) in image.children" :key="childIdx" :cols="children.cols">
             <v-img
               :src="`https://picsum.photos/500/300?image=${children.cols + childIdx}`"
-              cover
               height="100%"
+              cover
             ></v-img>
           </v-col>
         </v-row>
diff --git a/packages/docs/src/examples/v-img/misc-grid.vue b/packages/docs/src/examples/v-img/misc-grid.vue
index 96724ca1cbb..80ae190f793 100644
--- a/packages/docs/src/examples/v-img/misc-grid.vue
+++ b/packages/docs/src/examples/v-img/misc-grid.vue
@@ -7,21 +7,21 @@
       cols="4"
     >
       <v-img
-        :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
         :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
+        :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
         aspect-ratio="1"
-        cover
         class="bg-grey-lighten-2"
+        cover
       >
         <template v-slot:placeholder>
           <v-row
-            class="fill-height ma-0"
             align="center"
+            class="fill-height ma-0"
             justify="center"
           >
             <v-progress-circular
-              indeterminate
               color="grey-lighten-5"
+              indeterminate
             ></v-progress-circular>
           </v-row>
         </template>
diff --git a/packages/docs/src/examples/v-img/prop-contain.vue b/packages/docs/src/examples/v-img/prop-contain.vue
index e6accbaaf88..7b6d8183104 100644
--- a/packages/docs/src/examples/v-img/prop-contain.vue
+++ b/packages/docs/src/examples/v-img/prop-contain.vue
@@ -9,22 +9,22 @@
           Matching
         </div>
         <v-img
-          src="https://picsum.photos/510/300?random"
           aspect-ratio="1.7"
+          src="https://picsum.photos/510/300?random"
         ></v-img>
         <div class="subheading pt-4">
           Too high
         </div>
         <v-img
-          src="https://picsum.photos/510/300?random"
           aspect-ratio="2"
+          src="https://picsum.photos/510/300?random"
         ></v-img>
         <div class="subheading pt-4">
           Too low
         </div>
         <v-img
-          src="https://picsum.photos/510/300?random"
           aspect-ratio="1.4"
+          src="https://picsum.photos/510/300?random"
         ></v-img>
       </v-col>
 
@@ -36,24 +36,24 @@
           Matching
         </div>
         <v-img
-          src="https://picsum.photos/510/300?random"
           aspect-ratio="1.7"
+          src="https://picsum.photos/510/300?random"
           contain
         ></v-img>
         <div class="subheading pt-4">
           Too high
         </div>
         <v-img
-          src="https://picsum.photos/510/300?random"
           aspect-ratio="2"
+          src="https://picsum.photos/510/300?random"
           contain
         ></v-img>
         <div class="subheading pt-4">
           Too low
         </div>
         <v-img
-          src="https://picsum.photos/510/300?random"
           aspect-ratio="1.4"
+          src="https://picsum.photos/510/300?random"
           contain
         ></v-img>
       </v-col>
diff --git a/packages/docs/src/examples/v-img/prop-cover.vue b/packages/docs/src/examples/v-img/prop-cover.vue
index b9cbb2e6e3b..0355fa2fd16 100644
--- a/packages/docs/src/examples/v-img/prop-cover.vue
+++ b/packages/docs/src/examples/v-img/prop-cover.vue
@@ -3,20 +3,20 @@
     <div class="ma-4">
       <div class="text-subtitle-2">Default</div>
       <v-img
-        class="bg-white"
-        width="300"
         :aspect-ratio="1"
+        class="bg-white"
         src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
+        width="300"
       ></v-img>
     </div>
 
     <div class="ma-4">
       <div class="text-subtitle-2">Cover</div>
       <v-img
-        class="bg-white"
-        width="300"
         :aspect-ratio="1"
+        class="bg-white"
         src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
+        width="300"
         cover
       ></v-img>
     </div>
diff --git a/packages/docs/src/examples/v-img/prop-gradient.vue b/packages/docs/src/examples/v-img/prop-gradient.vue
index 395c120ce79..c7b48685e5f 100644
--- a/packages/docs/src/examples/v-img/prop-gradient.vue
+++ b/packages/docs/src/examples/v-img/prop-gradient.vue
@@ -5,8 +5,8 @@
       sm="4"
     >
       <v-img
-        src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
         gradient="to top right, rgba(100,115,201,.33), rgba(25,32,72,.7)"
+        src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
       ></v-img>
     </v-col>
 
diff --git a/packages/docs/src/examples/v-img/prop-max-height.vue b/packages/docs/src/examples/v-img/prop-max-height.vue
index 7752ccee619..a635dab952c 100644
--- a/packages/docs/src/examples/v-img/prop-max-height.vue
+++ b/packages/docs/src/examples/v-img/prop-max-height.vue
@@ -1,17 +1,17 @@
 <template>
   <v-container
     class="fill-height"
-    fluid
     style="min-height: 434px"
+    fluid
   >
     <v-fade-transition mode="out-in">
       <v-row>
         <v-col cols="6">
           <v-card>
             <v-img
-              src="https://picsum.photos/350/165?random"
-              height="125"
               class="bg-grey-lighten-2"
+              height="125"
+              src="https://picsum.photos/350/165?random"
             ></v-img>
             <v-card-title class="text-h6">
               height
@@ -22,10 +22,10 @@
         <v-col cols="6">
           <v-card>
             <v-img
-              src="https://picsum.photos/350/165?random"
+              class="bg-grey-lighten-2"
               height="125"
+              src="https://picsum.photos/350/165?random"
               cover
-              class="bg-grey-lighten-2"
             ></v-img>
             <v-card-title class="text-h6">
               height with cover
@@ -36,9 +36,9 @@
         <v-col cols="6">
           <v-card>
             <v-img
-              src="https://picsum.photos/350/165?random"
-              max-height="125"
               class="bg-grey-lighten-2"
+              max-height="125"
+              src="https://picsum.photos/350/165?random"
             ></v-img>
             <v-card-title class="text-h6">
               max-height
@@ -49,10 +49,10 @@
         <v-col cols="6">
           <v-card>
             <v-img
-              src="https://picsum.photos/350/165?random"
+              class="bg-grey-lighten-2"
               max-height="125"
+              src="https://picsum.photos/350/165?random"
               cover
-              class="bg-grey-lighten-2"
             ></v-img>
             <v-card-title class="text-h6">
               max-height with cover
diff --git a/packages/docs/src/examples/v-img/usage.vue b/packages/docs/src/examples/v-img/usage.vue
index 0e33f6ff565..a5198619eec 100644
--- a/packages/docs/src/examples/v-img/usage.vue
+++ b/packages/docs/src/examples/v-img/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -25,18 +25,14 @@
       <v-slider
         v-model="width"
         label="Width"
-        min="100"
         max="400"
+        min="100"
       ></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-img'
   const model = ref('default')
   const width = ref(300)
diff --git a/packages/docs/src/examples/v-infinite-scroll/prop-color.vue b/packages/docs/src/examples/v-infinite-scroll/prop-color.vue
index 8fc9264691a..df48bcad901 100644
--- a/packages/docs/src/examples/v-infinite-scroll/prop-color.vue
+++ b/packages/docs/src/examples/v-infinite-scroll/prop-color.vue
@@ -1,8 +1,8 @@
 <template>
   <v-infinite-scroll
     color="secondary"
-    mode="manual"
     height="400"
+    mode="manual"
     @load="load"
   >
     <template v-for="(item, index) in items" :key="item">
diff --git a/packages/docs/src/examples/v-infinite-scroll/slot-error.vue b/packages/docs/src/examples/v-infinite-scroll/slot-error.vue
index 66bd6d3c6d0..9df28553db6 100644
--- a/packages/docs/src/examples/v-infinite-scroll/slot-error.vue
+++ b/packages/docs/src/examples/v-infinite-scroll/slot-error.vue
@@ -14,8 +14,8 @@
           Something went wrong...
           <v-btn
             color="white"
-            variant="outlined"
             size="small"
+            variant="outlined"
             v-bind="props"
           >
             Retry
diff --git a/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue b/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue
index 249e0e5d76a..0b743414d6d 100644
--- a/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue
+++ b/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue
@@ -1,7 +1,7 @@
 <template>
   <v-infinite-scroll
-    mode="manual"
     height="400"
+    mode="manual"
     @load="load"
   >
     <template v-for="(item, index) in items" :key="item">
@@ -12,8 +12,8 @@
     <template v-slot:load-more="{ props }">
       <v-btn
         icon="mdi-refresh"
-        variant="text"
         size="small"
+        variant="text"
         v-bind="props"
       ></v-btn>
     </template>
diff --git a/packages/docs/src/examples/v-infinite-scroll/usage.vue b/packages/docs/src/examples/v-infinite-scroll/usage.vue
index c77f87b953d..d6256d067a1 100644
--- a/packages/docs/src/examples/v-infinite-scroll/usage.vue
+++ b/packages/docs/src/examples/v-infinite-scroll/usage.vue
@@ -1,10 +1,10 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :script="script"
     :name="name"
     :options="options"
+    :script="script"
   >
     <div>
       <v-infinite-scroll
@@ -19,14 +19,10 @@
         </template>
       </v-infinite-scroll>
     </div>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-infinite-scroll'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-input/prop-error-count.vue b/packages/docs/src/examples/v-input/prop-error-count.vue
index c0abcf260c0..e07dd2cba82 100644
--- a/packages/docs/src/examples/v-input/prop-error-count.vue
+++ b/packages/docs/src/examples/v-input/prop-error-count.vue
@@ -1,9 +1,9 @@
 <template>
   <v-input
-    max-errors="2"
     :error-messages="['Fatal error', 'Another error']"
-    error
+    max-errors="2"
     disabled
+    error
   >
     Input
   </v-input>
diff --git a/packages/docs/src/examples/v-input/prop-error.vue b/packages/docs/src/examples/v-input/prop-error.vue
index 50dc6a2fe38..cffcbd8f4b2 100644
--- a/packages/docs/src/examples/v-input/prop-error.vue
+++ b/packages/docs/src/examples/v-input/prop-error.vue
@@ -1,8 +1,8 @@
 <template>
   <v-input
     :error-messages="['Fatal error']"
-    error
     disabled
+    error
   >
     Input
   </v-input>
diff --git a/packages/docs/src/examples/v-input/prop-hide-details.vue b/packages/docs/src/examples/v-input/prop-hide-details.vue
index f5fa2ef441d..b72b0c1714b 100644
--- a/packages/docs/src/examples/v-input/prop-hide-details.vue
+++ b/packages/docs/src/examples/v-input/prop-hide-details.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-text-field
-      label="Main input"
       :rules="rules"
       hide-details="auto"
+      label="Main input"
     ></v-text-field>
     <v-text-field label="Another input"></v-text-field>
   </div>
diff --git a/packages/docs/src/examples/v-input/prop-hint.vue b/packages/docs/src/examples/v-input/prop-hint.vue
index cf30d5611f6..e56ed424dcd 100644
--- a/packages/docs/src/examples/v-input/prop-hint.vue
+++ b/packages/docs/src/examples/v-input/prop-hint.vue
@@ -5,9 +5,9 @@
       label="Show messages"
     ></v-switch>
     <v-input
+      :messages="messages"
       hint="I am hint"
       persistent-hint
-      :messages="messages"
     >
       Input
     </v-input>
diff --git a/packages/docs/src/examples/v-input/prop-loading.vue b/packages/docs/src/examples/v-input/prop-loading.vue
index 92584f36c8c..5e83044cf22 100644
--- a/packages/docs/src/examples/v-input/prop-loading.vue
+++ b/packages/docs/src/examples/v-input/prop-loading.vue
@@ -1,7 +1,7 @@
 <template>
   <v-text-field
     color="success"
-    loading
     disabled
+    loading
   ></v-text-field>
 </template>
diff --git a/packages/docs/src/examples/v-input/prop-success.vue b/packages/docs/src/examples/v-input/prop-success.vue
index 2a4865f7584..e8786548462 100644
--- a/packages/docs/src/examples/v-input/prop-success.vue
+++ b/packages/docs/src/examples/v-input/prop-success.vue
@@ -1,8 +1,8 @@
 <template>
   <v-input
     :success-messages="['Success']"
-    success
     disabled
+    success
   >
     Input
   </v-input>
diff --git a/packages/docs/src/examples/v-intersect/prop-options.vue b/packages/docs/src/examples/v-intersect/prop-options.vue
index fbe30688fe0..37da185ae8d 100644
--- a/packages/docs/src/examples/v-intersect/prop-options.vue
+++ b/packages/docs/src/examples/v-intersect/prop-options.vue
@@ -3,9 +3,9 @@
     <div class="d-flex align-center text-center justify-center">
       <v-avatar
         :color="intersecting ? 'green-lighten-1' : 'red-darken-2'"
-        variant="flat"
         class="me-3 swing-transition"
         size="32"
+        variant="flat"
       ></v-avatar>
     </div>
 
@@ -14,18 +14,18 @@
       max-height="400"
     >
       <v-sheet
-        height="200vh"
         class="d-flex align-center text-center pa-2"
+        height="200vh"
       >
         <v-card
+          class="mx-auto"
+          max-width="336"
           v-intersect="{
             handler: onIntersect,
             options: {
               threshold: [0, 0.5, 1.0]
             }
           }"
-          class="mx-auto"
-          max-width="336"
         >
           <v-card-title>Card title</v-card-title>
 
diff --git a/packages/docs/src/examples/v-intersect/usage.vue b/packages/docs/src/examples/v-intersect/usage.vue
index 16f4b836bc8..690df1b19d3 100644
--- a/packages/docs/src/examples/v-intersect/usage.vue
+++ b/packages/docs/src/examples/v-intersect/usage.vue
@@ -3,9 +3,9 @@
     <div class="d-flex align-center text-center justify-center">
       <v-avatar
         :color="isIntersecting ? 'green-lighten-1' : 'red-darken-2'"
-        variant="flat"
         class="me-3 swing-transition"
         size="32"
+        variant="flat"
       ></v-avatar>
     </div>
 
@@ -14,13 +14,13 @@
       max-height="400"
     >
       <v-sheet
-        height="200vh"
         class="d-flex align-center text-center pa-2"
+        height="200vh"
       >
         <v-card
-          v-intersect="onIntersect"
           class="mx-auto"
           max-width="336"
+          v-intersect="onIntersect"
         >
           <v-card-title>Card title</v-card-title>
 
diff --git a/packages/docs/src/examples/v-item-group/misc-chips.vue b/packages/docs/src/examples/v-item-group/misc-chips.vue
index 36b79d3ece2..eb86f40e338 100644
--- a/packages/docs/src/examples/v-item-group/misc-chips.vue
+++ b/packages/docs/src/examples/v-item-group/misc-chips.vue
@@ -1,29 +1,29 @@
 <template>
   <v-card>
     <v-toolbar
-      flat
       color="blue-grey"
       dark
+      flat
     >
       <v-toolbar-title>Submit a post</v-toolbar-title>
     </v-toolbar>
 
     <v-card-text>
       <v-text-field
-        variant="filled"
         label="Title"
         model-value="My new post"
+        variant="filled"
       ></v-text-field>
 
       <v-textarea
-        variant="filled"
         label="Text"
         model-value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse"
+        variant="filled"
       ></v-textarea>
 
       <v-divider class="my-2"></v-divider>
 
-      <v-item-group multiple selected-class="bg-purple">
+      <v-item-group selected-class="bg-purple" multiple>
         <div class="text-caption mb-2">Tags</div>
         <v-item
           v-for="n in 8"
diff --git a/packages/docs/src/examples/v-item-group/misc-selection.vue b/packages/docs/src/examples/v-item-group/misc-selection.vue
index 5015b99300a..0714080a1a6 100644
--- a/packages/docs/src/examples/v-item-group/misc-selection.vue
+++ b/packages/docs/src/examples/v-item-group/misc-selection.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
-    max-width="400"
     class="mx-auto"
+    max-width="400"
   >
     <v-container class="pa-1">
       <v-item-group
@@ -18,9 +18,9 @@
             <v-item v-slot="{ isSelected, toggle }">
               <v-img
                 :src="`https://cdn.vuetifyjs.com/images/${item.src}`"
-                cover
-                height="150"
                 class="text-right pa-2"
+                height="150"
+                cover
                 @click="toggle"
               >
                 <v-btn :icon="isSelected ? 'mdi-heart' : 'mdi-heart-outline'"></v-btn>
diff --git a/packages/docs/src/examples/v-item-group/prop-mandatory.vue b/packages/docs/src/examples/v-item-group/prop-mandatory.vue
index d326405d24e..aba2f64b8a2 100644
--- a/packages/docs/src/examples/v-item-group/prop-mandatory.vue
+++ b/packages/docs/src/examples/v-item-group/prop-mandatory.vue
@@ -12,8 +12,8 @@
             <v-card
               :color="isSelected ? 'primary' : ''"
               class="d-flex align-center"
-              dark
               height="200"
+              dark
               @click="toggle"
             >
               <v-scroll-y-transition>
diff --git a/packages/docs/src/examples/v-item-group/prop-multiple.vue b/packages/docs/src/examples/v-item-group/prop-multiple.vue
index 92527f1ef84..87f3376c080 100644
--- a/packages/docs/src/examples/v-item-group/prop-multiple.vue
+++ b/packages/docs/src/examples/v-item-group/prop-multiple.vue
@@ -12,8 +12,8 @@
             <v-card
               :color="isSelected ? 'primary' : ''"
               class="d-flex align-center"
-              dark
               height="200"
+              dark
               @click="toggle"
             >
               <v-scroll-y-transition>
diff --git a/packages/docs/src/examples/v-item-group/prop-selected-class.vue b/packages/docs/src/examples/v-item-group/prop-selected-class.vue
index d6ce6f8cfad..21cdc858764 100644
--- a/packages/docs/src/examples/v-item-group/prop-selected-class.vue
+++ b/packages/docs/src/examples/v-item-group/prop-selected-class.vue
@@ -11,8 +11,8 @@
           <v-item v-slot="{ isSelected, selectedClass, toggle }">
             <v-card
               :class="['d-flex align-center', selectedClass]"
-              dark
               height="200"
+              dark
               @click="toggle"
             >
               <div
diff --git a/packages/docs/src/examples/v-item-group/usage.vue b/packages/docs/src/examples/v-item-group/usage.vue
index 862677dfd25..52bbbdc395e 100644
--- a/packages/docs/src/examples/v-item-group/usage.vue
+++ b/packages/docs/src/examples/v-item-group/usage.vue
@@ -12,8 +12,8 @@
             <v-card
               :color="isSelected ? 'primary' : ''"
               class="d-flex align-center"
-              dark
               height="200"
+              dark
               @click="toggle"
             >
               <v-scroll-y-transition>
diff --git a/packages/docs/src/examples/v-lazy/usage.vue b/packages/docs/src/examples/v-lazy/usage.vue
index 4c79e9d10b2..c4839756199 100644
--- a/packages/docs/src/examples/v-lazy/usage.vue
+++ b/packages/docs/src/examples/v-lazy/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -47,17 +47,10 @@
       </v-lazy>
       <br>
     </v-responsive>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Composables
-  import { useGoTo } from 'vuetify'
-
-  // Utilities
-  import { computed, ref, shallowRef } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const goTo = useGoTo()
 
   const name = 'v-lazy'
diff --git a/packages/docs/src/examples/v-list/misc-card-list.vue b/packages/docs/src/examples/v-list/misc-card-list.vue
index 65383077389..21e2ee46d76 100644
--- a/packages/docs/src/examples/v-list/misc-card-list.vue
+++ b/packages/docs/src/examples/v-list/misc-card-list.vue
@@ -1,29 +1,29 @@
 <template>
   <v-card
-    max-width="375"
     class="mx-auto"
+    max-width="375"
   >
     <v-img
-      src="https://cdn.vuetifyjs.com/images/lists/ali.png"
       height="300px"
+      src="https://cdn.vuetifyjs.com/images/lists/ali.png"
       theme="dark"
       cover
     >
       <v-row class="fill-height">
         <v-card-title>
-          <v-btn variant="text" icon="mdi-chevron-left"></v-btn>
+          <v-btn icon="mdi-chevron-left" variant="text"></v-btn>
 
           <v-spacer></v-spacer>
 
           <v-btn
-            variant="text"
             class="me-4"
             icon="mdi-pencil"
+            variant="text"
           ></v-btn>
 
           <v-btn
-            variant="text"
             icon="mdi-dots-vertical"
+            variant="text"
           ></v-btn>
         </v-card-title>
 
diff --git a/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue b/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue
index aa1d1acadb0..0a1ba11056c 100644
--- a/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue
+++ b/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
-    max-width="500"
     class="mx-auto"
+    max-width="500"
   >
     <v-toolbar
       color="indigo"
diff --git a/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue b/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue
index e3f8403e6b8..76804bd8ec3 100644
--- a/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue
+++ b/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
-    max-width="475"
     class="mx-auto"
+    max-width="475"
   >
     <v-toolbar
       color="teal"
@@ -32,9 +32,9 @@
     <v-divider></v-divider>
 
     <v-list
-      subheader
       lines="two"
       flat
+      subheader
     >
       <v-list-subheader>Hangout notifications</v-list-subheader>
 
diff --git a/packages/docs/src/examples/v-list/prop-nav.vue b/packages/docs/src/examples/v-list/prop-nav.vue
index 79594bc9eb7..fe6edf0110e 100644
--- a/packages/docs/src/examples/v-list/prop-nav.vue
+++ b/packages/docs/src/examples/v-list/prop-nav.vue
@@ -4,18 +4,18 @@
     width="256"
   >
     <v-layout>
-      <v-navigation-drawer permanent absolute>
+      <v-navigation-drawer absolute permanent>
         <v-list>
           <v-list-item
             prepend-avatar="https://cdn.vuetifyjs.com/images/john.png"
-            title="John Leider"
             subtitle="john@google.com"
+            title="John Leider"
           >
             <template v-slot:append>
               <v-btn
+                icon="mdi-menu-down"
                 size="small"
                 variant="text"
-                icon="mdi-menu-down"
               ></v-btn>
             </template>
           </v-list-item>
diff --git a/packages/docs/src/examples/v-list/prop-sub-group.vue b/packages/docs/src/examples/v-list/prop-sub-group.vue
index 0d612a4222a..eae3648fe00 100644
--- a/packages/docs/src/examples/v-list/prop-sub-group.vue
+++ b/packages/docs/src/examples/v-list/prop-sub-group.vue
@@ -26,8 +26,8 @@
           <v-list-item
             v-for="([title, icon], i) in admins"
             :key="i"
-            :title="title"
             :prepend-icon="icon"
+            :title="title"
             :value="title"
           ></v-list-item>
         </v-list-group>
@@ -43,9 +43,9 @@
           <v-list-item
             v-for="([title, icon], i) in cruds"
             :key="i"
-            :value="title"
-            :title="title"
             :prepend-icon="icon"
+            :title="title"
+            :value="title"
           ></v-list-item>
         </v-list-group>
       </v-list-group>
diff --git a/packages/docs/src/examples/v-list/prop-three-line.vue b/packages/docs/src/examples/v-list/prop-three-line.vue
index c983de19033..3b34235ece1 100644
--- a/packages/docs/src/examples/v-list/prop-three-line.vue
+++ b/packages/docs/src/examples/v-list/prop-three-line.vue
@@ -4,19 +4,19 @@
     max-width="450"
   >
     <v-toolbar color="cyan-lighten-1">
-      <v-btn variant="text" icon="mdi-menu"></v-btn>
+      <v-btn icon="mdi-menu" variant="text"></v-btn>
 
       <v-toolbar-title>Inbox</v-toolbar-title>
 
       <v-spacer></v-spacer>
 
-      <v-btn variant="text" icon="mdi-magnify"></v-btn>
+      <v-btn icon="mdi-magnify" variant="text"></v-btn>
     </v-toolbar>
 
     <v-list
       :items="items"
-      item-props
       lines="three"
+      item-props
     >
       <template v-slot:subtitle="{ subtitle }">
         <div v-html="subtitle"></div>
diff --git a/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue b/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue
index 86ee5ce06c8..faaea2f90b7 100644
--- a/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue
+++ b/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue
@@ -4,15 +4,15 @@
     max-width="600"
   >
     <v-toolbar color="secondary">
-      <v-btn variant="text" icon="mdi-menu"></v-btn>
+      <v-btn icon="mdi-menu" variant="text"></v-btn>
 
       <v-toolbar-title>My files</v-toolbar-title>
 
       <v-spacer></v-spacer>
 
-      <v-btn variant="text" icon="mdi-magnify"></v-btn>
+      <v-btn icon="mdi-magnify" variant="text"></v-btn>
 
-      <v-btn variant="text" icon="mdi-view-module"></v-btn>
+      <v-btn icon="mdi-view-module" variant="text"></v-btn>
     </v-toolbar>
 
     <v-list lines="two">
@@ -21,8 +21,8 @@
       <v-list-item
         v-for="folder in folders"
         :key="folder.title"
-        :title="folder.title"
         :subtitle="folder.subtitle"
+        :title="folder.title"
       >
         <template v-slot:prepend>
           <v-avatar color="grey-lighten-1">
@@ -46,8 +46,8 @@
       <v-list-item
         v-for="file in files"
         :key="file.title"
-        :title="file.title"
         :subtitle="file.subtitle"
+        :title="file.title"
       >
         <template v-slot:prepend>
           <v-avatar :color="file.color">
diff --git a/packages/docs/src/examples/v-list/usage.vue b/packages/docs/src/examples/v-list/usage.vue
index 2083e487096..bd2b4436402 100644
--- a/packages/docs/src/examples/v-list/usage.vue
+++ b/packages/docs/src/examples/v-list/usage.vue
@@ -1,8 +1,8 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
-    :name="name"
     :code="code"
+    :name="name"
     :options="options"
   >
     <div>
@@ -10,9 +10,9 @@
         <v-list-item
           v-for="n in 3"
           :key="n"
+          :prepend-avatar="avatar ? 'https://randomuser.me/api/portraits/women/8.jpg' : undefined"
           :title="'Item ' + n"
           subtitle="Lorem ipsum dolor sit amet consectetur adipisicing elit"
-          :prepend-avatar="avatar ? 'https://randomuser.me/api/portraits/women/8.jpg' : undefined"
         ></v-list-item>
       </v-list>
     </div>
@@ -20,14 +20,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="avatar" label="Show avatars"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-list'
   const model = ref('default')
   const options = ['two-lines', 'three-lines']
diff --git a/packages/docs/src/examples/v-menu/misc-popover.vue b/packages/docs/src/examples/v-menu/misc-popover.vue
index b1d09c59627..e0ed3e146c3 100644
--- a/packages/docs/src/examples/v-menu/misc-popover.vue
+++ b/packages/docs/src/examples/v-menu/misc-popover.vue
@@ -18,14 +18,14 @@
         <v-list>
           <v-list-item
             prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
-            title="John Leider"
             subtitle="Founder of Vuetify"
+            title="John Leider"
           >
             <template v-slot:append>
               <v-btn
-                variant="text"
                 :class="fav ? 'text-red' : ''"
                 icon="mdi-heart"
+                variant="text"
                 @click="fav = !fav"
               ></v-btn>
             </template>
diff --git a/packages/docs/src/examples/v-menu/misc-use-in-components.vue b/packages/docs/src/examples/v-menu/misc-use-in-components.vue
index 4f424ed28d0..749b22906c0 100644
--- a/packages/docs/src/examples/v-menu/misc-use-in-components.vue
+++ b/packages/docs/src/examples/v-menu/misc-use-in-components.vue
@@ -2,8 +2,8 @@
   <v-row>
     <v-col
       cols="12"
-      sm="6"
       offset-sm="3"
+      sm="6"
     >
       <v-card height="200px">
         <v-card-title class="bg-blue">
diff --git a/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue b/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue
index 4741b707277..4986b271daf 100644
--- a/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue
+++ b/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue
@@ -7,8 +7,8 @@
       <v-card
         :ripple="false"
         class="portrait"
-        img="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
         height="300px"
+        img="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
         @contextmenu="show"
       ></v-card>
     </v-row>
diff --git a/packages/docs/src/examples/v-menu/prop-absolute.vue b/packages/docs/src/examples/v-menu/prop-absolute.vue
index c87a028d550..8bf4ba1124d 100644
--- a/packages/docs/src/examples/v-menu/prop-absolute.vue
+++ b/packages/docs/src/examples/v-menu/prop-absolute.vue
@@ -7,8 +7,8 @@
       <template v-slot:activator="{ props }">
         <v-card
           class="portrait"
-          image="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
           height="300"
+          image="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
           width="600"
           v-bind="props"
         ></v-card>
diff --git a/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue b/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue
index c3d652f9505..7dfbfd056fc 100644
--- a/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue
+++ b/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue
@@ -5,8 +5,8 @@
       label="Close on content click"
     ></v-switch>
     <v-menu
-      location="top"
       :close-on-content-click="closeOnContentClick"
+      location="top"
     >
       <template v-slot:activator="{ props }">
         <v-btn
diff --git a/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue b/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue
index 11411d69f68..7c6cfdc6930 100644
--- a/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue
@@ -3,12 +3,12 @@
     <v-layout>
       <v-navigation-drawer
         theme="dark"
-        rail
         permanent
+        rail
       >
         <v-list-item
-          nav
           prepend-avatar="https://randomuser.me/api/portraits/women/75.jpg"
+          nav
         ></v-list-item>
 
         <v-divider></v-divider>
diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
index ad13c3d1a46..38a2a43af7d 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
@@ -13,11 +13,11 @@
 
         <v-spacer></v-spacer>
 
-        <v-btn variant="text" icon="mdi-magnify"></v-btn>
+        <v-btn icon="mdi-magnify" variant="text"></v-btn>
 
-        <v-btn variant="text" icon="mdi-filter"></v-btn>
+        <v-btn icon="mdi-filter" variant="text"></v-btn>
 
-        <v-btn variant="text" icon="mdi-dots-vertical"></v-btn>
+        <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
       </v-app-bar>
 
       <v-navigation-drawer
diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue b/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue
index bb7693127fc..bf5fbecda8e 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue
@@ -8,8 +8,8 @@
         <v-list>
           <v-list-item
             prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg"
-            title="Sandra Adams"
             subtitle="sandra_a88@gmailcom"
+            title="Sandra Adams"
           ></v-list-item>
         </v-list>
 
diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-images.vue b/packages/docs/src/examples/v-navigation-drawer/prop-images.vue
index 6d9ce51b099..fcb947265d2 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-images.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-images.vue
@@ -3,8 +3,8 @@
     <v-layout>
       <v-navigation-drawer
         image="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
-        permanent
         theme="dark"
+        permanent
       >
         <v-list nav>
           <v-list-item prepend-icon="mdi-email" title="Inbox" value="inbox"></v-list-item>
diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue b/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue
index 77fa884388b..735c65d3972 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue
@@ -14,8 +14,8 @@
         >
           <template v-slot:append>
             <v-btn
-              variant="text"
               icon="mdi-chevron-left"
+              variant="text"
               @click.stop="rail = !rail"
             ></v-btn>
           </template>
diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-right.vue b/packages/docs/src/examples/v-navigation-drawer/prop-right.vue
index 1cb8a46c4dd..270ff7d8d0d 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-right.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-right.vue
@@ -2,15 +2,15 @@
   <v-card>
     <v-layout>
       <v-navigation-drawer
-        permanent
         location="right"
+        permanent
       >
         <template v-slot:prepend>
           <v-list-item
             lines="two"
             prepend-avatar="https://randomuser.me/api/portraits/women/81.jpg"
-            title="Jane Smith"
             subtitle="Logged in"
+            title="Jane Smith"
           ></v-list-item>
         </template>
 
diff --git a/packages/docs/src/examples/v-navigation-drawer/usage.vue b/packages/docs/src/examples/v-navigation-drawer/usage.vue
index b1360b4ec5a..c2204e66f7f 100644
--- a/packages/docs/src/examples/v-navigation-drawer/usage.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/usage.vue
@@ -1,34 +1,30 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-navigation-drawer
         permanent
         v-bind="props"
       >
-        <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
+        <v-list-item subtitle="Vuetify" title="My Application"></v-list-item>
         <v-divider></v-divider>
-        <v-list-item link title="List Item 1"></v-list-item>
-        <v-list-item link title="List Item 2"></v-list-item>
-        <v-list-item link title="List Item 3"></v-list-item>
+        <v-list-item title="List Item 1" link></v-list-item>
+        <v-list-item title="List Item 2" link></v-list-item>
+        <v-list-item title="List Item 3" link></v-list-item>
       </v-navigation-drawer>
     </div>
 
     <template v-slot:configuration>
-      <v-slider v-model="width" label="Width" min="100" max="400" step="1"></v-slider>
+      <v-slider v-model="width" label="Width" max="400" min="100" step="1"></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref, shallowRef } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-navigation-drawer'
   const model = ref('default')
   const width = shallowRef(256)
diff --git a/packages/docs/src/examples/v-otp-input/misc-divider.vue b/packages/docs/src/examples/v-otp-input/misc-divider.vue
index e65008880e5..81530b0244c 100644
--- a/packages/docs/src/examples/v-otp-input/misc-divider.vue
+++ b/packages/docs/src/examples/v-otp-input/misc-divider.vue
@@ -2,8 +2,8 @@
   <v-sheet
     class="py-8 px-6 mx-auto ma-4 text-center"
     elevation="4"
-    rounded="lg"
     max-width="500"
+    rounded="lg"
     width="100%"
   >
     <h3 class="text-h5">Verification Code</h3>
diff --git a/packages/docs/src/examples/v-otp-input/misc-mobile.vue b/packages/docs/src/examples/v-otp-input/misc-mobile.vue
index dafd3b8c8e4..2a072b7d995 100644
--- a/packages/docs/src/examples/v-otp-input/misc-mobile.vue
+++ b/packages/docs/src/examples/v-otp-input/misc-mobile.vue
@@ -1,9 +1,9 @@
 <template>
   <v-sheet
-    border
     class="pt-8 pb-12 px-6 ma-4 mx-auto"
     max-width="350"
     width="100%"
+    border
   >
     <h3 class="text-h6 mb-1">Mobile phone verification</h3>
 
@@ -14,8 +14,8 @@
     <v-otp-input
       v-model="otp"
       class="mt-3 ms-n2"
-      placeholder="0"
       length="4"
+      placeholder="0"
       variant="underlined"
     ></v-otp-input>
 
diff --git a/packages/docs/src/examples/v-otp-input/misc-verify.vue b/packages/docs/src/examples/v-otp-input/misc-verify.vue
index c50c2ec86a9..1837330c275 100644
--- a/packages/docs/src/examples/v-otp-input/misc-verify.vue
+++ b/packages/docs/src/examples/v-otp-input/misc-verify.vue
@@ -13,19 +13,19 @@
     <v-otp-input
       v-model="otp"
       :disabled="validating"
-      variant="plain"
       color="primary"
+      variant="plain"
     ></v-otp-input>
 
     <v-btn
       :loading="validating"
-      border
       class="mt-6 text-none bg-surface-variant"
-      rounded
-      variant="plain"
-      text="Validate"
       height="40"
+      text="Validate"
+      variant="plain"
       width="135"
+      border
+      rounded
       @click="onClick"
     ></v-btn>
   </v-card>
diff --git a/packages/docs/src/examples/v-otp-input/prop-focus-all.vue b/packages/docs/src/examples/v-otp-input/prop-focus-all.vue
index 85039ea8829..b123a2c0418 100644
--- a/packages/docs/src/examples/v-otp-input/prop-focus-all.vue
+++ b/packages/docs/src/examples/v-otp-input/prop-focus-all.vue
@@ -1,7 +1,7 @@
 <template>
   <v-otp-input
-    focused
     model-value="425"
     focus-all
+    focused
   ></v-otp-input>
 </template>
diff --git a/packages/docs/src/examples/v-otp-input/prop-length.vue b/packages/docs/src/examples/v-otp-input/prop-length.vue
index 938bff96b67..3d43a978668 100644
--- a/packages/docs/src/examples/v-otp-input/prop-length.vue
+++ b/packages/docs/src/examples/v-otp-input/prop-length.vue
@@ -1,6 +1,6 @@
 <template>
   <v-otp-input
-    model-value="3214214"
     length="7"
+    model-value="3214214"
   ></v-otp-input>
 </template>
diff --git a/packages/docs/src/examples/v-otp-input/usage.vue b/packages/docs/src/examples/v-otp-input/usage.vue
index aadaa4cc791..14f44b6aaa5 100644
--- a/packages/docs/src/examples/v-otp-input/usage.vue
+++ b/packages/docs/src/examples/v-otp-input/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -14,16 +14,12 @@
       <v-checkbox v-model="focus" label="Focus all"></v-checkbox>
       <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
       <v-checkbox v-model="loading" label="Loading"></v-checkbox>
-      <v-slider v-model="length" min="4" max="8" step="1" label="Length"></v-slider>
+      <v-slider v-model="length" label="Length" max="8" min="4" step="1"></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-stepper'
   const model = ref('default')
   const options = ['solo', 'solo-filled', 'underlined']
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-counter.vue b/packages/docs/src/examples/v-overflow-btn/prop-counter.vue
index abc010e5242..44bfb41a523 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-counter.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-counter.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-3">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownEdit"
+      class="my-2"
+      item-value="text"
       label="Overflow Btn w/ counter"
       counter
-      item-value="text"
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-dense.vue b/packages/docs/src/examples/v-overflow-btn/prop-dense.vue
index 9e5942f7d8d..cf65e2687a8 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-dense.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-dense.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container>
     <v-overflow-btn
-      class="my-2"
       :items="items"
+      class="my-2"
       label="Overflow Btn - Dense"
       dense
     ></v-overflow-btn>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue b/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue
index a8b37f18856..add4ea8e98a 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-1">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownFont"
+      class="my-2"
       label="Overflow Btn w/ disabled"
-      disabled
       target="#dropdown-example-1"
+      disabled
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-editable.vue b/packages/docs/src/examples/v-overflow-btn/prop-editable.vue
index cc1c645f200..1ec4b5904b2 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-editable.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-editable.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-3">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownEdit"
+      class="my-2"
+      item-value="text"
       label="Overflow Btn w/ editable"
       editable
-      item-value="text"
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-filled.vue b/packages/docs/src/examples/v-overflow-btn/prop-filled.vue
index 3b1bdc0ae2e..b3b4d266970 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-filled.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-filled.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-1">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownFont"
+      class="my-2"
       label="Overflow Btn - filled"
-      filled
       target="#dropdown-example-1"
+      filled
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-hint.vue b/packages/docs/src/examples/v-overflow-btn/prop-hint.vue
index 1aeb5084cd7..b51b751ef4e 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-hint.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-hint.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-1">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownFont"
-      menu-props="top"
-      label="Overflow Btn w/ hint"
+      class="my-2"
       hint="Select font"
+      label="Overflow Btn w/ hint"
+      menu-props="top"
       target="#dropdown-example-1"
     ></v-overflow-btn>
   </v-container>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-loading.vue b/packages/docs/src/examples/v-overflow-btn/prop-loading.vue
index cf19cefca22..edb6c2a7e13 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-loading.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-loading.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-1">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownFont"
+      class="my-2"
       label="Overflow Btn w/ loading"
-      loading
       target="#dropdown-example-1"
+      loading
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue b/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue
index 28222c1c834..119c0f692fa 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue
@@ -1,10 +1,10 @@
 <template>
   <v-container id="dropdown-example-1">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownFont"
-      menu-props="top"
+      class="my-2"
       label="Overflow Btn w/ menu-props"
+      menu-props="top"
       target="#dropdown-example-1"
     ></v-overflow-btn>
   </v-container>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue b/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue
index f3eda873c1f..7fd36d6b6a6 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-1">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownFont"
+      class="my-2"
       label="Overflow Btn w/ readonly"
-      readonly
       target="#dropdown-example-1"
+      readonly
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue b/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue
index 95dc747b0c7..66b9f6eb4b5 100644
--- a/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue
+++ b/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container id="dropdown-example-2">
     <v-overflow-btn
-      class="my-2"
       :items="dropdownIcon"
+      class="my-2"
       label="Overflow Btn w/ segmented"
-      segmented
       target="#dropdown-example-2"
+      segmented
     ></v-overflow-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-overflow-btn/usage.vue b/packages/docs/src/examples/v-overflow-btn/usage.vue
index 2078791996d..a0e40a5e14a 100644
--- a/packages/docs/src/examples/v-overflow-btn/usage.vue
+++ b/packages/docs/src/examples/v-overflow-btn/usage.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container id="dropdown-playground">
     <v-overflow-btn
-      hint="I'm a hint"
       :items="dropdownFont"
+      hint="I'm a hint"
       label="Overflow Btn"
       target="#dropdown-playground"
       v-bind="$attrs"
diff --git a/packages/docs/src/examples/v-overlay/connected-playground.vue b/packages/docs/src/examples/v-overlay/connected-playground.vue
index 048f708918f..05faedf681b 100644
--- a/packages/docs/src/examples/v-overlay/connected-playground.vue
+++ b/packages/docs/src/examples/v-overlay/connected-playground.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-row>
-      <v-col cols="12" class="d-flex flex-column align-center">
+      <v-col class="d-flex flex-column align-center" cols="12">
         <code>{{ code }}</code>
 
         <v-tooltip
@@ -19,41 +19,41 @@
 
       <v-col>
         <v-radio-group v-model="locationSide" label="Location side">
-          <v-radio value="top" label="top"></v-radio>
-          <v-radio value="end" label="end"></v-radio>
-          <v-radio value="bottom" label="bottom"></v-radio>
-          <v-radio value="start" label="start"></v-radio>
+          <v-radio label="top" value="top"></v-radio>
+          <v-radio label="end" value="end"></v-radio>
+          <v-radio label="bottom" value="bottom"></v-radio>
+          <v-radio label="start" value="start"></v-radio>
         </v-radio-group>
       </v-col>
 
       <v-col>
         <v-radio-group v-model="locationAlign" label="Location alignment">
-          <v-radio value="top" label="top" :disabled="locationSide === 'top' || locationSide === 'bottom'"></v-radio>
-          <v-radio value="start" label="start" :disabled="!(locationSide === 'top' || locationSide === 'bottom')"></v-radio>
-          <v-radio value="center" label="center"></v-radio>
-          <v-radio value="end" label="end" :disabled="!(locationSide === 'top' || locationSide === 'bottom')"></v-radio>
-          <v-radio value="bottom" label="bottom" :disabled="locationSide === 'top' || locationSide === 'bottom'"></v-radio>
+          <v-radio :disabled="locationSide === 'top' || locationSide === 'bottom'" label="top" value="top"></v-radio>
+          <v-radio :disabled="!(locationSide === 'top' || locationSide === 'bottom')" label="start" value="start"></v-radio>
+          <v-radio label="center" value="center"></v-radio>
+          <v-radio :disabled="!(locationSide === 'top' || locationSide === 'bottom')" label="end" value="end"></v-radio>
+          <v-radio :disabled="locationSide === 'top' || locationSide === 'bottom'" label="bottom" value="bottom"></v-radio>
         </v-radio-group>
       </v-col>
 
       <v-col>
         <v-radio-group v-model="originSide" label="Origin side">
-          <v-radio value="auto" label="auto"></v-radio>
-          <v-radio value="overlap" label="overlap"></v-radio>
-          <v-radio value="top" label="top"></v-radio>
-          <v-radio value="end" label="end"></v-radio>
-          <v-radio value="bottom" label="bottom"></v-radio>
-          <v-radio value="start" label="start"></v-radio>
+          <v-radio label="auto" value="auto"></v-radio>
+          <v-radio label="overlap" value="overlap"></v-radio>
+          <v-radio label="top" value="top"></v-radio>
+          <v-radio label="end" value="end"></v-radio>
+          <v-radio label="bottom" value="bottom"></v-radio>
+          <v-radio label="start" value="start"></v-radio>
         </v-radio-group>
       </v-col>
 
       <v-col>
         <v-radio-group v-model="originAlign" label="Origin alignment">
-          <v-radio value="top" label="top" :disabled="originDisabled || originSide === 'top' || originSide === 'bottom'"></v-radio>
-          <v-radio value="start" label="start" :disabled="originDisabled || !(originSide === 'top' || originSide === 'bottom')"></v-radio>
-          <v-radio value="center" label="center" :disabled="originDisabled"></v-radio>
-          <v-radio value="end" label="end" :disabled="originDisabled || !(originSide === 'top' || originSide === 'bottom')"></v-radio>
-          <v-radio value="bottom" label="bottom" :disabled="originDisabled || originSide === 'top' || originSide === 'bottom'"></v-radio>
+          <v-radio :disabled="originDisabled || originSide === 'top' || originSide === 'bottom'" label="top" value="top"></v-radio>
+          <v-radio :disabled="originDisabled || !(originSide === 'top' || originSide === 'bottom')" label="start" value="start"></v-radio>
+          <v-radio :disabled="originDisabled" label="center" value="center"></v-radio>
+          <v-radio :disabled="originDisabled || !(originSide === 'top' || originSide === 'bottom')" label="end" value="end"></v-radio>
+          <v-radio :disabled="originDisabled || originSide === 'top' || originSide === 'bottom'" label="bottom" value="bottom"></v-radio>
         </v-radio-group>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-overlay/misc-advanced.vue b/packages/docs/src/examples/v-overlay/misc-advanced.vue
index 43d9afdc60e..0885b31ba74 100644
--- a/packages/docs/src/examples/v-overlay/misc-advanced.vue
+++ b/packages/docs/src/examples/v-overlay/misc-advanced.vue
@@ -18,20 +18,20 @@
         <v-card-title>
           <v-rating
             :model-value="4"
-            dense
-            color="orange"
             background-color="orange"
-            hover
             class="me-2"
+            color="orange"
+            dense
+            hover
           ></v-rating>
           <span class="text-primary text-subtitle-2">64 Reviews</span>
         </v-card-title>
 
         <v-overlay
           :model-value="isHovering"
-          contained
-          scrim="#036358"
           class="align-center justify-center"
+          scrim="#036358"
+          contained
         >
           <v-btn variant="flat">See more info</v-btn>
         </v-overlay>
diff --git a/packages/docs/src/examples/v-overlay/misc-loader.vue b/packages/docs/src/examples/v-overlay/misc-loader.vue
index 70fa72446ea..ccd950e11ab 100644
--- a/packages/docs/src/examples/v-overlay/misc-loader.vue
+++ b/packages/docs/src/examples/v-overlay/misc-loader.vue
@@ -14,8 +14,8 @@
     >
       <v-progress-circular
         color="primary"
-        indeterminate
         size="64"
+        indeterminate
       ></v-progress-circular>
     </v-overlay>
   </div>
diff --git a/packages/docs/src/examples/v-overlay/prop-contained.vue b/packages/docs/src/examples/v-overlay/prop-contained.vue
index 608ca2e79bc..03a82671238 100644
--- a/packages/docs/src/examples/v-overlay/prop-contained.vue
+++ b/packages/docs/src/examples/v-overlay/prop-contained.vue
@@ -10,8 +10,8 @@
     >
       <v-row justify="center">
         <v-btn
-          color="success"
           class="mt-12"
+          color="success"
           @click="overlay = !overlay"
         >
           Show Overlay
@@ -19,8 +19,8 @@
 
         <v-overlay
           v-model="overlay"
-          contained
           class="align-center justify-center"
+          contained
         >
           <v-btn
             color="success"
diff --git a/packages/docs/src/examples/v-pagination/prop-icons.vue b/packages/docs/src/examples/v-pagination/prop-icons.vue
index d90da031ddf..5eb80183356 100644
--- a/packages/docs/src/examples/v-pagination/prop-icons.vue
+++ b/packages/docs/src/examples/v-pagination/prop-icons.vue
@@ -3,8 +3,8 @@
     <v-pagination
       v-model="page"
       :length="4"
-      prev-icon="mdi-menu-left"
       next-icon="mdi-menu-right"
+      prev-icon="mdi-menu-left"
     ></v-pagination>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-pagination/prop-length.vue b/packages/docs/src/examples/v-pagination/prop-length.vue
index 123297a1c3c..a57f427cfb0 100644
--- a/packages/docs/src/examples/v-pagination/prop-length.vue
+++ b/packages/docs/src/examples/v-pagination/prop-length.vue
@@ -6,8 +6,8 @@
           <v-container class="max-width">
             <v-pagination
               v-model="page"
-              class="my-4"
               :length="15"
+              class="my-4"
             ></v-pagination>
           </v-container>
         </v-col>
diff --git a/packages/docs/src/examples/v-pagination/usage.vue b/packages/docs/src/examples/v-pagination/usage.vue
index 24889a9c7bf..1f5bdc8b8ca 100644
--- a/packages/docs/src/examples/v-pagination/usage.vue
+++ b/packages/docs/src/examples/v-pagination/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -12,16 +12,12 @@
     </div>
 
     <template v-slot:configuration>
-      <v-slider v-model="length" label="Length" min="1" max="20"></v-slider>
+      <v-slider v-model="length" label="Length" max="20" min="1"></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-pagination'
   const model = ref('default')
   const length = ref(4)
diff --git a/packages/docs/src/examples/v-progress-circular/prop-color.vue b/packages/docs/src/examples/v-progress-circular/prop-color.vue
index 8c63bec0090..db226f9c768 100644
--- a/packages/docs/src/examples/v-progress-circular/prop-color.vue
+++ b/packages/docs/src/examples/v-progress-circular/prop-color.vue
@@ -1,28 +1,28 @@
 <template>
   <div class="text-center">
     <v-progress-circular
-      model-value="100"
       color="blue-grey"
+      model-value="100"
     ></v-progress-circular>
 
     <v-progress-circular
-      model-value="80"
       color="deep-orange-lighten-2"
+      model-value="80"
     ></v-progress-circular>
 
     <v-progress-circular
-      model-value="60"
       color="brown"
+      model-value="60"
     ></v-progress-circular>
 
     <v-progress-circular
-      model-value="40"
       color="lime"
+      model-value="40"
     ></v-progress-circular>
 
     <v-progress-circular
-      model-value="20"
       color="indigo-darken-2"
+      model-value="20"
     ></v-progress-circular>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue b/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue
index b7b8d22e2f3..61677865034 100644
--- a/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue
+++ b/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue
@@ -1,28 +1,28 @@
 <template>
   <div class="text-center">
     <v-progress-circular
-      indeterminate
       color="primary"
+      indeterminate
     ></v-progress-circular>
 
     <v-progress-circular
-      indeterminate
       color="red"
+      indeterminate
     ></v-progress-circular>
 
     <v-progress-circular
-      indeterminate
       color="purple"
+      indeterminate
     ></v-progress-circular>
 
     <v-progress-circular
-      indeterminate
       color="green"
+      indeterminate
     ></v-progress-circular>
 
     <v-progress-circular
-      indeterminate
       color="amber"
+      indeterminate
     ></v-progress-circular>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-circular/prop-rotate.vue b/packages/docs/src/examples/v-progress-circular/prop-rotate.vue
index 771978fdb4d..102bd4f143f 100644
--- a/packages/docs/src/examples/v-progress-circular/prop-rotate.vue
+++ b/packages/docs/src/examples/v-progress-circular/prop-rotate.vue
@@ -1,40 +1,40 @@
 <template>
   <div class="text-center">
     <v-progress-circular
+      :model-value="value"
       :rotate="360"
       :size="100"
       :width="15"
-      :model-value="value"
       color="teal"
     >
       {{ value }}
     </v-progress-circular>
 
     <v-progress-circular
+      :model-value="value"
       :rotate="-90"
       :size="100"
       :width="15"
-      :model-value="value"
       color="primary"
     >
       {{ value }}
     </v-progress-circular>
 
     <v-progress-circular
+      :model-value="value"
       :rotate="90"
       :size="100"
       :width="15"
-      :model-value="value"
       color="red"
     >
       {{ value }}
     </v-progress-circular>
 
     <v-progress-circular
+      :model-value="value"
       :rotate="180"
       :size="100"
       :width="15"
-      :model-value="value"
       color="pink"
     >
       {{ value }}
diff --git a/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue b/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue
index 3882187adc6..e52bb8ced3f 100644
--- a/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue
+++ b/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-center">
-    <v-progress-circular :rotate="360" :size="100" :width="15" :model-value="value" color="teal">
+    <v-progress-circular :model-value="value" :rotate="360" :size="100" :width="15" color="teal">
       <template v-slot:default> {{ value }} % </template>
     </v-progress-circular>
   </div>
diff --git a/packages/docs/src/examples/v-progress-circular/usage.vue b/packages/docs/src/examples/v-progress-circular/usage.vue
index 10fb250dc99..b466ee0a608 100644
--- a/packages/docs/src/examples/v-progress-circular/usage.vue
+++ b/packages/docs/src/examples/v-progress-circular/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="text-center">
       <v-progress-circular v-bind="props"></v-progress-circular>
@@ -20,29 +20,25 @@
       <v-slider
         v-model="size"
         label="Size"
-        step="1"
-        min="32"
         max="128"
+        min="32"
+        step="1"
       ></v-slider>
 
       <v-slider
         v-model="width"
         label="Width"
-        step="1"
-        min="4"
         max="12"
+        min="4"
+        step="1"
       ></v-slider>
 
       <v-checkbox v-model="indeterminate" label="Indeterminate"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-progress-circular'
   const model = ref('default')
   const color = ref()
diff --git a/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue b/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue
index 1a9dc1f5aaa..2cbf82db138 100644
--- a/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue
+++ b/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue
@@ -12,9 +12,9 @@
       <v-toolbar-title>My Files</v-toolbar-title>
 
       <v-btn
-        absolute
-        location="bottom left"
         color="white"
+        location="bottom left"
+        absolute
         fab
       >
         <v-icon>mdi-plus</v-icon>
@@ -37,8 +37,8 @@
 
     <v-container style="height: 400px;">
       <v-row
-        class="fill-height"
         align-content="center"
+        class="fill-height"
         justify="center"
       >
         <v-col
@@ -50,9 +50,9 @@
         <v-col cols="6">
           <v-progress-linear
             color="deep-purple-accent-4"
+            height="6"
             indeterminate
             rounded
-            height="6"
           ></v-progress-linear>
         </v-col>
       </v-row>
diff --git a/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue b/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue
index 4669e5f0dba..afa935714ff 100644
--- a/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue
+++ b/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue
@@ -13,9 +13,9 @@
       <v-progress-linear
         :active="loading"
         :indeterminate="loading"
+        color="deep-purple-accent-4"
         absolute
         bottom
-        color="deep-purple-accent-4"
       ></v-progress-linear>
 
       <v-spacer></v-spacer>
@@ -31,8 +31,8 @@
 
     <v-container style="height: 282px;">
       <v-row
-        class="fill-height"
         align="center"
+        class="fill-height"
         justify="center"
       >
         <v-scale-transition>
diff --git a/packages/docs/src/examples/v-progress-linear/prop-colors.vue b/packages/docs/src/examples/v-progress-linear/prop-colors.vue
index 513696f0645..ac06101afec 100644
--- a/packages/docs/src/examples/v-progress-linear/prop-colors.vue
+++ b/packages/docs/src/examples/v-progress-linear/prop-colors.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
     <v-progress-linear
-      model-value="15"
       bg-color="pink-lighten-3"
       color="pink-lighten-1"
+      model-value="15"
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="30"
       bg-color="blue-grey"
       color="lime"
+      model-value="30"
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="45"
       bg-color="success"
       color="error"
+      model-value="45"
     ></v-progress-linear>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue b/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue
index 2fe9149bc3f..787c9679efd 100644
--- a/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue
+++ b/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue
@@ -1,23 +1,23 @@
 <template>
   <div>
     <v-progress-linear
-      indeterminate
       color="yellow-darken-2"
+      indeterminate
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      indeterminate
       color="green"
+      indeterminate
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      indeterminate
       color="teal"
+      indeterminate
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      indeterminate
       color="cyan"
+      indeterminate
     ></v-progress-linear>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-linear/prop-reverse.vue b/packages/docs/src/examples/v-progress-linear/prop-reverse.vue
index 39e5b7302c1..9cf1757aa4c 100644
--- a/packages/docs/src/examples/v-progress-linear/prop-reverse.vue
+++ b/packages/docs/src/examples/v-progress-linear/prop-reverse.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <v-progress-linear
-      model-value="15"
       color="pink"
+      model-value="15"
       reverse
     ></v-progress-linear>
 
@@ -17,9 +17,9 @@
     <br>
 
     <v-progress-linear
-      model-value="30"
       buffer-value="55"
       color="success"
+      model-value="30"
       reverse
       streams
     ></v-progress-linear>
@@ -29,8 +29,8 @@
     <p>In specific cases you may want progress to display in left-to-right mode regardless of the application direction (LTR or RTL):</p>
 
     <v-progress-linear
-      model-value="15"
       :reverse="$vuetify.locale.isRtl"
+      model-value="15"
     ></v-progress-linear>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-linear/prop-rounded.vue b/packages/docs/src/examples/v-progress-linear/prop-rounded.vue
index ebf57579395..6f0184d2287 100644
--- a/packages/docs/src/examples/v-progress-linear/prop-rounded.vue
+++ b/packages/docs/src/examples/v-progress-linear/prop-rounded.vue
@@ -1,26 +1,26 @@
 <template>
   <div>
     <v-progress-linear
-      model-value="100"
       color="red-darken-2"
+      model-value="100"
       rounded
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="100"
       color="indigo"
+      model-value="100"
       rounded
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="100"
       color="teal"
+      model-value="100"
       rounded
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="100"
       color="cyan-darken-2"
+      model-value="100"
       rounded
     ></v-progress-linear>
   </div>
diff --git a/packages/docs/src/examples/v-progress-linear/prop-stream.vue b/packages/docs/src/examples/v-progress-linear/prop-stream.vue
index fb9231a846c..4c2815f48eb 100644
--- a/packages/docs/src/examples/v-progress-linear/prop-stream.vue
+++ b/packages/docs/src/examples/v-progress-linear/prop-stream.vue
@@ -1,29 +1,29 @@
 <template>
   <div>
     <v-progress-linear
-      color="red-lighten-2"
       buffer-value="0"
+      color="red-lighten-2"
       stream
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="20"
-      color="teal"
       buffer-value="0"
+      color="teal"
+      model-value="20"
       stream
     ></v-progress-linear>
     <br>
     <v-progress-linear
       buffer-value="50"
-      stream
       color="cyan"
+      stream
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="40"
       buffer-value="60"
-      stream
       color="orange"
+      model-value="40"
+      stream
     ></v-progress-linear>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-linear/prop-striped.vue b/packages/docs/src/examples/v-progress-linear/prop-striped.vue
index 7c07c8affcc..8af9730c4dc 100644
--- a/packages/docs/src/examples/v-progress-linear/prop-striped.vue
+++ b/packages/docs/src/examples/v-progress-linear/prop-striped.vue
@@ -1,31 +1,31 @@
 <template>
   <div>
     <v-progress-linear
-      model-value="10"
       color="light-blue"
       height="10"
+      model-value="10"
       striped
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="20"
       color="light-green-darken-4"
       height="10"
+      model-value="20"
       striped
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="45"
+      color="lime"
       height="10"
+      model-value="45"
       striped
-      color="lime"
     ></v-progress-linear>
     <br>
     <v-progress-linear
-      model-value="60"
+      color="deep-orange"
       height="10"
+      model-value="60"
       striped
-      color="deep-orange"
     ></v-progress-linear>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-progress-linear/usage.vue b/packages/docs/src/examples/v-progress-linear/usage.vue
index 77b419e18a3..9b374fcc9ea 100644
--- a/packages/docs/src/examples/v-progress-linear/usage.vue
+++ b/packages/docs/src/examples/v-progress-linear/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-progress-linear v-bind="props"></v-progress-linear>
@@ -20,21 +20,17 @@
       <v-slider
         v-model="height"
         label="Height"
-        step="1"
-        min="4"
         max="12"
+        min="4"
+        step="1"
       ></v-slider>
 
       <v-checkbox v-model="indeterminate" label="Indeterminate"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-progress-linear'
   const model = ref('default')
   const color = ref()
diff --git a/packages/docs/src/examples/v-radio-group/prop-colors.vue b/packages/docs/src/examples/v-radio-group/prop-colors.vue
index aa5c39ac0e7..a3c96edb620 100644
--- a/packages/docs/src/examples/v-radio-group/prop-colors.vue
+++ b/packages/docs/src/examples/v-radio-group/prop-colors.vue
@@ -5,82 +5,82 @@
         <v-row>
           <v-col
             cols="12"
-            sm="6"
             md="6"
+            sm="6"
           >
             <v-radio-group
               v-model="ex7"
               column
             >
               <v-radio
-                label="red"
                 color="red"
+                label="red"
                 value="red"
               ></v-radio>
               <v-radio
-                label="red-darken-3"
                 color="red-darken-3"
+                label="red-darken-3"
                 value="red-darken-3"
               ></v-radio>
               <v-radio
-                label="indigo"
                 color="indigo"
+                label="indigo"
                 value="indigo"
               ></v-radio>
               <v-radio
-                label="indigo-darken-3"
                 color="indigo-darken-3"
+                label="indigo-darken-3"
                 value="indigo-darken-3"
               ></v-radio>
               <v-radio
-                label="orange"
                 color="orange"
+                label="orange"
                 value="orange"
               ></v-radio>
               <v-radio
-                label="orange-darken-3"
                 color="orange-darken-3"
+                label="orange-darken-3"
                 value="orange-darken-3"
               ></v-radio>
             </v-radio-group>
           </v-col>
           <v-col
             cols="12"
-            sm="6"
             md="6"
+            sm="6"
           >
             <v-radio-group
               v-model="ex8"
               column
             >
               <v-radio
-                label="primary"
                 color="primary"
+                label="primary"
                 value="primary"
               ></v-radio>
               <v-radio
-                label="secondary"
                 color="secondary"
+                label="secondary"
                 value="secondary"
               ></v-radio>
               <v-radio
-                label="success"
                 color="success"
+                label="success"
                 value="success"
               ></v-radio>
               <v-radio
-                label="info"
                 color="info"
+                label="info"
                 value="info"
               ></v-radio>
               <v-radio
-                label="warning"
                 color="warning"
+                label="warning"
                 value="warning"
               ></v-radio>
               <v-radio
-                label="error"
                 color="error"
+                label="error"
                 value="error"
               ></v-radio>
             </v-radio-group>
diff --git a/packages/docs/src/examples/v-radio-group/prop-model-group.vue b/packages/docs/src/examples/v-radio-group/prop-model-group.vue
index 1dfb225ccee..0374329198f 100644
--- a/packages/docs/src/examples/v-radio-group/prop-model-group.vue
+++ b/packages/docs/src/examples/v-radio-group/prop-model-group.vue
@@ -4,7 +4,7 @@
     <v-radio-group v-model="radios">
       <v-radio label="Option One" value="one"></v-radio>
       <v-radio label="Option 2 (string)" value="2"></v-radio>
-      <v-radio label="Option 3 (integer)" :value="3"></v-radio>
+      <v-radio :value="3" label="Option 3 (integer)"></v-radio>
     </v-radio-group>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-radio-group/prop-model-radio.vue b/packages/docs/src/examples/v-radio-group/prop-model-radio.vue
index 5ba7d656c4e..d81bd2d2e8b 100644
--- a/packages/docs/src/examples/v-radio-group/prop-model-radio.vue
+++ b/packages/docs/src/examples/v-radio-group/prop-model-radio.vue
@@ -9,15 +9,15 @@
       v-model="radio"
       false-value="Option 2"
       label="Option 1"
-      readonly
       true-value="Option 1"
+      readonly
     ></v-radio>
     <v-radio
       v-model="radio"
       false-value="Option 1"
       label="Option 2"
-      readonly
       true-value="Option 2"
+      readonly
     ></v-radio>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-radio-group/usage.vue b/packages/docs/src/examples/v-radio-group/usage.vue
index 2ea2bf46442..f1de24dde51 100644
--- a/packages/docs/src/examples/v-radio-group/usage.vue
+++ b/packages/docs/src/examples/v-radio-group/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-radio-group v-bind="props" hide-details>
@@ -16,14 +16,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="label" label="Radio group label"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-radio-group'
   const model = ref('default')
   const options = ['inline']
diff --git a/packages/docs/src/examples/v-range-slider/prop-disabled.vue b/packages/docs/src/examples/v-range-slider/prop-disabled.vue
index 4846bf66440..0bb219c6ade 100644
--- a/packages/docs/src/examples/v-range-slider/prop-disabled.vue
+++ b/packages/docs/src/examples/v-range-slider/prop-disabled.vue
@@ -4,8 +4,8 @@
       <v-col cols="12">
         <v-range-slider
           v-model="value"
-          disabled
           label="Disabled"
+          disabled
         ></v-range-slider>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue b/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue
index ef30e8b177f..7fdbc3ab527 100644
--- a/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue
+++ b/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue
@@ -4,29 +4,29 @@
     :max="10"
     :min="-10"
     :step="1"
-    hide-details
     class="align-center"
+    hide-details
   >
     <template v-slot:prepend>
       <v-text-field
         v-model="range[0]"
-        hide-details
-        single-line
-        type="number"
-        variant="outlined"
         density="compact"
         style="width: 70px"
+        type="number"
+        variant="outlined"
+        hide-details
+        single-line
       ></v-text-field>
     </template>
     <template v-slot:append>
       <v-text-field
         v-model="range[1]"
-        hide-details
-        single-line
+        density="compact"
+        style="width: 70px"
         type="number"
         variant="outlined"
-        style="width: 70px"
-        density="compact"
+        hide-details
+        single-line
       ></v-text-field>
     </template>
   </v-range-slider>
diff --git a/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue b/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue
index 6cf1bcd0e1e..0be294265a2 100644
--- a/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue
+++ b/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue
@@ -2,17 +2,17 @@
   <v-row>
     <v-col class="pa-12">
       <v-range-slider
-        :ticks="seasons"
         :model-value="[0, 1]"
-        min="0"
-        max="3"
         :step="1"
+        :ticks="seasons"
+        max="3"
+        min="0"
         show-ticks="always"
         thumb-label="always"
         tick-size="4"
       >
         <template v-slot:thumb-label="{ modelValue }">
-          <v-icon theme="dark" :icon="season(modelValue)"></v-icon>
+          <v-icon :icon="season(modelValue)" theme="dark"></v-icon>
         </template>
       </v-range-slider>
     </v-col>
diff --git a/packages/docs/src/examples/v-range-slider/usage.vue b/packages/docs/src/examples/v-range-slider/usage.vue
index 888894ab152..e32aabeeea5 100644
--- a/packages/docs/src/examples/v-range-slider/usage.vue
+++ b/packages/docs/src/examples/v-range-slider/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-range-slider v-bind="props"></v-range-slider>
@@ -12,14 +12,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-range-slider'
   const model = ref('default')
   const options = ['vertical']
diff --git a/packages/docs/src/examples/v-rating/misc-advanced.vue b/packages/docs/src/examples/v-rating/misc-advanced.vue
index ca4afb8be60..03373da99b3 100644
--- a/packages/docs/src/examples/v-rating/misc-advanced.vue
+++ b/packages/docs/src/examples/v-rating/misc-advanced.vue
@@ -102,8 +102,8 @@
             ref="link"
             :label="copied ? 'Link copied' : 'Click to copy link'"
             class="pa-4"
-            readonly
             model-value="https://g.co/kgs/nkrK43"
+            readonly
             @click="copy"
           ></v-text-field>
         </v-card>
@@ -124,9 +124,9 @@
       >
         <template v-slot:item="props">
           <v-icon
-            size="large"
             :color="props.isFilled ? 'purple-darken-4' : ''"
             :icon="`mdi-numeric-${props.index}-box`"
+            size="large"
           ></v-icon>
         </template>
       </v-rating>
diff --git a/packages/docs/src/examples/v-rating/misc-card-overview.vue b/packages/docs/src/examples/v-rating/misc-card-overview.vue
index 584a61e0d87..2951c20712f 100644
--- a/packages/docs/src/examples/v-rating/misc-card-overview.vue
+++ b/packages/docs/src/examples/v-rating/misc-card-overview.vue
@@ -39,7 +39,7 @@
 
         <template v-slot:prepend>
           <span>{{ rating }}</span>
-          <v-icon icon="mdi-star" class="mx-3"></v-icon>
+          <v-icon class="mx-3" icon="mdi-star"></v-icon>
         </template>
 
         <template v-slot:append>
diff --git a/packages/docs/src/examples/v-rating/misc-card.vue b/packages/docs/src/examples/v-rating/misc-card.vue
index 9417b301ddc..4b302ed5a63 100644
--- a/packages/docs/src/examples/v-rating/misc-card.vue
+++ b/packages/docs/src/examples/v-rating/misc-card.vue
@@ -16,11 +16,11 @@
       </v-card-title>
 
       <v-img
-        contain
+        class="flex-grow-0"
         height="125px"
         src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
         style="flex-basis: 125px"
-        class="flex-grow-0"
+        contain
       ></v-img>
     </div>
 
@@ -37,11 +37,11 @@
 
       <v-rating
         v-model="rating"
-        color="white"
         active-color="yellow-accent-4"
+        color="white"
+        size="18"
         half-increments
         hover
-        size="18"
       ></v-rating>
     </v-card-actions>
   </v-card>
diff --git a/packages/docs/src/examples/v-rating/prop-color.vue b/packages/docs/src/examples/v-rating/prop-color.vue
index 665254815fc..ee6d87b31dd 100644
--- a/packages/docs/src/examples/v-rating/prop-color.vue
+++ b/packages/docs/src/examples/v-rating/prop-color.vue
@@ -2,8 +2,8 @@
   <div class="text-center">
     <v-rating
       v-model="rating"
-      color="orange-lighten-1"
       active-color="blue"
+      color="orange-lighten-1"
     ></v-rating>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-rating/prop-half-increments.vue b/packages/docs/src/examples/v-rating/prop-half-increments.vue
index ed76388c3ce..f2b6e32bb14 100644
--- a/packages/docs/src/examples/v-rating/prop-half-increments.vue
+++ b/packages/docs/src/examples/v-rating/prop-half-increments.vue
@@ -2,8 +2,8 @@
   <div class="text-center">
     <v-rating
       v-model="rating"
-      hover
       half-increments
+      hover
     ></v-rating>
     <pre>{{ rating }}</pre>
   </div>
diff --git a/packages/docs/src/examples/v-rating/prop-item-labels.vue b/packages/docs/src/examples/v-rating/prop-item-labels.vue
index 0d35a66991e..3e42bcb2169 100644
--- a/packages/docs/src/examples/v-rating/prop-item-labels.vue
+++ b/packages/docs/src/examples/v-rating/prop-item-labels.vue
@@ -2,15 +2,15 @@
   <div class="d-flex align-center justify-center flex-column">
     <v-rating
       v-model="rating"
-      class="ma-2"
       :item-labels="['sad', '', '', '', 'happy']"
+      class="ma-2"
       item-label-position="top"
     ></v-rating>
 
     <v-rating
       v-model="rating"
-      class="ma-2"
       :item-labels="['sad', '', '', '', 'happy']"
+      class="ma-2"
       item-label-position="bottom"
     ></v-rating>
   </div>
diff --git a/packages/docs/src/examples/v-rating/slot-item-label.vue b/packages/docs/src/examples/v-rating/slot-item-label.vue
index 5070bcd65be..26cb072463b 100644
--- a/packages/docs/src/examples/v-rating/slot-item-label.vue
+++ b/packages/docs/src/examples/v-rating/slot-item-label.vue
@@ -6,8 +6,8 @@
     >
       <template v-slot:item-label="props">
         <span
-          class="font-weight-black text-caption"
           :class="`text-${colors[props.index]}`"
+          class="font-weight-black text-caption"
         >
           {{ props.label }}
         </span>
diff --git a/packages/docs/src/examples/v-rating/usage.vue b/packages/docs/src/examples/v-rating/usage.vue
index 0d4af8368dd..00165ce7fa8 100644
--- a/packages/docs/src/examples/v-rating/usage.vue
+++ b/packages/docs/src/examples/v-rating/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="selectedOption"
     :code="code"
     :name="name"
@@ -16,23 +16,19 @@
 
       <br>
 
-      <v-slider v-model="options.length" :min="1" :max="8" label="Length"></v-slider>
-      <v-slider v-model="options.size" :min="16" :max="128" label="Size"></v-slider>
-      <v-slider v-model="options['model-value']" :min="0" :max="options.length" :step="options['half-increments'] ? 0.5 : 1" label="Value"></v-slider>
+      <v-slider v-model="options.length" :max="8" :min="1" label="Length"></v-slider>
+      <v-slider v-model="options.size" :max="128" :min="16" label="Size"></v-slider>
+      <v-slider v-model="options['model-value']" :max="options.length" :min="0" :step="options['half-increments'] ? 0.5 : 1" label="Value"></v-slider>
 
       <br>
 
       <v-select v-model="options.color" :items="colorOptions" label="Color"></v-select>
       <v-select v-model="options['active-color']" :items="colorOptions" label="Active color"></v-select>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, reactive, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const selectedOption = ref()
 
   const options = reactive({
diff --git a/packages/docs/src/examples/v-resize/usage.vue b/packages/docs/src/examples/v-resize/usage.vue
index 0603560aee9..7bffcb1436c 100644
--- a/packages/docs/src/examples/v-resize/usage.vue
+++ b/packages/docs/src/examples/v-resize/usage.vue
@@ -1,8 +1,8 @@
 <template>
   <v-row
-    v-resize="onResize"
     align="center"
     justify="center"
+    v-resize="onResize"
   >
     <v-col class="text-center">
       <div class="text-subtitle-2">Window Size</div>
diff --git a/packages/docs/src/examples/v-responsive/usage.vue b/packages/docs/src/examples/v-responsive/usage.vue
index a8ad6ac5ba1..c377ad3ba58 100644
--- a/packages/docs/src/examples/v-responsive/usage.vue
+++ b/packages/docs/src/examples/v-responsive/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-responsive
@@ -17,14 +17,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="contentClass" label="Content class"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-responsive'
   const model = ref('default')
   const options = ['16 / 9', '4 / 3']
diff --git a/packages/docs/src/examples/v-ripple/option-center.vue b/packages/docs/src/examples/v-ripple/option-center.vue
index eb5437ff3ec..bc00f14b633 100644
--- a/packages/docs/src/examples/v-ripple/option-center.vue
+++ b/packages/docs/src/examples/v-ripple/option-center.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    v-ripple.center
     class="text-center elevation-2 pa-12 text-h5"
+    v-ripple.center
   >
     HTML element with centered ripple
   </div>
diff --git a/packages/docs/src/examples/v-ripple/usage.vue b/packages/docs/src/examples/v-ripple/usage.vue
index 86be7762c10..fd34042dcaa 100644
--- a/packages/docs/src/examples/v-ripple/usage.vue
+++ b/packages/docs/src/examples/v-ripple/usage.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    v-ripple
     class="text-center elevation-2 pa-12 text-h5"
+    v-ripple
   >
     HTML element with v-ripple
   </div>
diff --git a/packages/docs/src/examples/v-scroll/option-self.vue b/packages/docs/src/examples/v-scroll/option-self.vue
index 2f91cbde4d3..bc19d1cc130 100644
--- a/packages/docs/src/examples/v-scroll/option-self.vue
+++ b/packages/docs/src/examples/v-scroll/option-self.vue
@@ -1,8 +1,8 @@
 <template>
   <v-card
-    v-scroll.self="onScroll"
     class="overflow-y-auto"
     max-height="400"
+    v-scroll.self="onScroll"
   >
     <v-banner
       class="justify-center text-h5 font-weight-light"
diff --git a/packages/docs/src/examples/v-scroll/option-target.vue b/packages/docs/src/examples/v-scroll/option-target.vue
index da716069540..488aaef1a0b 100644
--- a/packages/docs/src/examples/v-scroll/option-target.vue
+++ b/packages/docs/src/examples/v-scroll/option-target.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <v-row
-      justify="center"
       align="center"
+      justify="center"
     >
       <v-col class="text-center">
         <div class="text-subtitle-2">Offset Top</div>
@@ -11,14 +11,14 @@
     </v-row>
     <v-container
       id="scroll-target"
-      style="max-height: 400px"
       class="overflow-y-auto"
+      style="max-height: 400px"
     >
       <v-row
-        v-scroll:#scroll-target="onScroll"
         align="center"
         justify="center"
         style="height: 1000px"
+        v-scroll:#scroll-target="onScroll"
       >
       </v-row>
     </v-container>
diff --git a/packages/docs/src/examples/v-scroll/usage.vue b/packages/docs/src/examples/v-scroll/usage.vue
index 1556f66db90..46042953853 100644
--- a/packages/docs/src/examples/v-scroll/usage.vue
+++ b/packages/docs/src/examples/v-scroll/usage.vue
@@ -32,8 +32,8 @@
         <v-text-field
           v-if="type === 'number'"
           v-model="number"
-          type="number"
           label="Number"
+          type="number"
         ></v-text-field>
 
         <v-text-field
@@ -63,17 +63,17 @@
 
         <v-slider
           v-model="duration"
-          min="0"
-          max="1000"
           label="Duration"
+          max="1000"
+          min="0"
           thumb-label
         ></v-slider>
 
         <v-slider
           v-model="offset"
-          min="-500"
-          max="500"
           label="Offset"
+          max="500"
+          min="-500"
           thumb-label
         ></v-slider>
       </v-col>
@@ -81,8 +81,8 @@
       <v-col>
         <v-btn
           ref="button"
-          block
           color="primary"
+          block
           @click="$vuetify.goTo(target, options)"
         >
           scroll
diff --git a/packages/docs/src/examples/v-select/prop-chips.vue b/packages/docs/src/examples/v-select/prop-chips.vue
index 6ede1328e6a..f9372c65f70 100644
--- a/packages/docs/src/examples/v-select/prop-chips.vue
+++ b/packages/docs/src/examples/v-select/prop-chips.vue
@@ -2,8 +2,8 @@
   <v-select
     v-model="value"
     :items="items"
-    chips
     label="Chips"
+    chips
     multiple
   ></v-select>
 </template>
diff --git a/packages/docs/src/examples/v-select/prop-disabled.vue b/packages/docs/src/examples/v-select/prop-disabled.vue
index 07e85c613cd..c222923b33a 100644
--- a/packages/docs/src/examples/v-select/prop-disabled.vue
+++ b/packages/docs/src/examples/v-select/prop-disabled.vue
@@ -1,8 +1,8 @@
 <template>
   <v-select
     :items="items"
-    disabled
     label="Disabled"
+    disabled
   ></v-select>
 </template>
 
diff --git a/packages/docs/src/examples/v-select/prop-item-props.vue b/packages/docs/src/examples/v-select/prop-item-props.vue
index 132125bfe45..495df5f4588 100644
--- a/packages/docs/src/examples/v-select/prop-item-props.vue
+++ b/packages/docs/src/examples/v-select/prop-item-props.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-select label="User" :items="items" :item-props="itemProps"></v-select>
+  <v-select :item-props="itemProps" :items="items" label="User"></v-select>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/examples/v-select/prop-multiple.vue b/packages/docs/src/examples/v-select/prop-multiple.vue
index f7d185b1f66..81f9ca785b3 100644
--- a/packages/docs/src/examples/v-select/prop-multiple.vue
+++ b/packages/docs/src/examples/v-select/prop-multiple.vue
@@ -2,9 +2,9 @@
   <v-select
     v-model="favorites"
     :items="states"
+    hint="Pick your favorite states"
     label="Select"
     multiple
-    hint="Pick your favorite states"
     persistent-hint
   ></v-select>
 </template>
diff --git a/packages/docs/src/examples/v-select/prop-readonly.vue b/packages/docs/src/examples/v-select/prop-readonly.vue
index b47baa9401f..48b3dce950c 100644
--- a/packages/docs/src/examples/v-select/prop-readonly.vue
+++ b/packages/docs/src/examples/v-select/prop-readonly.vue
@@ -2,8 +2,8 @@
   <v-select
     v-model="model"
     :items="items"
-    readonly
     label="Read-only"
+    readonly
   ></v-select>
 </template>
 
diff --git a/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue b/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue
index 927c4dfff11..e76eaff7d64 100644
--- a/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue
+++ b/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue
@@ -14,7 +14,7 @@
           <v-checkbox-btn
             :color="likesSomeFruit ? 'indigo-darken-4' : undefined"
             :indeterminate="likesSomeFruit && !likesAllFruit"
-            :model-value="likesSomeFruit"
+            :model-value="likesAllFruit"
           ></v-checkbox-btn>
         </template>
       </v-list-item>
@@ -31,9 +31,7 @@
         disabled
       >
         <template v-slot:prepend>
-          <v-avatar icon="mdi-food-apple" color="primary">
-            mdi-food-apple
-          </v-avatar>
+          <v-avatar color="primary" icon="mdi-food-apple"></v-avatar>
         </template>
       </v-list-item>
     </template>
diff --git a/packages/docs/src/examples/v-select/slot-item.vue b/packages/docs/src/examples/v-select/slot-item.vue
index 5dd7b1ff534..83ac7750814 100644
--- a/packages/docs/src/examples/v-select/slot-item.vue
+++ b/packages/docs/src/examples/v-select/slot-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-select label="User" :items="items" item-title="name">
+  <v-select :items="items" item-title="name" label="User">
     <template v-slot:item="{ props, item }">
       <v-list-item v-bind="props" :subtitle="item.raw.department"></v-list-item>
     </template>
diff --git a/packages/docs/src/examples/v-select/usage.vue b/packages/docs/src/examples/v-select/usage.vue
index a62c197601a..d1937fc7654 100644
--- a/packages/docs/src/examples/v-select/usage.vue
+++ b/packages/docs/src/examples/v-select/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-select v-bind="props"></v-select>
@@ -16,14 +16,10 @@
 
       <v-checkbox v-model="multiple" label="Multiple"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-select'
   const model = ref('default')
   const clear = ref(false)
diff --git a/packages/docs/src/examples/v-sheet/misc-congratulations.vue b/packages/docs/src/examples/v-sheet/misc-congratulations.vue
index 36046d20aa8..806fbacc0a1 100644
--- a/packages/docs/src/examples/v-sheet/misc-congratulations.vue
+++ b/packages/docs/src/examples/v-sheet/misc-congratulations.vue
@@ -3,9 +3,9 @@
     class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4"
     elevation="4"
     height="250"
-    rounded
     max-width="800"
     width="100%"
+    rounded
   >
     <div>
       <h2 class="text-h4 font-weight-black text-orange">Congratulations!</h2>
@@ -18,7 +18,7 @@
         Please head over to your inbox/spam or others folder to find our verificaiton email.
       </p>
 
-      <v-btn variant="text" color="orange">Go to Login</v-btn>
+      <v-btn color="orange" variant="text">Go to Login</v-btn>
     </div>
   </v-sheet>
 </template>
diff --git a/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue b/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue
index c906d6eec0a..fd730b1932a 100644
--- a/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue
+++ b/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue
@@ -13,25 +13,25 @@
       <br>
       <br>
 
-      Please read our <a href="#" class="text-red-accent-2">Privacy Policy</a> to learn about our privacy practices or click "Your Preferences" to exercise control over your data.
+      Please read our <a class="text-red-accent-2" href="#">Privacy Policy</a> to learn about our privacy practices or click "Your Preferences" to exercise control over your data.
     </p>
 
     <v-btn
-      block
       class="text-none text-black mb-4"
       color="red-accent-2"
       size="x-large"
       variant="flat"
+      block
     >
       Accept
     </v-btn>
 
     <v-btn
-      block
       class="text-none text-black"
       color="red-accent-2"
       size="x-large"
       variant="outlined"
+      block
     >
       Your Preferences
     </v-btn>
diff --git a/packages/docs/src/examples/v-sheet/misc-reconcile.vue b/packages/docs/src/examples/v-sheet/misc-reconcile.vue
index a615fdc0965..ba7856e6aa0 100644
--- a/packages/docs/src/examples/v-sheet/misc-reconcile.vue
+++ b/packages/docs/src/examples/v-sheet/misc-reconcile.vue
@@ -1,10 +1,10 @@
 <template>
   <v-sheet
+    class="pa-4 text-center mx-auto"
     elevation="12"
     max-width="600"
     rounded="lg"
     width="100%"
-    class="pa-4 text-center mx-auto"
   >
     <v-icon
       class="mb-5"
@@ -16,7 +16,7 @@
     <h2 class="text-h5 mb-6">You reconciled this account</h2>
 
     <p class="mb-4 text-medium-emphasis text-body-2">
-      To see a report on this reconciliation, click <a href="#" class="text-decoration-none text-info">View reconciliation report.</a>
+      To see a report on this reconciliation, click <a class="text-decoration-none text-info" href="#">View reconciliation report.</a>
 
       <br>
 
@@ -29,9 +29,9 @@
       <v-btn
         class="text-none"
         color="success"
-        rounded
         variant="flat"
         width="90"
+        rounded
       >
         Done
       </v-btn>
diff --git a/packages/docs/src/examples/v-sheet/misc-referral-program.vue b/packages/docs/src/examples/v-sheet/misc-referral-program.vue
index b32ca95f9bc..95d9229fe53 100644
--- a/packages/docs/src/examples/v-sheet/misc-referral-program.vue
+++ b/packages/docs/src/examples/v-sheet/misc-referral-program.vue
@@ -7,7 +7,7 @@
     <v-container fluid>
       <v-row>
         <v-col cols="12" md="3">
-          <v-img src="https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png" height="88" cover></v-img>
+          <v-img height="88" src="https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png" cover></v-img>
         </v-col>
 
         <v-col cols="12" md="9">
@@ -31,11 +31,11 @@
           </ul>
 
           <v-btn
-            block
             class="text-none"
             color="info"
             rounded="0"
             variant="flat"
+            block
           >
             <span class="hidden-sm-and-down">
               Explore our 38+ Referral Program Resources
diff --git a/packages/docs/src/examples/v-sheet/usage.vue b/packages/docs/src/examples/v-sheet/usage.vue
index 455580b4c32..395da983d30 100644
--- a/packages/docs/src/examples/v-sheet/usage.vue
+++ b/packages/docs/src/examples/v-sheet/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -44,18 +44,14 @@
       <v-slider
         v-model="elevation"
         label="Elevation"
-        min="0"
         max="24"
+        min="0"
       ></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-sheet'
   const model = ref('default')
   const sheet = ref(true)
diff --git a/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue b/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue
index 3e9ba28cc8b..65a57786fce 100644
--- a/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue
+++ b/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue
@@ -11,9 +11,9 @@
     </div>
 
     <v-card
-      theme="dark"
       max-width="800"
       rounded="lg"
+      theme="dark"
     >
       <v-container>
         <v-row>
@@ -21,8 +21,8 @@
             v-for="{ src, title, subtitle } in cards"
             :key="title"
             cols="12"
-            md="6"
             lg="4"
+            md="6"
           >
             <v-skeleton-loader
               :loading="loading"
@@ -33,13 +33,13 @@
                 <v-img
                   :src="src"
                   class="rounded-lg mb-2"
-                  cover
                   height="184"
+                  cover
                 ></v-img>
 
                 <v-list-item
-                  :title="title"
                   :subtitle="subtitle"
+                  :title="title"
                   class="px-0"
                 ></v-list-item>
               </v-responsive>
@@ -50,10 +50,10 @@
         <br>
 
         <v-chip
-          border
           prepend-icon="mdi-check-circle"
           size="large"
           variant="text"
+          border
         >
           <template v-slot:prepend>
             <v-icon color="disabled"></v-icon>
diff --git a/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue b/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue
index c126cee7ba2..cc9ae931a48 100644
--- a/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue
+++ b/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue
@@ -1,9 +1,9 @@
 <template>
   <v-skeleton-loader
-    boilerplate
     class="mx-auto"
     elevation="2"
     max-width="360"
     type="card-avatar, article, actions"
+    boilerplate
   ></v-skeleton-loader>
 </template>
diff --git a/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue b/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue
index e856c1a17c1..55c7d5ba991 100644
--- a/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue
+++ b/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue
@@ -24,9 +24,9 @@
           type="list-item-two-line"
         >
           <v-list-item
-            title="Title"
-            subtitle="Subtitle"
             lines="two"
+            subtitle="Subtitle"
+            title="Title"
             rounded
           ></v-list-item>
         </v-skeleton-loader>
@@ -47,9 +47,9 @@
 
         <v-list-item
           v-else
-          title="Title"
-          subtitle="Subtitle"
           lines="two"
+          subtitle="Subtitle"
+          title="Title"
           rounded
         ></v-list-item>
       </v-col>
diff --git a/packages/docs/src/examples/v-skeleton-loader/usage.vue b/packages/docs/src/examples/v-skeleton-loader/usage.vue
index 2e8dbbfa5b4..2b86817d98d 100644
--- a/packages/docs/src/examples/v-skeleton-loader/usage.vue
+++ b/packages/docs/src/examples/v-skeleton-loader/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -17,32 +17,28 @@
       <v-select
         v-model="type"
         :items="types"
-        clearable
         label="Type"
+        clearable
       ></v-select>
 
       <v-select
         v-model="color"
         :items="colors"
-        clearable
         label="Color"
+        clearable
       ></v-select>
 
       <v-slider
         v-model="elevation"
         label="Elevation"
-        min="0"
         max="24"
+        min="0"
       ></v-slider>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-skeleton-loader'
   const model = ref('default')
   const options = ['boilerplate']
diff --git a/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue b/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue
index 6461ff8e1b8..50251a6198e 100644
--- a/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue
+++ b/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue
@@ -16,8 +16,8 @@
         v-slot="{ isSelected, toggle, selectedClass }"
       >
         <v-card
-          color="grey-lighten-1"
           :class="['ma-4', selectedClass]"
+          color="grey-lighten-1"
           height="200"
           width="100"
           @click="toggle"
@@ -27,8 +27,8 @@
               <v-icon
                 v-if="isSelected"
                 color="white"
-                size="48"
                 icon="mdi-close-circle-outline"
+                size="48"
               ></v-icon>
             </v-scale-transition>
           </div>
diff --git a/packages/docs/src/examples/v-slide-group/prop-active-class.vue b/packages/docs/src/examples/v-slide-group/prop-active-class.vue
index 5305c8c9803..268e0706989 100644
--- a/packages/docs/src/examples/v-slide-group/prop-active-class.vue
+++ b/packages/docs/src/examples/v-slide-group/prop-active-class.vue
@@ -16,8 +16,8 @@
         v-slot="{ isSelected, toggle, selectedClass }"
       >
         <v-card
-          color="grey-lighten-1"
           :class="['ma-4', selectedClass]"
+          color="grey-lighten-1"
           height="200"
           width="100"
           @click="toggle"
@@ -27,8 +27,8 @@
               <v-icon
                 v-if="isSelected"
                 color="white"
-                size="48"
                 icon="mdi-close-circle-outline"
+                size="48"
               ></v-icon>
             </v-scale-transition>
           </div>
diff --git a/packages/docs/src/examples/v-slide-group/prop-center-active.vue b/packages/docs/src/examples/v-slide-group/prop-center-active.vue
index 9b0d2a3447d..de0d8523330 100644
--- a/packages/docs/src/examples/v-slide-group/prop-center-active.vue
+++ b/packages/docs/src/examples/v-slide-group/prop-center-active.vue
@@ -27,8 +27,8 @@
               <v-icon
                 v-if="isSelected"
                 color="white"
-                size="48"
                 icon="mdi-close-circle-outline"
+                size="48"
               ></v-icon>
             </v-scale-transition>
           </div>
diff --git a/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue b/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue
index 65e8278fa31..165748cf453 100644
--- a/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue
+++ b/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue
@@ -7,8 +7,8 @@
     <v-slide-group
       v-model="model"
       class="pa-4"
-      prev-icon="mdi-minus"
       next-icon="mdi-plus"
+      prev-icon="mdi-minus"
       selected-class="bg-primary"
       show-arrows
     >
@@ -18,8 +18,8 @@
         v-slot="{ isSelected, toggle, selectedClass }"
       >
         <v-card
-          color="grey-lighten-1"
           :class="['ma-4', selectedClass]"
+          color="grey-lighten-1"
           height="200"
           width="100"
           @click="toggle"
@@ -29,8 +29,8 @@
               <v-icon
                 v-if="isSelected"
                 color="white"
-                size="48"
                 icon="mdi-close-circle-outline"
+                size="48"
               ></v-icon>
             </v-scale-transition>
           </div>
diff --git a/packages/docs/src/examples/v-slide-group/prop-mandatory.vue b/packages/docs/src/examples/v-slide-group/prop-mandatory.vue
index 9dc93706690..75ac4ed1f19 100644
--- a/packages/docs/src/examples/v-slide-group/prop-mandatory.vue
+++ b/packages/docs/src/examples/v-slide-group/prop-mandatory.vue
@@ -17,8 +17,8 @@
         v-slot="{ isSelected, toggle, selectedClass }"
       >
         <v-card
-          color="grey-lighten-1"
           :class="['ma-4', selectedClass]"
+          color="grey-lighten-1"
           height="200"
           width="100"
           @click="toggle"
@@ -28,8 +28,8 @@
               <v-icon
                 v-if="isSelected"
                 color="white"
-                size="48"
                 icon="mdi-close-circle-outline"
+                size="48"
               ></v-icon>
             </v-scale-transition>
           </div>
diff --git a/packages/docs/src/examples/v-slide-group/prop-multiple.vue b/packages/docs/src/examples/v-slide-group/prop-multiple.vue
index a7195ff60f8..750ce6ad36f 100644
--- a/packages/docs/src/examples/v-slide-group/prop-multiple.vue
+++ b/packages/docs/src/examples/v-slide-group/prop-multiple.vue
@@ -17,8 +17,8 @@
         v-slot="{ isSelected, toggle, selectedClass }"
       >
         <v-card
-          color="grey-lighten-1"
           :class="['ma-4', selectedClass]"
+          color="grey-lighten-1"
           height="200"
           width="100"
           @click="toggle"
@@ -28,8 +28,8 @@
               <v-icon
                 v-if="isSelected"
                 color="white"
-                size="48"
                 icon="mdi-close-circle-outline"
+                size="48"
               ></v-icon>
             </v-scale-transition>
           </div>
diff --git a/packages/docs/src/examples/v-slide-group/usage.vue b/packages/docs/src/examples/v-slide-group/usage.vue
index c55c200f8c1..c54c1fd9988 100644
--- a/packages/docs/src/examples/v-slide-group/usage.vue
+++ b/packages/docs/src/examples/v-slide-group/usage.vue
@@ -12,9 +12,9 @@
         v-slot="{ isSelected, toggle }"
       >
         <v-btn
+          :color="isSelected ? 'primary' : undefined"
           class="ma-2"
           rounded
-          :color="isSelected ? 'primary' : undefined"
           @click="toggle"
         >
           Options {{ n }}
diff --git a/packages/docs/src/examples/v-slider/prop-colors.vue b/packages/docs/src/examples/v-slider/prop-colors.vue
index fcdaeee33d6..0a6fe67e164 100644
--- a/packages/docs/src/examples/v-slider/prop-colors.vue
+++ b/packages/docs/src/examples/v-slider/prop-colors.vue
@@ -8,14 +8,14 @@
 
     <v-slider
       v-model="slider2"
-      track-color="green"
       label="track-color"
+      track-color="green"
     ></v-slider>
 
     <v-slider
       v-model="slider3"
-      thumb-color="purple"
       label="thumb-color"
+      thumb-color="purple"
     ></v-slider>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-slider/prop-disabled.vue b/packages/docs/src/examples/v-slider/prop-disabled.vue
index 6c88497f515..65d063f7cfd 100644
--- a/packages/docs/src/examples/v-slider/prop-disabled.vue
+++ b/packages/docs/src/examples/v-slider/prop-disabled.vue
@@ -1,6 +1,6 @@
 <template>
   <v-slider
-    disabled
     model-value="30"
+    disabled
   ></v-slider>
 </template>
diff --git a/packages/docs/src/examples/v-slider/prop-inverse-label.vue b/packages/docs/src/examples/v-slider/prop-inverse-label.vue
index c6602a06014..bcfbd2ac45a 100644
--- a/packages/docs/src/examples/v-slider/prop-inverse-label.vue
+++ b/packages/docs/src/examples/v-slider/prop-inverse-label.vue
@@ -3,9 +3,9 @@
     <v-row>
       <v-col cols="12">
         <v-slider
-          inverse-label
           label="Inverse label"
           model-value="30"
+          inverse-label
         ></v-slider>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-slider/prop-min-and-max.vue b/packages/docs/src/examples/v-slider/prop-min-and-max.vue
index 959aba48eb7..9cabd18c3c3 100644
--- a/packages/docs/src/examples/v-slider/prop-min-and-max.vue
+++ b/packages/docs/src/examples/v-slider/prop-min-and-max.vue
@@ -1,19 +1,19 @@
 <template>
   <v-slider
     v-model="slider"
-    class="align-center"
     :max="max"
     :min="min"
+    class="align-center"
     hide-details
   >
     <template v-slot:append>
       <v-text-field
         v-model="slider"
-        hide-details
-        single-line
         density="compact"
-        type="number"
         style="width: 70px"
+        type="number"
+        hide-details
+        single-line
       ></v-text-field>
     </template>
   </v-slider>
diff --git a/packages/docs/src/examples/v-slider/prop-readonly.vue b/packages/docs/src/examples/v-slider/prop-readonly.vue
index 828d2cf0665..19a5e477ee4 100644
--- a/packages/docs/src/examples/v-slider/prop-readonly.vue
+++ b/packages/docs/src/examples/v-slider/prop-readonly.vue
@@ -1,7 +1,7 @@
 <template>
   <v-slider
-    readonly
     label="Readonly"
     model-value="30"
+    readonly
   ></v-slider>
 </template>
diff --git a/packages/docs/src/examples/v-slider/prop-step.vue b/packages/docs/src/examples/v-slider/prop-step.vue
index 447f7df8bd8..99e4bc8b1c7 100644
--- a/packages/docs/src/examples/v-slider/prop-step.vue
+++ b/packages/docs/src/examples/v-slider/prop-step.vue
@@ -1,8 +1,8 @@
 <template>
   <v-slider
     v-model="value"
-    :min="0"
     :max="1"
+    :min="0"
     :step="0.2"
     thumb-label
   ></v-slider>
diff --git a/packages/docs/src/examples/v-slider/prop-ticks.vue b/packages/docs/src/examples/v-slider/prop-ticks.vue
index cc564773f0d..7fb7e4c3f40 100644
--- a/packages/docs/src/examples/v-slider/prop-ticks.vue
+++ b/packages/docs/src/examples/v-slider/prop-ticks.vue
@@ -10,25 +10,25 @@
     <div class="text-caption">Always show ticks</div>
 
     <v-slider
-      step="10"
       show-ticks="always"
+      step="10"
     ></v-slider>
 
     <div class="text-caption">Tick size</div>
 
     <v-slider
-      step="10"
       show-ticks="always"
+      step="10"
       tick-size="4"
     ></v-slider>
 
     <div class="text-caption">Tick labels</div>
 
     <v-slider
-      :ticks="tickLabels"
       :max="3"
-      step="1"
+      :ticks="tickLabels"
       show-ticks="always"
+      step="1"
       tick-size="4"
     ></v-slider>
   </div>
diff --git a/packages/docs/src/examples/v-slider/prop-validation.vue b/packages/docs/src/examples/v-slider/prop-validation.vue
index 49e507066a0..35604deea90 100644
--- a/packages/docs/src/examples/v-slider/prop-validation.vue
+++ b/packages/docs/src/examples/v-slider/prop-validation.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
-    flat
     color="transparent"
+    flat
   >
     <div class="text-subtitle-2">Rules</div>
 
@@ -24,9 +24,9 @@
         :rules="rules"
         hint="40 in stock"
         label="How many?"
-        persistent-hint
         step="10"
         thumb-label="always"
+        persistent-hint
         ticks
       ></v-slider>
     </v-card-text>
diff --git a/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue b/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue
index 043950bc40b..6823f06f281 100644
--- a/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue
+++ b/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue
@@ -4,14 +4,14 @@
     max-width="600"
   >
     <v-toolbar
-      flat
       dense
+      flat
     >
       <v-toolbar-title>
         <span class="text-subheading">METRONOME</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-btn variant="text" icon="mdi-share-variant"></v-btn>
+      <v-btn icon="mdi-share-variant" variant="text"></v-btn>
     </v-toolbar>
 
     <v-card-text>
@@ -40,12 +40,12 @@
         <v-col class="text-right">
           <v-btn
             :color="color"
+            elevation="0"
             theme="dark"
             icon
-            elevation="0"
             @click="toggle"
           >
-            <v-icon size="large" :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"></v-icon>
+            <v-icon :icon="isPlaying ? 'mdi-pause' : 'mdi-play'" size="large"></v-icon>
           </v-btn>
         </v-col>
       </v-row>
@@ -53,27 +53,27 @@
       <v-slider
         v-model="bpm"
         :color="color"
-        track-color="grey"
-        min="40"
-        max="218"
         :step="1"
+        max="218"
+        min="40"
+        track-color="grey"
       >
         <template v-slot:prepend>
           <v-btn
+            :color="color"
+            icon="mdi-minus"
             size="small"
             variant="text"
-            icon="mdi-minus"
-            :color="color"
             @click="decrement"
           ></v-btn>
         </template>
 
         <template v-slot:append>
           <v-btn
+            :color="color"
+            icon="mdi-plus"
             size="small"
             variant="text"
-            icon="mdi-plus"
-            :color="color"
             @click="increment"
           ></v-btn>
         </template>
diff --git a/packages/docs/src/examples/v-slider/slot-append-text-field.vue b/packages/docs/src/examples/v-slider/slot-append-text-field.vue
index dc3dc0f38a7..0b11b595b31 100644
--- a/packages/docs/src/examples/v-slider/slot-append-text-field.vue
+++ b/packages/docs/src/examples/v-slider/slot-append-text-field.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card width="400" style="margin: auto">
+  <v-card style="margin: auto" width="400">
     <v-responsive
       :style="{ background: `rgb(${red}, ${green}, ${blue})` }"
       height="300px"
@@ -10,18 +10,18 @@
         v-model="red"
         :max="255"
         :step="1"
+        class="ma-4"
         label="R"
         hide-details
-        class="ma-4"
       >
         <template v-slot:append>
           <v-text-field
             v-model="red"
-            type="number"
-            style="width: 80px"
             density="compact"
-            hide-details
+            style="width: 80px"
+            type="number"
             variant="outlined"
+            hide-details
           ></v-text-field>
         </template>
       </v-slider>
@@ -30,18 +30,18 @@
         v-model="green"
         :max="255"
         :step="1"
+        class="ma-4"
         label="G"
         hide-details
-        class="ma-4"
       >
         <template v-slot:append>
           <v-text-field
             v-model="green"
-            type="number"
-            style="width: 80px"
             density="compact"
-            hide-details
+            style="width: 80px"
+            type="number"
             variant="outlined"
+            hide-details
           ></v-text-field>
         </template>
       </v-slider>
@@ -50,18 +50,18 @@
         v-model="blue"
         :max="255"
         :step="1"
+        class="ma-4"
         label="B"
         hide-details
-        class="ma-4"
       >
         <template v-slot:append>
           <v-text-field
             v-model="blue"
-            type="number"
-            style="width: 80px"
             density="compact"
-            hide-details
+            style="width: 80px"
+            type="number"
             variant="outlined"
+            hide-details
           ></v-text-field>
         </template>
       </v-slider>
diff --git a/packages/docs/src/examples/v-slider/usage.vue b/packages/docs/src/examples/v-slider/usage.vue
index 8366007e875..b6ff2833184 100644
--- a/packages/docs/src/examples/v-slider/usage.vue
+++ b/packages/docs/src/examples/v-slider/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-slider v-bind="props"></v-slider>
@@ -12,14 +12,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-slider'
   const model = ref('default')
   const options = ['vertical']
diff --git a/packages/docs/src/examples/v-snackbar/prop-variants.vue b/packages/docs/src/examples/v-snackbar/prop-variants.vue
index 4aa491170f5..4a923408115 100644
--- a/packages/docs/src/examples/v-snackbar/prop-variants.vue
+++ b/packages/docs/src/examples/v-snackbar/prop-variants.vue
@@ -18,7 +18,7 @@
       rounded="pill"
     >
       <template v-slot:activator="{ props }">
-        <v-btn rounded="pill" color="blue-grey" class="ma-2" v-bind="props">open</v-btn>
+        <v-btn class="ma-2" color="blue-grey" rounded="pill" v-bind="props">open</v-btn>
       </template>
 
       Snackbar with <strong>rounded="pill"</strong>.
@@ -30,7 +30,7 @@
       elevation="24"
     >
       <template v-slot:activator="{ props }">
-        <v-btn color="deep-purple-accent-4" class="ma-2" v-bind="props">open</v-btn>
+        <v-btn class="ma-2" color="deep-purple-accent-4" v-bind="props">open</v-btn>
       </template>
 
       Snackbar with <strong>elevation="24"</strong>.
@@ -42,7 +42,7 @@
       variant="tonal"
     >
       <template v-slot:activator="{ props }">
-        <v-btn color="primary" variant="tonal" class="ma-2" v-bind="props">open</v-btn>
+        <v-btn class="ma-2" color="primary" variant="tonal" v-bind="props">open</v-btn>
       </template>
 
       Snackbar with <strong>tonal</strong> variant.
@@ -54,7 +54,7 @@
       variant="outlined"
     >
       <template v-slot:activator="{ props }">
-        <v-btn color="success" variant="outlined" class="ma-2" v-bind="props">open</v-btn>
+        <v-btn class="ma-2" color="success" variant="outlined" v-bind="props">open</v-btn>
       </template>
 
       Snackbar with <strong>outlined</strong> variant.
diff --git a/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue b/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue
index e2bc9c01ab3..131894c9cb0 100644
--- a/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue
+++ b/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue
@@ -2,13 +2,13 @@
   <v-card
     class="mx-auto text-center"
     color="green"
-    dark
     max-width="600"
+    dark
   >
     <v-card-text>
       <v-sheet color="rgba(0, 0, 0, .12)">
         <v-sparkline
-          :value="value"
+          :model-value="value"
           color="rgba(255, 255, 255, .7)"
           height="100"
           padding="24"
@@ -32,8 +32,8 @@
 
     <v-card-actions class="justify-center">
       <v-btn
-        block
         variant="text"
+        block
       >
         Go to Report
       </v-btn>
diff --git a/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue b/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue
index 3df89fa7f70..78de2f7a731 100644
--- a/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue
+++ b/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="mt-4 mx-auto"
+    class="mt-8 mx-auto overflow-visible"
     max-width="400"
   >
     <v-sheet
@@ -8,10 +8,11 @@
       color="cyan"
       elevation="12"
       max-width="calc(100% - 32px)"
+      rounded="lg"
     >
       <v-sparkline
         :labels="labels"
-        :value="value"
+        :model-value="value"
         color="white"
         line-width="2"
         padding="16"
diff --git a/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue b/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue
index c6149b80ede..63fa02c9496 100644
--- a/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue
+++ b/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue
@@ -4,48 +4,46 @@
     color="grey-lighten-4"
     max-width="600"
   >
-    <v-card-title>
+    <template v-slot:prepend>
       <v-icon
         :color="checking ? 'red lighten-2' : 'indigo'"
-        class="me-12"
+        class="me-8"
+        icon="mdi-heart-pulse"
         size="64"
         @click="takePulse"
-      >
-        mdi-heart-pulse
-      </v-icon>
-      <v-row align="start">
-        <div class="text-caption text-grey text-uppercase">
-          Heart rate
-        </div>
-        <div>
-          <span
-            class="text-h3 font-weight-black"
-            v-text="avg || '—'"
-          ></span>
-          <strong v-if="avg">BPM</strong>
-        </div>
-      </v-row>
-
-      <v-spacer></v-spacer>
+      ></v-icon>
+    </template>
 
+    <template v-slot:title>
+      <div class="text-caption text-grey text-uppercase">
+        Heart rate
+      </div>
+
+      <span
+        class="text-h3 font-weight-black"
+        v-text="avg || '—'"
+      ></span>
+      <strong v-if="avg">BPM</strong>
+    </template>
+
+    <template v-slot:append>
       <v-btn
-        icon
         class="align-self-start"
-        size="28"
-      >
-        <v-icon>mdi-arrow-right-thick</v-icon>
-      </v-btn>
-    </v-card-title>
+        icon="mdi-arrow-right-thick"
+        size="34"
+        variant="text"
+      ></v-btn>
+    </template>
 
     <v-sheet color="transparent">
       <v-sparkline
         :key="String(avg)"
-        :smooth="16"
         :gradient="['#f72047', '#ffd200', '#1feaea']"
         :line-width="3"
-        :value="heartbeats"
-        auto-draw
+        :model-value="heartbeats"
+        :smooth="16"
         stroke-linecap="round"
+        auto-draw
       ></v-sparkline>
     </v-sheet>
   </v-card>
diff --git a/packages/docs/src/examples/v-sparkline/prop-fill.vue b/packages/docs/src/examples/v-sparkline/prop-fill.vue
index 9f5e79c5370..3cf1076f835 100644
--- a/packages/docs/src/examples/v-sparkline/prop-fill.vue
+++ b/packages/docs/src/examples/v-sparkline/prop-fill.vue
@@ -3,10 +3,10 @@
     <v-sparkline
       :fill="fill"
       :gradient="selectedGradient"
-      :line-width="width"
+      :line-width="lineWidth"
+      :model-value="value"
       :padding="padding"
-      :smooth="radius || false"
-      :value="value"
+      :smooth="smooth"
       auto-draw
     ></v-sparkline>
 
@@ -18,14 +18,16 @@
         md="6"
       >
         <v-row
-          class="fill-height"
           align="center"
+          class="fill-height"
         >
           <v-item-group
             v-model="selectedGradient"
             mandatory
           >
-            <v-row>
+            <v-row
+              class="pt-6 pl-6"
+            >
               <v-item
                 v-for="(gradient, i) in gradients"
                 :key="i"
@@ -40,9 +42,9 @@
                     border: '2px solid',
                     borderColor: active ? '#222' : 'white'
                   }"
-                  width="30"
-                  height="30"
                   class="me-2"
+                  height="30"
+                  width="30"
                   @click="toggle"
                 ></v-card>
               </v-item>
@@ -50,56 +52,69 @@
           </v-item-group>
         </v-row>
       </v-col>
+    </v-row>
 
+    <v-row
+      class="mt-5"
+    >
       <v-col
-        cols="12"
-        md="6"
+        cols="2"
+      >
+        Filled
+      </v-col>
+      <v-col
+        cols="3"
+      >
+        <v-switch
+          v-model="fill"
+          class="switch"
+        ></v-switch>
+      </v-col>
+      <v-col
+        cols="3"
+      >
+        Line width
+      </v-col>
+      <v-col
+        cols="3"
       >
         <v-slider
-          v-model="width"
-          label="Width"
-          min="0.1"
+          v-model="lineWidth"
           max="10"
+          min="0.1"
           step="0.1"
           thumb-label
         ></v-slider>
       </v-col>
+    </v-row>
 
-      <v-col cols="6">
-        <v-row
-          class="fill-height"
-          align="center"
-        >
-          <v-switch
-            v-model="fill"
-            label="Filled"
-          ></v-switch>
-        </v-row>
+    <v-row>
+      <v-col
+        cols="2"
+      >
+        Smooth
       </v-col>
-
       <v-col
-        cols="12"
-        md="6"
+        cols="3"
       >
-        <v-slider
-          v-model="radius"
-          label="Radius"
-          min="0"
-          max="25"
-          thumb-label
-        ></v-slider>
+        <v-switch
+          v-model="smooth"
+          class="switch"
+        ></v-switch>
       </v-col>
-
       <v-col
-        cols="12"
-        md="6"
-        offset-md="6"
+        cols="3"
+      >
+        Padding
+      </v-col>
+      <v-col
+        cols="3"
       >
         <v-slider
           v-model="padding"
-          label="Padding"
-          min="0"
+          cols="3"
           max="25"
+          min="0"
           thumb-label
         ></v-slider>
       </v-col>
@@ -121,9 +136,9 @@
   const fill = ref(true)
   const selectedGradient = ref(gradients[4])
   const padding = ref(8)
-  const radius = ref(10)
+  const smooth = ref(true)
   const value = ref([0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0])
-  const width = ref(2)
+  const lineWidth = ref(2)
 </script>
 
 <script>
@@ -142,9 +157,16 @@
       selectedGradient: gradients[4],
       gradients,
       padding: 8,
-      radius: 10,
+      smooth: true,
       value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
-      width: 2,
+      lineWidth: 2,
     }),
   }
 </script>
+
+<style scoped>
+.switch {
+  position: relative;
+  top: -12px;
+}
+</style>
diff --git a/packages/docs/src/examples/v-sparkline/usage.vue b/packages/docs/src/examples/v-sparkline/usage.vue
index de2addc84b7..187ede3885e 100644
--- a/packages/docs/src/examples/v-sparkline/usage.vue
+++ b/packages/docs/src/examples/v-sparkline/usage.vue
@@ -1,15 +1,15 @@
 <template>
   <v-sparkline
-    :value="value"
+    :auto-line-width="autoLineWidth"
+    :fill="fill"
     :gradient="gradient"
-    :smooth="radius || false"
-    :padding="padding"
+    :gradient-direction="gradientDirection"
     :line-width="width"
+    :model-value="value"
+    :padding="padding"
+    :smooth="radius || false"
     :stroke-linecap="lineCap"
-    :gradient-direction="gradientDirection"
-    :fill="fill"
     :type="type"
-    :auto-line-width="autoLineWidth"
     auto-draw
   ></v-sparkline>
 </template>
diff --git a/packages/docs/src/examples/v-speed-dial/usage.vue b/packages/docs/src/examples/v-speed-dial/usage.vue
new file mode 100644
index 00000000000..6d3d3d5a05b
--- /dev/null
+++ b/packages/docs/src/examples/v-speed-dial/usage.vue
@@ -0,0 +1,70 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <v-sheet class="text-center" height="420">
+      <v-fab icon="$vuetify" size="large">
+        <v-icon></v-icon>
+
+        <v-speed-dial
+          v-bind="props"
+        >
+          <v-btn key="1" icon="$success"></v-btn>
+          <v-btn key="2" icon="$info"></v-btn>
+          <v-btn key="3" icon="$warning"></v-btn>
+          <v-btn key="4" icon="$error"></v-btn>
+        </v-speed-dial>
+      </v-fab>
+    </v-sheet>
+
+    <template v-slot:configuration>
+      <v-select v-model="location1" :items="locations1" label="Location 1"></v-select>
+      <v-select v-model="location2" :items="locations2" label="Location 2"></v-select>
+      <v-select v-model="transition" :items="transitions" label="Transition"></v-select>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-speed-dial'
+  const model = shallowRef('default')
+  const options = []
+  const location1 = shallowRef('Bottom')
+  const locations1 = ['Top', 'Bottom', 'Left', 'Right']
+  const location2 = shallowRef('Center')
+  const locations2 = ['Top', 'Bottom', 'Center', 'Left', 'Right']
+  const location = computed(() => `${location1.value.toLowerCase()} ${location2.value.toLowerCase()}`)
+  const transition = shallowRef('fade-transition')
+  const transitions = ['scale-transition', 'slide-x-transition', 'slide-y-transition', 'slide-x-reverse-transition', 'slide-y-reverse-transition']
+  const props = computed(() => {
+    return {
+      activator: 'parent',
+      location: location.value,
+      transition: transition.value,
+    }
+  })
+
+  const slots = computed(() => {
+    return `
+  <template v-slot:activator="{ props: activatorProps }">
+    <v-fab
+      v-bind="activatorProps"
+      size="large"
+      icon="$vuetify"
+    ></v-fab>
+  </template>
+
+  <v-btn key="1" icon="$success"></v-btn>
+  <v-btn key="2" icon="$info"></v-btn>
+  <v-btn key="3" icon="$warning"></v-btn>
+  <v-btn key="4" icon="$error"></v-btn>
+`
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>
diff --git a/packages/docs/src/examples/v-stepper/misc-alternate-error.vue b/packages/docs/src/examples/v-stepper/misc-alternate-error.vue
index bdbdcca0962..592a00008ff 100644
--- a/packages/docs/src/examples/v-stepper/misc-alternate-error.vue
+++ b/packages/docs/src/examples/v-stepper/misc-alternate-error.vue
@@ -2,8 +2,8 @@
   <v-stepper alt-labels>
     <v-stepper-header>
       <v-stepper-item
-        complete
         value="1"
+        complete
       >
         <template v-slot:title>
           Ad type
@@ -13,8 +13,8 @@
       <v-divider></v-divider>
 
       <v-stepper-item
-        complete
         value="2"
+        complete
       >
         <template v-slot:title>
           Ad style
diff --git a/packages/docs/src/examples/v-stepper/misc-dynamic.vue b/packages/docs/src/examples/v-stepper/misc-dynamic.vue
index 2b8ce708c6e..c08de1a3250 100644
--- a/packages/docs/src/examples/v-stepper/misc-dynamic.vue
+++ b/packages/docs/src/examples/v-stepper/misc-dynamic.vue
@@ -43,8 +43,8 @@
 
         <v-stepper-actions
           :disabled="disabled"
-          @click:prev="prev"
           @click:next="next"
+          @click:prev="prev"
         ></v-stepper-actions>
       </template>
     </v-stepper>
diff --git a/packages/docs/src/examples/v-stepper/misc-editable.vue b/packages/docs/src/examples/v-stepper/misc-editable.vue
index 939852a8b39..e4e56c4ff68 100644
--- a/packages/docs/src/examples/v-stepper/misc-editable.vue
+++ b/packages/docs/src/examples/v-stepper/misc-editable.vue
@@ -2,26 +2,26 @@
   <v-stepper>
     <v-stepper-header>
       <v-stepper-item
-        complete
-        editable
         title="Select campaign settings"
         value="1"
+        complete
+        editable
       ></v-stepper-item>
 
       <v-divider></v-divider>
 
       <v-stepper-item
-        complete
         title="Create an ad group"
         value="2"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
 
       <v-stepper-item
-        editable
         title="Create an ad"
         value="3"
+        editable
       ></v-stepper-item>
     </v-stepper-header>
   </v-stepper>
diff --git a/packages/docs/src/examples/v-stepper/misc-error.vue b/packages/docs/src/examples/v-stepper/misc-error.vue
index c8914afae41..ebd96d79f38 100644
--- a/packages/docs/src/examples/v-stepper/misc-error.vue
+++ b/packages/docs/src/examples/v-stepper/misc-error.vue
@@ -2,17 +2,17 @@
   <v-stepper model-value="3">
     <v-stepper-header>
       <v-stepper-item
-        complete
         title="Job Search"
         value="1"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
 
       <v-stepper-item
         :rules="[() => false]"
-        title="Submit Application"
         subtitle="Missing Details"
+        title="Submit Application"
         value="2"
       ></v-stepper-item>
 
diff --git a/packages/docs/src/examples/v-stepper/misc-linear.vue b/packages/docs/src/examples/v-stepper/misc-linear.vue
index a0bead062fe..8074e3f467a 100644
--- a/packages/docs/src/examples/v-stepper/misc-linear.vue
+++ b/packages/docs/src/examples/v-stepper/misc-linear.vue
@@ -27,9 +27,9 @@
   <v-stepper model-value="2">
     <v-stepper-header>
       <v-stepper-item
-        complete
         title="Select campaign settings"
         value="1"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
@@ -53,17 +53,17 @@
   <v-stepper model-value="3">
     <v-stepper-header>
       <v-stepper-item
-        complete
         title="Select campaign settings"
         value="1"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
 
       <v-stepper-item
-        complete
         title="Create an ad group"
         value="2"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
diff --git a/packages/docs/src/examples/v-stepper/misc-non-editable.vue b/packages/docs/src/examples/v-stepper/misc-non-editable.vue
index c976cbe8a20..84035d2f95c 100644
--- a/packages/docs/src/examples/v-stepper/misc-non-editable.vue
+++ b/packages/docs/src/examples/v-stepper/misc-non-editable.vue
@@ -2,9 +2,9 @@
   <v-stepper model-value="2">
     <v-stepper-header>
       <v-stepper-item
-        complete
         title="Select campaign settings"
         value="1"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
diff --git a/packages/docs/src/examples/v-stepper/misc-optional.vue b/packages/docs/src/examples/v-stepper/misc-optional.vue
index 958419f11d8..5f359e9be5c 100644
--- a/packages/docs/src/examples/v-stepper/misc-optional.vue
+++ b/packages/docs/src/examples/v-stepper/misc-optional.vue
@@ -28,9 +28,9 @@
   <v-stepper model-value="2">
     <v-stepper-header>
       <v-stepper-item
-        complete
         title="Select campaign settings"
         value="1"
+        complete
       ></v-stepper-item>
 
       <v-divider></v-divider>
diff --git a/packages/docs/src/examples/v-stepper/misc-vertical-error.vue b/packages/docs/src/examples/v-stepper/misc-vertical-error.vue
index c388277c34e..138ac737e82 100644
--- a/packages/docs/src/examples/v-stepper/misc-vertical-error.vue
+++ b/packages/docs/src/examples/v-stepper/misc-vertical-error.vue
@@ -12,8 +12,8 @@
 
     <v-stepper-content step="1">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
@@ -36,8 +36,8 @@
 
     <v-stepper-content step="2">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
@@ -61,8 +61,8 @@
 
     <v-stepper-content step="3">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
@@ -82,8 +82,8 @@
 
     <v-stepper-content step="4">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
diff --git a/packages/docs/src/examples/v-stepper/prop-alternate-label.vue b/packages/docs/src/examples/v-stepper/prop-alternate-label.vue
index 3f4e03f7f0f..52fae0b69f6 100644
--- a/packages/docs/src/examples/v-stepper/prop-alternate-label.vue
+++ b/packages/docs/src/examples/v-stepper/prop-alternate-label.vue
@@ -1,15 +1,15 @@
 <template>
   <v-stepper alt-labels>
     <v-stepper-header>
-      <v-stepper-item value="1" title="Ad unit details"></v-stepper-item>
+      <v-stepper-item title="Ad unit details" value="1"></v-stepper-item>
 
       <v-divider></v-divider>
 
-      <v-stepper-item value="2" title="Ad sizes"></v-stepper-item>
+      <v-stepper-item title="Ad sizes" value="2"></v-stepper-item>
 
       <v-divider></v-divider>
 
-      <v-stepper-item value="3" title="Ad templates"></v-stepper-item>
+      <v-stepper-item title="Ad templates" value="3"></v-stepper-item>
     </v-stepper-header>
   </v-stepper>
 </template>
diff --git a/packages/docs/src/examples/v-stepper/prop-non-linear.vue b/packages/docs/src/examples/v-stepper/prop-non-linear.vue
index a932170f481..2c9eec3b5c7 100644
--- a/packages/docs/src/examples/v-stepper/prop-non-linear.vue
+++ b/packages/docs/src/examples/v-stepper/prop-non-linear.vue
@@ -3,8 +3,8 @@
     <v-stepper non-linear>
       <v-stepper-header>
         <v-stepper-item
-          editable
           value="1"
+          editable
         >
           Select campaign settings
         </v-stepper-item>
@@ -12,8 +12,8 @@
         <v-divider></v-divider>
 
         <v-stepper-item
-          editable
           value="2"
+          editable
         >
           Create an ad group
         </v-stepper-item>
@@ -35,9 +35,9 @@
     >
       <v-stepper-header>
         <v-stepper-item
+          value="1"
           complete
           editable
-          value="1"
         >
           Select campaign settings
         </v-stepper-item>
@@ -45,8 +45,8 @@
         <v-divider></v-divider>
 
         <v-stepper-item
-          editable
           value="2"
+          editable
         >
           Create an ad group
         </v-stepper-item>
@@ -54,9 +54,9 @@
         <v-divider></v-divider>
 
         <v-stepper-item
+          value="3"
           complete
           editable
-          value="3"
         >
           Create an ad
         </v-stepper-item>
@@ -65,14 +65,14 @@
 
     <v-stepper
       class="mt-12"
-      non-linear
       value="3"
+      non-linear
     >
       <v-stepper-header>
         <v-stepper-item
+          value="1"
           complete
           editable
-          value="1"
         >
           Select campaign settings
         </v-stepper-item>
@@ -80,9 +80,9 @@
         <v-divider></v-divider>
 
         <v-stepper-item
+          value="2"
           complete
           editable
-          value="2"
         >
           Create an ad group
         </v-stepper-item>
@@ -90,9 +90,9 @@
         <v-divider></v-divider>
 
         <v-stepper-item
+          value="3"
           complete
           editable
-          value="3"
         >
           Create an ad
         </v-stepper-item>
diff --git a/packages/docs/src/examples/v-stepper/prop-vertical.vue b/packages/docs/src/examples/v-stepper/prop-vertical.vue
index a01a492a5b5..76cc8b9a497 100644
--- a/packages/docs/src/examples/v-stepper/prop-vertical.vue
+++ b/packages/docs/src/examples/v-stepper/prop-vertical.vue
@@ -13,8 +13,8 @@
 
     <v-stepper-content step="1">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
@@ -37,8 +37,8 @@
 
     <v-stepper-content step="2">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
@@ -61,8 +61,8 @@
 
     <v-stepper-content step="3">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
@@ -81,8 +81,8 @@
     </v-stepper-step>
     <v-stepper-content step="4">
       <v-card
-        color="grey-lighten-1"
         class="mb-12"
+        color="grey-lighten-1"
         height="200px"
       ></v-card>
       <v-btn
diff --git a/packages/docs/src/examples/v-stepper/usage.vue b/packages/docs/src/examples/v-stepper/usage.vue
index 62b00808fc4..b1d3e0fddd7 100644
--- a/packages/docs/src/examples/v-stepper/usage.vue
+++ b/packages/docs/src/examples/v-stepper/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -9,7 +9,7 @@
       <template v-slot:item.1>
         <v-card title="Step One" flat>
           <template v-slot:text>
-            <div @dblclick="onDblClick" @blur="onBlur">
+            <div @blur="onBlur" @dblclick="onDblClick">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
             </div>
           </template>
@@ -19,7 +19,7 @@
       <template v-slot:item.2>
         <v-card title="Step Two" flat>
           <template v-slot:text>
-            <div @dblclick="onDblClick" @blur="onBlur">
+            <div @blur="onBlur" @dblclick="onDblClick">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
             </div>
           </template>
@@ -29,7 +29,7 @@
       <template v-slot:item.3>
         <v-card title="Step Three" flat>
           <template v-slot:text>
-            <div @dblclick="onDblClick" @blur="onBlur">
+            <div @blur="onBlur" @dblclick="onDblClick">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
 
               Lorem ipsum dolor sit amet consectetur adipisicing elit.
@@ -50,14 +50,10 @@
 
       <v-checkbox v-model="altLabels" label="Alt labels"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-stepper'
   const model = ref('default')
   const options = []
diff --git a/packages/docs/src/examples/v-switch/prop-colors.vue b/packages/docs/src/examples/v-switch/prop-colors.vue
index 1b7d7090ec1..cb2dfe5f201 100644
--- a/packages/docs/src/examples/v-switch/prop-colors.vue
+++ b/packages/docs/src/examples/v-switch/prop-colors.vue
@@ -5,60 +5,60 @@
         <v-row>
           <v-col
             cols="12"
-            sm="4"
             md="4"
+            sm="4"
           >
             <v-switch
               v-model="ex11"
-              label="red"
               color="red"
+              label="red"
               value="red"
               hide-details
             ></v-switch>
             <v-switch
               v-model="ex11"
-              label="red-darken-3"
               color="red-darken-3"
+              label="red-darken-3"
               value="red-darken-3"
               hide-details
             ></v-switch>
           </v-col>
           <v-col
             cols="12"
-            sm="4"
             md="4"
+            sm="4"
           >
             <v-switch
               v-model="ex11"
-              label="indigo"
               color="indigo"
+              label="indigo"
               value="indigo"
               hide-details
             ></v-switch>
             <v-switch
               v-model="ex11"
-              label="indigo-darken-3"
               color="indigo-darken-3"
+              label="indigo-darken-3"
               value="indigo-darken-3"
               hide-details
             ></v-switch>
           </v-col>
           <v-col
             cols="12"
-            sm="4"
             md="4"
+            sm="4"
           >
             <v-switch
               v-model="ex11"
-              label="orange"
               color="orange"
+              label="orange"
               value="orange"
               hide-details
             ></v-switch>
             <v-switch
               v-model="ex11"
-              label="orange-darken-3"
               color="orange-darken-3"
+              label="orange-darken-3"
               value="orange-darken-3"
               hide-details
             ></v-switch>
@@ -68,60 +68,60 @@
         <v-row class="mt-12">
           <v-col
             cols="12"
-            sm="4"
             md="4"
+            sm="4"
           >
             <v-switch
               v-model="ex11"
-              label="primary"
               color="primary"
+              label="primary"
               value="primary"
               hide-details
             ></v-switch>
             <v-switch
               v-model="ex11"
-              label="secondary"
               color="secondary"
+              label="secondary"
               value="secondary"
               hide-details
             ></v-switch>
           </v-col>
           <v-col
             cols="12"
-            sm="4"
             md="4"
+            sm="4"
           >
             <v-switch
               v-model="ex11"
-              label="success"
               color="success"
+              label="success"
               value="success"
               hide-details
             ></v-switch>
             <v-switch
               v-model="ex11"
-              label="info"
               color="info"
+              label="info"
               value="info"
               hide-details
             ></v-switch>
           </v-col>
           <v-col
             cols="12"
-            sm="4"
             md="4"
+            sm="4"
           >
             <v-switch
               v-model="ex11"
-              label="warning"
               color="warning"
+              label="warning"
               value="warning"
               hide-details
             ></v-switch>
             <v-switch
               v-model="ex11"
-              label="error"
               color="error"
+              label="error"
               value="error"
               hide-details
             ></v-switch>
diff --git a/packages/docs/src/examples/v-switch/prop-custom-values.vue b/packages/docs/src/examples/v-switch/prop-custom-values.vue
index c788b27fc87..76fbb1076f1 100644
--- a/packages/docs/src/examples/v-switch/prop-custom-values.vue
+++ b/packages/docs/src/examples/v-switch/prop-custom-values.vue
@@ -1,10 +1,10 @@
 <template>
   <v-switch
     v-model="model"
-    hide-details
-    true-value="yes"
-    false-value="no"
     :label="`Switch: ${model}`"
+    false-value="no"
+    true-value="yes"
+    hide-details
   ></v-switch>
 </template>
 
diff --git a/packages/docs/src/examples/v-switch/prop-flat.vue b/packages/docs/src/examples/v-switch/prop-flat.vue
index e682b316a39..661d91a1656 100644
--- a/packages/docs/src/examples/v-switch/prop-flat.vue
+++ b/packages/docs/src/examples/v-switch/prop-flat.vue
@@ -1,9 +1,9 @@
 <template>
   <v-switch
     v-model="model"
-    hide-details
-    flat
     :label="`Switch: ${model.toString()}`"
+    flat
+    hide-details
   ></v-switch>
 </template>
 
diff --git a/packages/docs/src/examples/v-switch/prop-inset.vue b/packages/docs/src/examples/v-switch/prop-inset.vue
index c84f08fef17..6bd4563ec8e 100644
--- a/packages/docs/src/examples/v-switch/prop-inset.vue
+++ b/packages/docs/src/examples/v-switch/prop-inset.vue
@@ -1,9 +1,9 @@
 <template>
   <v-switch
     v-model="model"
+    :label="`Switch: ${model.toString()}`"
     hide-details
     inset
-    :label="`Switch: ${model.toString()}`"
   ></v-switch>
 </template>
 
diff --git a/packages/docs/src/examples/v-switch/prop-states.vue b/packages/docs/src/examples/v-switch/prop-states.vue
index f4ef3613678..0e75326f1b5 100644
--- a/packages/docs/src/examples/v-switch/prop-states.vue
+++ b/packages/docs/src/examples/v-switch/prop-states.vue
@@ -3,15 +3,15 @@
     <v-row>
       <v-col cols="6">
         <v-switch
-          color="primary"
           :model-value="true"
+          color="primary"
           label="on"
         ></v-switch>
       </v-col>
       <v-col cols="6">
         <v-switch
-          color="primary"
           :model-value="false"
+          color="primary"
           label="off"
         ></v-switch>
       </v-col>
@@ -20,18 +20,18 @@
     <v-row>
       <v-col cols="6">
         <v-switch
-          color="primary"
           :model-value="true"
-          disabled
+          color="primary"
           label="on disabled"
+          disabled
         ></v-switch>
       </v-col>
       <v-col cols="6">
         <v-switch
-          color="primary"
           :model-value="false"
-          disabled
+          color="primary"
           label="off disabled"
+          disabled
         ></v-switch>
       </v-col>
     </v-row>
@@ -39,16 +39,16 @@
     <v-row>
       <v-col cols="6">
         <v-switch
-          loading="warning"
           :model-value="true"
           label="on loading"
+          loading="warning"
         ></v-switch>
       </v-col>
       <v-col cols="6">
         <v-switch
           :model-value="false"
-          loading="warning"
           label="off loading"
+          loading="warning"
         ></v-switch>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-switch/slot-label.vue b/packages/docs/src/examples/v-switch/slot-label.vue
index e657f00075a..02ba4eed7ea 100644
--- a/packages/docs/src/examples/v-switch/slot-label.vue
+++ b/packages/docs/src/examples/v-switch/slot-label.vue
@@ -4,8 +4,8 @@
       Turn on the progress:
       <v-progress-circular
         :indeterminate="switchMe"
-        size="24"
         class="ms-2"
+        size="24"
       ></v-progress-circular>
     </template>
   </v-switch>
diff --git a/packages/docs/src/examples/v-switch/usage.vue b/packages/docs/src/examples/v-switch/usage.vue
index 84f783f40ad..9f99a872006 100644
--- a/packages/docs/src/examples/v-switch/usage.vue
+++ b/packages/docs/src/examples/v-switch/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-switch v-bind="props"></v-switch>
@@ -12,14 +12,10 @@
     <template v-slot:configuration>
       <v-checkbox v-model="indeterminate" label="Indeterminate"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref, watch } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-switch'
   const model = ref('default')
   const indeterminate = ref(false)
diff --git a/packages/docs/src/examples/v-system-bar/prop-color.vue b/packages/docs/src/examples/v-system-bar/prop-color.vue
index 88a7c30fbae..fb3b3681edc 100644
--- a/packages/docs/src/examples/v-system-bar/prop-color.vue
+++ b/packages/docs/src/examples/v-system-bar/prop-color.vue
@@ -2,11 +2,11 @@
   <div>
     <v-layout style="height: 50px">
       <v-system-bar color="primary">
-        <v-icon icon="mdi-wifi-strength-4" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-wifi-strength-4"></v-icon>
 
-        <v-icon icon="mdi-signal-cellular-outline" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-signal-cellular-outline"></v-icon>
 
-        <v-icon icon="mdi-battery" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-battery"></v-icon>
 
         <span class="ms-2">08:30</span>
       </v-system-bar>
@@ -14,11 +14,11 @@
 
     <v-layout style="height: 50px">
       <v-system-bar color="red-lighten-2">
-        <v-icon icon="mdi-wifi-strength-2" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-wifi-strength-2"></v-icon>
 
-        <v-icon icon="mdi-signal-cellular-outline" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-signal-cellular-outline"></v-icon>
 
-        <v-icon icon="mdi-battery" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-battery"></v-icon>
 
         <span class="ms-2">18:30</span>
       </v-system-bar>
@@ -26,11 +26,11 @@
 
     <v-layout style="height: 50px">
       <v-system-bar color="indigo-darken-2">
-        <v-icon icon="mdi-wifi-strength-3" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-wifi-strength-3"></v-icon>
 
-        <v-icon icon="mdi-signal-cellular-outline" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-signal-cellular-outline"></v-icon>
 
-        <v-icon icon="mdi-battery" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-battery"></v-icon>
 
         <span class="ms-2">13:24</span>
       </v-system-bar>
diff --git a/packages/docs/src/examples/v-system-bar/prop-window.vue b/packages/docs/src/examples/v-system-bar/prop-window.vue
index a090167f462..30156df8101 100644
--- a/packages/docs/src/examples/v-system-bar/prop-window.vue
+++ b/packages/docs/src/examples/v-system-bar/prop-window.vue
@@ -1,7 +1,7 @@
 <template>
   <v-layout style="height: 50px">
     <v-system-bar window>
-      <v-icon icon="mdi-message" class="me-2"></v-icon>
+      <v-icon class="me-2" icon="mdi-message"></v-icon>
 
       <span>10 unread messages</span>
 
@@ -9,9 +9,9 @@
 
       <v-btn icon="mdi-minus" variant="text"></v-btn>
 
-      <v-btn icon="mdi-checkbox-blank-outline" variant="text" class="ms-2"></v-btn>
+      <v-btn class="ms-2" icon="mdi-checkbox-blank-outline" variant="text"></v-btn>
 
-      <v-btn icon="mdi-close" variant="text" class="ms-2"></v-btn>
+      <v-btn class="ms-2" icon="mdi-close" variant="text"></v-btn>
     </v-system-bar>
   </v-layout>
 </template>
diff --git a/packages/docs/src/examples/v-system-bar/usage.vue b/packages/docs/src/examples/v-system-bar/usage.vue
index 68fc98bd9b4..2fae5884cd2 100644
--- a/packages/docs/src/examples/v-system-bar/usage.vue
+++ b/packages/docs/src/examples/v-system-bar/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
+    :code="code"
     :name="name"
     :options="options"
-    :code="code"
   >
     <v-layout
       class="elevation-2 rounded mx-auto bg-white"
@@ -11,22 +11,18 @@
     >
       <v-system-bar v-bind="props">
         <v-icon icon="mdi-wifi-strength-4"></v-icon>
-        <v-icon icon="mdi-signal" class="ms-2"></v-icon>
-        <v-icon icon="mdi-battery" class="ms-2"></v-icon>
+        <v-icon class="ms-2" icon="mdi-signal"></v-icon>
+        <v-icon class="ms-2" icon="mdi-battery"></v-icon>
 
         <span class="ms-2">3:13PM</span>
       </v-system-bar>
 
       <v-main></v-main>
     </v-layout>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-system-bar'
   const model = ref('default')
   const options = ['window']
diff --git a/packages/docs/src/examples/v-table/prop-fixed-header.vue b/packages/docs/src/examples/v-table/prop-fixed-header.vue
index aa7603da0f5..06829a972e8 100644
--- a/packages/docs/src/examples/v-table/prop-fixed-header.vue
+++ b/packages/docs/src/examples/v-table/prop-fixed-header.vue
@@ -1,7 +1,7 @@
 <template>
   <v-table
-    fixed-header
     height="300px"
+    fixed-header
   >
     <thead>
       <tr>
diff --git a/packages/docs/src/examples/v-tabs/misc-content.vue b/packages/docs/src/examples/v-tabs/misc-content.vue
index 191623a2cde..8b826cbf07c 100644
--- a/packages/docs/src/examples/v-tabs/misc-content.vue
+++ b/packages/docs/src/examples/v-tabs/misc-content.vue
@@ -18,7 +18,7 @@
       <template v-slot:extension>
         <v-tabs
           v-model="model"
-          centered
+          align-tabs="center"
         >
           <v-tab
             v-for="i in 3"
diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
index a83837cdb49..a4dc590e6be 100644
--- a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
+++ b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
@@ -9,17 +9,17 @@
       <v-text-field
         append-icon="mdi-microphone"
         class="mx-4"
-        flat
-        hide-details
         label="Search"
         prepend-inner-icon="mdi-magnify"
+        flat
+        hide-details
         solo-inverted
       ></v-text-field>
 
       <template v-slot:extension>
         <v-tabs
           v-model="tabs"
-          centered
+          align-tabs="center"
         >
           <v-tab
             v-for="n in 3"
diff --git a/packages/docs/src/examples/v-tabs/misc-mobile.vue b/packages/docs/src/examples/v-tabs/misc-mobile.vue
index a28ac79d9c5..9d36535411f 100644
--- a/packages/docs/src/examples/v-tabs/misc-mobile.vue
+++ b/packages/docs/src/examples/v-tabs/misc-mobile.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-card width="350px" class="mx-auto">
-    <v-toolbar color="transparent" class="px-0">
+  <v-card class="mx-auto" width="350px">
+    <v-toolbar class="px-0" color="transparent">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
       <v-toolbar-title>Contacts</v-toolbar-title>
diff --git a/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue
index 13903cd53a3..c5d95d4a8de 100644
--- a/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue
+++ b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue
@@ -35,10 +35,10 @@
           >
             <template v-slot:activator="{ props }">
               <v-btn
-                variant="plain"
-                rounded="0"
                 class="align-self-center me-4"
                 height="100%"
+                rounded="0"
+                variant="plain"
                 v-bind="props"
               >
                 more
diff --git a/packages/docs/src/examples/v-tabs/misc-pagination.vue b/packages/docs/src/examples/v-tabs/misc-pagination.vue
index ba04c51de1e..c6a0f07403c 100644
--- a/packages/docs/src/examples/v-tabs/misc-pagination.vue
+++ b/packages/docs/src/examples/v-tabs/misc-pagination.vue
@@ -2,8 +2,8 @@
   <v-card>
     <v-tabs
       bg-color="teal-darken-3"
-      show-arrows
       slider-color="teal-lighten-3"
+      show-arrows
     >
       <v-tab
         v-for="i in 30"
diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue
index e8cd620e447..7d503eca5f0 100644
--- a/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue
+++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue
@@ -2,8 +2,8 @@
   <v-card>
     <v-tabs
       v-model="tab"
-      color="deep-purple-accent-4"
       align-tabs="center"
+      color="deep-purple-accent-4"
     >
       <v-tab :value="1">Landscape</v-tab>
       <v-tab :value="2">City</v-tab>
@@ -24,8 +24,8 @@
               md="4"
             >
               <v-img
-                :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
                 :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
+                :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
                 aspect-ratio="1"
               ></v-img>
             </v-col>
diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue
index 7c8d740416b..9d8e075ab1c 100644
--- a/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue
+++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue
@@ -2,8 +2,8 @@
   <v-card>
     <v-tabs
       v-model="tab"
-      color="deep-purple-accent-4"
       align-tabs="end"
+      color="deep-purple-accent-4"
     >
       <v-tab :value="1">Landscape</v-tab>
       <v-tab :value="2">City</v-tab>
@@ -24,8 +24,8 @@
               md="4"
             >
               <v-img
-                :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
                 :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
+                :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
                 aspect-ratio="1"
               ></v-img>
             </v-col>
diff --git a/packages/docs/src/examples/v-tabs/prop-direction.vue b/packages/docs/src/examples/v-tabs/prop-direction.vue
index c1d3b3c5cfd..29112515403 100644
--- a/packages/docs/src/examples/v-tabs/prop-direction.vue
+++ b/packages/docs/src/examples/v-tabs/prop-direction.vue
@@ -8,8 +8,8 @@
     <div class="d-flex flex-row">
       <v-tabs
         v-model="tab"
-        direction="vertical"
         color="primary"
+        direction="vertical"
       >
         <v-tab value="option-1">
           <v-icon start>
diff --git a/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue b/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue
index 43774163244..5aeece5c879 100644
--- a/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue
+++ b/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue
@@ -1,7 +1,7 @@
 <template>
   <v-tabs
-    fixed-tabs
     bg-color="indigo-darken-2"
+    fixed-tabs
   >
     <v-tab>
       Option
diff --git a/packages/docs/src/examples/v-tabs/prop-stacked.vue b/packages/docs/src/examples/v-tabs/prop-stacked.vue
index 93bd15ac443..993f5edb995 100644
--- a/packages/docs/src/examples/v-tabs/prop-stacked.vue
+++ b/packages/docs/src/examples/v-tabs/prop-stacked.vue
@@ -2,8 +2,8 @@
   <v-card>
     <v-tabs
       v-model="tab"
+      align-tabs="center"
       bg-color="deep-purple-accent-4"
-      centered
       stacked
     >
       <v-tab value="tab-1">
diff --git a/packages/docs/src/examples/v-text-field/event-icons.vue b/packages/docs/src/examples/v-text-field/event-icons.vue
index 424349a8279..06a15a93ffe 100644
--- a/packages/docs/src/examples/v-text-field/event-icons.vue
+++ b/packages/docs/src/examples/v-text-field/event-icons.vue
@@ -8,15 +8,15 @@
             :append-icon="message ? 'mdi-send' : 'mdi-microphone'"
             :append-inner-icon="marker ? 'mdi-map-marker' : 'mdi-map-marker-off'"
             :prepend-icon="icon"
-            variant="filled"
             clear-icon="mdi-close-circle"
-            clearable
             label="Message"
             type="text"
-            @click:append-inner="toggleMarker"
+            variant="filled"
+            clearable
             @click:append="sendMessage"
-            @click:prepend="changeIcon"
+            @click:append-inner="toggleMarker"
             @click:clear="clearMessage"
+            @click:prepend="changeIcon"
           ></v-text-field>
         </v-col>
       </v-row>
diff --git a/packages/docs/src/examples/v-text-field/misc-custom-validation.vue b/packages/docs/src/examples/v-text-field/misc-custom-validation.vue
index 1440283ab71..a12ddab84c7 100644
--- a/packages/docs/src/examples/v-text-field/misc-custom-validation.vue
+++ b/packages/docs/src/examples/v-text-field/misc-custom-validation.vue
@@ -2,17 +2,17 @@
   <v-row justify="center">
     <v-col
       cols="12"
-      sm="10"
-      md="8"
       lg="6"
+      md="8"
+      sm="10"
     >
       <v-card ref="form">
         <v-card-text>
           <v-text-field
             ref="name"
             v-model="name"
-            :rules="[() => !!name || 'This field is required']"
             :error-messages="errorMessages"
+            :rules="[() => !!name || 'This field is required']"
             label="Full Name"
             placeholder="John Doe"
             required
@@ -25,9 +25,9 @@
               () => !!address && address.length <= 25 || 'Address must be less than 25 characters',
               addressCheck
             ]"
+            counter="25"
             label="Address Line"
             placeholder="Snowy Rock Pl"
-            counter="25"
             required
           ></v-text-field>
           <v-text-field
@@ -43,22 +43,22 @@
             v-model="state"
             :rules="[() => !!state || 'This field is required']"
             label="State/Province/Region"
-            required
             placeholder="TX"
+            required
           ></v-text-field>
           <v-text-field
             ref="zip"
             v-model="zip"
             :rules="[() => !!zip || 'This field is required']"
             label="ZIP / Postal Code"
-            required
             placeholder="79938"
+            required
           ></v-text-field>
           <v-autocomplete
             ref="country"
             v-model="country"
-            :rules="[() => !!country || 'This field is required']"
             :items="countries"
+            :rules="[() => !!country || 'This field is required']"
             label="Country"
             placeholder="Select..."
             required
@@ -77,11 +77,11 @@
             >
               <template v-slot:activator="{ on, attrs }">
                 <v-btn
-                  icon
                   class="my-0"
+                  icon
                   v-bind="attrs"
-                  @click="resetForm"
                   v-on="on"
+                  @click="resetForm"
                 >
                   <v-icon>mdi-refresh</v-icon>
                 </v-btn>
diff --git a/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue b/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue
index 844bc8856ce..0a1914c4e79 100644
--- a/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue
+++ b/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue
@@ -3,11 +3,11 @@
     <v-autocomplete
       v-model="selected"
       :items="items"
+      label="To"
       chips
       hide-details
       hide-no-data
       hide-selected
-      label="To"
       multiple
       single-line
     ></v-autocomplete>
@@ -16,8 +16,8 @@
 
     <v-text-field
       v-model="subject"
-      hide-details
       label="Subject"
+      hide-details
       single-line
     ></v-text-field>
 
@@ -25,9 +25,9 @@
 
     <v-textarea
       v-model="title"
-      counter
       label="Message"
       maxlength="120"
+      counter
       single-line
     ></v-textarea>
   </v-form>
diff --git a/packages/docs/src/examples/v-text-field/misc-guide.vue b/packages/docs/src/examples/v-text-field/misc-guide.vue
index 33c269dfb3a..d4cbecb8cac 100644
--- a/packages/docs/src/examples/v-text-field/misc-guide.vue
+++ b/packages/docs/src/examples/v-text-field/misc-guide.vue
@@ -10,17 +10,17 @@
           :readonly="loading"
           :rules="[required]"
           class="mb-2"
-          clearable
           label="Email"
+          clearable
         ></v-text-field>
 
         <v-text-field
           v-model="password"
           :readonly="loading"
           :rules="[required]"
-          clearable
           label="Password"
           placeholder="Enter your password"
+          clearable
         ></v-text-field>
 
         <br>
@@ -28,11 +28,11 @@
         <v-btn
           :disabled="!form"
           :loading="loading"
-          block
           color="success"
           size="large"
           type="submit"
           variant="elevated"
+          block
         >
           Sign In
         </v-btn>
diff --git a/packages/docs/src/examples/v-text-field/misc-login-form.vue b/packages/docs/src/examples/v-text-field/misc-login-form.vue
index 57564f66f36..c630fd83fb6 100644
--- a/packages/docs/src/examples/v-text-field/misc-login-form.vue
+++ b/packages/docs/src/examples/v-text-field/misc-login-form.vue
@@ -54,11 +54,11 @@
       </v-card>
 
       <v-btn
-        block
         class="mb-8"
         color="blue"
         size="large"
         variant="tonal"
+        block
       >
         Log In
       </v-btn>
diff --git a/packages/docs/src/examples/v-text-field/misc-password.vue b/packages/docs/src/examples/v-text-field/misc-password.vue
index 38e4eef0c43..1c665eb1057 100644
--- a/packages/docs/src/examples/v-text-field/misc-password.vue
+++ b/packages/docs/src/examples/v-text-field/misc-password.vue
@@ -11,9 +11,9 @@
             :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="[rules.required, rules.min]"
             :type="show1 ? 'text' : 'password'"
-            name="input-10-1"
-            label="Normal with hint text"
             hint="At least 8 characters"
+            label="Normal with hint text"
+            name="input-10-1"
             counter
             @click:append="show1 = !show1"
           ></v-text-field>
@@ -27,10 +27,10 @@
             :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="[rules.required, rules.min]"
             :type="show2 ? 'text' : 'password'"
-            name="input-10-2"
-            label="Visible"
-            hint="At least 8 characters"
             class="input-group--focused"
+            hint="At least 8 characters"
+            label="Visible"
+            name="input-10-2"
             @click:append="show2 = !show2"
           ></v-text-field>
         </v-col>
diff --git a/packages/docs/src/examples/v-text-field/prop-clearable.vue b/packages/docs/src/examples/v-text-field/prop-clearable.vue
index 7ad35f9a43a..7857b0f4418 100644
--- a/packages/docs/src/examples/v-text-field/prop-clearable.vue
+++ b/packages/docs/src/examples/v-text-field/prop-clearable.vue
@@ -5,9 +5,9 @@
   >
     <v-text-field
       v-model="model"
-      clearable
       hide-details="auto"
       label="Last name"
+      clearable
     ></v-text-field>
   </v-responsive>
 </template>
diff --git a/packages/docs/src/examples/v-text-field/prop-counter.vue b/packages/docs/src/examples/v-text-field/prop-counter.vue
index 81fbb5a681a..c8ebe3b499f 100644
--- a/packages/docs/src/examples/v-text-field/prop-counter.vue
+++ b/packages/docs/src/examples/v-text-field/prop-counter.vue
@@ -22,10 +22,10 @@
           <v-text-field
             v-model="description"
             :rules="rules"
-            counter
-            maxlength="25"
             hint="This field uses maxlength attribute"
             label="Limit exceeded"
+            maxlength="25"
+            counter
           ></v-text-field>
         </v-col>
 
@@ -35,11 +35,11 @@
         >
           <v-text-field
             v-model="title"
+            :counter-value="v => v.trim().split(' ').length"
             :rules="wordsRules"
             counter="5"
             hint="This field counts words instead of characters"
             label="Custom counter from prop"
-            :counter-value="v => v.trim().split(' ').length"
           ></v-text-field>
         </v-col>
 
diff --git a/packages/docs/src/examples/v-text-field/prop-dense.vue b/packages/docs/src/examples/v-text-field/prop-dense.vue
index c3b927f8121..69f0d70f28d 100644
--- a/packages/docs/src/examples/v-text-field/prop-dense.vue
+++ b/packages/docs/src/examples/v-text-field/prop-dense.vue
@@ -7,12 +7,12 @@
     <v-card-text>
       <v-text-field
         :loading="loading"
+        append-inner-icon="mdi-magnify"
         density="compact"
-        variant="solo"
         label="Search templates"
-        append-inner-icon="mdi-magnify"
-        single-line
+        variant="solo"
         hide-details
+        single-line
         @click:append-inner="onClick"
       ></v-text-field>
     </v-card-text>
diff --git a/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue b/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue
index a94df69680e..e7dd7562b5e 100644
--- a/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue
+++ b/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue
@@ -7,8 +7,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="Regular"
+            model-value="John Doe"
             disabled
           ></v-text-field>
         </v-col>
@@ -18,8 +18,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="Regular"
+            model-value="John Doe"
             readonly
           ></v-text-field>
         </v-col>
@@ -29,8 +29,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="Solo"
+            model-value="John Doe"
             variant="solo"
             disabled
           ></v-text-field>
@@ -41,8 +41,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="Solo"
+            model-value="John Doe"
             variant="solo"
             readonly
           ></v-text-field>
@@ -53,8 +53,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="Outlined"
+            model-value="John Doe"
             variant="outlined"
             disabled
           ></v-text-field>
@@ -65,8 +65,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="Outlined"
+            model-value="John Doe"
             variant="outlined"
             readonly
           ></v-text-field>
@@ -77,8 +77,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="underlined"
+            model-value="John Doe"
             variant="underlined"
             disabled
           ></v-text-field>
@@ -89,8 +89,8 @@
           sm="6"
         >
           <v-text-field
-            model-value="John Doe"
             label="underlined"
+            model-value="John Doe"
             variant="underlined"
             readonly
           ></v-text-field>
diff --git a/packages/docs/src/examples/v-text-field/prop-hide-details.vue b/packages/docs/src/examples/v-text-field/prop-hide-details.vue
index f5fa2ef441d..b72b0c1714b 100644
--- a/packages/docs/src/examples/v-text-field/prop-hide-details.vue
+++ b/packages/docs/src/examples/v-text-field/prop-hide-details.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-text-field
-      label="Main input"
       :rules="rules"
       hide-details="auto"
+      label="Main input"
     ></v-text-field>
     <v-text-field label="Another input"></v-text-field>
   </div>
diff --git a/packages/docs/src/examples/v-text-field/prop-hint.vue b/packages/docs/src/examples/v-text-field/prop-hint.vue
index 1ade6e8cd06..bc6f3d2c640 100644
--- a/packages/docs/src/examples/v-text-field/prop-hint.vue
+++ b/packages/docs/src/examples/v-text-field/prop-hint.vue
@@ -7,9 +7,9 @@
           sm="6"
         >
           <v-text-field
+            hint="For example, flowers or used cars"
             label="Your product or service"
             model-value="Grocery delivery"
-            hint="For example, flowers or used cars"
           ></v-text-field>
         </v-col>
 
@@ -18,8 +18,8 @@
           sm="6"
         >
           <v-text-field
-            label="Your landing page"
             hint="www.example.com/page"
+            label="Your landing page"
             persistent-hint
           ></v-text-field>
         </v-col>
@@ -29,9 +29,9 @@
           sm="6"
         >
           <v-text-field
+            hint="For example, flowers or used cars"
             label="Your product or service"
             model-value="Grocery delivery"
-            hint="For example, flowers or used cars"
             variant="solo"
           ></v-text-field>
         </v-col>
@@ -41,10 +41,10 @@
           sm="6"
         >
           <v-text-field
-            label="Your landing page"
             hint="www.example.com/page"
-            persistent-hint
+            label="Your landing page"
             variant="solo"
+            persistent-hint
           ></v-text-field>
         </v-col>
 
@@ -53,9 +53,9 @@
           sm="6"
         >
           <v-text-field
+            hint="For example, flowers or used cars"
             label="Your product or service"
             model-value="Grocery delivery"
-            hint="For example, flowers or used cars"
             variant="outlined"
           ></v-text-field>
         </v-col>
@@ -65,10 +65,10 @@
           sm="6"
         >
           <v-text-field
-            label="Your landing page"
             hint="www.example.com/page"
-            persistent-hint
+            label="Your landing page"
             variant="outlined"
+            persistent-hint
           ></v-text-field>
         </v-col>
       </v-row>
diff --git a/packages/docs/src/examples/v-text-field/prop-icon.vue b/packages/docs/src/examples/v-text-field/prop-icon.vue
index c38275296fe..ebc4ab4f71e 100644
--- a/packages/docs/src/examples/v-text-field/prop-icon.vue
+++ b/packages/docs/src/examples/v-text-field/prop-icon.vue
@@ -17,13 +17,13 @@
           ></v-text-field>
 
           <v-text-field
-            label="Append"
             append-icon="mdi-map-marker"
+            label="Append"
           ></v-text-field>
 
           <v-text-field
-            label="Append inner"
             append-inner-icon="mdi-map-marker"
+            label="Append inner"
           ></v-text-field>
         </v-col>
 
@@ -44,14 +44,14 @@
           ></v-text-field>
 
           <v-text-field
-            label="Append"
             append-icon="mdi-map-marker"
+            label="Append"
             variant="solo"
           ></v-text-field>
 
           <v-text-field
-            label="Append inner"
             append-inner-icon="mdi-map-marker"
+            label="Append inner"
             variant="solo"
           ></v-text-field>
         </v-col>
@@ -73,14 +73,14 @@
           ></v-text-field>
 
           <v-text-field
-            label="Append"
             append-icon="mdi-map-marker"
+            label="Append"
             variant="outlined"
           ></v-text-field>
 
           <v-text-field
-            label="Append inner"
             append-inner-icon="mdi-map-marker"
+            label="Append inner"
             variant="outlined"
           ></v-text-field>
         </v-col>
@@ -90,27 +90,27 @@
           sm="6"
         >
           <v-text-field
-            variant="underlined"
             label="Prepend"
             prepend-icon="mdi-map-marker"
+            variant="underlined"
           ></v-text-field>
 
           <v-text-field
-            variant="underlined"
             label="Prepend inner"
             prepend-inner-icon="mdi-map-marker"
+            variant="underlined"
           ></v-text-field>
 
           <v-text-field
-            variant="underlined"
-            label="Append"
             append-icon="mdi-map-marker"
+            label="Append"
+            variant="underlined"
           ></v-text-field>
 
           <v-text-field
-            variant="underlined"
-            label="Append inner"
             append-inner-icon="mdi-map-marker"
+            label="Append inner"
+            variant="underlined"
           ></v-text-field>
         </v-col>
       </v-row>
diff --git a/packages/docs/src/examples/v-text-field/prop-label.vue b/packages/docs/src/examples/v-text-field/prop-label.vue
index 35a0a006446..8f420bc8789 100644
--- a/packages/docs/src/examples/v-text-field/prop-label.vue
+++ b/packages/docs/src/examples/v-text-field/prop-label.vue
@@ -4,8 +4,8 @@
     max-width="344"
   >
     <v-text-field
-      label="First name"
       hide-details="auto"
+      label="First name"
     ></v-text-field>
   </v-responsive>
 </template>
diff --git a/packages/docs/src/examples/v-text-field/prop-messages.vue b/packages/docs/src/examples/v-text-field/prop-messages.vue
index a7b55af9a69..af45af69b82 100644
--- a/packages/docs/src/examples/v-text-field/prop-messages.vue
+++ b/packages/docs/src/examples/v-text-field/prop-messages.vue
@@ -4,9 +4,9 @@
     max-width="344"
   >
     <v-text-field
+      hint="Enter your password to access this website"
       label="Password"
       type="input"
-      hint="Enter your password to access this website"
     ></v-text-field>
   </v-responsive>
 </template>
diff --git a/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue b/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue
index 026b76c0eaa..a3ff1eefa63 100644
--- a/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue
+++ b/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue
@@ -51,8 +51,8 @@
         <v-text-field
           label="Label Text"
           model-value="12:30:00"
-          type="time"
           suffix="PST"
+          type="time"
         ></v-text-field>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-text-field/prop-rules.vue b/packages/docs/src/examples/v-text-field/prop-rules.vue
index 6f67ea51b1e..0bfd9616ff0 100644
--- a/packages/docs/src/examples/v-text-field/prop-rules.vue
+++ b/packages/docs/src/examples/v-text-field/prop-rules.vue
@@ -5,8 +5,8 @@
   >
     <v-text-field
       :rules="[rules.required]"
-      clearable
       label="Last name"
+      clearable
     ></v-text-field>
   </v-responsive>
 </template>
diff --git a/packages/docs/src/examples/v-text-field/prop-validation.vue b/packages/docs/src/examples/v-text-field/prop-validation.vue
index ab4b78d74fd..8e621205e85 100644
--- a/packages/docs/src/examples/v-text-field/prop-validation.vue
+++ b/packages/docs/src/examples/v-text-field/prop-validation.vue
@@ -10,8 +10,8 @@
             v-model="title"
             :rules="[rules.required, rules.counter]"
             label="Title"
-            counter
             maxlength="20"
+            counter
           ></v-text-field>
         </v-col>
 
diff --git a/packages/docs/src/examples/v-text-field/prop-variant.vue b/packages/docs/src/examples/v-text-field/prop-variant.vue
index f1d6543108d..9677d7811b3 100644
--- a/packages/docs/src/examples/v-text-field/prop-variant.vue
+++ b/packages/docs/src/examples/v-text-field/prop-variant.vue
@@ -4,8 +4,8 @@
       <v-row>
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <v-text-field
             label="Regular"
@@ -15,20 +15,20 @@
 
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <v-text-field
             label="Solo"
-            variant="solo"
             placeholder="Placeholder"
+            variant="solo"
           ></v-text-field>
         </v-col>
 
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <v-text-field
             label="Filled"
@@ -39,8 +39,8 @@
 
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <v-text-field
             label="Outlined"
@@ -51,8 +51,8 @@
 
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <v-text-field
             label="Plain"
@@ -63,8 +63,8 @@
 
         <v-col
           cols="12"
-          sm="6"
           md="4"
+          sm="6"
         >
           <v-text-field
             label="Underlined"
diff --git a/packages/docs/src/examples/v-text-field/slot-icons.vue b/packages/docs/src/examples/v-text-field/slot-icons.vue
index c099459d5e4..3ee21e7cc25 100644
--- a/packages/docs/src/examples/v-text-field/slot-icons.vue
+++ b/packages/docs/src/examples/v-text-field/slot-icons.vue
@@ -5,10 +5,10 @@
         <v-col cols="12">
           <v-text-field
             v-model="message"
-            clearable
             label="Message"
             type="text"
             variant="outlined"
+            clearable
           >
             <template v-slot:prepend>
               <v-tooltip location="bottom">
@@ -25,16 +25,16 @@
                 <v-progress-circular
                   v-if="loading"
                   color="info"
-                  indeterminate
                   size="24"
+                  indeterminate
                 ></v-progress-circular>
 
                 <img
                   v-else
+                  alt=""
                   height="24"
-                  width="24"
                   src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
-                  alt=""
+                  width="24"
                 >
               </v-fade-transition>
             </template>
diff --git a/packages/docs/src/examples/v-text-field/slot-progress.vue b/packages/docs/src/examples/v-text-field/slot-progress.vue
index 29d26b51e12..d73ad129020 100644
--- a/packages/docs/src/examples/v-text-field/slot-progress.vue
+++ b/packages/docs/src/examples/v-text-field/slot-progress.vue
@@ -8,14 +8,14 @@
     <v-text-field
       v-model="value"
       label="Type characters to change the loader color"
-      loading
       placeholder="Start typing..."
+      loading
     >
       <template v-slot:loader>
         <v-progress-linear
           :active="custom"
-          :model-value="progress"
           :color="color"
+          :model-value="progress"
           height="7"
           indeterminate
         ></v-progress-linear>
diff --git a/packages/docs/src/examples/v-text-field/usage.vue b/packages/docs/src/examples/v-text-field/usage.vue
index 22a753cdaa5..d54385d846b 100644
--- a/packages/docs/src/examples/v-text-field/usage.vue
+++ b/packages/docs/src/examples/v-text-field/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-text-field v-bind="props" v-model="field"></v-text-field>
@@ -16,14 +16,10 @@
 
       <v-checkbox v-model="clearable" label="Clearable"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref, watch } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-text-field'
   const model = ref('default')
   const clearable = ref(false)
diff --git a/packages/docs/src/examples/v-textarea/misc-signup-form.vue b/packages/docs/src/examples/v-textarea/misc-signup-form.vue
index d16e03b20d1..ea0c10b7008 100644
--- a/packages/docs/src/examples/v-textarea/misc-signup-form.vue
+++ b/packages/docs/src/examples/v-textarea/misc-signup-form.vue
@@ -31,34 +31,34 @@
       <v-text-field
         v-model="password"
         :rules="[rules.password, rules.length(6)]"
-        variant="filled"
         color="deep-purple"
         counter="6"
         label="Password"
         style="min-height: 96px"
         type="password"
+        variant="filled"
       ></v-text-field>
       <v-text-field
         v-model="phone"
-        variant="filled"
         color="deep-purple"
         label="Phone number"
+        variant="filled"
       ></v-text-field>
       <v-text-field
         v-model="email"
         :rules="[rules.email]"
-        variant="filled"
         color="deep-purple"
         label="Email address"
         type="email"
+        variant="filled"
       ></v-text-field>
       <v-textarea
         v-model="bio"
-        auto-grow
-        variant="filled"
         color="deep-purple"
         label="Bio"
         rows="1"
+        variant="filled"
+        auto-grow
       ></v-textarea>
       <v-checkbox
         v-model="agreement"
diff --git a/packages/docs/src/examples/v-textarea/prop-auto-grow.vue b/packages/docs/src/examples/v-textarea/prop-auto-grow.vue
index 52a3edee79c..70eb3e89c32 100644
--- a/packages/docs/src/examples/v-textarea/prop-auto-grow.vue
+++ b/packages/docs/src/examples/v-textarea/prop-auto-grow.vue
@@ -1,11 +1,11 @@
 <template>
   <v-container fluid>
     <v-textarea
+      label="Label"
+      model-value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
       name="input-7-1"
       variant="filled"
-      label="Label"
       auto-grow
-      model-value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
     ></v-textarea>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-textarea/prop-clearable.vue b/packages/docs/src/examples/v-textarea/prop-clearable.vue
index 6e9b7f922c2..a6032cfeabf 100644
--- a/packages/docs/src/examples/v-textarea/prop-clearable.vue
+++ b/packages/docs/src/examples/v-textarea/prop-clearable.vue
@@ -1,10 +1,10 @@
 <template>
   <v-container fluid>
     <v-textarea
-      clearable
       clear-icon="mdi-close-circle"
       label="Text"
       model-value="This is clearable text."
+      clearable
     ></v-textarea>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-textarea/prop-counter.vue b/packages/docs/src/examples/v-textarea/prop-counter.vue
index 6f3a56c6b4f..63ae16281a4 100644
--- a/packages/docs/src/examples/v-textarea/prop-counter.vue
+++ b/packages/docs/src/examples/v-textarea/prop-counter.vue
@@ -1,10 +1,10 @@
 <template>
   <v-container fluid>
     <v-textarea
-      counter
-      label="Text"
-      :rules="rules"
       :model-value="value"
+      :rules="rules"
+      label="Text"
+      counter
     ></v-textarea>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-textarea/prop-icons.vue b/packages/docs/src/examples/v-textarea/prop-icons.vue
index b1c2f457310..f33b1b308cf 100644
--- a/packages/docs/src/examples/v-textarea/prop-icons.vue
+++ b/packages/docs/src/examples/v-textarea/prop-icons.vue
@@ -8,8 +8,8 @@
         <v-textarea
           class="mx-2"
           label="prepend-icon"
-          rows="1"
           prepend-icon="mdi-comment"
+          rows="1"
         ></v-textarea>
       </v-col>
       <v-col
@@ -28,9 +28,9 @@
         sm="6"
       >
         <v-textarea
-          prepend-inner-icon="mdi-comment"
           class="mx-2"
           label="prepend-inner-icon"
+          prepend-inner-icon="mdi-comment"
           rows="1"
         ></v-textarea>
       </v-col>
diff --git a/packages/docs/src/examples/v-textarea/prop-no-resize.vue b/packages/docs/src/examples/v-textarea/prop-no-resize.vue
index d223d8386fa..fb44dec9d2e 100644
--- a/packages/docs/src/examples/v-textarea/prop-no-resize.vue
+++ b/packages/docs/src/examples/v-textarea/prop-no-resize.vue
@@ -1,10 +1,10 @@
 <template>
   <v-container fluid>
     <v-textarea
+      :model-value="value"
       label="Text"
-      no-resize
       rows="1"
-      :model-value="value"
+      no-resize
     ></v-textarea>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/v-textarea/prop-rows.vue b/packages/docs/src/examples/v-textarea/prop-rows.vue
index 6fe9c33d0d6..a7c9cf637cc 100644
--- a/packages/docs/src/examples/v-textarea/prop-rows.vue
+++ b/packages/docs/src/examples/v-textarea/prop-rows.vue
@@ -7,10 +7,10 @@
       >
         <v-textarea
           label="One row"
-          auto-grow
-          variant="outlined"
-          rows="1"
           row-height="15"
+          rows="1"
+          variant="outlined"
+          auto-grow
         ></v-textarea>
       </v-col>
       <v-col
@@ -18,11 +18,11 @@
         sm="6"
       >
         <v-textarea
-          variant="filled"
-          auto-grow
           label="Two rows"
-          rows="2"
           row-height="20"
+          rows="2"
+          variant="filled"
+          auto-grow
         ></v-textarea>
       </v-col>
       <v-col
@@ -31,10 +31,10 @@
       >
         <v-textarea
           label="Three rows"
-          auto-grow
-          variant="outlined"
-          rows="3"
           row-height="25"
+          rows="3"
+          variant="outlined"
+          auto-grow
           shaped
         ></v-textarea>
       </v-col>
@@ -43,11 +43,11 @@
         sm="6"
       >
         <v-textarea
-          variant="filled"
-          auto-grow
           label="Four rows"
-          rows="4"
           row-height="30"
+          rows="4"
+          variant="filled"
+          auto-grow
           shaped
         ></v-textarea>
       </v-col>
diff --git a/packages/docs/src/examples/v-textarea/usage.vue b/packages/docs/src/examples/v-textarea/usage.vue
index 920802d1fd3..564ed9dfab4 100644
--- a/packages/docs/src/examples/v-textarea/usage.vue
+++ b/packages/docs/src/examples/v-textarea/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-textarea v-bind="props" v-model="field" hide-details></v-textarea>
@@ -16,14 +16,10 @@
 
       <v-checkbox v-model="clearable" label="Clearable"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref, watch } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-textarea'
   const model = ref('default')
   const clearable = ref(false)
diff --git a/packages/docs/src/examples/v-theme-provider/prop-with-background.vue b/packages/docs/src/examples/v-theme-provider/prop-with-background.vue
index ea5a4a94803..dd08b7b6348 100644
--- a/packages/docs/src/examples/v-theme-provider/prop-with-background.vue
+++ b/packages/docs/src/examples/v-theme-provider/prop-with-background.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-theme-provider theme="dark" with-background class="pa-10">
-    <v-card title="Title" subtitle="Subtitle"></v-card>
+  <v-theme-provider class="pa-10" theme="dark" with-background>
+    <v-card subtitle="Subtitle" title="Title"></v-card>
   </v-theme-provider>
 </template>
diff --git a/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue
index 555b679894a..ef73d36c4ad 100644
--- a/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue
+++ b/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue
@@ -10,10 +10,10 @@
         v-model:return-value="time"
         :close-on-content-click="false"
         :nudge-right="40"
-        transition="scale-transition"
-        offset-y
         max-width="290px"
         min-width="290px"
+        transition="scale-transition"
+        offset-y
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
@@ -42,8 +42,8 @@
         ref="dialog"
         v-model="modal2"
         v-model:return-value="time"
-        persistent
         width="290px"
+        persistent
       >
         <template v-slot:activator="{ on, attrs }">
           <v-text-field
@@ -62,15 +62,15 @@
         >
           <v-spacer></v-spacer>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="modal2 = false"
           >
             Cancel
           </v-btn>
           <v-btn
-            variant="text"
             color="primary"
+            variant="text"
             @click="dialog.save(time)"
           >
             OK
diff --git a/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
index b4405f5acac..4ce57b15c70 100644
--- a/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
@@ -6,9 +6,9 @@
       :allowed-minutes="allowedMinutes"
       class="mt-4"
       format="24hr"
-      scrollable
-      min="9:30"
       max="22:15"
+      min="9:30"
+      scrollable
     ></v-time-picker>
     <v-time-picker
       v-model="timeStep"
diff --git a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue
index b368230409f..6c594128398 100644
--- a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue
@@ -1,8 +1,8 @@
 <template>
   <v-row
 
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-time-picker
       v-model="picker"
diff --git a/packages/docs/src/examples/v-time-picker/prop-disabled.vue b/packages/docs/src/examples/v-time-picker/prop-disabled.vue
index ab73f5c6f03..fb9a3d930c7 100644
--- a/packages/docs/src/examples/v-time-picker/prop-disabled.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-disabled.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-time-picker
       v-model="picker"
diff --git a/packages/docs/src/examples/v-time-picker/prop-elevation.vue b/packages/docs/src/examples/v-time-picker/prop-elevation.vue
index d381cdd9c91..87d5ea61a7d 100644
--- a/packages/docs/src/examples/v-time-picker/prop-elevation.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-elevation.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-time-picker
       v-model="picker"
diff --git a/packages/docs/src/examples/v-time-picker/prop-range.vue b/packages/docs/src/examples/v-time-picker/prop-range.vue
index fd0e0d4d852..cb21e35082c 100644
--- a/packages/docs/src/examples/v-time-picker/prop-range.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-range.vue
@@ -2,8 +2,8 @@
   <div>
     <h1>Plan your event:</h1>
     <v-row
-      justify="space-around"
       align="center"
+      justify="space-around"
     >
       <v-col style="width: 350px; flex: 0 1 auto;">
         <h2>Start:</h2>
diff --git a/packages/docs/src/examples/v-time-picker/prop-readonly.vue b/packages/docs/src/examples/v-time-picker/prop-readonly.vue
index b2aff9ca4dd..8d34675c0fe 100644
--- a/packages/docs/src/examples/v-time-picker/prop-readonly.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-readonly.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-time-picker
       v-model="picker"
diff --git a/packages/docs/src/examples/v-time-picker/prop-scrollable.vue b/packages/docs/src/examples/v-time-picker/prop-scrollable.vue
index 99de50c3416..a3e281e4c50 100644
--- a/packages/docs/src/examples/v-time-picker/prop-scrollable.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-scrollable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-time-picker
       v-model="picker"
diff --git a/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue b/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue
index 3b0e37f4f60..e76bfee6b54 100644
--- a/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row
-    justify="space-around"
     align="center"
+    justify="space-around"
   >
     <v-time-picker
       v-model="picker"
diff --git a/packages/docs/src/examples/v-time-picker/prop-width.vue b/packages/docs/src/examples/v-time-picker/prop-width.vue
index 8c835147280..6fe2cb38d70 100644
--- a/packages/docs/src/examples/v-time-picker/prop-width.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-width.vue
@@ -2,16 +2,16 @@
   <v-row align="center">
     <v-time-picker
       v-model="time"
+      class="ms-4"
       type="month"
       width="290"
-      class="ms-4"
     ></v-time-picker>
     <v-col class="pa-0 mx-4 mt-4 mt-sm-0">
       <v-time-picker
         v-model="time"
         :landscape="$vuetify.breakpoint.mdAndUp"
-        full-width
         type="month"
+        full-width
       ></v-time-picker>
     </v-col>
   </v-row>
diff --git a/packages/docs/src/examples/v-timeline/misc-advanced.vue b/packages/docs/src/examples/v-timeline/misc-advanced.vue
index 92bf33a369c..3e673d61a3b 100644
--- a/packages/docs/src/examples/v-timeline/misc-advanced.vue
+++ b/packages/docs/src/examples/v-timeline/misc-advanced.vue
@@ -5,19 +5,19 @@
       side="end"
     >
       <v-timeline-item
-        fill-dot
         class="mb-12"
         dot-color="orange"
         size="large"
+        fill-dot
       >
         <template v-slot:icon>
           <span>JL</span>
         </template>
         <v-text-field
           v-model="input"
-          hide-details
-          label="Leave a comment..."
           density="compact"
+          label="Leave a comment..."
+          hide-details
           @keydown.enter="comment"
         >
           <template v-slot:append>
@@ -79,8 +79,8 @@
             <v-chip
               class="ms-0"
               color="purple"
-              label
               size="small"
+              label
             >
               APP
             </v-chip>
diff --git a/packages/docs/src/examples/v-timeline/prop-color.vue b/packages/docs/src/examples/v-timeline/prop-color.vue
index ce91ff2cb77..2813de2a0c6 100644
--- a/packages/docs/src/examples/v-timeline/prop-color.vue
+++ b/packages/docs/src/examples/v-timeline/prop-color.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-timeline side="end" align="start">
+  <v-timeline align="start" side="end">
     <v-timeline-item
       dot-color="pink"
       size="small"
diff --git a/packages/docs/src/examples/v-timeline/prop-single-side.vue b/packages/docs/src/examples/v-timeline/prop-single-side.vue
index 1f841bd6a90..0b53c44b0e8 100644
--- a/packages/docs/src/examples/v-timeline/prop-single-side.vue
+++ b/packages/docs/src/examples/v-timeline/prop-single-side.vue
@@ -7,9 +7,9 @@
       size="small"
     >
       <v-alert
-        :value="true"
         :color="item.color"
         :icon="item.icon"
+        :value="true"
       >
         Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
       </v-alert>
diff --git a/packages/docs/src/examples/v-timeline/prop-size.vue b/packages/docs/src/examples/v-timeline/prop-size.vue
index ca955225cc9..5e916380492 100644
--- a/packages/docs/src/examples/v-timeline/prop-size.vue
+++ b/packages/docs/src/examples/v-timeline/prop-size.vue
@@ -7,9 +7,9 @@
       <v-card>
         <v-card-title class="bg-purple-lighten-2">
           <v-icon
-            size="large"
             class="me-4"
             icon="mdi-magnify"
+            size="large"
           ></v-icon>
           <h2 class="font-weight-light">
             Title 1
@@ -23,8 +23,8 @@
 
     <v-timeline-item
       dot-color="amber-lighten-1"
-      fill-dot
       size="x-small"
+      fill-dot
     >
       <v-card>
         <v-card-title class="bg-amber-lighten-1 justify-end">
@@ -32,8 +32,8 @@
             Title 2
           </h2>
           <v-icon
-            size="large"
             icon="mdi-home-outline"
+            size="large"
           ></v-icon>
         </v-card-title>
         <v-card-text>
@@ -50,8 +50,8 @@
         <v-card-title class="bg-cyan-lighten-1">
           <v-icon
             class="me-4"
-            size="large"
             icon="mdi-email-outline"
+            size="large"
           ></v-icon>
           <h2 class="font-weight-light">
             Title 3
@@ -65,8 +65,8 @@
 
     <v-timeline-item
       dot-color="red-lighten-1"
-      fill-dot
       size="x-small"
+      fill-dot
     >
       <v-card>
         <v-card-title class="bg-red-lighten-1 justify-end">
@@ -74,8 +74,8 @@
             Title 4
           </h2>
           <v-icon
-            size="large"
             icon="mdi-account-multiple-outline"
+            size="large"
           ></v-icon>
         </v-card-title>
         <v-card-text>
@@ -92,8 +92,8 @@
         <v-card-title class="bg-green-lighten-1">
           <v-icon
             class="me-4"
-            size="large"
             icon="mdi-phone-in-talk"
+            size="large"
           ></v-icon>
           <h2 class="font-weight-light">
             Title 5
diff --git a/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue b/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue
index 12f4ebc8d69..eeab0de26cf 100644
--- a/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue
+++ b/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
-    max-width="500"
     class="mx-auto"
+    max-width="500"
   >
     <v-toolbar
       :color="selection.length ? 'grey darken-4' : 'deep-purple accent-4'"
@@ -50,8 +50,8 @@
       <v-select
         v-model="selection"
         :items="items"
-        multiple
         label="Select an option"
+        multiple
       ></v-select>
     </v-card-text>
   </v-card>
diff --git a/packages/docs/src/examples/v-toolbar/misc-variations.vue b/packages/docs/src/examples/v-toolbar/misc-variations.vue
index 54d7e43865e..adfe4263e28 100644
--- a/packages/docs/src/examples/v-toolbar/misc-variations.vue
+++ b/packages/docs/src/examples/v-toolbar/misc-variations.vue
@@ -3,15 +3,15 @@
     <v-col
       v-for="(bar, i) in bars"
       :key="i"
+      class="my-4"
       cols="12"
-      sm="12"
       md="6"
-      class="my-4"
+      sm="12"
     >
       <v-card
         color="grey-lighten-4"
-        flat
         height="200px"
+        flat
       >
         <v-toolbar
           :color="bar.class"
diff --git a/packages/docs/src/examples/v-toolbar/prop-background.vue b/packages/docs/src/examples/v-toolbar/prop-background.vue
index a7cdf1c85d6..6d8892866f0 100644
--- a/packages/docs/src/examples/v-toolbar/prop-background.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-background.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-toolbar
+      image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
       dark
       prominent
-      image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
     >
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
diff --git a/packages/docs/src/examples/v-toolbar/prop-collapse.vue b/packages/docs/src/examples/v-toolbar/prop-collapse.vue
index 21e4c807f98..f424c15680d 100644
--- a/packages/docs/src/examples/v-toolbar/prop-collapse.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-collapse.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card
     color="grey-lighten-4"
-    flat
     height="200px"
     rounded="0"
+    flat
   >
     <v-toolbar collapse>
       <v-btn icon>
diff --git a/packages/docs/src/examples/v-toolbar/prop-dense.vue b/packages/docs/src/examples/v-toolbar/prop-dense.vue
index b9ad0fa584a..4e860f16bb4 100644
--- a/packages/docs/src/examples/v-toolbar/prop-dense.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-dense.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card
     color="grey-lighten-4"
-    flat
     height="200px"
     rounded="0"
+    flat
   >
     <v-toolbar density="compact">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
diff --git a/packages/docs/src/examples/v-toolbar/prop-extended.vue b/packages/docs/src/examples/v-toolbar/prop-extended.vue
index eb481d098dc..1a1b006d919 100644
--- a/packages/docs/src/examples/v-toolbar/prop-extended.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-extended.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card
     color="grey-lighten-4"
-    flat
     height="200px"
     rounded="0"
+    flat
   >
     <v-toolbar extended>
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
diff --git a/packages/docs/src/examples/v-toolbar/prop-extension-height.vue b/packages/docs/src/examples/v-toolbar/prop-extension-height.vue
index 8a09da020c2..ba80866ae6a 100644
--- a/packages/docs/src/examples/v-toolbar/prop-extension-height.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-extension-height.vue
@@ -1,13 +1,13 @@
 <template>
   <v-card
     color="grey-lighten-4"
-    flat
     height="200px"
     rounded="0"
+    flat
   >
     <v-toolbar
-      extended
       extension-height="100"
+      extended
     >
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
diff --git a/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue b/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue
index c9f3c46403c..65299f8627f 100644
--- a/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue
@@ -1,17 +1,17 @@
 <template>
   <v-card
     class="pa-4"
-    flat
     height="300px"
     img="https://cdn.vuetifyjs.com/images/toolbar/map.jpg"
+    flat
   >
     <v-toolbar
       dense
       floating
     >
       <v-text-field
-        hide-details
         prepend-icon="mdi-magnify"
+        hide-details
         single-line
       ></v-text-field>
 
diff --git a/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue b/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue
index ebb6f2ef9a4..9448d038c1f 100644
--- a/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue
@@ -5,8 +5,8 @@
         <div>
           <v-toolbar>
             <v-btn
-              icon
               class="hidden-xs-only"
+              icon
             >
               <v-icon>mdi-arrow-left</v-icon>
             </v-btn>
@@ -16,8 +16,8 @@
             <v-spacer></v-spacer>
 
             <v-btn
-              icon
               class="hidden-xs-only"
+              icon
             >
               <v-icon>mdi-magnify</v-icon>
             </v-btn>
diff --git a/packages/docs/src/examples/v-toolbar/prop-prominent.vue b/packages/docs/src/examples/v-toolbar/prop-prominent.vue
index eb1127cb1a8..652aee2868e 100644
--- a/packages/docs/src/examples/v-toolbar/prop-prominent.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-prominent.vue
@@ -1,13 +1,13 @@
 <template>
   <v-card
     color="grey-lighten-4"
-    flat
     height="200px"
     rounded="0"
+    flat
   >
     <v-toolbar
-      prominent
       extended
+      prominent
     >
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
diff --git a/packages/docs/src/examples/v-toolbar/usage.vue b/packages/docs/src/examples/v-toolbar/usage.vue
index 2c5a6849f45..e7a63e23298 100644
--- a/packages/docs/src/examples/v-toolbar/usage.vue
+++ b/packages/docs/src/examples/v-toolbar/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div>
       <v-toolbar v-bind="props">
@@ -14,20 +14,16 @@
     </div>
 
     <template v-slot:configuration>
-      <v-select v-model="density" label="Density" :items="['default', 'comfortable', 'compact']"></v-select>
+      <v-select v-model="density" :items="['default', 'comfortable', 'compact']" label="Density"></v-select>
 
       <v-text-field v-model="title" label="Title" clearable></v-text-field>
 
       <v-checkbox v-model="collapse" label="Collapsed"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-toolbar'
   const model = ref('default')
   const collapse = ref()
diff --git a/packages/docs/src/examples/v-tooltip/prop-color.vue b/packages/docs/src/examples/v-tooltip/prop-color.vue
index ae809f03738..02382bbee40 100644
--- a/packages/docs/src/examples/v-tooltip/prop-color.vue
+++ b/packages/docs/src/examples/v-tooltip/prop-color.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-center d-flex align-center justify-space-around">
-    <v-tooltip bottom color="primary">
+    <v-tooltip color="primary" bottom>
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
@@ -13,7 +13,7 @@
       <span>Primary tooltip</span>
     </v-tooltip>
 
-    <v-tooltip bottom color="success">
+    <v-tooltip color="success" bottom>
       <template v-slot:activator="{ props }">
         <v-btn
           color="success"
@@ -26,7 +26,7 @@
       <span>Success tooltip</span>
     </v-tooltip>
 
-    <v-tooltip bottom color="warning">
+    <v-tooltip color="warning" bottom>
       <template v-slot:activator="{ props }">
         <v-btn
           color="warning"
@@ -39,7 +39,7 @@
       <span>Warning tooltip</span>
     </v-tooltip>
 
-    <v-tooltip bottom color="error">
+    <v-tooltip color="error" bottom>
       <template v-slot:activator="{ props }">
         <v-btn
           color="error"
diff --git a/packages/docs/src/examples/v-tooltip/prop-visibility.vue b/packages/docs/src/examples/v-tooltip/prop-visibility.vue
index 0f6dd7111f1..548c0a8fefa 100644
--- a/packages/docs/src/examples/v-tooltip/prop-visibility.vue
+++ b/packages/docs/src/examples/v-tooltip/prop-visibility.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container
-    fluid
     class="text-center"
+    fluid
   >
     <v-row
       class="flex"
@@ -14,8 +14,8 @@
       </v-col>
 
       <v-col
-        cols="12"
         class="mt-12"
+        cols="12"
       >
         <v-tooltip
           v-model="show"
diff --git a/packages/docs/src/examples/v-tooltip/usage.vue b/packages/docs/src/examples/v-tooltip/usage.vue
index 598e6cafe0f..ae2032e54b1 100644
--- a/packages/docs/src/examples/v-tooltip/usage.vue
+++ b/packages/docs/src/examples/v-tooltip/usage.vue
@@ -1,9 +1,9 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
-    :options="options"
     :name="name"
+    :options="options"
   >
     <div class="text-center">
       <v-tooltip v-bind="props">
@@ -20,14 +20,10 @@
 
       <v-checkbox v-model="active" label="Always show"></v-checkbox>
     </template>
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-tooltip'
   const model = ref('default')
   const text = ref('Tooltip')
diff --git a/packages/docs/src/examples/v-touch/usage.vue b/packages/docs/src/examples/v-touch/usage.vue
index 26c83a0653b..18b2f7fd270 100644
--- a/packages/docs/src/examples/v-touch/usage.vue
+++ b/packages/docs/src/examples/v-touch/usage.vue
@@ -1,15 +1,15 @@
 <template>
   <v-row
+    align="center"
+    class="bg-grey-lighten-2"
+    justify="center"
+    style="height: 500px"
     v-touch="{
       left: () => swipe('Left'),
       right: () => swipe('Right'),
       up: () => swipe('Up'),
       down: () => swipe('Down')
     }"
-    align="center"
-    class="bg-grey-lighten-2"
-    justify="center"
-    style="height: 500px"
   >
     <v-col class="text-center">
       <div class="text-subtitle-2">Swipe Direction</div>
diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
index 35c34429243..e0b2bbc6ebb 100644
--- a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
+++ b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
@@ -6,27 +6,27 @@
     <v-sheet class="pa-4 bg-primary-lighten-2">
       <v-text-field
         v-model="search"
+        clear-icon="mdi-close-circle-outline"
         label="Search Company Directory"
+        clearable
         dark
         flat
-        solo-inverted
         hide-details
-        clearable
-        clear-icon="mdi-close-circle-outline"
+        solo-inverted
       ></v-text-field>
       <v-checkbox
         v-model="caseSensitive"
+        label="Case sensitive search"
         dark
         hide-details
-        label="Case sensitive search"
       ></v-checkbox>
     </v-sheet>
     <v-card-text>
       <v-treeview
         v-model:open="open"
+        :filter="filter"
         :items="items"
         :search="search"
-        :filter="filter"
       >
         <template v-slot:prepend="{ item }">
           <v-icon
diff --git a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
index 0dec93c895f..1fa861b86bc 100644
--- a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
+++ b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
@@ -14,16 +14,16 @@
         <v-card-text>
           <v-treeview
             v-model="tree"
-            :load-children="load"
             :items="items"
+            :load-children="load"
+            expand-icon="mdi-chevron-down"
+            indeterminate-icon="mdi-bookmark-minus"
+            off-icon="mdi-bookmark-outline"
+            on-icon="mdi-bookmark"
             selected-color="indigo"
             open-on-click
-            selectable
             return-object
-            expand-icon="mdi-chevron-down"
-            on-icon="mdi-bookmark"
-            off-icon="mdi-bookmark-outline"
-            indeterminate-icon="mdi-bookmark-minus"
+            selectable
           >
           </v-treeview>
         </v-card-text>
@@ -51,14 +51,14 @@
             <v-chip
               v-for="(selection, i) in tree"
               :key="i"
+              class="ma-1"
               color="grey"
               dark
               small
-              class="ma-1"
             >
               <v-icon
-                start
                 size="small"
+                start
               >
                 mdi-beer
               </v-icon>
diff --git a/packages/docs/src/examples/v-treeview/playground.vue b/packages/docs/src/examples/v-treeview/playground.vue
index 1edfe73bde2..b595e7a2860 100644
--- a/packages/docs/src/examples/v-treeview/playground.vue
+++ b/packages/docs/src/examples/v-treeview/playground.vue
@@ -32,32 +32,32 @@
       <v-col cols="12">
         <v-select
           v-model="selectedColor"
-          :items="selectedColors"
           :disabled="!selectable"
+          :items="selectedColors"
           label="Selected checkbox color"
         ></v-select>
       </v-col>
       <v-col cols="12">
         <v-select
           v-model="color"
-          :items="selectedColors"
           :disabled="!activatable"
+          :items="selectedColors"
           label="Active node color"
         ></v-select>
       </v-col>
     </v-row>
 
     <v-treeview
-      :items="items"
-      :dense="dense"
-      :selectable="selectable"
       :activatable="activatable"
+      :color="color"
+      :dense="dense"
       :hoverable="hoverable"
+      :items="items"
       :open-on-click="openOnClick"
+      :rounded="rounded"
+      :selectable="selectable"
       :selected-color="selectedColor"
-      :color="color"
       :shaped="shaped"
-      :rounded="rounded"
     ></v-treeview>
   </div>
 </template>
diff --git a/packages/docs/src/examples/v-treeview/prop-activatable.vue b/packages/docs/src/examples/v-treeview/prop-activatable.vue
index 5684f39b142..c53ecc0a794 100644
--- a/packages/docs/src/examples/v-treeview/prop-activatable.vue
+++ b/packages/docs/src/examples/v-treeview/prop-activatable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-treeview
-    activatable
     :items="items"
+    activatable
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-color.vue b/packages/docs/src/examples/v-treeview/prop-color.vue
index 10b48b3766c..eac3546d7f8 100644
--- a/packages/docs/src/examples/v-treeview/prop-color.vue
+++ b/packages/docs/src/examples/v-treeview/prop-color.vue
@@ -1,8 +1,8 @@
 <template>
   <v-treeview
-    activatable
-    color="warning"
     :items="items"
+    color="warning"
+    activatable
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-dense.vue b/packages/docs/src/examples/v-treeview/prop-dense.vue
index b8676afd313..1521d4ab7a1 100644
--- a/packages/docs/src/examples/v-treeview/prop-dense.vue
+++ b/packages/docs/src/examples/v-treeview/prop-dense.vue
@@ -1,7 +1,7 @@
 <template>
   <v-treeview
-    dense
     :items="items"
+    dense
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-hoverable.vue b/packages/docs/src/examples/v-treeview/prop-hoverable.vue
index 986b13c2866..040197fe85e 100644
--- a/packages/docs/src/examples/v-treeview/prop-hoverable.vue
+++ b/packages/docs/src/examples/v-treeview/prop-hoverable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-treeview
-    hoverable
     :items="items"
+    hoverable
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue b/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
index ec85b0450d4..3fd8d1078e0 100644
--- a/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
+++ b/packages/docs/src/examples/v-treeview/prop-item-disabled.vue
@@ -1,8 +1,8 @@
 <template>
   <v-treeview
-    selectable
-    item-disabled="locked"
     :items="items"
+    item-disabled="locked"
+    selectable
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-load-children.vue b/packages/docs/src/examples/v-treeview/prop-load-children.vue
index 6e8861b1baa..3314e403d4d 100644
--- a/packages/docs/src/examples/v-treeview/prop-load-children.vue
+++ b/packages/docs/src/examples/v-treeview/prop-load-children.vue
@@ -13,8 +13,8 @@
           v-model:open="open"
           :items="items"
           :load-children="fetchUsers"
-          activatable
           color="warning"
+          activatable
           open-on-click
           transition
         >
@@ -43,8 +43,8 @@
             v-else
             :key="selected.id"
             class="pt-6 mx-auto"
-            flat
             max-width="400"
+            flat
           >
             <v-card-text>
               <v-avatar
@@ -73,16 +73,16 @@
             >
               <v-col
                 class="text-right me-4 mb-2"
-                tag="strong"
                 cols="5"
+                tag="strong"
               >
                 Company:
               </v-col>
               <v-col>{{ selected.company.name }}</v-col>
               <v-col
                 class="text-right me-4 mb-2"
-                tag="strong"
                 cols="5"
+                tag="strong"
               >
                 Website:
               </v-col>
@@ -94,8 +94,8 @@
               </v-col>
               <v-col
                 class="text-right me-4 mb-2"
-                tag="strong"
                 cols="5"
+                tag="strong"
               >
                 Phone:
               </v-col>
diff --git a/packages/docs/src/examples/v-treeview/prop-open-all.vue b/packages/docs/src/examples/v-treeview/prop-open-all.vue
index 083289af9aa..597f4437f92 100644
--- a/packages/docs/src/examples/v-treeview/prop-open-all.vue
+++ b/packages/docs/src/examples/v-treeview/prop-open-all.vue
@@ -1,7 +1,7 @@
 <template>
   <v-treeview
-    open-all
     :items="items"
+    open-all
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-rounded.vue b/packages/docs/src/examples/v-treeview/prop-rounded.vue
index a4ba59d4699..1220c632d44 100644
--- a/packages/docs/src/examples/v-treeview/prop-rounded.vue
+++ b/packages/docs/src/examples/v-treeview/prop-rounded.vue
@@ -1,9 +1,9 @@
 <template>
   <v-treeview
-    rounded
-    hoverable
-    activatable
     :items="items"
+    activatable
+    hoverable
+    rounded
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-selectable.vue b/packages/docs/src/examples/v-treeview/prop-selectable.vue
index 9483131c8fc..e557a84b0de 100644
--- a/packages/docs/src/examples/v-treeview/prop-selectable.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selectable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-treeview
-    selectable
     :items="items"
+    selectable
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-selected-color.vue b/packages/docs/src/examples/v-treeview/prop-selected-color.vue
index 1da25cf7f08..6a829d3d0fe 100644
--- a/packages/docs/src/examples/v-treeview/prop-selected-color.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selected-color.vue
@@ -1,8 +1,8 @@
 <template>
   <v-treeview
-    selectable
-    selected-color="red"
     :items="items"
+    selected-color="red"
+    selectable
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/prop-selection-type.vue b/packages/docs/src/examples/v-treeview/prop-selection-type.vue
index 33322aef598..3a7679835ba 100644
--- a/packages/docs/src/examples/v-treeview/prop-selection-type.vue
+++ b/packages/docs/src/examples/v-treeview/prop-selection-type.vue
@@ -11,9 +11,9 @@
           v-model="selection"
           :items="items"
           :selection-type="selectionType"
-          selectable
-          return-object
           open-all
+          return-object
+          selectable
         ></v-treeview>
       </v-col>
       <v-divider vertical></v-divider>
diff --git a/packages/docs/src/examples/v-treeview/prop-shaped.vue b/packages/docs/src/examples/v-treeview/prop-shaped.vue
index b8219710387..0950f8b9725 100644
--- a/packages/docs/src/examples/v-treeview/prop-shaped.vue
+++ b/packages/docs/src/examples/v-treeview/prop-shaped.vue
@@ -1,9 +1,9 @@
 <template>
   <v-treeview
-    shaped
-    hoverable
-    activatable
     :items="items"
+    activatable
+    hoverable
+    shaped
   ></v-treeview>
 </template>
 
diff --git a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
index a4972ff1002..1116cb348f0 100644
--- a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
+++ b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
@@ -1,10 +1,10 @@
 <template>
   <v-treeview
     v-model="tree"
-    :open="initiallyOpen"
     :items="items"
-    activatable
+    :open="initiallyOpen"
     item-key="name"
+    activatable
     open-on-click
   >
     <template v-slot:prepend="{ item, open }">
diff --git a/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue b/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue
index 5f38c207d36..5302b744c7e 100644
--- a/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue
+++ b/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue
@@ -16,8 +16,8 @@
     >
       <template v-slot:default="{ item }">
         <v-list-item
-          :title="`Employee Name`"
           :subtitle="`Badge #${item}`"
+          :title="`Employee Name`"
         >
           <template v-slot:prepend>
             <v-icon class="bg-primary">mdi-account</v-icon>
diff --git a/packages/docs/src/examples/v-virtual-scroll/usage.vue b/packages/docs/src/examples/v-virtual-scroll/usage.vue
index 6a76909be2e..5e00620e7b3 100644
--- a/packages/docs/src/examples/v-virtual-scroll/usage.vue
+++ b/packages/docs/src/examples/v-virtual-scroll/usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <usage-example
+  <ExamplesUsageExample
     v-model="model"
     :code="code"
     :name="name"
@@ -15,14 +15,10 @@
 
     <!-- <template v-slot:configuration>
     </template> -->
-  </usage-example>
+  </ExamplesUsageExample>
 </template>
 
 <script setup>
-  // Utilities
-  import { computed, ref } from 'vue'
-  import { propsToString } from '@/util/helpers'
-
   const name = 'v-virtual-scroll'
   const model = ref('default')
   const items = Array.from({ length: 1000 }, (k, v) => v + 1)
diff --git a/packages/docs/src/examples/v-window/misc-account-creation.vue b/packages/docs/src/examples/v-window/misc-account-creation.vue
index 3653433dd06..97d49cd486b 100644
--- a/packages/docs/src/examples/v-window/misc-account-creation.vue
+++ b/packages/docs/src/examples/v-window/misc-account-creation.vue
@@ -45,9 +45,9 @@
         <div class="pa-4 text-center">
           <v-img
             class="mb-4"
-            contain
             height="128"
             src="https://cdn.vuetifyjs.com/images/logos/v.svg"
+            contain
           ></v-img>
           <h3 class="text-h6 font-weight-light mb-2">
             Welcome to Vuetify
diff --git a/packages/docs/src/examples/v-window/misc-onboarding.vue b/packages/docs/src/examples/v-window/misc-onboarding.vue
index 25c8bc09553..69c656e2189 100644
--- a/packages/docs/src/examples/v-window/misc-onboarding.vue
+++ b/packages/docs/src/examples/v-window/misc-onboarding.vue
@@ -1,8 +1,8 @@
 <template>
   <v-card
+    rounded="0"
     theme="dark"
     flat
-    rounded="0"
   >
     <v-window v-model="onboarding">
       <v-window-item
@@ -11,8 +11,8 @@
         :value="n"
       >
         <v-card
-          height="200"
           class="d-flex justify-center align-center"
+          height="200"
         >
           <span class="text-h2">
             Card {{ n }}
@@ -23,8 +23,8 @@
 
     <v-card-actions class="justify-space-between">
       <v-btn
-        variant="plain"
         icon="mdi-chevron-left"
+        variant="plain"
         @click="prev"
       ></v-btn>
       <v-item-group
@@ -46,8 +46,8 @@
         </v-item>
       </v-item-group>
       <v-btn
-        variant="plain"
         icon="mdi-chevron-right"
+        variant="plain"
         @click="next"
       ></v-btn>
     </v-card-actions>
diff --git a/packages/docs/src/examples/v-window/prop-direction.vue b/packages/docs/src/examples/v-window/prop-direction.vue
index 15ece3ace2c..8e3666ec8bd 100644
--- a/packages/docs/src/examples/v-window/prop-direction.vue
+++ b/packages/docs/src/examples/v-window/prop-direction.vue
@@ -1,17 +1,17 @@
 <template>
   <v-window
     v-model="onboarding"
-    show-arrows
     direction="vertical"
+    show-arrows
   >
     <v-window-item
       v-for="n in length"
       :key="`card-${n}`"
     >
       <v-card
+        class="d-flex align-center justify-center ma-2"
         elevation="2"
         height="200"
-        class="d-flex align-center justify-center ma-2"
       >
         <h1
           class="text-h2"
diff --git a/packages/docs/src/examples/v-window/prop-reverse.vue b/packages/docs/src/examples/v-window/prop-reverse.vue
index e60075883ee..6d900d95b89 100644
--- a/packages/docs/src/examples/v-window/prop-reverse.vue
+++ b/packages/docs/src/examples/v-window/prop-reverse.vue
@@ -1,17 +1,17 @@
 <template>
   <v-window
     v-model="onboarding"
-    show-arrows
     reverse
+    show-arrows
   >
     <v-window-item
       v-for="n in length"
       :key="`card-${n}`"
     >
       <v-card
+        class="d-flex align-center justify-center ma-2"
         elevation="2"
         height="200"
-        class="d-flex align-center justify-center ma-2"
       >
         <h1
           class="text-h2"
diff --git a/packages/docs/src/examples/v-window/prop-show-arrows.vue b/packages/docs/src/examples/v-window/prop-show-arrows.vue
index 7f7a0a37b06..83f3350785a 100644
--- a/packages/docs/src/examples/v-window/prop-show-arrows.vue
+++ b/packages/docs/src/examples/v-window/prop-show-arrows.vue
@@ -8,9 +8,9 @@
       :key="`card-${n}`"
     >
       <v-card
+        class="d-flex align-center justify-center ma-2"
         elevation="2"
         height="200"
-        class="d-flex align-center justify-center ma-2"
       >
         <h1
           class="text-h2"
diff --git a/packages/docs/src/examples/v-window/slots-next-prev.vue b/packages/docs/src/examples/v-window/slots-next-prev.vue
index e738eb4e0db..076a449fae1 100644
--- a/packages/docs/src/examples/v-window/slots-next-prev.vue
+++ b/packages/docs/src/examples/v-window/slots-next-prev.vue
@@ -21,9 +21,9 @@
       :key="`card-${n}`"
     >
       <v-card
+        class="d-flex align-center justify-center ma-2"
         elevation="2"
         height="200"
-        class="d-flex align-center justify-center ma-2"
       >
         <h1
           class="text-h2"
diff --git a/packages/docs/src/examples/v-window/usage.vue b/packages/docs/src/examples/v-window/usage.vue
index fa61b0f5ae4..646251b9354 100644
--- a/packages/docs/src/examples/v-window/usage.vue
+++ b/packages/docs/src/examples/v-window/usage.vue
@@ -7,7 +7,7 @@
       v-for="n in length"
       :key="n"
     >
-      <v-card height="200px" class="d-flex justify-center align-center">
+      <v-card class="d-flex justify-center align-center" height="200px">
         <span class="text-h2">Card {{ n }}</span>
       </v-card>
     </v-window-item>
diff --git a/packages/docs/src/examples/why-vuetify/card-props.vue b/packages/docs/src/examples/why-vuetify/card-props.vue
index 39656c7964c..3d03763e464 100644
--- a/packages/docs/src/examples/why-vuetify/card-props.vue
+++ b/packages/docs/src/examples/why-vuetify/card-props.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card
-    title="Title"
     text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!"
+    title="Title"
   ></v-card>
 </template>
diff --git a/packages/docs/src/examples/wireframes/constrained.vue b/packages/docs/src/examples/wireframes/constrained.vue
index 065e1b22667..07c47ee4b20 100644
--- a/packages/docs/src/examples/wireframes/constrained.vue
+++ b/packages/docs/src/examples/wireframes/constrained.vue
@@ -20,12 +20,12 @@
         <v-responsive max-width="160">
           <v-text-field
             density="compact"
-            flat
-            hide-details
             label="Search"
             rounded="lg"
-            single-line
             variant="solo-filled"
+            flat
+            hide-details
+            single-line
           ></v-text-field>
         </v-responsive>
       </v-container>
@@ -40,16 +40,16 @@
                 <v-list-item
                   v-for="n in 5"
                   :key="n"
-                  link
                   :title="`List Item ${n}`"
+                  link
                 ></v-list-item>
 
                 <v-divider class="my-2"></v-divider>
 
                 <v-list-item
                   color="grey-lighten-4"
-                  link
                   title="Refresh"
+                  link
                 ></v-list-item>
               </v-list>
             </v-sheet>
diff --git a/packages/docs/src/examples/wireframes/discord.vue b/packages/docs/src/examples/wireframes/discord.vue
index 2e552d59c2e..9a9717d0612 100644
--- a/packages/docs/src/examples/wireframes/discord.vue
+++ b/packages/docs/src/examples/wireframes/discord.vue
@@ -51,8 +51,8 @@
     <v-app-bar
       class="px-3"
       color="grey-lighten-4"
-      flat
       height="72"
+      flat
     >
       <v-spacer></v-spacer>
 
@@ -60,10 +60,10 @@
         <v-text-field
           bg-color="grey-lighten-1"
           density="compact"
-          flat
-          hide-details
           rounded="pill"
           variant="solo-filled"
+          flat
+          hide-details
         ></v-text-field>
       </v-responsive>
     </v-app-bar>
@@ -82,17 +82,17 @@
     </v-navigation-drawer>
 
     <v-footer
-      app
       height="72"
+      app
     >
       <v-text-field
         bg-color="grey-lighten-1"
         class="overflow-hidden"
         density="compact"
-        flat
-        hide-details
         rounded="pill"
         variant="solo-filled"
+        flat
+        hide-details
       ></v-text-field>
     </v-footer>
   </v-app>
diff --git a/packages/docs/src/examples/wireframes/inbox.vue b/packages/docs/src/examples/wireframes/inbox.vue
index f16c503d2fb..00ecdd784fe 100644
--- a/packages/docs/src/examples/wireframes/inbox.vue
+++ b/packages/docs/src/examples/wireframes/inbox.vue
@@ -12,8 +12,8 @@
 
     <v-navigation-drawer v-model="drawer">
       <v-sheet
-        color="grey-lighten-4"
         class="pa-4"
+        color="grey-lighten-4"
       >
         <v-avatar
           class="mb-4"
diff --git a/packages/docs/src/examples/wireframes/side-navigation.vue b/packages/docs/src/examples/wireframes/side-navigation.vue
index 55b7a87cd21..04097b6633f 100644
--- a/packages/docs/src/examples/wireframes/side-navigation.vue
+++ b/packages/docs/src/examples/wireframes/side-navigation.vue
@@ -1,9 +1,9 @@
 <template>
   <v-app id="inspire">
     <v-navigation-drawer
-      model-value
       class="pt-4"
       color="grey-lighten-3"
+      model-value
       rail
     >
       <v-avatar
diff --git a/packages/docs/src/examples/wireframes/steam.vue b/packages/docs/src/examples/wireframes/steam.vue
index 28f24a173ee..d0d6b71f053 100644
--- a/packages/docs/src/examples/wireframes/steam.vue
+++ b/packages/docs/src/examples/wireframes/steam.vue
@@ -12,8 +12,8 @@
 
     <v-app-bar
       color="grey-lighten-4"
-      flat
       height="72"
+      flat
     >
       <v-avatar
         class="ms-2"
@@ -64,9 +64,9 @@
     </v-app-bar>
 
     <v-footer
-      app
       color="grey"
       height="44"
+      app
     ></v-footer>
 
     <v-navigation-drawer floating>
@@ -81,17 +81,17 @@
         <v-avatar
           class="ms-2"
           color="surface-variant"
-          rounded
           variant="flat"
+          rounded
         ></v-avatar>
       </div>
 
       <div class="d-flex px-2 my-2 align-center">
         <v-btn
+          class="flex-grow-1 me-2"
           color="grey-lighten-4"
-          variant="flat"
           height="40"
-          class="flex-grow-1 me-2"
+          variant="flat"
         ></v-btn>
 
         <v-avatar
@@ -110,10 +110,10 @@
         <v-text-field
           class="mb-4"
           density="compact"
-          flat
-          hide-details
           prepend-inner-icon="mdi-magnify"
           variant="solo-filled"
+          flat
+          hide-details
         ></v-text-field>
 
         <v-sheet
@@ -221,8 +221,8 @@
               class="ma-3"
               color="grey-lighten-1"
               height="200"
-              rounded
               width="250"
+              rounded
             ></v-sheet>
           </v-slide-group-item>
         </v-slide-group>
@@ -246,8 +246,8 @@
           >
             <v-sheet
               :width="n === 1 ? 300 : 150"
-              color="grey-lighten-1"
               class="ma-3"
+              color="grey-lighten-1"
               height="200"
               rounded
             ></v-sheet>
diff --git a/packages/docs/src/examples/wireframes/three-column.vue b/packages/docs/src/examples/wireframes/three-column.vue
index 96cb8f0f229..ea3b0a12d94 100644
--- a/packages/docs/src/examples/wireframes/three-column.vue
+++ b/packages/docs/src/examples/wireframes/three-column.vue
@@ -2,20 +2,20 @@
   <v-app id="inspire">
     <v-app-bar
       class="px-3"
-      flat
       density="compact"
+      flat
     >
       <v-avatar
-        color="grey-darken-1"
         class="hidden-md-and-up"
+        color="grey-darken-1"
         size="32"
       ></v-avatar>
 
       <v-spacer></v-spacer>
 
       <v-tabs
-        centered
         color="grey-darken-2"
+        centered
       >
         <v-tab
           v-for="link in links"
@@ -40,8 +40,8 @@
             md="2"
           >
             <v-sheet
-              rounded="lg"
               min-height="268"
+              rounded="lg"
             >
               <!--  -->
             </v-sheet>
@@ -64,8 +64,8 @@
             md="2"
           >
             <v-sheet
-              rounded="lg"
               min-height="268"
+              rounded="lg"
             >
               <!--  -->
             </v-sheet>
diff --git a/packages/docs/src/layouts/404.vue b/packages/docs/src/layouts/404.vue
index 9bcaec0ebb6..da3484356fe 100644
--- a/packages/docs/src/layouts/404.vue
+++ b/packages/docs/src/layouts/404.vue
@@ -1,6 +1,6 @@
 <template>
   <DefaultLayout>
-    <v-container class="d-flex" :style="{ minHeight: '100%' }">
+    <v-container :style="{ minHeight: '100%' }" class="d-flex">
       <v-row align="center" justify="center">
         <v-col cols="auto">
           <h1 class="text-h3 text-primary">
@@ -20,7 +20,7 @@
           </p>
 
           <p>
-            <app-link :href="'https://v2.vuetifyjs.com' + route.fullPath">Looking for Vuetify 2?</app-link>
+            <AppLink :href="'https://v2.vuetifyjs.com' + route.fullPath">Looking for Vuetify 2?</AppLink>
           </p>
         </v-col>
       </v-row>
@@ -29,11 +29,12 @@
 </template>
 
 <script setup lang="ts">
-  import { useRoute } from 'vue-router'
-  import { rpath } from '@/util/routes'
-  import { useHead } from '@unhead/vue'
+  // Components
   import DefaultLayout from '@/layouts/default.vue'
 
+  // Utilities
+  import { useHead } from '@unhead/vue'
+
   const route = useRoute()
   useHead({
     title: 'Page not found',
diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue
index acab1d54f6f..b96689ec6cd 100644
--- a/packages/docs/src/layouts/default.vue
+++ b/packages/docs/src/layouts/default.vue
@@ -1,26 +1,28 @@
 <template>
   <v-app>
-    <app-settings-drawer />
+    <VoNotificationsBanner />
 
-    <app-banner />
+    <VoAuthDialog />
 
-    <app-bar />
+    <AppSettingsDrawer />
 
-    <app-drawer />
+    <AppBarBar />
 
-    <app-toc />
+    <AppDrawerDrawer />
 
-    <app-back-to-top />
+    <AppToc />
 
-    <app-snackbar-queue />
+    <AppBackToTop />
+
+    <AppSnackbarQueue />
 
     <v-main>
       <slot>
         <v-container
           :style="style"
           class="pa-4 pa-sm-6 pa-md-8"
-          fluid
           tag="section"
+          fluid
         >
           <router-view v-slot="{ Component }">
             <v-fade-transition hide-on-leave>
@@ -30,7 +32,7 @@
             </v-fade-transition>
           </router-view>
 
-          <backmatter v-if="hasBackmatter" :key="route.name" />
+          <Backmatter v-if="hasBackmatter" :key="route.name" />
         </v-container>
       </slot>
     </v-main>
@@ -38,21 +40,6 @@
 </template>
 
 <script setup>
-  // Components
-  import AppBanner from '@/components/app/Banner.vue'
-  import AppBackToTop from '@/components/app/BackToTop.vue'
-  import AppBar from '@/components/app/bar/Bar.vue'
-  import AppDrawer from '@/components/app/drawer/Drawer.vue'
-  import AppSettingsDrawer from '@/components/app/settings/Drawer.vue'
-  import AppToc from '@/components/app/Toc.vue'
-  import AppSnackbarQueue from '@/components/app/SnackbarQueue.vue'
-
-  // Composables
-  import { useRoute } from 'vue-router'
-
-  // Utilities
-  import { computed } from 'vue'
-
   const route = useRoute()
 
   const isApi = computed(() => route.meta?.category === 'api')
diff --git a/packages/docs/src/layouts/home.vue b/packages/docs/src/layouts/home.vue
index ce84fd89ea9..c3bd0fcded0 100644
--- a/packages/docs/src/layouts/home.vue
+++ b/packages/docs/src/layouts/home.vue
@@ -1,30 +1,23 @@
 <template>
   <v-app>
-    <app-banner />
+    <VoNotificationsBanner />
 
-    <app-settings-drawer />
+    <VoAuthDialog />
 
-    <app-bar />
+    <AppSettingsDrawer />
 
-    <app-snackbar-queue />
+    <AppBarBar />
+
+    <AppSnackbarQueue />
 
     <v-main class="text-center font-weight-light">
       <router-view />
     </v-main>
 
-    <home-footer />
+    <HomeFooter />
   </v-app>
 </template>
 
-<script setup>
-  // Components
-  import AppBanner from '@/components/app/Banner.vue'
-  import AppBar from '@/components/app/bar/Bar.vue'
-  import AppSettingsDrawer from '@/components/app/settings/Drawer.vue'
-  import HomeFooter from '@/components/home/Footer.vue'
-  import AppSnackbarQueue from '@/components/app/SnackbarQueue.vue'
-</script>
-
 <style lang="sass">
 #vue-component-framework
   h1, h2, h3, h4, h5, h6
diff --git a/packages/docs/src/layouts/user.vue b/packages/docs/src/layouts/user.vue
index f7164a05826..0a91e758f76 100644
--- a/packages/docs/src/layouts/user.vue
+++ b/packages/docs/src/layouts/user.vue
@@ -1,68 +1,26 @@
 <template>
   <v-app>
-    <app-settings-drawer />
+    <AppSettingsDrawer />
 
-    <app-banner />
+    <AppBarBar />
 
-    <app-bar />
+    <AppDrawerDrawer />
 
-    <app-drawer />
-
-    <app-snackbar-queue />
+    <AppSnackbarQueue />
 
     <v-main>
-      <v-container
-        fluid
-        tag="section"
-      >
-        <v-row justify="center" justify-md="start">
-          <v-col cols="auto">
-            <user-profile />
-          </v-col>
-
-          <v-col
-            class="me-auto"
-            cols="12"
-            sm="10"
-            md="7"
-          >
-            <user-tabs />
-
-            <br>
-
-            <router-view v-slot="{ Component }">
-              <v-fade-transition hide-on-leave>
-                <div :key="route.name">
-                  <component :is="Component" />
-                </div>
-              </v-fade-transition>
-            </router-view>
-          </v-col>
-        </v-row>
-      </v-container>
+      <router-view v-slot="{ Component }">
+        <v-fade-transition hide-on-leave>
+          <div :key="route.name">
+            <component :is="Component" />
+          </div>
+        </v-fade-transition>
+      </router-view>
     </v-main>
   </v-app>
 </template>
 
 <script setup>
-  // Components
-  import AppBanner from '@/components/app/Banner.vue'
-  import AppBar from '@/components/app/bar/Bar.vue'
-  import AppDrawer from '@/components/app/drawer/Drawer.vue'
-  import AppSettingsDrawer from '@/components/app/settings/Drawer.vue'
-  import UserProfile from '@/components/user/UserProfile.vue'
-  import UserTabs from '@/components/user/UserTabs.vue'
-  import AppSnackbarQueue from '@/components/app/SnackbarQueue.vue'
-
-  // Composables
-  import { onBeforeRouteUpdate, useRoute } from 'vue-router'
-
-  // Stores
-  import { useAuthStore } from '@vuetify/one'
-
-  // Utilities
-  import { onMounted } from 'vue'
-
   const route = useRoute()
   const auth = useAuthStore()
 
diff --git a/packages/docs/src/layouts/wireframe.vue b/packages/docs/src/layouts/wireframe.vue
index 500f4c957c6..a7b32cdd891 100644
--- a/packages/docs/src/layouts/wireframe.vue
+++ b/packages/docs/src/layouts/wireframe.vue
@@ -12,9 +12,6 @@
 </template>
 
 <script setup>
-  // Composables
-  import { useRoute } from 'vue-router'
-
   const route = useRoute()
   const { page } = route.meta
   const href = `https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/wireframes/${page}.vue`
diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts
index b4aaa5af93f..f2ef73fbf3d 100644
--- a/packages/docs/src/main.ts
+++ b/packages/docs/src/main.ts
@@ -17,8 +17,8 @@ import { installGlobalComponents } from '@/plugins/global-components'
 import { installGtag } from '@/plugins/gtag'
 import { installOne } from '@/plugins/one'
 import { installI18n } from '@/plugins/i18n'
-import { useAppStore } from '@/store/app'
-import { useLocaleStore } from '@/store/locale'
+import { useAppStore } from '@/stores/app'
+import { useLocaleStore } from '@/stores/locale'
 import { installPwa } from '@/plugins/pwa'
 import { useUserStore } from '@vuetify/one'
 import { installVuetify } from '@/plugins/vuetify'
@@ -31,11 +31,11 @@ import {
   redirectRoutes,
   rpath,
   trailingSlash,
-} from '@/util/routes'
-import { wrapInArray } from '@/util/helpers'
+} from '@/utils/routes'
+import { wrapInArray } from '@/utils/helpers'
 
 // Globals
-import { IN_BROWSER } from '@/util/globals'
+import { IN_BROWSER } from '@/utils/globals'
 
 const routes = setupLayouts(generatedRoutes)
 
diff --git a/packages/docs/src/pages/en/about/code-of-conduct.md b/packages/docs/src/pages/en/about/code-of-conduct.md
index 9e2163d1c21..d30fb488dbc 100644
--- a/packages/docs/src/pages/en/about/code-of-conduct.md
+++ b/packages/docs/src/pages/en/about/code-of-conduct.md
@@ -9,9 +9,9 @@ meta:
 
 For questions or concerns regarding our *Code of Conduct*, please reach out to us at [support@vuetifyjs.com](mailto:support@vuetifyjs.com).
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Our Pledge
 
diff --git a/packages/docs/src/pages/en/about/licensing.md b/packages/docs/src/pages/en/about/licensing.md
index 3d754d93042..13566abcdd8 100644
--- a/packages/docs/src/pages/en/about/licensing.md
+++ b/packages/docs/src/pages/en/about/licensing.md
@@ -14,9 +14,9 @@ related:
 
 This document provides comprehensive details about the licensing of the Vuetify framework.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Overview
 
diff --git a/packages/docs/src/pages/en/about/meet-the-team.md b/packages/docs/src/pages/en/about/meet-the-team.md
index 1f3a0247a05..7eb01e0545d 100644
--- a/packages/docs/src/pages/en/about/meet-the-team.md
+++ b/packages/docs/src/pages/en/about/meet-the-team.md
@@ -13,28 +13,28 @@ related:
 
 Vuetify is _not_ a one person show. We have a very active and engaged team that is **constantly striving** to bring developers a better experience. Keep in mind the below is not an exhaustive list of all the individuals that help make Vuetify great.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Company
 
 While Vuetify (the framework) is [MIT Licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) and [Open Source](https://opensource.com/resources/what-open-source), Vuetify (the company) is owned and operated by John and Heather Leider as a full-time Open Source business. You can support them by sponsoring Vuetify on **GitHub**.
 
-<promoted slug="enterprise-support" />
+<PromotedPromoted slug="enterprise-support" />
 
-<team-members team="company" />
+<AboutTeamMembers team="company" />
 
 ## Core Team
 
 The core development team are Open Source developers that help guide the direction of Vuetify and its ecosystem.
 
-<promoted slug="vuetify-open-collective" />
+<PromotedPromoted slug="vuetify-open-collective" />
 
-<team-members team="core" />
+<AboutTeamMembers team="core" />
 
 ## Legends
 
 Legends are inactive members of the core team. They have contributed a significant amount of time and effort to the project and are recognized for their contributions.
 
-<team-members team="legends" />
+<AboutTeamMembers team="legends" />
diff --git a/packages/docs/src/pages/en/about/security-disclosure.md b/packages/docs/src/pages/en/about/security-disclosure.md
index 1b8f2cdf7c2..74be7093135 100644
--- a/packages/docs/src/pages/en/about/security-disclosure.md
+++ b/packages/docs/src/pages/en/about/security-disclosure.md
@@ -14,9 +14,9 @@ related:
 
 This document outlines security procedures and general policies for the Vuetify project.
 
-<page-features />
+<PageFeatures />
 
-<promoted slug="enterprise-support" />
+<PromotedPromoted slug="enterprise-support" />
 
 ## Reporting a Bug
 
diff --git a/packages/docs/src/pages/en/components/alerts.md b/packages/docs/src/pages/en/components/alerts.md
index 73f4863ff47..8dce087a157 100644
--- a/packages/docs/src/pages/en/components/alerts.md
+++ b/packages/docs/src/pages/en/components/alerts.md
@@ -21,15 +21,15 @@ The `v-alert` component is used to convey important information to the user thro
 
 ![Alert Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-alert/v-alert-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 An alert is a [v-sheet](/components/sheets/) that specializes in getting the user's attention. While similar to [v-banner](/components/banners/) in functionality, `v-alert` is typically inline with content and used multiple times throughout an application.
 
-<usage name="v-alert" />
+<ExamplesUsage name="v-alert" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -57,7 +57,7 @@ The recommended placement of elements inside of `v-alert` is:
 | 4. Text | A content area for displaying text and other inline elements |
 | 5. Close Icon (optional) | Used to hide the `v-alert` component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Guide
 
@@ -79,7 +79,7 @@ The following code snippet is an example of a basic `v-alert` component only con
 
 Adding a title is as easy as defining its value. The next example adds a string title to accompany the content text:
 
-<example file="v-alert/prop-content" />
+<ExamplesExample file="v-alert/prop-content" />
 
 Notice how the alert does not have a color or icon. This is defined using the **type** property.
 
@@ -89,7 +89,7 @@ Alerts have 4 contextual states: **success**, **info**, **warning**, and **error
 
 With a basic alert rendered, add your choice of contextual type. The following example puts the `v-alert` component in a success state:
 
-<example file="v-alert/prop-type" />
+<ExamplesExample file="v-alert/prop-type" />
 
 ##### Type reference
 
@@ -117,7 +117,7 @@ The **type** property acts as a shorthand for a **color** and **icon** combinati
 
 The `v-alert` component has the ability to reduce its height in intervals using the density prop. This is useful when you need to reduce the vertical space a component needs. The following example reduces the vertical space by using **density="compact"**:
 
-<example file="v-alert/prop-density" />
+<ExamplesExample file="v-alert/prop-density" />
 
 The **density** prop supports 3 levels of component height; **default**, **comfortable**, and **compact**.
 
@@ -125,13 +125,13 @@ The **density** prop supports 3 levels of component height; **default**, **comfo
 
 The `v-alert` has 6 style variants, **elevated**, **flat**, **tonal**, **outlined**, **text**, and **plain**. By default, the `v-alert` component is **flat**; which means that it has a solid background and no box-shadow (elevation). The following example modifies the overall styling of the alert with a custom variant:
 
-<example file="v-alert/prop-variant" />
+<ExamplesExample file="v-alert/prop-variant" />
 
 #### Closable
 
 The **closable** prop adds a [v-icon](/components/icons) on the far right, after the main content. This control hides the `v-alert` when clicked, setting it's internal model to **false**. Manually control the visibility of the alert by binding **v-model** or using **model-value**. The following example uses a dynamic model that shows and hides the `v-alert` component:
 
-<example file="v-alert/prop-closable" />
+<ExamplesExample file="v-alert/prop-closable" />
 
 The close icon automatically applies a default `aria-label` and is configurable by using the **close-label** prop or changing **close** value in your locale.
 
@@ -147,19 +147,19 @@ The following is a collection of `v-alert` examples that demonstrate how differe
 
 The **border-color** prop removes the alert background in order to accent the **border** prop. If a **type** is set, it will use the type's default color. If no **color** or **type** is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).
 
-<example file="v-alert/prop-border-color" />
+<ExamplesExample file="v-alert/prop-border-color" />
 
 ### Icon
 
 The **icon** prop allows you to add an icon to the beginning of the alert component. If a **type** is provided, this will override the default type icon. Additionally, setting the **icon** prop to _false_ will remove the icon altogether.
 
-<example file="v-alert/prop-icon" />
+<ExamplesExample file="v-alert/prop-icon" />
 
 ### Outlined
 
 The **outlined** prop inverts the style of an alert, inheriting the currently applied **color**, applying it to the text and border, and making its background transparent.
 
-<example file="v-alert/prop-outlined" />
+<ExamplesExample file="v-alert/prop-outlined" />
 
 ## Accessibility
 
diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
index 4a9ecc239c9..8d21f6c2aeb 100644
--- a/packages/docs/src/pages/en/components/all.md
+++ b/packages/docs/src/pages/en/components/all.md
@@ -6,17 +6,13 @@ meta:
   keywords: components, all components, all Vuetify components
 ---
 
-<script setup>
-  import ComponentsListItem from '@/components/components/ListItem.vue'
-</script>
-
 # Components
 
 Vuetify Components are interactive building blocks for creating user interfaces.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Containment
 
@@ -24,83 +20,83 @@ Containment components wrap other components and provide additional functionalit
 
 <v-row>
 
-<components-list-item name="Button component" src="buttons">
+<ComponentsListItem name="Button component" src="buttons">
 
   The button component allows users to take actions or make choices with a single tap
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Card components" src="cards">
+<ComponentsListItem name="Card components" src="cards">
 
   The card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="List components" src="lists">
+<ComponentsListItem name="List components" src="lists">
 
   The list component is a display interface for items
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Chip component" src="chips">
+<ComponentsListItem name="Chip component" src="chips">
 
   Chips are useful for displaying small pieces of information
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Divider components" src="dividers">
+<ComponentsListItem name="Divider components" src="dividers">
 
   Dividers are used to separate content into distinct sections or groups
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Expansion panel components"  src="expansion-panels">
+<ComponentsListItem name="Expansion panel components"  src="expansion-panels">
 
   Expansion panels are used to reveal additional content in a compact manner
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Menu component" src="menus">
+<ComponentsListItem name="Menu component" src="menus">
 
   The menu component is used to display a list of actions that the user can make
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Dialog component" src="dialogs">
+<ComponentsListItem name="Dialog component" src="dialogs">
 
   The dialog component informs a user about a specific task and may contain critical information
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Bottom sheet component" src="bottom-sheets">
+<ComponentsListItem name="Bottom sheet component" src="bottom-sheets">
 
   The bottom sheet component elevates content from the bottom of the screen
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Overlay component" src="overlays">
+<ComponentsListItem name="Overlay component" src="overlays">
 
   The overlay component is used to display a custom scrim that sits on top of the application
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Toolbar components" src="toolbars">
+<ComponentsListItem name="Toolbar components" src="toolbars">
 
   Toolbars are used to label a content area and / or display a list of actions that the user can make
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Tooltip component" src="tooltips">
+<ComponentsListItem name="Tooltip component" src="tooltips">
 
   Tooltips provide additional information about an element when the user hovers over it
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Sheet component" src="sheets">
+<ComponentsListItem name="Sheet component" src="sheets">
 
   The sheet component is a simple piece of paper that can be used to style and customize a block of content
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -112,53 +108,65 @@ Navigation components are used to navigate between different views or pages.
 
 <v-row>
 
-<components-list-item name="App bars"  src="app-bars">
+<ComponentsListItem name="App bars"  src="app-bars">
 
   The app bar is used for top level navigation items and current page actions
 
-</components-list-item>
+</ComponentsListItem>
+
+<ComponentsListItem name="FABs" src="fabs" labs>
+
+  The floating action button is used for a promoted actions within an application
+
+</ComponentsListItem>
 
-<components-list-item name="Navigation drawers"  src="navigation-drawers">
+<ComponentsListItem name="Navigation drawers"  src="navigation-drawers">
 
   Navigation drawers contain primary application navigation links
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Pagination component" src="paginations">
+<ComponentsListItem name="Pagination component" src="paginations">
 
   The Pagination component is used to separate long sets of data
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Bottom navigation"  src="bottom-navigation">
+<ComponentsListItem name="Bottom navigation"  src="bottom-navigation">
 
   The bottom navigation component is used for displaying navigation links on mobile
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Breadcrumbs components" src="breadcrumbs">
+<ComponentsListItem name="Breadcrumbs components" src="breadcrumbs">
 
   Breadcrumbs are navigational helpers for router pages
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Footer component" src="footers">
+<ComponentsListItem name="Footer component" src="footers">
 
   The footer component is a simple navigation area with inner site links
 
-</components-list-item>
+</ComponentsListItem>
+
+<ComponentsListItem name="Speed dials" src="speed-dials" labs>
+
+  The speed dial component is a floating action button that can reveal additional actions when clicked
+
+</ComponentsListItem>
 
-<components-list-item name="System bar"  src="system-bars">
+<ComponentsListItem name="System bar"  src="system-bars">
 
   The system bar component shows application information with iconography, time, and more
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Tabs components" src="tabs">
+<ComponentsListItem name="Tabs components" src="tabs">
 
   Tabs are used to organize content into different sections that can be viewed independently
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -170,89 +178,89 @@ Form components are used to collect user input in a variety of ways.
 
 <v-row>
 
-<components-list-item name="Autocomplete component" src="autocompletes">
+<ComponentsListItem name="Autocomplete component" src="autocompletes">
 
   Autocompletes are used to provide suggestions to the user as they type into a field
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Combobox components" src="combobox">
+<ComponentsListItem name="Combobox components" src="combobox">
 
   The combobox component is used to select a value from a list of options with the ability to enter a custom value
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Text field"  src="text-fields">
+<ComponentsListItem name="Text field"  src="text-fields">
 
   The text field component accepts textual input from users and is a replacement for the native text input element
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Checkbox components" src="checkboxes">
+<ComponentsListItem name="Checkbox components" src="checkboxes">
 
   The checkbox component is a replacement for the native input checkbox
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Switch components" src="switches">
+<ComponentsListItem name="Switch components" src="switches">
 
   The switch component is an alternately styled checkbox
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Radio button"  src="radio-buttons">
+<ComponentsListItem name="Radio button"  src="radio-buttons">
 
   The radio component is a replacement for its native counterpart
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="File input"  src="file-inputs">
+<ComponentsListItem name="File input"  src="file-inputs">
 
   The file input component is used to select files from the user's device and is a replacement for the native file input element
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Form component" src="forms">
+<ComponentsListItem name="Form component" src="forms">
 
   The form component is used to wrap form elements and provide a consistent styling and a single source for validation
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Inputs component" src="inputs">
+<ComponentsListItem name="Inputs component" src="inputs">
 
   Create custom inputs that can be used with the v-model directive
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="OTP Input component" src="otp-input" >
+<ComponentsListItem name="OTP Input component" src="otp-input" >
 
   The OTP input component is used for MFA authentication via input field
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Select component" src="selects">
+<ComponentsListItem name="Select component" src="selects">
 
   The select component is used to select a value from a list of options and is a replacement for the native select element
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Slider component" src="sliders">
+<ComponentsListItem name="Slider component" src="sliders">
 
   Sliders are used to select a value from a range of values by moving a slider thumb and are a replacement for the native input range element
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Range slider"  src="range-sliders">
+<ComponentsListItem name="Range slider"  src="range-sliders">
 
   Range sliders are regular sliders with the ability to select in a range
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Textarea component" src="textareas">
+<ComponentsListItem name="Textarea component" src="textareas">
 
   The textarea component is a replacement for the native textarea element
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -264,11 +272,11 @@ Layout components are used to create responsive layouts.
 
 <v-row>
 
-<components-list-item name="grids" src="grids">
+<ComponentsListItem name="grids" src="grids">
 
   The grid component is used to create responsive layouts
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -280,35 +288,35 @@ These components allow a user to select one or multiple items from a list of opt
 
 <v-row>
 
-<components-list-item name="Carousel component" src="carousels">
+<ComponentsListItem name="Carousel component" src="carousels">
 
   Carousels are used to display multiple forms of visual content
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Button group" src="button-groups">
+<ComponentsListItem name="Button group" src="button-groups">
 
   Button groups are used to select between multiple options using the button component
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Chip group" src="chip-groups">
+<ComponentsListItem name="Chip group" src="chip-groups">
 
   Chip group is a wrapper component that makes chips interactive and allows them to be selected
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Window components" src="windows">
+<ComponentsListItem name="Window components" src="windows">
 
   The window component is used to display a block of content based upon a model
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Stepper components" src="steppers">
+<ComponentsListItem name="Stepper components" src="steppers">
 
   The stepper component is a linear progress control used to break lengthy forms into smaller logical sections
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -320,47 +328,53 @@ These components are used to display data and information in a variety of ways.
 
 <v-row>
 
-<components-list-item name="Data iterator component" src="data-iterators">
+<ComponentsListItem name="Data iterator component" src="data-iterators">
 
   The data iterator component provides an easy interface for paginating and sorting data
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Data table component"  src="data-tables/basics">
+<ComponentsListItem name="Data table component"  src="data-tables/basics">
 
   Data tables are used to display large amounts of data in a small amount of space
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Infinite scroll component"  src="infinite-scroller">
+<ComponentsListItem name="Infinite scroll component"  src="infinite-scroller">
 
   The Infinite scroll component is a container that loads more items when scrolling
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Server-side table component"  src="data-tables/server-side-tables">
+<ComponentsListItem name="Server-side table component"  src="data-tables/server-side-tables">
 
   Server side data tables are intended to be used with a server side data source
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Virtual Data table component"  src="data-tables/virtual-tables">
+<ComponentsListItem name="Sparkline component" src="sparkline" labs>
+
+  The sparkline component creates beautiful and expressive simple graphs for displaying numerical data
+
+</ComponentsListItem>
+
+<ComponentsListItem name="Virtual Data table component"  src="data-tables/virtual-tables">
 
   The virtual data table component is used to display very large subsets of data
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Table component" src="tables">
+<ComponentsListItem name="Table component" src="tables">
 
   The table component is a barebones table for manually displaying data and is a replacement for the native table element
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Virtual scroll component"  src="virtual-scroller">
+<ComponentsListItem name="Virtual scroll component"  src="virtual-scroller">
 
   The virtual scroller component makes it possible to render large amounts of data without sacrificing performance
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -372,65 +386,71 @@ These components are used to provide feedback to the user within content, over c
 
 <v-row>
 
-<components-list-item name="Alert component" src="alerts">
+<ComponentsListItem name="Alert component" src="alerts">
 
   Alerts convey important information to the user
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Badge component" src="badges">
+<ComponentsListItem name="Badge component" src="badges">
 
   Badges superscript or subscript an avatar-like icon or text onto content.
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Banner component" src="banners">
+<ComponentsListItem name="Banner component" src="banners">
 
   Banners are used to communicate important information to the user
 
-</components-list-item>
+</ComponentsListItem>
+
+<ComponentsListItem name="Empty state component" src="empty-states" labs>
+
+  The empty state component is used to indicate that a page or area on a page has no content.
+
+</ComponentsListItem>
 
-<components-list-item name="Skeleton loader component" src="skeleton-loaders">
+<ComponentsListItem name="Skeleton loader component" src="skeleton-loaders">
 
   Displays a content, enhancing perceived performance during data-fetching & rendering
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Snackbar component" src="snackbars">
+<ComponentsListItem name="Snackbar component" src="snackbars">
 
   The snackbar component is used to display a message to the user that hovers over existing content
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Rating component" src="ratings">
+<ComponentsListItem name="Rating component" src="ratings">
 
   Ratings are useful for collecting user feedback
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Timeline components" src="timelines">
+<ComponentsListItem name="Timeline components" src="timelines">
 
   Timeline components are used to display a list of events in chronological order
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Hover component" src="hover">
+<ComponentsListItem name="Hover component" src="hover">
 
   The hover component is a wrapper component that allows you to react to hover events
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Progress circular component"  src="progress-circular">
+<ComponentsListItem name="Progress circular component"  src="progress-circular">
 
   Circular progress's are a visual indicator of numerical data in a circle
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Progress linear component"  src="progress-linear">
+<ComponentsListItem name="Progress linear component"  src="progress-linear">
 
   The linear progress component is used to display numerical data in a horizontal line
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -442,35 +462,35 @@ This subset of components are used to display media in a variety of ways.
 
 <v-row>
 
-<components-list-item name="Aspect ratios component"  src="aspect-ratios">
+<ComponentsListItem name="Aspect ratios component"  src="aspect-ratios">
 
   The aspect ratio component enforces a defined ratio
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Avatar component" src="avatars">
+<ComponentsListItem name="Avatar component" src="avatars">
 
   Avatars are used in numerous components to display avatars and profile pictures
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Icon component" src="icons">
+<ComponentsListItem name="Icon component" src="icons">
 
   The icon component is an reusable component that can be used to display icons
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Image component" src="images">
+<ComponentsListItem name="Image component" src="images">
 
   The image component provides a flexible interface for displaying images
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Parallax component" src="parallax">
+<ComponentsListItem name="Parallax component" src="parallax">
 
   Creates a 3d effect that makes an image appear to move slower than the foreground
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -482,17 +502,17 @@ These components are used to select a value from a specifically styled set of op
 
 <v-row>
 
-<components-list-item name="Color picker component"  src="color-pickers">
+<ComponentsListItem name="Color picker component"  src="color-pickers">
 
   The color picker component is used to select a color from a palette
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Date picker component" src="date-pickers">
+<ComponentsListItem name="Date picker component" src="date-pickers">
 
   The date picker component is used to select a single date from a calendar month / year.
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -502,23 +522,23 @@ These components are used to select a value from a specifically styled set of op
 
 <v-row>
 
-<components-list-item name="Defaults provider component"  src="defaults-providers">
+<ComponentsListItem name="Defaults provider component"  src="defaults-providers">
 
   The defaults provider component is used to set default values for all components within a template
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Locale provider component"  src="locale-providers">
+<ComponentsListItem name="Locale provider component"  src="locale-providers">
 
   The locale provider component allows you to change the language of all components within its slot
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="Theme provider component"  src="theme-providers">
+<ComponentsListItem name="Theme provider component"  src="theme-providers">
 
   The theme provider component allows you to change the theme of all children components
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
@@ -530,17 +550,17 @@ These components don't fit into a traditional category and are used for a variet
 
 <v-row>
 
-<components-list-item name="Lazy component" src="lazy">
+<ComponentsListItem name="Lazy component" src="lazy">
 
   The lazy component is a wrapper component that prevents the rendering of its child components until it is visible in the viewport
 
-</components-list-item>
+</ComponentsListItem>
 
-<components-list-item name="No-ssr component"  src="no-ssr">
+<ComponentsListItem name="No-ssr component"  src="no-ssr">
 
   This component is used to prevent the rendering of its child components on the server
 
-</components-list-item>
+</ComponentsListItem>
 
 </v-row>
 
diff --git a/packages/docs/src/pages/en/components/app-bars.md b/packages/docs/src/pages/en/components/app-bars.md
index f1f13b7480e..f7e37a97bff 100644
--- a/packages/docs/src/pages/en/components/app-bars.md
+++ b/packages/docs/src/pages/en/components/app-bars.md
@@ -26,15 +26,15 @@ The `v-app-bar` component is pivotal to any graphical user interface (GUI), as i
 
 ![App Bar Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-app-bar/v-app-bar-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-app-bar` component is used for application-wide actions and information.
 
-<usage name="v-app-bar" />
+<ExamplesUsage name="v-app-bar" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -44,7 +44,7 @@ The `v-app-bar` component is used for application-wide actions and information.
 | [v-app-bar-nav-icon](/api/v-app-bar-nav-icon/) | A customized [v-btn](/components/buttons/) component that uses a default *icon* value of **$menu** |
 | [v-app-bar-title](/api/v-app-bar-title/) | An extension of `v-toolbar-title` that is used for scrolling techniques |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ::: tip
 
@@ -105,16 +105,16 @@ A scroll listener is added to `window` by default, but can be changed to a custo
 
 You can make **app-bar** dense. A dense app bar has lower height than regular one.
 
-<example file="v-app-bar/prop-density" />
+<ExamplesExample file="v-app-bar/prop-density" />
 
 #### Images
 
 `v-app-bar` can contain background images. You can set source via the `image` prop. If you need to customize the `v-img` properties, the app-bar provides you with an **image** slot.
 
-<example file="v-app-bar/prop-image" />
+<ExamplesExample file="v-app-bar/prop-image" />
 
 #### Prominent
 
 An `v-app-bar` with the `density="prominent"` prop can opt to have its height shrunk as the user scrolls down. This provides a smooth transition to taking up less visual space when the user is scrolling through content. Shrink height has 2 possible options, **compact** (48px) and **comfortable** (56px) sizes.
 
-<example file="v-app-bar/prop-prominent" />
+<ExamplesExample file="v-app-bar/prop-prominent" />
diff --git a/packages/docs/src/pages/en/components/application.md b/packages/docs/src/pages/en/components/application.md
index fe0980185ee..cb9ca7f9364 100644
--- a/packages/docs/src/pages/en/components/application.md
+++ b/packages/docs/src/pages/en/components/application.md
@@ -14,7 +14,7 @@ related:
 
 The `v-app` component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level.
 
-<entry />
+<PromotedEntry />
 
 In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.
 
@@ -56,7 +56,7 @@ The `v-app` component makes it easy to enable one of your application defined th
 
 The following example demonstrates how to use the **theme** prop to toggle the theme from dark to light.
 
-<example file="application/theme" preview />
+<ExamplesExample file="application/theme" preview />
 
 ```html { resource="src/App.vue" }
 <template>
@@ -77,8 +77,6 @@ The following example demonstrates how to use the **theme** prop to toggle the t
 </template>
 
 <script setup>
-  import { ref } from 'vue'
-
   const theme = ref('light')
 
   function onClick () {
@@ -98,7 +96,7 @@ The following example demonstrates how to use the **theme** prop to toggle the t
 | [v-app](/api/v-app/) | Primary Component |
 | [v-main](/api/v-main/) | Content area |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ### Layout components
 
@@ -114,7 +112,7 @@ The following components are compatible with the [Application layout](/features/
 
 <br>
 
-<app-figure src="https://cdn.vuetifyjs.com/images/layouts/app.png" alt="Vuetify Application" />
+<AppFigure src="https://cdn.vuetifyjs.com/images/layouts/app.png" alt="Vuetify Application" />
 
 ::: info
   More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page.
diff --git a/packages/docs/src/pages/en/components/aspect-ratios.md b/packages/docs/src/pages/en/components/aspect-ratios.md
index 907df31c9d9..3b7fb44a364 100644
--- a/packages/docs/src/pages/en/components/aspect-ratios.md
+++ b/packages/docs/src/pages/en/components/aspect-ratios.md
@@ -17,15 +17,15 @@ features:
 
 The `v-responsive` component can be used to fix any section to a specific aspect ratio
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Specify a custom aspect-ratio
 
-<usage name="v-responsive" />
+<ExamplesUsage name="v-responsive" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -33,4 +33,4 @@ Specify a custom aspect-ratio
 | - | - |
 | [v-responsive](/api/v-responsive/) | Primary component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
diff --git a/packages/docs/src/pages/en/components/autocompletes.md b/packages/docs/src/pages/en/components/autocompletes.md
index 1fe2053b29b..f095bbeaf6f 100644
--- a/packages/docs/src/pages/en/components/autocompletes.md
+++ b/packages/docs/src/pages/en/components/autocompletes.md
@@ -20,15 +20,15 @@ features:
 
 The `v-autocomplete` component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The autocomplete component extends `v-select` and adds the ability to filter items.
 
-<usage name="v-autocomplete" />
+<ExamplesUsage name="v-autocomplete" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -38,7 +38,7 @@ The autocomplete component extends `v-select` and adds the ability to filter ite
 | [v-combobox](/api/v-combobox/) | A select component that allows for filtering and custom values |
 | [v-select](/api/v-select/) | A replacement for the HTML <select></select> |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -58,13 +58,13 @@ Below is a collection of simple to complex examples.
 
 You can use `density` prop to adjust vertical spacing within the component.
 
-<example file="v-autocomplete/prop-density" />
+<ExamplesExample file="v-autocomplete/prop-density" />
 
 #### Filter
 
 The `custom-filter` prop can be used to filter each individual item with custom logic. In this example we filter items by name.
 
-<example file="v-autocomplete/prop-filter" />
+<ExamplesExample file="v-autocomplete/prop-filter" />
 
 ::: tip
 
@@ -80,7 +80,7 @@ Unlike **v-combobox**, it doesn't keep unlisted values. To prevent unnecessary A
 
 With the power of slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.
 
-<example file="v-autocomplete/slot-item-and-selection" />
+<ExamplesExample file="v-autocomplete/slot-item-and-selection" />
 
 ### Misc
 
@@ -89,14 +89,14 @@ With the power of slots, you can customize the visual output of the select. In t
 
 Sometimes you need to load data externally based upon a search query. Use the `search-input` prop with the **.sync** modifier when using the `autocomplete` prop. We also make use of the new `cache-items` prop. This will keep a unique list of all items that have been passed to the `items` prop and is **REQUIRED** when using asynchronous items and the **multiple** prop.
 
-<example file="v-autocomplete/misc-asynchronous-items" />
+<ExamplesExample file="v-autocomplete/misc-asynchronous-items" />
 -->
 
 #### State selector
 
 Using a combination of `v-autocomplete` slots and transitions, you can create a stylish toggleable autocomplete field such as this state selector.
 
-<example file="v-autocomplete/misc-state-selector" />
+<ExamplesExample file="v-autocomplete/misc-state-selector" />
 
 #### New tab
 
@@ -106,4 +106,4 @@ This feature was introduced in [v3.3.0 (Icarus)](/getting-started/release-notes/
 
 The **auto-select-first** property highlights the first result when searching, allowing you to press <v-kbd>tab</v-kbd> or <v-kbd>enter</v-kbd> to quickly select it.
 
-<example file="v-autocomplete/misc-new-tab" />
+<ExamplesExample file="v-autocomplete/misc-new-tab" />
diff --git a/packages/docs/src/pages/en/components/avatars.md b/packages/docs/src/pages/en/components/avatars.md
index d88e8ce38f5..569638bd63e 100644
--- a/packages/docs/src/pages/en/components/avatars.md
+++ b/packages/docs/src/pages/en/components/avatars.md
@@ -21,15 +21,15 @@ The `v-avatar` component is typically used to display circular user profile pict
 
 ![Avatar Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-avatar/v-avatar-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Avatars in their simplest form display content within a circular container.
 
-<usage name="v-avatar" />
+<ExamplesUsage name="v-avatar" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -50,7 +50,7 @@ The recommended placement of elements inside of `v-avatar` is:
 | - | - |
 | 1. Container | The Avatar container that typically holds a [v-icon](/components/icons/) or [v-img](/components/images/) component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -60,13 +60,13 @@ The recommended placement of elements inside of `v-avatar` is:
 
 The `size` prop allows you to change the height and width of the avatar.
 
-<example file="v-avatar/prop-size" />
+<ExamplesExample file="v-avatar/prop-size" />
 
 #### Tile
 
 The `rounded` prop can be used to remove the border radius from v-avatar leaving you with a simple square avatar.
 
-<example file="v-avatar/prop-tile" />
+<ExamplesExample file="v-avatar/prop-tile" />
 
 ### Slots
 
@@ -74,9 +74,9 @@ The `rounded` prop can be used to remove the border radius from v-avatar leaving
 
 The `v-avatar` default slot allows you to render content such as `v-icon` components, images, or text. Mix and match these with other props to create something unique.
 
-<example file="v-avatar/slot-default" />
+<ExamplesExample file="v-avatar/slot-default" />
 
-<promoted />
+<PromotedPromoted />
 
 ### Misc
 
@@ -84,14 +84,14 @@ The `v-avatar` default slot allows you to render content such as `v-icon` compon
 
 Combining an avatar with other components allows you to build beautiful user interfaces right out of the box.
 
-<example file="v-avatar/misc-advanced" />
+<ExamplesExample file="v-avatar/misc-advanced" />
 
 Another example combining avatar with menu.
 
-<example file="v-avatar/misc-avatar-menu" />
+<ExamplesExample file="v-avatar/misc-avatar-menu" />
 
 #### Profile Card
 
 Using the **rounded** prop value `0`, we can create a sleek hard-lined profile card.
 
-<example file="v-avatar/misc-profile-card" />
+<ExamplesExample file="v-avatar/misc-profile-card" />
diff --git a/packages/docs/src/pages/en/components/badges.md b/packages/docs/src/pages/en/components/badges.md
index 6696a0d392f..8f473c051c2 100644
--- a/packages/docs/src/pages/en/components/badges.md
+++ b/packages/docs/src/pages/en/components/badges.md
@@ -20,15 +20,15 @@ The `v-badge` component superscripts or subscripts an avatar-like icon or text o
 
 <!-- ![Badge Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-badge/v-badge-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Badges in their simplest form display to the upper right of the content that it wraps and requires the badge slot.
 
-<usage name="v-badge" />
+<ExamplesUsage name="v-badge" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -36,7 +36,7 @@ Badges in their simplest form display to the upper right of the content that it
 | - | - |
 | [v-badge](/api/v-badge/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -46,16 +46,16 @@ Badges in their simplest form display to the upper right of the content that it
 
 The **dot** property removes badge's content and reduces its overall size. This is useful when you need to draw a user's attention subtly.
 
-<example file="v-badge/prop-dot" />
+<ExamplesExample file="v-badge/prop-dot" />
 
 #### Inline
 
 Inline badges can be placed anywhere with content and can render without a *default* slot.
 
-<example file="v-badge/prop-inline" />
+<ExamplesExample file="v-badge/prop-inline" />
 
 #### Content
 
 For simple text, use the **content** property to display a *value* on the badge.
 
-<example file="v-badge/prop-content" />
+<ExamplesExample file="v-badge/prop-content" />
diff --git a/packages/docs/src/pages/en/components/banners.md b/packages/docs/src/pages/en/components/banners.md
index c5f56d9f9f1..083307c7822 100644
--- a/packages/docs/src/pages/en/components/banners.md
+++ b/packages/docs/src/pages/en/components/banners.md
@@ -22,15 +22,15 @@ The `v-banner` component is used as a middle-interrupting message to the user wi
 
 ![Banner Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-banner/v-banner-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Banners come in two variations **single-line** and **multi-line** (implicit). These can have icons and actions that you can use with your message.
 
-<usage name="v-banner" />
+<ExamplesUsage name="v-banner" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -40,7 +40,7 @@ Banners come in two variations **single-line** and **multi-line** (implicit). Th
 | [v-banner-text](/api/v-banner-text/) | Sub-component used to display the `v-banner` subtitle. Wraps the `#text` slot |
 | [v-banner-actions](/api/v-banner-actions/) | Sub-component that modifies the default styling of [v-btn](/components/buttons/). Wraps the `#actions` slot |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -67,13 +67,13 @@ The recommended placement of elements inside of `v-banner` is:
 
 The prop **lines** can be used to specify how the displayed text should be handled based on its length.
 
-<example file="v-banner/prop-lines" />
+<ExamplesExample file="v-banner/prop-lines" />
 
 #### Sticky
 
 You can optionally turn on the **sticky** prop to ensure that the content is pinned to the top of the screen.
 
-<example file="v-banner/prop-sticky" />
+<ExamplesExample file="v-banner/prop-sticky" />
 
 ### Slots
 
@@ -81,16 +81,16 @@ You can optionally turn on the **sticky** prop to ensure that the content is pin
 
 Banners may have one or two text buttons that don't stand out that much.
 
-<example file="v-banner/slot-actions" />
+<ExamplesExample file="v-banner/slot-actions" />
 
 #### Icon
 
 The icon slot allows you to to explicitly control the content and functionality within it.
 
-<example file="v-banner/slot-icon" />
+<ExamplesExample file="v-banner/slot-icon" />
 
 #### Prepend
 
 The prepend slot allows you to to explicitly control the content and functionality within it. Icons also help to emphasize a banner's message.
 
-<example file="v-banner/slot-prepend" />
+<ExamplesExample file="v-banner/slot-prepend" />
diff --git a/packages/docs/src/pages/en/components/bottom-navigation.md b/packages/docs/src/pages/en/components/bottom-navigation.md
index 2c26a86dd82..4269fa10c60 100644
--- a/packages/docs/src/pages/en/components/bottom-navigation.md
+++ b/packages/docs/src/pages/en/components/bottom-navigation.md
@@ -20,15 +20,15 @@ features:
 
 The `v-bottom-navigation` component is an alternative to the sidebar. It is primarily used for mobile applications and comes in three variants, **icons** and **text**, and **shift**.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 While `v-bottom navigation` is meant to be used with [vue-router](https://router.vuejs.org/), you can also programmatically control the active state of the buttons by using the **value** property. A button is given a default value of its _index_ with `v-bottom-navigation`.
 
-<usage name="v-bottom-navigation" />
+<ExamplesUsage name="v-bottom-navigation" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ While `v-bottom navigation` is meant to be used with [vue-router](https://router
 | [v-bottom-navigation](/api/v-bottom-navigation/) | Primary Component |
 | [v-btn](/api/v-btn/) | Sub-component used for modifying the `v-bottom-navigation` state |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ::: info
 
@@ -53,34 +53,34 @@ For styles to apply properly when using the **shift** prop, `v-btn` text is **re
 
 The **color** prop applies a color to the background of the bottom navigation. We recommend using the **light** and **dark** props to properly contrast text color.
 
-<example file="v-bottom-navigation/prop-color" />
+<ExamplesExample file="v-bottom-navigation/prop-color" />
 
 #### Grow
 
 Using the **grow** property forces [v-btn](/components/buttons/) components to _fill_ all available space. Buttons have a maximum width of **168px** per the [Bottom Navigation MD specification](https://material.io/components/bottom-navigation#specs).
 
-<example file="v-bottom-navigation/prop-grow" />
+<ExamplesExample file="v-bottom-navigation/prop-grow" />
 
 <!-- TODO: Fix this example when scrolling techniques is implemented
 #### Hide on scroll
 
 The `v-bottom-navigation` component hides when *scrolling up* when using the **hide-on-scroll** property. This is similar to the [scrolling techniques](https://material.io/archive/guidelines/patterns/scrolling-techniques.html) that are supported in [v-app-bar](/components/app-bars/). In the following example, scroll *up and down* to see this behavior.
 
-<example file="v-bottom-navigation/prop-hide-on-scroll" />
+<ExamplesExample file="v-bottom-navigation/prop-hide-on-scroll" />
 -->
 
 #### Horizontal
 
 Adjust the style of buttons and icons by using the **horizontal** prop. This positions button text *inline* with the provided [v-icon](/components/icons/).
 
-<example file="v-bottom-navigation/prop-horizontal" />
+<ExamplesExample file="v-bottom-navigation/prop-horizontal" />
 
 <!-- TODO: Fix this example when scrolling techniques is implemented
 #### Scroll threshold
 
 Modify the **scroll-threshold** property to increase the distance a user must scroll before the `v-bottom-navigation` is hidden.
 
-<example file="v-bottom-navigation/prop-scroll-threshold" />
+<ExamplesExample file="v-bottom-navigation/prop-scroll-threshold" />
 -->
 
 #### Shift
@@ -91,10 +91,10 @@ The **shift** prop hides button text when not active. This provides an alternati
   For this to work, `v-btn` text is **required** to be wrapped in a `span` tag.
 :::
 
-<example file="v-bottom-navigation/prop-shift" />
+<ExamplesExample file="v-bottom-navigation/prop-shift" />
 
 #### Toggle
 
 Since `v-bottom-navigation` supports v-model, use the **active** prop to control the display state.
 
-<example file="v-bottom-navigation/prop-toggle" />
+<ExamplesExample file="v-bottom-navigation/prop-toggle" />
diff --git a/packages/docs/src/pages/en/components/bottom-sheets.md b/packages/docs/src/pages/en/components/bottom-sheets.md
index b61bb36faa9..3f96197b704 100644
--- a/packages/docs/src/pages/en/components/bottom-sheets.md
+++ b/packages/docs/src/pages/en/components/bottom-sheets.md
@@ -21,7 +21,7 @@ The bottom sheet is a modified `v-dialog` that slides from the bottom of the scr
 
 ![Bottom Sheet Entry](https://cdn.vuetifyjs.com/docs/images/components/v-bottom-sheet/v-bottom-sheet-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -31,9 +31,9 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no
 
 Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet is meant to contain anything.
 
-<usage name="v-bottom-sheet" />
+<ExamplesUsage name="v-bottom-sheet" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -41,7 +41,7 @@ Whereas a bottom navigation component is for buttons and specific application le
 |--------------------------------------------------|-------------------|
 | [v-bottom-sheet](/api/v-bottom-sheet/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -80,7 +80,7 @@ The `v-bottom-sheet` component has access to all of the props available in [v-di
 
 The **v-model** (or **model-value**) controls the visibility of the bottom sheet:
 
-<example file="v-bottom-sheet/prop-model" />
+<ExamplesExample file="v-bottom-sheet/prop-model" />
 
 This also works in tandem with the [activator](/api/v-bottom-sheet/#slots-activator) slot.
 
@@ -88,7 +88,7 @@ This also works in tandem with the [activator](/api/v-bottom-sheet/#slots-activa
 
 With the **inset** prop, reduce the maximum width of the content area on desktop to 70%. This can be further reduced manually using the **width** prop.
 
-<example file="v-bottom-sheet/prop-inset" />
+<ExamplesExample file="v-bottom-sheet/prop-inset" />
 
 ### Slots
 
@@ -113,10 +113,10 @@ The following are a collection of examples that demonstrate more advanced and re
 
 Using a inset bottom sheet, you can make practical components such as this simple music player.
 
-<example file="v-bottom-sheet/misc-player" />
+<ExamplesExample file="v-bottom-sheet/misc-player" />
 
 #### Open In List
 
 By combining a functional list into a bottom sheet, you can create a simple 'open in' component.
 
-<example file="v-bottom-sheet/misc-open-in-list" />
+<ExamplesExample file="v-bottom-sheet/misc-open-in-list" />
diff --git a/packages/docs/src/pages/en/components/breadcrumbs.md b/packages/docs/src/pages/en/components/breadcrumbs.md
index ff608b80602..797700b5317 100644
--- a/packages/docs/src/pages/en/components/breadcrumbs.md
+++ b/packages/docs/src/pages/en/components/breadcrumbs.md
@@ -21,15 +21,15 @@ The `v-breadcrumbs` component is used as a navigational helper and hierarchy for
 
 <!-- ![breadcrumbs Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-breadcrumbs/v-breadcrumbs-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 By default, breadcrumbs use a text divider. This can be any string.
 
-<usage name="v-breadcrumbs" />
+<ExamplesUsage name="v-breadcrumbs" />
 
-<entry />
+<PromotedEntry />
 
 ::: tip
 
@@ -45,7 +45,7 @@ Use [slots](/api/v-breadcrumbs/#slots) for more control of the breadcrumbs, eith
 | [v-breadcrumbs-item](/api/v-breadcrumbs-item/) | Sub-component used for each breadcrumb |
 | [v-breadcrumbs-divider](/api/v-breadcrumbs-divider/) | Sub-component used for dividing breadcrumbs |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ::: info
   By default `v-breadcrumbs` will disable all crumbs up to the current page in a nested paths. You can prevent this behavior by using `exact: true` on each applicable breadcrumb in the `items` array.
@@ -59,7 +59,7 @@ Use [slots](/api/v-breadcrumbs/#slots) for more control of the breadcrumbs, eith
 
 Breadcrumbs separator can be set using `divider` property.
 
-<example file="v-breadcrumbs/prop-divider" />
+<ExamplesExample file="v-breadcrumbs/prop-divider" />
 
 ### Slots
 
@@ -67,16 +67,16 @@ Breadcrumbs separator can be set using `divider` property.
 
 Prepend content with the `prepend` slot.
 
-<example file="v-breadcrumbs/slot-prepend" />
+<ExamplesExample file="v-breadcrumbs/slot-prepend" />
 
 #### Dividers
 
 To customize the divider, use the `divider` slot.
 
-<example file="v-breadcrumbs/slot-icon-dividers" />
+<ExamplesExample file="v-breadcrumbs/slot-icon-dividers" />
 
 #### Title
 
 You can use the `title` slot to customize each breadcrumb title.
 
-<example file="v-breadcrumbs/slot-title" />
+<ExamplesExample file="v-breadcrumbs/slot-title" />
diff --git a/packages/docs/src/pages/en/components/button-groups.md b/packages/docs/src/pages/en/components/button-groups.md
index 88157d87ecc..e91c173a805 100644
--- a/packages/docs/src/pages/en/components/button-groups.md
+++ b/packages/docs/src/pages/en/components/button-groups.md
@@ -21,15 +21,15 @@ The `v-btn-toggle` component is a simple wrapper for `v-item-group` built specif
 
 <!-- ![btn-groups Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-btn-groups/v-btn-groups-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Toggle buttons allow you to create a styled group of buttons that can be selected or toggled under a single **v-model**.
 
-<example file="v-btn-toggle/usage" />
+<ExamplesExample file="v-btn-toggle/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -39,7 +39,7 @@ Toggle buttons allow you to create a styled group of buttons that can be selecte
 | [v-btn](/api/v-btn/)               | Sub-component used for modifying the `v-btn-toggle` state |
 | [v-btn-group](/api/v-btn-group/)   | A stateless version of `v-btn-toggle` |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -49,31 +49,31 @@ Toggle buttons allow you to create a styled group of buttons that can be selecte
 
 You can add a visual divider between buttons with the **divided** prop.
 
-<example file="v-btn-toggle/prop-divided" />
+<ExamplesExample file="v-btn-toggle/prop-divided" />
 
 #### Variant
 
 You can switch the button variant by using **variant** prop on `v-btn-toggle`.
 
-<example file="v-btn-toggle/prop-variant" />
+<ExamplesExample file="v-btn-toggle/prop-variant" />
 
 #### Mandatory
 
 A `v-btn-toggle` with the **mandatory** prop will always have a value.
 
-<example file="v-btn-toggle/prop-mandatory" />
+<ExamplesExample file="v-btn-toggle/prop-mandatory" />
 
 #### Multiple
 
 A `v-btn-toggle` with the **multiple** prop will allow a user to select multiple return values as an array.
 
-<example file="v-btn-toggle/prop-multiple" />
+<ExamplesExample file="v-btn-toggle/prop-multiple" />
 
 #### Rounded
 
 You can control the border radius with the **rounded** prop.
 
-<example file="v-btn-toggle/prop-rounded" />
+<ExamplesExample file="v-btn-toggle/prop-rounded" />
 
 ### Misc
 
@@ -81,10 +81,10 @@ You can control the border radius with the **rounded** prop.
 
 Easily integrate customized button solutions with a `v-toolbar`
 
-<example file="v-btn-toggle/misc-toolbar" /> -->
+<ExamplesExample file="v-btn-toggle/misc-toolbar" /> -->
 
 #### WYSIWYG
 
 Group similar actions and design your own WYSIWYG component.
 
-<example file="v-btn-toggle/misc-wysiwyg" />
+<ExamplesExample file="v-btn-toggle/misc-wysiwyg" />
diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md
index faac70c4961..c54ac56df74 100644
--- a/packages/docs/src/pages/en/components/buttons.md
+++ b/packages/docs/src/pages/en/components/buttons.md
@@ -22,15 +22,15 @@ The `v-btn` component replaces the standard html button with a material design t
 
 ![Button Entry](https://cdn.vuetifyjs.com/docs/images/components/v-btn/v-btn-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
 
-<usage name="v-btn" />
+<ExamplesUsage name="v-btn" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -38,7 +38,7 @@ Buttons in their simplest form contain uppercase text, a slight elevation, hover
 | - | - |
 | [v-btn](/api/v-btn/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -73,19 +73,19 @@ A wide array of props can be employed to modify the `v-btn` component's look and
 
 The **density** prop is used to control the vertical space that the button takes up.
 
-<example file="v-btn/prop-density" />
+<ExamplesExample file="v-btn/prop-density" />
 
 #### Size
 
 The **size** property is used to control the size of the button and scales with density. The default size is **undefined** which essentially translates to **medium**.
 
-<example file="v-btn/prop-size" />
+<ExamplesExample file="v-btn/prop-size" />
 
 #### Block
 
 Block buttons extend the full available width of their container. This is useful for creating buttons that span the full width of a card or dialog.
 
-<example file="v-btn/prop-block" />
+<ExamplesExample file="v-btn/prop-block" />
 
 ::: info
 Block applies **width: 100%** which can cause overflow issues inside a flex container.
@@ -95,19 +95,19 @@ Block applies **width: 100%** which can cause overflow issues inside a flex cont
 
 Use the **rounded** prop to control the border radius of a button.
 
-<example file="v-btn/prop-rounded" />
+<ExamplesExample file="v-btn/prop-rounded" />
 
 #### Elevation
 
 The **elevation** property provides up to 24 levels of shadow depth. By default, buttons rest at 2dp.
 
-<example file="v-btn/prop-elevation" />
+<ExamplesExample file="v-btn/prop-elevation" />
 
 #### Ripple
 
 The **ripple** property determines whether the [v-ripple](/directives/ripple/) directive is used.
 
-<example file="v-btn/prop-ripple" />
+<ExamplesExample file="v-btn/prop-ripple" />
 
 #### Variants
 
@@ -126,21 +126,21 @@ The **variant** prop gives you easy access to several different button styles. A
 
 Icons can be used for the primary content of a button. They are commonly used in the [v-toolbar](/components/toolbars/) and [v-app-bar](/components/app-bars/) components.
 
-<example file="v-btn/prop-icon" />
+<ExamplesExample file="v-btn/prop-icon" />
 
-<random />
+<PromotedRandom />
 
 #### Loaders
 
 Using the loading prop, you can notify a user that there is processing taking place. The default behavior is to use a `v-progress-circular` component but this can be customized with the **loader** slot.
 
-<example file="v-btn/prop-loaders" />
+<ExamplesExample file="v-btn/prop-loaders" />
 
 #### Inside of bars
 
 A common use-case is to use the `v-btn` with the **icon** property within a [v-toolbar](/components/toolbars/) or [v-app-bar](/components/app-bars/) component.
 
-<example file="v-btn/misc-toolbar" />
+<ExamplesExample file="v-btn/misc-toolbar" />
 
 ### Slots
 
@@ -161,13 +161,13 @@ Slots give you greater control to customize the content of the `v-btn` component
 
 When you use the **prepend-icon** and **append-icon** props in conjunction with the corresponding slot, **prepend** or **append**, you are able to place a [v-icon](/components/icons/) that automatically injects the designated icon.
 
-<example file="v-btn/slot-prepend-append" />
+<ExamplesExample file="v-btn/slot-prepend-append" />
 
 #### Custom loader
 
 The **loader** slot allows you to customize the loading indicator. In this example we use a [v-progress-linear](/components/progress-linear/) component to create a loading bar that spans the full width of the button.
 
-<example file="v-btn/slot-loader" />
+<ExamplesExample file="v-btn/slot-loader" />
 
 ## Examples
 
@@ -177,33 +177,33 @@ The following are a collection of examples that demonstrate more advanced and re
 
 In this example we utilize multiple different button variants and styles to create a copy of the Discord event card.
 
-<example file="v-btn/misc-discord-event" hide-invert />
+<ExamplesExample file="v-btn/misc-discord-event" hide-invert />
 
 ### Survey group
 
 In addition to [Button groups](/components/button-groups/), the `v-btn` component cant hook into a [v-item-group](/components/item-groups/) using a special symbol. In the next example we create a group of buttons that are used to select a survey answer and add custom **active** state styling.
 
-<example file="v-btn/misc-group-survey" hide-invert />
+<ExamplesExample file="v-btn/misc-group-survey" hide-invert />
 
 ### Tax form confirmation
 
 This example utilizes the [v-text-field](/components/text-fields/) component to collect data from the user and the **loading** prop of `v-btn` when submitting the form.
 
-<example file="v-btn/misc-tax-form" />
+<ExamplesExample file="v-btn/misc-tax-form" />
 
-<random />
+<PromotedRandom />
 
 ### Dialog action
 
 Buttons are often used to trigger actions within a [v-dialog](/components/dialogs/). In this example we use the **outlined** variant and the **color** prop to create a button that is visually distinct from the other buttons.
 
-<example file="v-btn/misc-dialog-action" />
+<ExamplesExample file="v-btn/misc-dialog-action" />
 
 ### Cookie settings
 
 In this example we use a [v-banner](/components/banners/) component to display a custom cookie consent banner. Clicking the "Manage Cookies" button will prompt a [v-dialog](/components/dialogs/) component.
 
-<example file="v-btn/misc-cookie-settings" />
+<ExamplesExample file="v-btn/misc-cookie-settings" />
 
 ## Global Configuration
 
@@ -282,7 +282,7 @@ The `v-banner-actions` component applies the **text** variant and **slim** prop,
 | - | - |
 | [Banners](/components/banners/) | [v-banner-actions](/api/v-banner-actions/) |  |
 
-<example file="v-btn/defaults-banner-actions" />
+<ExamplesExample file="v-btn/defaults-banner-actions" />
 
 The following properties are modified when used within a `v-banner-actions` component:
 
@@ -301,7 +301,7 @@ The `v-bottom-navigation` component **scopes** out all previously provided defau
 | - | - |
 | [Bottom navigation](/components/bottom-navigation/) | [v-bottom-navigation](/api/v-bottom-navigation/) |  |
 
-<example file="v-btn/defaults-bottom-navigation" />
+<ExamplesExample file="v-btn/defaults-bottom-navigation" />
 
 The following properties are modified when used within a `v-bottom-navigation` component:
 
@@ -320,7 +320,7 @@ The `v-btn-group` component makes multiple changes to the `v-btn` component.
 | - | - |
 | [Button groups](/components/button-groups/) | [v-btn-group](/api/v-btn-group/) |  |
 
-<example file="v-btn/defaults-btn-group" />
+<ExamplesExample file="v-btn/defaults-btn-group" />
 
 The following properties are modified when used within a `v-btn-group` component:
 
@@ -340,7 +340,7 @@ The `v-card-actions` component applies the **text** variant and **slim** prop, r
 | - | - |
 | [Cards](/components/cards/) | [v-card-actions](/api/v-card-actions/) |  |
 
-<example file="v-btn/defaults-card-actions" />
+<ExamplesExample file="v-btn/defaults-card-actions" />
 
 The following properties are modified when used within a `v-card-actions` component:
 
@@ -357,7 +357,7 @@ The `v-snackbar` component applies the **text** variant, **slim** prop, and remo
 | - | - |
 | [Snackbars](/components/snackbars/) | [v-snackbar](/api/v-snackbar/) |  |
 
-<example file="v-btn/defaults-snackbar" />
+<ExamplesExample file="v-btn/defaults-snackbar" />
 
 The following properties are modified when used within the **actions** slot of the `v-snackbar` component:
 
@@ -375,7 +375,7 @@ The `v-toolbar` component applies the **text** variant to all `v-btn` components
 | - | - |
 | [Toolbars](/components/toolbars/) | [v-toolbar](/api/v-toolbar/)  |
 
-<example file="v-btn/defaults-toolbar" />
+<ExamplesExample file="v-btn/defaults-toolbar" />
 
 The following properties are modified when used within a `v-toolbar` or `v-toolbar-items` component:
 
diff --git a/packages/docs/src/pages/en/components/calendars.md b/packages/docs/src/pages/en/components/calendars.md
index 0281a73d8ee..b402895424f 100644
--- a/packages/docs/src/pages/en/components/calendars.md
+++ b/packages/docs/src/pages/en/components/calendars.md
@@ -19,20 +19,12 @@ features:
 
 The `v-calendar` component is used to display information in a daily, weekly, monthly. The daily view has slots for all day or timed elements, and the weekly and monthly view has a slot for each day.
 
-<page-features />
+<PageFeatures />
 
 ::: warning
 This feature requires [v3.4.9](/getting-started/release-notes/?version=v3.4.9)
 :::
 
-## Usage
-
-A calendar has a type and a value which determines what type of calendar is shown over what span of time. This shows the bare minimum configuration, an array of events with **title**, **start** and **end** properties. **end** is optional, it defaults to the **start**. If the **start** has a time it's considered a timed event and will be shown accordingly in the day views. An event can span multiple days and will be rendered accordingly.
-
-<example file="v-calendar/usage" />
-
-<entry />
-
 ## Installation
 
 Labs components require a manual import and installation of the component.
@@ -47,13 +39,21 @@ export default createVuetify({
 })
 ```
 
+## Usage
+
+A calendar has a type and a value which determines what type of calendar is shown over what span of time. This shows the bare minimum configuration, an array of events with **title**, **start** and **end** properties. **end** is optional, it defaults to the **start**. If the **start** has a time it's considered a timed event and will be shown accordingly in the day views. An event can span multiple days and will be rendered accordingly.
+
+<ExamplesExample file="v-calendar/usage" />
+
+<PromotedEntry />
+
 ## API
 
 | Component | Description |
 | - | - |
 | [v-calendar](/api/v-calendar/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Guide
 
@@ -67,16 +67,16 @@ The `v-calendar` component is equipped with a range of props that allow you to t
 
 This is a calendar with the type of `month`
 
-<example file="v-calendar/prop-type-month" />
+<ExamplesExample file="v-calendar/prop-type-month" />
 
 #### Type week
 
 This is a calendar with the type of `week`
 
-<example file="v-calendar/prop-type-week" />
+<ExamplesExample file="v-calendar/prop-type-week" />
 
 #### Type day
 
 This is a calendar with the type of `day`
 
-<example file="v-calendar/prop-type-day" />
+<ExamplesExample file="v-calendar/prop-type-day" />
diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md
index 3c30fc7c0b1..79a90c5ebe5 100644
--- a/packages/docs/src/pages/en/components/cards.md
+++ b/packages/docs/src/pages/en/components/cards.md
@@ -22,15 +22,15 @@ features:
 
 ![Card Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-card/v-card-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-card` component is a stylish way to wrap different types of content; such as tables, images, or user actions.
 
-<usage name="v-card" />
+<ExamplesUsage name="v-card" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -61,13 +61,13 @@ The recommended placement of elements inside of `v-card` is:
 | 4. Text (optional) | A content area with a lower emphasis text color |
 | 5. Actions (optional) | A content area that typically contains one or more [v-btn](/components/buttons) components |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Basics
 
 There are three ways you can populate a `v-card` with content. The first one is by using props, the second one is by slots, and the third one is by manually using the `v-card-*` components.
 
-<example file="v-card/basics-content" />
+<ExamplesExample file="v-card/basics-content" />
 
 Props give you an easy interface to display text-only content. They can also be used to easily render images and icons.
 
@@ -79,7 +79,7 @@ In some cases it is possible to combine the different options, like the example
   In general slots take precedence over props. So if you provide both **text** prop and use **text** slot, then only the slot content will be rendered.
 :::
 
-<example file="v-card/basics-combine" />
+<ExamplesExample file="v-card/basics-combine" />
 
 ### Content overflow
 
@@ -102,49 +102,49 @@ The **variant** prop gives you easy access to several different card styles. Ava
 | **text**     | Removes the background and removes shadow                   |
 | **plain**    | Removes the background and lowers the opacity until hovered |
 
-<example file="v-card/prop-variant" />
+<ExamplesExample file="v-card/prop-variant" />
 
 #### Color
 
 Cards can be colored by using any of the builtin colors and contextual names using the **color** prop.
 
-<example file="v-card/prop-color" />
+<ExamplesExample file="v-card/prop-color" />
 
 #### Elevation
 
 The **elevation** property provides up to 24 levels of shadow depth. By default, cards rest at 2dp.
 
-<example file="v-card/prop-elevation" />
+<ExamplesExample file="v-card/prop-elevation" />
 
 #### Hover
 
 When using the **hover** prop, the cards will increase its elevation when the mouse is hovered over them.
 
-<example file="v-card/prop-hover" />
+<ExamplesExample file="v-card/prop-hover" />
 
 #### Href
 
 The card becomes an anchor with the **href** prop.
 
-<example file="v-card/prop-href" />
+<ExamplesExample file="v-card/prop-href" />
 
 #### Link
 
 Add the **link** prop for the same style without adding an anchor.
 
-<example file="v-card/prop-link" />
+<ExamplesExample file="v-card/prop-link" />
 
 #### Disabled
 
 The **disabled** prop can be added in order to prevent a user from interacting with the card.
 
-<example file="v-card/prop-disabled" />
+<ExamplesExample file="v-card/prop-disabled" />
 
 #### Image
 
 Apply a specific background image to the Card.
 
-<example file="v-card/prop-image" />
+<ExamplesExample file="v-card/prop-image" />
 
 ### Slots
 
@@ -156,7 +156,7 @@ Slots give you greater control to customize the content of the `v-card` componen
 
 You can use the **prepend-avatar**, **append-avatar**, **prepend-icon** and **append-icon** props or the **prepend** and **append** slots to place a [v-icon](/components/icons/) that automatically injects the designated icon.
 
-<example file="v-card/slot-prepend-append" />
+<ExamplesExample file="v-card/slot-prepend-append" />
 
 ### Misc
 
@@ -164,58 +164,58 @@ You can use the **prepend-avatar**, **append-avatar**, **prepend-icon** and **ap
 
 Using [v-expand-transition](/api/v-expand-transition/) and a `@click` event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed.
 
-<example file="v-card/misc-card-reveal" />
+<ExamplesExample file="v-card/misc-card-reveal" />
 
 #### Content wrapping
 
 The `v-card` component is useful for wrapping content.
 
-<example file="v-card/misc-content-wrapping" />
+<ExamplesExample file="v-card/misc-content-wrapping" />
 
 #### Custom actions
 
 With a simple conditional, you can easily add supplementary text that is hidden until opened.
 
-<example file="v-card/misc-custom-actions" />
+<ExamplesExample file="v-card/misc-custom-actions" />
 
 #### Grids
 
 Using [grids](/components/grids/), you can create beautiful layouts.
 
-<example file="v-card/misc-grids" />
+<ExamplesExample file="v-card/misc-grids" />
 
 #### Horizontal cards
 
 You can also play with the card layout using [layout flex](/styles/flex/).
 
-<example file="v-card/misc-horizontal-cards" />
+<ExamplesExample file="v-card/misc-horizontal-cards" />
 
 #### Information card
 
 Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.
 
-<example file="v-card/misc-information-card" />
+<ExamplesExample file="v-card/misc-information-card" />
 
 #### Media with text
 
 Using the layout system, we can add custom text anywhere within the background.
 
-<example file="v-card/misc-media-with-text" />
+<ExamplesExample file="v-card/misc-media-with-text" />
 
 #### Twitter card
 
 The `v-card` component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the `v-card-title`, `v-card-text` and `v-card-actions` components.
 
-<example file="v-card/misc-twitter-card" />
+<ExamplesExample file="v-card/misc-twitter-card" />
 
 #### Weather card
 
 Using [v-list-items](/components/lists) and a [v-slider](/components/sliders), we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.
 
-<example file="v-card/misc-weather-card" />
+<ExamplesExample file="v-card/misc-weather-card" />
 
 #### Loading
 
 Use an indeterminate [v-progress-linear](/components/progress-linear) to indicate a loading state.
 
-<example file="v-card/prop-loading" />
+<ExamplesExample file="v-card/prop-loading" />
diff --git a/packages/docs/src/pages/en/components/carousels.md b/packages/docs/src/pages/en/components/carousels.md
index 61f7f065e0b..5af9d545f1e 100644
--- a/packages/docs/src/pages/en/components/carousels.md
+++ b/packages/docs/src/pages/en/components/carousels.md
@@ -20,15 +20,15 @@ The `v-carousel` component is used to display large numbers of visual content on
 
 <!-- ![carousel Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-carousel/v-carousel-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-carousel` component expands upon `v-window` by providing additional features targeted at displaying images.
 
-<usage name="v-carousel" />
+<ExamplesUsage name="v-carousel" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ The `v-carousel` component expands upon `v-window` by providing additional featu
 | [v-carousel](/api/v-carousel/) | Primary component |
 | [v-carousel-item](/api/v-carousel-item/) | Sub-component used for displaying the `v-carousel` state |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -47,46 +47,46 @@ The `v-carousel` component expands upon `v-window` by providing additional featu
 
 Use any available icon as your carousel's slide delimiter.
 
-<example file="v-carousel/prop-custom-icons" />
+<ExamplesExample file="v-carousel/prop-custom-icons" />
 
 <!-- #### Custom transition
 
 The `v-carousel-item` component can have its **transition/reverse-transition** changed.
 
-<example file="v-carousel/prop-custom-transition" /> -->
+<ExamplesExample file="v-carousel/prop-custom-transition" /> -->
 
 #### Cycle
 
 With the **cycle** prop you can have your slides automatically transition to the next available every 6s (default).
 
-<example file="v-carousel/prop-cycle" />
+<ExamplesExample file="v-carousel/prop-cycle" />
 
 #### Hide controls
 
 You can hide the carousel navigation controls with `:show-arrows="false"`. Or you can make them only appear on hover with `show-arrows="hover"`.
 
-<example file="v-carousel/prop-hide-controls" />
+<ExamplesExample file="v-carousel/prop-hide-controls" />
 
 #### Customized arrows
 
 Arrows can be customized by using **prev** and **next** slots.
 
-<example file="v-carousel/slots-next-prev" />
+<ExamplesExample file="v-carousel/slots-next-prev" />
 
 #### Hide delimiters
 
 You can hide the bottom controls with **hide-delimiters** prop.
 
-<example file="v-carousel/prop-hide-delimiters" />
+<ExamplesExample file="v-carousel/prop-hide-delimiters" />
 
 #### Progress
 
 You can show a linear progress bar with the **progress** prop. It will indicate how far into the cycle the carousel currently is.
 
-<example file="v-carousel/prop-progress" />
+<ExamplesExample file="v-carousel/prop-progress" />
 
 #### Model
 
 You can control carousel with **v-model**.
 
-<example file="v-carousel/prop-model" />
+<ExamplesExample file="v-carousel/prop-model" />
diff --git a/packages/docs/src/pages/en/components/checkboxes.md b/packages/docs/src/pages/en/components/checkboxes.md
index fa677fc677b..744d1a29c29 100644
--- a/packages/docs/src/pages/en/components/checkboxes.md
+++ b/packages/docs/src/pages/en/components/checkboxes.md
@@ -19,15 +19,15 @@ features:
 
 The `v-checkbox` component provides users the ability to choose between two distinct values. These are very similar to a switch and can be used in complex forms and checklists.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 A `v-checkbox` in its simplest form provides a toggle between 2 values.
 
-<usage name="v-checkbox" />
+<ExamplesUsage name="v-checkbox" />
 
-<entry />
+<PromotedEntry />
 
 ::: tip
 
@@ -41,7 +41,7 @@ A simpler version, `v-simple-checkbox` is used primarily as a lightweight altern
 | - | - |
 | [v-checkbox](/api/v-checkbox/) | Primary component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -51,25 +51,25 @@ A simpler version, `v-simple-checkbox` is used primarily as a lightweight altern
 
 Checkboxes can be colored by using any of the builtin colors and contextual names using the **color** prop.
 
-<example file="v-checkbox/prop-colors" />
+<ExamplesExample file="v-checkbox/prop-colors" />
 
 #### Model as array
 
 Multiple `v-checkbox`'s can share the same **v-model** by using an array.
 
-<example file="v-checkbox/prop-model-as-array" />
+<ExamplesExample file="v-checkbox/prop-model-as-array" />
 
 #### Model as boolean
 
 A single `v-checkbox` will have a boolean value as its **value**.
 
-<example file="v-checkbox/prop-model-as-boolean" />
+<ExamplesExample file="v-checkbox/prop-model-as-boolean" />
 
 #### States
 
 `v-checkbox` can have different states such as **default**, **disabled**, and **indeterminate**.
 
-<example file="v-checkbox/prop-states" />
+<ExamplesExample file="v-checkbox/prop-states" />
 
 ### Slots
 
@@ -77,7 +77,7 @@ A single `v-checkbox` will have a boolean value as its **value**.
 
 Checkbox labels can be defined in `label` slot - that will allow to use HTML content.
 
-<example file="v-checkbox/slot-label" />
+<ExamplesExample file="v-checkbox/slot-label" />
 
 ### Misc
 
@@ -87,4 +87,4 @@ If you need to place checkboxes in line with other components, you can use the `
 
 This component renders just checkbox, without the trapping of a form input such as validation, a label, and messages.
 
-<example file="v-checkbox/misc-inline-textfield" />
+<ExamplesExample file="v-checkbox/misc-inline-textfield" />
diff --git a/packages/docs/src/pages/en/components/chip-groups.md b/packages/docs/src/pages/en/components/chip-groups.md
index 054e545489f..dcdd98da83c 100644
--- a/packages/docs/src/pages/en/components/chip-groups.md
+++ b/packages/docs/src/pages/en/components/chip-groups.md
@@ -21,15 +21,15 @@ The `v-chip-group` supercharges the `v-chip` component by providing groupable fu
 
 <!-- ![chip-groups Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-chip-groups/v-chip-groups-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Chip groups make it easy for users to select filtering options for more complex implementations. By default `v-chip-group` will overflow to the right but can be changed to a **column** only mode.
 
-<usage name="v-chip-group" />
+<ExamplesUsage name="v-chip-group" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ Chip groups make it easy for users to select filtering options for more complex
 | - | - |
 | [v-chip-group](/api/v-chip-group/) | Primary component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -47,25 +47,25 @@ Chip groups make it easy for users to select filtering options for more complex
 
 Chip groups with **column** prop can wrap their chips.
 
-<example file="v-chip-group/prop-column" />
+<ExamplesExample file="v-chip-group/prop-column" />
 
 #### Filter results
 
 Easily create chip groups that provide additional feedback with the **filter** prop. This creates an alternative visual style that communicates to the user that the chip is selected.
 
-<example file="v-chip-group/prop-filter" />
+<ExamplesExample file="v-chip-group/prop-filter" />
 
 #### Mandatory
 
 Chip groups with **mandatory** prop must always have a value selected.
 
-<example file="v-chip-group/prop-mandatory" />
+<ExamplesExample file="v-chip-group/prop-mandatory" />
 
 #### Multiple
 
 Chip groups with **multiple** prop can have many values selected.
 
-<example file="v-chip-group/prop-multiple" />
+<ExamplesExample file="v-chip-group/prop-multiple" />
 
 ### Misc
 
@@ -73,10 +73,10 @@ Chip groups with **multiple** prop can have many values selected.
 
 The `v-chip` component can have an explicit value used for its model. This gets passed to the `v-chip-group` component and is useful for when you don't want to use the chips index as their values.
 
-<example file="v-chip-group/misc-product-card" />
+<ExamplesExample file="v-chip-group/misc-product-card" />
 
 #### Toothbrush card
 
 Chip groups allow the creation of custom interfaces that perform the same actions as an item group or radio controls, but are stylistically different.
 
-<example file="v-chip-group/misc-toothbrush-card" />
+<ExamplesExample file="v-chip-group/misc-toothbrush-card" />
diff --git a/packages/docs/src/pages/en/components/chips.md b/packages/docs/src/pages/en/components/chips.md
index 39aaf9d5d29..2e932052656 100644
--- a/packages/docs/src/pages/en/components/chips.md
+++ b/packages/docs/src/pages/en/components/chips.md
@@ -22,15 +22,15 @@ The `v-chip` component is used to convey small pieces of information. Using the
 
 ![Chips Entry](https://cdn.vuetifyjs.com/docs/images/components/v-chip/v-chip-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Chips come in the following variations: closeable, filter, outlined, pill. The default slot of `v-chip` will also accept avatars and icons alongside text.
 
-<usage name="v-chip" />
+<ExamplesUsage name="v-chip" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -38,7 +38,7 @@ Chips come in the following variations: closeable, filter, outlined, pill. The d
 | - | - |
 | [v-chip](/api/v-chip/) | Primary component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Guide
 
@@ -52,13 +52,13 @@ Similar to other components such as [v-btn](/components/buttons/) and [v-list](/
 
 Closable chips can be controlled with a v-model. You can also listen to the `click:close` event if you want to know when a chip has been closed.
 
-<example file="v-chip/prop-closable" />
+<ExamplesExample file="v-chip/prop-closable" />
 
 #### Color and variants
 
 Any color from the Material Design palette can be used to change a chips color.
 
-<example file="v-chip/prop-colored" />
+<ExamplesExample file="v-chip/prop-colored" />
 
 The **variant** prop gives you easy access to several different button styles. Available variants are: **elevated**, **flat**, **tonal** (default), **outlined**, **text**, and **plain**.
 
@@ -75,31 +75,31 @@ The **variant** prop gives you easy access to several different button styles. A
 
 Chips can have various sizes from `x-small` to `x-large`. `density` is used to adjust the vertical spacing without affecting width or font size.
 
-<example file="v-chip/prop-sizes" />
+<ExamplesExample file="v-chip/prop-sizes" />
 
 #### Draggable
 
 `draggable` `v-chip` component can be dragged by mouse.
 
-<example file="v-chip/prop-draggable" />
+<ExamplesExample file="v-chip/prop-draggable" />
 
 #### Label
 
 Label chips use the `v-card` border-radius.
 
-<example file="v-chip/prop-label" />
+<ExamplesExample file="v-chip/prop-label" />
 
 #### No ripple
 
 `v-chip` can be rendered without ripple if `ripple` prop is set to `false`.
 
-<example file="v-chip/prop-no-ripple" />
+<ExamplesExample file="v-chip/prop-no-ripple" />
 
 #### Outlined
 
 Outlined chips inherit their border color from the current text color.
 
-<example file="v-chip/prop-outlined" />
+<ExamplesExample file="v-chip/prop-outlined" />
 
 ### Slots
 
@@ -107,7 +107,7 @@ Outlined chips inherit their border color from the current text color.
 
 Chips can use text or any icon available in the Material Icons font library.
 
-<example file="v-chip/slot-icon" />
+<ExamplesExample file="v-chip/slot-icon" />
 
 ## Examples
 
@@ -117,28 +117,28 @@ The following are a collection of examples that demonstrate more advanced and re
 
 Chips can be used as actionable items. Provided with a _click_ event, the chip becomes interactive and can invoke methods.
 
-<example file="v-chip/event-action-chips" />
+<ExamplesExample file="v-chip/event-action-chips" />
 
 #### Custom list
 
 In this example we opt to use a customized list instead of [v-autocomplete](/components/autocompletes). This allows us to always display the options available while still providing the same functionality of search and selection.
 
-<example file="v-chip/misc-custom-list" />
+<ExamplesExample file="v-chip/misc-custom-list" />
 
 #### Expandable
 
 Chips can be combined with `v-menu` to enable a specific set of actions for a chip.
 
-<example file="v-chip/misc-expandable" />
+<ExamplesExample file="v-chip/misc-expandable" />
 
 #### Filtering
 
 Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords.
 
-<example file="v-chip/misc-filtering" />
+<ExamplesExample file="v-chip/misc-filtering" />
 
 #### In selects
 
 Selects can use chips to display the selected data. Try adding your own tags below.
 
-<example file="v-chip/misc-in-selects" />
+<ExamplesExample file="v-chip/misc-in-selects" />
diff --git a/packages/docs/src/pages/en/components/color-pickers.md b/packages/docs/src/pages/en/components/color-pickers.md
index ca85c10b4e4..da101de73cc 100644
--- a/packages/docs/src/pages/en/components/color-pickers.md
+++ b/packages/docs/src/pages/en/components/color-pickers.md
@@ -18,13 +18,13 @@ features:
 
 The `v-color-picker` allows you to select a color using a variety of input methods.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
-<usage name="v-color-picker" />
+<ExamplesUsage name="v-color-picker" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -32,7 +32,7 @@ The `v-color-picker` allows you to select a color using a variety of input metho
 | - | - |
 | [v-color-picker](/api/v-color-picker/) | Primary component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -42,28 +42,28 @@ The `v-color-picker` allows you to select a color using a variety of input metho
 
 There are a number of props available to help you customize the component by hiding or showing the various parts of the picker. You can independently hide the canvas, the sliders, and the inputs. You can also show a collection of swatches.
 
-<example file="v-color-picker/prop-canvas" />
+<ExamplesExample file="v-color-picker/prop-canvas" />
 
 #### Elevation
 
 Adjust the elevation of the `v-color-picker` component using the **elevation** or **flat** prop. The **flat** is equivalent to setting **elevation** to 0.
 
-<example file="v-color-picker/prop-elevation" />
+<ExamplesExample file="v-color-picker/prop-elevation" />
 
 #### Mode
 
 You can specify which input modes are available to your users with the `modes` prop. If you only set a single mode, then the mode toggle will automatically be hidden. You can also control the current mode with the `mode` v-model.
 
-<example file="v-color-picker/prop-mode" />
+<ExamplesExample file="v-color-picker/prop-mode" />
 
 #### Model
 
 The `v-color-picker` uses the `v-model` prop to control the color displayed. It supports hex strings such as **#FF00FF** and **#FF00FF00**, and objects representing **RGBA**, **HSLA** and **HSVA** values. The component will try to emit the color in the same format that was provided. If the value is null, then the `v-color-picker` will default to emitting hex colors.
 
-<example file="v-color-picker/prop-model" />
+<ExamplesExample file="v-color-picker/prop-model" />
 
 #### Swatches
 
 Using the `show-swatches` prop you can display an array of color swatches that users can pick from. It is also possible to customize what colors are shown using the `swatches` prop. This prop accepts a two-dimensional array, where the first dimension defines a column, and second dimension defines the swatches from top to bottom by providing rgba hex strings. You can also set the max height of the swatches section with the `swatches-max-height` prop.
 
-<example file="v-color-picker/prop-swatches" />
+<ExamplesExample file="v-color-picker/prop-swatches" />
diff --git a/packages/docs/src/pages/en/components/combobox.md b/packages/docs/src/pages/en/components/combobox.md
index 82db724e41b..2e60804297a 100644
--- a/packages/docs/src/pages/en/components/combobox.md
+++ b/packages/docs/src/pages/en/components/combobox.md
@@ -20,15 +20,15 @@ features:
 
 The `v-combobox` component is a [v-text-field](/components/text-fields) that allows the user to select values from a provided **items** array, or to enter their own value. Created items will be returned as strings.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 With Combobox, you can allow a user to create new values that may not be present in a provided items list.
 
-<usage name="v-combobox" />
+<ExamplesUsage name="v-combobox" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -38,7 +38,7 @@ With Combobox, you can allow a user to create new values that may not be present
 | [v-autocomplete](/api/v-autocomplete/) | A select component that allows for advanced filtering |
 | [v-select](/api/v-select/) | A replacement for the HTML <select></select> |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -56,13 +56,13 @@ With Combobox, you can allow a user to create new values that may not be present
 
 You can use `density` prop to adjust vertical spacing within the component.
 
-<example file="v-combobox/prop-density" />
+<ExamplesExample file="v-combobox/prop-density" />
 
 #### Multiple combobox
 
 Previously known as **tags** - user is allowed to enter more than one value.
 
-<example file="v-combobox/prop-multiple" />
+<ExamplesExample file="v-combobox/prop-multiple" />
 
 ### Slots
 
@@ -70,4 +70,4 @@ Previously known as **tags** - user is allowed to enter more than one value.
 
 In this example we utilize a custom **no-data** slot to provide context to the user when searching / creating items.
 
-<example file="v-combobox/slot-no-data" />
+<ExamplesExample file="v-combobox/slot-no-data" />
diff --git a/packages/docs/src/pages/en/components/data-iterators.md b/packages/docs/src/pages/en/components/data-iterators.md
index c4107f565fa..7c09a47ebe5 100644
--- a/packages/docs/src/pages/en/components/data-iterators.md
+++ b/packages/docs/src/pages/en/components/data-iterators.md
@@ -20,7 +20,7 @@ The `v-data-iterator` component is used for displaying arbitrary data, and share
 
 <!-- ![Data iterator Entry](https://cdn.vuetifyjs.com/docs/images/components/v-data-iterator/v-data-iterator-entry.png){ placeholder=true } -->
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -30,9 +30,9 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no
 
 The `v-data-iterator` allows you to customize exactly how to display your data. In this example we are using a grid with cards.
 
-<usage name="v-data-iterator" />
+<ExamplesUsage name="v-data-iterator" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -40,7 +40,7 @@ The `v-data-iterator` allows you to customize exactly how to display your data.
 |------------------------------------------|-------------------|
 | [v-data-iterator](/api/v-data-iterator/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -88,16 +88,16 @@ The `v-data-iterator` component has 3 main slots
 
 The `v-data-iterator` has internal state for both selection and expansion, just like `v-data-table`. In this example we use the methods `isExpanded` and `toggleExpand` available on the default slot.
 
-<example file="v-data-iterator/slot-default" />
+<ExamplesExample file="v-data-iterator/slot-default" />
 
 #### Header and footer
 
 The `v-data-iterator` has both a **header** and **footer** slot for adding extra content.
 
-<example file="v-data-iterator/slot-header-and-footer" />
+<ExamplesExample file="v-data-iterator/slot-header-and-footer" />
 
 #### Controllable props
 
 Sorting, filters and pagination can be controlled externally by using the individual props
 
-<example file="v-data-iterator/misc-filter" />
+<ExamplesExample file="v-data-iterator/misc-filter" />
diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
index 344d9ca6b67..01d25a79920 100644
--- a/packages/docs/src/pages/en/components/data-tables/basics.md
+++ b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -19,15 +19,15 @@ features:
 
 The `v-data-table` component is used for displaying tabular data. Features include sorting, searching, pagination, grouping, and row selection.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The standard data table presumes that the entire data set is available locally. Sorting, pagination, and filtering is supported and done internally by the component itself.
 
-<usage name="v-data-table" />
+<ExamplesUsage name="v-data-table" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ The standard data table presumes that the entire data set is available locally.
 | [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table headers |
 | [v-checkbox-btn](/api/v-checkbox-btn/) | Reusable lightweight [v-checkbox](/components/checkboxes) |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ### Server side tables
 
@@ -45,7 +45,7 @@ This variant of the data table is meant to be used for very large datasets, wher
 
 Find more information and examples on the [Server side tables](/components/data-tables/server-side-tables) page.
 
-<example file="v-data-table/server" />
+<ExamplesExample file="v-data-table/server" />
 
 ### Virtual tables
 
@@ -53,7 +53,7 @@ The virtual variant of the data table relies, like the standard variant, on all
 
 Find more information and examples on the [Virtual tables](/components/data-tables/virtual-tables) page.
 
-<example file="v-data-table/virtual" />
+<ExamplesExample file="v-data-table/virtual" />
 
 ## Guide
 
@@ -85,7 +85,7 @@ Leaf nodes (objects without **children**) will be used as columns for each item.
 <br>
 Branch nodes (objects with **children**) support all the same sorting and filtering options as leaf nodes, but cannot be used as columns.
 
-<example file="v-data-table/headers-multiple" />
+<ExamplesExample file="v-data-table/headers-multiple" />
 
 #### Keys and values
 
@@ -132,33 +132,33 @@ There are no shortable of properties available for customizing various aspects o
 
 Using the **density** prop you are able to give your data tables an alternate style.
 
-<example file="v-data-table/prop-dense" />
+<ExamplesExample file="v-data-table/prop-dense" />
 
 <!-- #### Footer props
 
 The `v-data-table` renders a default footer using the `v-data-footer` component. You can pass props to this component using **footer-props**.
 
-<example file="v-data-table/prop-footer-props" /> -->
+<ExamplesExample file="v-data-table/prop-footer-props" /> -->
 
 <!-- #### Hide default header and footer
 
 You can apply the **hide-default-header** and **hide-default-footer** props to remove the default header and footer respectively.
 
-<example file="v-data-table/prop-hide-header-footer" /> -->
+<ExamplesExample file="v-data-table/prop-hide-header-footer" /> -->
 
 #### Selection
 
 The **show-select** prop will render a checkbox in the default header to toggle all rows, and a checkbox for each row.
 
-For more information and examples, see the [selection](/components/data-tables/selection) page.
+For more information and examples, see the [selection examples](/components/data-tables/data-and-display/#selection-examples) page.
 
-<example file="v-data-table/prop-row-selection" />
+<ExamplesExample file="v-data-table/prop-row-selection" />
 
 #### Simple checkbox
 
 When wanting to use a checkbox component inside of a slot template in your data tables, use the `v-checkbox-btn` component rather than the `v-checkbox` component. The `v-checkbox-btn` component is used internally and will respect header alignment.
 
-<example file="v-data-table/slot-simple-checkbox" />
+<ExamplesExample file="v-data-table/slot-simple-checkbox" />
 
 ### Slots
 
@@ -170,37 +170,37 @@ You can use the dynamic slots `header.<key>` to customize only certain columns.
 There are two built-in slots for customizing both the select (`header.data-table-select`) and expand (`header.data-table-expand`) columns when using **show-select** and **show-expand** props respectively.
 :::
 
-<example file="v-data-table/slot-header" />
+<ExamplesExample file="v-data-table/slot-header" />
 
 #### Headers slot
 
 You can also override all the internal headers by using the `headers` slot. Remember that you will have to re-implement any internal functionality like sorting.
 
-<example file="v-data-table/slot-headers" />
+<ExamplesExample file="v-data-table/slot-headers" />
 
 #### Item slot
 
 Normally you would use the `item.<key>` slots to render custom markup in specific columns. If you instead need more control over the entire row, you can use the `item` slot.
 
-<example file="v-data-table/slot-item" />
+<ExamplesExample file="v-data-table/slot-item" />
 
 #### Item key slot
 
 You can use the dynamic slots `item.<key>` to customize only certain columns. `<key>` is the name of the **key** property in header items sent to **headers**. So to customize the calories column we're using the `item.calories` slot.
 
-<example file="v-data-table/slot-item-key" />
+<ExamplesExample file="v-data-table/slot-item-key" />
 
 #### Group header slot
 
 When using the **group-by** prop, you can customize the group header with the `group-header` slot.
 
-<example file="v-data-table/slot-group-header" />
+<ExamplesExample file="v-data-table/slot-group-header" />
 
 #### Loading slot
 
 The `loading` slot allows you to customize your table's display state when fetching data. In this example we utilize the [v-skeleton-loader](/components/skeleton-loaders) component to display a loading animation.
 
-<example file="v-data-table/slot-loading" />
+<ExamplesExample file="v-data-table/slot-loading" />
 
 ## Examples
 
@@ -210,7 +210,7 @@ The following are a collection of examples that demonstrate more advanced and re
 
 `v-data-table` with CRUD actions using a `v-dialog` component for editing each row
 
-<example file="v-data-table/misc-crud" />
+<ExamplesExample file="v-data-table/misc-crud" />
 
 ### Expandable rows
 
@@ -218,4 +218,4 @@ The **show-expand** prop will render an expand icon on each row. You can customi
 
 Just like selection, row items require a unique property on each item for expansion to work. The default is `id`, but you can use the **item-value** prop to specify a different item property.
 
-<example file="v-data-table/misc-expand" />
+<ExamplesExample file="v-data-table/misc-expand" />
diff --git a/packages/docs/src/pages/en/components/data-tables/data-and-display.md b/packages/docs/src/pages/en/components/data-tables/data-and-display.md
index aae830d7301..b76e817ea9e 100644
--- a/packages/docs/src/pages/en/components/data-tables/data-and-display.md
+++ b/packages/docs/src/pages/en/components/data-tables/data-and-display.md
@@ -14,7 +14,7 @@ related:
 
 Data table filtering is key feature that allows users to quickly find the data they are looking for.
 
-<entry />
+<PromotedEntry />
 
 ## Filtering examples
 
@@ -24,13 +24,13 @@ These examples demonstrate various ways that you can utilize the **search** prop
 
 The data table exposes a **search** prop that allows you to filter your data.
 
-<example file="v-data-table/prop-search" />
+<ExamplesExample file="v-data-table/prop-search" />
 
 ### Filterable
 
 You can easily disable specific columns from being included when searching through table rows by setting the property **filterable** to false on the header item(s). In the example below the dessert name column is no longer searchable.
 
-<example file="v-data-table/prop-filterable" />
+<ExamplesExample file="v-data-table/prop-filterable" />
 
 ### Custom filter
 
@@ -42,7 +42,7 @@ You can override the default filtering used with the **search** prop by supplyin
 
 In the example below, the custom filter will only match inputs that are in completely in upper case.
 
-<example file="v-data-table/prop-custom-filter" />
+<ExamplesExample file="v-data-table/prop-custom-filter" />
 
 ## Pagination examples
 
@@ -52,7 +52,7 @@ Pagination is used to split up large amounts of data into smaller chunks.
 
 Pagination can be controlled externally by using the individual props, or by using the **options** prop. Remember that you must apply the **.sync** modifier.
 
-<example file="v-data-table/misc-external-paginate" />
+<ExamplesExample file="v-data-table/misc-external-paginate" />
 
 ## Selection examples
 
@@ -64,21 +64,21 @@ For the selection feature to work, the data table must be able to differentiate
 
 You can also supply a function, if for example the unique value needs to be a composite of several properties. The function receives each item as its first argument.
 
-<example file="v-data-table/prop-item-value" />
+<ExamplesExample file="v-data-table/prop-item-value" />
 
 ### Selected values
 
 The current selection of the data-table can be accessed through the **v-model** prop. The array will consist of the unique values found in the property you set using the **item-value** prop (or the value returned by the function you passed). You can use **return-object** prop if you want the array to consist of the actual objects instead.
 
-<example file="v-data-table/prop-return-object" />
+<ExamplesExample file="v-data-table/prop-return-object" />
 
-<entry />
+<PromotedEntry />
 
 ### Selectable rows
 
 Use the **item-selectable** prop to designate a property on your items that controls if the item should be selectable or not.
 
-<example file="v-data-table/prop-item-selectable" />
+<ExamplesExample file="v-data-table/prop-item-selectable" />
 
 ### Select strategies
 
@@ -90,13 +90,13 @@ Data-tables support three different select strategies.
 |`'page'`|Multiple rows can be selected. Clicking on the select all checkbox in the header selects all (selectable) rows on the current page|
 |`'all'`|Multiple rows can be selected. Clicking on the select all checkbox in the header selects all (selectable) rows in the entire data set|
 
-<example file="v-data-table/prop-select-strategy" />
+<ExamplesExample file="v-data-table/prop-select-strategy" />
 
 ## Sorting examples
 
 Data tables can sort rows by a column value.
 
-<entry />
+<PromotedEntry />
 
 ### Basic sorting
 
@@ -106,13 +106,13 @@ The **key** corresponds to a column defined in the **headers** array, and **orde
 
 Unless you are using the **multi-sort** prop seen below, this array will almost always just have a single object in it.
 
-<example file="v-data-table/prop-sort-by" />
+<ExamplesExample file="v-data-table/prop-sort-by" />
 
 ### Multi sort
 
 Using the **multi-sort** prop will enable you to sort on multiple columns at the same time.
 
-<example file="v-data-table/prop-multi-sort" />
+<ExamplesExample file="v-data-table/prop-multi-sort" />
 
 ### Sort by raw
 
@@ -124,4 +124,4 @@ This feature was introduced in [v3.5.0 (Polaris)](/getting-started/release-notes
 
 Using a *sortRaw* key in your headers object gives you access to all values on the item. This is useful if you want to sort by a value that is not displayed in the table or a combination of multiple values.
 
-<example file="v-data-table/prop-headers-sort-raw" />
+<ExamplesExample file="v-data-table/prop-headers-sort-raw" />
diff --git a/packages/docs/src/pages/en/components/data-tables/introduction.md b/packages/docs/src/pages/en/components/data-tables/introduction.md
index 5685ef0f735..647ea088d3a 100644
--- a/packages/docs/src/pages/en/components/data-tables/introduction.md
+++ b/packages/docs/src/pages/en/components/data-tables/introduction.md
@@ -14,7 +14,7 @@ related:
 
 The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
 
-<entry />
+<PromotedEntry />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -40,7 +40,7 @@ Before diving into the guides and examples, let's take a moment to understand th
 | [v-data-table-footer](/api/v-data-table-footer/)   | Functional Component used to display Data-table headers     |
 | [v-checkbox-btn](/api/v-checkbox-btn/)             | Reusable lightweight [v-checkbox](/components/checkboxes)   |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Guides
 
diff --git a/packages/docs/src/pages/en/components/data-tables/server-side-tables.md b/packages/docs/src/pages/en/components/data-tables/server-side-tables.md
index fbc60c8d58e..0e93bb75b9f 100644
--- a/packages/docs/src/pages/en/components/data-tables/server-side-tables.md
+++ b/packages/docs/src/pages/en/components/data-tables/server-side-tables.md
@@ -14,7 +14,7 @@ related:
 
 Server-side Data tables are used for showing data coming from an API.
 
-<entry />
+<PromotedEntry />
 
 ## Examples
 
@@ -22,16 +22,16 @@ Server-side Data tables are used for showing data coming from an API.
 
 To use data from an API, listen to the **@update:options** event to know when to fetch new data. Use the **loading** prop to display a progress bar while fetching the data.
 
-<example file="v-data-table/misc-server-side-paginate-and-sort" />
+<ExamplesExample file="v-data-table/misc-server-side-paginate-and-sort" />
 
 ### Server-side search
 
 If you need to support search functionality, use the **search** prop to let the table know when new search input is available. Since the table does not actually do any filtering on its own, the **search** input does not need to be the actual value being searched for. In this example we have multiple values searchable, so we just make sure to set **search** to _anything_ when we need to fetch new data.
 
-<example file="v-data-table/server-search" />
+<ExamplesExample file="v-data-table/server-search" />
 
 ### Loading
 
 You can use the **loading** prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the **loading-text** prop or the `loading` slot.
 
-<example file="v-data-table/prop-loading" />
+<ExamplesExample file="v-data-table/prop-loading" />
diff --git a/packages/docs/src/pages/en/components/data-tables/virtual-tables.md b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
index bb003da2658..e52d9ee9957 100644
--- a/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
+++ b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
@@ -14,10 +14,10 @@ related:
 
 The v-data-table-virtual component relies on all data being available locally. But unlike the standard data-table it uses virtualization to only render a small portion of the rows. This makes it well suited for displaying large data sets. It supports sorting and filtering, but not pagination.
 
-<entry />
+<PromotedEntry />
 
 ## Examples
 
 ### Basic example
 
-<example file="v-data-table/virtual" />
+<ExamplesExample file="v-data-table/virtual" />
diff --git a/packages/docs/src/pages/en/components/date-pickers-month.md b/packages/docs/src/pages/en/components/date-pickers-month.md
index ec29d929e83..20d93946ce2 100644
--- a/packages/docs/src/pages/en/components/date-pickers-month.md
+++ b/packages/docs/src/pages/en/components/date-pickers-month.md
@@ -14,17 +14,17 @@ related:
 
 `v-date-picker` can be used as a standalone month picker component.
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 Month pickers come in two orientation variations, portrait **(default)** and landscape.
 
-<example file="v-date-picker-month/usage" />
+<ExamplesExample file="v-date-picker-month/usage" />
 
 ## API
 
-<api-inline />
+<ApiInline />
 
 ## Caveats
 
@@ -40,43 +40,43 @@ Month pickers come in two orientation variations, portrait **(default)** and lan
 
 You can specify allowed months using arrays, objects or functions.
 
-<example file="v-date-picker-month/prop-allowed-months" />
+<ExamplesExample file="v-date-picker-month/prop-allowed-months" />
 
 #### Colors
 
 Month picker colors can be set using the **color** and **header-color** props. If **header-color** prop is not provided header will use the `color` prop value.
 
-<example file="v-date-picker-month/prop-colors" />
+<ExamplesExample file="v-date-picker-month/prop-colors" />
 
 #### Icons
 
 You can override the default icons used in the picker.
 
-<example file="v-date-picker-month/prop-icons" />
+<ExamplesExample file="v-date-picker-month/prop-icons" />
 
 #### Multiple
 
 Month pickers can now select multiple months with the **multiple** prop. If using **multiple** then the month picker expects its model to be an array.
 
-<example file="v-date-picker-month/prop-multiple" />
+<ExamplesExample file="v-date-picker-month/prop-multiple" />
 
 #### Readonly
 
 Selecting new date could be disabled by adding **readonly** prop.
 
-<example file="v-date-picker-month/prop-readonly" />
+<ExamplesExample file="v-date-picker-month/prop-readonly" />
 
 #### Show current
 
 By default the current month is displayed using outlined button - **show-current** prop allows you to remove the border or select different month to be displayed as the current one.
 
-<example file="v-date-picker-month/prop-show-current" />
+<ExamplesExample file="v-date-picker-month/prop-show-current" />
 
 #### Width
 
 You can specify allowed the picker's width or make it full width.
 
-<example file="v-date-picker-month/prop-width" />
+<ExamplesExample file="v-date-picker-month/prop-width" />
 
 ### Misc
 
@@ -86,16 +86,16 @@ When integrating a picker into a `v-text-field`, it is recommended to use the **
 
 Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.
 
-<example file="v-date-picker-month/misc-dialog-and-menu" />
+<ExamplesExample file="v-date-picker-month/misc-dialog-and-menu" />
 
 #### Internationalization
 
 The month picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the **locale** prop.
 
-<example file="v-date-picker-month/misc-internationalization" />
+<ExamplesExample file="v-date-picker-month/misc-internationalization" />
 
 #### Orientation
 
 Month pickers come in two orientation variations, portrait **(default)** and landscape.
 
-<example file="v-date-picker-month/misc-orientation" />
+<ExamplesExample file="v-date-picker-month/misc-orientation" />
diff --git a/packages/docs/src/pages/en/components/date-pickers.md b/packages/docs/src/pages/en/components/date-pickers.md
index 8b136aad185..115d740d902 100644
--- a/packages/docs/src/pages/en/components/date-pickers.md
+++ b/packages/docs/src/pages/en/components/date-pickers.md
@@ -20,7 +20,7 @@ features:
 
 ![Date picker Entry](https://cdn.vuetifyjs.com/docs/images/components/v-date-picker/v-date-picker-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 
@@ -32,9 +32,9 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no
 
 Date pickers come in two orientation variations, portrait **(default)** and landscape. By default they are emitting `input` event when the day (for date picker) or month (for month picker), but with **reactive** prop they can update the model even after clicking year/month.
 
-<usage name="v-date-picker" />
+<ExamplesUsage name="v-date-picker" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -42,7 +42,7 @@ Date pickers come in two orientation variations, portrait **(default)** and land
 | - | - |
 | [v-date-picker](/api/v-date-picker/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Guide
 
@@ -68,31 +68,31 @@ The `v-date-picker` component supports multiple props for configuring dates that
 
 The `v-date-picker` component supports elevation up to a maximum value of 24. For more information on elevations, visit the official [Material Design elevations](https://material.io/design/environment/elevation.html) page.
 
-<example file="v-date-picker/prop-elevation" />
+<ExamplesExample file="v-date-picker/prop-elevation" />
 
 #### Width
 
 You can specify the picker's width or make it full width.
 
-<example file="v-date-picker/prop-width" />
+<ExamplesExample file="v-date-picker/prop-width" />
 
 #### Show sibling months
 
 By default days from previous and next months are not visible. They can be displayed using the **show-adjacent-months** prop.
 
-<example file="v-date-picker/prop-show-adjacent-months" />
+<ExamplesExample file="v-date-picker/prop-show-adjacent-months" />
 
 #### Colors
 
 Date picker colors can be set using the **color** props.
 
-<example file="v-date-picker/prop-colors" />
+<ExamplesExample file="v-date-picker/prop-colors" />
 
 #### Allowed dates
 
 Specify allowed dates using objects or functions. When using objects, accepts a date string in the format of YYYY-MM-DD. When using functions, accepts a date object as a parameter and should return a boolean.
 
-<example file="v-date-picker/prop-allowed-dates" />
+<ExamplesExample file="v-date-picker/prop-allowed-dates" />
 
 ### Internationalization
 
diff --git a/packages/docs/src/pages/en/components/defaults-providers.md b/packages/docs/src/pages/en/components/defaults-providers.md
index 6832d2d2fca..7047361f4f1 100644
--- a/packages/docs/src/pages/en/components/defaults-providers.md
+++ b/packages/docs/src/pages/en/components/defaults-providers.md
@@ -18,15 +18,15 @@ features:
 
 The defaults provider allows you to provide specific default prop values to components in a section of your application
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-defaults-provider` component is used to provide default props to components within its scope. It hooks into the [Global configuration](/features/global-configuration/) feature and makes it easy to assign multiple properties at once or scope out all incoming changes to any children.
 
-<usage name="v-defaults-provider" />
+<ExamplesUsage name="v-defaults-provider" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ The `v-defaults-provider` component is used to provide default props to componen
 | - | - |
 | [v-defaults-provider](/api/v-defaults-provider/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -42,4 +42,4 @@ The `v-defaults-provider` component is used to provide default props to componen
 
 The `v-defaults-provider` expects a prop **defaults** which looks the same as the **defaults** object that you can pass to `createVuetify` when creating your application.
 
-<example file="v-defaults-provider/prop-defaults" />
+<ExamplesExample file="v-defaults-provider/prop-defaults" />
diff --git a/packages/docs/src/pages/en/components/dialogs.md b/packages/docs/src/pages/en/components/dialogs.md
index af3e2c491e2..2ef512c7190 100644
--- a/packages/docs/src/pages/en/components/dialogs.md
+++ b/packages/docs/src/pages/en/components/dialogs.md
@@ -19,94 +19,124 @@ features:
 
 The `v-dialog` component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.
 
-<!-- ![dialog Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-dialog/v-dialog-entry.png) -->
+![Dialog Entry](https://cdn.vuetifyjs.com/docs/images/components/v-dialog/v-dialog-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 In this basic example we use the **activator** slot to render a button that is used to open the dialog. When using the **activator** slot it is important that you bind the **props** object from the slot (using `v-bind`) to the element that will activate the dialog. See the examples below for more ways of activating a dialog.
 
-<usage name="v-dialog" />
+<ExamplesUsage name="v-dialog" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
 | Component | Description |
 | - | - |
 | [v-dialog](/api/v-dialog/) | Primary component |
+| [v-overlay](/api/v-overlay/) | Extended component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
-## Examples
+## Anatomy
 
-### Props
+The recommended components to use inside of a `v-dialog` are:
 
-#### Activator
+* [v-card](/components/cards/)
+* [v-list](/components/lists/)
+* [v-sheet](/components/sheets/)
 
-In addition using the **activator** slot, we can instead use the **activator** prop to activate a dialog. By placing the dialog component inside the button, and setting the **activator** prop value to **"parent"** we can designate the parent (button) as the activator.
+![Dialog Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-dialog/v-dialog-anatomy.png)
+
+| Element / Area | Description                                                              |
+| - | - |
+| 1. Container | The dialog's content that animates from the activator |
+| 2. Activator | The element that activates the dialog |
 
-<example file="v-dialog/prop-activator" />
+## Guide
 
-### v-model
+The `v-dialog` component is used to inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. They are controlled by a **v-model** and/or an activator.
+
+### Props
+
+The `v-dialog` component extends [v-overlay](/components/overlays/) and has access to all of its props.
+
+#### v-model
 
 You can also trigger a dialog by simply updating the v-model, without using either **activator** slot or prop. In this case, the dialog will not appear to be activated by any specific element, and will simply appear in the middle of the screen.
 
-<example file="v-dialog/prop-model" />
+<ExamplesExample file="v-dialog/prop-model" />
 
-#### Fullscreen
+#### Persistent
 
-Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
+Persistent dialogs are not dismissed when touching outside or pressing the **esc** key.
 
-<example file="v-dialog/prop-fullscreen" />
+<ExamplesExample file="v-dialog/prop-persistent" />
 
 #### Transitions
 
 You can make the dialog appear from the top or the bottom.
 
-<example file="v-dialog/prop-transitions" />
+<ExamplesExample file="v-dialog/prop-transitions" />
 
-#### Persistent
+#### Nesting
 
-Persistent dialogs are not dismissed when touching outside or pressing the **esc** key.
+Dialogs can be nested: you can open one dialog from another.
 
-<example file="v-dialog/prop-persistent" />
+<ExamplesExample file="v-dialog/misc-nesting" />
 
-#### Scrollable
+#### Overflowed
 
-Example of a dialog with scrollable content.
+Modals that do not fit within the available window space will scroll the container.
 
-<example file="v-dialog/prop-scrollable" />
+<ExamplesExample file="v-dialog/misc-overflowed" />
 
-### Misc
+### Slots
 
-#### Form
+The `v-dialog` component has 2 slots, **activator** and **default**. The **activator** slot is used to designate an element that will activate the dialog. The **default** slot provides an **isActive** ref which is tied to the current state of the dialog.
 
-A simple example of a form in a dialog.
+#### Activator
 
-<example file="v-dialog/misc-form" />
+In addition using the **activator** slot, we can instead use the **activator** prop to activate a dialog. By placing the dialog component inside the button, and setting the **activator** prop value to **"parent"** we can designate the parent (button) as the activator.
 
-#### Loader
+<ExamplesExample file="v-dialog/prop-activator" />
 
-The `v-dialog` component makes it easy to create a customized loading experience for your application.
+#### Default
 
-<example file="v-dialog/misc-loader" />
+<ExamplesExample file="v-dialog/slot-default" />
 
-#### Nesting
+## Examples
 
-Dialogs can be nested: you can open one dialog from another.
+The following are a collection of examples that demonstrate more advanced and real world use of the `v-dialog` component.
 
-<example file="v-dialog/misc-nesting" />
+### Scrollable
 
-#### Overflowed
+Example of a dialog with scrollable content.
 
-Modals that do not fit within the available window space will scroll the container.
+<ExamplesExample file="v-dialog/prop-scrollable" />
+
+### Form
+
+A simple example of a form in a dialog.
+
+<ExamplesExample file="v-dialog/misc-form" />
+
+### Loader
+
+The `v-dialog` component makes it easy to create a customized loading experience for your application.
+
+<ExamplesExample file="v-dialog/misc-loader" />
+
+### Fullscreen
+
+Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.
 
-<example file="v-dialog/misc-overflowed" />
+<ExamplesExample file="v-dialog/prop-fullscreen" />
 
-<!-- #### Without activator
+### Invite dialog
 
-If for some reason you are unable to use the activator slot, be sure to add the `.stop` modifier to the event that triggers the dialog.
+This example demonstrates a dialog that is used to invite users to a group.
 
-<example file="v-dialog/misc-without-activator" /> -->
+<ExamplesExample file="v-dialog/misc-invite-dialog" />
diff --git a/packages/docs/src/pages/en/components/dividers.md b/packages/docs/src/pages/en/components/dividers.md
index b1cd62bfc1b..341245029e9 100644
--- a/packages/docs/src/pages/en/components/dividers.md
+++ b/packages/docs/src/pages/en/components/dividers.md
@@ -21,13 +21,13 @@ The `v-divider` component is used to separate sections of lists or layouts.
 
 <!-- ![divider Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-divider/v-divider-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Dividers in their simplest form display a horizontal line.
 
-<usage name="v-divider" />
+<ExamplesUsage name="v-divider" />
 
 ::: info
 
@@ -35,7 +35,7 @@ This example uses the **border-opacity** utility class and is not available when
 
 :::
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -43,7 +43,7 @@ This example uses the **border-opacity** utility class and is not available when
 | - | - |
 | [v-divider](/api/v-divider/) | The divider component. |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -53,13 +53,13 @@ This example uses the **border-opacity** utility class and is not available when
 
 Inset dividers are moved 72px to the right. This will cause them to line up with list items.
 
-<example file="v-divider/prop-inset" />
+<ExamplesExample file="v-divider/prop-inset" />
 
 #### Vertical
 
 Vertical dividers give you more tools for unique layouts.
 
-<example file="v-divider/prop-vertical" />
+<ExamplesExample file="v-divider/prop-vertical" />
 
 #### Thickness
 
@@ -71,13 +71,13 @@ By using the **thickness** prop, the thickness of the divider can be adjusted to
 
 Create custom cards to fit any use-case.
 
-<example file="v-divider/misc-portrait-view" />
+<ExamplesExample file="v-divider/misc-portrait-view" />
 
 #### Subheaders
 
 Dividers and subheaders can help break up content and can optionally line up with one another by using the same `inset` prop.
 
-<example file="v-divider/misc-subheaders" />
+<ExamplesExample file="v-divider/misc-subheaders" />
 
 ## Accessibility
 
diff --git a/packages/docs/src/pages/en/components/empty-states.md b/packages/docs/src/pages/en/components/empty-states.md
new file mode 100644
index 00000000000..fdcf821f3e7
--- /dev/null
+++ b/packages/docs/src/pages/en/components/empty-states.md
@@ -0,0 +1,129 @@
+---
+emphasized: true
+meta:
+  title: Empty states
+  description: The empty state component is used to indicate that a list is empty or that no search results were found.
+  keywords: empty state, no results, no data, no items, no content, no records, no information, no search results
+related:
+  - /components/buttons/
+  - /components/icons/
+  - /components/avatars/
+features:
+  report: true
+  spec: https://m2.material.io/design/communication/empty-states.html
+---
+
+# Empty states
+
+The `v-empty-state` component is used to indicate that a list is empty or that no search results were found.
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.7](/getting-started/release-notes/?version=v3.5.7)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VEmptyState } from 'vuetify/labs/VEmptyState'
+
+export default createVuetify({
+  components: {
+    VEmptyState,
+  },
+})
+```
+
+## Usage
+
+A basic empty state is composed of a title and a description. It can also include an icon and a button.
+
+<ExamplesUsage name="v-empty-state" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-empty-state](/api/v-empty-state/) | Primary Component |
+
+<ApiInline hide-links />
+
+## Guide
+
+The `v-empty-state` component is used to indicate that a page or list is empty or that no search results were found. It can be used in a variety of contexts, such as a list of items, a search results page, or a page with no content.
+
+### Props
+
+The `v-empty-state` component has a multitude of props that allow you to customize its appearance and behavior.
+
+#### Content
+
+There are three main properties for configuring text content, **title**, **subtitle**, and **text**.
+
+<ExamplesExample file="v-empty-state/prop-content" />
+
+#### Media
+
+Add an icon or image to the empty state to help convey its purpose.
+
+<ExamplesExample file="v-empty-state/prop-media" />
+
+#### Actions
+
+Add a button to the empty state to help users take action.
+
+<ExamplesExample file="v-empty-state/prop-actions" />
+
+### Slots
+
+The `v-empty-state` component has numerous slots that make it easy to customize the default behavior.
+
+| Slot | Description |
+| - | - |
+| 1. Default | The default slot |
+| 2. Media | The media slot is for images or icons |
+| 3. Title | The main title slot |
+| 4. Subtitle | The subtitle slot |
+| 5. Text | The text slot |
+| 6. Actions | The actions slot |
+
+#### Default
+
+The default slot is positioned between **text** and **actions**.
+
+<ExamplesExample file="v-empty-state/slot-default" />
+
+#### Title
+
+It's simple to customize the font-sizing of the title using utility classes.
+
+<ExamplesExample file="v-empty-state/slot-title" />
+
+#### Custom Actions
+
+By default, only 1 action is displayed through configuration. To add more options, utilize the **actions** slot.
+
+<ExamplesExample file="v-empty-state/slot-actions" />
+
+## Examples
+
+The following are a collection of examples that demonstrate more advanced and real world use of the `v-empty-state` component.
+
+### Astro dog
+
+This example demonstrates how to use the `v-empty-state` component to create a fun and engaging empty state.
+
+<ExamplesExample file="v-empty-state/misc-astro-dog" />
+
+### Astro cat
+
+This example utilizes components such as [v-tabs](/components/tabs/) and [v-window](/components/windows/) to create a more complex empty state.
+
+<ExamplesExample file="v-empty-state/misc-astro-cat" />
diff --git a/packages/docs/src/pages/en/components/expansion-panels.md b/packages/docs/src/pages/en/components/expansion-panels.md
index 766c9216fd2..11a581c1bf4 100644
--- a/packages/docs/src/pages/en/components/expansion-panels.md
+++ b/packages/docs/src/pages/en/components/expansion-panels.md
@@ -21,15 +21,15 @@ The `v-expansion-panel` component is useful for reducing vertical space with lar
 
 <!-- ![expansion-panels Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-expansion-panels/v-expansion-panels-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Expansion panels in their simplest form display a list of expandable items. You can either declare the markup explicitly, or use the **title** and **text** props.
 
-<usage name="v-expansion-panels" />
+<ExamplesUsage name="v-expansion-panels" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -40,7 +40,7 @@ Expansion panels in their simplest form display a list of expandable items. You
 | [v-expansion-panel-title](/api/v-expansion-panel-title/) | Sub-component used to display the Expansion Panel's title. Wraps the `#title` slot |
 | [v-expansion-panel-text](/api/v-expansion-panel-text/) | Sub-component used to display the Expanion Panel's text. Wraps the `#text` slot |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -50,31 +50,31 @@ Expansion panels in their simplest form display a list of expandable items. You
 
 There are four different variants of the expansion-panel. Accordion expansion-panels have no margins around the currently active panel. Inset expansion-panels become smaller when activated, while poput expansion-panels become larger.
 
-<example file="v-expansion-panels/prop-variant" />
+<ExamplesExample file="v-expansion-panels/prop-variant" />
 
 #### Disabled
 
 Both the expansion-panel and its content can be disabled using the **disabled** prop.
 
-<example file="v-expansion-panels/prop-disabled" />
+<ExamplesExample file="v-expansion-panels/prop-disabled" />
 
 <!-- #### Focusable
 
 The expansion-panel headers can be made focusable with the prop **focusable**.
 
-<example file="v-expansion-panels/prop-focusable" /> -->
+<ExamplesExample file="v-expansion-panels/prop-focusable" /> -->
 
 #### Model
 
 Expansion panels can be controlled externally by using the **v-model**. You will need to set a **value** on each panel, so that you can refer to them outside the component. If the **multiple** prop is set, then the **v-model** value will be an array.
 
-<example file="v-expansion-panels/prop-model" />
+<ExamplesExample file="v-expansion-panels/prop-model" />
 
 #### Readonly
 
 **readonly** prop does the same thing as **disabled**, but it doesn't touch styles.
 
-<example file="v-expansion-panels/prop-readonly" />
+<ExamplesExample file="v-expansion-panels/prop-readonly" />
 
 ### Misc
 
@@ -82,10 +82,10 @@ Expansion panels can be controlled externally by using the **v-model**. You will
 
 The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the `v-expansion-panel-header` component to react to the state of being open or closed by fading content in and out.
 
-<example file="v-expansion-panels/misc-advanced" />
+<ExamplesExample file="v-expansion-panels/misc-advanced" />
 
 #### Custom icon
 
 Expand action icon can be customized with **expand-icon** prop or the `actions` slot.
 
-<example file="v-expansion-panels/misc-custom-icons" />
+<ExamplesExample file="v-expansion-panels/misc-custom-icons" />
diff --git a/packages/docs/src/pages/en/components/explorer/[...name].md b/packages/docs/src/pages/en/components/explorer/[...name].md
index da649b8ed72..a3c938f1e5c 100644
--- a/packages/docs/src/pages/en/components/explorer/[...name].md
+++ b/packages/docs/src/pages/en/components/explorer/[...name].md
@@ -8,16 +8,12 @@ meta:
   keywords: vuetify api explorer
 ---
 
-<script setup>
-  import Explorer from '@/components/doc/Explorer.vue'
-</script>
-
 # API Explorer
 
 Quickly search the Vuetify API for components, directives, and composables
 
 ----
 
-<entry />
+<PromotedEntry />
 
-<explorer />
+<DocExplorer />
diff --git a/packages/docs/src/pages/en/components/file-inputs.md b/packages/docs/src/pages/en/components/file-inputs.md
index d957821be6d..8fdab68ae5e 100644
--- a/packages/docs/src/pages/en/components/file-inputs.md
+++ b/packages/docs/src/pages/en/components/file-inputs.md
@@ -18,15 +18,15 @@ features:
 
 The `v-file-input` component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress. It is meant to be a direct replacement for a standard file input.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 At its core, the `v-file-input` component is a basic container that extends [v-text-field](/components/text-fields).
 
-<usage name="v-file-input" />
+<ExamplesUsage name="v-file-input" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ At its core, the `v-file-input` component is a basic container that extends [v-t
 | - | - |
 | [v-file-input](/api/v-file-input/) | Primary component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -44,49 +44,49 @@ At its core, the `v-file-input` component is a basic container that extends [v-t
 
 `v-file-input` component can accept only specific media formats/file types if you want. For more information, checkout the documentation on the [accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
 
-<example file="v-file-input/prop-accept" />
+<ExamplesExample file="v-file-input/prop-accept" />
 
 #### Chips
 
 A selected file can be displayed as a [chip](/components/chips). When using the **chips** and **multiple** props, each chip will be displayed (as opposed to the file count).
 
-<example file="v-file-input/prop-chips" />
+<ExamplesExample file="v-file-input/prop-chips" />
 
 #### Counter
 
 When using the **show-size** property along with **counter**, the total number of files and size will be displayed under the input.
 
-<example file="v-file-input/prop-counter" />
+<ExamplesExample file="v-file-input/prop-counter" />
 
 #### Density
 
 You can reduces the file input height with the **density** prop.
 
-<example file="v-file-input/prop-dense" />
+<ExamplesExample file="v-file-input/prop-dense" />
 
 #### Multiple
 
 The `v-file-input` can contain multiple files at the same time when using the **multiple** prop.
 
-<example file="v-file-input/prop-multiple" />
+<ExamplesExample file="v-file-input/prop-multiple" />
 
 #### Prepend icon
 
 The `v-file-input` has a default **prepend-icon** that can be set on the component or adjusted globally. More information on changing global components can be found on the [customizing icons page](/features/icon-fonts).
 
-<example file="v-file-input/prop-prepend-icon" />
+<ExamplesExample file="v-file-input/prop-prepend-icon" />
 
 #### Show size
 
 The displayed size of the selected file(s) can be configured with the **show-size** property. Display sizes can be either _1024_ (the default used when providing **true**) or _1000_.
 
-<example file="v-file-input/prop-show-size" />
+<ExamplesExample file="v-file-input/prop-show-size" />
 
 #### Validation
 
 Similar to other inputs, you can use the **rules** prop to create your own custom validation parameters.
 
-<example file="v-file-input/prop-validation" />
+<ExamplesExample file="v-file-input/prop-validation" />
 
 ### Slots
 
@@ -94,7 +94,7 @@ Similar to other inputs, you can use the **rules** prop to create your own custo
 
 Using the `selection` slot, you can customize the appearance of your input selections. This is typically done with [chips](/components/chips), however any component or markup can be used.
 
-<example file="v-file-input/slot-selection" />
+<ExamplesExample file="v-file-input/slot-selection" />
 
 ### Misc
 
@@ -102,4 +102,4 @@ Using the `selection` slot, you can customize the appearance of your input selec
 
 The flexibility of the selection slot allows you accommodate complex use-cases. In this example we show the first 2 selections as chips while adding a number indicator for the remaining amount.
 
-<example file="v-file-input/misc-complex-selection" />
+<ExamplesExample file="v-file-input/misc-complex-selection" />
diff --git a/packages/docs/src/pages/en/components/floating-action-buttons.md b/packages/docs/src/pages/en/components/floating-action-buttons.md
index 48c751aa34d..976d834ccdc 100644
--- a/packages/docs/src/pages/en/components/floating-action-buttons.md
+++ b/packages/docs/src/pages/en/components/floating-action-buttons.md
@@ -1,6 +1,7 @@
 ---
-disabled: true
+emphasized: true
 meta:
+  nav: Floating Action Buttons
   title: FAB component
   description: The floating action button (or FAB) component is a promoted action that is elevated above the UI or attached to an element such as a card.
   keywords: floating action button, fab, vuetify fab component, vue fab component
@@ -8,58 +9,79 @@ related:
   - /components/buttons/
   - /components/icons/
   - /styles/transitions/
+features:
+  report: true
+  spec: https://m2.material.io/components/buttons-floating-action-button
 ---
 
-# Buttons: Floating Action Button
+# Floating Action Buttons
 
-The `v-btn` component can be used as a floating action button. This provides an application with a main point of action. Combined with the `v-speed-dial` component, you can create a diverse set of functions available for your users.
+The `v-fab` component can be used as a floating action button. This provides an application with a main point of action.
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.7](/getting-started/release-notes/?version=v3.5.7)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VFab } from 'vuetify/labs/VFab'
+
+export default createVuetify({
+  components: {
+    VFab,
+  },
+})
+```
 
 ## Usage
 
 Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the `small` variant can be used to maintain continuity with similar sized elements.
 
-<usage name="v-btn-fab" alt="v-btn" />
+<ExamplesUsage name="v-fab" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
 | Component | Description |
 | - | - |
-| [v-btn](/api/v-btn/) | Primary Component |
+| [v-fab](/api/v-fab/) | Primary Component |
+
+<ApiInline hide-links />
 
-<api-inline hide-links />
+<!-- ## Guide
 
-<!-- ## Sub-components
+The `v-fab` component is used to indicate a promoted action in your application. It can be used in a variety of contexts, such as a page with no content, a list of items, or a search results page.
 
-### v-speed-dial
+### Props
 
-v-speed-dial description -->
+The `v-fab` component has a multitude of props that allow you to customize its appearance and behavior. -->
 
 ## Examples
 
-### Misc
+The following are a collection of examples that demonstrate more advanced and real world use of the `v-fab` component.
 
-#### Display animation
+### Display animation
 
 When displaying for the first time, a floating action button should animate onto the screen. Here we use the `v-fab-transition` with v-show. You can also use any custom transition provided by Vuetify or your own.
 
-<example file="v-btn-fab/misc-display-animation" />
+<ExamplesExample file="v-fab/misc-display-animation" />
 
-#### Lateral screens
+### Lateral screens
 
-When changing the default action of your button, it is recommended that you display a transition to signify a change. We do this by binding the `key` prop to a piece of data that can properly signal a change in action to the Vue transition system. While you can use a custom transition for this, ensure that you set the `mode` prop to **out-in**.
+When changing the default action of your button, it is recommended that you display a transition to signify a change. We do this by binding the `key` prop to a piece of data that can properly signal a change in action to the Vue transition system.
 
-<example file="v-btn-fab/misc-lateral-screens" />
+<ExamplesExample file="v-fab/misc-lateral-screens" />
 
-#### Small variant
+### Small variant
 
 For better visual appeal, we use a small button to match our list avatars.
 
-<example file="v-btn-fab/misc-small" />
-
-#### Speed dial
-
-The speed-dial component has a very robust api for customizing your FAB experience exactly how you want.
-
-<example file="v-btn-fab/misc-speed-dial" />
+<ExamplesExample file="v-fab/misc-small" />
diff --git a/packages/docs/src/pages/en/components/footers.md b/packages/docs/src/pages/en/components/footers.md
index 66f42d07344..cfd530dbb35 100644
--- a/packages/docs/src/pages/en/components/footers.md
+++ b/packages/docs/src/pages/en/components/footers.md
@@ -19,15 +19,15 @@ features:
 
 The `v-footer` component is used for displaying general information that a user might want to access from any page within your site.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-footer` component in its simplest form is a container.
 
-<usage name="v-footer" />
+<ExamplesUsage name="v-footer" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ The `v-footer` component in its simplest form is a container.
 | - | - |
 | [v-footer](/api/v-footer/) | The footer component. |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,16 +45,16 @@ The `v-footer` component in its simplest form is a container.
 
 The footer component as a basic company footer with links.
 
-<example file="v-footer/misc-company-footer" />
+<ExamplesExample file="v-footer/misc-company-footer" />
 
 #### Indigo Footer
 
 The footer component with Indigo background color and social media icons and button.
 
-<example file="v-footer/misc-indigo-footer" />
+<ExamplesExample file="v-footer/misc-indigo-footer" />
 
 #### Teal Footer
 
 The footer component with a Teal color header and columns and rows of links.
 
-<example file="v-footer/misc-teal-footer" />
+<ExamplesExample file="v-footer/misc-teal-footer" />
diff --git a/packages/docs/src/pages/en/components/forms.md b/packages/docs/src/pages/en/components/forms.md
index 3e2a31d0dac..01861e089c7 100644
--- a/packages/docs/src/pages/en/components/forms.md
+++ b/packages/docs/src/pages/en/components/forms.md
@@ -18,7 +18,7 @@ features:
 
 Vuetify offers a simple built-in form validation system based on functions as rules, making it easy for developers to get set up quickly.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
@@ -32,9 +32,9 @@ If you prefer using a 3rd party validation plugin, we provide [examples](#vee-va
 
 Whenever the value of an input is changed, each rule receives a new value and is re-evaluated. If a rule returns `false` or a `string`, validation has failed and the `string` value is presented as an error message.
 
-<example file="v-form/usage" />
+<ExamplesExample file="v-form/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -42,7 +42,7 @@ Whenever the value of an input is changed, each rule receives a new value and is
 | - | - |
 | [v-form](/api/v-form/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Rules
 
@@ -50,11 +50,11 @@ Rules allow you to apply custom validation on all form components. These are val
 
 The most basic of rules is a simple function that checks if an input has a value or not; i.e. it makes it a required input.
 
-<example file="v-form/rules-required" />
+<ExamplesExample file="v-form/rules-required" />
 
 However, you can make rules as complicated as needed, even allowing for asynchronous input validation. In the example below, the input is checked against a fake API service that takes some time to respond. Wait for the `submit` event promise to resolve and see the validation in action.
 
-<example file="v-form/rules-async" />
+<ExamplesExample file="v-form/rules-async" />
 
 The submit event is a combination of a native `SubmitEvent` with a promise, so it can be `await`ed or used with `.then()` to get the result of the validation.
 <br>
@@ -94,13 +94,13 @@ This allows you to either check for any validation failure with `!valid`, or onl
 
 You can easily disable all input components in a `v-form` by setting the **disabled** prop.
 
-<example file="v-form/prop-disabled" />
+<ExamplesExample file="v-form/prop-disabled" />
 
 #### Fast fail
 
 When the **fast-fail** prop is set, validation will short-circuit after the first invalid input is found. This can be useful if some of your rules are computationally heavy and can take a long time. In this example, notice how when the submit button is clicked, the second input does not show validation errors even though it does not satisfy the rules.
 
-<example file="v-form/prop-fast-fail" />
+<ExamplesExample file="v-form/prop-fast-fail" />
 
 ### Misc
 
@@ -110,16 +110,16 @@ The `v-form` component has a number of exposed properties that can be accessed b
 
 The difference between `reset()` and `resetValidation()` is that the former resets both input values and validation state, while the latter only resets validation state.
 
-<example file="v-form/misc-exposed" />
+<ExamplesExample file="v-form/misc-exposed" />
 
 #### Vee-validate
 
 **vee-validate** documentation can be found [here](https://vee-validate.logaretm.com/v4/).
 
-<example file="v-form/misc-vee-validate" />
+<ExamplesExample file="v-form/misc-vee-validate" />
 
 #### Vuelidate
 
 **vuelidate** documentation can be found [here](https://vuelidate-next.netlify.app/).
 
-<example file="v-form/misc-vuelidate" />
+<ExamplesExample file="v-form/misc-vuelidate" />
diff --git a/packages/docs/src/pages/en/components/grids.md b/packages/docs/src/pages/en/components/grids.md
index 918336ae091..14e3e277499 100644
--- a/packages/docs/src/pages/en/components/grids.md
+++ b/packages/docs/src/pages/en/components/grids.md
@@ -21,17 +21,17 @@ Vuetify comes with a 12 point grid system built using flexbox.
 
 The grid is used to create specific layouts within an application's content.  It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations: **xs**, **sm**, **md**, **lg** and **xl**. These breakpoints are defined below in the Viewport Breakpoints table and can be modified by customizing the [Breakpoint service](/features/display-and-platform).
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The Vuetify grid is heavily inspired by the [Bootstrap grid](https://getbootstrap.com/docs/4.0/layout/grid/). It is implemented by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, read the [CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
 
-<example file="grid/usage" />
+<ExamplesExample file="grid/usage" />
 
-<breakpoints-table />
+<FeaturesBreakpointsTable />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -42,7 +42,7 @@ The Vuetify grid is heavily inspired by the [Bootstrap grid](https://getbootstra
 | [v-col](/api/v-col/) | Sub-component used to create columns. |
 | [v-spacer](/api/v-spacer/) | A component often used in grid scenarios. |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Sub-components
 
@@ -83,49 +83,49 @@ The class `fill-height` applies `height: 100%` to an element. When applied to `v
 
 Change the vertical alignment of flex items and their parents using the **align** and **align-self** properties.
 
-<example file="grid/prop-align" />
+<ExamplesExample file="grid/prop-align" />
 
 #### Breakpoint sizing
 
 Columns will automatically take up an equal amount of space within their parent container. This can be modified using the **cols** prop. You can also utilize the **sm**, **md**, **lg**, and **xl** props to further define how the column will be sized in different viewport sizes.
 
-<example file="grid/prop-breakpoint-sizing" />
+<ExamplesExample file="grid/prop-breakpoint-sizing" />
 
 #### Justify
 
 Change the horizontal alignment of flex items using the **justify** property.
 
-<example file="grid/prop-justify" />
+<ExamplesExample file="grid/prop-justify" />
 
 #### No gutters
 
 You can remove the negative margins from `v-row` and the padding from its direct `v-col` children using the **no-gutters** property.
 
-<example file="grid/prop-no-gutters" />
+<ExamplesExample file="grid/prop-no-gutters" />
 
 #### Offset
 
 Offsets are useful for compensating for elements that may not be visible yet, or to control the position of content. Just as with breakpoints, you can set an offset for any available sizes. This allows you to fine tune your application layout precisely to your needs.
 
-<example file="grid/prop-offset" />
+<ExamplesExample file="grid/prop-offset" />
 
 #### Offset breakpoint
 
 Offset can also be applied on a per breakpoint basis.
 
-<example file="grid/prop-offset-breakpoint" />
+<ExamplesExample file="grid/prop-offset-breakpoint" />
 
 #### Order
 
 You can control the ordering of grid items. As with offsets, you can set different orders for different sizes. Design specialized screen layouts that accommodate to any application.
 
-<example file="grid/prop-order" />
+<ExamplesExample file="grid/prop-order" />
 
 #### Order first and last
 
 You can also designate explicitly **first** or **last** which will assign **-1** or **13** values respectively to the `order` CSS property.
 
-<example file="grid/prop-order-first-and-last" />
+<ExamplesExample file="grid/prop-order-first-and-last" />
 
 ### Misc
 
@@ -135,58 +135,58 @@ When more than 12 columns are placed within a given row (that is not using the `
 
 In the example below, the first and second **v-col** components are a total of 13 columns wide, which means the second **v-col** gets wrapped to a new line.
 
-<example file="grid/misc-column-wrapping" />
+<ExamplesExample file="grid/misc-column-wrapping" />
 
 #### Equal width columns
 
 You can break equal width columns into multiple lines using **v-responsive**.
 
-<example file="grid/misc-equal-width-columns" />
+<ExamplesExample file="grid/misc-equal-width-columns" />
 
 #### Grow and Shrink
 
 By default, flex components will automatically fill the available space in a row or column. They will also shrink relative to the rest of the flex items in the flex container when a specific size is not designated. You can define the column width of the `v-col` by using the **cols** prop and providing a value from **1 to 12**.
 
-<example file="grid/misc-grow-and-shrink" />
+<ExamplesExample file="grid/misc-grow-and-shrink" />
 
 #### Margin helpers
 
 Using the [auto margin helper utilities](/styles/flex#auto-margins) you can force sibling columns away from each other.
 
-<example file="grid/misc-margin-helpers" />
+<ExamplesExample file="grid/misc-margin-helpers" />
 
 #### Nested grid
 
 Grids can be nested, similar to other frameworks, in order to achieve very custom layouts.
 
-<example file="grid/misc-nested-grid" />
+<ExamplesExample file="grid/misc-nested-grid" />
 
 #### One column width
 
 When using the auto-layout, you can define the width of only one column and still have its siblings to automatically resize around it.
 
-<example file="grid/misc-one-column-width" />
+<ExamplesExample file="grid/misc-one-column-width" />
 
 #### Row and column breakpoints
 
 Dynamically change your layout based upon resolution. Resize your screen and watch the row layout change on sm, md, and lg breakpoints.
 
-<example file="grid/misc-row-and-column-breakpoints" />
+<ExamplesExample file="grid/misc-row-and-column-breakpoints" />
 
 #### Spacers
 
 The `v-spacer` component is useful when you want to fill available space or make space between two components.
 
-<example file="grid/misc-spacer" />
+<ExamplesExample file="grid/misc-spacer" />
 
 <!-- #### Unique layouts
 
 The power and flexibility of the Vuetify grid system allows you to create amazing user interfaces.
 
-<example file="grid/misc-unique-layouts" /> -->
+<ExamplesExample file="grid/misc-unique-layouts" /> -->
 
 <!-- #### Variable content width
 
 Assigning breakpoint width for columns can be configured to resize based upon the nature width of their content.
 
-<example file="grid/misc-variable-content" /> -->
+<ExamplesExample file="grid/misc-variable-content" /> -->
diff --git a/packages/docs/src/pages/en/components/hover.md b/packages/docs/src/pages/en/components/hover.md
index 04d7e7bd0d9..89172d9cfee 100644
--- a/packages/docs/src/pages/en/components/hover.md
+++ b/packages/docs/src/pages/en/components/hover.md
@@ -18,15 +18,15 @@ features:
 
 The `v-hover` component provides a simple interface for handling hover states for any component.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
  `v-hover` is a renderless component that uses the default slot to provide scoped access to its internal model; as well as mouse event listeners to modify it. To explicitly control the internal state, use the **model-value** property.
 
-<usage name="v-hover" />
+<ExamplesUsage name="v-hover" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ The `v-hover` component provides a simple interface for handling hover states fo
 | - | - |
 | [v-hover](/api/v-hover/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -44,13 +44,13 @@ The `v-hover` component provides a simple interface for handling hover states fo
 
 The **disabled** prop disables the hover functionality.
 
-<example file="v-hover/prop-disabled" />
+<ExamplesExample file="v-hover/prop-disabled" />
 
 #### Open and close delay
 
 Delay `v-hover` events by using **open-delay** and **close-delay** props in combination or separately.
 
-<example file="v-hover/prop-open-and-close-delay" />
+<ExamplesExample file="v-hover/prop-open-and-close-delay" />
 
 ### Misc
 
@@ -58,10 +58,10 @@ Delay `v-hover` events by using **open-delay** and **close-delay** props in comb
 
 `v-hover` can be used in combination with `v-for` to make a single item stand out when the user interacts with the list.
 
-<example file="v-hover/misc-hover-list" />
+<ExamplesExample file="v-hover/misc-hover-list" />
 
 #### Transition
 
 Create highly customized components that respond to user interaction.
 
-<example file="v-hover/misc-transition" />
+<ExamplesExample file="v-hover/misc-transition" />
diff --git a/packages/docs/src/pages/en/components/icons.md b/packages/docs/src/pages/en/components/icons.md
index dd8d26b0567..9373a5773ff 100644
--- a/packages/docs/src/pages/en/components/icons.md
+++ b/packages/docs/src/pages/en/components/icons.md
@@ -23,15 +23,15 @@ features:
 
 The `v-icon` component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official [Material Design Icons](https://materialdesignicons.com/) page. To use any of these icons simply use the `mdi-` prefix followed by the icon name.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Icons come in two themes (light and dark), and five different sizes (x-small, small, medium (default), large, and x-large).
 
-<usage name="v-icon" />
+<ExamplesUsage name="v-icon" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -39,7 +39,7 @@ Icons come in two themes (light and dark), and five different sizes (x-small, sm
 | - | - |
 | [v-icon](/api/v-icon/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -49,7 +49,7 @@ Icons come in two themes (light and dark), and five different sizes (x-small, sm
 
 Using color helpers you can change the color of an icon from the standard dark and light themes.
 
-<example file="v-icon/prop-color" />
+<ExamplesExample file="v-icon/prop-color" />
 
 <!-- ### Events
 
@@ -57,7 +57,7 @@ Using color helpers you can change the color of an icon from the standard dark a
 
 Binding any click event to `v-icon` will automatically change the cursor to a pointer.
 
-<example file="v-icon/event-click" /> -->
+<ExamplesExample file="v-icon/event-click" /> -->
 
 ### Misc
 
@@ -65,7 +65,7 @@ Binding any click event to `v-icon` will automatically change the cursor to a po
 
 Icons can be used inside of buttons to add emphasis to the action.
 
-<example file="v-icon/misc-buttons" />
+<ExamplesExample file="v-icon/misc-buttons" />
 
 #### Font Awesome
 
@@ -75,7 +75,7 @@ Icons can be used inside of buttons to add emphasis to the action.
   Note that this example is using an icon set prefix, because the default icon set in the documentation is `mdi`. You can read more about using multiple icon sets [here](/features/icon-fonts/#multiple-icon-sets)
 :::
 
-<example file="v-icon/misc-font-awesome" />
+<ExamplesExample file="v-icon/misc-font-awesome" />
 
 #### Material Design
 
@@ -85,7 +85,7 @@ Icons can be used inside of buttons to add emphasis to the action.
   Note that this example is using an icon set prefix, because the default icon set in the documentation is `mdi`. You can read more about using multiple icon sets [here](/features/icon-fonts/#multiple-icon-sets)
 :::
 
-<example file="v-icon/misc-md" />
+<ExamplesExample file="v-icon/misc-md" />
 
 #### MDI SVG
 
@@ -95,7 +95,7 @@ You can manually import only the icons you use when using the [@mdi/js](https://
   Note that this example is using an icon set prefix, because the default icon set in the documentation is `mdi`. You can read more about using multiple icon sets [here](/features/icon-fonts/#multiple-icon-sets)
 :::
 
-<example file="v-icon/misc-mdi-svg" />
+<ExamplesExample file="v-icon/misc-mdi-svg" />
 
 ## Accessibility
 
diff --git a/packages/docs/src/pages/en/components/images.md b/packages/docs/src/pages/en/components/images.md
index eeb69283b94..8db99a88a15 100644
--- a/packages/docs/src/pages/en/components/images.md
+++ b/packages/docs/src/pages/en/components/images.md
@@ -18,15 +18,15 @@ features:
 
 The `v-img` component is packed with features to support rich media. Combined with the [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader), you can add dynamic progressive images to provide a better user experience.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 `v-img` component is used to display a responsive image with lazy-load and placeholder.
 
-<usage name="v-img" />
+<ExamplesUsage name="v-img" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ The `v-img` component is packed with features to support rich media. Combined wi
 | - | - |
 | [v-img](/api/v-img/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -51,13 +51,13 @@ The `v-img` component is packed with features to support rich media. Combined wi
 
 If the provided aspect ratio doesn't match that of the actual image, the default behavior is to fill as much space as possible without cropping. To fill the entire available space use the `cover` prop.
 
-<example file="v-img/prop-cover" />
+<ExamplesExample file="v-img/prop-cover" />
 
 #### Height
 
 `v-img` will automatically grow to the size of its `src`, preserving the correct aspect ratio. You can limit this with the `height` and `max-height` props.
 
-<example file="v-img/prop-max-height" />
+<ExamplesExample file="v-img/prop-max-height" />
 
 ### Slots
 
@@ -65,13 +65,13 @@ If the provided aspect ratio doesn't match that of the actual image, the default
 
 `v-img` has a special `placeholder` slot for placeholder to display while image's loading. Note: the example below has bad src which won't load for you to see placeholder.
 
-<example file="v-img/slot-placeholder" />
+<ExamplesExample file="v-img/slot-placeholder" />
 
 #### Error
 
 `v-img` has an `error` slot that can be used to display alternative content if an error occurs while loading your source image. A common use for this slot is to load a fallback image if your original image is not available.
 
-<example file="v-img/slot-error" />
+<ExamplesExample file="v-img/slot-error" />
 
 ### Misc
 
@@ -102,10 +102,10 @@ This will behave similarly to:
 
 You can use `v-img` to make, for example, a picture gallery.
 
-<example file="v-img/misc-grid" />
+<ExamplesExample file="v-img/misc-grid" />
 
 #### Complex Grid Layout
 
 Build a more complex picture gallery layout using `flex-box` classes.
 
-<example file="v-img/complex-grid" />
+<ExamplesExample file="v-img/complex-grid" />
diff --git a/packages/docs/src/pages/en/components/infinite-scroller.md b/packages/docs/src/pages/en/components/infinite-scroller.md
index d23c3175044..1fb69f6467b 100644
--- a/packages/docs/src/pages/en/components/infinite-scroller.md
+++ b/packages/docs/src/pages/en/components/infinite-scroller.md
@@ -20,7 +20,7 @@ The `v-infinite-scroll` component displays a potentially infinite list, by loadi
 
 ![Infinite scroll Entry](https://cdn.vuetifyjs.com/docs/images/components/v-infinite-scroll/v-infinite-scroll-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -30,7 +30,7 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no
 
 When scrolling towards the bottom, new items will be rendered either automatically, or manually with the click of a button.
 
-<usage name="v-infinite-scroll" />
+<ExamplesUsage name="v-infinite-scroll" />
 
 A **load** event will be emitted when the component needs to load more content. The argument passed is an object with two properties.
 
@@ -44,7 +44,7 @@ A **load** event will be emitted when the component needs to load more content.
 |`'empty'`|There is no more content to fetch. This will display the `empty` slot|
 |`'loading'`|Content is currently loading. This will display a message that content is loading. This status is only set internally by the component and should not be used with the **done** function|
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -52,7 +52,7 @@ A **load** event will be emitted when the component needs to load more content.
 | - | - |
 | [v-infinite-scroll](/api/v-infinite-scroll/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -77,13 +77,13 @@ The `v-infinite-scroll` component has a number of props that can be used to cust
 
 The default behaviour of the component is to try to load more content automatically when the scrollbar gets close to the end. However a manual mode is also supported, where the user needs to do some interaction to load the content. By default this a button, but it can be customized with a [slot](#load-more)
 
-<example file="v-infinite-scroll/prop-mode" />
+<ExamplesExample file="v-infinite-scroll/prop-mode" />
 
 #### Direction
 
 The `v-infinite-scroll` component can be used with either vertical and horizontal scrolling.
 
-<example file="v-infinite-scroll/prop-direction" />
+<ExamplesExample file="v-infinite-scroll/prop-direction" />
 
 #### Side
 
@@ -91,17 +91,17 @@ By default the `v-infinite-scroll` component assumes that new content will be ap
 
 When using the **start** side for content, the scrolllbar will start at the bottom of the content.
 
-<example file="v-infinite-scroll/prop-side-start" />
+<ExamplesExample file="v-infinite-scroll/prop-side-start" />
 
 When using **both** sides for content, the scrollbar will start in the middle of the content.
 
-<example file="v-infinite-scroll/prop-side-both" />
+<ExamplesExample file="v-infinite-scroll/prop-side-both" />
 
 #### Color
 
 The default load more button and loading spinner can be colored with the **color** prop.
 
-<example file="v-infinite-scroll/prop-color" />
+<ExamplesExample file="v-infinite-scroll/prop-color" />
 
 ### Slots
 
@@ -121,25 +121,25 @@ The `v-infinite-scroll` component exposes a number of slots that allow you to fu
 
 You can customize the loading message with the **loading** slot.
 
-<example file="v-infinite-scroll/slot-loading" />
+<ExamplesExample file="v-infinite-scroll/slot-loading" />
 
 #### Load more
 
 When using **manual** mode you can customize the action required to load more content with the **load-more** slot.
 
-<example file="v-infinite-scroll/slot-load-more" />
+<ExamplesExample file="v-infinite-scroll/slot-load-more" />
 
 #### Empty
 
 You can customize the empty message with the **empty** slot.
 
-<example file="v-infinite-scroll/slot-empty" />
+<ExamplesExample file="v-infinite-scroll/slot-empty" />
 
 #### Error
 
 The **error** slot is shown if the status `'error'` is returned from the `done` callback.
 
-<example file="v-infinite-scroll/slot-error" />
+<ExamplesExample file="v-infinite-scroll/slot-error" />
 
 ### Examples
 
@@ -149,4 +149,4 @@ The following are a collection of examples that demonstrate more advanced and re
 
 If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small amount of items regardless of how far you scroll in either direction.
 
-<example file="v-infinite-scroll/misc-virtual" />
+<ExamplesExample file="v-infinite-scroll/misc-virtual" />
diff --git a/packages/docs/src/pages/en/components/inputs.md b/packages/docs/src/pages/en/components/inputs.md
index 2cb1fdd5e4e..06e57aaeb79 100644
--- a/packages/docs/src/pages/en/components/inputs.md
+++ b/packages/docs/src/pages/en/components/inputs.md
@@ -18,15 +18,15 @@ features:
 
 The `v-input` component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 `v-input` has 4 main areas. The prepended slot, the appended slot, the default slot, and messages. These make up the core logic shared between all form components.
 
-<example file="v-input/usage" />
+<ExamplesExample file="v-input/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ The `v-input` component gives you a baseline to create your own custom inputs. I
 | - | - |
 | [v-input](/api/v-input/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -56,39 +56,39 @@ As any validatable Vuetify component, `v-input` can be set to error state using
 
 You can add multiple errors to `v-input` using **error-count** property.
 
-<example file="v-input/prop-error-count" />
+<ExamplesExample file="v-input/prop-error-count" />
 
-<example file="v-input/prop-error" />
+<ExamplesExample file="v-input/prop-error" />
 
 #### Hide details
 
 When the **hide-details** prop is set to `auto` messages will be rendered only if there's a message (hint, error message etc) to display.
 
-<example file="v-input/prop-hide-details" />
+<ExamplesExample file="v-input/prop-hide-details" />
 
 #### Hint
 
 `v-input` can have **hint** which can tell user how to use the input. **persistent-hint** prop makes the hint visible always if no messages are displayed.
 
-<example file="v-input/prop-hint" />
+<ExamplesExample file="v-input/prop-hint" />
 
 #### Loading
 
 `v-input` has **loading** state which can be used, e.g. for data loading indication. Note: `v-text-field` is used just for example.
 
-<example file="v-input/prop-loading" />
+<ExamplesExample file="v-input/prop-loading" />
 
 #### Rules
 
 You can add custom validation rules to `v-input`, add them as functions returning `true`/error message. Note: `v-text-field` is used just for example.
 
-<example file="v-input/prop-rules" />
+<ExamplesExample file="v-input/prop-rules" />
 
 #### Success
 
 As any validatable Vuetify component, `v-input` can be set to success state using **success** prop, you can add message to it using **success-messages** prop.
 
-<example file="v-input/prop-success" />
+<ExamplesExample file="v-input/prop-success" />
 
 ### Events
 
@@ -96,7 +96,7 @@ As any validatable Vuetify component, `v-input` can be set to success state usin
 
 `v-input` can have `click:append` and `click:prepend` events for its slots. Note: `v-text-field` is used just for example.
 
-<example file="v-input/event-slot-clicks" />
+<ExamplesExample file="v-input/event-slot-clicks" />
 
 ### Slots
 
@@ -104,4 +104,4 @@ As any validatable Vuetify component, `v-input` can be set to success state usin
 
 `v-input` has `append` and `prepend` slots. You can place custom icons in them.
 
-<example file="v-input/slot-append-and-prepend" />
+<ExamplesExample file="v-input/slot-append-and-prepend" />
diff --git a/packages/docs/src/pages/en/components/item-groups.md b/packages/docs/src/pages/en/components/item-groups.md
index 83450c54b84..c73e0f58851 100644
--- a/packages/docs/src/pages/en/components/item-groups.md
+++ b/packages/docs/src/pages/en/components/item-groups.md
@@ -18,15 +18,15 @@ features:
 
 The `v-item-group` provides the ability to create a group of selectable items out of any component. This is the baseline functionality for components such as `v-tabs` and `v-carousel`.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The core usage of the `v-item-group` is to create groups of anything that should be controlled by a **model**.
 
-<!-- <example file="v-item-group/usage" /> -->
+<!-- <ExamplesExample file="v-item-group/usage" /> -->
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ The core usage of the `v-item-group` is to create groups of anything that should
 | [v-item-group](/api/v-item-group/) | The item group component. |
 | [v-item](/api/v-item/) | Sub-component used for modifying the `v-item-group` state |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,19 +45,19 @@ The core usage of the `v-item-group` is to create groups of anything that should
 
 The **selected-class** prop allows you to designate a CSS class applied to _selected_ items.
 
-<example file="v-item-group/prop-selected-class" />
+<ExamplesExample file="v-item-group/prop-selected-class" />
 
 #### Mandatory
 
 **mandatory** item groups must have at least 1 item selected.
 
-<example file="v-item-group/prop-mandatory" />
+<ExamplesExample file="v-item-group/prop-mandatory" />
 
 #### Multiple
 
 Item groups can have **multiple** items selected.
 
-<example file="v-item-group/prop-multiple" />
+<ExamplesExample file="v-item-group/prop-multiple" />
 
 ### Misc
 
@@ -65,10 +65,10 @@ Item groups can have **multiple** items selected.
 
 Easily hook up a custom chip group.
 
-<example file="v-item-group/misc-chips" />
+<ExamplesExample file="v-item-group/misc-chips" />
 
 #### Selection
 
 Icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.
 
-<example file="v-item-group/misc-selection" />
+<ExamplesExample file="v-item-group/misc-selection" />
diff --git a/packages/docs/src/pages/en/components/lazy.md b/packages/docs/src/pages/en/components/lazy.md
index c55e405084d..dddc825a18d 100644
--- a/packages/docs/src/pages/en/components/lazy.md
+++ b/packages/docs/src/pages/en/components/lazy.md
@@ -18,15 +18,15 @@ features:
 
 The `v-lazy` component is used to dynamically load components based upon an elements visibility.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-lazy` component by default will not render its contents until it has been intersected. Scroll down and watch the element render as you go past it.
 
-<usage name="v-lazy" />
+<ExamplesUsage name="v-lazy" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,4 +34,4 @@ The `v-lazy` component by default will not render its contents until it has been
 | - | - |
 | [v-lazy](/api/v-lazy/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
diff --git a/packages/docs/src/pages/en/components/lists.md b/packages/docs/src/pages/en/components/lists.md
index 7c38acc592e..acd19ee0681 100644
--- a/packages/docs/src/pages/en/components/lists.md
+++ b/packages/docs/src/pages/en/components/lists.md
@@ -20,15 +20,15 @@ features:
 
 The `v-list` component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Lists come in three main variations. **single-line** (default), **two-line** and **three-line**. The line declaration specifies the minimum height of the item and can also be controlled from `v-list` with the same prop.
 
-<usage name="v-list" />
+<ExamplesUsage name="v-list" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -44,7 +44,7 @@ Lists come in three main variations. **single-line** (default), **two-line** and
 | [v-list-img](/api/v-list-img/) | Sub-component that is used to wrap a the [v-img](/components/images/) component |
 | [v-list-item-media](/api/v-list-item-media/) | Sub-component that is used to wrap a the [v-img](/components/images/) component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -54,77 +54,77 @@ Lists come in three main variations. **single-line** (default), **two-line** and
 
 Lists can either be created by markup using the many sub-components that are available, or by using the **items** prop.
 
-<example file="v-list/prop-items" />
+<ExamplesExample file="v-list/prop-items" />
 
 To customize which properties will be used for the title and value of each item, use the **item-title** and **item-value** props.
 
-<example file="v-list/prop-items-custom" />
+<ExamplesExample file="v-list/prop-items-custom" />
 
 If you need to render subheaders or dividers, add an item with a **type** property. Which property to use can be customized using the **item-type** prop.
 
-<example file="v-list/prop-items-type" />
+<ExamplesExample file="v-list/prop-items-type" />
 
 To customize individual items, you can use the **item-props** prop. It defaults to looking for a **props** property on the items. The value should be an object, and if found it will be spread on the **v-list-item** component.
 
 If **item-props** is set to **true** then the whole item will be spread.
 
-<example file="v-list/prop-items-prop" />
+<ExamplesExample file="v-list/prop-items-prop" />
 
 #### Density
 
 `v-list` supports the **density** property.
 
-<example file="v-list/prop-density" />
+<ExamplesExample file="v-list/prop-density" />
 
-<promoted slug="vuetify-lux-admin-pro" />
+<PromotedPromoted slug="vuetify-lux-admin-pro" />
 
 #### Disabled
 
 You cannot interact with disabled `v-list`.
 
-<example file="v-list/prop-disabled" />
+<ExamplesExample file="v-list/prop-disabled" />
 
 #### Variant
 
 `v-list` supports the **variant** prop.
 
-<example file="v-list/prop-variant" />
+<ExamplesExample file="v-list/prop-variant" />
 
 #### Nav
 
 Lists can receive an alternative **nav** styling that reduces the width `v-list-item` takes up as well as adding a border radius.
 
-<example file="v-list/prop-nav" />
+<ExamplesExample file="v-list/prop-nav" />
 
 #### Rounded
 
 You can make `v-list` items rounded.
 
-<example file="v-list/prop-rounded" />
+<ExamplesExample file="v-list/prop-rounded" />
 
 #### Shaped
 
 Shaped lists have rounded borders on one side of the `v-list-item`.
 
-<example file="v-list/prop-shaped" />
+<ExamplesExample file="v-list/prop-shaped" />
 
 #### Sub group
 
 Using the `v-list-group` component you can create sub-groups of items.
 
-<example file="v-list/prop-sub-group" />
+<ExamplesExample file="v-list/prop-sub-group" />
 
 #### Three line
 
 For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.
 
-<example file="v-list/prop-three-line" />
+<ExamplesExample file="v-list/prop-three-line" />
 
 #### Two lines and subheader
 
 Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.
 
-<example file="v-list/prop-two-line-and-subheader" />
+<ExamplesExample file="v-list/prop-two-line-and-subheader" />
 
 ### Misc
 
@@ -132,4 +132,4 @@ Lists can contain subheaders, dividers, and can contain 1 or more lines. The sub
 
 A **three-line** list with actions. Utilizing **v-list-group**, easily connect actions to your tiles.
 
-<example file="v-list/misc-action-and-item-groups" />
+<ExamplesExample file="v-list/misc-action-and-item-groups" />
diff --git a/packages/docs/src/pages/en/components/locale-providers.md b/packages/docs/src/pages/en/components/locale-providers.md
index 813a9d293cd..70a0074c7c4 100644
--- a/packages/docs/src/pages/en/components/locale-providers.md
+++ b/packages/docs/src/pages/en/components/locale-providers.md
@@ -18,9 +18,9 @@ features:
 
 The locale provider allows you to provide specific default prop values to components in a section of your application
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -28,7 +28,7 @@ The locale provider allows you to provide specific default prop values to compon
 | - | - |
 | [v-locale-provider](/api/v-locale-provider/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
diff --git a/packages/docs/src/pages/en/components/menus.md b/packages/docs/src/pages/en/components/menus.md
index 6c50d26a3c6..0450f24063f 100644
--- a/packages/docs/src/pages/en/components/menus.md
+++ b/packages/docs/src/pages/en/components/menus.md
@@ -19,7 +19,7 @@ features:
 
 The `v-menu` component shows a menu at the position of the element used to activate it.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
@@ -31,9 +31,9 @@ The second one is by using the **activator** prop with value `parent`. This will
 
 The third one is to supply a CSS selector string to **activator** prop. This allows you to place the menu and its activator in separate parts of the markup.
 
-<example file="v-menu/usage" />
+<ExamplesExample file="v-menu/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -43,7 +43,7 @@ The third one is to supply a CSS selector string to **activator** prop. This all
 | [v-btn](/api/v-btn/) | Sub-component often used for the `v-menu` activator |
 | [v-list-item](/api/v-list-item/) | Sub-component often used for the `v-menu` content |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -53,43 +53,43 @@ The third one is to supply a CSS selector string to **activator** prop. This all
 
 Menus can also be placed absolutely on top of the activator element using the **absolute** prop. Try clicking anywhere on the image.
 
-<example file="v-menu/prop-absolute" />
+<ExamplesExample file="v-menu/prop-absolute" />
 
 #### Absolute without activator
 
 Menus can also be used without an activator by using **absolute** together with the props **position-x** and **position-y**. Try right-clicking anywhere on the image.
 
-<example file="v-menu/prop-absolute-without-activator" /> -->
+<ExamplesExample file="v-menu/prop-absolute-without-activator" /> -->
 
 <!-- #### Close on click
 
 Menu can be closed when lost focus.
 
-<example file="v-menu/prop-close-on-click" />
+<ExamplesExample file="v-menu/prop-close-on-click" />
 
 #### Close on content click
 
 You can configure whether `v-menu` should be closed when its content is clicked.
 
-<example file="v-menu/prop-close-on-content-click" /> -->
+<ExamplesExample file="v-menu/prop-close-on-content-click" /> -->
 
 <!-- #### Disabled
 
 You can disable the menu. Disabled menus can't be opened.
 
-<example file="v-menu/prop-disabled" /> -->
+<ExamplesExample file="v-menu/prop-disabled" /> -->
 
 #### Location
 
 Menu can be offset relative to the activator by using the **location** prop. Read more about **location** [here](/components/overlays/#location).
 
-<example file="v-menu/prop-location" />
+<ExamplesExample file="v-menu/prop-location" />
 
 #### Open on hover
 
 Menus can be accessed using hover instead of clicking with the **open-on-hover** prop.
 
-<example file="v-menu/prop-open-on-hover" />
+<ExamplesExample file="v-menu/prop-open-on-hover" />
 
 ### Slots
 
@@ -101,7 +101,7 @@ With the new `v-slot` syntax, nested activators such as those seen with a `v-men
   This same syntax is used for other nested activators such as `v-dialog` with `v-tooltip`
 :::
 
-<example file="v-menu/slot-activator-and-tooltip" />
+<ExamplesExample file="v-menu/slot-activator-and-tooltip" />
 
 ### Misc
 
@@ -109,16 +109,16 @@ With the new `v-slot` syntax, nested activators such as those seen with a `v-men
 
 Vuetify comes with [several standard transitions](/styles/transitions#api) that you can use. You can also create your own and pass it as the transition argument. For an example of how the stock transitions are constructed, visit [here](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts).
 
-<example file="v-menu/misc-transition" />
+<ExamplesExample file="v-menu/misc-transition" />
 
 #### Popover menu
 
 A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents.
 
-<example file="v-menu/misc-popover" />
+<ExamplesExample file="v-menu/misc-popover" />
 
 #### Use In components
 
 Menus can be placed within almost any component.
 
-<example file="v-menu/misc-use-in-components" />
+<ExamplesExample file="v-menu/misc-use-in-components" />
diff --git a/packages/docs/src/pages/en/components/navigation-drawers.md b/packages/docs/src/pages/en/components/navigation-drawers.md
index eb1c9c0239d..96d50c2ea7f 100644
--- a/packages/docs/src/pages/en/components/navigation-drawers.md
+++ b/packages/docs/src/pages/en/components/navigation-drawers.md
@@ -19,15 +19,15 @@ features:
 
 The `v-navigation-drawer` component is what your users will utilize to navigate through the application.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The navigation drawer is primarily used to house links to the pages in your application and is pre-configured to work with or without **vue-router** right out the box. Using `null` as the starting value for its **v-model** will initialize the drawer as closed on mobile and as open on desktop. It is common to pair drawers with the [v-list](/components/lists) component using the **nav** property.
 
-<usage name="v-navigation-drawer" />
+<ExamplesUsage name="v-navigation-drawer" />
 
-<entry />
+<PromotedEntry />
 
 ::: tip
 
@@ -51,7 +51,7 @@ For the purpose of display, some examples are wrapped in a `v-card` element. Wit
 | [v-navigation-drawer](/api/v-navigation-drawer/) | Primary Component |
 | [v-list-item](/api/v-list-item/) | Component used to create navigation links |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -67,43 +67,43 @@ For the purpose of display, some examples are wrapped in a `v-card` element. Wit
 
 Using the **bottom** prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the **mobile-breakpoint** is met.
 
-<example file="v-navigation-drawer/prop-bottom-drawer" />
+<ExamplesExample file="v-navigation-drawer/prop-bottom-drawer" />
 
 #### Expand on hover
 
 Places the component in **rail** mode and expands once hovered. This **does not** alter the content area of **v-main**. The width can be controlled with the **rail-width** property.
 
-<example file="v-navigation-drawer/prop-expand-on-hover" />
+<ExamplesExample file="v-navigation-drawer/prop-expand-on-hover" />
 
 #### Background images
 
 Apply a custom background to your drawer via the **image** prop. If you need to customize it further, you can use the `image` slot and render your own `v-img`.
 
-<example file="v-navigation-drawer/prop-images" />
+<ExamplesExample file="v-navigation-drawer/prop-images" />
 
 #### Rail variant
 
 When using the **rail** prop, the drawer will shrink (default 56px) and hide everything inside of `v-list` except the first element.
 
-<example file="v-navigation-drawer/prop-mini-variant" />
+<ExamplesExample file="v-navigation-drawer/prop-mini-variant" />
 
 #### Floating
 
 By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The **floating** property removes the right border (or left if using **position** prop).
 
-<example file="v-navigation-drawer/prop-permanent-and-floating" />
+<ExamplesExample file="v-navigation-drawer/prop-permanent-and-floating" />
 
 #### Location
 
 Navigation drawers can also be positioned on the opposite side of your application (or an element) using the **location** prop. This is useful for creating a side-sheet with auxiliary information that may not have any navigation links.
 
-<example file="v-navigation-drawer/prop-right" />
+<ExamplesExample file="v-navigation-drawer/prop-right" />
 
 #### Temporary
 
 A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile. Clicking outside of the drawer will cause it to close.
 
-<example file="v-navigation-drawer/prop-temporary" />
+<ExamplesExample file="v-navigation-drawer/prop-temporary" />
 
 ### Misc
 
@@ -111,10 +111,10 @@ A temporary drawer sits above its application and uses a scrim (overlay) to dark
 
 Navigation drawers can be customized to fit any application's design. Here we apply a custom background color and an appended content area using the **append** slot.
 
-<example file="v-navigation-drawer/misc-colored" />
+<ExamplesExample file="v-navigation-drawer/misc-colored" />
 
 #### Multiple drawers
 
 In this example we define two navigation-drawers, one using **rail** and one without.
 
-<example file="v-navigation-drawer/misc-combined" />
+<ExamplesExample file="v-navigation-drawer/misc-combined" />
diff --git a/packages/docs/src/pages/en/components/no-ssr.md b/packages/docs/src/pages/en/components/no-ssr.md
index d8c23d3199b..5f7ae7f295e 100644
--- a/packages/docs/src/pages/en/components/no-ssr.md
+++ b/packages/docs/src/pages/en/components/no-ssr.md
@@ -15,7 +15,7 @@ The `v-no-ssr` component is a simple wrapper that allows a developer to designat
 
 <!-- ![No-Ssr Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-No-Ssr/v-No-Ssr-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
@@ -38,6 +38,6 @@ The `v-no-ssr` component prevents its content from rendering on the server side.
 | - | - |
 | [v-no-ssr](/api/v-no-ssr/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
-<entry />
+<PromotedEntry />
diff --git a/packages/docs/src/pages/en/components/otp-input.md b/packages/docs/src/pages/en/components/otp-input.md
index c9ad32de5cf..1fa347b2150 100644
--- a/packages/docs/src/pages/en/components/otp-input.md
+++ b/packages/docs/src/pages/en/components/otp-input.md
@@ -19,7 +19,7 @@ The OTP input is used for MFA procedure of authenticating users by a one-time pa
 
 ![Otp input Entry](https://cdn.vuetifyjs.com/docs/images/components/v-otp-input/v-otp-input-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/introduction/roadmap/#v3-4-blackguard)
@@ -29,9 +29,9 @@ This feature was introduced in [v3.4.0 (Blackguard)](/introduction/roadmap/#v3-4
 
 Here we display a list of settings that could be applied within an application.
 
-<usage name="v-otp-input" />
+<ExamplesUsage name="v-otp-input" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -39,7 +39,7 @@ Here we display a list of settings that could be applied within an application.
 | - | - |
 | [v-otp-input](/api/v-otp-input/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -70,31 +70,31 @@ The `v-otp-input` component has support for most of `v-field`'s props and is fol
 
 The `length` prop determines the number of `v-field` components that are rendered. The default value is `6`.
 
-<example file="v-otp-input/prop-length" />
+<ExamplesExample file="v-otp-input/prop-length" />
 
 #### Focus-all
 
 The `autofocus` prop automatically focuses the first element in the `v-otp-input` component.
 
-<example file="v-otp-input/prop-focus-all" />
+<ExamplesExample file="v-otp-input/prop-focus-all" />
 
 #### Error
 
 The `error` prop puts the `v-otp-input` into an error state. This is useful for displaying validation errors.
 
-<example file="v-otp-input/prop-error" />
+<ExamplesExample file="v-otp-input/prop-error" />
 
 #### Variants
 
 The `v-otp-input` component supports the same variants as `v-field`, `v-text-field` and other inputs.
 
-<example file="v-otp-input/prop-variant" />
+<ExamplesExample file="v-otp-input/prop-variant" />
 
 #### Loader
 
 The `loader` prop displays a loader when the `v-otp-input` component is in a loading state. When complete, emits a `finish` event.
 
-<example file="v-otp-input/prop-loader" />
+<ExamplesExample file="v-otp-input/prop-loader" />
 
 ## Examples
 
@@ -104,22 +104,22 @@ The following are a collection of examples that demonstrate more advanced and re
 
 The following example is a detailed example of a `v-otp-input` component used within a card.
 
-<example file="v-otp-input/misc-card" />
+<ExamplesExample file="v-otp-input/misc-card" />
 
 ### Mobile text
 
 The following example is a detailed example of a `v-otp-input` component used with mobile text.
 
-<example file="v-otp-input/misc-mobile" />
+<ExamplesExample file="v-otp-input/misc-mobile" />
 
 ### Verify account
 
 The following example is a detailed example of a `v-otp-input` component used to verify a user's account.
 
-<example file="v-otp-input/misc-verify" />
+<ExamplesExample file="v-otp-input/misc-verify" />
 
 ### Divider
 
 The following example is a detailed example of a `v-otp-input` component used with a divider.
 
-<example file="v-otp-input/misc-divider" />
+<ExamplesExample file="v-otp-input/misc-divider" />
diff --git a/packages/docs/src/pages/en/components/overflow-btns.md b/packages/docs/src/pages/en/components/overflow-btns.md
index 2f8e7a9525c..27f55c4eea1 100644
--- a/packages/docs/src/pages/en/components/overflow-btns.md
+++ b/packages/docs/src/pages/en/components/overflow-btns.md
@@ -14,17 +14,17 @@ related:
 
 `v-overflow-btn` is used to give the user the ability to select items from the list. It has 3 variations: `editable`, `overflow` and `segmented`
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 `v-overflow-btn` is used for creating selection lists
 
-<usage name="v-overflow-btn" />
+<ExamplesUsage name="v-overflow-btn" />
 
 ## API
 
-<api-inline />
+<ApiInline />
 
 ## Examples
 
@@ -34,58 +34,58 @@ related:
 
 You can add a counter to `v-overflow-btn` to control the max char count
 
-<example file="v-overflow-btn/prop-counter" />
+<ExamplesExample file="v-overflow-btn/prop-counter" />
 
 #### Dense
 
 You can use `dense` prop to reduce overflow button height and lower max height of list items.
 
-<example file="v-overflow-btn/prop-dense" />
+<ExamplesExample file="v-overflow-btn/prop-dense" />
 
 #### Disabled
 
 `v-overflow-btn` can be disabled in order to prevent a user from interacting with it
 
-<example file="v-overflow-btn/prop-disabled" />
+<ExamplesExample file="v-overflow-btn/prop-disabled" />
 
 #### Editable
 
 `editable` `v-overflow-btn` can be directly edited, just as `v-text-field`
 
-<example file="v-overflow-btn/prop-editable" />
+<ExamplesExample file="v-overflow-btn/prop-editable" />
 
 #### Filled
 
 Text fields can be used with an alternative box design.
 
-<example file="v-overflow-btn/prop-filled" />
+<ExamplesExample file="v-overflow-btn/prop-filled" />
 
 #### Hint
 
 You can add a hint for the user using the `hint` property
 
-<example file="v-overflow-btn/prop-hint" />
+<ExamplesExample file="v-overflow-btn/prop-hint" />
 
 #### Loading
 
 `v-overflow-btn` can have `loading` state with a linear progress bar under them
 
-<example file="v-overflow-btn/prop-loading" />
+<ExamplesExample file="v-overflow-btn/prop-loading" />
 
 #### Menu props
 
 You can set underlying `v-menu` props using `menu-props` property
 
-<example file="v-overflow-btn/prop-menu-props" />
+<ExamplesExample file="v-overflow-btn/prop-menu-props" />
 
 #### Readonly
 
 `v-overflow-btn` can be put into `readonly` mode, it'll become inactive but won't change the color
 
-<example file="v-overflow-btn/prop-readonly" />
+<ExamplesExample file="v-overflow-btn/prop-readonly" />
 
 #### Segmented
 
 `segmented` `v-overflow-btn` has and additional divider between the content and the icon
 
-<example file="v-overflow-btn/prop-segmented" />
+<ExamplesExample file="v-overflow-btn/prop-segmented" />
diff --git a/packages/docs/src/pages/en/components/overlays.md b/packages/docs/src/pages/en/components/overlays.md
index 8b75731ffec..2fef0281d0b 100644
--- a/packages/docs/src/pages/en/components/overlays.md
+++ b/packages/docs/src/pages/en/components/overlays.md
@@ -18,15 +18,15 @@ features:
 
 `v-overlay` is the base for components that float over the rest of the page, such as `v-menu` and `v-dialog`. It can also be used on its own and comes with everything you need to create a custom popover component.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 In its simplest form, the `v-overlay` component will add a dimmed layer over your application.
 
-<example file="v-overlay/usage" />
+<ExamplesExample file="v-overlay/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ In its simplest form, the `v-overlay` component will add a dimmed layer over you
 | - | - |
 | [v-overlay](/api/v-overlay/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Activator
 
@@ -91,7 +91,7 @@ The connected strategy is used by [v-menu](/components/menus) and [v-tooltip](/c
 
 `location` selects a point on the activator, and `origin` a point on the overlay content. The content element will be positioned so the two points overlap.
 
-<example file="v-overlay/connected-playground" />
+<ExamplesExample file="v-overlay/connected-playground" />
 
 ## Scroll Strategies
 
@@ -101,7 +101,7 @@ The connected strategy is used by [v-menu](/components/menus) and [v-tooltip](/c
 
 Scrolling is blocked while the overlay is active, and the scrollbar is hidden. If `contained` is also set, scrolling will only be blocked up to the overlay's [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).
 
-<example file="v-overlay/scroll-block" />
+<ExamplesExample file="v-overlay/scroll-block" />
 
 ### Close
 
@@ -109,7 +109,7 @@ Scrolling is blocked while the overlay is active, and the scrollbar is hidden. I
 
 Scrolling when the overlay is active will de-activate it.
 
-<example file="v-overlay/scroll-close" />
+<ExamplesExample file="v-overlay/scroll-close" />
 
 ### Reposition
 
@@ -117,7 +117,7 @@ Scrolling when the overlay is active will de-activate it.
 
 When using the `connected` location strategy, this scroll strategy will reposition the overlay element to always respect the activator location.
 
-<example file="v-overlay/scroll-reposition" />
+<ExamplesExample file="v-overlay/scroll-reposition" />
 
 ### None
 
@@ -125,7 +125,7 @@ When using the `connected` location strategy, this scroll strategy will repositi
 
 No scroll strategy is used.
 
-<example file="v-overlay/scroll-none" />
+<ExamplesExample file="v-overlay/scroll-none" />
 
 ## Examples
 
@@ -135,7 +135,7 @@ No scroll strategy is used.
 
 A **contained** overlay is positioned absolutely and contained inside its parent element.
 
-<example file="v-overlay/prop-contained" />
+<ExamplesExample file="v-overlay/prop-contained" />
 
 ### Misc
 
@@ -143,10 +143,10 @@ A **contained** overlay is positioned absolutely and contained inside its parent
 
 Using the [v-hover](/components/hover), we are able to add a nice scrim over the information card with additional actions the user can take.
 
-<example file="v-overlay/misc-advanced" />
+<ExamplesExample file="v-overlay/misc-advanced" />
 
 #### Loader
 
 Using the `v-overlay` as a background, add a progress component to easily create a custom loader.
 
-<example file="v-overlay/misc-loader" />
+<ExamplesExample file="v-overlay/misc-loader" />
diff --git a/packages/docs/src/pages/en/components/paginations.md b/packages/docs/src/pages/en/components/paginations.md
index 231ab1aa480..8f911563384 100644
--- a/packages/docs/src/pages/en/components/paginations.md
+++ b/packages/docs/src/pages/en/components/paginations.md
@@ -19,15 +19,15 @@ features:
 
 The `v-pagination` component is used to separate long sets of data so that it is easier for a user to consume information.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Pagination by default displays the number of pages based on the set **length** prop, with **prev** and **next** buttons surrounding to help you navigate. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a **v-model** attribute.
 
-<usage name="v-pagination" />
+<ExamplesUsage name="v-pagination" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Pagination by default displays the number of pages based on the set **length** p
 | - | - |
 | [v-pagination](/api/v-pagination/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,28 +45,28 @@ Pagination by default displays the number of pages based on the set **length** p
 
 The **rounded** prop allows you to render pagination buttons with alternative styles.
 
-<example file="v-pagination/prop-rounded" />
+<ExamplesExample file="v-pagination/prop-rounded" />
 
 #### Disabled
 
 Pagination items can be manually deactivated using the **disabled** prop.
 
-<example file="v-pagination/prop-disabled" />
+<ExamplesExample file="v-pagination/prop-disabled" />
 
 #### Icons
 
 Previous and next page icons can be customized with the **prev-icon** and **next-icon** props.
 
-<example file="v-pagination/prop-icons" />
+<ExamplesExample file="v-pagination/prop-icons" />
 
 #### Length
 
 Using the **length** prop you can set the length of `v-pagination`, if the number of page buttons exceeds the parent container, it will truncate the list.
 
-<example file="v-pagination/prop-length" />
+<ExamplesExample file="v-pagination/prop-length" />
 
 #### Total visible
 
 You can also manually set the maximum number of visible page buttons with the **total-visible** prop.
 
-<example file="v-pagination/prop-total-visible" />
+<ExamplesExample file="v-pagination/prop-total-visible" />
diff --git a/packages/docs/src/pages/en/components/parallax.md b/packages/docs/src/pages/en/components/parallax.md
index e7495c35800..ffa3837950d 100644
--- a/packages/docs/src/pages/en/components/parallax.md
+++ b/packages/docs/src/pages/en/components/parallax.md
@@ -18,15 +18,15 @@ features:
 
 The `v-parallax` component creates a 3d effect that makes an image appear to scroll slower than the window.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 A parallax causes a shift in a background image when the user scrolls the page.
 
-<example file="v-parallax/usage" />
+<ExamplesExample file="v-parallax/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ A parallax causes a shift in a background image when the user scrolls the page.
 | - | - |
 | [v-parallax](/api/v-parallax/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -44,10 +44,10 @@ A parallax causes a shift in a background image when the user scrolls the page.
 
 You can also place any content inside of the parallax. This allows you to use the parallax as a hero image.
 
-<example file="v-parallax/misc-content" />
+<ExamplesExample file="v-parallax/misc-content" />
 
 #### Custom height
 
 You can specify a custom height on a parallax. Keep in mind this can break the parallax if your image is not sized properly
 
-<example file="v-parallax/misc-custom-height" />
+<ExamplesExample file="v-parallax/misc-custom-height" />
diff --git a/packages/docs/src/pages/en/components/progress-circular.md b/packages/docs/src/pages/en/components/progress-circular.md
index 761f18d6655..9677a83ad85 100644
--- a/packages/docs/src/pages/en/components/progress-circular.md
+++ b/packages/docs/src/pages/en/components/progress-circular.md
@@ -19,15 +19,15 @@ features:
 
 The `v-progress-circular` component is used to convey data circularly to users. It also can be put into an indeterminate state to portray loading.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 In its simplest form, v-progress-circular displays a circular progress bar. Use the value prop to control the progress.
 
-<usage name="v-progress-circular" />
+<ExamplesUsage name="v-progress-circular" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ In its simplest form, v-progress-circular displays a circular progress bar. Use
 | - | - |
 | [v-progress-circular](/api/v-progress-circular/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,25 +45,25 @@ In its simplest form, v-progress-circular displays a circular progress bar. Use
 
 Alternate colors can be applied to `v-progress-circular` using the `color` prop.
 
-<example file="v-progress-circular/prop-color" />
+<ExamplesExample file="v-progress-circular/prop-color" />
 
 #### Indeterminate
 
 Using the `indeterminate` prop, a `v-progress-circular` continues to animate indefinitely.
 
-<example file="v-progress-circular/prop-indeterminate" />
+<ExamplesExample file="v-progress-circular/prop-indeterminate" />
 
 #### Rotate
 
 The `rotate` prop gives you the ability to customize the `v-progress-circular`'s origin.
 
-<example file="v-progress-circular/prop-rotate" />
+<ExamplesExample file="v-progress-circular/prop-rotate" />
 
 #### Size and Width
 
 The `size` and `width` props allow you to easily alter the size and width of the `v-progress-circular` component.
 
-<example file="v-progress-circular/prop-size-and-width" />
+<ExamplesExample file="v-progress-circular/prop-size-and-width" />
 
 ### Slots
 
@@ -71,4 +71,4 @@ The `size` and `width` props allow you to easily alter the size and width of the
 
 `default` slot can be used to replace the text inside the loader.
 
-<example file="v-progress-circular/prop-slot-default" />
+<ExamplesExample file="v-progress-circular/prop-slot-default" />
diff --git a/packages/docs/src/pages/en/components/progress-linear.md b/packages/docs/src/pages/en/components/progress-linear.md
index d68e2b2e7dd..57e678b2dec 100644
--- a/packages/docs/src/pages/en/components/progress-linear.md
+++ b/packages/docs/src/pages/en/components/progress-linear.md
@@ -20,15 +20,15 @@ features:
 
 The `v-progress-linear` component is used to convey data visually to users. It supports both indeterminate amounts, such as loading or processing, and finite amounts of progress (including separate buffer values).
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 In its simplest form, `v-progress-linear` displays a horizontal progress bar. Use the **value** prop to control the progress.
 
-<usage name="v-progress-linear" />
+<ExamplesUsage name="v-progress-linear" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -36,7 +36,7 @@ In its simplest form, `v-progress-linear` displays a horizontal progress bar. Us
 | - | - |
 | [v-progress-linear](/api/v-progress-linear/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -46,31 +46,31 @@ In its simplest form, `v-progress-linear` displays a horizontal progress bar. Us
 
 The primary value is controlled by **v-model**, whereas the buffer is controlled by the **buffer-value** prop.
 
-<example file="v-progress-linear/prop-buffer-value" />
+<ExamplesExample file="v-progress-linear/prop-buffer-value" />
 
 #### Colors
 
-You can set the colors of the progress bar using the props **color** and **background-color**.
+You can set the colors of the progress bar using the props **color** and **bg-color**.
 
-<example file="v-progress-linear/prop-colors" />
+<ExamplesExample file="v-progress-linear/prop-colors" />
 
 #### Indeterminate
 
 Using the **indeterminate** prop, `v-progress-linear` continuously animates.
 
-<example file="v-progress-linear/prop-indeterminate" />
+<ExamplesExample file="v-progress-linear/prop-indeterminate" />
 
 #### Reversed
 
 Displays reversed progress. The component also has RTL support, such that a progress bar in right-to-left mode with **reverse** prop enabled will display left-to-right.
 
-<example file="v-progress-linear/prop-reverse" />
+<ExamplesExample file="v-progress-linear/prop-reverse" />
 
 #### Rounded
 
 The **rounded** prop is used to apply a border radius to the `v-progress-linear` component.
 
-<example file="v-progress-linear/prop-rounded" />
+<ExamplesExample file="v-progress-linear/prop-rounded" />
 
 ::: info
   Use the **rounded-bar** property to add a border-radius to the inner edges of value bar. By default, the value bar's border-radius is equal to the default _border-radius_ of your application unless a different value is provided by the **rounded** prop or SASS variable.
@@ -80,13 +80,13 @@ The **rounded** prop is used to apply a border radius to the `v-progress-linear`
 
 The **stream** property works with **buffer-value** to convey to the user that there is some action taking place.
 
-<example file="v-progress-linear/prop-stream" />
+<ExamplesExample file="v-progress-linear/prop-stream" />
 
 #### Striped
 
 This applies a striped background over the value portion of the `v-progress-linear`. This prop has no effect when using **indeterminate**.
 
-<example file="v-progress-linear/prop-striped" />
+<ExamplesExample file="v-progress-linear/prop-striped" />
 
 ### Slots
 
@@ -94,7 +94,7 @@ This applies a striped background over the value portion of the `v-progress-line
 
 The `v-progress-linear` component will be responsive to user input when using **v-model**. You can use the default slot or bind a local model to display inside of the progress. If you are looking for advanced features on a linear type component, check out [v-slider](/components/sliders).
 
-<example file="v-progress-linear/slot-default" />
+<ExamplesExample file="v-progress-linear/slot-default" />
 
 ### Misc
 
@@ -102,16 +102,16 @@ The `v-progress-linear` component will be responsive to user input when using **
 
 The progress linear component can have a determinate state modified by **v-model**.
 
-<example file="v-progress-linear/misc-determinate" />
+<ExamplesExample file="v-progress-linear/misc-determinate" />
 
 #### File loader
 
 The `v-progress-linear` component is good for communicating to the user that they are waiting for a response.
 
-<example file="v-progress-linear/misc-file-loader" />
+<ExamplesExample file="v-progress-linear/misc-file-loader" />
 
 #### Toolbar loader
 
 Using the **absolute** prop we are able to position the `v-progress-linear` component at the bottom of the `v-toolbar`. We also use the **active** prop which allows us to control the visibility of the progress.
 
-<example file="v-progress-linear/misc-toolbar-loader" />
+<ExamplesExample file="v-progress-linear/misc-toolbar-loader" />
diff --git a/packages/docs/src/pages/en/components/radio-buttons.md b/packages/docs/src/pages/en/components/radio-buttons.md
index 0e577aa5b77..507d031f679 100644
--- a/packages/docs/src/pages/en/components/radio-buttons.md
+++ b/packages/docs/src/pages/en/components/radio-buttons.md
@@ -19,15 +19,15 @@ features:
 
 The `v-radio` component is a simple radio button. When combined with  the `v-radio-group` component you can provide grouping functionality to allow users to select from a predefined set of options.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Although `v-radio` can be used on its own, it is best used in conjunction with `v-radio-group`.
 
-<usage name="v-radio-group" />
+<ExamplesUsage name="v-radio-group" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -36,7 +36,7 @@ Although `v-radio` can be used on its own, it is best used in conjunction with `
 | [v-radio-group](/api/v-radio-group/) | Primary Component |
 | [v-radio](/api/v-radio/) | Sub-component used for modifying the `v-radio-group` state |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -46,29 +46,29 @@ Although `v-radio` can be used on its own, it is best used in conjunction with `
 
 Using the **v-model** (or **model-value**) you can access and control the selected radio button defined by the set **value** on the child `v-radio` components.
 
-<example file="v-radio-group/prop-model-group" />
+<ExamplesExample file="v-radio-group/prop-model-group" />
 
 ::: info
-  If you are using integer values with **model-value**, you will need to use `:value` to set the value of the child `v-radio` otherwise it will be evaluated as a sting.
+  If you are using integer values with **model-value**, you will need to use `:value` to set the value of the child `v-radio` otherwise it will be evaluated as a string.
 :::
 
 #### Model (radio)
 
 The **v-model** (or **model-value**) you can access and control the value of a single radio button. The `true`/`false` values can be independently defined using the **true-value** and **false-value** props.
 
-<example file="v-radio-group/prop-model-radio" />
+<ExamplesExample file="v-radio-group/prop-model-radio" />
 
 #### Colors
 
 Radios can be colored by using any of the builtin colors and contextual names using the **color** prop.
 
-<example file="v-radio-group/prop-colors" />
+<ExamplesExample file="v-radio-group/prop-colors" />
 
 #### Direction
 
 Radio-groups can be presented either as a row or a column, using their respective props. The default is as a column.
 
-<example file="v-radio-group/prop-direction" />
+<ExamplesExample file="v-radio-group/prop-direction" />
 
 ### Slots
 
@@ -76,4 +76,4 @@ Radio-groups can be presented either as a row or a column, using their respectiv
 
 Radio Group labels can be defined in `label` slot - that will allow to use HTML content.
 
-<example file="v-radio-group/slot-label" />
+<ExamplesExample file="v-radio-group/slot-label" />
diff --git a/packages/docs/src/pages/en/components/range-sliders.md b/packages/docs/src/pages/en/components/range-sliders.md
index 71f9807f36a..8d22050412c 100644
--- a/packages/docs/src/pages/en/components/range-sliders.md
+++ b/packages/docs/src/pages/en/components/range-sliders.md
@@ -19,15 +19,15 @@ features:
 
 The `v-range-slider` component complements the `v-slider` component nicely when you are in need of representing a range of values.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
 
-<usage name="v-range-slider" />
+<ExamplesUsage name="v-range-slider" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Sliders reflect a range of values along a bar, from which users may select a sin
 | - | - |
 | [v-range-slider](/api/v-range-slider/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,31 +45,31 @@ Sliders reflect a range of values along a bar, from which users may select a sin
 
 With the **strict** prop applied, the thumbs of the range slider are not allowed to cross over each other.
 
-<example file="v-range-slider/prop-strict" />
+<ExamplesExample file="v-range-slider/prop-strict" />
 
 #### Disabled
 
 You cannot interact with **disabled** sliders.
 
-<example file="v-range-slider/prop-disabled" />
+<ExamplesExample file="v-range-slider/prop-disabled" />
 
 #### Min and max
 
 You can set **min** and **max** values of sliders.
 
-<example file="v-range-slider/prop-min-and-max" />
+<ExamplesExample file="v-range-slider/prop-min-and-max" />
 
 #### Step
 
 `v-range-slider` can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy.
 
-<example file="v-range-slider/prop-step" />
+<ExamplesExample file="v-range-slider/prop-step" />
 
 #### Vertical sliders
 
 You can use the **vertical** prop to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.
 
-<example file="v-range-slider/prop-vertical" />
+<ExamplesExample file="v-range-slider/prop-vertical" />
 
 ### Slots
 
@@ -77,4 +77,4 @@ You can use the **vertical** prop to switch sliders to a vertical orientation. I
 
 Using the **tick-labels** prop along with the `thumb-label` slot, you can create a very customized solution.
 
-<example file="v-range-slider/slot-thumb-label" />
+<ExamplesExample file="v-range-slider/slot-thumb-label" />
diff --git a/packages/docs/src/pages/en/components/ratings.md b/packages/docs/src/pages/en/components/ratings.md
index 49362361433..2a78c3d0c1d 100644
--- a/packages/docs/src/pages/en/components/ratings.md
+++ b/packages/docs/src/pages/en/components/ratings.md
@@ -18,15 +18,15 @@ features:
 
 The `v-rating` component is a specialized but important piece in building user widgets. Collecting user feedback via ratings is a simple analytic that can provide a lot of feedback to your product or application.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-rating` component provides a simple interface for gathering user feedback.
 
-<usage name="v-rating" />
+<ExamplesUsage name="v-rating" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -34,7 +34,7 @@ The `v-rating` component provides a simple interface for gathering user feedback
 | - | - |
 | [v-rating](/api/v-rating/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -44,67 +44,67 @@ The `v-rating` component provides a simple interface for gathering user feedback
 
 The `v-rating` component can be colored as you want, you can set both selected and not selected colors.
 
-<example file="v-rating/prop-color" />
+<ExamplesExample file="v-rating/prop-color" />
 
 #### Density
 
 Control the space occupied by `v-rating` items using the **density** prop.
 
-<example file="v-rating/prop-density" />
+<ExamplesExample file="v-rating/prop-density" />
 
 #### Clearable
 
 Clicking on a current rating value can reset the rating by using **clearable** prop.
 
-<example file="v-rating/prop-clearable" />
+<ExamplesExample file="v-rating/prop-clearable" />
 
 #### Readonly
 
 For ratings that are not meant to be changed you can use **readonly** prop.
 
-<example file="v-rating/prop-readonly" />
+<ExamplesExample file="v-rating/prop-readonly" />
 
 #### Hover effect
 
 When using the **hover** prop, the rating icons will become a solid color and slightly increase its scale when the mouse is hovered over them.
 
-<example file="v-rating/prop-hover" />
+<ExamplesExample file="v-rating/prop-hover" />
 
 #### Labels
 
 The `v-rating` component can display labels above or below each item.
 
-<example file="v-rating/prop-item-labels" />
+<ExamplesExample file="v-rating/prop-item-labels" />
 
 #### Icons
 
 You can use custom icons.
 
-<example file="v-rating/prop-icons" />
+<ExamplesExample file="v-rating/prop-icons" />
 
 #### Length
 
 Change the number of items by modifying the the **length** prop.
 
-<example file="v-rating/prop-length" />
+<ExamplesExample file="v-rating/prop-length" />
 
 #### Half increments
 
 The **half-increments** prop increases the granularity of the ratings, allow for `.5` values as well.
 
-<example file="v-rating/prop-half-increments" />
+<ExamplesExample file="v-rating/prop-half-increments" />
 
 #### Size
 
 Utilize the same sizing classes available in `v-icon` or provide your own with the **size** prop.
 
-<example file="v-rating/prop-size" />
+<ExamplesExample file="v-rating/prop-size" />
 
 #### Aria Label
 
 Provide a label to assistive technologies for each item.
 
-<example file="v-rating/prop-icon-label" />
+<ExamplesExample file="v-rating/prop-icon-label" />
 
 ### Slots
 
@@ -112,13 +112,13 @@ Provide a label to assistive technologies for each item.
 
 Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating.
 
-<example file="v-rating/slot-item" />
+<ExamplesExample file="v-rating/slot-item" />
 
 #### Custom labels slot
 
 Any arbitrary content could be displayed for labels in **item-label** slot.
 
-<example file="v-rating/slot-item-label" />
+<ExamplesExample file="v-rating/slot-item-label" />
 
 ### Misc
 
@@ -126,12 +126,12 @@ Any arbitrary content could be displayed for labels in **item-label** slot.
 
 The `v-rating` component fits right in with existing components. Build truly complex examples with rich features and beautiful designs.
 
-<example file="v-rating/misc-advanced" /> -->
+<ExamplesExample file="v-rating/misc-advanced" /> -->
 
 #### Card ratings
 
 The rating component pairs well with products allowing you to gather and display customer feedback.
 
-<example file="v-rating/misc-card" />
+<ExamplesExample file="v-rating/misc-card" />
 
-<example file="v-rating/misc-card-overview" />
+<ExamplesExample file="v-rating/misc-card-overview" />
diff --git a/packages/docs/src/pages/en/components/selects.md b/packages/docs/src/pages/en/components/selects.md
index 30f26af76ce..9e50cca3caf 100644
--- a/packages/docs/src/pages/en/components/selects.md
+++ b/packages/docs/src/pages/en/components/selects.md
@@ -19,13 +19,13 @@ features:
 
 Select fields components are used for collecting user provided information from a list of options.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
-<usage name="v-select" />
+<ExamplesUsage name="v-select" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Select fields components are used for collecting user provided information from
 | [v-autocomplete](/api/v-autocomplete/) | A select component that allows for advanced filtering |
 | [v-combobox](/api/v-combobox/) | A select component that allows for filtering and custom values |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -57,43 +57,43 @@ All form inputs have a massive API that make it super easy to configure everythi
 
 You can use **density** prop to adjust vertical spacing within the component.
 
-<example file="v-select/prop-dense" />
+<ExamplesExample file="v-select/prop-dense" />
 
 #### Multiple
 
 The **multiple** prop allows for multiple selections.
 
-<example file="v-select/prop-multiple" />
+<ExamplesExample file="v-select/prop-multiple" />
 
 #### Chips
 
 Display selected items as chips with the **chips** prop.
 
-<example file="v-select/prop-chips" />
+<ExamplesExample file="v-select/prop-chips" />
 
 #### Readonly
 
 You can use the **readonly** prop on `v-select` which will prevent a user from changing its value.
 
-<example file="v-select/prop-readonly" />
+<ExamplesExample file="v-select/prop-readonly" />
 
 #### Disabled
 
 Applying the **disabled** prop to a `v-select` will prevent a user from interacting with the component.
 
-<example file="v-select/prop-disabled" />
+<ExamplesExample file="v-select/prop-disabled" />
 
 #### Custom title and value
 
 You can specify the specific properties within your items array that correspond to the title and value fields. By default, this is **title** and **value**. In this example we also use the **return-object** prop which will return the entire object of the selected item on selection.
 
-<example file="v-select/prop-custom-title-and-value" />
+<ExamplesExample file="v-select/prop-custom-title-and-value" />
 
 <!-- #### Menu props
 
 Custom props can be passed directly to `v-menu` using **menuProps** prop. In this example menu is force directed to top and shifted to top.
 
-<example file="v-select/prop-menu-props" /> -->
+<ExamplesExample file="v-select/prop-menu-props" /> -->
 
 #### Custom item props
 
@@ -122,7 +122,7 @@ const items = [
 
 Or a custom transform function can be passed to `itemProps` to generate the props for each item.
 
-<example file="v-select/prop-item-props" />
+<ExamplesExample file="v-select/prop-item-props" />
 
 See the [VListItem API](/api/v-list-item/) for a list of available props.
 
@@ -134,16 +134,16 @@ The `v-select` component offers slots that make it easy to customize the output
 
 The item slot is used to change how items are rendered in the list. It provides `item`, an [InternalItem](/api/v-select/#slots-item) object containing the transformed item-title and item-value; and `props`, an object containing the props and events that would normally be bound to the list item.
 
-<example file="v-select/slot-item" />
+<ExamplesExample file="v-select/slot-item" />
 
 #### Append and prepend item
 
 The `v-select` component can be optionally expanded with prepended and appended items. This is perfect for customized **select-all** functionality.
 
-<example file="v-select/slot-append-and-prepend-item" />
+<ExamplesExample file="v-select/slot-append-and-prepend-item" />
 
 #### Selection
 
 The **selection** slot can be used to customize the way selected values are shown in the input. This is great when you don't want the selection to occupy multiple lines.
 
-<example file="v-select/slot-selection" />
+<ExamplesExample file="v-select/slot-selection" />
diff --git a/packages/docs/src/pages/en/components/sheets.md b/packages/docs/src/pages/en/components/sheets.md
index 76696096860..138b1c158c2 100644
--- a/packages/docs/src/pages/en/components/sheets.md
+++ b/packages/docs/src/pages/en/components/sheets.md
@@ -20,15 +20,15 @@ The `v-sheet` component is a transformable piece of _paper_ that provides a basi
 
 ![Sheet Entry](https://cdn.vuetifyjs.com/docs/images/components/v-sheet/v-sheet-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The sheet component has support for elevation, rounded corners, color, and more. It can be used as a container for other components or as a standalone.
 
-<usage name="v-sheet" />
+<ExamplesUsage name="v-sheet" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -36,7 +36,7 @@ The sheet component has support for elevation, rounded corners, color, and more.
 | - | - |
 | [v-sheet](/api/v-sheet/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -60,13 +60,13 @@ Some of the standard props that can be applied to the `v-sheet` component are li
 
 The `v-sheet` component accepts a custom elevation between **0** and **24** (0 is default). The _elevation_ property modifies the `box-shadow` property. More information is located in the MD [Elevation Design Specification](https://material.io/design/environment/elevation.html).
 
-<example file="v-sheet/prop-elevation" />
+<ExamplesExample file="v-sheet/prop-elevation" />
 
 #### Rounded
 
 The **rounded** prop adds a default `border-radius` of _4px_. By default, the `v-sheet` component has no border-radius. Customize the radius's size and location by providing a custom rounded value; e.g. a rounded value of _tr-xl l-pill_ equates to _rounded-tr-xl rounded-l-pill_. Additional information is on the [Border Radius](/styles/border-radius/) page.
 
-<example file="v-sheet/prop-rounded" />
+<ExamplesExample file="v-sheet/prop-rounded" />
 
 #### Color
 
@@ -74,7 +74,7 @@ Sheets and components based on them can have different sizes and colors.
 
 The `v-sheet` component accepts custom [Material Design Color](/styles/colors/) values such as `warning`, `amber darken-3`, and `deep-purple accent` — as well as _rgb_, _rgba_, and _hexadecimal_ values.
 
-<example file="v-sheet/prop-color" />
+<ExamplesExample file="v-sheet/prop-color" />
 
 ## Examples
 
@@ -84,22 +84,22 @@ The following are a collection of examples that demonstrate more advanced and re
 
 This example uses a sheet component to create a banner congratulating users for signing up for the Vuetify community.
 
-<example file="v-sheet/misc-congratulations" />
+<ExamplesExample file="v-sheet/misc-congratulations" />
 
 ### Reconcile Notification
 
 The following example uses a sheet component to create a banner that notifies users that the account balance has been reconciled.
 
-<example file="v-sheet/misc-reconcile" />
+<ExamplesExample file="v-sheet/misc-reconcile" />
 
 ### Privacy Policy
 
 Creating a Privacy Policy notification is a great use case for the `v-sheet` component.
 
-<example file="v-sheet/misc-privacy-policy" />
+<ExamplesExample file="v-sheet/misc-privacy-policy" />
 
 ### Referral program
 
 Even for simple use-cases, the `v-sheet` component is versatile makes it easy to contain content and other components.
 
-<example file="v-sheet/misc-referral-program" />
+<ExamplesExample file="v-sheet/misc-referral-program" />
diff --git a/packages/docs/src/pages/en/components/skeleton-loaders.md b/packages/docs/src/pages/en/components/skeleton-loaders.md
index 4a9fa7e4631..89cfe394795 100644
--- a/packages/docs/src/pages/en/components/skeleton-loaders.md
+++ b/packages/docs/src/pages/en/components/skeleton-loaders.md
@@ -21,7 +21,7 @@ Skeleton loaders provide a simple way to display loading placeholders in your ap
 
 ![Skeleton loader Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-skeleton-loader/v-skeleton-loader-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -31,9 +31,9 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no
 
 The `v-skeleton-loader` component provides a user with a visual indicator that content is coming / loading. This is better received than traditional full-screen loaders.
 
-<usage name="v-skeleton-loader" />
+<ExamplesUsage name="v-skeleton-loader" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -41,7 +41,7 @@ The `v-skeleton-loader` component provides a user with a visual indicator that c
 | - | - |
 | [v-skeleton-loader](/api/v-skeleton-loader/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -71,7 +71,7 @@ The `v-skeleton-loader` component has a small API mainly used to configure the r
 
 The **type** property is used to define the type of skeleton loader. Types can be combined to create more complex skeletons. For example, the **card** type is a combination of the **image** and **heading** types.
 
-<example file="v-skeleton-loader/prop-type" />
+<ExamplesExample file="v-skeleton-loader/prop-type" />
 
 The following built-in types are available:
 
@@ -118,19 +118,19 @@ A skeleton loader is considered to be in a loading state if one of the following
 
 If either condition is met, the skeleton loader returns the type structure in place of the default slot and applies dimensions values; e.g. **height**, **width**, **min-height**, etc. If the condition is not met, the default slot is returned.
 
-<example file="v-skeleton-loader/prop-loading" />
+<ExamplesExample file="v-skeleton-loader/prop-loading" />
 
 #### Elevation
 
 The **elevation** property makes it easy to match the elevation of the skeleton loader to the content it is replacing.
 
-<example file="v-skeleton-loader/prop-elevation" />
+<ExamplesExample file="v-skeleton-loader/prop-elevation" />
 
 #### Boilerplate
 
 The `v-skeleton-loader` can be used as boilerplate designs when creating mockups. Mix and match various pre-defined options or create your own unique implementations. In this example, we use a custom **data** property to apply the same props to multiple `v-skeleton-loader`'s at once.
 
-<example file="v-skeleton-loader/prop-boilerplate" />
+<ExamplesExample file="v-skeleton-loader/prop-boilerplate" />
 
 ## Examples
 
@@ -140,7 +140,7 @@ The following are a collection of examples that demonstrate more advanced and re
 
 The following example demonstrates how the `v-skeleton-loader` component can be used to create a placeholder loading state for when content is being fetched from a server or loaded asynchronously.
 
-<example file="v-skeleton-loader/misc-ice-cream" />
+<ExamplesExample file="v-skeleton-loader/misc-ice-cream" />
 
 ## SASS Variables
 
diff --git a/packages/docs/src/pages/en/components/slide-groups.md b/packages/docs/src/pages/en/components/slide-groups.md
index 1c1a32eee37..98c617828fe 100644
--- a/packages/docs/src/pages/en/components/slide-groups.md
+++ b/packages/docs/src/pages/en/components/slide-groups.md
@@ -18,15 +18,15 @@ features:
 
 The `v-slide-group` component is used to display pseudo paginated information. It uses [v-item-group](/components/item-groups) at its core and provides a baseline for components such as [v-tabs](/components/tabs) and [v-chip-group](/components/chip-groups).
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Similar to the [v-window](/components/windows) component, `v-slide-group` lets items to take up as much space as needed, allowing the user to move horizontally through the provided information.
 
-<example file="v-slide-group/usage" />
+<ExamplesExample file="v-slide-group/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Similar to the [v-window](/components/windows) component, `v-slide-group` lets i
 | [v-slide-group](/api/v-slide-group/) | Primary Component |
 | [v-slide-group-item](/api/v-slide-group-item/) | Sub-component used for modifying the `v-slide-group` state |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,31 +45,31 @@ Similar to the [v-window](/components/windows) component, `v-slide-group` lets i
 
 **active-class** prop allows you to pass a class to customize the active items.
 
-<example file="v-slide-group/prop-active-class" />
+<ExamplesExample file="v-slide-group/prop-active-class" />
 
 #### Center active
 
 Using the **center-active** prop will make the active item always centered.
 
-<example file="v-slide-group/prop-center-active" />
+<ExamplesExample file="v-slide-group/prop-center-active" />
 
 #### Custom icons
 
 You can add your custom pagination icons instead of arrows using the **next-icon** and **prev-icon** props.
 
-<example file="v-slide-group/prop-custom-icons" />
+<ExamplesExample file="v-slide-group/prop-custom-icons" />
 
 ### Mandatory
 
 the **mandatory** prop will make the slide group require at least 1 item must be selected.
 
-<example file="v-slide-group/prop-mandatory" />
+<ExamplesExample file="v-slide-group/prop-mandatory" />
 
 #### Multiple
 
 You can select multiple items by setting the **multiple** prop.
 
-<example file="v-slide-group/prop-multiple" />
+<ExamplesExample file="v-slide-group/prop-multiple" />
 
 ### Misc
 
@@ -77,4 +77,4 @@ You can select multiple items by setting the **multiple** prop.
 
 Customize the slide group to creatively display information on sheets. Using the selection, we can display auxillary information easily for the user.
 
-<example file="v-slide-group/misc-pseudo-carousel" />
+<ExamplesExample file="v-slide-group/misc-pseudo-carousel" />
diff --git a/packages/docs/src/pages/en/components/sliders.md b/packages/docs/src/pages/en/components/sliders.md
index 3501a7eeed7..730ff61dc20 100644
--- a/packages/docs/src/pages/en/components/sliders.md
+++ b/packages/docs/src/pages/en/components/sliders.md
@@ -19,15 +19,15 @@ features:
 
 The `v-slider` component can be used as an alternative visualization instead of a number input.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Sliders reflect a range of values along a track, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
 
-<usage name="v-slider" />
+<ExamplesUsage name="v-slider" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Sliders reflect a range of values along a track, from which users may select a s
 | - | - |
 | [v-slider](/api/v-slider/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,61 +45,61 @@ Sliders reflect a range of values along a track, from which users may select a s
 
 You can set the colors of the slider using the props **color**, **track-color** and **thumb-color**.
 
-<example file="v-slider/prop-colors" />
+<ExamplesExample file="v-slider/prop-colors" />
 
 #### Disabled
 
 You cannot interact with **disabled** sliders.
 
-<example file="v-slider/prop-disabled" />
+<ExamplesExample file="v-slider/prop-disabled" />
 
 #### Step
 
 Using the **step** prop you can control the precision of the slider, and how much it should move each step.
 
-<example file="v-slider/prop-step" />
+<ExamplesExample file="v-slider/prop-step" />
 
 #### Icons
 
 You can add icons to the slider with the **append-icon** and **prepend-icon** props. With `@click:append` and `@click:prepend` you can trigger a callback function when click the icon.
 
-<example file="v-slider/prop-icons" />
+<ExamplesExample file="v-slider/prop-icons" />
 
 #### Min and max
 
 You can set **min** and **max** values of sliders.
 
-<example file="v-slider/prop-min-and-max" />
+<ExamplesExample file="v-slider/prop-min-and-max" />
 
 #### Readonly
 
 You cannot interact with **readonly** sliders, but they look as ordinary ones.
 
-<example file="v-slider/prop-readonly" />
+<ExamplesExample file="v-slider/prop-readonly" />
 
 #### Thumb
 
 You can display a thumb label while sliding or always with the **thumb-label** prop . It can have a custom color by setting **thumb-color** prop and a custom size with the **thumb-size** prop.
 
-<example file="v-slider/prop-thumb" />
+<ExamplesExample file="v-slider/prop-thumb" />
 
 #### Ticks
 
 Tick marks represent predetermined values to which the user can move the slider.
 
-<example file="v-slider/prop-ticks" />
+<ExamplesExample file="v-slider/prop-ticks" />
 
 <!-- #### Validation
 
 Vuetify includes simple validation through the **rules** prop. The prop accepts a mixed array of types `function`, `boolean` and `string`. When the input value changes, each element in the array will be validated. Functions pass the current v-model as an argument and must return either `true` / `false` or a `string` containing an error message.
 
-<example file="v-slider/prop-validation" /> -->
+<ExamplesExample file="v-slider/prop-validation" /> -->
 
 #### Vertical sliders
 
 You can use the **direction** prop to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.
 
-<example file="v-slider/prop-vertical" />
+<ExamplesExample file="v-slider/prop-vertical" />
 
 ### Slots
 
@@ -107,10 +107,10 @@ You can use the **direction** prop to switch sliders to a vertical orientation.
 
 Use slots such as `append` and `prepend` to easily customize the `v-slider` to fit any situation.
 
-<example file="v-slider/slot-append-and-prepend" />
+<ExamplesExample file="v-slider/slot-append-and-prepend" />
 
 #### Append text field
 
 Sliders can be combined with other components in its `append` slot, such as `v-text-field`, to add additional functionality to the component.
 
-<example file="v-slider/slot-append-text-field" />
+<ExamplesExample file="v-slider/slot-append-text-field" />
diff --git a/packages/docs/src/pages/en/components/snackbars.md b/packages/docs/src/pages/en/components/snackbars.md
index 3026ef8b3d0..94bddaf120b 100644
--- a/packages/docs/src/pages/en/components/snackbars.md
+++ b/packages/docs/src/pages/en/components/snackbars.md
@@ -19,15 +19,15 @@ features:
 
 The `v-snackbar` component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 a `v-snackbar` in its simplest form displays a temporary and closable notification to the user.
 
-<example file="v-snackbar/usage" />
+<ExamplesExample file="v-snackbar/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -36,7 +36,7 @@ a `v-snackbar` in its simplest form displays a temporary and closable notificati
 | [v-snackbar](/api/v-snackbar/) | Primary Component |
 | [v-btn](/api/v-btn/) | Sub-component typically used for actions |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -46,22 +46,22 @@ a `v-snackbar` in its simplest form displays a temporary and closable notificati
 
 The **multi-line** property extends the height of the `v-snackbar` to give you a little more room for content.
 
-<example file="v-snackbar/prop-multi-line" />
+<ExamplesExample file="v-snackbar/prop-multi-line" />
 
 #### Timeout
 
 The **timeout** property lets you customize the delay before the `v-snackbar` is hidden.
 
-<example file="v-snackbar/prop-timeout" />
+<ExamplesExample file="v-snackbar/prop-timeout" />
 
 #### Variants
 
 Apply different styles to the snackbar using props such as **text**, **shaped**, **outlined**, and more.
 
-<example file="v-snackbar/prop-variants" />
+<ExamplesExample file="v-snackbar/prop-variants" />
 
 #### Vertical
 
 The **vertical** property allows you to stack the content of your `v-snackbar`.
 
-<example file="v-snackbar/prop-vertical" />
+<ExamplesExample file="v-snackbar/prop-vertical" />
diff --git a/packages/docs/src/pages/en/components/sparklines.md b/packages/docs/src/pages/en/components/sparklines.md
index bb767e90beb..36f5dedf608 100644
--- a/packages/docs/src/pages/en/components/sparklines.md
+++ b/packages/docs/src/pages/en/components/sparklines.md
@@ -1,7 +1,7 @@
 ---
-disabled: true
+emphasized: true
 meta:
-  title: Sparkline component
+  title: Sparklines
   description: The sparkline component creates beautiful and expressive simple graphs for displaying numerical data.
   keywords: sparklines, vuetify sparkline component, vue sparkline component, sparkline, graph, chart, line
 related:
@@ -14,19 +14,41 @@ related:
 
 The sparkline component can be used to create simple graphs, like GitHub's contribution chart.
 
-Any [SVG attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) may be used in addition to the ones listed below.
+<PromotedEntry />
 
-<entry />
+::: warning
+
+This feature requires [v3.5.5](/getting-started/release-notes/?version=v3.5.5)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VSparkline } from 'vuetify/labs/VSparkline'
+
+export default createVuetify({
+  components: {
+    VSparkline,
+  },
+})
+```
 
 ## Usage
 
 A sparkline is a tiny chart that provides a visual representation of data. The sparkline component comes in 2 variations, **trend** (default) and **bar**. Each supports a multitude of options for customizing the look and feel of the sparkline.
 
-<example file="v-sparkline/usage" />
+<ExamplesExample file="v-sparkline/usage" />
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-sparkline](/api/v-sparkline/) | Primary Component |
+
+<ApiInline hide-links />
 
 ## Examples
 
@@ -36,7 +58,7 @@ A sparkline is a tiny chart that provides a visual representation of data. The s
 
 You can create a `v-sparkline` with fill using the `fill` property.
 
-<example file="v-sparkline/prop-fill" />
+<ExamplesExample file="v-sparkline/prop-fill" />
 
 ### Misc
 
@@ -44,16 +66,16 @@ You can create a `v-sparkline` with fill using the `fill` property.
 
 By providing a **label** slot, we are able to modify the displayed content by adding a dollar sign ($). This slot is **_exclusively_** for text content. For more information on the svg `<text>` element, [navigate here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text).
 
-<example file="v-sparkline/misc-custom-labels" />
+<ExamplesExample file="v-sparkline/misc-custom-labels" />
 
 #### Dashboard card
 
 The `v-sparkline` component pairs nicely with `v-card` and `v-sheet` to create customized information cards, perfect for admin dashboards. Here we use custom labels to provide additional context for the sparkline.
 
-<example file="v-sparkline/misc-dashboard-card" />
+<ExamplesExample file="v-sparkline/misc-dashboard-card" />
 
 #### Heart rate
 
 For concise information, a complete chart might be overkill. Using a trend line with gradient provides enough detail for the user without showing too much information.
 
-<example file="v-sparkline/misc-heart-rate" />
+<ExamplesExample file="v-sparkline/misc-heart-rate" />
diff --git a/packages/docs/src/pages/en/components/speed-dials.md b/packages/docs/src/pages/en/components/speed-dials.md
new file mode 100644
index 00000000000..c9dcb407ba4
--- /dev/null
+++ b/packages/docs/src/pages/en/components/speed-dials.md
@@ -0,0 +1,60 @@
+---
+emphasized: true
+meta:
+  nav: Speed Dials
+  title: Speed Dial component
+  description: The speed dial component is a floating action button that can reveal additional actions when clicked.
+  keywords: speed dial, fab, vuetify speed dial component, vue speed dial component
+related:
+  - /components/buttons/
+  - /components/icons/
+  - /styles/transitions/
+features:
+  report: true
+---
+
+# Speed Dials
+
+The `v-speed-dial` component can be used as a floating action button that can reveal additional actions when clicked.
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.8](/getting-started/release-notes/?version=v3.5.8)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VSpeedDial } from 'vuetify/labs/VSpeedDial'
+
+export default createVuetify({
+  components: {
+    VSpeedDial,
+  },
+})
+```
+
+## Usage
+
+Speed dials can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the `small` variant can be used to maintain continuity with similar sized elements.
+
+<ExamplesUsage name="v-speed-dial" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-speed-dial](/api/v-speed-dial/) | Primary Component |
+
+<ApiInline hide-links />
+
+### Guide
+
+Coming soon.
diff --git a/packages/docs/src/pages/en/components/steppers.md b/packages/docs/src/pages/en/components/steppers.md
index 2745134a404..8c567dd420a 100644
--- a/packages/docs/src/pages/en/components/steppers.md
+++ b/packages/docs/src/pages/en/components/steppers.md
@@ -22,7 +22,7 @@ The `v-stepper` component displays progress through numbered steps.
 
 ![Stepper Entry](https://cdn.vuetifyjs.com/docs/images/components/v-stepper/v-stepper-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -32,9 +32,9 @@ This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-no
 
 A stepper can be used for a multitude of scenarios, including shopping carts, record creation and more.
 
-<usage name="v-stepper" />
+<ExamplesUsage name="v-stepper" />
 
-<entry />
+<PromotedEntry />
 
 ::: warning
 
@@ -53,7 +53,7 @@ Due to the massive differences in display and functionality between horizontal a
 | [v-stepper-window](/api/v-stepper-window/) | Window container for stepper window items |
 | [v-stepper-window-item](/api/v-stepper-window-item/) | Items for stepper window |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -84,37 +84,37 @@ The `v-stepper` component has multiple props to customize its visual appearance
 
 A basic stepper has non-editable steps that force a user to move linearly through your process.
 
-<example file="v-stepper/misc-non-editable" />
+<ExamplesExample file="v-stepper/misc-non-editable" />
 
 #### Editable steps
 
 An editable step can be selected by a user at any point and will navigate them to that step.
 
-<example file="v-stepper/misc-editable" />
+<ExamplesExample file="v-stepper/misc-editable" />
 
 #### Alternate label
 
 Steppers also have an alternative label style which places the title under the step itself.
 
-<example file="v-stepper/prop-alternate-label" />
+<ExamplesExample file="v-stepper/prop-alternate-label" />
 
 #### Linear steppers
 
 Linear steppers will always move a user through your defined path.
 
-<example file="v-stepper/misc-linear" />
+<ExamplesExample file="v-stepper/misc-linear" />
 
 #### Optional steps
 
 An optional step can be called out with sub-text.
 
-<example file="v-stepper/misc-optional" />
+<ExamplesExample file="v-stepper/misc-optional" />
 
 #### Items
 
 The stepper component accepts an array of items similar to other components such as [v-list](/components/lists/) and [v-select](/components/selects/).
 
-<example file="v-stepper/misc-horizontal" />
+<ExamplesExample file="v-stepper/misc-horizontal" />
 
 ::: warning
 
@@ -126,28 +126,28 @@ If no value is provided, the stepper will assign a value based off of its index
 
 Use the **mobile** prop to hide the title and subtitle of the `v-stepper-item` component.
 
-<example file="v-stepper/prop-mobile" />
+<ExamplesExample file="v-stepper/prop-mobile" />
 
 #### Errors
 
 An error state can be displayed to notify the user of some action that must be taken.
 
-<example file="v-stepper/misc-error" />
+<ExamplesExample file="v-stepper/misc-error" />
 
 #### Dynamic steps
 
 Steppers can have their steps dynamically added or removed. If a currently active step is removed, be sure to account for this by changing the applied model.
 
-<example file="v-stepper/misc-dynamic" />
+<ExamplesExample file="v-stepper/misc-dynamic" />
 
 #### Alternative label with errors
 
 The error state can also be applied to the alternative label style.
 
-<example file="v-stepper/misc-alternate-error" />
+<ExamplesExample file="v-stepper/misc-alternate-error" />
 
 #### Non linear
 
 Non-linear steppers allow the user to move through your process in whatever way they choose.
 
-<example file="v-stepper/prop-non-linear" />
+<ExamplesExample file="v-stepper/prop-non-linear" />
diff --git a/packages/docs/src/pages/en/components/switches.md b/packages/docs/src/pages/en/components/switches.md
index 809fc107892..dff5bc8b185 100644
--- a/packages/docs/src/pages/en/components/switches.md
+++ b/packages/docs/src/pages/en/components/switches.md
@@ -19,15 +19,15 @@ features:
 
 The `v-switch` component provides users the ability to choose between two distinct values. These are very similar to a toggle, or on/off switch, though aesthetically different than a checkbox.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 A `v-switch` in its simplest form provides a toggle between 2 values.
 
-<usage name="v-switch" />
+<ExamplesUsage name="v-switch" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ A `v-switch` in its simplest form provides a toggle between 2 values.
 | - | - |
 | [v-switch](/api/v-switch/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,37 +45,37 @@ A `v-switch` in its simplest form provides a toggle between 2 values.
 
 Switches can be colored by using any of the builtin colors and contextual names using the **color** prop.
 
-<example file="v-switch/prop-colors" />
+<ExamplesExample file="v-switch/prop-colors" />
 
 <!-- #### Flat
 
 You can make switch render without elevation of thumb using **flat** property.
 
-<example file="v-switch/prop-flat" /> -->
+<ExamplesExample file="v-switch/prop-flat" /> -->
 
 #### Inset
 
 You can make switch render in inset mode.
 
-<example file="v-switch/prop-inset" />
+<ExamplesExample file="v-switch/prop-inset" />
 
 #### Model as array
 
 Multiple `v-switch`'s can share the same **v-model** by using an array.
 
-<example file="v-switch/prop-model-as-array" />
+<ExamplesExample file="v-switch/prop-model-as-array" />
 
 #### Custom true/false values
 
 The switch can use custom values for its v-model, using the props **true-value** and **false-value**.
 
-<example file="v-switch/prop-custom-values" />
+<ExamplesExample file="v-switch/prop-custom-values" />
 
 #### States
 
 `v-switch` can have different states such as **default**, **disabled**, and **loading**.
 
-<example file="v-switch/prop-states" />
+<ExamplesExample file="v-switch/prop-states" />
 
 ### Slots
 
@@ -83,4 +83,4 @@ The switch can use custom values for its v-model, using the props **true-value**
 
 If you need to render a switch label with more complex markup than plain text, you can use the **label** slot.
 
-<example file="v-switch/slot-label" />
+<ExamplesExample file="v-switch/slot-label" />
diff --git a/packages/docs/src/pages/en/components/system-bars.md b/packages/docs/src/pages/en/components/system-bars.md
index 9c2fc0c6c62..691e11a7c20 100644
--- a/packages/docs/src/pages/en/components/system-bars.md
+++ b/packages/docs/src/pages/en/components/system-bars.md
@@ -21,15 +21,15 @@ The `v-system-bar` component can be used for displaying statuses to the user. It
 
 ![System Bar Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-system-bar/v-system-bar-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 `v-system-bar` in its simplest form displays a small container with default theme.
 
-<usage name="v-system-bar" />
+<ExamplesUsage name="v-system-bar" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ The `v-system-bar` component can be used for displaying statuses to the user. It
 | - | - |
 | [v-system-bar](/api/v-system-bar/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -54,7 +54,7 @@ The recommended placement of elements inside of `v-system-bar` is:
 | 2. Icon items (optional) | Used to convey information through the use of icons |
 | 3. Text (optional) | Textual content that is typically used to show time |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -64,10 +64,10 @@ The recommended placement of elements inside of `v-system-bar` is:
 
 You can optionally change the color of the `v-system-bar` by using the `color` prop.
 
-<example file="v-system-bar/prop-color" />
+<ExamplesExample file="v-system-bar/prop-color" />
 
 #### Window
 
 A window bar with window controls and status info.
 
-<example file="v-system-bar/prop-window" />
+<ExamplesExample file="v-system-bar/prop-window" />
diff --git a/packages/docs/src/pages/en/components/tables.md b/packages/docs/src/pages/en/components/tables.md
index b0cafb1e474..b126d64c9f7 100644
--- a/packages/docs/src/pages/en/components/tables.md
+++ b/packages/docs/src/pages/en/components/tables.md
@@ -25,13 +25,13 @@ More advanced tables such as [v-data-table](/components/data-tables/basics/) are
 
 <!-- ![Table Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-table/v-table-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
-<example file="v-table/usage" />
+<ExamplesExample file="v-table/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -39,7 +39,7 @@ More advanced tables such as [v-data-table](/components/data-tables/basics/) are
 | - | - |
 | [v-table](/api/v-table/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -49,22 +49,22 @@ More advanced tables such as [v-data-table](/components/data-tables/basics/) are
 
 Use **theme** prop to switch table to another theme.
 
-<example file="v-table/prop-dark" />
+<ExamplesExample file="v-table/prop-dark" />
 
 #### Density
 
 You can show a dense version of the table by using the **density** prop.
 
-<example file="v-table/prop-dense" />
+<ExamplesExample file="v-table/prop-dense" />
 
 #### Height
 
 Use the **height** prop to set the height of the table.
 
-<example file="v-table/prop-height" />
+<ExamplesExample file="v-table/prop-height" />
 
 #### Fixed header
 
 Use the **fixed-header** prop together with the **height** prop to fix the header to the top of the table.
 
-<example file="v-table/prop-fixed-header" />
+<ExamplesExample file="v-table/prop-fixed-header" />
diff --git a/packages/docs/src/pages/en/components/tabs.md b/packages/docs/src/pages/en/components/tabs.md
index c7172dc66a9..f24ae4fcd10 100644
--- a/packages/docs/src/pages/en/components/tabs.md
+++ b/packages/docs/src/pages/en/components/tabs.md
@@ -20,15 +20,15 @@ features:
 
 The `v-tabs` component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 The `v-tabs` component is a styled extension of [v-slide-group](/components/slide-groups). It provides an easy to use interface for organizing content into separate sections.
 
-<example file="v-tabs/usage" />
+<ExamplesExample file="v-tabs/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ The `v-tabs` component is a styled extension of [v-slide-group](/components/slid
 | [v-tabs](/api/v-tabs/) | Primary Component |
 | [v-tab](/api/v-tab/) | Sub-component used for modifying the `v-tabs` state |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -47,57 +47,57 @@ The `v-tabs` component is a styled extension of [v-slide-group](/components/slid
 
 The **align-tabs** prop will align tabs to the `start`, `center`, or `end` of its container.
 
-<example file="v-tabs/prop-align-tabs-center" />
+<ExamplesExample file="v-tabs/prop-align-tabs-center" />
 
-<example file="v-tabs/prop-align-tabs-end" />
+<ExamplesExample file="v-tabs/prop-align-tabs-end" />
 
 #### Align tabs with title
 
 Make `v-tabs` line up with the `v-toolbar-title` component by setting the **align-tabs** prop to `title` (`v-app-bar-nav-icon` or `v-btn` must be used in `v-toolbar`).
 
-<example file="v-tabs/prop-align-tabs-title" />
+<ExamplesExample file="v-tabs/prop-align-tabs-title" />
 
 #### Center active
 
 The **center-active** prop will make the active tab always centered.
 
-<example file="v-tabs/prop-center-active" />
+<ExamplesExample file="v-tabs/prop-center-active" />
 
 #### Custom icons
 
 **prev-icon** and **next-icon** can be used for applying custom pagination icons.
 
-<example file="v-tabs/prop-icons" />
+<ExamplesExample file="v-tabs/prop-icons" />
 
 #### Fixed tabs
 
 The **fixed-tabs** prop forces `v-tab` items to take up all available space up to their maximum width (300px), and centers them.
 
-<example file="v-tabs/prop-fixed-tabs" />
+<ExamplesExample file="v-tabs/prop-fixed-tabs" />
 
 #### Grow
 
 The **grow** prop will make the tab items take up all available space with no limit.
 
-<example file="v-tabs/prop-grow" />
+<ExamplesExample file="v-tabs/prop-grow" />
 
 #### Stacked
 
 Using **stacked** increases the `v-tabs` height to 72px to allow for both icons and text to be displayed.
 
-<example file="v-tabs/prop-stacked" />
+<ExamplesExample file="v-tabs/prop-stacked" />
 
 #### Pagination
 
 If the tab items overflow their container, pagination controls will appear on desktop. For mobile devices, arrows will only display with the **show-arrows** prop.
 
-<example file="v-tabs/misc-pagination" />
+<ExamplesExample file="v-tabs/misc-pagination" />
 
 #### Vertical tabs
 
 The **direction** prop allows for `v-tab` components to stack vertically.
 
-<example file="v-tabs/prop-direction" />
+<ExamplesExample file="v-tabs/prop-direction" />
 
 ### Misc
 
@@ -105,22 +105,22 @@ The **direction** prop allows for `v-tab` components to stack vertically.
 
 It is common to put `v-tabs` inside the **extension** slot of `v-toolbar`.
 
-<example file="v-tabs/misc-content" />
+<ExamplesExample file="v-tabs/misc-content" />
 
 #### Mobile tabs
 
 On mobile you can use `v-tab` items with just icons to conserve space.
 
-<example file="v-tabs/misc-mobile" />
+<ExamplesExample file="v-tabs/misc-mobile" />
 
 #### Dynamic Tabs
 
 Tabs can be dynamically added and removed. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all `v-tab` items and the slider will disappear.
 
-<example file="v-tabs/misc-dynamic" />
+<ExamplesExample file="v-tabs/misc-dynamic" />
 
 #### Overflow to menu
 
 You can use a menu to hold additional tabs, swapping them out on the fly.
 
-<example file="v-tabs/misc-overflow-to-menu" />
+<ExamplesExample file="v-tabs/misc-overflow-to-menu" />
diff --git a/packages/docs/src/pages/en/components/text-fields.md b/packages/docs/src/pages/en/components/text-fields.md
index 9c8c2aa5dcf..fe7664eb3c9 100644
--- a/packages/docs/src/pages/en/components/text-fields.md
+++ b/packages/docs/src/pages/en/components/text-fields.md
@@ -21,15 +21,15 @@ Text field components are used for collecting user provided information.
 
 ![Text-field Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-text-field/v-text-field-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 A simple text field with placeholder and/or label.
 
-<usage name="v-text-field" />
+<ExamplesUsage name="v-text-field" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ A simple text field with placeholder and/or label.
 | - | - |
 | [v-text-field](/api/v-text-field/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -77,7 +77,7 @@ Using this baseline makes it easy to put together quick mock implementations of
 
 The following code snippet is an example of a simple form for for collecting a user's **First** name:
 
-<example file="v-text-field/prop-label" />
+<ExamplesExample file="v-text-field/prop-label" />
 
 #### Placeholders
 
@@ -95,7 +95,7 @@ In the following snippet, we improve the user experience of a `v-text-field` tha
 
 When the user focuses the input, the placeholder fades in as the label translates up. The added visual element improves the user experience when using multiple field inputs.
 
-<example file="v-text-field/prop-placeholder" />
+<ExamplesExample file="v-text-field/prop-placeholder" />
 
 ::: info
   Use the **persistent-placeholder** prop to force the **placeholder** to be visible, even when the input is not focused.
@@ -105,7 +105,7 @@ When the user focuses the input, the placeholder fades in as the label translate
 
 The **label** and **placeholder** props are useful for providing context to the input but are typically concise. For longer textual information, all Vuetify inputs contain a **details** section that is used to provide **hints**, regular **messages**, and **error-messages**. In the following example watch the custom hint message display when you focus the input:
 
-<example file="v-text-field/prop-messages" open />
+<ExamplesExample file="v-text-field/prop-messages" open />
 
 If you want to make the hint visible at all times, use the **persistent-hint** property. The following example demonstrates how to force a **hint** to show in the input's details:
 
@@ -128,7 +128,7 @@ In addition to **persistent-hint**, there are 3 other properties that support a
 
 The **clearable** prop appends an inner [v-icon](/components/icons/) that clears the `v-text-field` when clicked. When an input is cleared, it resets the current `v-text-field` value. The following example displays an interactive icon when the mouse hovers over the input:
 
-<example file="v-text-field/prop-clearable" open />
+<ExamplesExample file="v-text-field/prop-clearable" open />
 
 Note that **readonly** will not remove the clear icon, to prevent readonly inputs from being cleared you should also disable **clearable**.
 
@@ -158,13 +158,13 @@ You can see more supported events on the `v-text-field` [API page](/api/v-text-f
 
 When working with inputs you often need to validate the user's input in some manner; i.e. Email, Password. Use the **rules** property to invoke custom functions based upon the `v-text-field`'s state. It accepts an array of **functions** that return either `true` or a `string`. In the following example, enter a value into the field and then clear it:
 
-<example file="v-text-field/prop-rules" open />
+<ExamplesExample file="v-text-field/prop-rules" open />
 
 #### Forms
 
 Group multiple `v-text-field` components and other functionality within a `v-form` component; for a more detailed look at forms, please visit the [v-form](/components/forms/) page. Forms are useful for validating more than 1 input and make it easy to interact with the state of many fields at once. The following example combines multiple `v-text-field` components to create a login form:
 
-<example file="v-text-field/misc-guide" />
+<ExamplesExample file="v-text-field/misc-guide" />
 
 ### Examples
 
@@ -174,55 +174,55 @@ The following is a collection of `v-text-field` examples that demonstrate how di
 
 The **color** prop provides an easy way to change the color of textual content; label, prefix, suffix, etc. This color is applied as long as `v-text-field` is focused.
 
-<example file="v-text-field/prop-custom-colors" />
+<ExamplesExample file="v-text-field/prop-custom-colors" />
 
 #### Density
 
 The **density** prop decreases the height of the text field based upon 1 of 3 levels of density; **default**, **comfortable**, and **compact**.
 
-<example file="v-text-field/prop-dense" />
+<ExamplesExample file="v-text-field/prop-dense" />
 
 #### Disabled and readonly
 
 The state of a text field can be changed by providing the **disabled** or **readonly** props.
 
-<example file="v-text-field/prop-disabled-and-readonly" />
+<ExamplesExample file="v-text-field/prop-disabled-and-readonly" />
 
 #### Hide details
 
 When **hide-details** is set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.
 
-<example file="v-text-field/prop-hide-details" />
+<ExamplesExample file="v-text-field/prop-hide-details" />
 
 #### Hint
 
 The **hint** property on text fields adds the provided string beneath the text field. Using **persistent-hint** keeps the hint visible when the text field is not focused.
 
-<example file="v-text-field/prop-hint" />
+<ExamplesExample file="v-text-field/prop-hint" />
 
 #### Icons
 
 You can add icons to the text field with **prepend-icon**, **append-icon** and **append-inner-icon** props.
 
-<example file="v-text-field/prop-icon" />
+<ExamplesExample file="v-text-field/prop-icon" />
 
 #### Prefixes and suffixes
 
 The **prefix** and **suffix** properties allows you to prepend and append inline non-modifiable text next to the text field.
 
-<example file="v-text-field/prop-prefixes-and-suffixes" />
+<ExamplesExample file="v-text-field/prop-prefixes-and-suffixes" />
 
 #### Validation
 
 Vuetify includes simple validation through the **rules** prop. The prop accepts a mixed array of types `function`, `boolean` and `string`. When the input value changes, each element in the array will be validated. Functions pass the current v-model as an argument and must return either `true` / `false` or a `string` containing an error message.
 
-<example file="v-text-field/prop-validation" />
+<ExamplesExample file="v-text-field/prop-validation" />
 
 #### Variant
 
 The **variant** prop provides an easy way to customize the style of your text field. The following values are valid options: **solo**, **filled**, **outlined**, **plain**, and **underlined**.
 
-<example file="v-text-field/prop-variant" />
+<ExamplesExample file="v-text-field/prop-variant" />
 
 ### Events
 
@@ -230,7 +230,7 @@ The **variant** prop provides an easy way to customize the style of your text fi
 
 `click:prepend`, `click:append`, `click:append-inner`, and `click:clear` are emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.
 
-<example file="v-text-field/event-icons" />
+<ExamplesExample file="v-text-field/event-icons" />
 
 ### Slots
 
@@ -283,25 +283,25 @@ The following example uses the **label**, **prepend**, and **prepend-inner** slo
 </script>
 ```
 
-<promoted />
+<PromotedPromoted />
 
 #### Icon slots
 
 Instead of using `prepend`/`append`/`append-inner` icons you can use slots to extend input's functionality.
 
-<example file="v-text-field/slot-icons" />
+<ExamplesExample file="v-text-field/slot-icons" />
 
 #### Label
 
 Text field label can be defined in `label` slot - that will allow to use HTML content
 
-<example file="v-text-field/slot-label" />
+<ExamplesExample file="v-text-field/slot-label" />
 
 #### Progress
 
 You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the `progress` slot
 
-<example file="v-text-field/slot-progress" />
+<ExamplesExample file="v-text-field/slot-progress" />
 
 ### Misc
 
@@ -309,22 +309,22 @@ You can display a progress bar instead of the bottom line. You can use the defau
 
 While the built in `v-form` or 3rd party plugin such as [vuelidate](https://github.com/monterail/vuelidate) or [vee-validation](https://github.com/logaretm/vee-validate) can help streamline your validation process, you can choose to simply control it yourself.
 
-<example file="v-text-field/misc-custom-validation" />
+<ExamplesExample file="v-text-field/misc-custom-validation" />
 
 #### Full width with counter
 
 Full width text fields allow you to create boundless inputs. In this example, we use a `v-divider` to separate the fields.
 
-<example file="v-text-field/misc-full-width-with-counter" />
+<ExamplesExample file="v-text-field/misc-full-width-with-counter" />
 
 #### Password input
 
 Using the HTML input **type** [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) can be used with an appended icon and callback to control the visibility.
 
-<example file="v-text-field/misc-password" />
+<ExamplesExample file="v-text-field/misc-password" />
 
 #### Login Form
 
 In this example we use a combination of prepend and append icon to create a custom login form.
 
-<example file="v-text-field/misc-login-form" />
+<ExamplesExample file="v-text-field/misc-login-form" />
diff --git a/packages/docs/src/pages/en/components/textareas.md b/packages/docs/src/pages/en/components/textareas.md
index 3efec3a9a77..6bb77dfef47 100644
--- a/packages/docs/src/pages/en/components/textareas.md
+++ b/packages/docs/src/pages/en/components/textareas.md
@@ -19,15 +19,15 @@ features:
 
 Textarea components are used for collecting large amounts of textual data.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 `v-textarea` in its simplest form is a multi-line text-field, useful for larger amounts of text.
 
-<usage name="v-textarea" />
+<ExamplesUsage name="v-textarea" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Textarea components are used for collecting large amounts of textual data.
 | - | - |
 | [v-textarea](/api/v-textarea/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,49 +45,49 @@ Textarea components are used for collecting large amounts of textual data.
 
 When using the `auto-grow` prop, textarea's will automatically increase in size when the contained text exceeds its size.
 
-<example file="v-textarea/prop-auto-grow" />
+<ExamplesExample file="v-textarea/prop-auto-grow" />
 
 #### Background color
 
 The `background-color` and `color` props give you more control over styling `v-textarea`'s.
 
-<example file="v-textarea/prop-background-color" />
+<ExamplesExample file="v-textarea/prop-background-color" />
 
 #### Browser autocomplete
 
 The `autocomplete` prop gives you the option to enable the browser to predict user input.
 
-<example file="v-textarea/prop-browser-autocomplete" />
+<ExamplesExample file="v-textarea/prop-browser-autocomplete" />
 
 #### Clearable
 
 You can clear the text from a `v-textarea` by using the `clearable` prop, and customize the icon used with the `clearable-icon` prop.
 
-<example file="v-textarea/prop-clearable" />
+<ExamplesExample file="v-textarea/prop-clearable" />
 
 #### Counter
 
 The `counter` prop informs the user of a character limit for the `v-textarea`.
 
-<example file="v-textarea/prop-counter" />
+<ExamplesExample file="v-textarea/prop-counter" />
 
 #### Icons
 
 The `append-icon` and `prepend-icon` props help add context to `v-textarea`.
 
-<example file="v-textarea/prop-icons" />
+<ExamplesExample file="v-textarea/prop-icons" />
 
 #### No resize
 
 `v-textarea`'s have the option to remain the same size regardless of their content's size, using the `no-resize` prop.
 
-<example file="v-textarea/prop-no-resize" />
+<ExamplesExample file="v-textarea/prop-no-resize" />
 
 #### Rows
 
 The `rows` prop allows you to define how many rows the textarea has, when combined with the `row-height` prop you can further customize your rows by defining their height.
 
-<example file="v-textarea/prop-rows" />
+<ExamplesExample file="v-textarea/prop-rows" />
 
 ### Misc
 
@@ -95,4 +95,4 @@ The `rows` prop allows you to define how many rows the textarea has, when combin
 
 Utilizing alternative input styles, you can create amazing interfaces that are easy to build and easy to use.
 
-<example file="v-textarea/misc-signup-form" />
+<ExamplesExample file="v-textarea/misc-signup-form" />
diff --git a/packages/docs/src/pages/en/components/theme-providers.md b/packages/docs/src/pages/en/components/theme-providers.md
index d9f3fa8d137..5d8f5885eec 100644
--- a/packages/docs/src/pages/en/components/theme-providers.md
+++ b/packages/docs/src/pages/en/components/theme-providers.md
@@ -18,9 +18,9 @@ features:
 
 The theme provider allows you to style a section of your application in a different theme from the default
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -28,7 +28,7 @@ The theme provider allows you to style a section of your application in a differ
 | - | - |
 | [v-theme-provider](/api/v-theme-provider/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -36,4 +36,4 @@ The theme provider allows you to style a section of your application in a differ
 
 By default, `v-theme-provider` is a renderless component that allows you to change the applied theme for all of its children. When using the **with-background** prop, the `v-theme-provider` wraps its children in an element and applies the selected theme's background color to it.
 
-<example file="v-theme-provider/prop-with-background" />
+<ExamplesExample file="v-theme-provider/prop-with-background" />
diff --git a/packages/docs/src/pages/en/components/time-pickers.md b/packages/docs/src/pages/en/components/time-pickers.md
index c5d3f9e09e3..f7398217fdc 100644
--- a/packages/docs/src/pages/en/components/time-pickers.md
+++ b/packages/docs/src/pages/en/components/time-pickers.md
@@ -14,17 +14,17 @@ related:
 
 The `v-time-picker` is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting the time.
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 Time pickers have the light theme enabled by default.
 
-<usage name="v-time-picker" />
+<ExamplesUsage name="v-time-picker" />
 
 ## API
 
-<api-inline />
+<ApiInline />
 
 ## Examples
 
@@ -34,73 +34,73 @@ Time pickers have the light theme enabled by default.
 
 You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.
 
-<example file="v-time-picker/prop-allowed-times" />
+<ExamplesExample file="v-time-picker/prop-allowed-times" />
 
 #### AMPM in title
 
 You can move AM/PM switch to picker's title.
 
-<example file="v-time-picker/prop-ampm-in-title" />
+<ExamplesExample file="v-time-picker/prop-ampm-in-title" />
 
 #### Colors
 
 Time picker colors can be set using the `color` and `header-color` props. If `header-color` prop is not provided  header will use the `color` prop value."
 
-<example file="v-time-picker/prop-color" />
+<ExamplesExample file="v-time-picker/prop-color" />
 
 #### Disabled
 
 You can't interact with disabled picker.
 
-<example file="v-time-picker/prop-disabled" />
+<ExamplesExample file="v-time-picker/prop-disabled" />
 
 #### Elevation
 
 Emphasize the `v-time-picker` component by providing an **elevation** from 0 to 24. Elevation modifies the `box-shadow` css property.
 
-<example file="v-time-picker/prop-elevation" />
+<ExamplesExample file="v-time-picker/prop-elevation" />
 
 #### Format
 
 A time picker can be switched to 24hr format. Note that the `format` prop defines only the way the picker is displayed, picker's value (model) is always in 24hr format.
 
-<example file="v-time-picker/prop-format" />
+<ExamplesExample file="v-time-picker/prop-format" />
 
 #### No title
 
 You can remove picker's title.
 
-<example file="v-time-picker/prop-no-title" />
+<ExamplesExample file="v-time-picker/prop-no-title" />
 
 #### Range
 
 This is an example of joining pickers together using `min` and `max` prop.
 
-<example file="v-time-picker/prop-range" />
+<ExamplesExample file="v-time-picker/prop-range" />
 
 #### Read-only
 
 Read-only picker behaves same as disabled one, but looks like default one.
 
-<example file="v-time-picker/prop-readonly" />
+<ExamplesExample file="v-time-picker/prop-readonly" />
 
 #### Scrollable
 
 You can edit time picker's value using mouse wheel.
 
-<example file="v-time-picker/prop-scrollable" />
+<ExamplesExample file="v-time-picker/prop-scrollable" />
 
 #### Use seconds
 
 Time picker can have seconds input.
 
-<example file="v-time-picker/prop-use-seconds" />
+<ExamplesExample file="v-time-picker/prop-use-seconds" />
 
 #### Width
 
 You can specify the picker's width or make it full width.
 
-<example file="v-time-picker/prop-width" />
+<ExamplesExample file="v-time-picker/prop-width" />
 
 ### Misc
 
@@ -108,4 +108,4 @@ You can specify the picker's width or make it full width.
 
 Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.
 
-<example file="v-time-picker/misc-dialog-and-menu" />
+<ExamplesExample file="v-time-picker/misc-dialog-and-menu" />
diff --git a/packages/docs/src/pages/en/components/timelines.md b/packages/docs/src/pages/en/components/timelines.md
index cfb54242f44..0950fca8755 100644
--- a/packages/docs/src/pages/en/components/timelines.md
+++ b/packages/docs/src/pages/en/components/timelines.md
@@ -18,17 +18,17 @@ features:
 
 The `v-timeline` is useful for stylistically displaying chronological information.
 
-<page-features />
+<PageFeatures />
 
 <!--
 ## Usage
 
 `v-timeline`s in their simplest form display a vertical timeline that should contain at least one `v-timeline-item`.
 
-<example file="v-timeline/usage" />
+<ExamplesExample file="v-timeline/usage" />
 -->
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -37,7 +37,7 @@ The `v-timeline` is useful for stylistically displaying chronological informatio
 | [v-timeline](/api/v-timeline/) | Primary Component |
 | [v-timeline-item](/api/v-timeline-item/) | Sub-component used to display a single timeline item |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 <!-- ## Sub-components
 
@@ -53,55 +53,55 @@ v-timeline-item description -->
 
 Switch between a horizontal and vertical timeline in real-time using the **direction** prop.
 
-<example file="v-timeline/prop-direction" />
+<ExamplesExample file="v-timeline/prop-direction" />
 
 #### Side
 
 Use the **side** property to force all items to one side of the timeline.
 
-<example file="v-timeline/prop-single-side" />
+<ExamplesExample file="v-timeline/prop-single-side" />
 
 #### Alignment
 
 By default, `v-timeline-item` content is vertically aligned `center`. The **align** prop also supports `top` alignment.
 
-<example file="v-timeline/prop-align" />
+<ExamplesExample file="v-timeline/prop-align" />
 
 #### Dot color
 
 Colored dots create visual breakpoints that make your timelines easier for users to read.
 
-<example file="v-timeline/prop-color" />
+<ExamplesExample file="v-timeline/prop-color" />
 
 #### Icon dots
 
 Use icons within the `v-timeline-item` dot to provide additional context.
 
-<example file="v-timeline/prop-icon-dots" />
+<ExamplesExample file="v-timeline/prop-icon-dots" />
 
 <!-- #### Mirror
 
 You can mirror the placement of the timeline items by using the **mirror** prop.
 
-<example file="v-timeline/prop-mirror" /> -->
+<ExamplesExample file="v-timeline/prop-mirror" /> -->
 
 #### Size
 
 The **size** prop allows you to customize the size of each dot.
 
-<example file="v-timeline/prop-size" />
+<ExamplesExample file="v-timeline/prop-size" />
 
 #### Truncated line
 
 Truncate the start, end or both ends of the timeline center line by using the **truncate-line** prop.
 
-<example file="v-timeline/prop-truncate-line" />
+<ExamplesExample file="v-timeline/prop-truncate-line" />
 
 #### Line inset
 
 Modify the inset of dividing lines by specifying a custom amount using the **line-inset** prop.
 
-<example file="v-timeline/prop-line-inset" />
+<ExamplesExample file="v-timeline/prop-line-inset" />
 
 ### Slots
 
@@ -109,24 +109,24 @@ Modify the inset of dividing lines by specifying a custom amount using the **lin
 
 Insert avatars into dots with use of the `icon` slot and `v-avatar`.
 
-<example file="v-timeline/slot-icon" />
+<ExamplesExample file="v-timeline/slot-icon" />
 
 #### Opposite
 
 The **opposite** slot provides an additional layer of customization within your timelines.
 
-<example file="v-timeline/slot-opposite" />
+<ExamplesExample file="v-timeline/slot-opposite" />
 
 <!--
 #### Timeline item default
 
 If you place a `v-card` inside of a `v-timeline-item`, a caret will appear on the side of the card.
 
-<example file="v-timeline/slot-timeline-item-default" />
+<ExamplesExample file="v-timeline/slot-timeline-item-default" />
 -->
 
 ### Misc
 
 #### Advanced
 
-<example file="v-timeline/misc-advanced" />
+<ExamplesExample file="v-timeline/misc-advanced" />
diff --git a/packages/docs/src/pages/en/components/toolbars.md b/packages/docs/src/pages/en/components/toolbars.md
index 5fdd87cc214..f46bc45953e 100644
--- a/packages/docs/src/pages/en/components/toolbars.md
+++ b/packages/docs/src/pages/en/components/toolbars.md
@@ -21,15 +21,15 @@ The `v-toolbar` component is pivotal to any graphical user interface (GUI), as i
 
 <!-- ![Toolbar Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-toolbar/v-toolbar-entry.png) -->
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 A toolbar is a flexible container that can be used in a number of ways. By default, the toolbar is 64px high on desktop and 56px high on mobile. There are a number of helper components available to use with the toolbar. The `v-toolbar-title` is used for displaying a title and `v-toolbar-items` allow [v-btn](/components/buttons) to extend full height.
 
-<usage name="v-toolbar" />
+<ExamplesUsage name="v-toolbar" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -40,7 +40,7 @@ A toolbar is a flexible container that can be used in a number of ways. By defau
 | [v-toolbar-title](/api/v-toolbar-title/) | Sub-component used to display the title of the toolbar |
 | [v-btn](/api/v-btn/) | Sub-component commonly used in `v-toolbar` |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Caveats
 
@@ -56,49 +56,49 @@ A toolbar is a flexible container that can be used in a number of ways. By defau
 
 Toolbars can display a background as opposed to a solid color using the **src** prop. This can be modified further by using the **img** slot and providing your own [v-img](/components/images) component. Backgrounds can be faded using a [v-app-bar](/components/app-bars#prominent-w-scroll-shrink-and-image)
 
-<example file="v-toolbar/prop-background" />
+<ExamplesExample file="v-toolbar/prop-background" />
 
 #### Collapse
 
 Toolbars can be collapsed to save screen space.
 
-<example file="v-toolbar/prop-collapse" />
+<ExamplesExample file="v-toolbar/prop-collapse" />
 
 #### Dense toolbars
 
 Dense toolbars reduce their height to _48px_. When using in conjunction with the **prominent** prop, will reduce height to _96px_.
 
-<example file="v-toolbar/prop-dense" />
+<ExamplesExample file="v-toolbar/prop-dense" />
 
 #### Extended
 
 Toolbars can be extended without using the `extension` slot.
 
-<example file="v-toolbar/prop-extended" />
+<ExamplesExample file="v-toolbar/prop-extended" />
 
 ### Extension height
 
 The extension's height can be customized.
 
-<example file="v-toolbar/prop-extension-height" />
+<ExamplesExample file="v-toolbar/prop-extension-height" />
 
 #### Floating with search
 
 A floating toolbar is turned into an inline element that only takes up as much space as needed. This is particularly useful when placing toolbars over content.
 
-<example file="v-toolbar/prop-floating-with-search" />
+<ExamplesExample file="v-toolbar/prop-floating-with-search" />
 
 #### Light and Dark
 
 Toolbars come in **2** variants, light and dark. Light toolbars have dark tinted buttons and dark text whereas dark toolbars have white tinted buttons and white text.
 
-<example file="v-toolbar/prop-light-and-dark" />
+<ExamplesExample file="v-toolbar/prop-light-and-dark" />
 
 #### Prominent toolbars
 
 Prominent toolbars increase the `v-toolbar`'s height to _128px_ and positions the `v-toolbar-title` towards the bottom of the container. This is expanded upon in [v-app-bar](/components/app-bars#prominent-w-scroll-shrink) with the ability to shrink a **prominent** toolbar to a **dense** or **short** one.
 
-<example file="v-toolbar/prop-prominent" />
+<ExamplesExample file="v-toolbar/prop-prominent" />
 
 ### Misc
 
@@ -106,16 +106,16 @@ Prominent toolbars increase the `v-toolbar`'s height to _128px_ and positions th
 
 It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the `v-select`.
 
-<example file="v-toolbar/misc-contextual-action-bar" />
+<ExamplesExample file="v-toolbar/misc-contextual-action-bar" />
 
 #### Flexible and card toolbar
 
 In this example we offset our card onto the extended content area of a toolbar using the **extended** prop.
 
-<example file="v-toolbar/misc-flexible-and-card" />
+<ExamplesExample file="v-toolbar/misc-flexible-and-card" />
 
 #### Variations
 
 A `v-toolbar` has multiple variations that can be applied with themes and helper classes. These range from light and dark themes, colored and transparent.
 
-<example file="v-toolbar/misc-variations" />
+<ExamplesExample file="v-toolbar/misc-variations" />
diff --git a/packages/docs/src/pages/en/components/tooltips.md b/packages/docs/src/pages/en/components/tooltips.md
index db262c1d779..c14c74cac77 100644
--- a/packages/docs/src/pages/en/components/tooltips.md
+++ b/packages/docs/src/pages/en/components/tooltips.md
@@ -19,15 +19,15 @@ features:
 
 The `v-tooltip` component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a `v-model`. When activated, tooltips display a text label identifying an element, such as a description of its function.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Tooltips can wrap any element.
 
-<usage name="v-tooltip" />
+<ExamplesUsage name="v-tooltip" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Tooltips can wrap any element.
 | - | - |
 | [v-tooltip](/api/v-tooltip/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,18 +45,18 @@ Tooltips can wrap any element.
 
 Use the **location** prop to specify on which side of the element the tooltip should show. Read more about **location** [here](/components/overlays/#location).
 
-<example file="v-tooltip/prop-location" />
+<ExamplesExample file="v-tooltip/prop-location" />
 
 <!-- TODO: not supported
 #### Color
 
 Tooltip color can be set with the `color` prop.
 
-<example file="v-tooltip/prop-color" />
+<ExamplesExample file="v-tooltip/prop-color" />
 -->
 
 #### Visibility
 
 Tooltip visibility can be programmatically changed using `v-model`.
 
-<example file="v-tooltip/prop-visibility" />
+<ExamplesExample file="v-tooltip/prop-visibility" />
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
index e9a11c7aa9a..31bae035159 100644
--- a/packages/docs/src/pages/en/components/treeview.md
+++ b/packages/docs/src/pages/en/components/treeview.md
@@ -14,13 +14,13 @@ related:
 
 The `v-treeview` component is useful for displaying large amounts of nested data.
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 A basic example
 
-<example file="v-treeview/usage" />
+<ExamplesExample file="v-treeview/usage" />
 
 ## API
 
@@ -29,7 +29,7 @@ A basic example
 | [v-treeview](/api/v-treeview/) | Primary Component |
 | [v-treeview-node](/api/v-treeview-node/) | Sub-component used to display a single treeview node |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -39,73 +39,73 @@ A basic example
 
 Treeview nodes can be activated by clicking on them.
 
-<example file="v-treeview/prop-activatable" />
+<ExamplesExample file="v-treeview/prop-activatable" />
 
 #### Color
 
 You can control the text and background color of the active treeview node.
 
-<example file="v-treeview/prop-color" />
+<ExamplesExample file="v-treeview/prop-color" />
 
 #### Dense mode
 
 Dense mode provides more compact layout with decreased heights of the items.
 
-<example file="v-treeview/prop-dense" />
+<ExamplesExample file="v-treeview/prop-dense" />
 
 #### Hoverable
 
 Treeview nodes can have a hover effect.
 
-<example file="v-treeview/prop-hoverable" />
+<ExamplesExample file="v-treeview/prop-hoverable" />
 
 #### Item disabled
 
 Setting **item-disabled** prop allows to control which node's property disables the node when set to `true`.
 
-<example file="v-treeview/prop-item-disabled" />
+<ExamplesExample file="v-treeview/prop-item-disabled" />
 
 #### Load children
 
 You can dynamically load child data by supplying a _Promise_ callback to the **load-children** prop. This callback will be executed the first time a user tries to expand an item that has a children property that is an empty array.
 
-<example file="v-treeview/prop-load-children" />
+<ExamplesExample file="v-treeview/prop-load-children" />
 
 #### Open all
 
 Treeview nodes can be pre-opened on page load.
 
-<example file="v-treeview/prop-open-all" />
+<ExamplesExample file="v-treeview/prop-open-all" />
 
 #### Rounded
 
 You can make treeview nodes rounded.
 
-<example file="v-treeview/prop-rounded" />
+<ExamplesExample file="v-treeview/prop-rounded" />
 
 #### Selectable
 
 You can easily select treeview nodes and children.
 
-<example file="v-treeview/prop-selectable" />
+<ExamplesExample file="v-treeview/prop-selectable" />
 
 #### Selected color
 
 You can control the color of the selected node checkbox.
 
-<example file="v-treeview/prop-selected-color" />
+<ExamplesExample file="v-treeview/prop-selected-color" />
 
 #### Selection type
 
 Treeview now supports two different selection types. The default type is **'leaf'**, which will only include leaf nodes in the v-model array, but will render parent nodes as either partially or fully selected. The alternative mode is **'independent'**, which allows one to select parent nodes, but each node is independent of its parent and children.
 
-<example file="v-treeview/prop-selection-type" />
+<ExamplesExample file="v-treeview/prop-selection-type" />
 
 #### Shaped
 
 Shaped treeview's have rounded borders on one side of the nodes.
 
-<example file="v-treeview/prop-shaped" />
+<ExamplesExample file="v-treeview/prop-shaped" />
 
 ### Slots
 
@@ -113,7 +113,7 @@ Shaped treeview's have rounded borders on one side of the nodes.
 
 Using the the **label**, and an **append** slots we are able to create an intuitive file explorer.
 
-<example file="v-treeview/slot-append-and-label" />
+<ExamplesExample file="v-treeview/slot-append-and-label" />
 
 ### Misc
 
@@ -121,10 +121,10 @@ Using the the **label**, and an **append** slots we are able to create an intuit
 
 Easily filter your treeview by using the **search** prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the **filter** prop. This works similar to the [v-autocomplete](/components/autocompletes) component.
 
-<example file="v-treeview/misc-search-and-filter" />
+<ExamplesExample file="v-treeview/misc-search-and-filter" />
 
 #### Selectable icons
 
 Customize the **on**, **off** and **indeterminate** icons for your selectable tree. Combine with other advanced functionality like API loaded items.
 
-<example file="v-treeview/misc-selectable-icons" />
+<ExamplesExample file="v-treeview/misc-selectable-icons" />
diff --git a/packages/docs/src/pages/en/components/virtual-scroller.md b/packages/docs/src/pages/en/components/virtual-scroller.md
index 84d0faf6dd0..6f8cf908ef1 100644
--- a/packages/docs/src/pages/en/components/virtual-scroller.md
+++ b/packages/docs/src/pages/en/components/virtual-scroller.md
@@ -20,7 +20,7 @@ The `v-virtual-scroll` component displays a virtual, _infinite_ list. It support
 
 ![Virtual scroll Entry](https://cdn.vuetifyjs.com/docs/images/components/v-virtual-scroll/v-virtual-scroll-entry.png)
 
-<page-features />
+<PageFeatures />
 
 ::: success
 This feature was introduced in [v3.2.0 (Orion)](/getting-started/release-notes/?version=v3.2.0)
@@ -30,9 +30,9 @@ This feature was introduced in [v3.2.0 (Orion)](/getting-started/release-notes/?
 
 The virtual scroller displays just enough records to fill the viewport and uses the existing component, rehydrating it with new data.
 
-<usage name="v-virtual-scroll" />
+<ExamplesUsage name="v-virtual-scroll" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -40,7 +40,7 @@ The virtual scroller displays just enough records to fill the viewport and uses
 | - | - |
 | [v-virtual-scroll](/api/v-virtual-scroll/) | Primary Component |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Anatomy
 
@@ -66,21 +66,21 @@ The `v-virtual-scroll` component does not have any initial height set on itself.
 
 The following code snippet uses the **height** prop:
 
-<example file="v-virtual-scroll/prop-height" />
+<ExamplesExample file="v-virtual-scroll/prop-height" />
 
 Another way of making sure that the component has height is to place it inside an element with `display: flex`.
 
-<example file="v-virtual-scroll/prop-height-parent" />
+<ExamplesExample file="v-virtual-scroll/prop-height-parent" />
 
 #### Item Height
 
 For lists where the item height is static and uniform for all items, it's recommended that you define a specific **item-height**. This value is used for `v-virtual-scroll`'s calculations.
 
-<example file="v-virtual-scroll/prop-item-height" />
+<ExamplesExample file="v-virtual-scroll/prop-item-height" />
 
 If your items are not of a uniform size, omit the **item-height** prop to have `v-virtual-scroll` dynamically calculate each item.
 
-<example file="v-virtual-scroll/prop-dynamic-item-height" />
+<ExamplesExample file="v-virtual-scroll/prop-dynamic-item-height" />
 
 ### Examples
 
@@ -90,4 +90,4 @@ The following is a collection of `v-virtual-scroll` examples that demonstrate ho
 
 The v-virtual-scroll component can render an large amount of items by rendering only what it needs to fill the scroller’s viewport.
 
-<example file="v-virtual-scroll/misc-user-directory" />
+<ExamplesExample file="v-virtual-scroll/misc-user-directory" />
diff --git a/packages/docs/src/pages/en/components/windows.md b/packages/docs/src/pages/en/components/windows.md
index dc4b67368fe..09fee863c58 100644
--- a/packages/docs/src/pages/en/components/windows.md
+++ b/packages/docs/src/pages/en/components/windows.md
@@ -18,15 +18,15 @@ features:
 
 The `v-window` component provides the baseline functionality for transitioning content from one pane to another. Other components such as `v-tabs`, `v-carousel` and `v-stepper` utilize this component at their core.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Designed to easily cycle through content, `v-window` provides a simple interface to create custom implementations.
 
-<example file="v-window/usage" />
+<ExamplesExample file="v-window/usage" />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -35,7 +35,7 @@ Designed to easily cycle through content, `v-window` provides a simple interface
 | [v-window](/api/v-window/) | Primary Component |
 | [v-window-item](/api/v-window-item/) | Sub-component used to display a single window item |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -45,25 +45,25 @@ Designed to easily cycle through content, `v-window` provides a simple interface
 
 By default no arrows are displayed. You can change this by adding the **show-arrows** prop. If you set the prop value to `"hover"`, they will only show when you mouse over the window.
 
-<example file="v-window/prop-show-arrows" />
+<ExamplesExample file="v-window/prop-show-arrows" />
 
 #### Reverse
 
 The **reverse** prop will reverse the transitions
 
-<example file="v-window/prop-reverse" />
+<ExamplesExample file="v-window/prop-reverse" />
 
 #### Direction
 
 You can change the transition to vertical using the **direction** prop
 
-<example file="v-window/prop-direction" />
+<ExamplesExample file="v-window/prop-direction" />
 
 #### Customized arrows
 
 Arrows can be customized by using **prev** and **next** slots.
 
-<example file="v-window/slots-next-prev" />
+<ExamplesExample file="v-window/slots-next-prev" />
 
 ### Misc
 
@@ -71,10 +71,10 @@ Arrows can be customized by using **prev** and **next** slots.
 
 Create rich forms with smooth animations. `v-window` automatically tracks the current selection index to change the transition direction.
 
-<example file="v-window/misc-account-creation" />
+<ExamplesExample file="v-window/misc-account-creation" />
 
 #### Onboarding
 
 `v-window` makes it easy to create custom components such as a differently styled stepper.
 
-<example file="v-window/misc-onboarding" />
+<ExamplesExample file="v-window/misc-onboarding" />
diff --git a/packages/docs/src/pages/en/directives/click-outside.md b/packages/docs/src/pages/en/directives/click-outside.md
index 960f3655ffe..f425ae5bdc4 100644
--- a/packages/docs/src/pages/en/directives/click-outside.md
+++ b/packages/docs/src/pages/en/directives/click-outside.md
@@ -14,19 +14,19 @@ related:
 
 The `v-click-outside` directive calls a function when something outside of the target element is clicked on. This is used internally by components like `v-menu` and `v-dialog`.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 The `v-click-outside` directive allows you to provide a handler to be invoked when the user clicks outside of the target element.
 
-<example file="v-click-outside/usage" />
+<ExamplesExample file="v-click-outside/usage" />
 
 ## API
 
-<api-inline />
+<ApiInline />
 
 ## Examples
 
@@ -36,10 +36,10 @@ The `v-click-outside` directive allows you to provide a handler to be invoked wh
 
 Optionally provide a `closeConditional` handler that returns `true` or `false`. This function determines whether the outside click function is invoked or not.
 
-<example file="v-click-outside/option-close-on-outside-click" />
+<ExamplesExample file="v-click-outside/option-close-on-outside-click" />
 
 #### Include
 
 Optionally provide an `include` function in the `options` object that returns an array of `HTMLElement`s. This function determines which additional elements that the click must be outside of, for the handler to be called.
 
-<example file="v-click-outside/option-include" />
+<ExamplesExample file="v-click-outside/option-include" />
diff --git a/packages/docs/src/pages/en/directives/intersect.md b/packages/docs/src/pages/en/directives/intersect.md
index 1131a0c17dc..6139d0d8885 100644
--- a/packages/docs/src/pages/en/directives/intersect.md
+++ b/packages/docs/src/pages/en/directives/intersect.md
@@ -14,23 +14,23 @@ related:
 
 The `v-intersect` directive utilizes the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). It provides an easy-to-use interface for detecting when elements are visible within the user's viewport. This is also used for the [v-lazy](/components/lazy) component.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 Scroll the window and watch the colored dot. Notice as the [v-card](/components/cards) comes into view that it changes from error to success.
 
-<example file="v-intersect/usage" />
+<ExamplesExample file="v-intersect/usage" />
 
 ## API
 
-| Directive | Description |
-| - | - |
-| [v-intersect](/api/v-intersect/) | The intersection observer directive |
+| Directive                                  | Description                         |
+|--------------------------------------------|-------------------------------------|
+| [v-intersect](/api/v-intersect-directive/) | The intersection observer directive |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -40,4 +40,4 @@ Scroll the window and watch the colored dot. Notice as the [v-card](/components/
 
 The `v-intersect` directive accepts options. Available options can be found in the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Below is an example using the `threshold` option.
 
-<example file="v-intersect/prop-options" />
+<ExamplesExample file="v-intersect/prop-options" />
diff --git a/packages/docs/src/pages/en/directives/mutate.md b/packages/docs/src/pages/en/directives/mutate.md
index 803db607499..a0bc5e3edca 100644
--- a/packages/docs/src/pages/en/directives/mutate.md
+++ b/packages/docs/src/pages/en/directives/mutate.md
@@ -14,9 +14,9 @@ related:
 
 The `v-mutate` directive utilizes the [Mutation Observer API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). It provides an easy to use interface for detecting when elements are updated.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
@@ -147,14 +147,14 @@ Unlike the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/
 
 ## API
 
-| Directive | Description |
-| - | - |
-| [v-mutate](/api/v-mutate/) | The mutation observer directive |
+| Directive                            | Description                     |
+|--------------------------------------|---------------------------------|
+| [v-mutate](/api/v-mutate-directive/) | The mutation observer directive |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
-<example file="v-mutate/usage" />
+<ExamplesExample file="v-mutate/usage" />
 
-<example file="v-mutate/option-modifiers" />
+<ExamplesExample file="v-mutate/option-modifiers" />
diff --git a/packages/docs/src/pages/en/directives/resize.md b/packages/docs/src/pages/en/directives/resize.md
index 98a090ec809..dd98fc3be1b 100644
--- a/packages/docs/src/pages/en/directives/resize.md
+++ b/packages/docs/src/pages/en/directives/resize.md
@@ -14,20 +14,20 @@ related:
 
 The `v-resize` directive can be used for calling specific functions when the window resizes.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 Resize your window and observe the values change..
 
-<example file="v-resize/usage" />
+<ExamplesExample file="v-resize/usage" />
 
 ## API
 
-| Directive | Description |
-| - | - |
-| [v-resize](/api/v-resize/) | The resize directive |
+| Directive                            | Description          |
+|--------------------------------------|----------------------|
+| [v-resize](/api/v-resize-directive/) | The resize directive |
 
-<api-inline hide-links />
+<ApiInline hide-links />
diff --git a/packages/docs/src/pages/en/directives/ripple.md b/packages/docs/src/pages/en/directives/ripple.md
index 338a570d444..702a1f17132 100644
--- a/packages/docs/src/pages/en/directives/ripple.md
+++ b/packages/docs/src/pages/en/directives/ripple.md
@@ -14,23 +14,23 @@ related:
 
 The `v-ripple` directive is used to show action from a user. It can be applied to any block level element. Numerous components come with the ripple directive built in, such as the `v-btn`, `v-tabs-item` and many more.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 Basic ripple functionality can be enabled just by using `v-ripple` directive on a component or an HTML element
 
-<example file="v-ripple/usage" />
+<ExamplesExample file="v-ripple/usage" />
 
 ## API
 
-| Directive | Description |
-| - | - |
-| [v-ripple](/api/v-ripple/) | The ripple directive |
+| Directive                            | Description          |
+|--------------------------------------|----------------------|
+| [v-ripple](/api/v-ripple-directive/) | The ripple directive |
 
-<api-inline  hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -38,7 +38,7 @@ Basic ripple functionality can be enabled just by using `v-ripple` directive on
 
 If multiple elements have the ripple directive applied, only the inner one will show the effect. This can also be done without having a visible ripple by using `v-ripple.stop` to prevent ripples in the outer element if the inner element is clicked on. `v-ripple.stop` will not actually stop propagation of the mousedown/touchstart events unlike other workarounds.
 
-<example file="v-ripple/stop" />
+<ExamplesExample file="v-ripple/stop" />
 
 ### Options
 
@@ -46,7 +46,7 @@ If multiple elements have the ripple directive applied, only the inner one will
 
 When a `center` option is used ripple will always originate from the center of the target.
 
-<example file="v-ripple/option-center" />
+<ExamplesExample file="v-ripple/option-center" />
 
 ### Misc
 
@@ -54,10 +54,10 @@ When a `center` option is used ripple will always originate from the center of t
 
 Using a helper class, you can change the color of the ripple.
 
-<example file="v-ripple/misc-custom-color" />
+<ExamplesExample file="v-ripple/misc-custom-color" />
 
 #### Ripple in components
 
 Some components provide the `ripple` prop that allows you to control the ripple effect. You can turn it off or customize the behavior by using `class` or `center` options.
 
-<example file="v-ripple/misc-ripple-in-components" />
+<ExamplesExample file="v-ripple/misc-ripple-in-components" />
diff --git a/packages/docs/src/pages/en/directives/scroll.md b/packages/docs/src/pages/en/directives/scroll.md
index 04323df669f..6e30fb67cd0 100644
--- a/packages/docs/src/pages/en/directives/scroll.md
+++ b/packages/docs/src/pages/en/directives/scroll.md
@@ -14,23 +14,23 @@ related:
 
 The `v-scroll` directive allows you to provide callbacks when the window, specified target or element itself (with `.self` modifier) is scrolled.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 <!-- ## Usage
 
 The default behavior is to bind to the window. If no additional configuration options are needed, you can simply pass your callback function.
 
-<example file="v-scroll/usage" /> -->
+<ExamplesExample file="v-scroll/usage" /> -->
 
 ## API
 
-| Directive | Description |
-| - | - |
-| [v-scroll](/api/v-scroll/) | The scroll directive |
+| Directive                            | Description          |
+|--------------------------------------|----------------------|
+| [v-scroll](/api/v-scroll-directive/) | The scroll directive |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -40,10 +40,10 @@ The default behavior is to bind to the window. If no additional configuration op
 
 `v-scroll` targets the `window` by default but can also watch the element it's being bound to. In the following example we use the **self** modifier, `v-scroll.self`, to watch the [`v-card`](/components/cards) element specifically. This causes the method `onScroll` to invoke as you scroll the card contents; incrementing the counter.
 
-<example file="v-scroll/option-self" />
+<ExamplesExample file="v-scroll/option-self" />
 
 #### Target
 
 For a more fine tuned approach, you can designate the target to bind the scroll event listener.
 
-<example file="v-scroll/option-target" />
+<ExamplesExample file="v-scroll/option-target" />
diff --git a/packages/docs/src/pages/en/directives/touch.md b/packages/docs/src/pages/en/directives/touch.md
index 672e629075e..018dc96e2ac 100644
--- a/packages/docs/src/pages/en/directives/touch.md
+++ b/packages/docs/src/pages/en/directives/touch.md
@@ -14,20 +14,20 @@ related:
 
 The `v-touch` directive allows you to capture swipe gestures and apply directional callbacks.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 On a mobile device, try swiping in various directions.
 
-<example file="v-touch/usage" />
+<ExamplesExample file="v-touch/usage" />
 
 ## API
 
-| Directive | Description |
-| - | - |
-| [v-touch](/api/v-touch/) | The touch directive |
+| Directive                          | Description         |
+|------------------------------------|---------------------|
+| [v-touch](/api/v-touch-directive/) | The touch directive |
 
-<api-inline hide-links />
+<ApiInline hide-links />
diff --git a/packages/docs/src/pages/en/features/accessibility.md b/packages/docs/src/pages/en/features/accessibility.md
index 974ada3dc6e..662c7a01c3b 100644
--- a/packages/docs/src/pages/en/features/accessibility.md
+++ b/packages/docs/src/pages/en/features/accessibility.md
@@ -13,9 +13,9 @@ related:
 
 Web accessibility **(a11y for short)**, is the inclusive practice of ensuring there are no barriers that prevent the interaction with, or access to, websites on the World Wide Web by people with disabilities. Vuetify components are built to provide keyboard interactions for all mouse-based actions and utilize HTML5 semantic elements where applicable.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Activator slots
 
@@ -73,7 +73,7 @@ Beyond attributes, components such as `v-menu` also support interaction by press
 
 When inside of a `v-menu`, `v-list-item` will be automatically configured to have a role of **menuitem**. Navigate to the [Menu](/components/menus) for more information on the components features.
 
-<example file="accessibility/menu" inline />
+<ExamplesExample file="accessibility/menu" inline />
 
 ## Additional Resources
 
diff --git a/packages/docs/src/pages/en/features/aliasing.md b/packages/docs/src/pages/en/features/aliasing.md
index 0a17a5ced2d..01cf5abf6ba 100644
--- a/packages/docs/src/pages/en/features/aliasing.md
+++ b/packages/docs/src/pages/en/features/aliasing.md
@@ -13,9 +13,9 @@ related:
 
 Create virtual components that extend built-in Vuetify components using custom aliases.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
diff --git a/packages/docs/src/pages/en/features/application-layout.md b/packages/docs/src/pages/en/features/application-layout.md
index 1129aa3be5f..4bf81021444 100644
--- a/packages/docs/src/pages/en/features/application-layout.md
+++ b/packages/docs/src/pages/en/features/application-layout.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify features an application layout system that allows you to easily create complex website designs.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 The system is built around an outside-in principle, where each application layout component reserves space for itself in one of four directions (left, right, up, down), leaving the available free space for any subsequent layout component(s) to occupy.
 
@@ -39,21 +39,21 @@ The final part of the layout system is the **v-main** component. Inside this is
 
 By default, the order in which layout components will attempt to reserve space is simply the order that they appear in your markup. To illustrate this concept, see the following two examples where a single **v-app-bar** and **v-navigation-drawer** have changed places in the markup.
 
-<example file="application-layout/app-bar-first" />
+<ExamplesExample file="application-layout/app-bar-first" />
 
-<example file="application-layout/nav-drawer-first" />
+<ExamplesExample file="application-layout/nav-drawer-first" />
 
 As you can see, placing the **v-app-bar** before the **v-navigation-drawer** means that it will use the full width of the screen. When it it placed after the **v-navigation-drawer**, it will only use the free space left over.
 
 Some layout components accept a **location** prop with which you can place the component in the layout. In the example below, we use two **v-navigation-drawer** components, one on each side of the application.
 
-<example file="application-layout/location" />
+<ExamplesExample file="application-layout/location" />
 
 ## Complex layouts
 
 Let's create a more complex layout to show the flexibility of the system. In the following example we have re-created the general layout of the Discord application. This example also demonstrates that layout components accept either a **width** or **height** prop, and that multiple components of the same type can be stacked in the same position.
 
-<example file="application-layout/discord" />
+<ExamplesExample file="application-layout/discord" />
 
 ## Dynamic layouts and order
 
@@ -63,18 +63,18 @@ To solve this you can explicitly set the layout order by using the **order** pro
 
 All layout components have a default order of `0`. Layout components with the same order will be ordered as they appear in the markup.
 
-<example file="application-layout/dynamic" />
+<ExamplesExample file="application-layout/dynamic" />
 
 ## Accessing layout information
 
 The layout system exposes a function `getLayoutItem` that allows you to get size and position information about a specific layout component in your markup. To use it, you will need to add a **name** prop to the layout component, and give it a unique value. You can either access the method by using a ref on **v-app**, or by using the **useLayout** composable.
 
-<example file="application-layout/layout-information-ref" />
+<ExamplesExample file="application-layout/layout-information-ref" />
 
 ::: warning
   You will not be able to directly use the composable in the same component where you are rendering the **v-app** component. The call to **useLayout** must happen in a child component, so that the layout can be properly injected.
 :::
 
-<example file="application-layout/layout-information-composable" />
+<ExamplesExample file="application-layout/layout-information-composable" />
 
 The combined size of all layout components is also available under `layout.mainRect`. This is used internally by the **v-main** component to determine the size of the main content area.
diff --git a/packages/docs/src/pages/en/features/blueprints.md b/packages/docs/src/pages/en/features/blueprints.md
index 7226772011e..edddf1f8ab6 100644
--- a/packages/docs/src/pages/en/features/blueprints.md
+++ b/packages/docs/src/pages/en/features/blueprints.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify blueprints are a new way to pre-configure your entire application with a completely unique design system.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
@@ -52,7 +52,7 @@ import { md1 } from 'vuetify/blueprints'
 
 **Preview:**
 
-<example preview file="blueprints/md1" />
+<ExamplesExample preview file="blueprints/md1" />
 
 ### Material Design 2
 
@@ -64,7 +64,7 @@ import { md2 } from 'vuetify/blueprints'
 
 **Preview:**
 
-<example preview file="blueprints/md2" />
+<ExamplesExample preview file="blueprints/md2" />
 
 ### Material Design 3
 
@@ -76,4 +76,4 @@ import { md3 } from 'vuetify/blueprints'
 
 **Preview:**
 
-<example preview file="blueprints/md3" />
+<ExamplesExample preview file="blueprints/md3" />
diff --git a/packages/docs/src/pages/en/features/dates.md b/packages/docs/src/pages/en/features/dates.md
index 9cd0b489338..7bb2b43690f 100644
--- a/packages/docs/src/pages/en/features/dates.md
+++ b/packages/docs/src/pages/en/features/dates.md
@@ -17,9 +17,9 @@ features:
 
 Easily hook up date libraries that are used for components such as Date Picker and Calendar that require date functionality.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ::: success
 This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0)
@@ -95,7 +95,7 @@ The following example shows how to use the date composable to format a date stri
 | - | - |
 | [useDate](/api/use-date/) | The date composable is used by components that require date functionality |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ### Adapter
 
diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md
index 2cb53f570e0..c319b221a8e 100644
--- a/packages/docs/src/pages/en/features/display-and-platform.md
+++ b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -8,17 +8,14 @@ related:
   - /styles/display/
   - /styles/text-and-typography/
 ---
-<script setup>
-  import BreakpointsTable from '@/components/features/BreakpointsTable.vue'
-</script>
 
 # Display & Platform
 
 The display composable provides a multitude of information about the current device
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
@@ -53,7 +50,7 @@ If you are still using the Options API, you can access the display information o
 </script>
 ```
 
-<breakpoints-table />
+<FeaturesBreakpointsTable />
 
 ## API
 
diff --git a/packages/docs/src/pages/en/features/global-configuration.md b/packages/docs/src/pages/en/features/global-configuration.md
index d8aa227617f..b286dca6c8f 100644
--- a/packages/docs/src/pages/en/features/global-configuration.md
+++ b/packages/docs/src/pages/en/features/global-configuration.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify allows you to set default prop values globally or per component when setting up your application. Using this functionality you can for example disable **ripple** on all components, or set the default **elevation** for all sheets or buttons.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Setup
 
diff --git a/packages/docs/src/pages/en/features/icon-fonts.md b/packages/docs/src/pages/en/features/icon-fonts.md
index c3b27dbf1c6..8824912cfbb 100644
--- a/packages/docs/src/pages/en/features/icon-fonts.md
+++ b/packages/docs/src/pages/en/features/icon-fonts.md
@@ -9,20 +9,13 @@ related:
   - /components/avatars
 ---
 
-<script setup>
-  import { defineAsyncComponent } from 'vue'
-
-  const IconList = defineAsyncComponent(() => import('@/components/doc/IconList.vue'))
-  const IconTable = defineAsyncComponent(() => import('@/components/doc/IconTable.vue'))
-</script>
-
 # Icon Fonts
 
 Out of the box, Vuetify supports 4 popular icon font libraries—[Material Design Icons](https://materialdesignicons.com/), [Material Icons](https://fonts.google.com/icons), [Font Awesome 4](https://fontawesome.com/v4.7.0/) and [Font Awesome 5](https://fontawesome.com/).
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
@@ -203,7 +196,7 @@ export default createVuetify({
 
 Use this tool to search for any Material Design Icons and copy them to your clipboard by clicking the item.
 
-<icon-list />
+<DocIconList />
 
 ### Material Icons
 
@@ -446,7 +439,7 @@ app.mount('#app')
 
 The following icons are available as aliases for use in Vuetify components:
 
-<icon-table />
+<DocIconTable />
 
 ## Multiple icon sets
 
diff --git a/packages/docs/src/pages/en/features/internationalization.md b/packages/docs/src/pages/en/features/internationalization.md
index 8427afbc2b7..eabffa27ca9 100644
--- a/packages/docs/src/pages/en/features/internationalization.md
+++ b/packages/docs/src/pages/en/features/internationalization.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify supports language Internationalization (i18n) of its components.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 When bootstrapping your application you can specify available locales and the default locale with the **defaultLocale** option. The **locale** service also supports easy integration with [vue-i18n](https://kazupon.github.io/vue-i18n/). Using a locale that has an RTL (right-to-left) language also affects the directionality of the Vuetify components.
 
@@ -83,7 +83,7 @@ If you are still using the Options API, you can access the locale settings on `t
 | [useLocale](/api/use-locale/) | The locale composable is used
 | [v-locale-provider](/api/v-locale-provider/) | The locale provider component is used to scope a portion of your application to a different locale than the default one |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Scoped languages
 
diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md
index 203f63b0a7d..2589f3ceaed 100644
--- a/packages/docs/src/pages/en/features/sass-variables.md
+++ b/packages/docs/src/pages/en/features/sass-variables.md
@@ -9,17 +9,13 @@ related:
   - /features/treeshaking/
 ---
 
-<script setup>
-  import SassApi from '@/components/features/SassApi.vue'
-</script>
-
 # SASS variables
 
 Vuetify uses **SASS/SCSS** to craft the style and appearance of all aspects of the framework.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ::: info
 
@@ -80,7 +76,7 @@ Within your style file, import the Vuetify styles and specify the variables you
 
 ## Component specific variables
 
-Customising variables used in components is a bit more complex and requires the use of a special build plugin.
+Customizing variables used in components is a bit more complex and requires the use of a special build plugin.
 
 Follow the plugin setup guide from [treeshaking](/features/treeshaking/) then add `styles.configFile` to the plugin options:
 
@@ -110,7 +106,7 @@ You can keep `main.scss` for other style overrides but don't do both `@use 'vuet
 
 There are many SASS/SCSS variables that can be customized across the entire Vuetify framework. You can browse all the variables using the tool below:
 
-<sass-api />
+<FeaturesSassApi />
 
 Available SASS variables are located on each component's API page.
 
diff --git a/packages/docs/src/pages/en/features/scrolling.md b/packages/docs/src/pages/en/features/scrolling.md
index d95e5f0cb51..94debb882d1 100644
--- a/packages/docs/src/pages/en/features/scrolling.md
+++ b/packages/docs/src/pages/en/features/scrolling.md
@@ -18,9 +18,9 @@ features:
 
 Handle scrolling within your application by using the **goTo** function.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ::: success
 
@@ -32,7 +32,7 @@ This feature was introduced in [v3.5.0 (Polaris)](/getting-started/release-notes
 
 The **goTo** method takes two parameters **target** and **options**. **target** can be either a pixel offset from the top of the page, a valid css selector, or an element reference. **options** is an object that includes **duration**, **easing**, **container**, and **offset**.
 
-<example file="scroll/usage" />
+<ExamplesExample file="scroll/usage" />
 
 ## API
 
@@ -40,7 +40,7 @@ The **goTo** method takes two parameters **target** and **options**. **target**
 | - | - |
 | [useGoTo](/api/use-go-to/) | The useGoTo composable |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 <!--## Use with router
 
@@ -66,4 +66,5 @@ export default new Router({
     //
   ],
 })
-``` -->
+```
+-->
diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md
index bcec3b5d7f8..145916b3c78 100644
--- a/packages/docs/src/pages/en/features/theme.md
+++ b/packages/docs/src/pages/en/features/theme.md
@@ -13,9 +13,9 @@ related:
 
 Customize your application's default text colors, surfaces, and more. Easily modify your theme programmatically in real time. Vuetify comes with standard support for light and dark variants.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -24,7 +24,7 @@ Customize your application's default text colors, surfaces, and more. Easily mod
 | [useTheme](/api/use-theme/) | The theme composable allows you to get information about, and modify the current theme |
 | [v-theme-provider](/api/v-theme-provider/) | The theme provider component modifies the theme of all its children |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Setup
 
diff --git a/packages/docs/src/pages/en/features/treeshaking.md b/packages/docs/src/pages/en/features/treeshaking.md
index 4ba8dd02da6..77a6e18e9f7 100644
--- a/packages/docs/src/pages/en/features/treeshaking.md
+++ b/packages/docs/src/pages/en/features/treeshaking.md
@@ -13,9 +13,9 @@ related:
 
 Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small bundle size may be a requirement.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Automatic treeshaking
 
@@ -87,7 +87,7 @@ And that's it! Vuetify components and directives will be automatically imported
 - import * as directives from 'vuetify/directives'
 ```
 
-<promoted />
+<PromotedPromoted />
 
 ## Manual imports
 
diff --git a/packages/docs/src/pages/en/getting-started/browser-support.md b/packages/docs/src/pages/en/getting-started/browser-support.md
index ad1d808d7f3..8ae8f018390 100644
--- a/packages/docs/src/pages/en/getting-started/browser-support.md
+++ b/packages/docs/src/pages/en/getting-started/browser-support.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify 3 is a next generation framework that takes advantage of the latest web technology features and requires an evergreen browser to function.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Browsers
 
diff --git a/packages/docs/src/pages/en/getting-started/contributing.md b/packages/docs/src/pages/en/getting-started/contributing.md
index 3219de1efcb..079efaac434 100644
--- a/packages/docs/src/pages/en/getting-started/contributing.md
+++ b/packages/docs/src/pages/en/getting-started/contributing.md
@@ -13,13 +13,13 @@ related:
 
 Vuetify is made possible by an amazing community that submits issues, creates pull requests, and provides invaluable feedback.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 It is our job to enable you to create amazing applications. A lot of the time, you come across something that can be made better. Maybe you find a bug, or you have an idea for additional functionality. That's great! It's as easy as cloning the Vuetify repository to get started working in a development environment.
 
-<promoted slug="vuetify-discord" />
+<PromotedPromoted slug="vuetify-discord" />
 
 ## Reporting Issues
 
@@ -201,7 +201,7 @@ Some of the more notable links within these services include:
 
 The following sections are designed to familiarize you with our standard operating procedures for Vuetify development.
 
-<promoted slug="vue-jobs" />
+<PromotedPromoted slug="vue-jobs" />
 
 ### Issue triage
 
@@ -274,7 +274,7 @@ The following is a list of **commit types** used in the _angular_ preset:
 - **chore:** Other commits that don't modify src or test files.
 - **revert:** Commits that revert previous commits.
 
-<promoted slug="vuetify-reddit" />
+<PromotedPromoted slug="vuetify-reddit" />
 
 [community]: https://community.vuetifyjs.com/
 [core team]: /about/meet-the-team/
diff --git a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
index 3fe51d47dc6..fb8dc7a3702 100644
--- a/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
+++ b/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md
@@ -13,9 +13,9 @@ related:
 
 Stuck on a particular problem? Check some of these common gotchas before creating a ticket. If you still cannot find what you are looking for, you can submit an [issue](https://issues.vuetifyjs.com/) on GitHub or ask in our [community](https://community.vuetifyjs.com/).
 
-<page-features />
+<PageFeatures />
 
-<promoted slug="discord-subscriber-help" />
+<PromotedPromoted slug="discord-subscriber-help" />
 
 ## Questions
 
@@ -101,4 +101,4 @@ The following responses are a collection of common questions asked by the Vuetif
 
   No. If this changes in the future, we will update this FAQ and make a public notification.
 
-<promoted type="theme" />
+<PromotedPromoted type="theme" />
diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md
index cc5423501ca..782312315ae 100644
--- a/packages/docs/src/pages/en/getting-started/installation.md
+++ b/packages/docs/src/pages/en/getting-started/installation.md
@@ -18,9 +18,9 @@ related:
 
 Get started with Vuetify, the world’s most popular Vue.js framework for building feature rich, blazing fast applications.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Installation
 
@@ -376,4 +376,4 @@ The three development branches (`master`, `dev`, and `next`) are automatically p
 
 Have a question that belongs here? Tell us in our [Discord Community](https://community.vuetifyjs.com/) or create a request on our [Issue Generator](https://issues.vuetifyjs.com/).
 
-<promoted slug="vuetify-discord" />
+<PromotedPromoted slug="vuetify-discord" />
diff --git a/packages/docs/src/pages/en/getting-started/release-notes.md b/packages/docs/src/pages/en/getting-started/release-notes.md
index eaddc38acbb..ed0e5796e70 100644
--- a/packages/docs/src/pages/en/getting-started/release-notes.md
+++ b/packages/docs/src/pages/en/getting-started/release-notes.md
@@ -9,16 +9,13 @@ related:
   - /getting-started/contributing/
   - /introduction/roadmap/
 ---
-<script setup>
-  import Releases from '@/components/doc/Releases.vue'
-</script>
 
 # Release notes
 
 The Vuetify team performs releases on a weekly basis.
 
-<page-features />
+<PageFeatures />
 
-<releases />
+<DocReleases />
 
-<entry />
+<PromotedEntry />
diff --git a/packages/docs/src/pages/en/getting-started/unit-testing.md b/packages/docs/src/pages/en/getting-started/unit-testing.md
index 2eb68896a6d..8b261843f45 100644
--- a/packages/docs/src/pages/en/getting-started/unit-testing.md
+++ b/packages/docs/src/pages/en/getting-started/unit-testing.md
@@ -13,9 +13,9 @@ related:
 
 Add regression protection by adding unit tests to your Vuetify application
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
index eedd5a68da3..cf4cae76caa 100644
--- a/packages/docs/src/pages/en/getting-started/upgrade-guide.md
+++ b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -15,13 +15,13 @@ related:
 
 This page contains a detailed list of breaking changes and the steps required to upgrade your application to Vuetify 3.0
 
-<page-features />
+<PageFeatures />
 
 ::: error
   <span class="text-h6">Many of the changes on this page can be applied automatically using [eslint-plugin-vuetify](https://www.npmjs.com/package/eslint-plugin-vuetify/)</span>
 :::
 
-<entry />
+<PromotedEntry />
 
 ::: info
 
@@ -34,7 +34,6 @@ Before upgrading, make sure to consult the Official [Vue 3 Migration Guide](http
 
 - [calendar](https://github.com/vuetifyjs/vuetify/issues/13469)
 - [overflow-btn](https://github.com/vuetifyjs/vuetify/issues/13493)
-- [sparkline](https://github.com/vuetifyjs/vuetify/issues/13507)
 - [speed-dial](https://github.com/vuetifyjs/vuetify/issues/13508)
 - [time-picker](https://github.com/vuetifyjs/vuetify/issues/13516)
 - [treeview](https://github.com/vuetifyjs/vuetify/issues/13518)
@@ -288,6 +287,10 @@ app.use(vuetify)
 
 - `v-card` does not allow content to overflow or use higher `z-index` values to display on top of elements outside it. To disable this behavior, use `<v-card style="overflow: initial; z-index: initial">` ([#17593](https://github.com/vuetifyjs/vuetify/issues/17593), [#17628](https://github.com/vuetifyjs/vuetify/issues/17628))
 
+### v-sparkline
+
+- `value` is now `model-value`
+
 ## Directives
 
 ### v-intersect
diff --git a/packages/docs/src/pages/en/getting-started/wireframes.md b/packages/docs/src/pages/en/getting-started/wireframes.md
index a3f0dc08829..5400663dbaa 100644
--- a/packages/docs/src/pages/en/getting-started/wireframes.md
+++ b/packages/docs/src/pages/en/getting-started/wireframes.md
@@ -8,23 +8,20 @@ related:
   - /features/theme/
   - /features/blueprints/
 ---
-<script setup>
-  import WireframeExamples from '@/components/getting-started/WireframeExamples.vue'
-</script>
 
 # Wireframes
 
 The Vuetify **layout system** makes it easy to rapidly scaffold an application's UI regions with little effort.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Examples
 
 These templates are known as **wireframes** and are designed to provide a consistent approach to layouts, layering, and shadows. They are a starting point that is meant to be modified to meet the specific needs of your application.
 
-<wireframe-examples />
+<GettingStartedWireframeExamples />
 
 ::: info
   Additional information on how these templates are structured is located on the [Application page](/features/application-layout/).
diff --git a/packages/docs/src/pages/en/index.md b/packages/docs/src/pages/en/index.md
index 1c56ceb6d8a..e3397693484 100644
--- a/packages/docs/src/pages/en/index.md
+++ b/packages/docs/src/pages/en/index.md
@@ -5,25 +5,16 @@ meta:
   description: Vuetify is a no design skills required Open Source UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.
   keywords: vue, vue components, vue ui components, material design components, vuetify, component framework, component library
 ---
-<script setup>
-  import HomeActionBtns from '@/components/home/ActionBtns.vue'
-  import HomeEntry from '@/components/home/Entry.vue'
-  import HomeFeatures from '@/components/home/Features.vue'
-  import HomeSpecialSponsor from '@/components/home/SpecialSponsor.vue'
-  import HomeSponsors from '@/components/home/Sponsors.vue'
-  import MadeWithVuetify from '@/components/doc/MadeWithVuetify.vue'
-  import MadeWithVuetifyLink from '@/components/doc/MadeWithVuetifyLink.vue'
-</script>
 
-<home-entry />
+<HomeEntry />
 
 <br>
 
-<home-features />
+<HomeFeatures />
 
 <br>
 
-<home-special-sponsor />
+<HomeSpecialSponsor />
 
 <br>
 
@@ -31,7 +22,7 @@ meta:
 
 The continued development and maintenance of Vuetify is made possible by these generous sponsors:{style="max-width: 568px" .mx-auto .px-4}
 
-<home-sponsors />
+<HomeSponsors />
 
 <br>
 
@@ -43,9 +34,9 @@ The continued development and maintenance of Vuetify is made possible by these g
 
 Check out these beautiful apps, plugins, and themes built using Vuetify.{style="max-width: 568px" .mx-auto .px-4}
 
-<made-with-vuetify class="pa-3" />
+<DocMadeWithVuetifyGallery class="pa-3" />
 
-<made-with-vuetify-link />
+<DocMadeWithVuetifyLink />
 
 <br>
 <br>
diff --git a/packages/docs/src/pages/en/introduction/enterprise-support.md b/packages/docs/src/pages/en/introduction/enterprise-support.md
index 3b2ca331cb0..cdfa25e1f6e 100644
--- a/packages/docs/src/pages/en/introduction/enterprise-support.md
+++ b/packages/docs/src/pages/en/introduction/enterprise-support.md
@@ -11,22 +11,17 @@ related:
   - /about/meet-the-team/
 ---
 
-<script setup>
-  import DiscordDeck from '@/components/introduction/DiscordDeck.vue'
-  import EnterpriseDeck from '@/components/introduction/EnterpriseDeck.vue'
-</script>
-
 # Direct support from Vuetify
 
 Let the experts at Vuetify help you get the most out of your application with a customized support plan from the team behind the framework.
 
-<page-features />
+<PageFeatures />
 
 ## For Enterprise
 
 Vuetify offers a variety of support options to meet any need.
 
-<enterprise-deck />
+<IntroductionEnterpriseDeck />
 
 <br>
 
@@ -34,4 +29,4 @@ Vuetify offers a variety of support options to meet any need.
 
 Get direct access to the Vuetify team through our private [Discord server](https://community.vuetifyjs.com/). Ask questions, get help, and chat with the team.
 
-<discord-deck />
+<IntroductionDiscordDeck />
diff --git a/packages/docs/src/pages/en/introduction/long-term-support.md b/packages/docs/src/pages/en/introduction/long-term-support.md
index d6d912a1eaa..1409e7a974c 100644
--- a/packages/docs/src/pages/en/introduction/long-term-support.md
+++ b/packages/docs/src/pages/en/introduction/long-term-support.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify provides long-term support to the last major release for 18 months for critical bugs and security vulnerabilities.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 We understand that many projects that utilize Vuetify have development cycles that prevent upgrading to the latest version. In order to provide developers and businesses peace of mind when adopting Vuetify, we commit to at minimum of **18 months** for critical bugs and security vulnerabilities for the latest _minor_ of the last _major_ release.
 
diff --git a/packages/docs/src/pages/en/introduction/roadmap.md b/packages/docs/src/pages/en/introduction/roadmap.md
index 26b1404e2e7..b52d348dabe 100644
--- a/packages/docs/src/pages/en/introduction/roadmap.md
+++ b/packages/docs/src/pages/en/introduction/roadmap.md
@@ -14,9 +14,9 @@ related:
 
 Vuetify is always under development. We are constantly working towards improving the existing codebase, adding new features, and expanding the ecosystem with developer tooling that makes building applications even easier.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## 2024 Component Roadmap
 
@@ -31,7 +31,7 @@ The following is a list of all planned components for the year 2024.
 | v-speed-dial | February 2024 | April 2024 |
 | v-confirm-edit | *️⃣ | April 2024 |
 | [v3.7 (Odyssey)](https://github.com/vuetifyjs/vuetify/milestone/73) | | { .bg-surface-light } |
-| v-treeview | February 2024 | July 2024 |
+| v-treeview | March 2024 | July 2024 |
 | v-number-input | March 2024 | July 2024 |
 | v-stepper-vertical | March 2024 | July 2024 |
 | v-time-picker | March 2024 | July 2024 |
diff --git a/packages/docs/src/pages/en/introduction/sponsors-and-backers.md b/packages/docs/src/pages/en/introduction/sponsors-and-backers.md
index 0d04d53a3ce..6cf9f9ba795 100644
--- a/packages/docs/src/pages/en/introduction/sponsors-and-backers.md
+++ b/packages/docs/src/pages/en/introduction/sponsors-and-backers.md
@@ -14,9 +14,9 @@ related:
 
 Vuetify is an [MIT licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) open-source project that's completely free to use.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Preamble
 
@@ -41,7 +41,7 @@ We thank all of our project sponsors for their continued support of Vuetify. If
 
 Thank you to our special sponsor. Your support is greatly appreciated.
 
-<sponsors tier="-2" width="240" />
+<SponserSponsors tier="-2" width="240" />
 
 <br>
 
@@ -49,7 +49,7 @@ Thank you to our special sponsor. Your support is greatly appreciated.
 
 These sponsors have pledged $1,500 per month.
 
-<sponsors tier="1" />
+<SponserSponsors tier="1" />
 
 <br>
 
@@ -57,7 +57,7 @@ These sponsors have pledged $1,500 per month.
 
 These sponsors have pledged $500 per month.
 
-<sponsors tier="2" />
+<SponserSponsors tier="2" />
 
 <br>
 
@@ -65,7 +65,7 @@ These sponsors have pledged $500 per month.
 
 These sponsors have pledged $250 per month.
 
-<sponsors tier="3" />
+<SponserSponsors tier="3" />
 
 <br>
 
@@ -73,7 +73,7 @@ These sponsors have pledged $250 per month.
 
 These sponsors help keep the lights on by providing free services to the Vuetify project.
 
-<sponsors tier="6" />
+<SponserSponsors tier="6" />
 
 <br>
 
@@ -81,7 +81,7 @@ These sponsors help keep the lights on by providing free services to the Vuetify
 
 We work with these companies to provide you with the best possible experience.
 
-<sponsors tier="5" />
+<SponserSponsors tier="5" />
 
 <br>
 
diff --git a/packages/docs/src/pages/en/introduction/why-vuetify.md b/packages/docs/src/pages/en/introduction/why-vuetify.md
index 75ec54d7c79..3665bdb157b 100644
--- a/packages/docs/src/pages/en/introduction/why-vuetify.md
+++ b/packages/docs/src/pages/en/introduction/why-vuetify.md
@@ -14,9 +14,9 @@ related:
 
 Learn more about what Vuetify is, how to create an application from scratch, browse API references, sample code, tutorials, and more.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## What is Vuetify?
 
@@ -55,7 +55,7 @@ Vuetify has a large ecosystem of supporting tools that enrich the development ex
 
 When you develop with Vuetify, you are never alone. Stuck on a problem? Take advantage of our massive [Discord community](https://community.vuetifyjs.com/) and collaborate with other Vuetify developers in one of our public help channels. Need a more personalized support solution? Vuetify offers [Enterprise support](/introduction/enterprise-support/) with options tailored to individuals and businesses. Check out some other ways to [Sponsor Vuetify development](/introduction/sponsors-and-backers/).
 
-<promoted slug="vuetify-discord" />
+<PromotedPromoted slug="vuetify-discord" />
 
 ### Professional and Enterprise support
 
diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md
index 1f785a16ebe..7203d5d016b 100644
--- a/packages/docs/src/pages/en/labs/introduction.md
+++ b/packages/docs/src/pages/en/labs/introduction.md
@@ -14,7 +14,7 @@ related:
 
 Experiment and use in-development components before they're released.
 
-<page-features />
+<PageFeatures />
 
 ## What is Labs? { id=what-is-labs }
 
@@ -68,7 +68,7 @@ export default createVuetify({
 })
 ```
 
-<entry />
+<PromotedEntry />
 
 ## Available Components
 
@@ -76,15 +76,11 @@ The following is a list of available and up-and-coming components for use with L
 
 | Component | Description | Min Version |
 | - | - | - |
-
-### Up Next
-
-| Component | Release Target |
-| - | - |
-| v-calendar | ~~Q1~~ ~~Q2~~ Soon™️ 2023 |
-| v-fab | Q1 2024 |
-| v-split-btn | Q1 2024 |
-| v-speed-dial | Q1 2024 |
+| [v-calendar](/components/calendars/) | A calendar component | [v3.4.9](/getting-started/release-notes/?version=v3.4.9) |
+| [v-empty-state](/components/empty-states/) | A component for displaying empty states | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
+| [v-fab](/components/floating-action-buttons/) | A layout aware [v-btn](/components/buttons/) | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
+| [v-speed-dial](/components/speed-dials/) | A component for display actions | [v3.5.8](/getting-started/release-notes/?version=v3.5.8) |
+| [v-sparkline](/components/sparklines/) | A basic data display component | [v3.5.5](/getting-started/release-notes/?version=v3.5.5) |
 
 ::: warning
 Lab component APIs are **NOT** finalized and can and will change. You should **EXPECT** for things to break during the course of development.
diff --git a/packages/docs/src/pages/en/resources/brand-kit.md b/packages/docs/src/pages/en/resources/brand-kit.md
index 9cbc1af5fc9..73f48bc971e 100644
--- a/packages/docs/src/pages/en/resources/brand-kit.md
+++ b/packages/docs/src/pages/en/resources/brand-kit.md
@@ -11,30 +11,25 @@ related:
   - /about/meet-the-team/
 ---
 
-<script setup>
-  import ColorPalette from '@/components/resources/ColorPalette.vue'
-  import Logos from '@/components/resources/Logos.vue'
-</script>
-
 # Brand Kit
 
 Explore the Vuetify Brand Kit, your source for official logos and branding assets.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Vuetify Logo
 
 The Vuetify logo encapsulates the essence of modern web development, combining sleek design with Vue.js principles. Its symmetrical lines and bold color palette reflect the framework's commitment to efficiency, flexibility, and elegance, resonating with developers and designers alike.
 
-<logos />
+<ResourcesLogos />
 
 ## Color Palette
 
 The Vuetify logo color palette is comprised of 4 colors, each used for a different shape. The colors are designed to work together harmoniously, creating a unified and balanced look.
 
-<color-palette />
+<ResourcesColorPalette />
 
 <br>
 
diff --git a/packages/docs/src/pages/en/resources/jobs-for-vue.md b/packages/docs/src/pages/en/resources/jobs-for-vue.md
index 159023e37a4..d2304c7c1b4 100644
--- a/packages/docs/src/pages/en/resources/jobs-for-vue.md
+++ b/packages/docs/src/pages/en/resources/jobs-for-vue.md
@@ -10,16 +10,13 @@ related:
   - /introduction/enterprise-support/
   - /introduction/enterprise/
 ---
-<script setup>
-  import VueJobs from '@/components/doc/VueJobs.vue'
-</script>
 
 # Vue and Vuetify jobs
 
 Find top Vue.js developers, ready to join your team; or browse available openings and land your next job!
 
-<page-features />
+<PageFeatures />
 
-<promoted slug="enterprise-support" />
+<PromotedPromoted slug="enterprise-support" />
 
-<vue-jobs />
+<DocVueJobs />
diff --git a/packages/docs/src/pages/en/resources/made-with-vuetify.md b/packages/docs/src/pages/en/resources/made-with-vuetify.md
index 3f8d2952f01..d0b89338ad3 100644
--- a/packages/docs/src/pages/en/resources/made-with-vuetify.md
+++ b/packages/docs/src/pages/en/resources/made-with-vuetify.md
@@ -12,21 +12,16 @@ related:
   - /resources/ui-kits/
 ---
 
-<script setup>
-  import MadeWithVuetify from '@/components/doc/MadeWithVuetify.vue'
-  import MadeWithVueAttribution from '@/components/doc/MadeWithVueAttribution.vue'
-</script>
-
 # Made with Vuetify
 
 Check out these amazing projects built using Vuetify.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
-<made-with-vuetify pagination />
+<DocMadeWithVuetifyGallery pagination />
 
 <br />
 
-<made-with-vue-attribution />
+<DocMadeWithVueAttribution />
diff --git a/packages/docs/src/pages/en/resources/search-engine.md b/packages/docs/src/pages/en/resources/search-engine.md
index ec788174c87..46d8b50afed 100644
--- a/packages/docs/src/pages/en/resources/search-engine.md
+++ b/packages/docs/src/pages/en/resources/search-engine.md
@@ -12,9 +12,9 @@ related:
 
 Add Vuetify as a browser search engine for quick access to the documentation.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Setup
 
diff --git a/packages/docs/src/pages/en/resources/themes.md b/packages/docs/src/pages/en/resources/themes.md
index 1d333f21383..8aa2e42eaac 100644
--- a/packages/docs/src/pages/en/resources/themes.md
+++ b/packages/docs/src/pages/en/resources/themes.md
@@ -11,14 +11,8 @@ related:
 ---
 
 <script setup>
-  // Components
-  import ThemeVendor from '@/components/doc/ThemeVendor.vue'
-
-  // Utilities
   import { onMounted } from 'vue'
-
-  // Stores
-  import { useShopifyStore } from '@/store/shopify'
+  import { useShopifyStore } from '@/stores/shopify'
 
   const store = useShopifyStore()
 
@@ -31,7 +25,7 @@ related:
 
 Vuetify offers both **free** and **premium** pre-made themes designed to get you started in a flash. Free themes are available to install through Vue CLI or you can simply download the source.
 
-<page-features />
+<PageFeatures />
 
 ---
 
@@ -39,7 +33,7 @@ Vuetify offers both **free** and **premium** pre-made themes designed to get you
 
 The following themes are created and maintained by Vuetify. They are available for free through the Vuetify store.
 
-<ThemeVendor name="Vuetify" />
+<DocThemeVendor name="Vuetify" />
 
 ---
 
@@ -49,7 +43,7 @@ The following themes are created and maintained by Vuetify. They are available f
 
 UI Lib is a collection of free and premium themes built on top of Vuetify.
 
-<ThemeVendor name="UI Lib" />
+<DocThemeVendor name="UI Lib" />
 
 ---
 
@@ -59,7 +53,7 @@ UI Lib is a collection of free and premium themes built on top of Vuetify.
 
 Create web apps and products using WrapPixel's product ready Vue Admin Templates, UI Kits, Themes, Templates and Dashboards.
 
-<ThemeVendor name="WrapPixel" />
+<DocThemeVendor name="WrapPixel" />
 
 ---
 
@@ -69,7 +63,7 @@ Create web apps and products using WrapPixel's product ready Vue Admin Templates
 
 Theme Selection offers an array of visually appealing, user-friendly UI kits and themes. Catering to a variety of platforms, they deliver efficient design solutions for a streamlined digital experience.
 
-<ThemeVendor name="ThemeSelection" />
+<DocThemeVendor name="ThemeSelection" />
 
 <br>
 
@@ -77,7 +71,7 @@ Theme Selection offers an array of visually appealing, user-friendly UI kits and
 
 Craft powerful web applications and products effortlessly with CodedThemes. Explore our ready-to-use Vue Admin Templates, UI Kits, Themes, and Dashboards to streamline your development process and enhance your digital projects.
 
-<ThemeVendor name="CodedThemes" />
+<DocThemeVendor name="CodedThemes" />
 
 <br>
 
diff --git a/packages/docs/src/pages/en/resources/ui-kits.md b/packages/docs/src/pages/en/resources/ui-kits.md
index 55958618fd0..7b55fcdd2be 100644
--- a/packages/docs/src/pages/en/resources/ui-kits.md
+++ b/packages/docs/src/pages/en/resources/ui-kits.md
@@ -13,9 +13,9 @@ related:
 
 Easily create design prototypes with Figma components that match Vuetify's.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ----
 
diff --git a/packages/docs/src/pages/en/styles/border-radius.md b/packages/docs/src/pages/en/styles/border-radius.md
index 48260a1668a..2934de5aeeb 100644
--- a/packages/docs/src/pages/en/styles/border-radius.md
+++ b/packages/docs/src/pages/en/styles/border-radius.md
@@ -13,13 +13,13 @@ related:
 
 Use border utilities to quickly style the border-radius of any element.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
-<example file="border-radius/usage" />
+<ExamplesExample file="border-radius/usage" />
 
 ## Caveats
 
@@ -68,7 +68,7 @@ $rounded: (
 
 You can create pills with the `.rounded-pill` class and circles with the `.rounded-circle` class.
 
-<example file="border-radius/misc-pill-and-circle" />
+<ExamplesExample file="border-radius/misc-pill-and-circle" />
 
 #### Rounding by side
 
@@ -76,7 +76,7 @@ Border radius is configurable on a per-side basis using the infix classes `-t`,
 
 E.g. `.rounded-b-xl` and `.rounded-t`.
 
-<example file="border-radius/misc-rounding-by-side" />
+<ExamplesExample file="border-radius/misc-rounding-by-side" />
 
 #### Rounding by corner
 
@@ -84,10 +84,10 @@ Border radius is configurable on a per-corner basis using the infix classes, `-t
 
 E.g. `.rounded-be-xl` and `.rounded-te`.
 
-<example file="border-radius/misc-rounding-by-corner" />
+<ExamplesExample file="border-radius/misc-rounding-by-corner" />
 
 #### Removing Border Radius
 
 Use the `.rounded-0` helper class to remove all border radius on an element, or select by side or corner; e.g. `.rounded-s-0` and `.rounded-te-0`.
 
-<example file="border-radius/misc-removing-border-radius" />
+<ExamplesExample file="border-radius/misc-removing-border-radius" />
diff --git a/packages/docs/src/pages/en/styles/colors.md b/packages/docs/src/pages/en/styles/colors.md
index 86d3828dbe1..49111a72823 100644
--- a/packages/docs/src/pages/en/styles/colors.md
+++ b/packages/docs/src/pages/en/styles/colors.md
@@ -13,19 +13,19 @@ related:
 
 Out of the box you get access to all colors in the [Material Design specification](https://material.io/design/color/the-color-system.html) through **sass** and **javascript**. These values can be used within your style sheets, your component files and on actual components via the **color** prop.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Classes
 
 Each color from the specification gets converted to a **background** and **text** variant for styling within your application through a class, e.g. `<div class="bg-red">` or `<span class="text-red">`. These class colors are defined [here](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_colors.scss).
 
-<example file="color/classes" />
+<ExamplesExample file="color/classes" />
 
 Text colors also support **darken** and **lighten** variants using `text-{color}-{lighten|darken}-{n}`
 
-<example file="color/text-classes" />
+<ExamplesExample file="color/text-classes" />
 
 ## Javascript color pack
 
@@ -66,4 +66,4 @@ While convenient, the color pack increases the CSS export size by ~30kb. Some pr
 
 Below is a list of the Material design color palette grouped by primary color
 
-<color-palette />
+<FeaturesColorPalette />
diff --git a/packages/docs/src/pages/en/styles/content.md b/packages/docs/src/pages/en/styles/content.md
index fa12192e23a..ac8ba8df908 100644
--- a/packages/docs/src/pages/en/styles/content.md
+++ b/packages/docs/src/pages/en/styles/content.md
@@ -13,9 +13,9 @@ related:
 
 Vuetify has custom styling for multiple standard elements.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Block quote
 
diff --git a/packages/docs/src/pages/en/styles/css-reset.md b/packages/docs/src/pages/en/styles/css-reset.md
index cfde7bebfc6..496a884e99c 100644
--- a/packages/docs/src/pages/en/styles/css-reset.md
+++ b/packages/docs/src/pages/en/styles/css-reset.md
@@ -13,9 +13,9 @@ related:
 
 Opinionated base styles for Vuetify projects.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Bootstrapping
 
diff --git a/packages/docs/src/pages/en/styles/cursor.md b/packages/docs/src/pages/en/styles/cursor.md
index 32730a26f03..bdaafdab72e 100644
--- a/packages/docs/src/pages/en/styles/cursor.md
+++ b/packages/docs/src/pages/en/styles/cursor.md
@@ -14,13 +14,13 @@ related:
 
 Utilities for controlling the cursor styling when hovering over elements.
 
-<page-features />
+<PageFeatures />
 
 ## Usage
 
 Apply custom cursor styling to a component or element.
 
-<example file="cursor/usage" />
+<ExamplesExample file="cursor/usage" />
 
 | Class | Properties | |
 | - | - | - |
@@ -37,7 +37,7 @@ Apply custom cursor styling to a component or element.
 | **cursor-text** | cursor: text; | |
 | **cursor-wait** | cursor: wait; | |
 
-<entry />
+<PromotedEntry />
 
 ## Disable
 
diff --git a/packages/docs/src/pages/en/styles/display.md b/packages/docs/src/pages/en/styles/display.md
index 61764a86a01..37e4029f541 100644
--- a/packages/docs/src/pages/en/styles/display.md
+++ b/packages/docs/src/pages/en/styles/display.md
@@ -13,11 +13,11 @@ related:
 
 The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
-<breakpoints-table />
+<FeaturesBreakpointsTable />
 
 ## Display
 
@@ -40,9 +40,9 @@ The _value_ property is one of:
 
 When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up. For example, `d-lg-flex` will apply to `lg`, `xl` and `xxl` size screens.
 
-<example file="display/display-inline" />
+<ExamplesExample file="display/display-inline" />
 
-<example file="display/display-block" />
+<ExamplesExample file="display/display-block" />
 
 ## Visibility
 
@@ -65,7 +65,7 @@ Conditionally display an element based upon the current **viewport**. Breakpoint
 | Visible only on xl  | `.d-none .d-xl-flex .d-xxl-none` |
 | Visible only on xxl | `.d-none .d-xxl-flex`            |
 
-<example file="display/visibility" />
+<ExamplesExample file="display/visibility" />
 
 Alternatively you can hide an element based upon the current **viewport** using lateral display helper classes. These classes can be applied using the following format `hidden-{breakpoint}-{condition?}`
 
@@ -101,7 +101,7 @@ You can also change the display property when printing.
 
 Print utility classes can also be combined with none print display utilities.
 
-<example file="display/print" />
+<ExamplesExample file="display/print" />
 
 ## Accessibility
 
diff --git a/packages/docs/src/pages/en/styles/elevation.md b/packages/docs/src/pages/en/styles/elevation.md
index 68d3943fecf..51d6842e4f9 100644
--- a/packages/docs/src/pages/en/styles/elevation.md
+++ b/packages/docs/src/pages/en/styles/elevation.md
@@ -13,15 +13,15 @@ related:
 
 The elevation helpers allow you to control relative depth, or distance, between two surfaces along the **z-axis**. There is a total of 25 elevation levels. You can set an element's elevation by using the class `elevation-{n}`, where `n` is a integer between 0-24 corresponding to the desired elevation.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Usage
 
 The `elevation` helper classes allow you to assign a custom **z-depth** to any element.
 
-<example file="elevation/usage" />
+<ExamplesExample file="elevation/usage" />
 
 ## Examples
 
@@ -31,4 +31,4 @@ The `elevation` helper classes allow you to assign a custom **z-depth** to any e
 
 Numerous components utilize the **elevatable** mixin and are given an **elevation** prop. For components that are not supported, you can dynamically change the class
 
-<example file="elevation/prop-dynamic" />
+<ExamplesExample file="elevation/prop-dynamic" />
diff --git a/packages/docs/src/pages/en/styles/flex.md b/packages/docs/src/pages/en/styles/flex.md
index 7932e9e0156..c4970962a30 100644
--- a/packages/docs/src/pages/en/styles/flex.md
+++ b/packages/docs/src/pages/en/styles/flex.md
@@ -13,17 +13,17 @@ related:
 
 Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Enabling flexbox
 
 Using `display` utilities you can turn any element into a flexbox container transforming **direct children elements** into flex items. Using additional flex property utilities, you can customize their interaction even further.
 
-<example file="flex/flexbox" />
+<ExamplesExample file="flex/flexbox" />
 
-<example file="flex/flexbox-inline" />
+<ExamplesExample file="flex/flexbox-inline" />
 
 You can also customize flex utilities to apply based upon various breakpoints.
 
@@ -48,7 +48,7 @@ It is important to note that using any of the display classes above will result
 
 The flex utility classes can be used to modify the **flex** css property. This makes it easy to position flex items within a flex container.
 
-<example file="flex/flex-flex" />
+<ExamplesExample file="flex/flex-flex" />
 
 There are also responsive variations for `flex`:
 
@@ -102,11 +102,11 @@ There are also responsive variations for `flex`:
 
 By default, `d-flex` applies `flex-direction: row` and can generally be omitted. However, there may be situations where you need to explicitly define it.
 
-<example file="flex/flex-direction" />
+<ExamplesExample file="flex/flex-direction" />
 
 The `flex-column` and `flex-column-reverse` utility classes can be used to change the orientation of the flexbox container.
 
-<example file="flex/flex-column" />
+<ExamplesExample file="flex/flex-column" />
 
 There are also responsive variations for `flex-direction`.
 
@@ -135,7 +135,7 @@ There are also responsive variations for `flex-direction`.
 
 The `justify-content` flex setting can be changed using the flex justify classes. This by default will modify the flexbox items on the **x-axis** but is reversed when using `flex-direction: column`, modifying the **y-axis**. Choose from `start` (browser default), `end`, `center`, `space-between`, `space-around`, or `space-evenly`.
 
-<example file="flex/flex-justify" />
+<ExamplesExample file="flex/flex-justify" />
 
 There are also responsive variations for `justify-content`.
 
@@ -174,7 +174,7 @@ There are also responsive variations for `justify-content`.
 
 The `align-items` flex setting can be changed using the flex align classes. This by default will modify the flexbox items on the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
 
-<example file="flex/flex-align" />
+<ExamplesExample file="flex/flex-align" />
 
 There are also responsive variations for `align-items`.
 
@@ -208,7 +208,7 @@ There are also responsive variations for `align-items`.
 
 The `align-self` flex setting can be changed using the flex align-self classes. This by default will modify individual flexbox items across the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `baseline`, `stretch`, or `auto` (browser default, applies align-items property from flex container).
 
-<example file="flex/flex-align-self" />
+<ExamplesExample file="flex/flex-align-self" />
 
 There are also responsive variations for `align-self-items`.
 
@@ -247,13 +247,13 @@ There are also responsive variations for `align-self-items`.
 
 Using the margin helper classes in a flexbox container, you can control the positioning of flex items on the **x-axis** or **y-axis** when using `flex-row` or `flex-column` respectively.
 
-<example file="flex/margins" />
+<ExamplesExample file="flex/margins" />
 
 ### Using align-items
 
 Mixing `flex-direction: column` and `align-items`, you can utilize `.mt-auto` and `.mb-auto` helper classes to adjust flex item positioning.
 
-<example file="flex/margins-align-items" />
+<ExamplesExample file="flex/margins-align-items" />
 
 ## Flex wrap
 
@@ -263,11 +263,11 @@ By default `.d-flex` does not provide any wrapping (behaves similarly to `flex-w
 - **.flex-wrap**
 - **.flex-wrap-reverse**
 
-<example file="flex/flex-nowrap" />
+<ExamplesExample file="flex/flex-nowrap" />
 
-<example file="flex/flex-wrap" />
+<ExamplesExample file="flex/flex-wrap" />
 
-<example file="flex/flex-wrap-reverse" />
+<ExamplesExample file="flex/flex-wrap-reverse" />
 
 These helper classes can also be applied in the format `flex-{breakpoint}-{condition}` to create more responsive variations based on breakpoints. The following combinations are available:
 
@@ -288,7 +288,7 @@ These helper classes can also be applied in the format `flex-{breakpoint}-{condi
 
 You can change the visual order of flex items with the `order` utilities.
 
-<example file="flex/flex-order" />
+<ExamplesExample file="flex/flex-order" />
 
 There are also responsive variations for `order`.
 
@@ -372,15 +372,15 @@ There are also responsive variations for `order`.
 
 The `align-content` flex setting can be changed using the flex align-content classes. This by default will modify the wrapped flexbox content across the **y-axis** but is reversed when using `flex-direction: column`, modifying the **x-axis**. Choose from `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly` or `stretch` (browser default).
 
-<example file="flex/flex-align-content-start" />
+<ExamplesExample file="flex/flex-align-content-start" />
 
-<example file="flex/flex-align-content-end" />
+<ExamplesExample file="flex/flex-align-content-end" />
 
-<example file="flex/flex-align-content-center" />
+<ExamplesExample file="flex/flex-align-content-center" />
 
-<example file="flex/flex-align-content-between" />
+<ExamplesExample file="flex/flex-align-content-between" />
 
-<example file="flex/flex-align-content-around" />
+<ExamplesExample file="flex/flex-align-content-around" />
 
 There are also responsive variations for `align-content`.
 
@@ -429,7 +429,7 @@ Vuetify has helper classes for applying grow and shrink manually. These can be a
 - **flex-shrink-0**
 - **flex-shrink-1**
 
-<example file="flex/grow-shrink" />
+<ExamplesExample file="flex/grow-shrink" />
 
 These helper classes can also be applied in the format `flex-{breakpoint}-{condition}-{state}` to create more responsive variations based on breakpoints. The following combinations are available:
 
diff --git a/packages/docs/src/pages/en/styles/float.md b/packages/docs/src/pages/en/styles/float.md
index 58bf2c29da9..52bf0f378d9 100644
--- a/packages/docs/src/pages/en/styles/float.md
+++ b/packages/docs/src/pages/en/styles/float.md
@@ -13,27 +13,27 @@ related:
 
 Applies a custom float across any breakpoint with responsive float utilities.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Overview
 
 Float utility classes apply floating based upon the current viewport size using the [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float).
 
-<breakpoints-table />
+<FeaturesBreakpointsTable />
 
 ## Classes
 
 Easily toggle a float with a class:
 
-<example file="float/classes" />
+<ExamplesExample file="float/classes" />
 
 ## Responsive
 
 Floats can also be applied on a per breakpoint (viewport) basis.
 
-<example file="float/responsive" />
+<ExamplesExample file="float/responsive" />
 
 Here is a list of all the available support classes:
 
diff --git a/packages/docs/src/pages/en/styles/overflow.md b/packages/docs/src/pages/en/styles/overflow.md
index 539d6d190cd..e4fa2b5dca9 100644
--- a/packages/docs/src/pages/en/styles/overflow.md
+++ b/packages/docs/src/pages/en/styles/overflow.md
@@ -13,9 +13,9 @@ related:
 
 Configure how content overflows when it becomes out of container bounds.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## How it works
 
@@ -39,10 +39,10 @@ here is a list of properties:
 
 `overflow-auto` is used to add scrollbars to an element when its content overflows the bounds. while `overflow-hidden` is used to clip any content that overflows the bounds. `overflow-visible` will prevent content from being clipped even when it overflows the bounds.
 
-<example file="overflow/overflow" />
+<ExamplesExample file="overflow/overflow" />
 
 ### Overflow X property
 
 **overflow-x** can be used to specify horizontal overflows to an element if needed.
 
-<example file="overflow/overflow-x" />
+<ExamplesExample file="overflow/overflow-x" />
diff --git a/packages/docs/src/pages/en/styles/sizing.md b/packages/docs/src/pages/en/styles/sizing.md
index ee14c282c13..ffbb8fad964 100644
--- a/packages/docs/src/pages/en/styles/sizing.md
+++ b/packages/docs/src/pages/en/styles/sizing.md
@@ -13,9 +13,9 @@ related:
 
 Sizing utility classes are used to modify the dimensions of an element.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Height
 
@@ -31,7 +31,7 @@ Specify the `height` property of **block level elements** with a utility class.
 | **h-75**     | `height: 75%`    |
 | **h-100**    | `height: 100%`   |
 
-<example file="sizing/height" />
+<ExamplesExample file="sizing/height" />
 
 ## Width
 
@@ -46,4 +46,4 @@ Specify the `width` property of **block level elements** with a utility class. T
 | **w-75**     | `width: 75%`   |
 | **w-100**    | `width: 100%`  |
 
-<example file="sizing/width" />
+<ExamplesExample file="sizing/width" />
diff --git a/packages/docs/src/pages/en/styles/spacing.md b/packages/docs/src/pages/en/styles/spacing.md
index 1fe309c52f4..d74ad63c850 100644
--- a/packages/docs/src/pages/en/styles/spacing.md
+++ b/packages/docs/src/pages/en/styles/spacing.md
@@ -13,13 +13,13 @@ related:
 
 Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 Use the playground to get a feel for what the different helper classes can do. For an explanation of **how they work**, see the How it works section below.
 
-<example file="spacing/usage" />
+<ExamplesExample file="spacing/usage" />
 
 ## How it works
 
@@ -87,26 +87,26 @@ The **size** controls the increment of the property in 4px intervals:
 
 Vuetify comes with a 12 point grid system built using Flexbox. Spacing is used to create specific layouts within an application's content. It consists of 5 media breakpoints used to target specific screen sizes or orientations: **xs**, **sm**, **md**, **lg** and **xl**. The default resolutions are defined below in the *Viewport Breakpoints* table and can be modified by customizing the [breakpoint service config](/features/display-and-platform/).
 
-<breakpoints-table />
+<FeaturesBreakpointsTable />
 
 The helper classes apply **margin** or **padding** at a given breakpoint. These classes can be applied using the following format: `{property}{direction}-{breakpoint}-{size}`. This does not apply to **xs** as it is inferred; e.g. `ma-xs-2` equals `ma-2`.
 
-<example file="spacing/breakpoints" />
+<ExamplesExample file="spacing/breakpoints" />
 
 ### Horizontal
 
 Margin helper classes let you easily center content horizontally.
 
-<example file="spacing/horizontal" />
+<ExamplesExample file="spacing/horizontal" />
 
 ### Gap
 
 Use the gap helper classes to easily apply a gap between content.
 
-<example file="spacing/gap" />
+<ExamplesExample file="spacing/gap" />
 
 ### Negative margin
 
 Margin can also be applied negatively at the same **1 to 16** intervals.
 
-<example file="spacing/negative-margin" />
+<ExamplesExample file="spacing/negative-margin" />
diff --git a/packages/docs/src/pages/en/styles/text-and-typography.md b/packages/docs/src/pages/en/styles/text-and-typography.md
index 1575998f617..605d2adcd6d 100644
--- a/packages/docs/src/pages/en/styles/text-and-typography.md
+++ b/packages/docs/src/pages/en/styles/text-and-typography.md
@@ -13,15 +13,15 @@ related:
 
 Control text size, alignment, wrapping, overflow, transforms and more. By default, Vuetify uses the Material Design specification [Roboto Font](https://fonts.google.com/specimen/Roboto).
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## Typography
 
 Control the size and style of text using the Typography helper classes. These values are based upon the [Material Design type specification](https://material.io/design/typography/the-type-system.html).
 
-<example file="text-and-typography/typography" />
+<ExamplesExample file="text-and-typography/typography" />
 
 ### Breakpoints
 
@@ -29,13 +29,13 @@ All of the typography classes support the responsive breakpoints seen in other p
 
 The following example shows a slightly contrived example of how one can use the different classes to effect:
 
-<example file="text-and-typography/typography-breakpoints" />
+<ExamplesExample file="text-and-typography/typography-breakpoints" />
 
 ### Font emphasis
 
 Material design, by default, supports **100, 300, 400, 500, 700, 900** font weights and italicized text.
 
-<example file="text-and-typography/font-emphasis" />
+<ExamplesExample file="text-and-typography/font-emphasis" />
 
 ## Text
 
@@ -43,39 +43,39 @@ Material design, by default, supports **100, 300, 400, 500, 700, 900** font weig
 
 Alignment helper classes allow you to easily re-align text.
 
-<example file="text-and-typography/text-alignment" />
+<ExamplesExample file="text-and-typography/text-alignment" />
 
 The alignment classes also support responsive breakpoints.
 
-<example file="text-and-typography/text-alignment-responsive" />
+<ExamplesExample file="text-and-typography/text-alignment-responsive" />
 
 ### Decoration
 
 Remove text decoration with the `.text-decoration-none` class or add an *overline, underline or line-through* by using `.text-decoration-overline`, `.text-decoration-underline`, and `.text-decoration-line-through`.
 
-<example file="text-and-typography/text-decoration" />
+<ExamplesExample file="text-and-typography/text-decoration" />
 
 ### Opacity
 
 Opacity helper classes allow you to easily adjust the emphasis of text. `text-high-emphasis` has the same opacity as default text. `text-medium-emphasis` is used for hints and helper text. De-emphasize text with `text-disabled`.
 
-<example file="text-and-typography/text-opacity" />
+<ExamplesExample file="text-and-typography/text-opacity" />
 
 ### Transform
 
 Text can be transformed with text capitalization classes.
 
-<example file="text-and-typography/text-transform" />
+<ExamplesExample file="text-and-typography/text-transform" />
 
 Text breaking and the removal of `text-transform` is also possible. In the first example, the `text-transform: uppercase` custom class is overwritten and allows the text casing to remain. In the second example, we break up a longer word to fit the available space.
 
-<example file="text-and-typography/text-break" />
+<ExamplesExample file="text-and-typography/text-break" />
 
 ### Wrapping and overflow
 
 You can prevent wrapping text with the `.text-no-wrap` utility class.
 
-<example file="text-and-typography/text-no-wrap" />
+<ExamplesExample file="text-and-typography/text-no-wrap" />
 
 Longer content can be truncated with a text ellipsis using the `.text-truncate` utility class.
 
@@ -83,7 +83,7 @@ Longer content can be truncated with a text ellipsis using the `.text-truncate`
   **Requires** `display: inline-block` **or** `display: block`.
 :::
 
-<example file="text-and-typography/text-truncate" />
+<ExamplesExample file="text-and-typography/text-truncate" />
 
 ## RTL Alignment
 
@@ -91,4 +91,4 @@ When using [RTL](/features/bidirectionality), you may want to keep the alignment
 
 If instead you want the alignment to respond to the current text direction, use `start` and `end`.
 
-<example file="text-and-typography/text-rtl" />
+<ExamplesExample file="text-and-typography/text-rtl" />
diff --git a/packages/docs/src/pages/en/styles/transitions.md b/packages/docs/src/pages/en/styles/transitions.md
index f5d6cf36bc3..6c2e370de10 100644
--- a/packages/docs/src/pages/en/styles/transitions.md
+++ b/packages/docs/src/pages/en/styles/transitions.md
@@ -13,9 +13,9 @@ related:
 
 Smooth animations help make a UI feel great. Using Vue's transition system and re-usable functional components, you can easily control the motion of your application. Most components can have their transition altered through the **transition** prop.
 
-<page-features />
+<PageFeatures />
 
-<entry />
+<PromotedEntry />
 
 ## API
 
@@ -38,7 +38,7 @@ Smooth animations help make a UI feel great. Using Vue's transition system and r
 | [v-toggle-slide-y-reverse-transition](/api/v-toggle-slide-y-reverse-transition/) | Toggle Slide Y reverse transitions slide in from the bottom. |
 | [v-toggle-slide-y-transition](/api/v-toggle-slide-y-transition/) | Toggle Slide Y transitions slide in from the top. |
 
-<api-inline hide-links />
+<ApiInline hide-links />
 
 ## Examples
 
@@ -49,7 +49,7 @@ Smooth animations help make a UI feel great. Using Vue's transition system and r
 
 Programmatically control the transition origin with a simple prop.
 
-<example file="transitions/prop-custom-origin" />
+<ExamplesExample file="transitions/prop-custom-origin" />
 -->
 
 ### Misc
@@ -58,55 +58,55 @@ Programmatically control the transition origin with a simple prop.
 
 The expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with `v-expand-x-transition`.
 
-<example file="transitions/misc-expand-x" />
+<ExamplesExample file="transitions/misc-expand-x" />
 
 #### Fab
 
 An example of the fab transition can be found in the `v-speed-dial` component.
 
-<example file="transitions/misc-fab" />
+<ExamplesExample file="transitions/misc-fab" />
 
 #### Fade
 
 An example of the fade transition can be found on the Carousel component.
 
-<example file="transitions/misc-fade" />
+<ExamplesExample file="transitions/misc-fade" />
 
 #### Scale
 
 Many of Vuetify's components contain a **transition** prop which allows you to specify your own.
 
-<example file="transitions/misc-scale" />
+<ExamplesExample file="transitions/misc-scale" />
 
 #### Scroll x
 
 Scroll X transitions continue along the horizontal axis.
 
-<example file="transitions/misc-scroll-x" />
+<ExamplesExample file="transitions/misc-scroll-x" />
 
 #### Scroll y
 
 Scroll Y transitions continue along the vertical axis.
 
-<example file="transitions/misc-scroll-y" />
+<ExamplesExample file="transitions/misc-scroll-y" />
 
 #### Slide x
 
 Slide x transitions move along the horizontal axis.
 
-<example file="transitions/misc-slide-x" />
+<ExamplesExample file="transitions/misc-slide-x" />
 
 #### Slide y
 
 Animations use the application's `$primary-transition`.
 
-<example file="transitions/misc-slide-y" />
+<ExamplesExample file="transitions/misc-slide-y" />
 
 #### Todo list
 
 Using multiple custom transitions, it is easy to bring a simple todo list to life!
 
-<example file="transitions/misc-todo" />
+<ExamplesExample file="transitions/misc-todo" />
 
 <!--
 ## Create your own
diff --git a/packages/docs/src/pages/en/user/dashboard.md b/packages/docs/src/pages/en/user/dashboard.md
index 96f0233f691..68688bbd417 100644
--- a/packages/docs/src/pages/en/user/dashboard.md
+++ b/packages/docs/src/pages/en/user/dashboard.md
@@ -8,9 +8,23 @@ meta:
 ---
 
 <script setup>
-  import PerksOptions from '@/components/app/settings/PerksOptions.vue'
-</script>
+// Components
+import UserOneSubCard from '@/components/user/OneSubCard.vue'
+
+// Stores
+import { useAuthStore } from '@vuetify/one'
 
-### Perks
+const auth = useAuthStore()
+
+const props = {
+  headline: 'My Dashboard',
+  title: auth.user ? 'Coming soon!' : 'Login to Subscribe to Vuetify One',
+  icon: '$vuetify',
+  height: 'calc(100vh - var(--v-layout-top))',
+  text: auth.user
+    ? 'This page will soon be home to the Vuetify One Dashboard.'
+    : 'In order to proceed, please login using GitHub or Discord.',
+}
+</script>
 
-<PerksOptions />
+<v-empty-state v-bind="props"><UserOneSubCard /><VoAuthListItem v-if="!auth.user" /></v-empty-state>
diff --git a/packages/docs/src/pages/en/user/options.md b/packages/docs/src/pages/en/user/options.md
deleted file mode 100644
index ccd91474237..00000000000
--- a/packages/docs/src/pages/en/user/options.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-layout: user
-meta:
-  title: User Options
-  description: This page provides options for adjusting and configuring your Documentation experience, including advanced options and developer mode.
-  keywords: user options, advanced options, developer mode
----
-
-<script setup>
-  import AdvancedOptions from '@/components/app/settings/AdvancedOptions.vue'
-  import Options from '@/components/app/settings/Options.vue'
-</script>
-
-### Options
-
-Adjust options that modify your Documentation experience
-
-----
-
-<options />
-
-<br>
-
-### Advanced Options
-
-Adjust advanced options that modify your Documentation experience
-
-----
-
-<advanced-options />
diff --git a/packages/docs/src/pages/en/user/subscriptions.md b/packages/docs/src/pages/en/user/subscriptions.md
deleted file mode 100644
index 22f9cbab924..00000000000
--- a/packages/docs/src/pages/en/user/subscriptions.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: user
-meta:
-  title: Subscriptions
-  description: Manage all of your Vuetify subscriptions in one place
-  keywords: vuetify one, subscriptions, ad free, support
----
-
-### Vuetify One Subscription
-
-Sign-up for Vuetify One and enjoy an ad-free documentation experience.
-
-<OneSubscription />
diff --git a/packages/docs/src/plugins/global-components.ts b/packages/docs/src/plugins/global-components.ts
index 7591b8e90dc..1f1a9853c03 100644
--- a/packages/docs/src/plugins/global-components.ts
+++ b/packages/docs/src/plugins/global-components.ts
@@ -1,93 +1,98 @@
 // Components
+import AboutTeamMembers from '@/components/about/TeamMembers.vue'
 import Alert from '@/components/Alert.vue'
 import ApiInline from '@/components/api/Inline.vue'
-import ApiLinks from '@/components/api/Links.vue'
 import ApiSearch from '@/components/api/Search.vue'
 import ApiSection from '@/components/api/Section.vue'
-import AppBtn from '@/components/app/Btn.vue'
-import AppCaption from '@/components/app/Caption.vue'
 import AppDivider from '@/components/app/Divider.vue'
-import AppFigure from '@/components/app/Figure.vue'
 import AppHeading from '@/components/app/Heading.vue'
-import AppHeadline from '@/components/app/Headline.vue'
-import AppLink from '@/components/app/Link.vue'
-import AppLinkListItem from '@/components/app/list/LinkListItem.vue'
-import AppList from '@/components/app/list/List.vue'
-import AppMarkdown from '@/components/app/Markdown.vue'
+import AppFigure from '@/components/app/Figure.vue'
 import AppMarkup from '@/components/app/Markup.vue'
-import AppMenu from '@/components/app/menu/Menu.vue'
-import AppSheet from '@/components/app/Sheet.vue'
+import AppSettingsAdvancedOptions from '@/components/app/settings/AdvancedOptions.vue'
+import AppSettingsOptions from '@/components/app/settings/Options.vue'
+import AppSettingsPerksOptions from '@/components/app/settings/PerksOptions.vue'
+import AppLink from '@/components/app/Link.vue'
 import AppTable from '@/components/app/Table.vue'
-import AppTextField from '@/components/app/TextField.vue'
-import AppTitle from '@/components/app/Title.vue'
-import AppTooltipBtn from '@/components/app/TooltipBtn.vue'
-import Backmatter from '@/components/Backmatter.vue'
-import BreakpointsTable from '@/components/features/BreakpointsTable.vue'
-import Carbon from '@/components/promoted/Carbon.vue'
-import ColorPalette from '@/components/features/ColorPalette.vue'
-import Discovery from '@/components/promoted/Discovery.vue'
+import ComponentsListItem from '@/components/components/ListItem.vue'
+import DocExplorer from '@/components/doc/Explorer.vue'
+import DocIconList from '@/components/doc/IconList.vue'
+import DocIconTable from '@/components/doc/IconTable.vue'
 import DocTabs from '@/components/doc/Tabs.vue'
-import Entry from '@/components/promoted/Entry.vue'
-import Example from '@/components/examples/Example.vue'
-import Inline from '@/components/promoted/Inline.vue'
-import OneSubscription from '@/components/user/account/OneSubscription.vue'
+import DocVueJobs from '@/components/doc/VueJobs.vue'
+import DocMadeWithVueAttribution from '@/components/doc/MadeWithVueAttribution.vue'
+import DocMadeWithVuetifyGallery from '@/components/doc/MadeWithVuetifyGallery.vue'
+import DocMadeWithVuetifyLink from '@/components/doc/MadeWithVuetifyLink.vue'
+import DocReleases from '@/components/doc/Releases.vue'
+import DocThemeVendor from '@/components/doc/ThemeVendor.vue'
+import ExamplesExample from '@/components/examples/Example.vue'
+import ExamplesUsage from '@/components/examples/Usage.vue'
+import FeaturesBreakpointsTable from '@/components/features/BreakpointsTable.vue'
+import FeaturesColorPalette from '@/components/features/ColorPalette.vue'
+import FeaturesSassApi from '@/components/features/SassApi.vue'
+import GettingStartedWireframeExamples from '@/components/getting-started/WireframeExamples.vue'
+import HomeEntry from '@/components/home/Entry.vue'
+import HomeFeatures from '@/components/home/Features.vue'
+import HomeSpecialSponsor from '@/components/home/SpecialSponsor.vue'
+import HomeSponsors from '@/components/home/Sponsors.vue'
+import IntroductionDiscordDeck from '@/components/introduction/DiscordDeck.vue'
+import IntroductionEnterpriseDeck from '@/components/introduction/EnterpriseDeck.vue'
 import PageFeatures from '@/components/PageFeatures.vue'
-import Promoted from '@/components/promoted/Promoted.vue'
-import Random from '@/components/promoted/Random.vue'
-import Sponsors from '@/components//sponsor/Sponsors.vue'
-import TeamMembers from '@/components//about/TeamMembers.vue'
-import Usage from '@/components/examples/Usage.vue'
-import UsageExample from '@/components/examples/UsageExample.vue'
-import VueFile from '@/components/examples/VueFile.vue'
-import Vuetify from '@/components/promoted/Vuetify.vue'
+import PromotedEntry from '@/components/promoted/Entry.vue'
+import PromotedPromoted from '@/components/promoted/Promoted.vue'
+import PromotedRandom from '@/components/promoted/Random.vue'
+import ResourcesColorPalette from '@/components/resources/ColorPalette.vue'
+import ResourcesLogos from '@/components/resources/Logos.vue'
+import SponserSponsors from '@/components/sponsor/Sponsors.vue'
 
 // Types
 import type { App } from 'vue'
 
 export function installGlobalComponents (app: App) {
   app
-    .component('AppBtn', AppBtn)
-    .component('AppCaption', AppCaption)
+    // Used by markdown-it to gen api pages, and needed to be globally loaded to work
+    .component('AboutTeamMembers', AboutTeamMembers)
+    .component('Alert', Alert)
+    .component('ApiInline', ApiInline)
+    .component('ApiSearch', ApiSearch)
+    .component('ApiSection', ApiSection)
     .component('AppDivider', AppDivider)
+    .component('AppFigure', AppFigure)
     .component('AppHeading', AppHeading)
-    .component('AppHeadline', AppHeadline)
-    .component('AppLinkListItem', AppLinkListItem)
     .component('AppLink', AppLink)
-    .component('AppList', AppList)
-    .component('AppMarkdown', AppMarkdown)
     .component('AppMarkup', AppMarkup)
-    .component('AppMenu', AppMenu)
-    .component('AppSheet', AppSheet)
     .component('AppTable', AppTable)
-    .component('AppTextField', AppTextField)
-    .component('AppTitle', AppTitle)
-    .component('AppTooltipBtn', AppTooltipBtn)
-    .component('UnwrapMarkdown', (props, { slots }) => slots.default?.()?.[0].children)
-
-    // Used by markdown files
-    .component('Alert', Alert)
-    .component('AppFigure', AppFigure)
-    .component('ApiInline', ApiInline)
-    .component('ApiLinks', ApiLinks)
-    .component('ApiSection', ApiSection)
-    .component('ApiSearch', ApiSearch)
-    .component('Backmatter', Backmatter)
-    .component('BreakpointsTable', BreakpointsTable)
-    .component('ColorPalette', ColorPalette)
-    .component('Carbon', Carbon)
-    .component('Discovery', Discovery)
+    .component('AppSettingsAdvancedOptions', AppSettingsAdvancedOptions)
+    .component('AppSettingsOptions', AppSettingsOptions)
+    .component('AppSettingsPerksOptions', AppSettingsPerksOptions)
+    .component('ComponentsListItem', ComponentsListItem)
+    .component('DocExplorer', DocExplorer)
+    .component('DocIconList', DocIconList)
+    .component('DocIconTable', DocIconTable)
     .component('DocTabs', DocTabs)
-    .component('Entry', Entry)
-    .component('Example', Example)
-    .component('Inline', Inline)
-    .component('OneSubscription', OneSubscription)
+    .component('DocVueJobs', DocVueJobs)
+    .component('DocMadeWithVueAttribution', DocMadeWithVueAttribution)
+    .component('DocMadeWithVuetifyGallery', DocMadeWithVuetifyGallery)
+    .component('DocMadeWithVuetifyLink', DocMadeWithVuetifyLink)
+    .component('DocReleases', DocReleases)
+    .component('DocThemeVendor', DocThemeVendor)
+    .component('ExamplesExample', ExamplesExample)
+    .component('ExamplesUsage', ExamplesUsage)
+    .component('FeaturesBreakpointsTable', FeaturesBreakpointsTable)
+    .component('FeaturesColorPalette', FeaturesColorPalette)
+    .component('FeaturesSassApi', FeaturesSassApi)
+    .component('GettingStartedWireframeExamples', GettingStartedWireframeExamples)
+    .component('HomeEntry', HomeEntry)
+    .component('HomeFeatures', HomeFeatures)
+    .component('HomeSpecialSponsor', HomeSpecialSponsor)
+    .component('HomeSponsors', HomeSponsors)
+    .component('IntroductionDiscordDeck', IntroductionDiscordDeck)
+    .component('IntroductionEnterpriseDeck', IntroductionEnterpriseDeck)
     .component('PageFeatures', PageFeatures)
-    .component('Promoted', Promoted)
-    .component('Random', Random)
-    .component('Sponsors', Sponsors)
-    .component('TeamMembers', TeamMembers)
-    .component('Usage', Usage)
-    .component('UsageExample', UsageExample)
-    .component('VueFile', VueFile)
-    .component('Vuetify', Vuetify)
+    .component('PromotedEntry', PromotedEntry)
+    .component('PromotedPromoted', PromotedPromoted)
+    .component('PromotedRandom', PromotedRandom)
+    .component('ResourcesColorPalette', ResourcesColorPalette)
+    .component('ResourcesLogos', ResourcesLogos)
+    .component('SponserSponsors', SponserSponsors)
+    .component('UnwrapMarkdown', (props, { slots }) => slots.default?.()?.[0].children)
 }
diff --git a/packages/docs/src/plugins/gtag.ts b/packages/docs/src/plugins/gtag.ts
index 83e0befe602..6c730557fa0 100644
--- a/packages/docs/src/plugins/gtag.ts
+++ b/packages/docs/src/plugins/gtag.ts
@@ -1,6 +1,5 @@
 // Imports
 import VueGtag, { trackRouter } from 'vue-gtag-next'
-import { IN_BROWSER } from '@/util/globals'
 
 // Types
 import type { App } from 'vue'
diff --git a/packages/docs/src/plugins/i18n.ts b/packages/docs/src/plugins/i18n.ts
index 41d10ba6048..62e1439665b 100644
--- a/packages/docs/src/plugins/i18n.ts
+++ b/packages/docs/src/plugins/i18n.ts
@@ -1,7 +1,5 @@
 // Imports
-import { watch } from 'vue'
 import { createI18n } from 'vue-i18n'
-import { useLocaleStore } from '@/store/locale'
 
 // Types
 import type { App } from 'vue'
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index a77ac755929..aee48b97baf 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -60,6 +60,7 @@ export {
   mdiBullhorn,
   mdiBullhornOutline,
   mdiBullseye,
+  mdiBullseyeArrow,
   mdiCached,
   mdiCakeVariant,
   mdiCalendar,
@@ -131,6 +132,7 @@ export {
   mdiDotsVertical,
   mdiDownloadBoxOutline,
   mdiDropbox,
+  mdiEarth,
   mdiEmail,
   mdiEmailOpen,
   mdiEmailOpenOutline,
@@ -291,6 +293,7 @@ export {
   mdiPencil,
   mdiPhone,
   mdiPhoneInTalk,
+  mdiPictureInPictureBottomRight,
   mdiPin,
   mdiPinOff,
   mdiPinOutline,
@@ -359,11 +362,13 @@ export {
   mdiUnfoldMoreHorizontal,
   mdiUpdate,
   mdiUpload,
+  mdiVariable,
   mdiVectorDifferenceAb,
   mdiVideoInputComponent,
   mdiVideoVintage,
   mdiViewDashboard,
   mdiViewDashboardOutline,
+  mdiWindowRestore,
   mdiViewGridOutline,
   mdiViewListOutline,
   mdiViewModule,
diff --git a/packages/docs/src/plugins/one.ts b/packages/docs/src/plugins/one.ts
index 77ad360383b..36c20d34267 100644
--- a/packages/docs/src/plugins/one.ts
+++ b/packages/docs/src/plugins/one.ts
@@ -1,9 +1,6 @@
 // Styles
 import '@vuetify/one/styles'
 
-// Plugins
-import { createOne } from '@vuetify/one'
-
 // Types
 import type { App } from 'vue'
 
diff --git a/packages/docs/src/plugins/pinia.ts b/packages/docs/src/plugins/pinia.ts
index 8d148731e31..7cd4d26aafd 100644
--- a/packages/docs/src/plugins/pinia.ts
+++ b/packages/docs/src/plugins/pinia.ts
@@ -1,5 +1,6 @@
 // Imports
 import { createPinia } from 'pinia'
+import { one } from '@vuetify/one'
 import { markRaw } from 'vue'
 
 // Types
@@ -11,8 +12,14 @@ export const pinia = createPinia()
 export function installPinia (app: App, router: Router) {
   pinia.use(({ store }) => {
     store.router = markRaw(router)
-    store.url = import.meta.env.VITE_API_SERVER_URL
   })
 
+  pinia.use(
+    one(
+      ['docs', 'home'],
+      import.meta.env.VITE_API_SERVER_URL,
+    )
+  )
+
   app.use(pinia)
 }
diff --git a/packages/docs/src/plugins/vuetify.ts b/packages/docs/src/plugins/vuetify.ts
index 3899bdc7a6b..ccb12aad927 100644
--- a/packages/docs/src/plugins/vuetify.ts
+++ b/packages/docs/src/plugins/vuetify.ts
@@ -2,7 +2,6 @@
 import 'vuetify/styles'
 
 // Imports
-import { camelize, h } from 'vue'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
diff --git a/packages/docs/src/store/banners.ts b/packages/docs/src/store/banners.ts
deleted file mode 100644
index 33953bedd32..00000000000
--- a/packages/docs/src/store/banners.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-// Composables
-import { useCosmic } from '@/composables/cosmic'
-import { useDate } from 'vuetify'
-import { useUserStore } from '@vuetify/one'
-
-// Utilities
-import { defineStore } from 'pinia'
-
-// Types
-interface Banner {
-  status: 'published' | 'unpublished'
-  modified_at: string
-  slug: string
-  title: string
-  metadata: {
-    active: boolean
-    closable: boolean
-    color: string
-    label: string
-    height: number
-    text: string
-    subtext: string
-    link: string
-    link_text: string
-    link_color: string
-    attributes: Record<string, any>
-    start_date: string
-    end_date: string
-    theme: {
-      key: 'light' | 'dark'
-      value: 'Light' | 'Dark'
-    }
-    images: {
-      bg: {
-        url: string
-      }
-      logo: {
-        url: string
-      }
-    }
-    visible: {
-      key: 'home' | 'docs' | 'both' | 'server'
-      value: 'home'
-    }
-  }
-}
-
-interface State {
-  banners: Banner[]
-  isLoading: boolean
-  router: any
-  server?: Banner
-  banner?: Banner
-}
-
-export const useBannersStore = defineStore('banners', {
-  state: (): State => ({
-    banners: [],
-    isLoading: false,
-    router: null,
-  }),
-  actions: {
-    async fetch () {
-      if (this.banners.length) return
-
-      const { bucket } = useCosmic()
-
-      const adapter = useDate()
-      const today = adapter.startOfDay(adapter.date())
-      const tomorrow = adapter.endOfDay(today)
-
-      try {
-        this.isLoading = true
-
-        const { objects = [] }: { objects: Banner[] } = (
-          await bucket?.objects
-            .find({
-              type: 'banners',
-              'metadata.start_date': {
-                $lte: today,
-              },
-              'metadata.end_date': {
-                $gte: tomorrow,
-              },
-            })
-            .props('status,metadata,slug,title,modified_at')
-            .sort('metadata.start_date')
-            .limit(3)
-        ) || {}
-
-        this.banners = objects
-      } catch (e) {
-        console.error(e)
-      } finally {
-        this.isLoading = false
-      }
-    },
-  },
-  getters: {
-    banner (state) {
-      const user = useUserStore()
-      const name = state.router.currentRoute.value.meta.page
-
-      if (this.server) return this.server
-
-      return state.banners.find(({
-        slug,
-        metadata: {
-          visible,
-          active,
-        },
-      }) => {
-        if (!active) return false
-
-        if (user.notifications.last.banner.includes(slug)) return false
-
-        if (visible.key === 'both') return true
-        // '' is home
-        if (visible.key === 'home' && name === '') return true
-
-        return visible.key === 'docs' && name !== 'home'
-      })
-    },
-    server (state) {
-      return state.banners.find(({
-        metadata: {
-          visible,
-          active,
-        },
-      }) => {
-        if (!active) return false
-
-        return visible.key === 'server'
-      })
-    },
-  },
-})
diff --git a/packages/docs/src/store/ads.ts b/packages/docs/src/stores/ads.ts
similarity index 84%
rename from packages/docs/src/store/ads.ts
rename to packages/docs/src/stores/ads.ts
index b8082b372ff..4f25f9a93e3 100644
--- a/packages/docs/src/store/ads.ts
+++ b/packages/docs/src/stores/ads.ts
@@ -1,10 +1,3 @@
-// Composables
-import { useCosmic } from '@/composables/cosmic'
-
-// Utilities
-import { defineStore } from 'pinia'
-import { onBeforeMount, ref } from 'vue'
-
 // Types
 interface Ad {
   slug: string
diff --git a/packages/docs/src/store/app.ts b/packages/docs/src/stores/app.ts
similarity index 98%
rename from packages/docs/src/store/app.ts
rename to packages/docs/src/stores/app.ts
index 2c769ca30fb..881f527b8b0 100644
--- a/packages/docs/src/store/app.ts
+++ b/packages/docs/src/stores/app.ts
@@ -1,6 +1,3 @@
-// Utilities
-import { defineStore } from 'pinia'
-
 // Data
 import data from '@/data/nav.json'
 
diff --git a/packages/docs/src/store/commits.ts b/packages/docs/src/stores/commits.ts
similarity index 94%
rename from packages/docs/src/store/commits.ts
rename to packages/docs/src/stores/commits.ts
index 32fd134e101..d3edc4ade64 100644
--- a/packages/docs/src/store/commits.ts
+++ b/packages/docs/src/stores/commits.ts
@@ -1,9 +1,6 @@
 // Plugins
 import type { components as octokitComponents } from '@octokit/openapi-types'
 
-// Utilities
-import { defineStore } from 'pinia'
-
 export type Commit = octokitComponents['schemas']['commit']
 
 export type State = {
diff --git a/packages/docs/src/store/jobs.ts b/packages/docs/src/stores/jobs.ts
similarity index 95%
rename from packages/docs/src/store/jobs.ts
rename to packages/docs/src/stores/jobs.ts
index e988e225748..c788a4784e4 100644
--- a/packages/docs/src/store/jobs.ts
+++ b/packages/docs/src/stores/jobs.ts
@@ -1,7 +1,3 @@
-// Utilities
-import { defineStore } from 'pinia'
-import { onBeforeMount, ref } from 'vue'
-
 // Types
 type Job = {
   id: number
diff --git a/packages/docs/src/store/locale.ts b/packages/docs/src/stores/locale.ts
similarity index 65%
rename from packages/docs/src/store/locale.ts
rename to packages/docs/src/stores/locale.ts
index d24b17d56ea..42131fcea53 100644
--- a/packages/docs/src/store/locale.ts
+++ b/packages/docs/src/stores/locale.ts
@@ -1,7 +1,3 @@
-// Utilities
-import { defineStore } from 'pinia'
-import { preferredLocale } from '@/util/routes'
-
 // Types
 export type RootState = {
   locale: string
diff --git a/packages/docs/src/store/made-with-vuetify.ts b/packages/docs/src/stores/made-with-vuetify.ts
similarity index 76%
rename from packages/docs/src/store/made-with-vuetify.ts
rename to packages/docs/src/stores/made-with-vuetify.ts
index ab53922c9a8..0397bc019cc 100644
--- a/packages/docs/src/store/made-with-vuetify.ts
+++ b/packages/docs/src/stores/made-with-vuetify.ts
@@ -1,7 +1,3 @@
-// Utilities
-import { defineStore } from 'pinia'
-import { onBeforeMount, ref } from 'vue'
-
 export const useMadeWithVuetifyStore = defineStore('made-with-vuetify', () => {
   const items = ref([])
 
diff --git a/packages/docs/src/store/pins.ts b/packages/docs/src/stores/pins.ts
similarity index 81%
rename from packages/docs/src/store/pins.ts
rename to packages/docs/src/stores/pins.ts
index 3fce8eee16c..76cd557e4e5 100644
--- a/packages/docs/src/store/pins.ts
+++ b/packages/docs/src/stores/pins.ts
@@ -1,15 +1,3 @@
-// Pinia
-import { defineStore } from 'pinia'
-
-// Composables
-import { useRoute } from 'vue-router'
-
-// Utilities
-import { computed, ref, shallowRef } from 'vue'
-
-// Stores
-import { useUserStore } from '@vuetify/one'
-
 export type Pin = {
   category: string
   title: string
diff --git a/packages/docs/src/store/promotions.ts b/packages/docs/src/stores/promotions.ts
similarity index 84%
rename from packages/docs/src/store/promotions.ts
rename to packages/docs/src/stores/promotions.ts
index 490d78b97e8..3b8a56916b8 100644
--- a/packages/docs/src/store/promotions.ts
+++ b/packages/docs/src/stores/promotions.ts
@@ -1,10 +1,3 @@
-// Composables
-import { useCosmic } from '@/composables/cosmic'
-
-// Utilities
-import { defineStore } from 'pinia'
-import { onBeforeMount, ref } from 'vue'
-
 // Types
 type CosmicImage = {
   url: string
diff --git a/packages/docs/src/store/releases.ts b/packages/docs/src/stores/releases.ts
similarity index 97%
rename from packages/docs/src/store/releases.ts
rename to packages/docs/src/stores/releases.ts
index 945ca2ecfb4..68aa75b25ba 100644
--- a/packages/docs/src/store/releases.ts
+++ b/packages/docs/src/stores/releases.ts
@@ -1,9 +1,6 @@
 // Plugins
 import type { components as octokitComponents } from '@octokit/openapi-types'
 
-// Utilities
-import { defineStore } from 'pinia'
-
 export type Release = octokitComponents['schemas']['release']
 
 export type State = {
diff --git a/packages/docs/src/store/shopify.ts b/packages/docs/src/stores/shopify.ts
similarity index 88%
rename from packages/docs/src/store/shopify.ts
rename to packages/docs/src/stores/shopify.ts
index 2515baa9a25..6760026e1bb 100644
--- a/packages/docs/src/store/shopify.ts
+++ b/packages/docs/src/stores/shopify.ts
@@ -1,9 +1,3 @@
-// Composables
-import { useCosmic } from '@/composables/cosmic'
-
-// Utilities
-import { defineStore } from 'pinia'
-
 interface Product {
   href: string
   title: string
diff --git a/packages/docs/src/store/sponsors.ts b/packages/docs/src/stores/sponsors.ts
similarity index 85%
rename from packages/docs/src/store/sponsors.ts
rename to packages/docs/src/stores/sponsors.ts
index 6d13e496804..8b04021c73c 100644
--- a/packages/docs/src/store/sponsors.ts
+++ b/packages/docs/src/stores/sponsors.ts
@@ -1,10 +1,3 @@
-// Composables
-import { useCosmic } from '@/composables/cosmic'
-
-// Utilities
-import { defineStore } from 'pinia'
-import { computed, onBeforeMount, onServerPrefetch, ref } from 'vue'
-
 // Types
 export interface Sponsor {
   metadata: {
diff --git a/packages/docs/src/store/spot.ts b/packages/docs/src/stores/spot.ts
similarity index 81%
rename from packages/docs/src/store/spot.ts
rename to packages/docs/src/stores/spot.ts
index 494533b4166..e043047847f 100644
--- a/packages/docs/src/store/spot.ts
+++ b/packages/docs/src/stores/spot.ts
@@ -1,11 +1,3 @@
-// Composables
-import { useCosmic } from '@/composables/cosmic'
-import { useDate } from 'vuetify'
-
-// Utilities
-import { defineStore } from 'pinia'
-import { computed, onBeforeMount, ref } from 'vue'
-
 // Types
 interface Spot {
   slug: string
diff --git a/packages/docs/src/store/team.ts b/packages/docs/src/stores/team.ts
similarity index 92%
rename from packages/docs/src/store/team.ts
rename to packages/docs/src/stores/team.ts
index ba001be29e6..68f9d879fd4 100644
--- a/packages/docs/src/store/team.ts
+++ b/packages/docs/src/stores/team.ts
@@ -1,10 +1,6 @@
 // Plugins
 import octokit from '@/plugins/octokit'
 
-// Utilities
-import { defineStore } from 'pinia'
-import { onBeforeMount, ref } from 'vue'
-
 // Data
 import team from '@/data/team.json'
 
diff --git a/packages/docs/src/util/analytics.ts b/packages/docs/src/utils/analytics.ts
similarity index 79%
rename from packages/docs/src/util/analytics.ts
rename to packages/docs/src/utils/analytics.ts
index eec4ca706cb..12f284906a7 100644
--- a/packages/docs/src/util/analytics.ts
+++ b/packages/docs/src/utils/analytics.ts
@@ -1,8 +1,5 @@
 /* eslint-disable camelcase */
 
-// Composables
-import { useGtag } from 'vue-gtag-next'
-
 export function gtagClick (
   event_category: string,
   event_label: string,
diff --git a/packages/docs/src/utils/api.ts b/packages/docs/src/utils/api.ts
new file mode 100644
index 00000000000..7383eb441fc
--- /dev/null
+++ b/packages/docs/src/utils/api.ts
@@ -0,0 +1,46 @@
+export type Item = {
+  name: string
+  source: string
+  type?: string | string[]
+  anyOf: Item[]
+  enum?: string[]
+  parameters?: Item[]
+  returnType?: Item
+  default: any
+  description: Record<string, string>
+  descriptionSource?: Record<string, string>
+  snippet: string
+  value: any
+  example: string
+  props: unknown
+  $ref?: string
+  properties?: Record<string, Item>
+  items?: Item | Item[]
+  minItems?: number
+  maxItems?: number
+  allOf?: Item[]
+}
+
+export function stripLinks (str: string): [string, Record<string, string>] {
+  let out = str.slice()
+  const obj: Record<string, string> = {}
+  const regexp = /<a.*?>(.*?)<\/a>/g
+
+  let matches = regexp.exec(str)
+
+  while (matches !== null) {
+    obj[matches[1]] = matches[0]
+    out = out.replace(matches[0], matches[1])
+
+    matches = regexp.exec(str)
+  }
+
+  return [out, obj]
+}
+
+export function insertLinks (str: string, stripped: Record<string, string>) {
+  for (const [key, value] of Object.entries(stripped)) {
+    str = str.replaceAll(new RegExp(`(^|\\W)(${key})(\\W|$)`, 'g'), `$1${value}$3`)
+  }
+  return str
+}
diff --git a/packages/docs/src/util/globals.ts b/packages/docs/src/utils/globals.ts
similarity index 100%
rename from packages/docs/src/util/globals.ts
rename to packages/docs/src/utils/globals.ts
diff --git a/packages/docs/src/util/helpers.ts b/packages/docs/src/utils/helpers.ts
similarity index 98%
rename from packages/docs/src/util/helpers.ts
rename to packages/docs/src/utils/helpers.ts
index 8b28711f0e4..0e1a740c8eb 100644
--- a/packages/docs/src/util/helpers.ts
+++ b/packages/docs/src/utils/helpers.ts
@@ -1,6 +1,3 @@
-// Globals
-import { IN_BROWSER } from '@/util/globals'
-
 export function copyElementContent (el: HTMLElement) {
   if (!IN_BROWSER) return
 
diff --git a/packages/docs/src/util/markdown-it-rules.ts b/packages/docs/src/utils/markdown-it-rules.ts
similarity index 94%
rename from packages/docs/src/util/markdown-it-rules.ts
rename to packages/docs/src/utils/markdown-it-rules.ts
index 6be233a28fe..cd5921a0bac 100644
--- a/packages/docs/src/util/markdown-it-rules.ts
+++ b/packages/docs/src/utils/markdown-it-rules.ts
@@ -11,7 +11,7 @@ function addCodeRules (md: MarkdownIt) {
     const handler = fence || self.renderToken
     const token = tokens[idx]
 
-    return `<app-markup resource="${token?.attrs?.[0][1] ?? ''}" class="mb-4">${handler(tokens, idx, options, env, self)}</app-markup>`
+    return `<AppMarkup resource="${token?.attrs?.[0][1] ?? ''}" class="mb-4">${handler(tokens, idx, options, env, self)}</AppMarkup>`
   }
   md.renderer.rules.code_inline = function (tokens, idx) {
     const token = tokens[idx]
@@ -46,7 +46,7 @@ function addImageRules (md: MarkdownIt) {
 
     return `
 <div>
-  <app-figure
+  <AppFigure
     ${alt ? `alt="${alt}"` : ''}
     ${src ? `src="${src}"` : ''}
     ${title ? `title="${title}"` : ''}
@@ -59,7 +59,7 @@ function addImageRules (md: MarkdownIt) {
 
 function addHrRules (md: MarkdownIt) {
   md.renderer.rules.hr = function (tokens, idx, options, env, self) {
-    return '<app-divider />'
+    return '<AppDivider />'
   }
 }
 
@@ -89,14 +89,14 @@ function addHeadingRules (md: MarkdownIt) {
       next.children = next.children.filter(token => !['link_open', 'link_close'].includes(token.type))
     }
 
-    tokens[idx].tag = 'app-heading'
+    tokens[idx].tag = 'AppHeading'
     tokens[idx].attrSet('href', href ?? '')
     tokens[idx].attrSet('level', level.toString())
 
     return self.renderToken(tokens, idx, options)
   }
   md.renderer.rules.heading_close = (tokens, idx, options, env, self) => {
-    tokens[idx].tag = 'app-heading'
+    tokens[idx].tag = 'AppHeading'
 
     return self.renderToken(tokens, idx, options)
   }
@@ -104,7 +104,7 @@ function addHeadingRules (md: MarkdownIt) {
 
 function addLinkRules (md: MarkdownIt) {
   md.renderer.rules.link_open = md.renderer.rules.link_close = (tokens, idx, options, env, self) => {
-    tokens[idx].tag = 'app-link'
+    tokens[idx].tag = 'AppLink'
 
     return self.renderToken(tokens, idx, options)
   }
@@ -112,7 +112,7 @@ function addLinkRules (md: MarkdownIt) {
 
 function addTableRules (md: MarkdownIt) {
   md.renderer.rules.table_open = md.renderer.rules.table_close = (tokens, idx, options, env, self) => {
-    tokens[idx].tag = 'app-table'
+    tokens[idx].tag = 'AppTable'
 
     return self.renderToken(tokens, idx, options)
   }
@@ -137,9 +137,9 @@ function createContainer (md: MarkdownIt, type: string, title?: string) {
     render (tokens, idx) {
       const token = tokens[idx]
       if (token.nesting === 1) {
-        return `<alert type="${type}">\n` + (title ? `<p><strong>${title}:</strong></p>\n` : '')
+        return `<Alert type="${type}">\n` + (title ? `<p><strong>${title}:</strong></p>\n` : '')
       } else {
-        return `</alert>\n`
+        return `</Alert>\n`
       }
     },
   } satisfies { render: RenderRule })
diff --git a/packages/docs/src/util/markdown-it.ts b/packages/docs/src/utils/markdown-it.ts
similarity index 100%
rename from packages/docs/src/util/markdown-it.ts
rename to packages/docs/src/utils/markdown-it.ts
diff --git a/packages/docs/src/util/metadata.ts b/packages/docs/src/utils/metadata.ts
similarity index 100%
rename from packages/docs/src/util/metadata.ts
rename to packages/docs/src/utils/metadata.ts
diff --git a/packages/docs/src/util/routes.ts b/packages/docs/src/utils/routes.ts
similarity index 97%
rename from packages/docs/src/util/routes.ts
rename to packages/docs/src/utils/routes.ts
index b4c6b927766..87cb8c7ef06 100644
--- a/packages/docs/src/util/routes.ts
+++ b/packages/docs/src/utils/routes.ts
@@ -3,9 +3,6 @@ import locales from '@/i18n/locales.json'
 import generatedPages from 'virtual:generated-pages'
 import redirects from '@/data/301.json'
 
-// Globals
-import { IN_BROWSER } from '@/util/globals'
-
 // Regexp
 // const genericLocaleRegexp = /[a-z]{2,3}|[a-z]{2,3}-[a-zA-Z]{4}|[a-z]{2,3}-[A-Z]{2,3}/
 export const languagePattern = locales.filter(l => l.enabled).map(lang => lang.alternate || lang.locale).join('|')
diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
index 8ea7290b139..d7508d54a0c 100644
--- a/packages/docs/vite.config.mts
+++ b/packages/docs/vite.config.mts
@@ -3,11 +3,12 @@ import fs from 'fs/promises'
 import { fileURLToPath } from 'url'
 
 import { defineConfig, loadEnv } from 'vite'
+import AutoImport from 'unplugin-auto-import/vite'
 import Vue, { parseVueRequest } from '@vitejs/plugin-vue'
 import ViteFonts from 'unplugin-fonts/vite'
 import Pages from 'vite-plugin-pages'
 import Layouts from 'vite-plugin-vue-layouts'
-// import Components from 'unplugin-vue-components/vite'
+import Components from 'unplugin-vue-components/vite'
 import Markdown from 'vite-plugin-md'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
@@ -18,7 +19,7 @@ import basicSsl from '@vitejs/plugin-basic-ssl'
 import { configureMarkdown, parseMeta } from './build/markdown-it'
 import Api from './build/api-plugin'
 import { Examples } from './build/examples-plugin'
-import { genAppMetaInfo } from './src/util/metadata'
+import { genAppMetaInfo } from './src/utils/metadata'
 
 const resolve = (file: string) => fileURLToPath(new URL(file, import.meta.url))
 
@@ -69,6 +70,32 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
       },
     },
     plugins: [
+      // https://github.com/unplugin/unplugin-auto-import
+      AutoImport({
+        dirs: [
+          './src/composables/**',
+          './src/stores/**',
+          './src/utils/**',
+        ],
+        imports: [
+          {
+            '@vuetify/one': ['createOne', 'useAuthStore', 'useHttpStore', 'useOneStore', 'useUserStore', 'useSettingsStore'],
+            'lodash-es': ['camelCase', 'kebabCase', 'upperFirst'],
+            pinia: ['defineStore', 'storeToRefs'],
+            vue: [
+              'camelize', 'computed', 'h', 'mergeProps', 'nextTick',
+              'onBeforeMount', 'onBeforeUnmount', 'onMounted', 'onScopeDispose', 'onServerPrefetch',
+              'ref', 'shallowRef', 'useAttrs', 'watch', 'watchEffect'
+            ],
+            vuetify: ['useDate', 'useDisplay', 'useGoTo', 'useRtl', 'useTheme'],
+            'vue-gtag-next': ['useGtag'],
+            'vue-i18n': ['useI18n'],
+            'vue-router': ['onBeforeRouteLeave', 'onBeforeRouteUpdate', 'useRoute', 'useRouter'],
+          }
+        ],
+        vueTemplate: true,
+      }),
+
       // https://github.com/stafyniaksacha/vite-plugin-fonts
       ViteFonts({
         google: {
@@ -82,15 +109,10 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
       Api(),
 
       // https://github.com/antfu/unplugin-vue-components
-      // Components({
-      //   deep: true,
-      //   dirs: ['src/components-v3'],
-      //   directoryAsNamespace: true,
-      //   globalNamespaces: ['icons'],
-      //   dts: true,
-      //   extensions: ['vue', 'md'],
-      //   include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-      // }),
+      Components({
+        directoryAsNamespace: true,
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      }),
 
       // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
       Layouts({
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 7ae240eb65c..bcb6a48aa48 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.5.3",
+  "version": "3.5.8",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
index 714a227d68a..535b782dd17 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass
@@ -75,8 +75,8 @@
     .v-field__input > input
       caret-color: transparent
 
-  &--single
-    &.v-text-field .v-field--focused input
+  &--single:not(.v-autocomplete--selection-slot)
+    &.v-text-field input
       flex: 1 1
       position: absolute
       left: 0
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 80e62ee3399..0f9095d85b5 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -175,6 +175,9 @@ export const VAutocomplete = genericComponent<new <
       return filteredItems.value
     })
 
+    const hasChips = computed(() => !!(props.chips || slots.chip))
+    const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
+
     const selectedValues = computed(() => model.value.map(selection => selection.props.value))
 
     const highlightFirst = computed(() => {
@@ -255,9 +258,8 @@ export const VAutocomplete = genericComponent<new <
         }
 
         const originalSelectionIndex = selectionIndex.value
-
         const selectedItem = model.value[selectionIndex.value]
-        if (selectedItem && !selectedItem.props.disabled) select(selectedItem)
+        if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false)
 
         selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
       }
@@ -322,34 +324,35 @@ export const VAutocomplete = genericComponent<new <
 
     const isSelecting = shallowRef(false)
 
-    function select (item: ListItem, add = true) {
+    /** @param set - null means toggle */
+    function select (item: ListItem, set: boolean | null = true) {
       if (item.props.disabled) return
 
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
+        const add = set == null ? !~index : set
 
-        if (index === -1) {
-          model.value = [...model.value, item]
-        } else {
-          const value = [...model.value]
+        if (~index) {
+          const value = add ? [...model.value, item] : [...model.value]
           value.splice(index, 1)
           model.value = value
+        } else if (add) {
+          model.value = [...model.value, item]
         }
 
         if (props.clearOnSelect) {
           search.value = ''
         }
       } else {
+        const add = set !== false
         model.value = add ? [item] : []
+        search.value = add && !hasSelectionSlot.value ? item.title : ''
 
-        isSelecting.value = true
-
-        search.value = add ? item.title : ''
-
-        menu.value = false
-        isPristine.value = true
-
-        nextTick(() => (isSelecting.value = false))
+        // watch for search watcher to trigger
+        nextTick(() => {
+          menu.value = false
+          isPristine.value = true
+        })
       }
     }
 
@@ -358,7 +361,7 @@ export const VAutocomplete = genericComponent<new <
 
       if (val) {
         isSelecting.value = true
-        search.value = props.multiple ? '' : String(model.value.at(-1)?.props.title ?? '')
+        search.value = (props.multiple || hasSelectionSlot.value) ? '' : String(model.value.at(-1)?.props.title ?? '')
         isPristine.value = true
 
         nextTick(() => isSelecting.value = false)
@@ -396,20 +399,13 @@ export const VAutocomplete = genericComponent<new <
       }
     })
 
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return
 
-      if (!val.length && props.hideNoData) {
-        menu.value = false
-      }
-
-      if (!oldVal.length && val.length) {
-        menu.value = true
-      }
+      menu.value = true
     })
 
     useRender(() => {
-      const hasChips = !!(props.chips || slots.chip)
       const hasList = !!(
         (!props.hideNoData || displayItems.value.length) ||
         slots['prepend-item'] ||
@@ -436,7 +432,7 @@ export const VAutocomplete = genericComponent<new <
             {
               'v-autocomplete--active-menu': menu.value,
               'v-autocomplete--chips': !!props.chips,
-              'v-autocomplete--selection-slot': !!slots.selection,
+              'v-autocomplete--selection-slot': !!hasSelectionSlot.value,
               'v-autocomplete--selecting-index': selectionIndex.value > -1,
             },
             props.class,
@@ -493,7 +489,7 @@ export const VAutocomplete = genericComponent<new <
                             ref: itemRef,
                             key: index,
                             active: (highlightFirst.value && index === 0) ? true : undefined,
-                            onClick: () => select(item),
+                            onClick: () => select(item, null),
                           })
 
                           return slots.item?.({
@@ -501,7 +497,7 @@ export const VAutocomplete = genericComponent<new <
                             index,
                             props: itemProps,
                           }) ?? (
-                            <VListItem { ...itemProps }>
+                            <VListItem { ...itemProps } role="option">
                             {{
                               prepend: ({ isSelected }) => (
                                 <>
@@ -557,10 +553,10 @@ export const VAutocomplete = genericComponent<new <
                     'onUpdate:modelValue': undefined,
                   }
 
-                  const hasSlot = hasChips ? !!slots.chip : !!slots.selection
+                  const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection
                   const slotContent = hasSlot
                     ? ensureValidVNode(
-                      hasChips
+                      hasChips.value
                         ? slots.chip!({ item, index, props: slotProps })
                         : slots.selection!({ item, index })
                     )
@@ -580,7 +576,7 @@ export const VAutocomplete = genericComponent<new <
                       ]}
                       style={ index === selectionIndex.value ? textColorStyles.value : {} }
                     >
-                      { hasChips ? (
+                      { hasChips.value ? (
                         !slots.chip ? (
                           <VChip
                             key="chip"
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
index 86891de4596..58197dc9a39 100644
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
@@ -494,6 +494,7 @@ describe('VAutocomplete', () => {
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/18796
+  // https://github.com/vuetifyjs/vuetify/issues/19235
   it('should allow deleting selection via closable-chips', () => {
     const selectedItem = ref('California')
 
@@ -512,6 +513,71 @@ describe('VAutocomplete', () => {
       })
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19261
+  it('should not toggle v-model to null when clicking already selected item in single selection mode', () => {
+    const selectedItem = ref('abc')
+
+    cy.mount(() => (
+      <VAutocomplete
+        v-model={ selectedItem.value }
+        items={['abc', 'def']}
+      />
+    ))
+
+    cy.get('.v-autocomplete').click()
+
+    cy.get('.v-list-item').should('have.length', 2)
+    cy.get('.v-list-item').eq(0).click({ waitForAnimations: false }).should(() => {
+      expect(selectedItem.value).equal('abc')
+    })
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/18556
+  it('should show menu if focused and items are added', () => {
+    cy
+      .mount(props => (<VAutocomplete { ...props } />))
+      .get('.v-autocomplete input')
+      .focus()
+      .get('.v-overlay')
+      .should('not.exist')
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-overlay')
+      .should('exist')
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/17573
+  // When using selection slot or chips, input displayed next to chip/selection slot should be always empty
+  it('should always have empty input value when it is unfocused and when using selection slot or chips', () => {
+    const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
+    const selectedItem = ref('Item 1')
+
+    cy
+      .mount(() => (
+        <VAutocomplete
+          items={ items }
+          chips
+          v-model={ selectedItem.value }
+        />
+      ))
+      .get('.v-autocomplete').click()
+      .get('.v-autocomplete input').should('have.value', '')
+      // Blur input with a custom search input value
+      .type('test')
+      .blur()
+      .should('have.value', '')
+      .should(() => {
+        expect(selectedItem.value).to.equal('Item 1')
+      })
+      // Search existing item and click to select
+      .get('.v-autocomplete').click()
+      .get('.v-autocomplete input').should('have.value', '')
+      .type('Item 1')
+      .get('.v-list-item').eq(0).click({ waitForAnimations: false })
+      .should(() => {
+        expect(selectedItem.value).to.equal('Item 1')
+      })
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })
diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.tsx b/packages/vuetify/src/components/VAvatar/VAvatar.tsx
index bc52627c8aa..7c0a0ebf9e3 100644
--- a/packages/vuetify/src/components/VAvatar/VAvatar.tsx
+++ b/packages/vuetify/src/components/VAvatar/VAvatar.tsx
@@ -79,7 +79,7 @@ export const VAvatar = genericComponent()({
           <VDefaultsProvider
             key="content-defaults"
             defaults={{
-              VAvatar: {
+              VImg: {
                 cover: true,
                 image: props.image,
               },
@@ -88,7 +88,7 @@ export const VAvatar = genericComponent()({
               },
             }}
           >
-            { slots.default?.() }
+            { slots.default() }
           </VDefaultsProvider>
         )}
 
diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
index d188ade61ba..686200e3144 100644
--- a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
+++ b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
@@ -75,6 +75,7 @@ export const VCheckbox = genericComponent<new <T>(
               messagesId,
               isDisabled,
               isReadonly,
+              isValid,
             }) => (
               <VCheckboxBtn
                 { ...checkboxProps }
@@ -83,6 +84,7 @@ export const VCheckbox = genericComponent<new <T>(
                 disabled={ isDisabled.value }
                 readonly={ isReadonly.value }
                 { ...controlAttrs }
+                error={ isValid.value === false }
                 v-model={ model.value }
                 onFocus={ focus }
                 onBlur={ blur }
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
index 641376fa5d6..df290c1e5a3 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
@@ -14,7 +14,7 @@ import { useRtl } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { extractColor, modes, nullColor } from './util'
 import { consoleWarn, defineComponent, HSVtoCSS, omit, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'
 
@@ -77,8 +77,8 @@ export const VColorPicker = defineComponent({
 
   setup (props) {
     const mode = useProxiedModel(props, 'mode')
-    const lastPickedColor = ref<HSV | null>(null)
-    const currentColor = useProxiedModel(
+    const hue = ref<number | null>(null)
+    const model = useProxiedModel(
       props,
       'modelValue',
       undefined,
@@ -93,11 +93,6 @@ export const VColorPicker = defineComponent({
           return null
         }
 
-        if (lastPickedColor.value) {
-          c = { ...c, h: lastPickedColor.value.h }
-          lastPickedColor.value = null
-        }
-
         return c
       },
       v => {
@@ -106,11 +101,28 @@ export const VColorPicker = defineComponent({
         return extractColor(v, props.modelValue)
       }
     )
+    const currentColor = computed(() => {
+      return model.value
+        ? { ...model.value, h: hue.value ?? model.value.h }
+        : null
+    })
     const { rtlClasses } = useRtl()
 
+    let externalChange = true
+    watch(model, v => {
+      if (!externalChange) {
+        // prevent hue shift from rgb conversion inaccuracy
+        externalChange = true
+        return
+      }
+      if (!v) return
+      hue.value = v.h
+    }, { immediate: true })
+
     const updateColor = (hsva: HSV) => {
-      currentColor.value = hsva
-      lastPickedColor.value = hsva
+      externalChange = false
+      hue.value = hsva.h
+      model.value = hsva
     }
 
     onMounted(() => {
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.sass b/packages/vuetify/src/components/VCombobox/VCombobox.sass
index b5a92c4539f..073bdc3bee4 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.sass
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.sass
@@ -75,8 +75,8 @@
     .v-field__input > input
       caret-color: transparent
 
-  &--single
-    &.v-text-field .v-field--focused input
+  &--single:not(.v-combobox--selection-slot)
+    &.v-text-field input
       flex: 1 1
       position: absolute
       left: 0
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 821cf0df814..4aa75f9a53a 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -165,14 +165,19 @@ export const VCombobox = genericComponent<new <
       }
     )
     const form = useForm()
-    const _search = shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '')
+
+    const hasChips = computed(() => !!(props.chips || slots.chip))
+    const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
+
+    const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '')
+
     const search = computed<string>({
       get: () => {
         return _search.value
       },
       set: (val: string | null) => {
         _search.value = val ?? ''
-        if (!props.multiple) {
+        if (!props.multiple && !hasSelectionSlot.value) {
           model.value = [transformItem(props, val)]
         }
 
@@ -208,8 +213,9 @@ export const VCombobox = genericComponent<new <
 
       emit('update:search', value)
     })
+
     watch(model, value => {
-      if (!props.multiple) {
+      if (!props.multiple && !hasSelectionSlot.value) {
         _search.value = value[0]?.title ?? ''
       }
     })
@@ -295,6 +301,11 @@ export const VCombobox = genericComponent<new <
         listRef.value?.focus('next')
       }
 
+      if (e.key === 'Enter' && search.value) {
+        select(transformItem(props, search.value))
+        if (hasSelectionSlot.value) _search.value = ''
+      }
+
       if (!props.multiple) return
 
       if (['Backspace', 'Delete'].includes(e.key)) {
@@ -340,11 +351,6 @@ export const VCombobox = genericComponent<new <
           vTextFieldRef.value.setSelectionRange(0, 0)
         }
       }
-
-      if (e.key === 'Enter' && search.value) {
-        select(transformItem(props, search.value))
-        search.value = ''
-      }
     }
     function onAfterLeave () {
       if (isFocused.value) {
@@ -354,6 +360,8 @@ export const VCombobox = genericComponent<new <
     }
     /** @param set - null means toggle */
     function select (item: ListItem, set: boolean | null = true) {
+      if (item.props.disabled) return
+
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
         const add = set == null ? !~index : set
@@ -372,7 +380,7 @@ export const VCombobox = genericComponent<new <
       } else {
         const add = set !== false
         model.value = add ? [item] : []
-        _search.value = add ? item.title : ''
+        _search.value = add && !hasSelectionSlot.value ? item.title : ''
 
         // watch for search watcher to trigger
         nextTick(() => {
@@ -407,8 +415,22 @@ export const VCombobox = genericComponent<new <
         !model.value.some(({ value }) => value === displayItems.value[0].value)
       ) {
         select(displayItems.value[0])
-      } else if (props.multiple && search.value) {
-        select(transformItem(props, search.value))
+        return
+      }
+
+      if (search.value) {
+        if (props.multiple) {
+          select(transformItem(props, search.value))
+          return
+        }
+
+        if (!hasSelectionSlot.value) return
+
+        if (model.value.some(({ title }) => title === search.value)) {
+          _search.value = ''
+        } else {
+          select(transformItem(props, search.value))
+        }
       }
     })
 
@@ -423,20 +445,13 @@ export const VCombobox = genericComponent<new <
       }
     })
 
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return
-
-      if (!val.length && props.hideNoData) {
-        menu.value = false
-      }
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return
 
-      if (!oldVal.length && val.length) {
-        menu.value = true
-      }
+      menu.value = true
     })
 
     useRender(() => {
-      const hasChips = !!(props.chips || slots.chip)
       const hasList = !!(
         (!props.hideNoData || displayItems.value.length) ||
         slots['prepend-item'] ||
@@ -461,7 +476,7 @@ export const VCombobox = genericComponent<new <
             {
               'v-combobox--active-menu': menu.value,
               'v-combobox--chips': !!props.chips,
-              'v-combobox--selection-slot': !!slots.selection,
+              'v-combobox--selection-slot': !!hasSelectionSlot.value,
               'v-combobox--selecting-index': selectionIndex.value > -1,
               [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true,
             },
@@ -527,7 +542,7 @@ export const VCombobox = genericComponent<new <
                             index,
                             props: itemProps,
                           }) ?? (
-                            <VListItem { ...itemProps }>
+                            <VListItem { ...itemProps } role="option">
                             {{
                               prepend: ({ isSelected }) => (
                                 <>
@@ -583,10 +598,10 @@ export const VCombobox = genericComponent<new <
                     'onUpdate:modelValue': undefined,
                   }
 
-                  const hasSlot = hasChips ? !!slots.chip : !!slots.selection
+                  const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection
                   const slotContent = hasSlot
                     ? ensureValidVNode(
-                      hasChips
+                      hasChips.value
                         ? slots.chip!({ item, index, props: slotProps })
                         : slots.selection!({ item, index })
                     )
@@ -606,7 +621,7 @@ export const VCombobox = genericComponent<new <
                       ]}
                       style={ index === selectionIndex.value ? textColorStyles.value : {} }
                     >
-                      { hasChips ? (
+                      { hasChips.value ? (
                         !slots.chip ? (
                           <VChip
                             key="chip"
diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
index 052c839f621..37438b8f83d 100644
--- a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
+++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -652,6 +652,90 @@ describe('VCombobox', () => {
       })
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/18556
+  it('should show menu if focused and items are added', () => {
+    cy
+      .mount(props => (<VCombobox { ...props } />))
+      .get('.v-combobox input')
+      .focus()
+      .get('.v-overlay')
+      .should('not.exist')
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-overlay')
+      .should('exist')
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/17573
+  // When using selection slot or chips, input displayed next to chip/selection slot should be always empty
+  it('should always have empty input value when it is unfocused and when using selection slot or chips', () => {
+    const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
+    const selectedItem = ref('Item 1')
+
+    cy
+      .mount(() => (
+        <VCombobox
+          items={ items }
+          chips
+          v-model={ selectedItem.value }
+        />
+      ))
+      .get('.v-combobox').click()
+      .get('.v-combobox input').should('have.value', '')
+      // Blur input with a custom search input value
+      .type('test')
+      .blur()
+      .should('have.value', '')
+      .should(() => {
+        expect(selectedItem.value).to.equal('test')
+      })
+      // Press enter key with a custom search input value
+      .get('.v-combobox').click()
+      .get('.v-combobox input').should('have.value', '')
+      .type('test 2')
+      .trigger('keydown', { key: keyValues.enter, waitForAnimations: false })
+      .should('have.value', '')
+      .should(() => {
+        expect(selectedItem.value).to.equal('test 2')
+      })
+      // Search existing item and click to select
+      .get('.v-combobox').click()
+      .get('.v-combobox input').type('Item 1')
+      .get('.v-list-item').eq(0).click({ waitForAnimations: false })
+      .get('.v-combobox input').should('have.value', '')
+      .should(() => {
+        expect(selectedItem.value).to.equal('Item 1')
+      })
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/19319
+  it('should respect return-object when blurring', () => {
+    const items = [
+      { title: 'Item 1', value: 'item1' },
+      { title: 'Item 2', value: 'item2' },
+      { title: 'Item 3', value: 'item3' },
+      { title: 'Item 4', value: 'item4' },
+    ]
+    const model = ref()
+    const search = ref()
+
+    cy.mount(() => (
+      <VCombobox
+        search={ search.value }
+        v-model={ model.value }
+        items={ items }
+      />
+    ))
+      .get('.v-combobox').click()
+      .get('.v-list-item').eq(0).click({ waitForAnimations: false })
+      .should(() => {
+        expect(model.value).to.deep.equal({ title: 'Item 1', value: 'item1' })
+      })
+      .get('.v-combobox input').blur()
+      .should(() => {
+        expect(model.value).to.deep.equal({ title: 'Item 1', value: 'item1' })
+      })
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx
index 63864bab2a9..d28d9bd51e4 100644
--- a/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx
+++ b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx
@@ -26,8 +26,9 @@ import { genericComponent, propsFactory, useRender } from '@/util'
 import type { DataIteratorItem } from './composables/items'
 import type { Group } from '@/components/VDataTable/composables/group'
 import type { SortItem } from '@/components/VDataTable/composables/sort'
+import type { GenericProps } from '@/util'
 
-type VDataIteratorSlotProps = {
+type VDataIteratorSlotProps<T> = {
   page: number
   itemsPerPage: number
   sortBy: readonly SortItem[]
@@ -45,14 +46,14 @@ type VDataIteratorSlotProps = {
   toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']
   isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']
   toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']
-  items: readonly DataIteratorItem[]
-  groupedItems: readonly (DataIteratorItem | Group<DataIteratorItem>)[]
+  items: readonly DataIteratorItem<T>[]
+  groupedItems: readonly (DataIteratorItem<T> | Group<DataIteratorItem<T>>)[]
 }
 
-export type VDataIteratorSlots = {
-  default: VDataIteratorSlotProps
-  header: VDataIteratorSlotProps
-  footer: VDataIteratorSlotProps
+export type VDataIteratorSlots<T> = {
+  default: VDataIteratorSlotProps<T>
+  header: VDataIteratorSlotProps<T>
+  footer: VDataIteratorSlotProps<T>
   'no-data': never
 }
 
@@ -71,7 +72,12 @@ export const makeVDataIteratorProps = propsFactory({
   ...makeTagProps(),
 }, 'VDataIterator')
 
-export const VDataIterator = genericComponent<VDataIteratorSlots>()({
+export const VDataIterator = genericComponent<new <T> (
+  props: {
+    items?: readonly T[]
+  },
+  slots: VDataIteratorSlots<T>,
+) => GenericProps<typeof props, typeof slots>>()({
   name: 'VDataIterator',
 
   props: makeVDataIteratorProps(),
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
index 43d6913eb34..9a6d241e0c4 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -25,9 +25,9 @@ import { computed, toRef } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { UnwrapRef } from 'vue'
+import type { DeepReadonly, UnwrapRef } from 'vue'
 import type { Group } from './composables/group'
-import type { CellProps, DataTableItem, InternalDataTableHeader, RowProps } from './types'
+import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types'
 import type { VDataTableHeadersSlots } from './VDataTableHeaders'
 import type { VDataTableRowsSlots } from './VDataTableRows'
 import type { GenericProps, SelectItemKey } from '@/util'
@@ -102,6 +102,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
     rowProps?: RowProps<ItemType<T>>
     cellProps?: CellProps<ItemType<T>>
     itemSelectable?: SelectItemKey<ItemType<T>>
+    headers?: DeepReadonly<DataTableHeader<ItemType<T>>[]>
     modelValue?: V
     'onUpdate:modelValue'?: (value: V) => void
   },
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index 9d29475fc24..bef30691df4 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -233,3 +233,5 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     })
   },
 })
+
+export type VDataTableHeaders = InstanceType<typeof VDataTableHeaders>
diff --git a/packages/vuetify/src/components/VDataTable/index.ts b/packages/vuetify/src/components/VDataTable/index.ts
index be3a15cacc5..da1fdaff415 100644
--- a/packages/vuetify/src/components/VDataTable/index.ts
+++ b/packages/vuetify/src/components/VDataTable/index.ts
@@ -1,4 +1,5 @@
 export { VDataTable } from './VDataTable'
+export { VDataTableHeaders } from './VDataTableHeaders'
 export { VDataTableFooter } from './VDataTableFooter'
 export { VDataTableRows } from './VDataTableRows'
 export { VDataTableRow } from './VDataTableRow'
diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts
index 48b74972c10..e824ce07fbf 100644
--- a/packages/vuetify/src/components/VDataTable/types.ts
+++ b/packages/vuetify/src/components/VDataTable/types.ts
@@ -7,9 +7,9 @@ import type { SelectItemKey } from '@/util'
 
 export type DataTableCompareFunction<T = any> = (a: T, b: T) => number
 
-export type DataTableHeader = {
+export type DataTableHeader<T = Record<string, any>> = {
   key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {})
-  value?: SelectItemKey
+  value?: SelectItemKey<T>
   title?: string
 
   fixed?: boolean
@@ -27,7 +27,7 @@ export type DataTableHeader = {
   sortRaw?: DataTableCompareFunction
   filter?: FilterFunction
 
-  children?: DataTableHeader[]
+  children?: DataTableHeader<T>[]
 }
 
 export type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & {
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.sass b/packages/vuetify/src/components/VDatePicker/VDatePicker.sass
index 68549b468bb..3bbbb7165cf 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.sass
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.sass
@@ -1,24 +1,9 @@
 @use '../../styles/tools'
-
-.v-date-picker__input
-  padding-top: 16px
-  padding-left: 24px
-  padding-right: 24px
+@use './variables' as *
 
 .v-date-picker
   overflow: hidden
-  width: 360px
+  width: $date-picker-width
 
   &--show-week
-    width: 408px
-
-.v-date-picker-month
-  padding: 0 12px 12px
-
-.v-date-picker-month__day
-  height: 48px
-  width: 48px
-
-  .v-btn
-    --v-btn-height: 28px
-    --v-btn-size: 0.85rem
+    width: $date-picker-show-week-width
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
index 92fe2d673ea..78d7eae311e 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -127,7 +127,7 @@ export const VDatePicker = genericComponent<new <
     })
     const text = computed(() => {
       return adapter.format(
-        adapter.parseISO(`${year.value}-${month.value + 1}-01`),
+        adapter.date(new Date(year.value, month.value, 1)),
         'monthAndYear',
       )
     })
@@ -182,7 +182,9 @@ export const VDatePicker = genericComponent<new <
       } else {
         year.value++
         month.value = 0
+        onUpdateYear(year.value)
       }
+      onUpdateMonth(month.value)
     }
 
     function onClickPrev () {
@@ -191,7 +193,9 @@ export const VDatePicker = genericComponent<new <
       } else {
         year.value--
         month.value = 11
+        onUpdateYear(year.value)
       }
+      onUpdateMonth(month.value)
     }
 
     function onClickDate () {
@@ -206,17 +210,17 @@ export const VDatePicker = genericComponent<new <
       viewMode.value = viewMode.value === 'year' ? 'month' : 'year'
     }
 
-    watch(month, () => {
+    function onUpdateMonth (value: number) {
       if (viewMode.value === 'months') onClickMonth()
 
-      emit('update:month', month.value)
-    })
+      emit('update:month', value)
+    }
 
-    watch(year, () => {
+    function onUpdateYear (value: number) {
       if (viewMode.value === 'year') onClickYear()
 
-      emit('update:year', year.value)
-    })
+      emit('update:year', value)
+    }
 
     watch(model, (val, oldVal) => {
       const before = adapter.date(wrapInArray(val)[0])
@@ -294,6 +298,7 @@ export const VDatePicker = genericComponent<new <
                       key="date-picker-months"
                       { ...datePickerMonthsProps }
                       v-model={ month.value }
+                      onUpdate:modelValue={ onUpdateMonth }
                       min={ minDate.value }
                       max={ maxDate.value }
                     />
@@ -302,6 +307,7 @@ export const VDatePicker = genericComponent<new <
                       key="date-picker-years"
                       { ...datePickerYearsProps }
                       v-model={ year.value }
+                      onUpdate:modelValue={ onUpdateYear }
                       min={ minDate.value }
                       max={ maxDate.value }
                     />
@@ -312,6 +318,8 @@ export const VDatePicker = genericComponent<new <
                       v-model={ model.value }
                       v-model:month={ month.value }
                       v-model:year={ year.value }
+                      onUpdate:month={ onUpdateMonth }
+                      onUpdate:year={ onUpdateYear }
                       min={ minDate.value }
                       max={ maxDate.value }
                     />
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass
index 668907fe349..73aea847136 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass
@@ -1,6 +1,9 @@
 @use '../../styles/settings'
+@use './variables' as *
 
 .v-date-picker-header
+  align-items: flex-end
+  height: $date-picker-header-height
   display: grid
   grid-template-areas: "prepend content append"
   grid-template-columns: min-content minmax(0, 1fr) min-content
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass
index 8dee84df6f6..e7ca1117746 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass
@@ -1,26 +1,28 @@
+@use './variables' as *
+
 .v-date-picker-month
   display: flex
   justify-content: center
-  min-width: 328px
+  padding: $date-picker-month-padding
 
   --v-date-picker-month-day-diff: 4px
 
 .v-date-picker-month__weeks
   display: grid
   grid-template-rows: min-content min-content min-content min-content min-content min-content min-content
-  row-gap: 4px
-  font-size: .875rem
+  column-gap: $date-picker-month-column-gap
+  font-size: $date-picker-month-font-size
 
   + .v-date-picker-month__days
     grid-row-gap: 0
 
 .v-date-picker-month__weekday
-  font-size: .875rem
+  font-size: $date-picker-month-font-size
 
 .v-date-picker-month__days
   display: grid
   grid-template-columns: min-content min-content min-content min-content min-content min-content min-content
-  row-gap: 4px
+  column-gap: $date-picker-month-column-gap
   flex: 1 1
   justify-content: space-around
 
@@ -29,12 +31,18 @@
   display: flex
   justify-content: center
   position: relative
+  height: $date-picker-month-day-size
+  width: $date-picker-month-day-size
 
   &--selected
     .v-btn
       background-color: rgb(var(--v-theme-surface-variant))
       color: rgb(var(--v-theme-on-surface-variant))
 
+  .v-btn.v-date-picker-month__day-btn
+    --v-btn-height: #{$date-picker-month-btn-height}
+    --v-btn-size: #{$date-picker-month-btn-size}
+
   &--week
     font-size: var(--v-btn-size)
 
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
index 7fdc07003ea..03c31f44a2c 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
@@ -79,7 +79,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
           rangeStop.value = _value
         }
 
-        const diff = adapter.getDiff(rangeStop.value, rangeStart.value)
+        const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days')
         const datesInRange = [rangeStart.value]
 
         for (let i = 1; i < diff; i++) {
@@ -182,6 +182,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
                   <VDefaultsProvider
                     defaults={{
                       VBtn: {
+                        class: 'v-date-picker-month__day-btn',
                         color: (item.isSelected || item.isToday) && !item.isDisabled
                           ? props.color
                           : undefined,
@@ -190,7 +191,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
                         ripple: false,
                         text: item.localized,
                         variant: item.isDisabled
-                          ? 'text'
+                          ? item.isToday ? 'outlined' : 'text'
                           : item.isToday && !item.isSelected ? 'outlined' : 'flat',
                         onClick: () => onClick(item.date),
                       },
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass
index 83c208a856b..d4d8f8e2602 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass
@@ -1,6 +1,7 @@
+@use './variables' as *
+
 .v-date-picker-months
-  height: 320px
-  overflow-y: scroll
+  height: $date-picker-months-height
 
 .v-date-picker-months__content
   align-items: center
@@ -9,7 +10,7 @@
   height: inherit
   justify-content: space-around
   grid-template-columns: repeat(2, 1fr)
-  grid-gap: 4px 24px
+  grid-gap: $date-picker-months-grid-gap
   padding-inline-start: 36px
   padding-inline-end: 36px
 
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
index bd7099dfda5..1883a31f254 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
@@ -41,7 +41,7 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
     'update:modelValue': (date: any) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const adapter = useDate()
     const model = useProxiedModel(props, 'modelValue')
 
@@ -82,6 +82,10 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
             } as const
 
             function onClick (i: number) {
+              if (model.value === i) {
+                emit('update:modelValue', model.value)
+                return
+              }
               model.value = i
             }
 
@@ -93,7 +97,6 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
               <VBtn
                 key="month"
                 { ...btnProps }
-                onClick={ () => onClick(i) }
               />
             )
           })}
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerTitle.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerTitle.sass
deleted file mode 100644
index 0d8e785337b..00000000000
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerTitle.sass
+++ /dev/null
@@ -1,33 +0,0 @@
-@use './variables' as *
-
-.v-date-picker-title
-  display: flex
-  justify-content: space-between
-  flex-direction: column
-  flex-wrap: wrap
-  line-height: 1
-
-  .v-picker__title__btn
-    text-align: start
-
-  &__year
-      align-items: center
-      display: inline-flex
-      font-size: $date-picker-title-year-font-size
-      font-weight: $date-picker-title-year-font-weight
-      margin-bottom: $date-picker-title-year-bottom-margin
-
-  &__date
-      font-size: $date-picker-title-date-font-size
-      text-align: left
-      font-weight: $date-picker-title-date-font-weight
-      position: relative
-      overflow: hidden
-      padding-bottom: 8px
-      margin-bottom: -8px
-
-      > div
-        position: relative
-
-  &--disabled
-    pointer-events: none
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerTitle.ts b/packages/vuetify/src/components/VDatePicker/VDatePickerTitle.ts
deleted file mode 100644
index b35a6ac3d1a..00000000000
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerTitle.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VDatePickerTitle.sass'
-
-// Components
-import VIcon from '@/components/VIcon'
-
-// Mixins
-import PickerButton from '../../mixins/picker-button'
-
-// Utils
-import mixins from '../../util/mixins'
-
-// Types
-import { VNode } from 'vue'
-
-export default mixins(
-  PickerButton
-/* @vue/component */
-).extend({
-  name: 'v-date-picker-title',
-
-  props: {
-    date: {
-      type: String,
-      default: '',
-    },
-    disabled: Boolean,
-    readonly: Boolean,
-    selectingYear: Boolean,
-    value: {
-      type: String,
-    },
-    year: {
-      type: [Number, String],
-      default: '',
-    },
-    yearIcon: {
-      type: String,
-    },
-  },
-
-  data: () => ({
-    isReversing: false,
-  }),
-
-  computed: {
-    computedTransition (): string {
-      return this.isReversing ? 'picker-reverse-transition' : 'picker-transition'
-    },
-  },
-
-  watch: {
-    value (val: string, prev: string) {
-      this.isReversing = val < prev
-    },
-  },
-
-  methods: {
-    genYearIcon (): VNode {
-      return this.$createElement(VIcon, {
-        props: {
-          dark: true,
-        },
-      }, this.yearIcon)
-    },
-    getYearBtn (): VNode {
-      return this.genPickerButton('selectingYear', true, [
-        String(this.year),
-        this.yearIcon ? this.genYearIcon() : null,
-      ], false, 'v-date-picker-title__year')
-    },
-    genTitleText (): VNode {
-      return this.$createElement('transition', {
-        props: {
-          name: this.computedTransition,
-        },
-      }, [
-        this.$createElement('div', {
-          domProps: { innerHTML: this.date || '&nbsp;' },
-          key: this.value,
-        }),
-      ])
-    },
-    genTitleDate (): VNode {
-      return this.genPickerButton('selectingYear', false, [this.genTitleText()], false, 'v-date-picker-title__date')
-    },
-  },
-
-  render (h): VNode {
-    return h('div', {
-      staticClass: 'v-date-picker-title',
-      class: {
-        'v-date-picker-title--disabled': this.disabled,
-      },
-    }, [
-      this.getYearBtn(),
-      this.genTitleDate(),
-    ])
-  },
-})
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass
index 48025f702ee..a8797600438 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass
@@ -1,5 +1,7 @@
+@use './variables' as *
+
 .v-date-picker-years
-  height: 320px
+  height: $date-picker-years-height
   overflow-y: scroll
 
 .v-date-picker-years__content
@@ -8,7 +10,7 @@
   justify-content: space-around
   grid-template-columns: repeat(3, 1fr)
   gap: 8px 24px
-  padding-inline: 36px
+  padding-inline: $date-picker-years-padding-inline
 
   .v-btn
     padding-inline: 8px
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
index 662fcbcaf3e..d596f29ab92 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
@@ -51,7 +51,7 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
     'update:modelValue': (year: number) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const adapter = useDate()
     const model = useProxiedModel(props, 'modelValue')
     const years = computed(() => {
@@ -109,7 +109,13 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
               rounded: true,
               text: year.text,
               variant: model.value === year.value ? 'flat' : 'text',
-              onClick: () => model.value = year.value,
+              onClick: () => {
+                if (model.value === year.value) {
+                  emit('update:modelValue', model.value)
+                  return
+                }
+                model.value = year.value
+              },
             } as const
 
             return slots.year?.({
diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerTitle.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerTitle.spec.ts.snap
deleted file mode 100644
index a27d08e1fb4..00000000000
--- a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerTitle.spec.ts.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VDatePickerTitle.ts should render component and match snapshot 1`] = `
-<div class="v-date-picker-title">
-  <div class="v-picker__title__btn v-date-picker-title__year">
-    1234
-  </div>
-  <div class="v-picker__title__btn v-date-picker-title__date v-picker__title__btn--active">
-    <div>
-      2005-11-01
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDatePickerTitle.ts should render component when selecting year and match snapshot 1`] = `
-<div class="v-date-picker-title">
-  <div class="v-picker__title__btn v-date-picker-title__year v-picker__title__btn--active">
-    1234
-  </div>
-  <div class="v-picker__title__btn v-date-picker-title__date">
-    <div>
-      2005-11-01
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDatePickerTitle.ts should render disabled component and match snapshot 1`] = `
-<div class="v-date-picker-title v-date-picker-title--disabled">
-  <div class="v-picker__title__btn v-date-picker-title__year">
-    1234
-  </div>
-  <div class="v-picker__title__btn v-date-picker-title__date v-picker__title__btn--active">
-    <div>
-      2005-11-01
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDatePickerTitle.ts should render readonly component and match snapshot 1`] = `
-<div class="v-date-picker-title">
-  <div class="v-picker__title__btn v-date-picker-title__year">
-    1234
-  </div>
-  <div class="v-picker__title__btn v-date-picker-title__date v-picker__title__btn--active">
-    <div>
-      2005-11-01
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDatePickerTitle.ts should render year icon 1`] = `
-<div class="v-picker__title__btn v-date-picker-title__year">
-  1234
-  <i aria-hidden="true"
-     class="v-icon notranslate material-icons theme--dark"
-  >
-    year
-  </i>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VDatePicker/_variables.scss b/packages/vuetify/src/components/VDatePicker/_variables.scss
index 1fe1389f2b3..d74b28dcc4f 100644
--- a/packages/vuetify/src/components/VDatePicker/_variables.scss
+++ b/packages/vuetify/src/components/VDatePicker/_variables.scss
@@ -1,37 +1,17 @@
-$date-picker-years-font-size: 16px !default;
-$date-picker-years-font-weight: 400 !default;
-$date-picker-years-portrait-height: 290px !default;
-$date-picker-years-landscape-height: 290px !default;
-$date-picker-years-item-padding: 8px 0 !default;
-$date-picker-years-active-font-size: 26px !default;
-$date-picker-years-active-font-weight: 500 !default;
-$date-picker-years-active-padding: 10px 0 !default;
-$date-picker-years-item-hover-background: rgba(0, 0, 0, 0.12) !default;
-$date-picker-years-item-align: center !default;
+$date-picker-width: 328px !default;
+$date-picker-show-week-width: 368px !default;
 
-$date-picker-title-year-font-size: 14px !default;
-$date-picker-title-year-font-weight: 500 !default;
-$date-picker-title-year-bottom-margin: 8px !default;
-$date-picker-title-date-font-size: 34px !default;
-$date-picker-title-date-font-weight: 500 !default;
+$date-picker-header-height: 70px !default;
 
-$date-picker-header-padding: 4px 16px !default;
-$date-picker-header-button-font-weight: bold !default;
-$date-picker-header-button-padding: 0.5rem !default;
+$date-picker-month-btn-height: 24px !default;
+$date-picker-month-btn-size: 0.85rem !default;
+$date-picker-month-column-gap: 4px !default;
+$date-picker-month-day-size: 40px !default;
+$date-picker-month-font-size: 0.85rem !default;
+$date-picker-month-padding: 0 12px 8px !default;
 
-$date-picker-table-padding: 0 12px !default;
-$date-picker-table-height: 242px !default;
-$date-picker-table-font-size: 12px !default;
-$date-picker-table-date-button-width: 32px !default;
-$date-picker-table-date-button-height: 32px !default;
-$date-picker-table-month-height: 56px !default;
-$date-picker-table-month-min-width: 40px !default;
-$date-picker-table-month-max-width: 140px !default;
-$date-picker-table-date-padding: 8px 0 !default;
-$date-picker-table-date-font-weight: 600 !default;
-$date-picker-table-date-width: 45px !default;
-$date-picker-event-size: 8px !default;
-$date-picker-event-margin: 0 1px !default;
-$date-picker-event-border-radius: 50% !default;
-$date-picker-event-month-bottom: 6px !default;
-$date-picker-event-date-bottom: 8px !default;
+$date-picker-months-grid-gap: 0px 24px !default;
+$date-picker-months-height: 288px !default;
+
+$date-picker-years-height: 288px !default;
+$date-picker-years-padding-inline: 32px !default;
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
index d1f949f969c..c1895a9f683 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
@@ -126,10 +126,11 @@
   transition: .3s min-height settings.$standard-easing
   width: 100%
   justify-content: space-between
-  @include tools.states('.v-expansion-panel-title__overlay', true)
 
-  &--active::before
-    opacity: 0.12
+  @include tools.states('.v-expansion-panel-title__overlay', false)
+
+  &--focusable.v-expansion-panel-title--active
+    @include tools.active-states('.v-expansion-panel-title__overlay')
 
 .v-expansion-panel-title__overlay
   @include tools.absolute()
@@ -173,3 +174,17 @@
 
     &--active
       max-width: $expansion-panel-inset-active-max-width
+
+.v-expansion-panels--flat
+  > .v-expansion-panel
+    &::after
+      border-top: none
+
+    .v-expansion-panel__shadow
+      display: none
+
+.v-expansion-panels--tile
+  border-radius: 0
+
+  > .v-expansion-panel
+    border-radius: 0
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
index 89497ad0208..50083b3850b 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
@@ -42,6 +42,7 @@ export const makeVExpansionPanelTitleProps = propsFactory({
     default: '$collapse',
   },
   hideActions: Boolean,
+  focusable: Boolean,
   static: Boolean,
   ripple: {
     type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,
@@ -80,6 +81,7 @@ export const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>(
           'v-expansion-panel-title',
           {
             'v-expansion-panel-title--active': expansionPanel.isSelected.value,
+            'v-expansion-panel-title--focusable': props.focusable,
             'v-expansion-panel-title--static': props.static,
           },
           backgroundColorClasses.value,
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
index fc44a3593fe..03946414bc7 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
@@ -24,7 +24,10 @@ type Variant = typeof allowedVariants[number]
 
 export const makeVExpansionPanelsProps = propsFactory({
   color: String,
+  flat: Boolean,
+  focusable: Boolean,
   static: Boolean,
+  tile: Boolean,
   variant: {
     type: String as PropType<Variant>,
     default: 'default',
@@ -58,6 +61,9 @@ export const VExpansionPanels = genericComponent()({
       VExpansionPanel: {
         color: toRef(props, 'color'),
         readonly: toRef(props, 'readonly'),
+      },
+      VExpansionPanelTitle: {
+        focusable: toRef(props, 'focusable'),
         static: toRef(props, 'static'),
       },
     })
@@ -66,6 +72,10 @@ export const VExpansionPanels = genericComponent()({
       <props.tag
         class={[
           'v-expansion-panels',
+          {
+            'v-expansion-panels--flat': props.flat,
+            'v-expansion-panels--tile': props.tile,
+          },
           themeClasses.value,
           variantClass.value,
           props.class,
diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
index 65e9cf2c295..b5800fe10c8 100644
--- a/packages/vuetify/src/components/VField/VField.sass
+++ b/packages/vuetify/src/components/VField/VField.sass
@@ -387,6 +387,14 @@
         #{selector.append('[class^="rounded-"]', &)},
         #{selector.append('[class*=" rounded-"]', &)}
           flex-basis: calc(var(--v-input-control-height) / 2 + 2px)
+      
+      @at-root #{selector.append('.v-field--reverse', &)}
+        border-start-start-radius: 0
+        border-start-end-radius: inherit
+        border-end-end-radius: inherit 
+        border-end-start-radius: 0
+        border-inline-end-width: var(--v-field-border-width)
+        border-inline-start-width: 0
 
     &__notch
       flex: none
@@ -421,6 +429,14 @@
       border-end-end-radius: inherit
       border-end-start-radius: 0
 
+      @at-root #{selector.append('.v-field--reverse', &)}
+        border-start-start-radius: inherit
+        border-start-end-radius: 0
+        border-end-end-radius: 0
+        border-end-start-radius: inherit 
+        border-inline-end-width: 0
+        border-inline-start-width: var(--v-field-border-width)
+
 /* endregion */
 /* region LOADER */
 .v-field__loader
@@ -493,7 +509,9 @@
 /* endregion */
 /* region MODIFIERS */
 .v-field--reverse
-  .v-field__field, .v-field__input
+  .v-field__field,
+  .v-field__input,
+  .v-field__outline
     flex-direction: row-reverse
 
   .v-field__input, input
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
index f6f3e6053b7..9ee2fa62615 100644
--- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx
+++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -127,7 +127,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
       if (!isFocused.value) focus()
     }
     function onClickPrepend (e: MouseEvent) {
-      onControlClick(e)
+      inputRef.value?.click()
     }
     function onControlMousedown (e: MouseEvent) {
       emit('mousedown:control', e)
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
index 610ea1b1353..3d4ad61df52 100644
--- a/packages/vuetify/src/components/VList/VListItem.sass
+++ b/packages/vuetify/src/components/VList/VListItem.sass
@@ -181,6 +181,7 @@
   overflow: hidden
   padding: $list-item-subtitle-padding
   text-overflow: ellipsis
+  overflow-wrap: $list-item-subtitle-overflow-wrap
   word-break: $list-item-subtitle-word-break
 
   .v-list-item--one-line &
diff --git a/packages/vuetify/src/components/VList/_variables.scss b/packages/vuetify/src/components/VList/_variables.scss
index f7979e90517..5848399f42a 100644
--- a/packages/vuetify/src/components/VList/_variables.scss
+++ b/packages/vuetify/src/components/VList/_variables.scss
@@ -100,7 +100,8 @@ $list-item-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'bo
 $list-item-subtitle-line-height: 1rem !default;
 $list-item-subtitle-padding: 0 !default;
 $list-item-subtitle-text-transform: none !default;
-$list-item-subtitle-word-break: break-all !default;
+$list-item-subtitle-overflow-wrap: break-word !default;
+$list-item-subtitle-word-break: initial !default;
 
 $list-item-title-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default;
 $list-item-title-font-weight: tools.map-deep-get(settings.$typography, 'body-1', 'weight') !default;
diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index edfcf781375..08bebfa5458 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -15,7 +15,17 @@ import { useScopeId } from '@/composables/scopeId'
 // Utilities
 import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, watch } from 'vue'
 import { VMenuSymbol } from './shared'
-import { focusableChildren, focusChild, genericComponent, getNextElement, getUid, omit, propsFactory, useRender } from '@/util'
+import {
+  focusableChildren,
+  focusChild,
+  genericComponent,
+  getNextElement,
+  getUid,
+  isClickInsideElement,
+  omit,
+  propsFactory,
+  useRender,
+} from '@/util'
 
 // Types
 import type { Component } from 'vue'
@@ -64,9 +74,11 @@ export const VMenu = genericComponent<OverlaySlots>()({
       unregister () {
         --openChildren.value
       },
-      closeParents () {
+      closeParents (e) {
         setTimeout(() => {
-          if (!openChildren.value) {
+          if (!openChildren.value &&
+            (e == null || (e && !isClickInsideElement(e, overlay.value!.contentEl!)))
+          ) {
             isActive.value = false
             parent?.closeParents()
           }
@@ -106,8 +118,8 @@ export const VMenu = genericComponent<OverlaySlots>()({
       }
     })
 
-    function onClickOutside () {
-      parent?.closeParents()
+    function onClickOutside (e: MouseEvent) {
+      parent?.closeParents(e)
     }
 
     function onKeydown (e: KeyboardEvent) {
diff --git a/packages/vuetify/src/components/VMenu/shared.ts b/packages/vuetify/src/components/VMenu/shared.ts
index 08f15dd12b6..c23b2769808 100644
--- a/packages/vuetify/src/components/VMenu/shared.ts
+++ b/packages/vuetify/src/components/VMenu/shared.ts
@@ -4,7 +4,7 @@ import type { InjectionKey } from 'vue'
 interface MenuProvide {
   register (): void
   unregister (): void
-  closeParents (): void
+  closeParents (e?: MouseEvent): void
 }
 
 export const VMenuSymbol: InjectionKey<MenuProvide> = Symbol.for('vuetify:v-menu')
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 92ae5553ec2..7f6ff07e3b9 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -24,7 +24,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
-import { computed, mergeProps, ref, shallowRef, watch } from 'vue'
+import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
   ensureValidVNode,
   genericComponent,
@@ -252,20 +252,29 @@ export const VSelect = genericComponent<new <
         model.value = [item]
       }
     }
-    function select (item: ListItem) {
+
+    /** @param set - null means toggle */
+    function select (item: ListItem, set: boolean | null = true) {
+      if (item.props.disabled) return
+
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
+        const add = set == null ? !~index : set
 
-        if (index === -1) {
-          model.value = [...model.value, item]
-        } else {
-          const value = [...model.value]
+        if (~index) {
+          const value = add ? [...model.value, item] : [...model.value]
           value.splice(index, 1)
           model.value = value
+        } else if (add) {
+          model.value = [...model.value, item]
         }
       } else {
-        model.value = [item]
-        menu.value = false
+        const add = set !== false
+        model.value = add ? [item] : []
+
+        nextTick(() => {
+          menu.value = false
+        })
       }
     }
     function onBlur (e: FocusEvent) {
@@ -304,16 +313,10 @@ export const VSelect = genericComponent<new <
       }
     })
 
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return
-
-      if (!val.length && props.hideNoData) {
-        menu.value = false
-      }
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return
 
-      if (!oldVal.length && val.length) {
-        menu.value = true
-      }
+      menu.value = true
     })
 
     useRender(() => {
@@ -407,7 +410,7 @@ export const VSelect = genericComponent<new <
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
                             key: index,
-                            onClick: () => select(item),
+                            onClick: () => select(item, null),
                           })
 
                           return slots.item?.({
@@ -453,7 +456,7 @@ export const VSelect = genericComponent<new <
                     e.stopPropagation()
                     e.preventDefault()
 
-                    select(item)
+                    select(item, false)
                   }
 
                   const slotProps = {
diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
index 9414aae5b28..0ca61fa47cd 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -532,6 +532,58 @@ describe('VSelect', () => {
       .should('not.have.class', 'v-select--active-menu')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19235
+  it('should update v-model when click closable chip', () => {
+    const selectedItem = ref('abc')
+
+    cy.mount(() => (
+      <VSelect
+        v-model={ selectedItem.value }
+        chips
+        closable-chips
+        items={['abc', 'def']}
+      />
+    ))
+
+    cy.get('.v-chip__close')
+      .click()
+      .then(_ => {
+        expect(selectedItem.value).equal(null)
+      })
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/19261
+  it('should not toggle v-model to null when clicking already selected item in single selection mode', () => {
+    const selectedItem = ref('abc')
+
+    cy.mount(() => (
+      <VSelect
+        v-model={ selectedItem.value }
+        items={['abc', 'def']}
+      />
+    ))
+
+    cy.get('.v-select').click()
+
+    cy.get('.v-list-item').should('have.length', 2)
+    cy.get('.v-list-item').eq(0).click({ waitForAnimations: false }).should(() => {
+      expect(selectedItem.value).equal('abc')
+    })
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/18556
+  it('should show menu if focused and items are added', () => {
+    cy
+      .mount(props => (<VSelect { ...props } />))
+      .get('.v-select input')
+      .focus()
+      .get('.v-overlay')
+      .should('not.exist')
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-overlay')
+      .should('exist')
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
index 43d79136556..701b2271c57 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.sass
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -7,10 +7,6 @@
   .v-label
     padding-inline-start: $switch-label-margin-inline-start
 
-  .v-switch__thumb
-    background-color: $switch-thumb-background
-    color: $switch-thumb-color
-
 .v-switch__loader
   display: flex
 
@@ -58,6 +54,8 @@
 
 .v-switch__thumb
   align-items: center
+  background-color: $switch-thumb-background
+  color: $switch-thumb-color
   border-radius: $switch-thumb-radius
   display: flex
   font-size: .75rem
@@ -69,15 +67,20 @@
   position: relative
   overflow: hidden
 
-  @include tools.elevation($switch-thumb-elevation)
+  .v-switch:not(.v-switch--inset) &
+    @include tools.elevation($switch-thumb-elevation)
+
+  .v-switch.v-switch--flat:not(.v-switch--inset) &
+    background: $switch-thumb-flat-background
+    color: $switch-thumb-flat-color
+
+    @include tools.elevation(0)
 
   .v-switch--inset &
     height: $switch-inset-thumb-height
     width: $switch-inset-thumb-width
     transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
 
-    @include tools.elevation(0)
-
     &--filled
       transform: none
 
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
index ff407a24da4..5e72e86a3b4 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -109,6 +109,7 @@ export const VSwitch = genericComponent<new <T>(
         <VInput
           class={[
             'v-switch',
+            { 'v-switch--flat': props.flat },
             { 'v-switch--inset': props.inset },
             { 'v-switch--indeterminate': indeterminate.value },
             loaderClasses.value,
diff --git a/packages/vuetify/src/components/VSwitch/_variables.scss b/packages/vuetify/src/components/VSwitch/_variables.scss
index 9f4535bd4b6..0c7e9c24ff4 100644
--- a/packages/vuetify/src/components/VSwitch/_variables.scss
+++ b/packages/vuetify/src/components/VSwitch/_variables.scss
@@ -19,6 +19,8 @@ $switch-loader-color: rgb(var(--v-theme-surface)) !default;
 
 $switch-thumb-background: rgb(var(--v-theme-surface-bright)) !default;
 $switch-thumb-color: rgb(var(--v-theme-on-surface-bright)) !default;
+$switch-thumb-flat-background: rgb(var(--v-theme-surface-variant)) !default;
+$switch-thumb-flat-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $switch-thumb-elevation: 4 !default;
 $switch-thumb-height: 20px !default;
 $switch-thumb-width: 20px !default;
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
index 5bf9eb2f9c4..6c131c2598a 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.sass
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -9,7 +9,6 @@
   flex-direction: column
   justify-content: space-between
   max-width: 100%
-  overflow: hidden
   position: relative
   transition: $toolbar-transition
   transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow
@@ -50,6 +49,8 @@
   width: 100%
 
 .v-toolbar__content
+  overflow: hidden
+
   > .v-btn:first-child
     margin-inline-start: $toolbar-prepend-btn-margin-start
 
diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.sass b/packages/vuetify/src/components/VTooltip/VTooltip.sass
index f8af92a411c..cb4419b3b12 100644
--- a/packages/vuetify/src/components/VTooltip/VTooltip.sass
+++ b/packages/vuetify/src/components/VTooltip/VTooltip.sass
@@ -15,6 +15,7 @@
     opacity: 1
     pointer-events: none
     transition-property: opacity, transform
+    overflow-wrap: $tooltip-overflow-wrap
 
     &[class*="enter-active"]
       transition-timing-function: settings.$decelerated-easing
diff --git a/packages/vuetify/src/components/VTooltip/_variables.scss b/packages/vuetify/src/components/VTooltip/_variables.scss
index 8970ec43282..4932316078d 100644
--- a/packages/vuetify/src/components/VTooltip/_variables.scss
+++ b/packages/vuetify/src/components/VTooltip/_variables.scss
@@ -9,3 +9,4 @@ $tooltip-line-height: 1.6 !default;
 $tooltip-transition-enter-duration: 150ms !default;
 $tooltip-transition-leave-duration: 75ms !default;
 $tooltip-padding: 5px 16px !default;
+$tooltip-overflow-wrap: break-word !default;
diff --git a/packages/vuetify/src/composables/date/adapters/vuetify.ts b/packages/vuetify/src/composables/date/adapters/vuetify.ts
index 72b69051987..712c2e1be3f 100644
--- a/packages/vuetify/src/composables/date/adapters/vuetify.ts
+++ b/packages/vuetify/src/composables/date/adapters/vuetify.ts
@@ -443,11 +443,27 @@ function getDiff (date: Date, comparing: Date | string, unit?: string) {
   const d = new Date(date)
   const c = new Date(comparing)
 
-  if (unit === 'month') {
-    return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12
+  switch (unit) {
+    case 'years':
+      return d.getFullYear() - c.getFullYear()
+    case 'quarters':
+      return Math.floor((d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12) / 4)
+    case 'months':
+      return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12
+    case 'weeks':
+      return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24 * 7))
+    case 'days':
+      return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24))
+    case 'hours':
+      return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60))
+    case 'minutes':
+      return Math.floor((d.getTime() - c.getTime()) / (1000 * 60))
+    case 'seconds':
+      return Math.floor((d.getTime() - c.getTime()) / 1000)
+    default: {
+      return d.getTime() - c.getTime()
+    }
   }
-
-  return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24))
 }
 
 function setHours (date: Date, count: number) {
diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index 73e4e3c64d9..9ba2d6213ea 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -83,7 +83,7 @@ export function filterItems (
         const filterKeys = keys || Object.keys(transformed)
 
         for (const key of filterKeys) {
-          const value = getPropertyFromItem(transformed, key, transformed)
+          const value = getPropertyFromItem(transformed, key)
           const keyFilter = options?.customKeyFilter?.[key]
 
           match = keyFilter
diff --git a/packages/vuetify/src/composables/form.ts b/packages/vuetify/src/composables/form.ts
index 22bd3313e45..e90bd0e2d7b 100644
--- a/packages/vuetify/src/composables/form.ts
+++ b/packages/vuetify/src/composables/form.ts
@@ -138,7 +138,7 @@ export function createForm (props: FormProps) {
       invalid > 0 ? false
       : valid === items.value.length ? true
       : null
-  }, { deep: true })
+  }, { deep: true, flush: 'post' })
 
   provide(FormKey, {
     register: ({ id, validate, reset, resetValidation }) => {
diff --git a/packages/vuetify/src/composables/goto.ts b/packages/vuetify/src/composables/goto.ts
index 1d6480f077c..642548fa890 100644
--- a/packages/vuetify/src/composables/goto.ts
+++ b/packages/vuetify/src/composables/goto.ts
@@ -1,6 +1,6 @@
 // Utilities
 import { inject } from 'vue'
-import { mergeDeep, refElement } from '@/util'
+import { clamp, consoleWarn, mergeDeep, refElement } from '@/util'
 
 // Types
 import type { ComponentPublicInstance, InjectionKey, Ref } from 'vue'
@@ -75,13 +75,14 @@ export function createGoTo (options: Partial<GoToOptions> | undefined, locale: L
   }
 }
 
-async function scrollTo (
+export async function scrollTo (
   _target: ComponentPublicInstance | HTMLElement | number | string,
   _options: Partial<GoToOptions>,
   horizontal?: boolean,
   goTo?: GoToInstance,
 ) {
-  const options = mergeDeep(goTo?.options, _options)
+  const property = horizontal ? 'scrollLeft' : 'scrollTop'
+  const options = mergeDeep(goTo?.options ?? genDefaults(), _options)
   const rtl = goTo?.rtl.value
   const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0
   const container = options.container === 'parent' && target instanceof HTMLElement
@@ -107,7 +108,7 @@ async function scrollTo (
 
   targetLocation += options.offset
 
-  const startLocation = (horizontal ? container.scrollLeft : container.scrollTop) ?? 0
+  const startLocation = container[property] ?? 0
 
   if (targetLocation === startLocation) return Promise.resolve(targetLocation)
 
@@ -115,26 +116,22 @@ async function scrollTo (
 
   return new Promise(resolve => requestAnimationFrame(function step (currentTime: number) {
     const timeElapsed = currentTime - startTime
-    const progress = Math.abs(options.duration ? Math.min(timeElapsed / options.duration, 1) : 1)
-    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress))
-
-    container[horizontal ? 'scrollLeft' : 'scrollTop'] = location
-
-    if (progress === 1) return resolve(targetLocation)
-
-    let clientSize
-    let reachEnd
-
-    if (!horizontal) {
-      clientSize = container === document.body ? document.documentElement.clientHeight : container.clientHeight
-      reachEnd = clientSize + container.scrollTop >= container.scrollHeight
-
-      if (targetLocation > container.scrollTop && reachEnd) return resolve(targetLocation)
-    } else {
-      clientSize = container === document.body ? document.documentElement.clientWidth : container.clientWidth
-      reachEnd = clientSize + container.scrollLeft >= container.scrollWidth
-
-      if (targetLocation > container.scrollLeft && reachEnd) return resolve(targetLocation)
+    const progress = timeElapsed / options.duration
+    const location = Math.floor(
+      startLocation +
+      (targetLocation - startLocation) *
+      ease(clamp(progress, 0, 1))
+    )
+
+    container[property] = location
+
+    // Allow for some jitter if target time has elapsed
+    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+      return resolve(targetLocation)
+    } else if (progress > 2) {
+      // The target might not be reachable
+      consoleWarn('Scroll target is not reachable')
+      return resolve(container[property])
     }
 
     requestAnimationFrame(step)
diff --git a/packages/vuetify/src/composables/group.ts b/packages/vuetify/src/composables/group.ts
index 12c294f98e7..318f127f298 100644
--- a/packages/vuetify/src/composables/group.ts
+++ b/packages/vuetify/src/composables/group.ts
@@ -133,7 +133,7 @@ export function useGroupItem (
 
   watch(isSelected, value => {
     vm.emit('group:selected', { value })
-  })
+  }, { flush: 'sync' })
 
   return {
     id,
diff --git a/packages/vuetify/src/composables/icons.tsx b/packages/vuetify/src/composables/icons.tsx
index dcf4142d7f5..9ed7aab0675 100644
--- a/packages/vuetify/src/composables/icons.tsx
+++ b/packages/vuetify/src/composables/icons.tsx
@@ -167,23 +167,29 @@ export const VClassIcon = defineComponent({
 })
 export type VClassIcon = InstanceType<typeof VClassIcon>
 
-export const defaultSets: Record<string, IconSet> = {
-  svg: {
-    component: VSvgIcon,
-  },
-  class: {
-    component: VClassIcon,
-  },
+function genDefaults (): Record<string, IconSet> {
+  return {
+    svg: {
+      component: VSvgIcon,
+    },
+    class: {
+      component: VClassIcon,
+    },
+  }
 }
 
 // Composables
 export function createIcons (options?: IconOptions) {
+  const sets = genDefaults()
+  const defaultSet = options?.defaultSet ?? 'mdi'
+
+  if (defaultSet === 'mdi' && !sets.mdi) {
+    sets.mdi = mdi
+  }
+
   return mergeDeep({
-    defaultSet: 'mdi',
-    sets: {
-      ...defaultSets,
-      mdi,
-    },
+    defaultSet,
+    sets,
     aliases: {
       ...aliases,
       /* eslint-disable max-len */
diff --git a/packages/vuetify/src/composables/layout.ts b/packages/vuetify/src/composables/layout.ts
index f851fbb036e..68f0332a777 100644
--- a/packages/vuetify/src/composables/layout.ts
+++ b/packages/vuetify/src/composables/layout.ts
@@ -19,7 +19,7 @@ import { convertToUnit, eagerComputed, findChildrenWithProvide, getCurrentInstan
 // Types
 import type { ComponentInternalInstance, CSSProperties, InjectionKey, Prop, Ref } from 'vue'
 
-type Position = 'top' | 'left' | 'right' | 'bottom'
+export type Position = 'top' | 'left' | 'right' | 'bottom'
 
 interface Layer {
   top: number
diff --git a/packages/vuetify/src/composables/rounded.ts b/packages/vuetify/src/composables/rounded.ts
index 87f1c8b33db..972d02f95a2 100644
--- a/packages/vuetify/src/composables/rounded.ts
+++ b/packages/vuetify/src/composables/rounded.ts
@@ -22,6 +22,7 @@ export const makeRoundedProps = propsFactory({
     type: [Boolean, Number, String],
     default: undefined,
   },
+  tile: Boolean,
 }, 'rounded')
 
 export function useRounded (
@@ -30,6 +31,7 @@ export function useRounded (
 ): RoundedData {
   const roundedClasses = computed(() => {
     const rounded = isRef(props) ? props.value : props.rounded
+    const tile = isRef(props) ? props.value : props.tile
     const classes: string[] = []
 
     if (rounded === true || rounded === '') {
@@ -41,6 +43,8 @@ export function useRounded (
       for (const value of String(rounded).split(' ')) {
         classes.push(`rounded-${value}`)
       }
+    } else if (tile) {
+      classes.push('rounded-0')
     }
 
     return classes
diff --git a/packages/vuetify/src/composables/transition.ts b/packages/vuetify/src/composables/transition.ts
index 33dbedfa9eb..98458bb84e0 100644
--- a/packages/vuetify/src/composables/transition.ts
+++ b/packages/vuetify/src/composables/transition.ts
@@ -1,5 +1,5 @@
 // Utilities
-import { h, mergeProps, Transition } from 'vue'
+import { h, mergeProps, Transition, TransitionGroup } from 'vue'
 import { propsFactory } from '@/util'
 
 // Types
@@ -16,20 +16,28 @@ export const makeTransitionProps = propsFactory({
 interface MaybeTransitionProps extends TransitionProps {
   transition?: string | boolean | TransitionProps & { component?: any }
   disabled?: boolean
+  group?: boolean
 }
 
 export const MaybeTransition: FunctionalComponent<MaybeTransitionProps> = (props, { slots }) => {
-  const { transition, disabled, ...rest } = props
+  const { transition, disabled, group, ...rest } = props
 
-  const { component = Transition, ...customProps } = typeof transition === 'object' ? transition : {}
+  const {
+    component = group ? TransitionGroup : Transition,
+    ...customProps
+  } = typeof transition === 'object' ? transition : {}
 
   return h(
     component,
-    mergeProps(typeof transition === 'string'
-      ? { name: disabled ? '' : transition }
-      : customProps as any,
-    rest as any,
-    { disabled }),
+    mergeProps(
+      typeof transition === 'string'
+        ? { name: disabled ? '' : transition }
+        : customProps as any,
+      typeof transition === 'string'
+        ? {}
+        : { disabled, group },
+      rest as any,
+    ),
     slots
   )
 }
diff --git a/packages/vuetify/src/composables/virtual.ts b/packages/vuetify/src/composables/virtual.ts
index 3f2647332dd..3489704c1a7 100644
--- a/packages/vuetify/src/composables/virtual.ts
+++ b/packages/vuetify/src/composables/virtual.ts
@@ -107,9 +107,6 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
       })
     })
   })
-  watch(viewportHeight, (val, oldVal) => {
-    oldVal && calculateVisibleItems()
-  })
 
   onScopeDispose(() => {
     updateOffsets.clear()
@@ -139,6 +136,19 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
   let lastScrollTop = 0
   let scrollVelocity = 0
   let lastScrollTime = 0
+
+  watch(viewportHeight, (val, oldVal) => {
+    if (oldVal) {
+      calculateVisibleItems()
+      if (val < oldVal) {
+        requestAnimationFrame(() => {
+          scrollVelocity = 0
+          calculateVisibleItems()
+        })
+      }
+    }
+  })
+
   function handleScroll () {
     if (!containerRef.value || !markerRef.value) return
 
diff --git a/packages/vuetify/src/iconsets/fa-svg.ts b/packages/vuetify/src/iconsets/fa-svg.ts
index d1edcd185ef..4409343693e 100644
--- a/packages/vuetify/src/iconsets/fa-svg.ts
+++ b/packages/vuetify/src/iconsets/fa-svg.ts
@@ -9,9 +9,9 @@ const aliases = faAliases
 
 const fa: IconSet = {
   component: props => {
-    const { icon, ...rest } = props
+    const { icon, tag, ...rest } = props
     const stringIcon = icon as string
-    return h(props.tag, rest, [
+    return h(tag, rest, [
       h(resolveComponent('font-awesome-icon'), {
         key: stringIcon, // TODO: https://github.com/FortAwesome/vue-fontawesome/issues/250
         icon: stringIcon.includes(' fa-') ? stringIcon.split(' fa-') : stringIcon,
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.tsx b/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
index 611cdae05e6..8896e863a64 100644
--- a/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
+++ b/packages/vuetify/src/labs/VCalendar/VCalendar.tsx
@@ -122,7 +122,7 @@ export const VCalendar = genericComponent<VCalendarSlots>()({
               >
                 { !props.hideWeekNumber ? <div key="weekNumber0" class="v-calendar-weekly__head-weeknumber"></div> : '' }
                 {
-                  props.weekdays.sort((a, b) => a - b).map(weekday => (
+                  props.weekdays.map(weekday => (
                     <div class={ `v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}` }>
                       { dayNames[weekday] }
                     </div>
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass b/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass
index ec5e63f592b..7ce0bedbb3b 100644
--- a/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass
+++ b/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass
@@ -33,6 +33,7 @@
   border-right: $calendar-line-width solid $calendar-line-color
   
   .v-calendar-day__row-content
+    overflow: hidden
     border-bottom: $calendar-line-width solid $calendar-line-color
 
     &.v-calendar-day__row-content-through
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass
new file mode 100644
index 00000000000..de53da7d3bb
--- /dev/null
+++ b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass
@@ -0,0 +1,6 @@
+.v-calendar-internal-event
+  overflow: hidden
+  padding: 4px
+  text-overflow: ellipsis
+  white-space: nowrap
+  // width: 100%
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.tsx b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.tsx
index b2738d8e019..99e1e6cf1b3 100644
--- a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.tsx
+++ b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.tsx
@@ -1,3 +1,6 @@
+// Styles
+import './VCalendarIntervalEvent.sass'
+
 // Components
 import { VSheet } from '@/components/VSheet'
 
@@ -55,8 +58,8 @@ export const VCalendarIntervalEvent = genericComponent()({
         <VSheet
           height={ calcHeight().height }
           density="comfortable"
-          style={ `width: 100%; margin-top: ${calcHeight().margin}` }
-          class="align-center pa-1"
+          style={ `margin-top: ${calcHeight().margin}` }
+          class="v-calendar-internal-event"
           color={ props.event?.color ?? undefined }
           rounded={ props.event?.first && props.event?.last
             ? true
diff --git a/packages/vuetify/src/labs/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx b/packages/vuetify/src/labs/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx
index 66eb73a1f61..340f862759b 100644
--- a/packages/vuetify/src/labs/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx
+++ b/packages/vuetify/src/labs/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx
@@ -24,7 +24,8 @@ describe('VConfirmEdit', () => {
       .get('p')
       .should('have.text', 'bar')
   })
-  it.only(`doesn't mutate the original value`, () => {
+
+  it(`doesn't mutate the original value`, () => {
     const externalModel = ref(['foo'])
 
     cy.mount(
@@ -51,6 +52,7 @@ describe('VConfirmEdit', () => {
         expect(externalModel.value).to.deep.equal(['foo', 'bar'])
       })
   })
+
   it('hides actions if used from the slot', () => {
     cy.mount(
       <VConfirmEdit></VConfirmEdit>
diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
new file mode 100644
index 00000000000..452722e775c
--- /dev/null
+++ b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
@@ -0,0 +1,53 @@
+@use './variables' as *
+
+.v-empty-state
+  align-items: center
+  display: flex
+  flex-direction: column
+  justify-content: center
+  min-height: $empty-state-min-height
+  padding: $empty-state-padding
+
+  &--start
+    align-items: flex-start
+
+  &--center
+    align-items: center
+
+  &--end
+    align-items: flex-end
+
+.v-empty-state__media
+  text-align: center
+  width: 100%
+
+.v-empty-state__headline
+  color: $empty-state-headline-color
+  font-size: $empty-state-headline-font-size
+  font-weight: $empty-state-headline-font-weight
+  line-height: $empty-state-headline-line-height
+
+.v-empty-state__title
+  font-size: $empty-state-title-font-size
+  font-weight: $empty-state-title-font-weight
+  line-height: $empty-state-title-line-height
+  text-align: center
+
+.v-empty-state__text
+  font-size: $empty-state-text-font-size
+  font-weight: $empty-state-text-font-weight
+  line-height: $empty-state-text-line-height
+  padding: $empty-state-text-padding
+  text-align: center
+
+.v-empty-state__content
+  padding: $empty-state-content-padding
+
+.v-empty-state__actions
+  display: flex
+  gap: $empty-state-actions-gap
+  padding: $empty-state-actions-padding
+
+.v-empty-state__action-btn.v-btn
+  background-color: $empty-state-actions-btn-background-color
+  color: $empty-state-actions-btn-color
diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx b/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx
new file mode 100644
index 00000000000..5d9d7732204
--- /dev/null
+++ b/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx
@@ -0,0 +1,204 @@
+// Styles
+import './VEmptyState.sass'
+
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { VIcon } from '@/components/VIcon'
+import { VImg } from '@/components/VImg'
+
+// Composables
+import { useBackgroundColor } from '@/composables/color'
+import { makeComponentProps } from '@/composables/component'
+import { makeDimensionProps, useDimension } from '@/composables/dimensions'
+import { IconValue } from '@/composables/icons'
+import { makeSizeProps } from '@/composables/size'
+import { makeThemeProps, provideTheme } from '@/composables/theme'
+
+// Utilities
+import { toRef } from 'vue'
+import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+
+// Types
+
+export type VEmptyStateSlots = {
+  actions: {
+    props: {
+      onClick: (e: Event) => void
+    }
+  }
+  default: never
+  headline: never
+  title: never
+  media: never
+  text: never
+}
+
+export const makeVEmptyStateProps = propsFactory({
+  actionText: String,
+  bgColor: String,
+  color: String,
+  icon: IconValue,
+  image: String,
+  justify: {
+    type: String as PropType<'start' | 'center' | 'end'>,
+    default: 'center',
+  },
+  headline: String,
+  title: String,
+  text: String,
+  textWidth: {
+    type: [Number, String],
+    default: 500,
+  },
+  href: String,
+  to: String,
+
+  ...makeComponentProps(),
+  ...makeDimensionProps(),
+  ...makeSizeProps({ size: undefined }),
+  ...makeThemeProps(),
+}, 'VEmptyState')
+
+export const VEmptyState = genericComponent<VEmptyStateSlots>()({
+  name: 'VEmptyState',
+
+  props: makeVEmptyStateProps(),
+
+  emits: {
+    'click:action': (e: Event) => true,
+  },
+
+  setup (props, { emit, slots }) {
+    const { themeClasses } = provideTheme(props)
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
+    const { dimensionStyles } = useDimension(props)
+
+    function onClickAction (e: Event) {
+      emit('click:action', e)
+    }
+
+    useRender(() => {
+      const hasActions = !!(slots.actions || props.actionText)
+      const hasHeadline = !!(slots.headline || props.headline)
+      const hasTitle = !!(slots.title || props.title)
+      const hasText = !!(slots.text || props.text)
+      const hasMedia = !!(slots.media || props.image || props.icon)
+      const size = props.size || (props.image ? 200 : 96)
+
+      return (
+        <div
+          class={[
+            'v-empty-state',
+            {
+              [`v-empty-state--${props.justify}`]: true,
+            },
+            themeClasses.value,
+            backgroundColorClasses.value,
+            props.class,
+          ]}
+          style={[
+            backgroundColorStyles.value,
+            dimensionStyles.value,
+            props.style,
+          ]}
+        >
+          { hasMedia && (
+            <div key="media" class="v-empty-state__media">
+              { !slots.media ? (
+                <>
+                  { props.image ? (
+                    <VImg
+                      key="image"
+                      src={ props.image }
+                      height={ size }
+                    />
+                  ) : props.icon ? (
+                    <VIcon
+                      key="icon"
+                      size={ size }
+                      icon={ props.icon }
+                    />
+                  ) : undefined }
+                </>
+              ) : (
+                <VDefaultsProvider
+                  key="media-defaults"
+                  defaults={{
+                    VImg: {
+                      src: props.image,
+                      height: size,
+                    },
+                    VIcon: {
+                      size,
+                      icon: props.icon,
+                    },
+                  }}
+                >
+                  { slots.media() }
+                </VDefaultsProvider>
+              )}
+            </div>
+          )}
+
+          { hasHeadline && (
+            <div key="headline" class="v-empty-state__headline">
+              { slots.headline?.() ?? props.headline }
+            </div>
+          )}
+
+          { hasTitle && (
+            <div key="title" class="v-empty-state__title">
+              { slots.title?.() ?? props.title }
+            </div>
+          )}
+
+          { hasText && (
+            <div
+              key="text"
+              class="v-empty-state__text"
+              style={{
+                maxWidth: convertToUnit(props.textWidth),
+              }}
+            >
+              { slots.text?.() ?? props.text }
+            </div>
+          )}
+
+          { slots.default && (
+            <div key="content" class="v-empty-state__content">
+              { slots.default() }
+            </div>
+          )}
+
+          { hasActions && (
+            <div key="actions" class="v-empty-state__actions">
+              <VDefaultsProvider
+                defaults={{
+                  VBtn: {
+                    class: 'v-empty-state__action-btn',
+                    color: props.color,
+                    text: props.actionText,
+                  },
+                }}
+              >
+                {
+                  slots.actions?.({ props: { onClick: onClickAction } }) ?? (
+                    <VBtn onClick={ onClickAction } />
+                  )
+                }
+              </VDefaultsProvider>
+            </div>
+          )}
+        </div>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VEmptyState = InstanceType<typeof VEmptyState>
diff --git a/packages/vuetify/src/labs/VEmptyState/_variables.scss b/packages/vuetify/src/labs/VEmptyState/_variables.scss
new file mode 100644
index 00000000000..ac3f51a50ad
--- /dev/null
+++ b/packages/vuetify/src/labs/VEmptyState/_variables.scss
@@ -0,0 +1,22 @@
+@use '../../styles/settings';
+@use "../../styles/tools/functions";
+
+$empty-state-actions-btn-background-color: rgb(var(--v-theme-surface-variant)) !default;
+$empty-state-actions-btn-color: rgb(var(--v-theme-on-surface-variant)) !default;
+$empty-state-actions-gap: 8px !default;
+$empty-state-actions-padding: 16px !default;
+$empty-state-content-padding: 24px 0 !default;
+$empty-state-headline-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$empty-state-headline-font-size: functions.map-deep-get(settings.$typography, 'h2', 'size') !default;
+$empty-state-headline-line-height: functions.map-deep-get(settings.$typography, 'h2', 'line-height') !default;
+$empty-state-headline-font-weight: functions.map-deep-get(settings.$typography, 'h2', 'weight') !default;
+$empty-state-image-padding: 16px !default;
+$empty-state-min-height: 100% !default;
+$empty-state-padding: 16px !default;
+$empty-state-text-font-size: functions.map-deep-get(settings.$typography, 'body-1', 'size') !default;
+$empty-state-text-font-weight: functions.map-deep-get(settings.$typography, 'body-1', 'weight') !default;
+$empty-state-text-line-height: functions.map-deep-get(settings.$typography, 'body-1', 'line-height') !default;
+$empty-state-text-padding: 0 16px !default;
+$empty-state-title-font-size: functions.map-deep-get(settings.$typography, 'h6', 'size') !default;
+$empty-state-title-line-height: functions.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
+$empty-state-title-font-weight: functions.map-deep-get(settings.$typography, 'h6', 'weight') !default;
diff --git a/packages/vuetify/src/labs/VEmptyState/index.ts b/packages/vuetify/src/labs/VEmptyState/index.ts
new file mode 100644
index 00000000000..b07cb7066b1
--- /dev/null
+++ b/packages/vuetify/src/labs/VEmptyState/index.ts
@@ -0,0 +1 @@
+export { VEmptyState } from './VEmptyState'
diff --git a/packages/vuetify/src/labs/VFab/VFab.sass b/packages/vuetify/src/labs/VFab/VFab.sass
new file mode 100644
index 00000000000..21c9ec2f305
--- /dev/null
+++ b/packages/vuetify/src/labs/VFab/VFab.sass
@@ -0,0 +1,82 @@
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use 'sass:math'
+@use 'sass:map'
+@use './variables' as *
+@use './mixins' as *
+
+.v-fab
+  align-items: center
+  display: inline-flex
+  flex: 1 1 auto
+  pointer-events: none
+  position: relative
+  transition-duration: $fab-transition-duration
+  transition-timing-function: $fab-transition-timing-function
+  vertical-align: middle
+
+  .v-btn
+    pointer-events: auto
+
+    &--variant-elevated
+      @include tools.elevation(3)
+
+  &--app,
+  &--absolute
+    display: flex
+
+  &--start,
+  &--left
+    justify-content: flex-start
+
+  &--center
+    align-items: center
+    justify-content: center
+
+  &--end,
+  &--right
+    justify-content: flex-end
+
+  &--bottom
+    align-items: flex-end
+
+  &--top
+    align-items: flex-start
+
+  &--extended
+    .v-btn
+      // min-height: 56px
+      // min-width: 80px
+      border-radius: 9999px !important
+
+.v-fab__container
+  align-self: center
+  display: inline-flex
+  vertical-align: middle
+
+  .v-fab--app &
+    margin: 12px
+
+  .v-fab--absolute &
+    position: absolute
+    z-index: 4
+
+  .v-fab--offset.v-fab--top &
+    transform: translateY(-50%)
+
+  .v-fab--offset.v-fab--bottom &
+    transform: translateY(50%)
+
+  .v-fab--top &
+    top: 0
+
+  .v-fab--bottom &
+    bottom: 0
+
+  .v-fab--left &,
+  .v-fab--start &
+    left: 0
+
+  .v-fab--right &,
+  .v-fab--end &
+    right: 0
diff --git a/packages/vuetify/src/labs/VFab/VFab.tsx b/packages/vuetify/src/labs/VFab/VFab.tsx
new file mode 100644
index 00000000000..dd2f84ae57a
--- /dev/null
+++ b/packages/vuetify/src/labs/VFab/VFab.tsx
@@ -0,0 +1,145 @@
+// Styles
+import './VFab.sass'
+
+// Components
+import { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'
+
+// Composables
+import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
+import { useProxiedModel } from '@/composables/proxiedModel'
+import { useResizeObserver } from '@/composables/resizeObserver'
+import { useToggleScope } from '@/composables/toggleScope'
+import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
+
+// Utilities
+import { computed, ref, shallowRef, toRef, watchEffect } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import type { ComputedRef, PropType } from 'vue'
+import type { Position } from '@/composables/layout'
+
+const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const
+
+export const makeVFabProps = propsFactory({
+  app: Boolean,
+  appear: Boolean,
+  extended: Boolean,
+  location: {
+    type: String as PropType<typeof locations[number]>,
+    default: 'bottom end',
+  },
+  offset: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: true,
+  },
+
+  ...omit(makeVBtnProps({ active: true }), ['location']),
+  ...makeLayoutItemProps(),
+  ...makeTransitionProps({ transition: 'fab-transition' }),
+}, 'VFab')
+
+export const VFab = genericComponent()({
+  name: 'VFab',
+
+  props: makeVFabProps(),
+
+  emits: {
+    'update:modelValue': (value: boolean) => true,
+  },
+
+  setup (props, { slots }) {
+    const model = useProxiedModel(props, 'modelValue')
+    const height = shallowRef(56)
+    const layoutItemStyles = ref()
+
+    const { resizeRef } = useResizeObserver(entries => {
+      if (!entries.length) return
+      height.value = entries[0].target.clientHeight
+    })
+
+    const hasPosition = computed(() => props.app || props.absolute)
+
+    const position = computed(() => {
+      if (!hasPosition.value) return false
+
+      return props.location.split(' ').shift()
+    }) as ComputedRef<Position>
+
+    const orientation = computed(() => {
+      if (!hasPosition.value) return false
+
+      return props.location.split(' ')[1] ?? 'end'
+    })
+
+    useToggleScope(() => props.app, () => {
+      const layout = useLayoutItem({
+        id: props.name,
+        order: computed(() => parseInt(props.order, 10)),
+        position,
+        layoutSize: height,
+        elementSize: computed(() => height.value + 32),
+        active: computed(() => props.app && model.value),
+        absolute: toRef(props, 'absolute'),
+      })
+
+      watchEffect(() => {
+        layoutItemStyles.value = layout.layoutItemStyles.value
+      })
+    })
+
+    const vFabRef = ref()
+
+    useRender(() => {
+      const btnProps = VBtn.filterProps(props)
+
+      return (
+        <div
+          ref={ vFabRef }
+          class={[
+            'v-fab',
+            {
+              'v-fab--absolute': props.absolute,
+              'v-fab--app': !!props.app,
+              'v-fab--extended': props.extended,
+              'v-fab--offset': props.offset,
+              [`v-fab--${position.value}`]: hasPosition.value,
+              [`v-fab--${orientation.value}`]: hasPosition.value,
+            },
+            props.class,
+          ]}
+          style={[
+            props.app ? {
+              ...layoutItemStyles.value,
+            } : {
+              height: 'inherit',
+              width: undefined,
+            },
+            props.style,
+          ]}
+        >
+          <div class="v-fab__container">
+            <MaybeTransition
+              appear={ props.appear }
+              transition={ props.transition }
+            >
+              <VBtn
+                v-show={ props.active }
+                ref={ resizeRef }
+                { ...btnProps }
+                active={ undefined }
+                location={ undefined }
+                v-slots={ slots }
+              />
+            </MaybeTransition>
+          </div>
+        </div>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VFab = InstanceType<typeof VFab>
diff --git a/packages/vuetify/src/labs/VFab/_mixins.scss b/packages/vuetify/src/labs/VFab/_mixins.scss
new file mode 100644
index 00000000000..46aab798656
--- /dev/null
+++ b/packages/vuetify/src/labs/VFab/_mixins.scss
@@ -0,0 +1,22 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../styles/settings';
+@use '../../styles/tools';
+@use './variables' as *;
+
+@mixin fab-sizes ($map: $fab-sizes, $immediate: false) {
+  @each $sizeName, $multiplier in $fab-size-scales {
+    $size: map.get($map, 'font-size') + math.div(2 * $multiplier, 16);
+    $height: map.get($map, 'height') + (12px * $multiplier);
+
+    // .v-fab .v-btn--size-#{$sizeName} {
+    //   --v-btn-size: #{$size};
+    //   --v-btn-height: #{$height};
+    // }
+
+    .v-fab--bottom .v-btn--size-#{$sizeName} {
+      bottom: -1 * $height / 2;
+    }
+  }
+}
diff --git a/packages/vuetify/src/labs/VFab/_variables.scss b/packages/vuetify/src/labs/VFab/_variables.scss
new file mode 100644
index 00000000000..d5cb2732ddc
--- /dev/null
+++ b/packages/vuetify/src/labs/VFab/_variables.scss
@@ -0,0 +1,33 @@
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$fab-border-radius: map.get(settings.$rounded, 'circle') !default;
+$fab-border-radius-multiplier: 0 !default; // 2.4 for MD3
+$fab-height: 56px !default;
+$fab-font-size: tools.map-deep-get(settings.$typography, 'button', 'size') !default;
+$fab-font-weight: tools.map-deep-get(settings.$typography, 'button', 'weight') !default;
+$fab-transition-duration: 0.2s !default;
+$fab-transition-timing-function: settings.$standard-easing !default;
+$fab-width-ratio: math.div(16, 9) !default;
+$fab-padding-ratio: 2.25 !default;
+
+$fab-size-scales: (
+  'x-small': -2,
+  'small': -1,
+  'default': 0,
+  'large': 2,
+  'x-large': 5
+) !default;
+
+$fab-sizes: () !default;
+$fab-sizes: map.merge(
+  (
+    'height': $fab-height,
+    'font-size': $fab-font-size,
+    'width-ratio': $fab-width-ratio,
+    'padding-ratio': $fab-padding-ratio
+  ),
+  $fab-sizes
+);
diff --git a/packages/vuetify/src/labs/VFab/index.ts b/packages/vuetify/src/labs/VFab/index.ts
new file mode 100644
index 00000000000..a2c3347dfea
--- /dev/null
+++ b/packages/vuetify/src/labs/VFab/index.ts
@@ -0,0 +1 @@
+export { VFab } from './VFab'
diff --git a/packages/vuetify/src/labs/VPicker/VPicker.sass b/packages/vuetify/src/labs/VPicker/VPicker.sass
index 100fde3e1a9..c2047f8405d 100644
--- a/packages/vuetify/src/labs/VPicker/VPicker.sass
+++ b/packages/vuetify/src/labs/VPicker/VPicker.sass
@@ -22,7 +22,7 @@
 
 .v-picker__actions
   grid-area: actions
-  padding: 0 12px 12px 12px
+  padding: $picker-actions-padding
   display: flex
   align-items: center
   justify-content: flex-end
@@ -46,5 +46,5 @@
   padding-inline: 24px 12px
   padding-top: 16px
   padding-bottom: 16px
-  font-weight: 600
+  font-weight: $picker-title-font-weight
   letter-spacing: .1666666667em
diff --git a/packages/vuetify/src/labs/VPicker/_variables.scss b/packages/vuetify/src/labs/VPicker/_variables.scss
index 67788da9e03..059419720ca 100644
--- a/packages/vuetify/src/labs/VPicker/_variables.scss
+++ b/packages/vuetify/src/labs/VPicker/_variables.scss
@@ -1,9 +1,7 @@
 @use '../../styles/settings';
 
+$picker-actions-padding: 0 12px 12px !default;
 $picker-border-radius: settings.$border-radius-root !default;
 $picker-elevation: 0 !default;
-$picker-title-padding: 16px !default;
 $picker-inactive-btn-opacity: .6 !default;
-$picker-active-btn-opacity: 1 !default;
-$picker-landscape-title-width: 170px !default;
-$picker-font-size: 1rem !default;
+$picker-title-font-weight: 400 !default;
diff --git a/packages/vuetify/src/labs/VSparkline/VBarline.tsx b/packages/vuetify/src/labs/VSparkline/VBarline.tsx
new file mode 100644
index 00000000000..7d765deb3b7
--- /dev/null
+++ b/packages/vuetify/src/labs/VSparkline/VBarline.tsx
@@ -0,0 +1,224 @@
+// Utilities
+import { computed } from 'vue'
+import { makeLineProps } from './util/line'
+import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util'
+
+// Types
+export type VBarlineSlots = {
+  default: void
+  label: { index: number, value: string }
+}
+
+export type SparklineItem = number | { value: number }
+
+export type SparklineText = {
+  x: number
+  value: string
+}
+
+export interface Boundary {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+}
+
+export interface Bar {
+  x: number
+  y: number
+  height: number
+  value: number
+}
+
+export const makeVBarlineProps = propsFactory({
+  autoLineWidth: Boolean,
+
+  ...makeLineProps(),
+}, 'VBarline')
+
+export const VBarline = genericComponent<VBarlineSlots>()({
+  name: 'VBarline',
+
+  props: makeVBarlineProps(),
+
+  setup (props, { slots }) {
+    const uid = getUid()
+    const id = computed(() => props.id || `barline-${uid}`)
+    const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500)
+
+    const hasLabels = computed(() => {
+      return Boolean(
+        props.showLabels ||
+        props.labels.length > 0 ||
+        !!slots?.label
+      )
+    })
+
+    const lineWidth = computed(() => parseFloat(props.lineWidth) || 4)
+
+    const totalWidth = computed(() => Math.max(props.modelValue.length * lineWidth.value, Number(props.width)))
+
+    const boundary = computed<Boundary>(() => {
+      return {
+        minX: 0,
+        maxX: totalWidth.value,
+        minY: 0,
+        maxY: parseInt(props.height, 10),
+      }
+    })
+    const items = computed(() => props.modelValue.map(item => getPropertyFromItem(item, props.itemValue, item)))
+
+    function genBars (
+      values: number[],
+      boundary: Boundary
+    ): Bar[] {
+      const { minX, maxX, minY, maxY } = boundary
+      const totalValues = values.length
+      let maxValue = props.max != null ? Number(props.max) : Math.max(...values)
+      let minValue = props.min != null ? Number(props.min) : Math.min(...values)
+
+      if (minValue > 0 && props.min == null) minValue = 0
+      if (maxValue < 0 && props.max == null) maxValue = 0
+
+      const gridX = maxX / totalValues
+      const gridY = (maxY - minY) / ((maxValue - minValue) || 1)
+      const horizonY = maxY - Math.abs(minValue * gridY)
+
+      return values.map((value, index) => {
+        const height = Math.abs(gridY * value)
+
+        return {
+          x: minX + index * gridX,
+          y: horizonY - height +
+            +(value < 0) * height,
+          height,
+          value,
+        }
+      })
+    }
+
+    const parsedLabels = computed(() => {
+      const labels = []
+      const points = genBars(items.value, boundary.value)
+      const len = points.length
+
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i]
+        let value = props.labels[i]
+
+        if (!value) {
+          value = typeof item === 'object'
+            ? item.value
+            : item
+        }
+
+        labels.push({
+          x: item.x,
+          value: String(value),
+        })
+      }
+
+      return labels
+    })
+
+    const bars = computed(() => genBars(items.value, boundary.value))
+    const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2)
+
+    useRender(() => {
+      const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse()
+      return (
+        <svg
+          display="block"
+        >
+          <defs>
+            <linearGradient
+              id={ id.value }
+              gradientUnits="userSpaceOnUse"
+              x1={ props.gradientDirection === 'left' ? '100%' : '0' }
+              y1={ props.gradientDirection === 'top' ? '100%' : '0' }
+              x2={ props.gradientDirection === 'right' ? '100%' : '0' }
+              y2={ props.gradientDirection === 'bottom' ? '100%' : '0' }
+            >
+              {
+                gradientData.map((color, index) => (
+                  <stop offset={ index / (Math.max(gradientData.length - 1, 1)) } stop-color={ color || 'currentColor' } />
+                ))
+              }
+            </linearGradient>
+          </defs>
+
+          <clipPath id={ `${id.value}-clip` }>
+            {
+              bars.value.map(item => (
+                <rect
+                    x={ item.x + offsetX.value }
+                    y={ item.y }
+                    width={ lineWidth.value }
+                    height={ item.height }
+                    rx={ typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0 }
+                    ry={ typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0 }
+                >
+                  { props.autoDraw && (
+                    <>
+                      <animate
+                        attributeName="y"
+                        from={ item.y + item.height }
+                        to={ item.y }
+                        dur={ `${autoDrawDuration.value}ms` }
+                        fill="freeze"
+                      />
+                      <animate
+                        attributeName="height"
+                        from="0"
+                        to={ item.height }
+                        dur={ `${autoDrawDuration.value}ms` }
+                        fill="freeze"
+                      />
+                    </>
+                  )}
+                </rect>
+              ))
+            }
+          </clipPath>
+
+          { hasLabels.value && (
+            <g
+              key="labels"
+              style={{
+                textAnchor: 'middle',
+                dominantBaseline: 'mathematical',
+                fill: 'currentColor',
+              }}
+            >
+              {
+                parsedLabels.value.map((item, i) => (
+                  <text
+                    x={ item.x + offsetX.value + lineWidth.value / 2 }
+                    y={ (parseInt(props.height, 10) - 2) + (parseInt(props.labelSize, 10) || 7 * 0.75) }
+                    font-size={ Number(props.labelSize) || 7 }
+                  >
+                    { slots.label?.({ index: i, value: item.value }) ?? item.value }
+                  </text>
+                ))
+              }
+            </g>
+          )}
+
+          <g
+            clip-path={ `url(#${id.value}-clip)` }
+            fill={ `url(#${id.value})` }
+          >
+            <rect
+              x={ 0 }
+              y={ 0 }
+              width={ Math.max(props.modelValue.length * lineWidth.value, Number(props.width)) }
+              height={ props.height }
+            ></rect>
+          </g>
+        </svg>
+      )
+    })
+  },
+})
+
+export type VBarline = InstanceType<typeof VBarline>
diff --git a/packages/vuetify/src/labs/VSparkline/VSparkline.tsx b/packages/vuetify/src/labs/VSparkline/VSparkline.tsx
new file mode 100644
index 00000000000..73e2ffb9e78
--- /dev/null
+++ b/packages/vuetify/src/labs/VSparkline/VSparkline.tsx
@@ -0,0 +1,72 @@
+// Components
+import { makeVBarlineProps, VBarline } from './VBarline'
+import { makeVTrendlineProps, VTrendline } from './VTrendline'
+
+// Composables
+import { useTextColor } from '@/composables/color'
+
+// Utilities
+import { computed, toRef } from 'vue'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+
+// Types
+
+export const makeVSparklineProps = propsFactory({
+  type: {
+    type: String as PropType<'trend' | 'bar'>,
+    default: 'trend',
+  },
+
+  ...makeVBarlineProps(),
+  ...makeVTrendlineProps(),
+}, 'VSparkline')
+
+export type VSparklineSlots = {
+  default: void
+  label: { index: number, value: string }
+}
+
+export const VSparkline = genericComponent<VSparklineSlots>()({
+  name: 'VSparkline',
+
+  props: makeVSparklineProps(),
+
+  setup (props, { slots }) {
+    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))
+    const hasLabels = computed(() => {
+      return Boolean(
+        props.showLabels ||
+        props.labels.length > 0 ||
+        !!slots?.label
+      )
+    })
+    const totalHeight = computed(() => {
+      let height = parseInt(props.height, 10)
+
+      if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5
+
+      return height
+    })
+
+    useRender(() => {
+      const Tag = props.type === 'trend' ? VTrendline : VBarline
+      const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props)
+
+      return (
+        <Tag
+          key={ props.type }
+          class={ textColorClasses.value }
+          style={ textColorStyles.value }
+          viewBox={ `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}` }
+          { ...lineProps }
+          v-slots={ slots }
+        />
+      )
+    })
+  },
+})
+
+export type VSparkline = InstanceType<typeof VSparkline>
diff --git a/packages/vuetify/src/labs/VSparkline/VTrendline.tsx b/packages/vuetify/src/labs/VSparkline/VTrendline.tsx
new file mode 100644
index 00000000000..4cee7027c04
--- /dev/null
+++ b/packages/vuetify/src/labs/VSparkline/VTrendline.tsx
@@ -0,0 +1,228 @@
+// Utilities
+import { computed, nextTick, ref, watch } from 'vue'
+import { makeLineProps } from './util/line'
+import { genPath as _genPath } from './util/path'
+import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util'
+
+// Types
+export type VTrendlineSlots = {
+  default: void
+  label: { index: number, value: string }
+}
+
+export type SparklineItem = number | { value: number }
+
+export type SparklineText = {
+  x: number
+  value: string
+}
+
+export interface Boundary {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+}
+
+export interface Point {
+  x: number
+  y: number
+  value: number
+}
+
+export const makeVTrendlineProps = propsFactory({
+  fill: Boolean,
+
+  ...makeLineProps(),
+}, 'VTrendline')
+
+export const VTrendline = genericComponent<VTrendlineSlots>()({
+  name: 'VTrendline',
+
+  props: makeVTrendlineProps(),
+
+  setup (props, { slots }) {
+    const uid = getUid()
+    const id = computed(() => props.id || `trendline-${uid}`)
+    const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000))
+
+    const lastLength = ref(0)
+    const path = ref<SVGPathElement | null>(null)
+
+    function genPoints (
+      values: number[],
+      boundary: Boundary
+    ): Point[] {
+      const { minX, maxX, minY, maxY } = boundary
+      const totalValues = values.length
+      const maxValue = props.max != null ? Number(props.max) : Math.max(...values)
+      const minValue = props.min != null ? Number(props.min) : Math.min(...values)
+
+      const gridX = (maxX - minX) / (totalValues - 1)
+      const gridY = (maxY - minY) / ((maxValue - minValue) || 1)
+
+      return values.map((value, index) => {
+        return {
+          x: minX + index * gridX,
+          y: maxY - (value - minValue) * gridY,
+          value,
+        }
+      })
+    }
+    const hasLabels = computed(() => {
+      return Boolean(
+        props.showLabels ||
+        props.labels.length > 0 ||
+        !!slots?.label
+      )
+    })
+    const lineWidth = computed(() => {
+      return parseFloat(props.lineWidth) || 4
+    })
+    const totalWidth = computed(() => Number(props.width))
+
+    const boundary = computed<Boundary>(() => {
+      const padding = Number(props.padding)
+
+      return {
+        minX: padding,
+        maxX: totalWidth.value - padding,
+        minY: padding,
+        maxY: parseInt(props.height, 10) - padding,
+      }
+    })
+    const items = computed(() => props.modelValue.map(item => getPropertyFromItem(item, props.itemValue, item)))
+    const parsedLabels = computed(() => {
+      const labels = []
+      const points = genPoints(items.value, boundary.value)
+      const len = points.length
+
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i]
+        let value = props.labels[i]
+
+        if (!value) {
+          value = typeof item === 'object'
+            ? item.value
+            : item
+        }
+
+        labels.push({
+          x: item.x,
+          value: String(value),
+        })
+      }
+
+      return labels
+    })
+
+    watch(() => props.modelValue, async () => {
+      await nextTick()
+
+      if (!props.autoDraw || !path.value) return
+
+      const pathRef = path.value
+      const length = pathRef.getTotalLength()
+
+      if (!props.fill) {
+        // Initial setup to "hide" the line by using the stroke dash array
+        pathRef.style.strokeDasharray = `${length}`
+        pathRef.style.strokeDashoffset = `${length}`
+
+        // Force reflow to ensure the transition starts from this state
+        pathRef.getBoundingClientRect()
+
+        // Animate the stroke dash offset to "draw" the line
+        pathRef.style.transition = `stroke-dashoffset ${autoDrawDuration.value}ms ${props.autoDrawEasing}`
+        pathRef.style.strokeDashoffset = '0'
+      } else {
+        // Your existing logic for filled paths remains the same
+        pathRef.style.transformOrigin = 'bottom center'
+        pathRef.style.transition = 'none'
+        pathRef.style.transform = `scaleY(0)`
+        pathRef.getBoundingClientRect()
+        pathRef.style.transition = `transform ${autoDrawDuration.value}ms ${props.autoDrawEasing}`
+        pathRef.style.transform = `scaleY(1)`
+      }
+
+      lastLength.value = length
+    }, { immediate: true })
+
+    function genPath (fill: boolean) {
+      return _genPath(
+        genPoints(items.value, boundary.value),
+        props.smooth ? 8 : Number(props.smooth),
+        fill,
+        parseInt(props.height, 10)
+      )
+    }
+
+    useRender(() => {
+      const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse()
+
+      return (
+        <svg
+          display="block"
+          stroke-width={ parseFloat(props.lineWidth) ?? 4 }
+        >
+          <defs>
+            <linearGradient
+              id={ id.value }
+              gradientUnits="userSpaceOnUse"
+              x1={ props.gradientDirection === 'left' ? '100%' : '0' }
+              y1={ props.gradientDirection === 'top' ? '100%' : '0' }
+              x2={ props.gradientDirection === 'right' ? '100%' : '0' }
+              y2={ props.gradientDirection === 'bottom' ? '100%' : '0' }
+            >
+              {
+                gradientData.map((color, index) => (
+                  <stop offset={ index / (Math.max(gradientData.length - 1, 1)) } stop-color={ color || 'currentColor' } />
+                ))
+              }
+            </linearGradient>
+          </defs>
+
+          { hasLabels.value && (
+            <g
+              key="labels"
+              style={{
+                textAnchor: 'middle',
+                dominantBaseline: 'mathematical',
+                fill: 'currentColor',
+              }}
+            >
+              {
+                parsedLabels.value.map((item, i) => (
+                  <text
+                    x={ item.x + (lineWidth.value / 2) + lineWidth.value / 2 }
+                    y={ (parseInt(props.height, 10) - 4) + (parseInt(props.labelSize, 10) || 7 * 0.75) }
+                    font-size={ Number(props.labelSize) || 7 }
+                  >
+                    { slots.label?.({ index: i, value: item.value }) ?? item.value }
+                  </text>
+                ))
+              }
+            </g>
+          )}
+
+          <path
+            ref={ path }
+            d={ genPath(props.fill) }
+            fill={ props.fill ? `url(#${id.value})` : 'none' }
+            stroke={ props.fill ? 'none' : `url(#${id.value})` }
+          />
+
+          { props.fill && (
+            <path
+              d={ genPath(false) }
+              fill="none"
+              stroke={ props.color ?? props.gradient?.[0] }
+            />
+          )}
+        </svg>
+      )
+    })
+  },
+})
+
+export type VTrendline = InstanceType<typeof VTrendline>
diff --git a/packages/vuetify/src/labs/VSparkline/index.ts b/packages/vuetify/src/labs/VSparkline/index.ts
new file mode 100644
index 00000000000..77937921174
--- /dev/null
+++ b/packages/vuetify/src/labs/VSparkline/index.ts
@@ -0,0 +1 @@
+export { VSparkline } from './VSparkline'
diff --git a/packages/vuetify/src/labs/VSparkline/util/line.ts b/packages/vuetify/src/labs/VSparkline/util/line.ts
new file mode 100644
index 00000000000..04c6e264bbc
--- /dev/null
+++ b/packages/vuetify/src/labs/VSparkline/util/line.ts
@@ -0,0 +1,63 @@
+// Utilities
+import { propsFactory } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+
+export type SparklineItem = number | { value: number }
+
+export const makeLineProps = propsFactory({
+  autoDraw: Boolean,
+  autoDrawDuration: [Number, String],
+  autoDrawEasing: {
+    type: String,
+    default: 'ease',
+  },
+  color: String,
+  gradient: {
+    type: Array as PropType<string[]>,
+    default: () => ([]),
+  },
+  gradientDirection: {
+    type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
+    validator: (val: string) => ['top', 'bottom', 'left', 'right'].includes(val),
+    default: 'top',
+  },
+  height: {
+    type: [String, Number],
+    default: 75,
+  },
+  labels: {
+    type: Array as PropType<SparklineItem[]>,
+    default: () => ([]),
+  },
+  labelSize: {
+    type: [Number, String],
+    default: 7,
+  },
+  lineWidth: {
+    type: [String, Number],
+    default: 4,
+  },
+  id: String,
+  itemValue: {
+    type: String,
+    default: 'value',
+  },
+  modelValue: {
+    type: Array as PropType<SparklineItem[]>,
+    default: () => ([]),
+  },
+  min: [String, Number],
+  max: [String, Number],
+  padding: {
+    type: [String, Number],
+    default: 8,
+  },
+  showLabels: Boolean,
+  smooth: Boolean,
+  width: {
+    type: [Number, String],
+    default: 300,
+  },
+}, 'Line')
diff --git a/packages/vuetify/src/labs/VSparkline/util/path.ts b/packages/vuetify/src/labs/VSparkline/util/path.ts
new file mode 100644
index 00000000000..369c0d5c362
--- /dev/null
+++ b/packages/vuetify/src/labs/VSparkline/util/path.ts
@@ -0,0 +1,72 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import { Point } from '../VSparkline'
+// import { checkCollinear, getDistance, moveTo } from './math'
+
+/**
+ * From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
+ */
+export function genPath (points: Point[], radius: number, fill = false, height = 75) {
+  if (points.length === 0) return ''
+  const start = points.shift()!
+  const end = points[points.length - 1]
+
+  return (
+    (fill ? `M${start.x} ${height - start.x + 2} L${start.x} ${start.y}` : `M${start.x} ${start.y}`) +
+    points
+      .map((point, index) => {
+        const next = points[index + 1]
+        const prev = points[index - 1] || start
+        const isCollinear = next && checkCollinear(next, point, prev)
+
+        if (!next || isCollinear) {
+          return `L${point.x} ${point.y}`
+        }
+
+        const threshold = Math.min(
+          getDistance(prev, point),
+          getDistance(next, point)
+        )
+        const isTooCloseForRadius = threshold / 2 < radius
+        const radiusForPoint = isTooCloseForRadius ? threshold / 2 : radius
+
+        const before = moveTo(prev, point, radiusForPoint)
+        const after = moveTo(next, point, radiusForPoint)
+
+        return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${after.y}`
+      })
+      .join('') +
+    (fill ? `L${end.x} ${height - start.x + 2} Z` : '')
+  )
+}
+
+function int (value: string | number): number {
+  return parseInt(value, 10)
+}
+
+/**
+ * https://en.wikipedia.org/wiki/Collinearity
+ * x=(x1+x2)/2
+ * y=(y1+y2)/2
+ */
+export function checkCollinear (p0: Point, p1: Point, p2: Point): boolean {
+  return int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y)
+}
+
+export function getDistance (p1: Point, p2: Point): number {
+  return Math.sqrt(
+    Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)
+  )
+}
+
+export function moveTo (to: Point, from: Point, radius: number) {
+  const vector = { x: to.x - from.x, y: to.y - from.y }
+  const length = Math.sqrt((vector.x * vector.x) + (vector.y * vector.y))
+  const unitVector = { x: vector.x / length, y: vector.y / length }
+
+  return {
+    x: from.x + unitVector.x * radius,
+    y: from.y + unitVector.y * radius,
+  }
+}
diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass
new file mode 100644
index 00000000000..246934877a3
--- /dev/null
+++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass
@@ -0,0 +1,2 @@
+.v-speed-dial__content
+  gap: 8px
diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
new file mode 100644
index 00000000000..26a29a4ffec
--- /dev/null
+++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
@@ -0,0 +1,60 @@
+// Styles
+import './VSpeedDial.sass'
+
+// Components
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { makeVMenuProps, VMenu } from '@/components/VMenu/VMenu'
+
+// Composables
+import { makeComponentProps } from '@/composables/component'
+import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
+
+// Utilities
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+export const makeVSpeedDialProps = propsFactory({
+  ...makeComponentProps(),
+  ...makeVMenuProps({ offset: 8, minWidth: 0, location: 'top center' as const }),
+  ...makeTransitionProps({ transition: 'fade-transition' }),
+}, 'VSpeedDial')
+
+export const VSpeedDial = genericComponent()({
+  name: 'VSpeedDial',
+
+  props: makeVSpeedDialProps(),
+
+  setup (props, { slots }) {
+    useRender(() => {
+      const menuProps = VMenu.filterProps(props)
+
+      return (
+        <VMenu
+          { ...menuProps }
+          class={ props.class }
+          style={ props.style }
+          contentClass="v-speed-dial__content"
+        >
+          <VDefaultsProvider
+            defaults={{
+              VBtn: {
+                size: 'small',
+              },
+            }}
+          >
+            <MaybeTransition
+              appear
+              group
+              transition={ props.transition }
+            >
+              { slots.default?.() }
+            </MaybeTransition>
+          </VDefaultsProvider>
+        </VMenu>
+      )
+    })
+
+    return {}
+  },
+})
+
+export type VSpeedDial = InstanceType<typeof VSpeedDial>
diff --git a/packages/vuetify/src/labs/VSpeedDial/index.ts b/packages/vuetify/src/labs/VSpeedDial/index.ts
new file mode 100644
index 00000000000..0856726a2f7
--- /dev/null
+++ b/packages/vuetify/src/labs/VSpeedDial/index.ts
@@ -0,0 +1 @@
+export { VSpeedDial } from './VSpeedDial'
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 7ac16f64688..d173ad17152 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,3 +1,7 @@
 export * from './VConfirmEdit'
 export * from './VCalendar'
+export * from './VFab'
 export * from './VPicker'
+export * from './VSparkline'
+export * from './VSpeedDial'
+export * from './VEmptyState'
diff --git a/packages/vuetify/src/locale/nl.ts b/packages/vuetify/src/locale/nl.ts
index c542673a794..8d937d63590 100644
--- a/packages/vuetify/src/locale/nl.ts
+++ b/packages/vuetify/src/locale/nl.ts
@@ -1,5 +1,5 @@
 export default {
-  badge: 'insigne',
+  badge: 'Insigne',
   open: 'Openen',
   close: 'Sluiten',
   confirmEdit: {
diff --git a/packages/vuetify/src/shims.d.ts b/packages/vuetify/src/shims.d.ts
index 83c48cdb711..ac4f3520636 100644
--- a/packages/vuetify/src/shims.d.ts
+++ b/packages/vuetify/src/shims.d.ts
@@ -1,6 +1,10 @@
 /* eslint-disable local-rules/sort-imports */
 
-import type { ComponentPublicInstance, FunctionalComponent, UnwrapNestedRefs, VNodeChild } from 'vue'
+import 'vue/jsx'
+import type { FunctionalComponent, UnwrapNestedRefs, VNodeChild } from 'vue'
+
+// @skip-build
+import type { ComponentPublicInstance } from 'vue'
 
 // @skip-build
 import type { DateInstance, DefaultsInstance, DisplayInstance, IconOptions, LocaleInstance, RtlInstance, ThemeInstance } from './framework'
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index cd80daec6e6..73c8f1254f4 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -722,3 +722,16 @@ export function eagerComputed<T> (fn: () => T, options?: WatchOptions): Readonly
 
   return readonly(result)
 }
+
+export function isClickInsideElement (event: MouseEvent, targetDiv: HTMLElement) {
+  const mouseX = event.clientX
+  const mouseY = event.clientY
+
+  const divRect = targetDiv.getBoundingClientRect()
+  const divLeft = divRect.left
+  const divTop = divRect.top
+  const divRight = divRect.right
+  const divBottom = divRect.bottom
+
+  return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom
+}
diff --git a/yarn.lock b/yarn.lock
index 11b63266f9a..3522466d10b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -137,16 +137,11 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@antfu/utils@^0.7.5":
+"@antfu/utils@^0.7.6", "@antfu/utils@^0.7.7":
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
   integrity sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==
 
-"@antfu/utils@^0.7.6":
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.6.tgz#30a046419b9e1ecd276e53d41ab68fb6c558c04d"
-  integrity sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==
-
 "@apideck/better-ajv-errors@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.1.tgz#a8d4ef3ce67c418b8b24f2b76b6bc84eb547baf7"
@@ -184,15 +179,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.21.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.4":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.4.tgz#03ae5af150be94392cb5c7ccd97db5a19a5da6aa"
-  integrity sha512-r1IONyb6Ia+jYR2vvIDhdWdlTGhqbBoFqLTQidzZ4kepUFH15ejXvFHxCVbtl7BOXIudsIubf4E81xeA3h3IXA==
-  dependencies:
-    "@babel/highlight" "^7.23.4"
-    chalk "^2.4.2"
-
-"@babel/code-frame@^7.23.5":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
   integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
@@ -200,38 +187,12 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.3.tgz#3febd552541e62b5e883a25eb3effd7c7379db11"
-  integrity sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==
-
-"@babel/compat-data@^7.23.5":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.3", "@babel/compat-data@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
 
-"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.3.tgz#5ec09c8803b91f51cc887dedc2654a35852849c9"
-  integrity sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==
-  dependencies:
-    "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.3"
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helpers" "^7.23.2"
-    "@babel/parser" "^7.23.3"
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.3"
-    "@babel/types" "^7.23.3"
-    convert-source-map "^2.0.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.3"
-    semver "^6.3.1"
-
-"@babel/core@^7.23.7":
+"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.23.3", "@babel/core@^7.23.7":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.7.tgz#4d8016e06a14b5f92530a13ed0561730b5c6483f"
   integrity sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==
@@ -252,17 +213,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.23.3", "@babel/generator@^7.23.4", "@babel/generator@^7.7.2":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.4.tgz#4a41377d8566ec18f807f42962a7f3551de83d1c"
-  integrity sha512-esuS49Cga3HcThFNebGhlgsrVLkvhqvYDTzgjfFFlHJcIfLe5jFmRRfCQ1KuBfc4Jrtn3ndLgKWAKjBE+IraYQ==
-  dependencies:
-    "@babel/types" "^7.23.4"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
-"@babel/generator@^7.23.6":
+"@babel/generator@^7.23.6", "@babel/generator@^7.7.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
   integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
@@ -286,18 +237,7 @@
   dependencies:
     "@babel/types" "^7.22.15"
 
-"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
-  integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
-  dependencies:
-    "@babel/compat-data" "^7.22.9"
-    "@babel/helper-validator-option" "^7.22.15"
-    browserslist "^4.21.9"
-    lru-cache "^5.1.1"
-    semver "^6.3.1"
-
-"@babel/helper-compilation-targets@^7.23.6":
+"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
   integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
@@ -332,17 +272,6 @@
     regexpu-core "^5.3.1"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz#a71c10f7146d809f4a256c373f462d9bba8cf6ba"
-  integrity sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.22.6"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-
 "@babel/helper-define-polyfill-provider@^0.4.4":
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz#64df615451cb30e94b59a9696022cffac9a10088"
@@ -460,12 +389,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
-"@babel/helper-validator-option@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
-  integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
-
-"@babel/helper-validator-option@^7.23.5":
+"@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
   integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
@@ -479,15 +403,6 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.23.2":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.4.tgz#7d2cfb969aa43222032193accd7329851facf3c1"
-  integrity sha512-HfcMizYz10cr3h29VqyfGL6ZWIjTwWfvYBMsBVGwpcbhNGe3wQ1ZXZRPzZoAHhd9OqHadHqjQ89iVKINXnbzuw==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.4"
-    "@babel/types" "^7.23.4"
-
 "@babel/helpers@^7.23.7":
   version "7.23.8"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.8.tgz#fc6b2d65b16847fd50adddbd4232c76378959e34"
@@ -506,15 +421,10 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.3", "@babel/parser@^7.23.4", "@babel/parser@^7.7.0":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.4.tgz#409fbe690c333bb70187e2de4021e1e47a026661"
-  integrity sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==
-
-"@babel/parser@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
-  integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.6", "@babel/parser@^7.23.9", "@babel/parser@^7.7.0":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
+  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3":
   version "7.23.3"
@@ -532,14 +442,6 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-transform-optional-chaining" "^7.23.3"
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz#20c60d4639d18f7da8602548512e9d3a4c8d7098"
-  integrity sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.23.7":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz#516462a95d10a9618f197d39ad291a9b47ae1d7b"
@@ -708,16 +610,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-async-generator-functions@^7.23.3":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.4.tgz#93ac8e3531f347fba519b4703f9ff2a75c6ae27a"
-  integrity sha512-efdkfPhHYTtn0G6n2ddrESE91fgXxjlqLsnUtPWnJs4a4mZIbUaK7ffqKIIUKXSHwcDvaCVX6GXkaJJFqtX7jw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-remap-async-to-generator" "^7.22.20"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
 "@babel/plugin-transform-async-generator-functions@^7.23.7":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz#3aa0b4f2fa3788b5226ef9346cf6d16ec61f99cd"
@@ -744,7 +636,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-block-scoping@^7.23.3", "@babel/plugin-transform-block-scoping@^7.23.4":
+"@babel/plugin-transform-block-scoping@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz#b2d38589531c6c80fbe25e6b58e763622d2d3cf5"
   integrity sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==
@@ -759,7 +651,7 @@
     "@babel/helper-create-class-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-class-static-block@^7.23.3", "@babel/plugin-transform-class-static-block@^7.23.4":
+"@babel/plugin-transform-class-static-block@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz#2a202c8787a8964dd11dfcedf994d36bfc844ab5"
   integrity sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==
@@ -768,21 +660,6 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-transform-classes@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.3.tgz#73380c632c095b03e8503c24fd38f95ad41ffacb"
-  integrity sha512-FGEQmugvAEu2QtgtU0uTASXevfLMFfBeVCIIdcQhn/uBQsMTjBajdnAtanQlOcuihWh10PZ7+HWvc7NtBwP74w==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    globals "^11.1.0"
-
 "@babel/plugin-transform-classes@^7.23.8":
   version "7.23.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz#d08ae096c240347badd68cdf1b6d1624a6435d92"
@@ -827,7 +704,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-dynamic-import@^7.23.3", "@babel/plugin-transform-dynamic-import@^7.23.4":
+"@babel/plugin-transform-dynamic-import@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz#c7629e7254011ac3630d47d7f34ddd40ca535143"
   integrity sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==
@@ -843,7 +720,7 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-export-namespace-from@^7.23.3", "@babel/plugin-transform-export-namespace-from@^7.23.4":
+"@babel/plugin-transform-export-namespace-from@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz#084c7b25e9a5c8271e987a08cf85807b80283191"
   integrity sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==
@@ -851,13 +728,6 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-for-of@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.3.tgz#afe115ff0fbce735e02868d41489093c63e15559"
-  integrity sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-for-of@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz#81c37e24171b37b370ba6aaffa7ac86bcb46f94e"
@@ -875,7 +745,7 @@
     "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-json-strings@^7.23.3", "@babel/plugin-transform-json-strings@^7.23.4":
+"@babel/plugin-transform-json-strings@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz#a871d9b6bd171976efad2e43e694c961ffa3714d"
   integrity sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==
@@ -890,7 +760,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-logical-assignment-operators@^7.23.3", "@babel/plugin-transform-logical-assignment-operators@^7.23.4":
+"@babel/plugin-transform-logical-assignment-operators@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz#e599f82c51d55fac725f62ce55d3a0886279ecb5"
   integrity sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==
@@ -955,7 +825,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.23.3", "@babel/plugin-transform-nullish-coalescing-operator@^7.23.4":
+"@babel/plugin-transform-nullish-coalescing-operator@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz#45556aad123fc6e52189ea749e33ce090637346e"
   integrity sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==
@@ -963,7 +833,7 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-transform-numeric-separator@^7.23.3", "@babel/plugin-transform-numeric-separator@^7.23.4":
+"@babel/plugin-transform-numeric-separator@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz#03d08e3691e405804ecdd19dd278a40cca531f29"
   integrity sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==
@@ -971,7 +841,7 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-rest-spread@^7.23.3", "@babel/plugin-transform-object-rest-spread@^7.23.4":
+"@babel/plugin-transform-object-rest-spread@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz#2b9c2d26bf62710460bdc0d1730d4f1048361b83"
   integrity sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==
@@ -990,7 +860,7 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-replace-supers" "^7.22.20"
 
-"@babel/plugin-transform-optional-catch-binding@^7.23.3", "@babel/plugin-transform-optional-catch-binding@^7.23.4":
+"@babel/plugin-transform-optional-catch-binding@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz#318066de6dacce7d92fa244ae475aa8d91778017"
   integrity sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==
@@ -1022,7 +892,7 @@
     "@babel/helper-create-class-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-private-property-in-object@^7.23.3", "@babel/plugin-transform-private-property-in-object@^7.23.4":
+"@babel/plugin-transform-private-property-in-object@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz#3ec711d05d6608fd173d9b8de39872d8dbf68bf5"
   integrity sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==
@@ -1131,93 +1001,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/preset-env@^7.11.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.3.tgz#d299e0140a7650684b95c62be2db0ef8c975143e"
-  integrity sha512-ovzGc2uuyNfNAs/jyjIGxS8arOHS5FENZaNn4rtE7UdKMMkqHCvboHfcuhWLZNX5cB44QfcGNWjaevxMzzMf+Q==
-  dependencies:
-    "@babel/compat-data" "^7.23.3"
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-option" "^7.22.15"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.23.3"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.23.3"
-    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.23.3"
-    "@babel/plugin-syntax-import-attributes" "^7.23.3"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
-    "@babel/plugin-transform-arrow-functions" "^7.23.3"
-    "@babel/plugin-transform-async-generator-functions" "^7.23.3"
-    "@babel/plugin-transform-async-to-generator" "^7.23.3"
-    "@babel/plugin-transform-block-scoped-functions" "^7.23.3"
-    "@babel/plugin-transform-block-scoping" "^7.23.3"
-    "@babel/plugin-transform-class-properties" "^7.23.3"
-    "@babel/plugin-transform-class-static-block" "^7.23.3"
-    "@babel/plugin-transform-classes" "^7.23.3"
-    "@babel/plugin-transform-computed-properties" "^7.23.3"
-    "@babel/plugin-transform-destructuring" "^7.23.3"
-    "@babel/plugin-transform-dotall-regex" "^7.23.3"
-    "@babel/plugin-transform-duplicate-keys" "^7.23.3"
-    "@babel/plugin-transform-dynamic-import" "^7.23.3"
-    "@babel/plugin-transform-exponentiation-operator" "^7.23.3"
-    "@babel/plugin-transform-export-namespace-from" "^7.23.3"
-    "@babel/plugin-transform-for-of" "^7.23.3"
-    "@babel/plugin-transform-function-name" "^7.23.3"
-    "@babel/plugin-transform-json-strings" "^7.23.3"
-    "@babel/plugin-transform-literals" "^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.23.3"
-    "@babel/plugin-transform-member-expression-literals" "^7.23.3"
-    "@babel/plugin-transform-modules-amd" "^7.23.3"
-    "@babel/plugin-transform-modules-commonjs" "^7.23.3"
-    "@babel/plugin-transform-modules-systemjs" "^7.23.3"
-    "@babel/plugin-transform-modules-umd" "^7.23.3"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
-    "@babel/plugin-transform-new-target" "^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.23.3"
-    "@babel/plugin-transform-numeric-separator" "^7.23.3"
-    "@babel/plugin-transform-object-rest-spread" "^7.23.3"
-    "@babel/plugin-transform-object-super" "^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding" "^7.23.3"
-    "@babel/plugin-transform-optional-chaining" "^7.23.3"
-    "@babel/plugin-transform-parameters" "^7.23.3"
-    "@babel/plugin-transform-private-methods" "^7.23.3"
-    "@babel/plugin-transform-private-property-in-object" "^7.23.3"
-    "@babel/plugin-transform-property-literals" "^7.23.3"
-    "@babel/plugin-transform-regenerator" "^7.23.3"
-    "@babel/plugin-transform-reserved-words" "^7.23.3"
-    "@babel/plugin-transform-shorthand-properties" "^7.23.3"
-    "@babel/plugin-transform-spread" "^7.23.3"
-    "@babel/plugin-transform-sticky-regex" "^7.23.3"
-    "@babel/plugin-transform-template-literals" "^7.23.3"
-    "@babel/plugin-transform-typeof-symbol" "^7.23.3"
-    "@babel/plugin-transform-unicode-escapes" "^7.23.3"
-    "@babel/plugin-transform-unicode-property-regex" "^7.23.3"
-    "@babel/plugin-transform-unicode-regex" "^7.23.3"
-    "@babel/plugin-transform-unicode-sets-regex" "^7.23.3"
-    "@babel/preset-modules" "0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2 "^0.4.6"
-    babel-plugin-polyfill-corejs3 "^0.8.5"
-    babel-plugin-polyfill-regenerator "^0.5.3"
-    core-js-compat "^3.31.0"
-    semver "^6.3.1"
-
-"@babel/preset-env@^7.23.8":
+"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.23.8":
   version "7.23.8"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.8.tgz#7d6f8171ea7c221ecd28059e65ad37c20e441e3e"
   integrity sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==
@@ -1344,23 +1128,7 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
-"@babel/traverse@^7.22.5", "@babel/traverse@^7.23.3", "@babel/traverse@^7.23.4", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.4.tgz#c2790f7edf106d059a0098770fe70801417f3f85"
-  integrity sha512-IYM8wSUwunWTB6tFC2dkKZhxbIjHoWemdK+3f8/wq8aKhbUscxD5MX72ubd90fxvFknaLPeGw5ycU84V1obHJg==
-  dependencies:
-    "@babel/code-frame" "^7.23.4"
-    "@babel/generator" "^7.23.4"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.4"
-    "@babel/types" "^7.23.4"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/traverse@^7.23.7":
+"@babel/traverse@^7.22.5", "@babel/traverse@^7.23.7", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
   integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
@@ -1376,16 +1144,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3", "@babel/types@^7.23.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.4.tgz#7206a1810fc512a7f7f7d4dace4cb4c1c9dbfb8e"
-  integrity sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==
-  dependencies:
-    "@babel/helper-string-parser" "^7.23.4"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.23.6":
+"@babel/types@^7.0.0", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
   integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
@@ -1912,10 +1671,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
   integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
-"@hutson/parse-repository-url@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-5.0.0.tgz#bf344cc75136039bc41bcf5d1ddbcb40405fca3b"
-  integrity sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==
+"@hutson/parse-repository-url@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
+  integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
 "@intlify/bundle-utils@^7.4.0":
   version "7.4.0"
@@ -1941,7 +1700,7 @@
     "@intlify/message-compiler" "9.9.0"
     "@intlify/shared" "9.9.0"
 
-"@intlify/message-compiler@9.9.0":
+"@intlify/message-compiler@9.9.0", "@intlify/message-compiler@^9.4.0":
   version "9.9.0"
   resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.9.0.tgz#7952759329e7af0388afbce7a984820bbeff82eb"
   integrity sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==
@@ -1949,20 +1708,7 @@
     "@intlify/shared" "9.9.0"
     source-map-js "^1.0.2"
 
-"@intlify/message-compiler@^9.4.0":
-  version "9.7.1"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.7.1.tgz#2cd5f26c6b9f19afffd62e69d192cc4e9e51ba9a"
-  integrity sha512-HfIr2Hn/K7b0Zv4kGqkxAxwtipyxAwhI9a3krN5cuhH/G9gkaik7of1PdzjR3Mix43t2onBiKYQyaU7mo7e0aA==
-  dependencies:
-    "@intlify/shared" "9.7.1"
-    source-map-js "^1.0.2"
-
-"@intlify/shared@9.7.1", "@intlify/shared@^9.4.0":
-  version "9.7.1"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.7.1.tgz#a4902421aacda2d716981eb9528aef0163c7bb0a"
-  integrity sha512-CBKnHzlUYGrk5QII9q4nElAQKO5cX1rRx8VmSWXltyOZjbkGHXYQTHULn6KwRi+CypuBCfmPkyPBHMzosypIeg==
-
-"@intlify/shared@9.9.0":
+"@intlify/shared@9.9.0", "@intlify/shared@^9.4.0":
   version "9.9.0"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.9.0.tgz#56907633c0f7b2d50f53269d31e88e7b24d39187"
   integrity sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==
@@ -3335,16 +3081,11 @@
   resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.27.7.tgz#7d094c0a67defaeec5b0257cf6930e8a7a9adb04"
   integrity sha512-w+r9tJPEUSflCPVajx15yfFtdaxjiqiWIu6i4sHKGwg0B24ivVb+6e1J5R2ry19F/YPjBi6llz5BRB9vasu+Iw==
 
-"@percy/sdk-utils@1.27.7":
+"@percy/sdk-utils@1.27.7", "@percy/sdk-utils@^1.3.1":
   version "1.27.7"
   resolved "https://registry.yarnpkg.com/@percy/sdk-utils/-/sdk-utils-1.27.7.tgz#b376c1ad653f3c70fea08a3db11eb63622ca6b53"
   integrity sha512-E21dIEQ9wwGDno41FdMDYf6jJow5scbWGClqKE/ptB+950W4UF5C4hxhVVQoEJxDdLE/Gy/8ZJR7upvPHShWDg==
 
-"@percy/sdk-utils@^1.3.1":
-  version "1.27.4"
-  resolved "https://registry.yarnpkg.com/@percy/sdk-utils/-/sdk-utils-1.27.4.tgz#7396d743aa6916ae7fad639b0fa86f206a9b2aca"
-  integrity sha512-vhPcdtmJlvTYJ5VOqiVzo02ujdtBFNw1/Bj+2ybiZgn7PkCDPFcITfXoWWPea319EIibGC4ZHjWHctRBgtW/tQ==
-
 "@percy/webdriver-utils@1.27.7":
   version "1.27.7"
   resolved "https://registry.yarnpkg.com/@percy/webdriver-utils/-/webdriver-utils-1.27.7.tgz#5c74452f6763b90aee4b713f21da2672bae1d28d"
@@ -3434,10 +3175,10 @@
     "@rollup/pluginutils" "^5.0.1"
     resolve "^1.22.1"
 
-"@rollup/pluginutils@^3 || ^4 || ^5", "@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.0.2", "@rollup/pluginutils@^5.0.5":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
-  integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
+"@rollup/pluginutils@^3 || ^4 || ^5", "@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.0.2", "@rollup/pluginutils@^5.0.4", "@rollup/pluginutils@^5.0.5", "@rollup/pluginutils@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
@@ -3709,10 +3450,10 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@*", "@types/node@>= 8":
-  version "20.10.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.0.tgz#16ddf9c0a72b832ec4fcce35b8249cf149214617"
-  integrity sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==
+"@types/node@*", "@types/node@>= 8", "@types/node@^20.10.8":
+  version "20.10.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.8.tgz#f1e223cbde9e25696661d167a5b93a9b2a5d57c7"
+  integrity sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==
   dependencies:
     undici-types "~5.26.4"
 
@@ -3723,14 +3464,7 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^20.10.8":
-  version "20.10.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.8.tgz#f1e223cbde9e25696661d167a5b93a9b2a5d57c7"
-  integrity sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==
-  dependencies:
-    undici-types "~5.26.4"
-
-"@types/normalize-package-data@^2.4.0", "@types/normalize-package-data@^2.4.1":
+"@types/normalize-package-data@^2.4.0":
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
   integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
@@ -4086,89 +3820,47 @@
     html-tags "^3.3.1"
     svg-tags "^1.0.0"
 
-"@vue/compiler-core@3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.9.tgz#df1fc7947dcef5c2e12d257eae540057707f47d1"
-  integrity sha512-+/Lf68Vr/nFBA6ol4xOtJrW+BQWv3QWKfRwGSm70jtXwfhZNF4R/eRgyVJYoxFRhdCTk/F6g99BP0ffPgZihfQ==
-  dependencies:
-    "@babel/parser" "^7.23.3"
-    "@vue/shared" "3.3.9"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-core@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.7.tgz#7c4d0f23a21e2e0e76ef9806b702712f23015e04"
-  integrity sha512-hhCaE3pTMrlIJK7M/o3Xf7HV8+JoNTGOQ/coWS+V+pH6QFFyqtoXqQzpqsNp7UK17xYKua/MBiKj4e1vgZOBYw==
+"@vue/compiler-core@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.19.tgz#3161b1ede69da00f3ce8155dfab907a3eaa0515e"
+  integrity sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==
   dependencies:
-    "@babel/parser" "^7.23.6"
-    "@vue/shared" "3.4.7"
+    "@babel/parser" "^7.23.9"
+    "@vue/shared" "3.4.19"
     entities "^4.5.0"
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-dom@3.3.9", "@vue/compiler-dom@^3.3.0":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.9.tgz#67315ea4193d9d18c7a710889b8f90f7aa3914d2"
-  integrity sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==
+"@vue/compiler-dom@3.4.19", "@vue/compiler-dom@^3.3.0":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz#2457e57e978f431e3b5fd11fc50a3e92d5816f9a"
+  integrity sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==
   dependencies:
-    "@vue/compiler-core" "3.3.9"
-    "@vue/shared" "3.3.9"
+    "@vue/compiler-core" "3.4.19"
+    "@vue/shared" "3.4.19"
 
-"@vue/compiler-dom@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.7.tgz#19c41236b56f2d4b777521587aea129636c52417"
-  integrity sha512-qDKBAIurCTub4n/6jDYkXwgsFuriqqmmLrIq1N2QDfYJA/mwiwvxi09OGn28g+uDdERX9NaKDLji0oTjE3sScg==
+"@vue/compiler-sfc@3.4.19", "@vue/compiler-sfc@^3.2.31", "@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.4.19":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz#33b238ded6d63e51f6a7048b742626f6007df129"
+  integrity sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==
   dependencies:
-    "@vue/compiler-core" "3.4.7"
-    "@vue/shared" "3.4.7"
-
-"@vue/compiler-sfc@3.4.7", "@vue/compiler-sfc@^3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.7.tgz#2a50c25f163695a45ed7a085c82ee2b22f68f78d"
-  integrity sha512-Gec6CLkReVswDYjQFq79O5rktri4R7TsD/VPCiUoJw40JhNNxaNJJa8mrQrWoJluW4ETy6QN0NUyC/JO77OCOw==
-  dependencies:
-    "@babel/parser" "^7.23.6"
-    "@vue/compiler-core" "3.4.7"
-    "@vue/compiler-dom" "3.4.7"
-    "@vue/compiler-ssr" "3.4.7"
-    "@vue/shared" "3.4.7"
+    "@babel/parser" "^7.23.9"
+    "@vue/compiler-core" "3.4.19"
+    "@vue/compiler-dom" "3.4.19"
+    "@vue/compiler-ssr" "3.4.19"
+    "@vue/shared" "3.4.19"
     estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-    postcss "^8.4.32"
+    magic-string "^0.30.6"
+    postcss "^8.4.33"
     source-map-js "^1.0.2"
 
-"@vue/compiler-sfc@^3.2.31", "@vue/compiler-sfc@^3.2.47":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.9.tgz#5900906baba1a90389200d81753ad0f7ceb98a83"
-  integrity sha512-wy0CNc8z4ihoDzjASCOCsQuzW0A/HP27+0MDSSICMjVIFzk/rFViezkR3dzH+miS2NDEz8ywMdbjO5ylhOLI2A==
-  dependencies:
-    "@babel/parser" "^7.23.3"
-    "@vue/compiler-core" "3.3.9"
-    "@vue/compiler-dom" "3.3.9"
-    "@vue/compiler-ssr" "3.3.9"
-    "@vue/reactivity-transform" "3.3.9"
-    "@vue/shared" "3.3.9"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-    postcss "^8.4.31"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-ssr@3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.9.tgz#3b3dbfa5368165fa4ff74c060503b4087ec1beed"
-  integrity sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==
-  dependencies:
-    "@vue/compiler-dom" "3.3.9"
-    "@vue/shared" "3.3.9"
-
-"@vue/compiler-ssr@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.7.tgz#76020fad73d0beef0953946d2c5aacb3faafff84"
-  integrity sha512-PvYeSOvnCkST5mGS0TLwEn5w+4GavtEn6adcq8AspbHaIr+mId5hp7cG3ASy3iy8b+LuXEG2/QaV/nj5BQ/Aww==
+"@vue/compiler-ssr@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.19.tgz#1f8ee06005ebbaa354f8783fad84e9f7ea4a69c2"
+  integrity sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==
   dependencies:
-    "@vue/compiler-dom" "3.4.7"
-    "@vue/shared" "3.4.7"
+    "@vue/compiler-dom" "3.4.19"
+    "@vue/shared" "3.4.19"
 
 "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
   version "6.5.1"
@@ -4190,66 +3882,42 @@
     path-browserify "^1.0.1"
     vue-template-compiler "^2.7.14"
 
-"@vue/reactivity-transform@3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.9.tgz#5d894dd9a42a422a2db309babb385f9a2529b52f"
-  integrity sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==
+"@vue/reactivity@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.19.tgz#8cf335d97d07881d8184cb23289289dc18b03f60"
+  integrity sha512-+VcwrQvLZgEclGZRHx4O2XhyEEcKaBi50WbxdVItEezUf4fqRh838Ix6amWTdX0CNb/b6t3Gkz3eOebfcSt+UA==
   dependencies:
-    "@babel/parser" "^7.23.3"
-    "@vue/compiler-core" "3.3.9"
-    "@vue/shared" "3.3.9"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-
-"@vue/reactivity@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.7.tgz#034064c673fe22718c79ab95bb05dd72ce17d709"
-  integrity sha512-F539DO0ogH0+L8F9Pnw7cjqibcmSOh5UTk16u5f4MKQ8fraqepI9zdh+sozPX6VmEHOcjo8qw3Or9ZcFFw4SZA==
-  dependencies:
-    "@vue/shared" "3.4.7"
+    "@vue/shared" "3.4.19"
 
-"@vue/runtime-core@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.7.tgz#c1e59a2c190d36b23589545dd3a471ce9f63f784"
-  integrity sha512-QMMsWRQaD3BpGyjjChthpl4Mji4Fjx1qfdufsXlDkKU3HV+hWNor2z+29F+E1MmVcP0ZfRZUfqYgtsQoL7IGwQ==
+"@vue/runtime-core@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.19.tgz#ef10357fdf3afdf68523b55424541000105e2aeb"
+  integrity sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==
   dependencies:
-    "@vue/reactivity" "3.4.7"
-    "@vue/shared" "3.4.7"
+    "@vue/reactivity" "3.4.19"
+    "@vue/shared" "3.4.19"
 
-"@vue/runtime-dom@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.7.tgz#b16c8be22a345dc5b63338b0d2bc3240a58ca6ac"
-  integrity sha512-XwegyUY1rw8zxsX1Z36vwYcqo+uOgih5ti7y9vx+pPFhNdSQmN4LqK2RmSeAJG1oKV8NqSUmjpv92f/x6h0SeQ==
+"@vue/runtime-dom@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.19.tgz#079141e31d9f47515b9595f29843d51011f88739"
+  integrity sha512-IyZzIDqfNCF0OyZOauL+F4yzjMPN2rPd8nhqPP2N1lBn3kYqJpPHHru+83Rkvo2lHz5mW+rEeIMEF9qY3PB94g==
   dependencies:
-    "@vue/runtime-core" "3.4.7"
-    "@vue/shared" "3.4.7"
+    "@vue/runtime-core" "3.4.19"
+    "@vue/shared" "3.4.19"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.7.tgz#97efcfeebd299d96ebd1817372f5a75ec3f3af96"
-  integrity sha512-3bWnYLEkLLhkDWqvNk7IvbQD4UcxvFKxELBiOO2iG3m6AniFIsBWfHOO5tLVQnjdWkODu4rq0GipmfEenVAK5Q==
+"@vue/server-renderer@3.4.19", "@vue/server-renderer@^3.2.26":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.19.tgz#e6f8ff5268d0758766ca9835375218924d5f0eb6"
+  integrity sha512-eAj2p0c429RZyyhtMRnttjcSToch+kTWxFPHlzGMkR28ZbF1PDlTcmGmlDxccBuqNd9iOQ7xPRPAGgPVj+YpQw==
   dependencies:
-    "@vue/compiler-ssr" "3.4.7"
-    "@vue/shared" "3.4.7"
-
-"@vue/server-renderer@^3.2.26":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.9.tgz#ffb41bc9c7afafcc608d0c500e9d6b0af7d68fad"
-  integrity sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==
-  dependencies:
-    "@vue/compiler-ssr" "3.3.9"
-    "@vue/shared" "3.3.9"
-
-"@vue/shared@3.3.9", "@vue/shared@^3.3.0":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.9.tgz#df740d26d338faf03e09ca662a8031acf66051db"
-  integrity sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==
+    "@vue/compiler-ssr" "3.4.19"
+    "@vue/shared" "3.4.19"
 
-"@vue/shared@3.4.7":
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.7.tgz#14fce32833f9f4811a2997c072f19e4adfed19d2"
-  integrity sha512-G+i4glX1dMJk88sbJEcQEGWRQnVm9eIY7CcQbO5dpdsD9SF8jka3Mr5OqZYGjczGN1+D6EUwdu6phcmcx9iuPA==
+"@vue/shared@3.4.19", "@vue/shared@^3.3.0":
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.19.tgz#28105147811bcf1e6612bf1c9ab0c6d91ada019c"
+  integrity sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==
 
 "@vue/test-utils@2.4.3":
   version "2.4.3"
@@ -4281,10 +3949,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^0.6.3":
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-0.6.3.tgz#9c8b7664650b033b8b9a027548b96829b2ec73c6"
-  integrity sha512-3OCfIUstwsj1y2nDJG3wBBW8b7Sl0rSumTf0FcGN2Z1GKlGe/1wn+byckKAPUXrjGWK4jFOgSob6ky6X+FwBuQ==
+"@vuetify/one@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.1.tgz#938fa96bfa9329cf326a45d2ec03f22b317b23fc"
+  integrity sha512-Q9XgP+eqfImVHHucREycGgzaOk4R3m5l6wMPBsEcv5XXhzkhncILm/KMhel/5sYRn9MfBNpyg17s7NeciixTRg==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"
@@ -4384,12 +4052,7 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.2.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.0.tgz#2097665af50fd0cf7a2dfccd2b9368964e66540f"
-  integrity sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==
-
-acorn-walk@^8.3.1:
+acorn-walk@^8.2.0, acorn-walk@^8.3.1:
   version "8.3.1"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.1.tgz#2f10f5b69329d90ae18c58bf1fa8fccd8b959a43"
   integrity sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==
@@ -4912,15 +4575,6 @@ babel-plugin-module-resolver@^5.0.0:
     reselect "^4.1.7"
     resolve "^1.22.1"
 
-babel-plugin-polyfill-corejs2@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313"
-  integrity sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==
-  dependencies:
-    "@babel/compat-data" "^7.22.6"
-    "@babel/helper-define-polyfill-provider" "^0.4.3"
-    semver "^6.3.1"
-
 babel-plugin-polyfill-corejs2@^0.4.7:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz#679d1b94bf3360f7682e11f2cb2708828a24fe8c"
@@ -4930,14 +4584,6 @@ babel-plugin-polyfill-corejs2@^0.4.7:
     "@babel/helper-define-polyfill-provider" "^0.4.4"
     semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.8.5:
-  version "0.8.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz#25c2d20002da91fe328ff89095c85a391d6856cf"
-  integrity sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.3"
-    core-js-compat "^3.33.1"
-
 babel-plugin-polyfill-corejs3@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz#941855aa7fdaac06ed24c730a93450d2b2b76d04"
@@ -4946,13 +4592,6 @@ babel-plugin-polyfill-corejs3@^0.8.7:
     "@babel/helper-define-polyfill-provider" "^0.4.4"
     core-js-compat "^3.33.1"
 
-babel-plugin-polyfill-regenerator@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz#d4c49e4b44614607c13fb769bcd85c72bb26a4a5"
-  integrity sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.3"
-
 babel-plugin-polyfill-regenerator@^0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.4.tgz#c6fc8eab610d3a11eb475391e52584bacfc020f4"
@@ -5131,17 +4770,7 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browserslist@^4.0.0, browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.22.1:
-  version "4.22.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
-  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
-  dependencies:
-    caniuse-lite "^1.0.30001541"
-    electron-to-chromium "^1.4.535"
-    node-releases "^2.0.13"
-    update-browserslist-db "^1.0.13"
-
-browserslist@^4.22.2:
+browserslist@^4.0.0, browserslist@^4.21.10, browserslist@^4.22.1, browserslist@^4.22.2:
   version "4.22.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b"
   integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
@@ -5385,12 +5014,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001565"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz#a528b253c8a2d95d2b415e11d8b9942acc100c4f"
-  integrity sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==
-
-caniuse-lite@^1.0.30001565:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
   version "1.0.30001576"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
   integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
@@ -5553,6 +5177,15 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -5705,14 +5338,6 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
-compare-func@^1.3.1:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.4.tgz#6b07c4c5e8341119baf44578085bda0f4a823516"
-  integrity sha512-sq2sWtrqKPkEXAC8tEJA1+BqAH9GbFkGBtUOqrUX57VSfwp8xyktctk+uLoRy5eccTdxzDcVIztlYDpKs3Jv1Q==
-  dependencies:
-    array-ify "^1.0.0"
-    dot-prop "^3.0.0"
-
 compare-func@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-2.0.0.tgz#fb65e75edbddfd2e568554e8b5b05fff7a51fcb3"
@@ -5801,14 +5426,6 @@ content-disposition@^0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
-conventional-changelog-angular@^1.6.6:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz#b27f2b315c16d0a1f23eb181309d0e6a4698ea0f"
-  integrity sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==
-  dependencies:
-    compare-func "^1.3.1"
-    q "^1.5.1"
-
 conventional-changelog-angular@^5.0.3:
   version "5.0.12"
   resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz#c979b8b921cbfe26402eb3da5bbfda02d865a2b9"
@@ -5817,24 +5434,17 @@ conventional-changelog-angular@^5.0.3:
     compare-func "^2.0.0"
     q "^1.5.1"
 
-conventional-changelog-angular@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz#5eec8edbff15aa9b1680a8dcfbd53e2d7eb2ba7a"
-  integrity sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==
+conventional-changelog-angular@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-6.0.0.tgz#a9a9494c28b7165889144fd5b91573c4aa9ca541"
+  integrity sha512-6qLgrBF4gueoC7AFVHu51nHL9pF9FRjXrH+ceVf7WmAfH3gs+gEYOkvxhjMPjZu57I4AGUGoNTY8V7Hrgf1uqg==
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-atom@^2.0.0:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-2.0.8.tgz#a759ec61c22d1c1196925fca88fe3ae89fd7d8de"
-  integrity sha512-xo6v46icsFTK3bb7dY/8m2qvc8sZemRgdqLb/bjpBsH2UyOS8rKNTgcb5025Hri6IpANPApbXMg15QLb1LJpBw==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-atom@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-4.0.0.tgz#291fd1583517d4e7131dba779ad9fa238359daa1"
-  integrity sha512-q2YtiN7rnT1TGwPTwjjBSIPIzDJCRE+XAUahWxnh+buKK99Kks4WLMHoexw38GXx9OUxAsrp44f9qXe5VEMYhw==
+conventional-changelog-atom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-3.0.0.tgz#32de463a29db773de15382c96acda47930d3d24d"
+  integrity sha512-pnN5bWpH+iTUWU3FaYdw5lJmfWeqSyrUkG+wyHBI9tC1dLNnHkbAOg1SzTQ7zBqiFrfo55h40VsGXWMdopwc5g==
 
 conventional-changelog-cli@^4.1.0:
   version "4.1.0"
@@ -5846,26 +5456,19 @@ conventional-changelog-cli@^4.1.0:
     meow "^12.0.1"
     tempfile "^5.0.0"
 
-conventional-changelog-codemirror@^2.0.0:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-2.0.8.tgz#398e9530f08ce34ec4640af98eeaf3022eb1f7dc"
-  integrity sha512-z5DAsn3uj1Vfp7po3gpt2Boc+Bdwmw2++ZHa5Ak9k0UKsYAO5mH1UBTN0qSCuJZREIhX6WU4E1p3IW2oRCNzQw==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-codemirror@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-4.0.0.tgz#3421aced2377552229cef454447aa06e2a319516"
-  integrity sha512-hQSojc/5imn1GJK3A75m9hEZZhc3urojA5gMpnar4JHmgLnuM3CUIARPpEk86glEKr3c54Po3WV/vCaO/U8g3Q==
+conventional-changelog-codemirror@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-3.0.0.tgz#6d5a4c67713346a9ebbcfb6336b3269ce8ddceeb"
+  integrity sha512-wzchZt9HEaAZrenZAUUHMCFcuYzGoZ1wG/kTRMICxsnW5AXohYMRxnyecP9ob42Gvn5TilhC0q66AtTPRSNMfw==
 
-conventional-changelog-conventionalcommits@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-7.0.2.tgz#aa5da0f1b2543094889e8cf7616ebe1a8f5c70d5"
-  integrity sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==
+conventional-changelog-conventionalcommits@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-6.1.0.tgz#3bad05f4eea64e423d3d90fc50c17d2c8cf17652"
+  integrity sha512-3cS3GEtR78zTfMzk0AizXKKIdN4OvSh7ibNz6/DPbhWWQu7LqE/8+/GqSodV+sywUR2gpJAdP/1JFf4XtN7Zpw==
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-core@^3.1.0, conventional-changelog-core@^3.1.6:
+conventional-changelog-core@^3.1.6:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz#b31410856f431c847086a7dcb4d2ca184a7d88fb"
   integrity sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==
@@ -5884,106 +5487,59 @@ conventional-changelog-core@^3.1.0, conventional-changelog-core@^3.1.6:
     read-pkg-up "^3.0.0"
     through2 "^3.0.0"
 
-conventional-changelog-core@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-7.0.0.tgz#d8879ebb8692cd1fa8126c209e1b3af34d94e113"
-  integrity sha512-UYgaB1F/COt7VFjlYKVE/9tTzfU3VUq47r6iWf6lM5T7TlOxr0thI63ojQueRLIpVbrtHK4Ffw+yQGduw2Bhdg==
+conventional-changelog-core@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-5.0.2.tgz#78dbe6c346162be4132b7890668d3e860cad2d08"
+  integrity sha512-RhQOcDweXNWvlRwUDCpaqXzbZemKPKncCWZG50Alth72WITVd6nhVk9MJ6w1k9PFNBcZ3YwkdkChE+8+ZwtUug==
   dependencies:
-    "@hutson/parse-repository-url" "^5.0.0"
     add-stream "^1.0.0"
-    conventional-changelog-writer "^7.0.0"
-    conventional-commits-parser "^5.0.0"
-    git-raw-commits "^4.0.0"
-    git-semver-tags "^7.0.0"
-    hosted-git-info "^7.0.0"
-    normalize-package-data "^6.0.0"
-    read-pkg "^8.0.0"
-    read-pkg-up "^10.0.0"
-
-conventional-changelog-ember@^2.0.1:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-2.0.9.tgz#619b37ec708be9e74a220f4dcf79212ae1c92962"
-  integrity sha512-ulzIReoZEvZCBDhcNYfDIsLTHzYHc7awh+eI44ZtV5cx6LVxLlVtEmcO+2/kGIHGtw+qVabJYjdI5cJOQgXh1A==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-ember@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-4.0.0.tgz#d90409083a840cd8955bf8257b17498fc539db6a"
-  integrity sha512-D0IMhwcJUg1Y8FSry6XAplEJcljkHVlvAZddhhsdbL1rbsqRsMfGx/PIkPYq0ru5aDgn+OxhQ5N5yR7P9mfsvA==
-
-conventional-changelog-eslint@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-3.0.9.tgz#689bd0a470e02f7baafe21a495880deea18b7cdb"
-  integrity sha512-6NpUCMgU8qmWmyAMSZO5NrRd7rTgErjrm4VASam2u5jrZS0n38V7Y9CzTtLT2qwz5xEChDR4BduoWIr8TfwvXA==
-  dependencies:
-    q "^1.5.1"
-
-conventional-changelog-eslint@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-5.0.0.tgz#d7f428f787f079b3ce08ccc76ed46d4b1852f41b"
-  integrity sha512-6JtLWqAQIeJLn/OzUlYmzd9fKeNSWmQVim9kql+v4GrZwLx807kAJl3IJVc3jTYfVKWLxhC3BGUxYiuVEcVjgA==
+    conventional-changelog-writer "^6.0.0"
+    conventional-commits-parser "^4.0.0"
+    dateformat "^3.0.3"
+    get-pkg-repo "^4.2.1"
+    git-raw-commits "^3.0.0"
+    git-remote-origin-url "^2.0.0"
+    git-semver-tags "^5.0.0"
+    normalize-package-data "^3.0.3"
+    read-pkg "^3.0.0"
+    read-pkg-up "^3.0.0"
 
-conventional-changelog-express@^2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-2.0.6.tgz#420c9d92a347b72a91544750bffa9387665a6ee8"
-  integrity sha512-SDez2f3iVJw6V563O3pRtNwXtQaSmEfTCaTBPCqn0oG0mfkq0rX4hHBq5P7De2MncoRixrALj3u3oQsNK+Q0pQ==
-  dependencies:
-    q "^1.5.1"
+conventional-changelog-ember@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-3.0.0.tgz#8a02adc12f87285195dda43b573b7c0d1a1b266c"
+  integrity sha512-7PYthCoSxIS98vWhVcSphMYM322OxptpKAuHYdVspryI0ooLDehRXWeRWgN+zWSBXKl/pwdgAg8IpLNSM1/61A==
 
-conventional-changelog-express@^4.0.0:
+conventional-changelog-eslint@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-4.0.0.tgz#5f50086bae1cd9887959af1fa3d5244fd1f55974"
-  integrity sha512-yWyy5c7raP9v7aTvPAWzqrztACNO9+FEI1FSYh7UP7YT1AkWgv5UspUeB5v3Ibv4/o60zj2o9GF2tqKQ99lIsw==
-
-conventional-changelog-jquery@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz#0208397162e3846986e71273b6c79c5b5f80f510"
-  integrity sha512-wbz5vVcvu/SPZTDFB21fF/xo5zFq6NQR42jhtUfOrrP1N/ZjNshhGb3expCGqHYdnUHzPevHeUafsVrdxVD5Og==
-  dependencies:
-    q "^1.4.1"
-
-conventional-changelog-jquery@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-5.0.0.tgz#d56e5cc9158b5035669ac6e0f773c3e593621887"
-  integrity sha512-slLjlXLRNa/icMI3+uGLQbtrgEny3RgITeCxevJB+p05ExiTgHACP5p3XiMKzjBn80n+Rzr83XMYfRInEtCPPw==
-
-conventional-changelog-jscs@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz#0479eb443cc7d72c58bf0bcf0ef1d444a92f0e5c"
-  integrity sha512-V8sey4tE0nJUlWGi2PZKDMfawYLf/+F165xhhDjcIoTEJDxssVV5PMVzTQzjS6U/dEX85fWkur+bs6imOqkIng==
-  dependencies:
-    q "^1.4.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-4.0.0.tgz#cdcaee9bc14ffc97540ecef6771c472e54f3d75e"
+  integrity sha512-nEZ9byP89hIU0dMx37JXQkE1IpMmqKtsaR24X7aM3L6Yy/uAtbb+ogqthuNYJkeO1HyvK7JsX84z8649hvp43Q==
 
-conventional-changelog-jshint@^2.0.0:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-2.0.9.tgz#f2d7f23e6acd4927a238555d92c09b50fe3852ff"
-  integrity sha512-wMLdaIzq6TNnMHMy31hql02OEQ8nCQfExw1SE0hYL5KvU+JCTuPaDO+7JiogGT2gJAxiUGATdtYYfh+nT+6riA==
-  dependencies:
-    compare-func "^2.0.0"
-    q "^1.5.1"
+conventional-changelog-express@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-3.0.0.tgz#25bee76f7d11df45b42bd5580228b1f94c77a64f"
+  integrity sha512-HqxihpUMfIuxvlPvC6HltA4ZktQEUan/v3XQ77+/zbu8No/fqK3rxSZaYeHYant7zRxQNIIli7S+qLS9tX9zQA==
 
-conventional-changelog-jshint@^4.0.0:
+conventional-changelog-jquery@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-4.0.0.tgz#95aec357f9122b214671381ef94124287208ece9"
-  integrity sha512-LyXq1bbl0yG0Ai1SbLxIk8ZxUOe3AjnlwE6sVRQmMgetBk+4gY9EO3d00zlEt8Y8gwsITytDnPORl8al7InTjg==
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-4.0.0.tgz#bbfea102b8ea66a781e245d43ead0608842ae326"
+  integrity sha512-TTIN5CyzRMf8PUwyy4IOLmLV2DFmPtasKN+x7EQKzwSX8086XYwo+NeaeA3VUT8bvKaIy5z/JoWUvi7huUOgaw==
+
+conventional-changelog-jshint@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-3.0.0.tgz#a1743e77ffdee03b704af6faa199520d3a90a868"
+  integrity sha512-bQof4byF4q+n+dwFRkJ/jGf9dCNUv4/kCDcjeCizBvfF81TeimPZBB6fT4HYbXgxxfxWXNl/i+J6T0nI4by6DA==
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-preset-loader@^2.0.1, conventional-changelog-preset-loader@^2.1.1:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
-  integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
-
-conventional-changelog-preset-loader@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-4.1.0.tgz#996bc40d516471c5bf8248fdc30222563b9bcfe6"
-  integrity sha512-HozQjJicZTuRhCRTq4rZbefaiCzRM2pr6u2NL3XhrmQm4RMnDXfESU6JKu/pnKwx5xtdkYfNCsbhN5exhiKGJA==
+conventional-changelog-preset-loader@3.0.0, conventional-changelog-preset-loader@^2.1.1, conventional-changelog-preset-loader@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-3.0.0.tgz#14975ef759d22515d6eabae6396c2ae721d4c105"
+  integrity sha512-qy9XbdSLmVnwnvzEisjxdDiLA4OmV3o8db+Zdg4WiFw14fP3B6XNz98X0swPPpkTd/pc1K7+adKgEDM1JCUMiA==
 
-conventional-changelog-vuetify@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-vuetify/-/conventional-changelog-vuetify-1.1.0.tgz#21261872ee5d603dadedca055ed09abeaa968390"
-  integrity sha512-VWNxmXPGsR6MUI7QwKpBSzsdbiNkMOWZ8XSJFAj2ygaZKGTwzdotonlonaZkxgQH3TMKkJua/W2oZanqs1SQWg==
+conventional-changelog-vuetify@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-vuetify/-/conventional-changelog-vuetify-1.2.1.tgz#3c9f22e0c45d56375d7844b005b9f0b089b3aeed"
+  integrity sha512-/WMSxoHzdbIU3lyd4+6Komo5N4Hs4ElqXstDOaP+RdLe8aYbj9p5bZd5+5mGnGU2rBk/kvt2nUqM3X6ByrMqHw==
   dependencies:
     compare-func "^2.0.0"
     q "^1.5.1"
@@ -6004,51 +5560,35 @@ conventional-changelog-writer@^4.0.6:
     split "^1.0.0"
     through2 "^4.0.0"
 
-conventional-changelog-writer@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-7.0.1.tgz#e64ef74fa8e773cab4124af217f3f02b29eb0a9c"
-  integrity sha512-Uo+R9neH3r/foIvQ0MKcsXkX642hdm9odUp7TqgFS7BsalTcjzRlIfWZrZR1gbxOozKucaKt5KAbjW8J8xRSmA==
+conventional-changelog-writer@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-6.0.1.tgz#d8d3bb5e1f6230caed969dcc762b1c368a8f7b01"
+  integrity sha512-359t9aHorPw+U+nHzUXHS5ZnPBOizRxfQsWT5ZDHBfvfxQOAik+yfuhKXG66CN5LEWPpMNnIMHUTCKeYNprvHQ==
   dependencies:
-    conventional-commits-filter "^4.0.0"
+    conventional-commits-filter "^3.0.0"
+    dateformat "^3.0.3"
     handlebars "^4.7.7"
     json-stringify-safe "^5.0.1"
-    meow "^12.0.1"
-    semver "^7.5.2"
-    split2 "^4.0.0"
+    meow "^8.1.2"
+    semver "^7.0.0"
+    split "^1.0.1"
 
-conventional-changelog@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-2.0.3.tgz#779cff582c0091d2b24574003eaa82ef5ddf653d"
-  integrity sha512-4bcII9cJHSKb2qi9e8qGF6aJHLf/AB0dokhyR+X6QILTMl77s4l163vK+reXhajvfOYbbHQvsrWybr5+PKZwNA==
-  dependencies:
-    conventional-changelog-angular "^1.6.6"
-    conventional-changelog-atom "^2.0.0"
-    conventional-changelog-codemirror "^2.0.0"
-    conventional-changelog-core "^3.1.0"
-    conventional-changelog-ember "^2.0.1"
-    conventional-changelog-eslint "^3.0.0"
-    conventional-changelog-express "^2.0.0"
-    conventional-changelog-jquery "^0.1.0"
-    conventional-changelog-jscs "^0.1.0"
-    conventional-changelog-jshint "^2.0.0"
-    conventional-changelog-preset-loader "^2.0.1"
-
-conventional-changelog@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-5.1.0.tgz#04b36a5ad0518e0323e9d629e3b86e34f7abb7eb"
-  integrity sha512-aWyE/P39wGYRPllcCEZDxTVEmhyLzTc9XA6z6rVfkuCD2UBnhV/sgSOKbQrEG5z9mEZJjnopjgQooTKxEg8mAg==
-  dependencies:
-    conventional-changelog-angular "^7.0.0"
-    conventional-changelog-atom "^4.0.0"
-    conventional-changelog-codemirror "^4.0.0"
-    conventional-changelog-conventionalcommits "^7.0.2"
-    conventional-changelog-core "^7.0.0"
-    conventional-changelog-ember "^4.0.0"
-    conventional-changelog-eslint "^5.0.0"
-    conventional-changelog-express "^4.0.0"
-    conventional-changelog-jquery "^5.0.0"
-    conventional-changelog-jshint "^4.0.0"
-    conventional-changelog-preset-loader "^4.1.0"
+conventional-changelog@4.0.0, conventional-changelog@^2.0.0, conventional-changelog@^5.1.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-4.0.0.tgz#51a8d7765e5837bb29b3ef1cf395d6ef594827a9"
+  integrity sha512-JbZjwE1PzxQCvm+HUTIr+pbSekS8qdOZzMakdFyPtdkEWwFvwEJYONzjgMm0txCb2yBcIcfKDmg8xtCKTdecNQ==
+  dependencies:
+    conventional-changelog-angular "^6.0.0"
+    conventional-changelog-atom "^3.0.0"
+    conventional-changelog-codemirror "^3.0.0"
+    conventional-changelog-conventionalcommits "^6.0.0"
+    conventional-changelog-core "^5.0.0"
+    conventional-changelog-ember "^3.0.0"
+    conventional-changelog-eslint "^4.0.0"
+    conventional-changelog-express "^3.0.0"
+    conventional-changelog-jquery "^4.0.0"
+    conventional-changelog-jshint "^3.0.0"
+    conventional-changelog-preset-loader "^3.0.0"
 
 conventional-commits-filter@^2.0.2, conventional-commits-filter@^2.0.7:
   version "2.0.7"
@@ -6058,10 +5598,13 @@ conventional-commits-filter@^2.0.2, conventional-commits-filter@^2.0.7:
     lodash.ismatch "^4.4.0"
     modify-values "^1.0.0"
 
-conventional-commits-filter@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-4.0.0.tgz#845d713e48dc7d1520b84ec182e2773c10c7bf7f"
-  integrity sha512-rnpnibcSOdFcdclpFwWa+pPlZJhXE7l+XK04zxhbWrhgpR96h33QLz8hITTXbcYICxVr3HZFtbtUAQ+4LdBo9A==
+conventional-commits-filter@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-3.0.0.tgz#bf1113266151dd64c49cd269e3eb7d71d7015ee2"
+  integrity sha512-1ymej8b5LouPx9Ox0Dw/qAO2dVdfpRFq28e5Y0jJEU8ZrLdy0vOSkkIInwmxErFGhg6SALro60ZrwYFVTUDo4Q==
+  dependencies:
+    lodash.ismatch "^4.4.0"
+    modify-values "^1.0.1"
 
 conventional-commits-parser@^3.0.3:
   version "3.2.1"
@@ -6076,15 +5619,15 @@ conventional-commits-parser@^3.0.3:
     through2 "^4.0.0"
     trim-off-newlines "^1.0.0"
 
-conventional-commits-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz#57f3594b81ad54d40c1b4280f04554df28627d9a"
-  integrity sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==
+conventional-commits-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-4.0.0.tgz#02ae1178a381304839bce7cea9da5f1b549ae505"
+  integrity sha512-WRv5j1FsVM5FISJkoYMR6tPk07fkKT0UodruX4je86V4owk451yjXAKzKAPOs9l7y59E2viHUS9eQ+dfUA9NSg==
   dependencies:
     JSONStream "^1.3.5"
-    is-text-path "^2.0.0"
-    meow "^12.0.1"
-    split2 "^4.0.0"
+    is-text-path "^1.0.1"
+    meow "^8.1.2"
+    split2 "^3.2.2"
 
 conventional-github-releaser@^3.1.5:
   version "3.1.5"
@@ -6448,10 +5991,10 @@ dargs@^4.0.1:
   dependencies:
     number-is-nan "^1.0.0"
 
-dargs@^8.0.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/dargs/-/dargs-8.1.0.tgz#a34859ea509cbce45485e5aa356fef70bfcc7272"
-  integrity sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==
+dargs@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
+  integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
 
 dashdash@^1.12.0:
   version "1.14.1"
@@ -6476,7 +6019,7 @@ date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
-dateformat@^3.0.0:
+dateformat@^3.0.0, dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
@@ -6813,13 +6356,6 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.1"
 
-dot-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
-  integrity sha512-k4ELWeEU3uCcwub7+dWydqQBRjAjkV9L33HjVRG5Xo2QybI6ja/v+4W73SRi8ubCqJz0l9XsTP1NbewfyqaSlw==
-  dependencies:
-    is-obj "^1.0.0"
-
 dot-prop@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -6894,11 +6430,6 @@ ejs@^3.1.6:
   dependencies:
     jake "^10.6.1"
 
-electron-to-chromium@^1.4.535:
-  version "1.4.594"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz#f69f207fba80735a44a988df42f3f439115d0515"
-  integrity sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ==
-
 electron-to-chromium@^1.4.601:
   version "1.4.625"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.625.tgz#a9a1d18ee911f9074a9c42d9e84b1c79b29f4059"
@@ -6965,12 +6496,7 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
-entities@^4.2.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
-  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
-
-entities@^4.5.0:
+entities@^4.2.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -6995,7 +6521,7 @@ err-code@^1.0.0:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
   integrity sha512-CJAN+O0/yA1CKfRn9SXOGctSpEM7DCon/r/5r2eXFMY2zCCJBasFhcM5I+1kh3Ap11FsQCX+vGHceNPvpWKhoA==
 
-error-ex@^1.2.0, error-ex@^1.3.1, error-ex@^1.3.2:
+error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -7206,6 +6732,11 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -7352,7 +6883,7 @@ eslint-plugin-sonarjs@^0.23.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-sonarjs/-/eslint-plugin-sonarjs-0.23.0.tgz#0265bad801ea210951672ee3cafbcf5d456ada96"
   integrity sha512-z44T3PBf9W7qQ/aR+NmofOTyg6HLhSEZOPD4zhStqBpLoMp8GYhFksuUBnCxbnf1nfISpKBVkQhiBLFI/F4Wlg==
 
-eslint-plugin-vue@^9.19.2:
+eslint-plugin-vue@^9.19.2, eslint-plugin-vue@^9.6.0:
   version "9.19.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.19.2.tgz#7ab83a001a1ac8bccae013c5b9cb5d2c644fb376"
   integrity sha512-CPDqTOG2K4Ni2o4J5wixkLVNwgctKXFu6oBpVJlpNq7f38lh9I80pRTouZSJ2MAebPJlINU/KTFSXyQfBUlymA==
@@ -7365,19 +6896,6 @@ eslint-plugin-vue@^9.19.2:
     vue-eslint-parser "^9.3.1"
     xml-name-validator "^4.0.0"
 
-eslint-plugin-vue@^9.6.0:
-  version "9.18.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.18.1.tgz#73cf29df7450ce5913296465f8d1dc545344920c"
-  integrity sha512-7hZFlrEgg9NIzuVik2I9xSnJA5RsmOfueYgsUGUokEDLJ1LHtxO0Pl4duje1BriZ/jDWb+44tcIlC3yi0tdlZg==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.4.0"
-    natural-compare "^1.4.0"
-    nth-check "^2.1.1"
-    postcss-selector-parser "^6.0.13"
-    semver "^7.5.4"
-    vue-eslint-parser "^9.3.1"
-    xml-name-validator "^4.0.0"
-
 eslint-plugin-vuetify@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vuetify/-/eslint-plugin-vuetify-2.1.1.tgz#f7cc65b02112b8337ada22df2f6d3e89d89c25ef"
@@ -7511,6 +7029,13 @@ estree-walker@^2.0.2:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
+estree-walker@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
+  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -7709,7 +7234,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.2:
+fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -7874,14 +7399,6 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
-find-up@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-6.3.0.tgz#2abab3d3280b2dc7ac10199ef324c4e002c8c790"
-  integrity sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==
-  dependencies:
-    locate-path "^7.1.0"
-    path-exists "^5.0.0"
-
 find-yarn-workspace-root@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
@@ -8135,6 +7652,16 @@ get-pkg-repo@^1.0.0:
     parse-github-repo-url "^1.3.0"
     through2 "^2.0.0"
 
+get-pkg-repo@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-4.2.1.tgz#75973e1c8050c73f48190c52047c4cee3acbf385"
+  integrity sha512-2+QbHjFRfGB74v/pYWjd5OhU3TDIC2Gv/YKUTk/tCvAz0pkn/Mz6P3uByuBimLOcPvN2jYdScl3xGFSrx0jEcA==
+  dependencies:
+    "@hutson/parse-repository-url" "^3.0.0"
+    hosted-git-info "^4.0.0"
+    through2 "^2.0.0"
+    yargs "^16.2.0"
+
 get-port@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
@@ -8232,14 +7759,14 @@ git-raw-commits@2.0.0:
     split2 "^2.0.0"
     through2 "^2.0.0"
 
-git-raw-commits@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-4.0.0.tgz#b212fd2bff9726d27c1283a1157e829490593285"
-  integrity sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==
+git-raw-commits@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-3.0.0.tgz#5432f053a9744f67e8db03dbc48add81252cfdeb"
+  integrity sha512-b5OHmZ3vAgGrDn/X0kS+9qCfNKWe4K/jFnhwzVWWg0/k5eLa3060tZShrRg8Dja5kPc+YjS0Gc6y7cRr44Lpjw==
   dependencies:
-    dargs "^8.0.0"
-    meow "^12.0.1"
-    split2 "^4.0.0"
+    dargs "^7.0.0"
+    meow "^8.1.2"
+    split2 "^3.2.2"
 
 git-remote-origin-url@^2.0.0:
   version "2.0.0"
@@ -8257,13 +7784,13 @@ git-semver-tags@^2.0.0, git-semver-tags@^2.0.3:
     meow "^4.0.0"
     semver "^6.0.0"
 
-git-semver-tags@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-7.0.1.tgz#74426e7d7710e5a263655e78b4c651eed804d63e"
-  integrity sha512-NY0ZHjJzyyNXHTDZmj+GG7PyuAKtMsyWSwh07CR2hOZFa+/yoTsXci/nF2obzL8UDhakFNkD9gNdt/Ed+cxh2Q==
+git-semver-tags@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-5.0.1.tgz#db748aa0e43d313bf38dcd68624d8443234e1c15"
+  integrity sha512-hIvOeZwRbQ+7YEUmCkHqo8FOLQZCEn18yevLHADlFPZY02KJGsu5FZt9YW/lybfK2uhWFI7Qg/07LekJiTv7iA==
   dependencies:
-    meow "^12.0.1"
-    semver "^7.5.2"
+    meow "^8.1.2"
+    semver "^7.0.0"
 
 git-up@^4.0.0:
   version "4.0.1"
@@ -8360,14 +7887,7 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0, globals@^13.20.0:
-  version "13.23.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
-  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
-  dependencies:
-    type-fest "^0.20.2"
-
-globals@^13.24.0:
+globals@^13.19.0, globals@^13.20.0, globals@^13.24.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
@@ -8640,20 +8160,13 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.7.1:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
   integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
 
-hosted-git-info@^3.0.6:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d"
-  integrity sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==
+hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
+  integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==
   dependencies:
     lru-cache "^6.0.0"
 
-hosted-git-info@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-7.0.1.tgz#9985fcb2700467fecf7f33a4d4874e30680b5322"
-  integrity sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==
-  dependencies:
-    lru-cache "^10.0.1"
-
 htm@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
@@ -9132,7 +8645,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
-is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.8.1, is-core-module@^2.9.0:
+is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0, is-core-module@^2.9.0:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
@@ -9431,13 +8944,6 @@ is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
-is-text-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-2.0.0.tgz#b2484e2b720a633feb2e85b67dc193ff72c75636"
-  integrity sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==
-  dependencies:
-    text-extensions "^2.0.0"
-
 is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.9:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
@@ -10136,11 +9642,6 @@ json-parse-even-better-errors@^2.3.0:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.0.tgz#371873c5ffa44304a6ba12419bcfa95f404ae081"
   integrity sha512-o3aP+RsWDJZayj1SbHNQAI8x0v3T3SKiGoZlNYfbUP1S3omJQ6i9CnqADqkSPaOAxwua4/1YWx5CM7oiChJt2Q==
 
-json-parse-even-better-errors@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.0.tgz#2cb2ee33069a78870a0c7e3da560026b89669cf7"
-  integrity sha512-iZbGHafX/59r39gPwVPRBGw0QQKnA7tte5pSMrhWOW7swGsVvVTjmfyAV9pNqk8YGT7tRCdxRu8uzcgZwoDooA==
-
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -10375,11 +9876,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ==
 
-lines-and-columns@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.4.tgz#d00318855905d2660d8c0822e3f5a4715855fc42"
-  integrity sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==
-
 linkify-it@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
@@ -10475,13 +9971,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-locate-path@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-7.2.0.tgz#69cb1779bd90b35ab1e771e1f2f89a202c2a8a8a"
-  integrity sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
-  dependencies:
-    p-locate "^6.0.0"
-
 lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
@@ -10612,11 +10101,6 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
-lru-cache@^10.0.1, "lru-cache@^9.1.1 || ^10.0.0":
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
-  integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
-
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -10631,6 +10115,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+"lru-cache@^9.1.1 || ^10.0.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
+  integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
+
 macos-release@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"
@@ -10643,10 +10132,10 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-magic-string@^0.30.0, magic-string@^0.30.1, magic-string@^0.30.4, magic-string@^0.30.5:
-  version "0.30.5"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
-  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+magic-string@^0.30.0, magic-string@^0.30.3, magic-string@^0.30.4, magic-string@^0.30.5, magic-string@^0.30.6:
+  version "0.30.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.7.tgz#0cecd0527d473298679da95a2d7aeb8c64048505"
+  integrity sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
@@ -10885,7 +10374,7 @@ meow@^7.0.0:
     type-fest "^0.13.1"
     yargs-parser "^18.1.3"
 
-meow@^8.0.0:
+meow@^8.0.0, meow@^8.1.2:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
   integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==
@@ -11121,7 +10610,7 @@ mlly@^1.2.0, mlly@^1.4.2:
     pkg-types "^1.0.3"
     ufo "^1.3.0"
 
-modify-values@^1.0.0:
+modify-values@^1.0.0, modify-values@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
@@ -11199,11 +10688,6 @@ mz@^2.5.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
-
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -11305,11 +10789,6 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
-node-releases@^2.0.13:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
-  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
-
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
@@ -11347,26 +10826,16 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-package-data@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.0.tgz#1f8a7c423b3d2e85eb36985eaf81de381d01301a"
-  integrity sha512-6lUjEI0d3v6kFrtgA/lOx4zHCWULXsFNIjHolnZCKCTLA6m/G625cdn3O7eNmT0iD3jfo6HZ9cdImGZwf21prw==
+normalize-package-data@^3.0.0, normalize-package-data@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e"
+  integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
   dependencies:
-    hosted-git-info "^3.0.6"
-    resolve "^1.17.0"
-    semver "^7.3.2"
+    hosted-git-info "^4.0.1"
+    is-core-module "^2.5.0"
+    semver "^7.3.4"
     validate-npm-package-license "^3.0.1"
 
-normalize-package-data@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-6.0.0.tgz#68a96b3c11edd462af7189c837b6b1064a484196"
-  integrity sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==
-  dependencies:
-    hosted-git-info "^7.0.0"
-    is-core-module "^2.8.1"
-    semver "^7.3.5"
-    validate-npm-package-license "^3.0.4"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -11760,13 +11229,6 @@ p-limit@^3.0.2, p-limit@^3.1.0:
   dependencies:
     yocto-queue "^0.1.0"
 
-p-limit@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
-  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
-  dependencies:
-    yocto-queue "^1.0.0"
-
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -11795,13 +11257,6 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-locate@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-6.0.0.tgz#3da9a49d4934b901089dca3302fa65dc5a05c04f"
-  integrity sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
-  dependencies:
-    p-limit "^4.0.0"
-
 p-map-series@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-map-series/-/p-map-series-1.0.0.tgz#bf98fe575705658a9e1351befb85ae4c1f07bdca"
@@ -11918,17 +11373,6 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-json@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-7.1.1.tgz#68f7e6f0edf88c54ab14c00eb700b753b14e2120"
-  integrity sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==
-  dependencies:
-    "@babel/code-frame" "^7.21.4"
-    error-ex "^1.3.2"
-    json-parse-even-better-errors "^3.0.0"
-    lines-and-columns "^2.0.3"
-    type-fest "^3.8.0"
-
 parse-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.1.tgz#0ec769704949778cb3b8eda5e994c32073a1adff"
@@ -12010,11 +11454,6 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-exists@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
-  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
-
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -12377,15 +11816,7 @@ postcss-reduce-transforms@^6.0.1:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13:
-  version "6.0.13"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
-  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
-postcss-selector-parser@^6.0.15:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13, postcss-selector-parser@^6.0.15:
   version "6.0.15"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
   integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
@@ -12413,16 +11844,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.27, postcss@^8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.4.32, postcss@^8.4.33:
+postcss@^8.4.27, postcss@^8.4.33:
   version "8.4.33"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
   integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
@@ -12721,15 +12143,6 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
-read-pkg-up@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-10.1.0.tgz#2d13ab732d2f05d6e8094167c2112e2ee50644f4"
-  integrity sha512-aNtBq4jR8NawpKJQldrQcSW9y/d+KWH4v24HWkHljOZ7H0av+YTGANBzRh9A5pw7v/bLVsLVPpOhJ7gHNVy8lA==
-  dependencies:
-    find-up "^6.3.0"
-    read-pkg "^8.1.0"
-    type-fest "^4.2.0"
-
 read-pkg-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@@ -12775,16 +12188,6 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-read-pkg@^8.0.0, read-pkg@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-8.1.0.tgz#6cf560b91d90df68bce658527e7e3eee75f7c4c7"
-  integrity sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.1"
-    normalize-package-data "^6.0.0"
-    parse-json "^7.0.0"
-    type-fest "^4.2.0"
-
 read@1, read@~1.0.1:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
@@ -13068,7 +12471,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.5.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.5.0:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -13294,7 +12697,7 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.69.7:
+sass@^1.69.7, sass@^1.7.2:
   version "1.69.7"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.7.tgz#6e7e1c8f51e8162faec3e9619babc7da780af3b7"
   integrity sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==
@@ -13303,15 +12706,6 @@ sass@^1.69.7:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.7.2:
-  version "1.69.5"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.5.tgz#23e18d1c757a35f2e52cc81871060b9ad653dfde"
-  integrity sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
 saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
@@ -13319,6 +12713,11 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+scule@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/scule/-/scule-1.2.0.tgz#b46d444d6a8c92e73eb80d2d8d00b94ab065cc3e"
+  integrity sha512-CRCmi5zHQnSoeCik9565PONMg0kfkvYmcSqrbOJY4txFfy1wvVULV4FDaiXhUblUgahdqz3F2NwHZ8i4eBTwUw==
+
 search-insights@^2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.13.0.tgz#a79fdcf4b5dad2fba8975b06f2ebc37a865032b7"
@@ -13352,10 +12751,10 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.0.0, semver@^7.3.2, semver@^7.3.5, semver@^7.3.6, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+semver@^7.0.0, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -13701,19 +13100,14 @@ split2@^2.0.0:
   dependencies:
     through2 "^2.0.2"
 
-split2@^3.0.0:
+split2@^3.0.0, split2@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
   integrity sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==
   dependencies:
     readable-stream "^3.0.0"
 
-split2@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
-  integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
-
-split@^1.0.0:
+split@^1.0.0, split@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
   integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
@@ -14014,12 +13408,12 @@ strip-json-comments@^3.1.1, strip-json-comments@~3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-strip-literal@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-1.0.1.tgz#0115a332710c849b4e46497891fb8d585e404bd2"
-  integrity sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==
+strip-literal@^1.0.0, strip-literal@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-1.3.0.tgz#db3942c2ec1699e6836ad230090b84bb458e3a07"
+  integrity sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==
   dependencies:
-    acorn "^8.8.2"
+    acorn "^8.10.0"
 
 strong-log-transformer@^2.0.0:
   version "2.1.0"
@@ -14183,11 +13577,6 @@ text-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
   integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
 
-text-extensions@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-2.4.0.tgz#a1cfcc50cf34da41bfd047cc744f804d1680ea34"
-  integrity sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==
-
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -14523,16 +13912,6 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-fest@^3.8.0:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
-  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
-
-type-fest@^4.2.0:
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.8.2.tgz#20d4cc287745723dbabf925de644eeb7de0349c1"
-  integrity sha512-mcvrCjixA5166hSrUoJgGb9gBQN4loMYyj9zxuMs/66ibHNEFd5JXMw37YVDx58L4/QID9jIzdTBB4mDwDJ6KQ==
-
 type-fest@^4.8.3:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.9.0.tgz#d29c8efe5b1e703feeb29cef23d887b2f479844d"
@@ -14660,6 +14039,25 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
   integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
+unimport@^3.7.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/unimport/-/unimport-3.7.1.tgz#37250d0f3f2dcf1e1b66ed13728db0e9f50ba0c3"
+  integrity sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.0"
+    acorn "^8.11.2"
+    escape-string-regexp "^5.0.0"
+    estree-walker "^3.0.3"
+    fast-glob "^3.3.2"
+    local-pkg "^0.5.0"
+    magic-string "^0.30.5"
+    mlly "^1.4.2"
+    pathe "^1.1.1"
+    pkg-types "^1.0.3"
+    scule "^1.1.1"
+    strip-literal "^1.3.0"
+    unplugin "^1.5.1"
+
 union-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -14728,6 +14126,20 @@ unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
+unplugin-auto-import@0.17.3:
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-0.17.3.tgz#32ad40bea8ba4e9d37d69548acc74b08b6ed5d97"
+  integrity sha512-0cn0wr8X579TtdZKUAps0dDVrYzttx38ImdxZjmCeNlMDJX8UuSjO83vFqgS4ClNDIGWAute+xl9j5vRSX+vsw==
+  dependencies:
+    "@antfu/utils" "^0.7.7"
+    "@rollup/pluginutils" "^5.1.0"
+    fast-glob "^3.3.2"
+    local-pkg "^0.5.0"
+    magic-string "^0.30.5"
+    minimatch "^9.0.3"
+    unimport "^3.7.0"
+    unplugin "^1.6.0"
+
 unplugin-fonts@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/unplugin-fonts/-/unplugin-fonts-1.0.3.tgz#5b85f29f227305f085d382a42f6983317db19621"
@@ -14736,31 +14148,31 @@ unplugin-fonts@1.0.3:
     fast-glob "^3.2.12"
     unplugin "^1.3.1"
 
-unplugin-vue-components@^0.25.2:
-  version "0.25.2"
-  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz#99d9d02a4066a24e720edbe74a82a4ee6ff86153"
-  integrity sha512-OVmLFqILH6w+eM8fyt/d/eoJT9A6WO51NZLf1vC5c1FZ4rmq2bbGxTy8WP2Jm7xwFdukaIdv819+UI7RClPyCA==
+unplugin-vue-components@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.26.0.tgz#6d79caa770039a1eb3d7c09fdd28778ea20afef3"
+  integrity sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==
   dependencies:
-    "@antfu/utils" "^0.7.5"
-    "@rollup/pluginutils" "^5.0.2"
+    "@antfu/utils" "^0.7.6"
+    "@rollup/pluginutils" "^5.0.4"
     chokidar "^3.5.3"
     debug "^4.3.4"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.1"
     local-pkg "^0.4.3"
-    magic-string "^0.30.1"
+    magic-string "^0.30.3"
     minimatch "^9.0.3"
-    resolve "^1.22.2"
+    resolve "^1.22.4"
     unplugin "^1.4.0"
 
-unplugin@^1.1.0, unplugin@^1.3.1, unplugin@^1.4.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.5.1.tgz#806688376fa3dcca4d2fa2c5d27cf6cd0370fbef"
-  integrity sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==
+unplugin@^1.1.0, unplugin@^1.3.1, unplugin@^1.4.0, unplugin@^1.5.1, unplugin@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.6.0.tgz#0bd7c344182c73e685c864f4f7161531f024b942"
+  integrity sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==
   dependencies:
     acorn "^8.11.2"
     chokidar "^3.5.3"
     webpack-sources "^3.2.3"
-    webpack-virtual-modules "^0.6.0"
+    webpack-virtual-modules "^0.6.1"
 
 unset-value@^1.0.0:
   version "1.0.0"
@@ -14866,7 +14278,7 @@ v8-to-istanbul@^9.0.1:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
-validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3, validate-npm-package-license@^3.0.4:
+validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
   integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
@@ -14998,18 +14410,7 @@ vite-ssr@^0.17.1:
     react-router-dom "^6.2.2"
     react-ssr-prepass "^1.4.0"
 
-"vite@^3.0.0 || ^4.0.0":
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.0.tgz#ec406295b4167ac3bc23e26f9c8ff559287cff26"
-  integrity sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==
-  dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-vite@^4.5.1:
+"vite@^3.0.0 || ^4.0.0", vite@^4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a"
   integrity sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==
@@ -15124,16 +14525,16 @@ vue-tsc@^1.8.27:
     "@vue/language-core" "1.8.27"
     semver "^7.5.4"
 
-vue@^3.4.7:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.7.tgz#b9673ceaf3400b7e65031140d14be6a27b52f301"
-  integrity sha512-4urmkWpudekq0CPNMO7p6mBGa9qmTXwJMO2r6CT4EzIJVG7WoSReiysiNb7OSi/WI113oX0Srn9Rz1k/DCXKFQ==
+vue@^3.4.19:
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.19.tgz#f9ae0a44db86628548736ff04152830726a97263"
+  integrity sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==
   dependencies:
-    "@vue/compiler-dom" "3.4.7"
-    "@vue/compiler-sfc" "3.4.7"
-    "@vue/runtime-dom" "3.4.7"
-    "@vue/server-renderer" "3.4.7"
-    "@vue/shared" "3.4.7"
+    "@vue/compiler-dom" "3.4.19"
+    "@vue/compiler-sfc" "3.4.19"
+    "@vue/runtime-dom" "3.4.19"
+    "@vue/server-renderer" "3.4.19"
+    "@vue/shared" "3.4.19"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
@@ -15183,7 +14584,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack-virtual-modules@^0.6.0:
+webpack-virtual-modules@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz#ac6fdb9c5adb8caecd82ec241c9631b7a3681b6f"
   integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
@@ -15574,12 +14975,7 @@ write-pkg@^3.1.0:
     sort-keys "^2.0.0"
     write-json-file "^2.2.0"
 
-ws@^8.0.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.9.0.tgz#2a994bb67144be1b53fe2d23c53c028adeb7f45e"
-  integrity sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==
-
-ws@^8.2.3:
+ws@^8.0.0, ws@^8.2.3:
   version "8.16.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
   integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
@@ -15654,7 +15050,7 @@ yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.3:
+yargs-parser@^20.2.2, yargs-parser@^20.2.3:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
@@ -15681,6 +15077,19 @@ yargs@^14.2.2:
     y18n "^4.0.0"
     yargs-parser "^15.0.1"
 
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yargs@^17.3.1, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
@@ -15707,11 +15116,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yocto-queue@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
-  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
-
 zhead@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/zhead/-/zhead-2.2.4.tgz#87cd1e2c3d2f465fa9f43b8db23f9716dfe6bed7"