diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ed13ae18105..9ee9cbc2b90 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -117,6 +117,7 @@ jobs:
         id: create_release
         run: yarn conventional-github-releaser -p vuetify
         env:
+          DEBUG: '*'
           CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   build-docs:
diff --git a/lerna.json b/lerna.json
index d8a3a31e5d6..6e0adf31c12 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.9",
+  "version": "3.5.14",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index f76165e6f1f..613ad6d1a3a 100755
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@vueuse/head": "^1.3.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
-    "conventional-changelog-cli": "^4.1.0",
+    "conventional-changelog-cli": "^3.0.0",
     "conventional-changelog-vuetify": "^1.2.1",
     "conventional-github-releaser": "^3.1.5",
     "cross-env": "^7.0.3",
@@ -87,9 +87,5 @@
     "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 5c60ea205b5..d6e9806e0b4 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.9",
+  "version": "3.5.14",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
     "vue": "^3.4.19",
-    "vuetify": "^3.5.9"
+    "vuetify": "^3.5.14"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"
diff --git a/packages/api-generator/src/locale/en/VAutocomplete.json b/packages/api-generator/src/locale/en/VAutocomplete.json
index 4cf1f32964f..4b1a56c2bc4 100644
--- a/packages/api-generator/src/locale/en/VAutocomplete.json
+++ b/packages/api-generator/src/locale/en/VAutocomplete.json
@@ -2,6 +2,7 @@
   "props": {
     "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
     "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.",
+    "itemChildren": "This property currently has **no effect**.",
     "filter": "The filtering algorithm used when searching. [example](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts#L40).",
     "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props.",
     "noFilter": "Do not apply filtering when searching. Useful when data is being filtered server side."
diff --git a/packages/api-generator/src/locale/en/VCarousel.json b/packages/api-generator/src/locale/en/VCarousel.json
index 9408974489a..40f2f15e057 100644
--- a/packages/api-generator/src/locale/en/VCarousel.json
+++ b/packages/api-generator/src/locale/en/VCarousel.json
@@ -1,6 +1,6 @@
 {
   "props": {
-    "color": "Applies a color to the navigation dots - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "color": "Applies a color to the navigation dots - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "continuous": "Determines whether carousel is continuous.",
     "cycle": "Determines if the carousel should cycle through images.",
     "delimiterIcon": "Sets icon for carousel delimiter.",
diff --git a/packages/api-generator/src/locale/en/VCombobox.json b/packages/api-generator/src/locale/en/VCombobox.json
index 27d690fac69..9f4496d881b 100644
--- a/packages/api-generator/src/locale/en/VCombobox.json
+++ b/packages/api-generator/src/locale/en/VCombobox.json
@@ -2,6 +2,7 @@
   "props": {
     "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
     "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.",
+    "itemChildren": "This property currently has **no effect**.",
     "delimiters": "Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys.",
     "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props."
   },
diff --git a/packages/api-generator/src/locale/en/VListItem.json b/packages/api-generator/src/locale/en/VListItem.json
index b1ee8259a7a..073c01f6077 100644
--- a/packages/api-generator/src/locale/en/VListItem.json
+++ b/packages/api-generator/src/locale/en/VListItem.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "active": "Controls the **active** state of the item. This is typically used to highlight the component.",
-    "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),",
+    "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),",
     "contained": "Changes the component style by changing how color is applied to the background.",
     "title": "Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with `v-bind:title.attr` instead.",
     "value": "The value used for selection."
diff --git a/packages/api-generator/src/locale/en/VNavigationDrawer.json b/packages/api-generator/src/locale/en/VNavigationDrawer.json
index a5c21291b5e..24ac310e122 100644
--- a/packages/api-generator/src/locale/en/VNavigationDrawer.json
+++ b/packages/api-generator/src/locale/en/VNavigationDrawer.json
@@ -18,7 +18,8 @@
     "scrim": "Determines whether an overlay is used when a **temporary** drawer is open. Accepts true/false to enable background, and string to define color.",
     "temporary": "A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.",
     "touchless": "Disable mobile touch functionality.",
-    "value": "Controls whether the component is visible or hidden."
+    "value": "Controls whether the component is visible or hidden.",
+    "location": "Controls the edge of the screen the drawer is attached to."
   },
   "slots": {
     "append": "A slot at the bottom of the drawer.",
diff --git a/packages/api-generator/src/locale/en/VPagination.json b/packages/api-generator/src/locale/en/VPagination.json
index 616886b5759..2c222a10404 100644
--- a/packages/api-generator/src/locale/en/VPagination.json
+++ b/packages/api-generator/src/locale/en/VPagination.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "ariaLabel": "Label for the root element.",
-    "color": "Applies specified color to the selected page button - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "color": "Applies specified color to the selected page button - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "currentPageAriaLabel": "Label for the currently selected page.",
     "ellipsis": "Text to show between page buttons when truncating the list.",
     "firstAriaLabel": "Label for the go to first button.",
diff --git a/packages/api-generator/src/locale/en/VSelect.json b/packages/api-generator/src/locale/en/VSelect.json
index 143a62fd5a0..b350a1af0d3 100644
--- a/packages/api-generator/src/locale/en/VSelect.json
+++ b/packages/api-generator/src/locale/en/VSelect.json
@@ -7,6 +7,7 @@
     "combobox": "The single select variant of **tags**.",
     "hideSelected": "Do not display in the select menu items that are already selected.",
     "itemColor": "Sets color of selected items.",
+    "itemChildren": "This property currently has **no effect**.",
     "itemDisabled": "Set property of **items**'s disabled value.",
     "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props.",
     "itemText": "Set property of **items**'s title value.",
diff --git a/packages/api-generator/src/locale/en/VTab.json b/packages/api-generator/src/locale/en/VTab.json
index f8c86bea5af..5049aad949e 100644
--- a/packages/api-generator/src/locale/en/VTab.json
+++ b/packages/api-generator/src/locale/en/VTab.json
@@ -3,7 +3,7 @@
     "direction": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`.",
     "hideSlider": "Hides the active tab slider component (no exit or enter animation).",
     "fixed": "Forces component to take up all available space up to their maximum width (300px), and centers it.",
-    "sliderColor": "Applies specified color to the slider when active on that component - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "sliderColor": "Applies specified color to the slider when active on that component - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "stacked": "Displays the tab as a flex-column."
   },
   "events": {
diff --git a/packages/api-generator/src/locale/en/VTabs.json b/packages/api-generator/src/locale/en/VTabs.json
index f3243fe95d4..8eefdaf55c6 100644
--- a/packages/api-generator/src/locale/en/VTabs.json
+++ b/packages/api-generator/src/locale/en/VTabs.json
@@ -2,7 +2,7 @@
   "props": {
     "alignTabs": "Aligns the tabs to the `start`, `center`, or `end` of container. Also accepts `title` to align with the `v-toolbar-title` component.",
     "alignWithTitle": "Make `v-tabs` lined up with the toolbar title.",
-    "color": "Applies specified color to the selected tab - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "color": "Applies specified color to the selected tab - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "centered": "Centers the tabs.",
     "centerActive": "Forces the selected tab to be centered.",
     "cycle": "Will reset to first or last tab when swiping left or right if at the end of indexes.",
diff --git a/packages/api-generator/src/locale/en/VTimePicker.json b/packages/api-generator/src/locale/en/VTimePicker.json
index 829f4ed6134..ce361a10f2e 100644
--- a/packages/api-generator/src/locale/en/VTimePicker.json
+++ b/packages/api-generator/src/locale/en/VTimePicker.json
@@ -8,9 +8,10 @@
     "format": "Defines the format of a time displayed in picker. Available options are `ampm` and `24hr`.",
     "max": "Maximum allowed time.",
     "min": "Minimum allowed time.",
+    "hide-header": "Hide the header of the picker.",
     "readonly": "Puts picker in readonly state.",
     "scrollable": "Allows changing hour/minute with mouse scroll.",
-    "useSeconds": "Toggles the use of seconds in picker.",
+    "use-seconds": "Toggles the use of seconds in picker.",
     "value": "Time picker model (ISO 8601 format, 24hr hh:mm).",
     "width": "Width of the picker."
   },
@@ -19,9 +20,9 @@
   },
   "events": {
     "change": "Emitted when the time selection is done (when user changes the minute for HH:MM picker and the second for HH:MM:SS picker.",
-    "click:hour": "Emitted when user selects the hour.",
-    "click:minute": "Emitted when user selects the minute.",
-    "click:second": "Emitted when user selects the second.",
+    "update:hour": "Emitted when user selects the hour.",
+    "update:minute": "Emitted when user selects the minute.",
+    "update:second": "Emitted when user selects the second.",
     "update:period": "Emitted when user clicks the AM/PM button."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VTimelineItem.json b/packages/api-generator/src/locale/en/VTimelineItem.json
index f3f63c8042d..77a3f6450c6 100644
--- a/packages/api-generator/src/locale/en/VTimelineItem.json
+++ b/packages/api-generator/src/locale/en/VTimelineItem.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "alignDot": "Align the dot to the **start** or **end** of the item.",
-    "color": "Applies specified color to the item dot - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "color": "Applies specified color to the item dot - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "dotColor": "Color of the item dot.",
     "fillDot": "Remove outer border of item dot, making the color fill the entire dot.",
     "hideDot": "Hide the timeline item dot.",
diff --git a/packages/api-generator/src/locale/en/VTreeview.json b/packages/api-generator/src/locale/en/VTreeview.json
index f693e4df8bd..3025b82f42b 100644
--- a/packages/api-generator/src/locale/en/VTreeview.json
+++ b/packages/api-generator/src/locale/en/VTreeview.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "activatable": "Allows user to mark a node as active by clicking on it.",
-    "color": "Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "color": "Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "dense": "Decreases the height of the items.",
     "disabled": "Disables selection for all nodes.",
     "disablePerNode": "Prevents disabling children nodes.",
diff --git a/packages/api-generator/src/locale/en/border.json b/packages/api-generator/src/locale/en/border.json
index 1f172c0590a..9639eecdf72 100644
--- a/packages/api-generator/src/locale/en/border.json
+++ b/packages/api-generator/src/locale/en/border.json
@@ -1,5 +1,5 @@
 {
   "props": {
-    "border": "Applies border styles to component."
+    "border": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**."
   }
 }
diff --git a/packages/api-generator/src/locale/en/generic.json b/packages/api-generator/src/locale/en/generic.json
index 929c9de22a3..83ac1671c82 100644
--- a/packages/api-generator/src/locale/en/generic.json
+++ b/packages/api-generator/src/locale/en/generic.json
@@ -9,7 +9,7 @@
     "baseColor": "Sets the color of component when not focused.",
     "bgColor": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "clearable": "Allows for the component to be cleared.",
-    "color": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "color": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "contentClass": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component.",
     "counter": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.",
     "disabled": "Removes the ability to click or target the component.",
@@ -51,7 +51,7 @@
     "symbol": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/).",
     "tag": "Specify a custom tag used on the root element.",
     "text": "Specify content text for the component.",
-    "textColor": "Applies a specified color to the control text - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
+    "textColor": "Applies a specified color to the control text - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "title": "Specify a title text for the component.",
     "trueValue": "Sets value for truthy state.",
     "valueComparator": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
diff --git a/packages/api-generator/src/locale/en/rounded.json b/packages/api-generator/src/locale/en/rounded.json
index 6d712a651b6..2b9d8f2e87e 100644
--- a/packages/api-generator/src/locale/en/rounded.json
+++ b/packages/api-generator/src/locale/en/rounded.json
@@ -1,6 +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. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
     "tile": "Removes any applied **border-radius** from the component."
   }
 }
diff --git a/packages/docs/auto-imports.d.ts b/packages/docs/auto-imports.d.ts
index 3bc41125982..7e625ea903a 100644
--- a/packages/docs/auto-imports.d.ts
+++ b/packages/docs/auto-imports.d.ts
@@ -75,6 +75,7 @@ declare global {
   const useOneStore: typeof import('@vuetify/one')['useOneStore']
   const usePinsStore: typeof import('./src/stores/pins')['usePinsStore']
   const usePlayground: typeof import('./src/composables/playground')['usePlayground']
+  const useProductsStore: typeof import('@vuetify/one')['useProductsStore']
   const usePromotionsStore: typeof import('./src/stores/promotions')['usePromotionsStore']
   const useReleasesStore: typeof import('./src/stores/releases')['useReleasesStore']
   const useRoute: typeof import('vue-router')['useRoute']
@@ -164,6 +165,7 @@ declare module 'vue' {
     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 useProductsStore: UnwrapRef<typeof import('@vuetify/one')['useProductsStore']>
     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']>
@@ -252,6 +254,7 @@ declare module '@vue/runtime-core' {
     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 useProductsStore: UnwrapRef<typeof import('@vuetify/one')['useProductsStore']>
     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']>
diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
index ca7d4e75231..c53f1629ae3 100644
--- a/packages/docs/components.d.ts
+++ b/packages/docs/components.d.ts
@@ -40,6 +40,7 @@ declare module 'vue' {
     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']
+    AppCommitBtn: typeof import('./src/components/app/CommitBtn.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']
@@ -86,6 +87,7 @@ declare module 'vue' {
     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']
+    AppVersionBtn: typeof import('./src/components/app/VersionBtn.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']
@@ -97,6 +99,7 @@ declare module 'vue' {
     DocMadeWithVueAttribution: typeof import('./src/components/doc/MadeWithVueAttribution.vue')['default']
     DocMadeWithVuetifyGallery: typeof import('./src/components/doc/MadeWithVuetifyGallery.vue')['default']
     DocMadeWithVuetifyLink: typeof import('./src/components/doc/MadeWithVuetifyLink.vue')['default']
+    DocPremiumThemesGallery: typeof import('./src/components/doc/PremiumThemesGallery.vue')['default']
     DocReadyForMore: typeof import('./src/components/doc/ReadyForMore.vue')['default']
     DocRelatedPage: typeof import('./src/components/doc/RelatedPage.vue')['default']
     DocRelatedPages: typeof import('./src/components/doc/RelatedPages.vue')['default']
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 5a9de24d428..6544051fd35 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.9",
+  "version": "3.5.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -21,9 +21,10 @@
   },
   "dependencies": {
     "@cosmicjs/sdk": "^1.0.11",
+    "@vercel/analytics": "^1.2.2",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.3.1",
+    "@vuetify/one": "^1.5.4",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
@@ -38,7 +39,7 @@
     "vue-i18n": "^9.7.1",
     "vue-instantsearch": "^4.12.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.5.9"
+    "vuetify": "^3.5.14"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.11.0",
@@ -50,7 +51,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.4.19",
-    "@vuetify/api-generator": "^3.5.9",
+    "@vuetify/api-generator": "^3.5.14",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^2.30.0",
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
index dc7b5caf2be..59a2d6d1105 100644
--- a/packages/docs/src/App.vue
+++ b/packages/docs/src/App.vue
@@ -10,6 +10,11 @@
   // Composables
   import { useHead } from '@unhead/vue'
 
+  // Utilities
+  import { inject } from '@vercel/analytics'
+
+  inject()
+
   const user = useUserStore()
   const router = useRouter()
   const route = useRoute()
diff --git a/packages/docs/src/components/Backmatter.vue b/packages/docs/src/components/Backmatter.vue
index ba43212da6e..d0dd79f1eb8 100644
--- a/packages/docs/src/components/Backmatter.vue
+++ b/packages/docs/src/components/Backmatter.vue
@@ -11,8 +11,6 @@
 
     <DocUpNext />
 
-    <PromotedPromoted />
-
     <DocContribute />
   </section>
 </template>
diff --git a/packages/docs/src/components/app/CommitBtn.vue b/packages/docs/src/components/app/CommitBtn.vue
new file mode 100644
index 00000000000..f5b18197d13
--- /dev/null
+++ b/packages/docs/src/components/app/CommitBtn.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-btn
+    v-if="commits.latest"
+    :href="`https://github.com/vuetifyjs/vuetify/commit/${commits.latest?.sha}`"
+    :text="commits.latest?.sha.slice(0, 7)"
+    class="text-caption"
+    prepend-icon="mdi-source-commit"
+    rel="noopener noreferrer"
+    size="small"
+    target="_blank"
+    variant="text"
+    slim
+  />
+</template>
+
+<script lang="ts" setup>
+  const commits = useCommitsStore()
+</script>
diff --git a/packages/docs/src/components/app/VersionBtn.vue b/packages/docs/src/components/app/VersionBtn.vue
new file mode 100644
index 00000000000..36ed352adc6
--- /dev/null
+++ b/packages/docs/src/components/app/VersionBtn.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-btn
+    :text="version"
+    :to="rpath(`/getting-started/release-notes/?version=v${version}`)"
+    class="text-caption"
+    prepend-icon="mdi-tag-outline"
+    size="small"
+    variant="text"
+    slim
+  />
+</template>
+
+<script lang="ts" setup>
+  // Utilities
+  import { version } from 'vuetify'
+</script>
diff --git a/packages/docs/src/components/app/bar/Bar.vue b/packages/docs/src/components/app/bar/Bar.vue
index 605857d21ce..56b90e2dea1 100644
--- a/packages/docs/src/components/app/bar/Bar.vue
+++ b/packages/docs/src/components/app/bar/Bar.vue
@@ -1,13 +1,11 @@
 <template>
-  <v-app-bar
+  <VoAppBar
     id="app-bar"
-    :image="settings.suit['app-bar']"
     border="b"
+    logo="vuetify"
     flat
   >
     <template #prepend>
-      <app-bar-logo />
-
       <AppBtn
         v-if="route.meta.layout !== 'home' && mdAndDown"
         icon="mdi-menu"
@@ -41,17 +39,12 @@
       <app-bar-language-menu v-if="smAndUp" />
 
       <app-bar-settings-toggle />
-
-      <app-vertical-divider v-if="lgAndUp" class="ms-2 me-3" />
-
-      <VoAuthBtn />
     </template>
-  </v-app-bar>
+  </VoAppBar>
 </template>
 
 <script setup>
   const app = useAppStore()
   const { smAndUp, mdAndUp, lgAndUp, mdAndDown } = useDisplay()
   const route = useRoute()
-  const settings = useSettingsStore()
 </script>
diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue
index a1956e2ee60..0a922fed8d3 100644
--- a/packages/docs/src/components/app/bar/EnterpriseLink.vue
+++ b/packages/docs/src/components/app/bar/EnterpriseLink.vue
@@ -1,12 +1,12 @@
 <template>
   <AppBtn
+    :text="t('enterprise')"
     :to="rpath('/introduction/enterprise-support/')"
     class="ms-1"
+    color="primary"
+    variant="outlined"
     @click="gtagClick('app-bar', 'enterprise', name)"
-  >
-
-    {{ t('enterprise') }}
-  </AppBtn>
+  />
 </template>
 
 <script setup>
diff --git a/packages/docs/src/components/app/bar/SettingsToggle.vue b/packages/docs/src/components/app/bar/SettingsToggle.vue
index 6235488eb76..77ff0c074c2 100644
--- a/packages/docs/src/components/app/bar/SettingsToggle.vue
+++ b/packages/docs/src/components/app/bar/SettingsToggle.vue
@@ -2,6 +2,7 @@
   <AppBtn
     id="settings-toggle"
     :icon="app.settings ? 'mdi-cog' : 'mdi-cog-outline'"
+    class="me-n2"
     color="medium-emphasis"
     @click="onClick"
   />
diff --git a/packages/docs/src/components/app/drawer/Append.vue b/packages/docs/src/components/app/drawer/Append.vue
index 75cceb27367..328c8e881b5 100644
--- a/packages/docs/src/components/app/drawer/Append.vue
+++ b/packages/docs/src/components/app/drawer/Append.vue
@@ -5,36 +5,13 @@
     <AppDrawerDrawerToggleRail v-if="auth.isSubscriber" class="me-2" />
 
     <div class="d-flex ms-auto overflow-hidden">
-      <v-btn
-        v-if="commits.latest"
-        :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"
-        target="_blank"
-        variant="text"
-        slim
-      />
+      <AppCommitBtn class="me-2" />
 
-      <v-btn
-        :text="version"
-        :to="rpath(`/getting-started/release-notes/?version=v${version}`)"
-        class="text-caption"
-        prepend-icon="mdi-tag-outline"
-        size="small"
-        variant="text"
-        slim
-      />
+      <AppVersionBtn />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  // Utilities
-  import { version } from 'vuetify'
-
   const auth = useAuthStore()
-  const commits = useCommitsStore()
 </script>
diff --git a/packages/docs/src/components/app/search/SearchResults.vue b/packages/docs/src/components/app/search/SearchResults.vue
index d8601eeeeda..0e3bb021550 100644
--- a/packages/docs/src/components/app/search/SearchResults.vue
+++ b/packages/docs/src/components/app/search/SearchResults.vue
@@ -9,7 +9,10 @@
     density="compact"
     nav
   >
-    <template v-for="(group, i) in props.groups">
+    <template
+      v-for="(group, i) in props.groups"
+      :key="`group-${group.name}-${i}`"
+    >
       <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
@@ -22,7 +25,10 @@
           {{ group.name }}
         </div>
 
-        <template v-for="(child, ci) in group.items">
+        <template
+          v-for="(child, ci) in group.items"
+          :key="`group-item-${child.name}-${i}`"
+        >
           <v-list-item
             :to="getPathname(child)"
             append-icon="mdi-chevron-right"
diff --git a/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
index c481c475679..2d5ad1563f5 100644
--- a/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
+++ b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
@@ -11,9 +11,9 @@
         cols="12"
         md="4"
       >
-        <v-skeleton-loader height="180" />
+        <v-skeleton-loader class="rounded-b-0" height="180" />
 
-        <v-skeleton-loader type="text" />
+        <v-skeleton-loader class="rounded-t-0" type="text" />
       </v-col>
     </v-row>
 
@@ -42,9 +42,10 @@
                 :name="project.raw.title"
                 :src="project.raw.image"
                 :title="project.raw.title"
-                class="border"
-                height="180"
-                min-height="180"
+                height="230"
+                max-height="230"
+                min-height="230"
+                cover
                 eager
               />
             </a>
diff --git a/packages/docs/src/components/doc/MadeWithVuetifyLink.vue b/packages/docs/src/components/doc/MadeWithVuetifyLink.vue
index 8f6af981d5b..111db0ebb37 100644
--- a/packages/docs/src/components/doc/MadeWithVuetifyLink.vue
+++ b/packages/docs/src/components/doc/MadeWithVuetifyLink.vue
@@ -3,6 +3,7 @@
     :aria-label="t('see-more-projects')"
     :size="size"
     :to="rpath('/resources/made-with-vuetify/')"
+    append-icon="mdi-page-next"
     color="primary"
     variant="outlined"
     @click="onClick"
diff --git a/packages/docs/src/components/doc/PremiumThemesGallery.vue b/packages/docs/src/components/doc/PremiumThemesGallery.vue
new file mode 100644
index 00000000000..2964c122969
--- /dev/null
+++ b/packages/docs/src/components/doc/PremiumThemesGallery.vue
@@ -0,0 +1,90 @@
+<template>
+  <v-sheet
+    class="mx-auto text-center pa-3 mb-4"
+    color="transparent"
+    max-width="900"
+  >
+    <v-row v-if="!items.length">
+      <v-col
+        v-for="n in 9"
+        :key="n"
+        cols="12"
+        md="4"
+      >
+        <v-skeleton-loader class="rounded-b-0" height="180" />
+
+        <v-skeleton-loader class="rounded-t-0" type="text" />
+      </v-col>
+    </v-row>
+
+    <v-data-iterator
+      v-else
+      :items="items"
+      :items-per-page="itemsPerPage"
+      :page="page"
+    >
+      <template #default="{ items: _items }">
+        <v-row style="min-height: 750px;">
+          <v-col
+            v-for="product in _items"
+            :key="product.raw.id"
+            cols="12"
+            sm="4"
+          >
+            <a
+              :href="`https://store.vuetifyjs.com/products/${product.raw.handle}`"
+              class="d-block text-decoration-none"
+              rel="noopener noreferrer"
+              style="min-height: 205px;"
+              target="_blank"
+            >
+              <DocThemeCard
+                :product="{
+                  title: product.raw.title,
+                  src: product.raw.image,
+                }"
+                class="text-center"
+              />
+            </a>
+          </v-col>
+        </v-row>
+      </template>
+    </v-data-iterator>
+  </v-sheet>
+
+  <v-btn
+    append-icon="mdi-open-in-new"
+    aria-label="See More Templates"
+    color="primary"
+    href="https://store.vuetifyjs.com"
+    rel="noopener noreferrer"
+    size="large"
+    target="_blank"
+    variant="outlined"
+  >
+    <span class="text-capitalize font-weight-regular">
+      See More Templates
+    </span>
+  </v-btn>
+</template>
+
+<script setup>
+  defineProps({
+    itemsPerPage: {
+      type: [Number, String],
+      default: 9,
+    },
+  })
+
+  const page = ref(1)
+
+  const products = useProductsStore()
+
+  const items = shallowRef([])
+
+  onMounted(async () => {
+    await products.index()
+
+    items.value = products.randomize(products.themes)
+  })
+</script>
diff --git a/packages/docs/src/components/doc/Releases.vue b/packages/docs/src/components/doc/Releases.vue
index 3093c9d9809..3709c08558b 100644
--- a/packages/docs/src/components/doc/Releases.vue
+++ b/packages/docs/src/components/doc/Releases.vue
@@ -11,6 +11,8 @@
       item-title="name"
       label="Select Release Version"
       prepend-inner-icon="mdi-text-box-search-outline"
+      rounded="b-0"
+      variant="solo-filled"
       hide-details
       hide-no-data
       persistent-placeholder
@@ -73,7 +75,7 @@
     >
       <div
         v-if="model?.author"
-        class="d-flex align-center justify-space-between pa-4 bg-grey-lighten-5"
+        class="d-flex align-center justify-space-between pa-4 bg-surface-light border-y"
       >
         <div class="d-flex align-center text-caption">
           <i18n-t v-if="publishedOn" keypath="published" scope="global">
diff --git a/packages/docs/src/components/doc/ThemeCard.vue b/packages/docs/src/components/doc/ThemeCard.vue
index 005d2b146bd..fd91029b920 100644
--- a/packages/docs/src/components/doc/ThemeCard.vue
+++ b/packages/docs/src/components/doc/ThemeCard.vue
@@ -14,7 +14,7 @@
       min-height="230"
       cover
     >
-      <figcaption class="d-flex text-subtitle-2 align-center text-capitalize mt-3">
+      <figcaption class="d-flex text-subtitle-2 align-center justify-center text-capitalize mt-3">
         <span v-text="product.title" />
 
         <v-chip
@@ -27,7 +27,7 @@
         />
 
         <span
-          v-else
+          v-else-if="product.price"
           class="ms-auto text-subtitle-1 font-weight-bold"
           v-text="`$${product.price}`"
         />
diff --git a/packages/docs/src/components/examples/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue
index cd2a6d6debc..a81c1ab9366 100644
--- a/packages/docs/src/components/examples/UsageExample.vue
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -164,7 +164,7 @@
     {
       name: 'template',
       language: 'html',
-      content: `<template>\n  <v-app>\n    <v-container>\n      ${props.code.replaceAll('\n', '\n      ')}\n    </v-container>\n  </v-app>\n</template>`,
+      content: `<template>\n  <v-app>\n    <v-container>\n      ${props.code.replaceAll('\n', '\n      ')}\n    </v-container>\n  </v-app>\n</template>\n${props.script}`,
     },
   ]))
 </script>
diff --git a/packages/docs/src/components/home/Entry.vue b/packages/docs/src/components/home/Entry.vue
index 60b17ce3b3c..80e581613dd 100644
--- a/packages/docs/src/components/home/Entry.vue
+++ b/packages/docs/src/components/home/Entry.vue
@@ -21,42 +21,74 @@
 
         <br>
 
-        <v-hover>
-          <template #default="{ isHovering, props }">
+        <v-row :justify="mdAndDown ? 'center' : undefined">
+          <v-col cols="auto">
+            <v-hover>
+              <template #default="{ isHovering, props }">
+                <v-sheet
+                  class="px-2 py-2 d-inline-flex align-center text-mono text-body-2 text-no-wrap"
+                  color="surface"
+                  width="215"
+                  border
+                  rounded
+                  v-bind="props"
+                >
+                  <v-icon
+                    class="me-1"
+                    color="medium-emphasis"
+                    icon="mdi-chevron-right"
+                    size="16"
+                  />
+
+                  {{ randomPackage }} create
+
+                  <span class="text-primary font-weight-medium ms-2">
+                    vuetify
+                  </span>
+
+                  <v-icon
+                    :icon="isCopying ? 'mdi-check' : 'mdi-clipboard-text-outline'"
+                    :style="{
+                      opacity: isHovering || isCopying ? 1 : 0,
+                    }"
+                    class="ms-auto"
+                    color="medium-emphasis"
+                    size="17"
+                    @click="copy"
+                  />
+                </v-sheet>
+              </template>
+            </v-hover>
+          </v-col>
+
+          <v-col cols="auto">
             <v-sheet
-              class="px-2 py-2 d-inline-flex align-center text-mono text-body-2 text-no-wrap"
+              class="pa-1 ps-3 d-inline-flex align-center justify-space-between text-caption"
               color="surface"
               width="215"
               border
               rounded
-              v-bind="props"
             >
-              <v-icon
-                class="me-1"
-                color="medium-emphasis"
-                icon="mdi-chevron-right"
-                size="16"
-              />
-
-              yarn create
-
-              <span class="text-primary font-weight-medium ms-2">
-                vuetify
-              </span>
-
-              <v-icon
-                :icon="isCopying ? 'mdi-check' : 'mdi-clipboard-text-outline'"
-                :style="{
-                  opacity: isHovering || isCopying ? 1 : 0,
-                }"
-                class="ms-auto"
-                color="medium-emphasis"
-                size="17"
-                @click="copy"
-              />
+              <span class="me-2">Latest Commit:</span>
+
+              <AppCommitBtn />
             </v-sheet>
-          </template>
-        </v-hover>
+          </v-col>
+
+          <v-col cols="auto">
+            <v-sheet
+              class="pa-1 ps-3 d-inline-flex align-center justify-space-between text-caption"
+              color="surface"
+              width="215"
+              border
+              rounded
+            >
+              <span class="me-2">Latest Release:</span>
+
+              <AppVersionBtn />
+            </v-sheet>
+          </v-col>
+        </v-row>
       </v-col>
     </v-row>
   </v-container>
@@ -65,6 +97,10 @@
 <script setup>
   const isCopying = shallowRef(false)
 
+  const { mdAndDown } = useDisplay()
+  const packages = ['npm', 'yarn', 'pnpm', 'bun']
+  const randomPackage = packages[Math.floor(Math.random() * packages.length)]
+
   function copy () {
     isCopying.value = true
 
diff --git a/packages/docs/src/components/home/Footer.vue b/packages/docs/src/components/home/Footer.vue
index 10256196ec9..6701cceb749 100644
--- a/packages/docs/src/components/home/Footer.vue
+++ b/packages/docs/src/components/home/Footer.vue
@@ -2,16 +2,15 @@
   <v-footer
     id="footer"
     class="d-block py-6"
-    color="surface-bright"
+    color="surface-light"
   >
     <v-container class="text-center">
       <v-row>
         <v-col cols="12">
           <v-img
-            :src="`https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-${theme.name.value}-slim.svg`"
+            :src="`https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-${theme.current.value.dark ? 'dark' : 'light'}-slim.svg`"
             class="mx-auto"
             height="64"
-            width="64"
             contain
           />
         </v-col>
diff --git a/packages/docs/src/components/home/Logo.vue b/packages/docs/src/components/home/Logo.vue
index 6ce261ac14c..d567d832d00 100644
--- a/packages/docs/src/components/home/Logo.vue
+++ b/packages/docs/src/components/home/Logo.vue
@@ -17,6 +17,6 @@
   const theme = useTheme()
 
   const logo = computed(() => {
-    return `vuetify-logo-${theme.name.value}-atom.svg`
+    return `vuetify-logo-${theme.current.value.dark ? 'dark' : 'light'}-atom.svg`
   })
 </script>
diff --git a/packages/docs/src/components/home/Sponsors.vue b/packages/docs/src/components/home/Sponsors.vue
index 76aa251d6ce..0b4c436211b 100644
--- a/packages/docs/src/components/home/Sponsors.vue
+++ b/packages/docs/src/components/home/Sponsors.vue
@@ -30,7 +30,7 @@
     <br>
     <br>
 
-    <SponsorLink size="large" />
+    <SponsorLink append-icon="mdi-page-next" size="large" />
   </v-sheet>
 </template>
 
diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json
index 1da6f6f4fda..0e5eb9338c4 100644
--- a/packages/docs/src/data/301.json
+++ b/packages/docs/src/data/301.json
@@ -118,12 +118,8 @@
   "components/simple-tables": "/components/tables",
   "components/data-tables": "/components/data-tables/basics",
   "components/date-pickers-month": "/introduction/roadmap",
-  "components/time-pickers": "/introduction/roadmap",
   "components/overflow-btns": "/introduction/roadmap",
-  "components/sparklines": "/introduction/roadmap",
   "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",
   "api/v-click-outside": "/api/v-click-outside-directive",
   "api/v-intersect": "/api/v-intersect-directive",
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index ce831953cf2..3e1397b2798 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -60,6 +60,7 @@
       {
         "subheader": "utility-classes"
       },
+      "borders",
       "border-radius",
       "content",
       "cursor",
@@ -232,6 +233,10 @@
         "title": "floating-action-buttons",
         "subfolder": "components"
       },
+      {
+        "title": "number-inputs",
+        "subfolder": "components"
+      },
       {
         "title": "sparklines",
         "subfolder": "components"
@@ -240,6 +245,10 @@
         "title": "speed-dials",
         "subfolder": "components"
       },
+      {
+        "title": "time-pickers",
+        "subfolder": "components"
+      },
       {
         "title": "treeview",
         "subfolder": "components"
diff --git a/packages/docs/src/examples/border-radius/misc-components.vue b/packages/docs/src/examples/border-radius/misc-components.vue
new file mode 100644
index 00000000000..6982676ba1c
--- /dev/null
+++ b/packages/docs/src/examples/border-radius/misc-components.vue
@@ -0,0 +1,10 @@
+<template>
+  <v-container class="text-center">
+    <v-btn
+      color="primary"
+      rounded="pill"
+      text="Update Account"
+      flat
+    ></v-btn>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue b/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue
index 5706c550646..a10d6c08b11 100644
--- a/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue
+++ b/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue
@@ -1,11 +1,19 @@
 <template>
-  <div class="d-flex justify-space-around">
-    <div
-      class="px-10 bg-secondary rounded-pill"
-    >
-    </div>
-    <div
-      class="pa-6 bg-secondary rounded-circle d-inline-block"
-    ></div>
-  </div>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-pill mx-auto" style="height: 64px; width: 164px;"></div>
+          <div class="text-caption">rounded-pill</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-circle mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-circle</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue b/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue
index d076295bc86..15f2712bcbb 100644
--- a/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue
+++ b/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="d-flex justify-space-around">
-    <div class="pa-4 text-center bg-secondary rounded-0">
-      .rounded-0
-    </div>
-
-    <div class="pa-4 text-center bg-secondary rounded-xl rounded-be-0">
-      .rounded-xl .rounded-be-0
-    </div>
-  </div>
+  <v-container class="text-center">
+    <v-btn
+      color="primary"
+      rounded="0"
+      text="Update Account"
+      flat
+    ></v-btn>
+  </v-container>
 </template>
diff --git a/packages/docs/src/examples/border-radius/misc-rounded-corners.vue b/packages/docs/src/examples/border-radius/misc-rounded-corners.vue
new file mode 100644
index 00000000000..6d3426ebff8
--- /dev/null
+++ b/packages/docs/src/examples/border-radius/misc-rounded-corners.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-sm mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-sm</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-md mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-md</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-xl mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-xl</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue b/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue
index 2d3cfe44e84..64ef335de1a 100644
--- a/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue
+++ b/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue
@@ -1,19 +1,33 @@
 <template>
-  <div class="d-flex justify-space-around">
-    <div class="pa-4 bg-secondary rounded-ts-xl">
-      .rounded-ts-xl
-    </div>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-ts-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-ts-lg</div>
+        </div>
+      </v-col>
 
-    <div class="pa-4 bg-secondary rounded-te-xl">
-      .rounded-te-xl
-    </div>
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-te-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-te-lg</div>
+        </div>
+      </v-col>
 
-    <div class="pa-4 bg-secondary rounded-be-xl">
-      .rounded-be-xl
-    </div>
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-be-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-be-lg</div>
+        </div>
+      </v-col>
 
-    <div class="pa-4 bg-secondary rounded-bs-xl">
-      .rounded-bs-xl
-    </div>
-  </div>
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-bs-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-bs-lg</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue b/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue
index 774d0fdb17b..65b63b7230b 100644
--- a/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue
+++ b/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue
@@ -1,19 +1,33 @@
 <template>
-  <div class="d-flex justify-space-around">
-    <div class="pa-4 bg-secondary rounded-t-xl">
-      .rounded-t-xl
-    </div>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-t-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-t-lg</div>
+        </div>
+      </v-col>
 
-    <div class="pa-4 bg-secondary rounded-b-xl">
-      .rounded-b-xl
-    </div>
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-e-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-e-lg</div>
+        </div>
+      </v-col>
 
-    <div class="pa-4 bg-secondary rounded-s-xl">
-      .rounded-s-xl
-    </div>
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-b-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-b-lg</div>
+        </div>
+      </v-col>
 
-    <div class="pa-4 bg-secondary rounded-e-xl">
-      .rounded-e-xl
-    </div>
-  </div>
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="bg-surface-variant rounded-s-lg mx-auto" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">rounded-s-lg</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/packages/docs/src/examples/border-radius/usage.vue b/packages/docs/src/examples/border-radius/usage.vue
deleted file mode 100644
index 502e3b6ecb1..00000000000
--- a/packages/docs/src/examples/border-radius/usage.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-row class="pa-4">
-      <v-radio-group v-model="model" inline>
-        <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"
-      class="mx-auto mt-8"
-      elevation="12"
-      height="128"
-      max-width="256"
-      width="100%"
-    ></v-sheet>
-
-    <div class="py-3"></div>
-
-    <code class="text-subtitle-1">.{{ model }}</code>
-  </div>
-</template>
-
-<script>
-  export default {
-    data: () => ({
-      model: 'rounded-0',
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/border/all.vue b/packages/docs/src/examples/border/all.vue
new file mode 100644
index 00000000000..747d43b941b
--- /dev/null
+++ b/packages/docs/src/examples/border/all.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-thin" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-thin</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-sm" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-sm</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-md" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-md</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border-xl" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-xl</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/card.vue b/packages/docs/src/examples/border/card.vue
new file mode 100644
index 00000000000..6fe543603cb
--- /dev/null
+++ b/packages/docs/src/examples/border/card.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-container>
+    <v-card
+      border="opacity-50 sm"
+      class="mx-auto"
+      max-width="360"
+      rounded="xl"
+      variant="text"
+    >
+      <template v-slot:title>
+        <div class="text-caption font-weight-bold">Revenue</div>
+      </template>
+
+      <template v-slot:append>
+        <v-chip
+          border="success sm opacity-100"
+          color="green"
+          size="small"
+          variant="text"
+        >
+          <v-icon icon="mdi-arrow-up" start></v-icon> 13%
+        </v-chip>
+      </template>
+
+      <template v-slot:text>
+        <div class="text-h4 font-weight-black">$ 9,232,215</div>
+
+        <small class="text-caption text-medium-emphasis d-flex justify-space-between align-center">
+          <div>
+            <span class="text-green">
+              <v-avatar icon="mdi-arrow-up" size="small" variant="tonal"></v-avatar>
+              + $ 3,295
+            </span>
+
+            in the last week
+          </div>
+
+          <v-btn
+            icon="mdi-arrow-right"
+            size="x-small"
+            variant="text"
+            border
+          ></v-btn>
+        </small>
+      </template>
+    </v-card>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/colors.vue b/packages/docs/src/examples/border/colors.vue
new file mode 100644
index 00000000000..3d22020222b
--- /dev/null
+++ b/packages/docs/src/examples/border/colors.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="primary thin" class="mx-auto" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"primary thin"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="success sm" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"sucess sm"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="info md" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"info md"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="warning lg" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"warning lg"</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-sheet border="error xl" height="64" width="64" rounded></v-sheet>
+          <div class="text-caption">"error xl"</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/sides.vue b/packages/docs/src/examples/border/sides.vue
new file mode 100644
index 00000000000..a492a24d31c
--- /dev/null
+++ b/packages/docs/src/examples/border/sides.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-t-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-t-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-e-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-e-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-b-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-b-lg</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <div class="border border-s-lg" style="height: 64px; width: 64px;"></div>
+          <div class="text-caption">border-s-lg</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/border/styles.vue b/packages/docs/src/examples/border/styles.vue
new file mode 100644
index 00000000000..312141b7014
--- /dev/null
+++ b/packages/docs/src/examples/border/styles.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-container>
+    <v-row justify="space-around">
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn text="Button A" variant="text" border></v-btn>
+          <div class="text-caption">border</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn border="dashed thin" text="Button A" variant="text"></v-btn>
+          <div class="text-caption">border-dashed</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn border="dotted thin" text="Button A" variant="text"></v-btn>
+          <div class="text-caption">border-dotted</div>
+        </div>
+      </v-col>
+
+      <v-col cols="auto">
+        <div class="text-center">
+          <v-btn border="double lg" text="Button A" variant="text"></v-btn>
+          <div class="text-caption">border-double</div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-data-iterator/usage.vue b/packages/docs/src/examples/v-data-iterator/usage.vue
index d76504918d5..14f157e581b 100644
--- a/packages/docs/src/examples/v-data-iterator/usage.vue
+++ b/packages/docs/src/examples/v-data-iterator/usage.vue
@@ -71,14 +71,14 @@
   })
 
   const script = computed(() => {
-    return `export default {
-  data: () => ({
-    page: 1,
-    items: Array.from({ length: 15 }, (k, v) => ({
-      title: 'Item ' + v + 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!',
-    })),
-  }),
-}`
+    return `<script setup>
+  import { ref } from 'vue'
+
+  const page = ref(1)
+  const items = Array.from({ length: 15 }, (k, v) => ({
+    title: 'Item ' + v + 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!',
+  }))
+<` + '/script>'
   })
 </script>
diff --git a/packages/docs/src/examples/v-data-table/usage.vue b/packages/docs/src/examples/v-data-table/usage.vue
index 0d345af90d9..3a67557dbbc 100644
--- a/packages/docs/src/examples/v-data-table/usage.vue
+++ b/packages/docs/src/examples/v-data-table/usage.vue
@@ -4,6 +4,7 @@
     :code="code"
     :name="name"
     :options="options"
+    :script="script"
   >
     <div>
       <v-data-table
@@ -104,6 +105,6 @@
   })
 
   const code = computed(() => {
-    return `<template>\n  <v-data-table${propsToString(props.value, 2)}></v-data-table>\n</template>\n\n${script.value}`
+    return `<v-data-table${propsToString(props.value, 2)}></v-data-table>`
   })
 </script>
diff --git a/packages/docs/src/examples/v-empty-state/slot-default.vue b/packages/docs/src/examples/v-empty-state/slot-default.vue
index 7031aed1027..51cc9ace574 100644
--- a/packages/docs/src/examples/v-empty-state/slot-default.vue
+++ b/packages/docs/src/examples/v-empty-state/slot-default.vue
@@ -6,7 +6,7 @@
   >
     <v-container>
       <v-row>
-        <v-col cols="6">
+        <v-col cols="12" md="6">
           <v-card
             href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
             prepend-icon="$vuetify"
@@ -16,7 +16,7 @@
           ></v-card>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="12" md="6">
           <v-card
             href="https://play.vuetifyjs.com"
             prepend-icon="$vuetify-play"
@@ -26,7 +26,7 @@
           ></v-card>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="12" md="6">
           <v-card
             href="https://bin.vuetifyjs.com"
             prepend-icon="mdi-delete"
@@ -36,7 +36,7 @@
           ></v-card>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="12" md="6">
           <v-card
             href="https://issues.vuetifyjs.com"
             prepend-icon="$warning"
diff --git a/packages/docs/src/examples/v-infinite-scroll/usage.vue b/packages/docs/src/examples/v-infinite-scroll/usage.vue
index d6256d067a1..9265fa96f83 100644
--- a/packages/docs/src/examples/v-infinite-scroll/usage.vue
+++ b/packages/docs/src/examples/v-infinite-scroll/usage.vue
@@ -57,7 +57,7 @@
     return `
   <template v-for="(item, index) in items" :key="item">
     <div :class="['pa-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
-      Item #{{ item }}
+      Item number #{{ item }}
     </div>
   </template>
 `
@@ -68,28 +68,26 @@
   })
 
   const script = computed(() => {
-    return `export default {
-  data: () => ({
-    items: [],
-  }),
+    return `<script setup>
+  import { ref } from 'vue'
 
-  methods: {
-    async api () {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve(Array.from({ length: 10 }, (k, v) => v + this.items.at(-1) + 1))
-        }, 1000)
-      })
-    },
-    async load ({ done }) {
-      // Perform API call
-      const res = await this.api()
+  const items = ref(Array.from({ length: 30 }, (k, v) => v + 1))
+
+  async function api () {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(Array.from({ length: 10 }, (k, v) => v + items.value.at(-1) + 1))
+      }, 1000)
+    })
+  }
+  async function load ({ done }) {
+    // Perform API call
+    const res = await api()
 
-      this.items.push(...res)
+    items.value.push(...res)
 
-      done('ok')
-    },
-  },
-}`
+    done('ok')
+  }
+<` + '/script>'
   })
 </script>
diff --git a/packages/docs/src/examples/v-number-input/prop-control-variant.vue b/packages/docs/src/examples/v-number-input/prop-control-variant.vue
new file mode 100644
index 00000000000..7f5c7d49e02
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/prop-control-variant.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" md="4" sm="4">
+        <h5>Default</h5>
+
+        <v-number-input control-variant="default"></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Stacked</h5>
+
+        <v-number-input control-variant="stacked"></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Split</h5>
+
+        <v-number-input control-variant="split"></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-number-input/prop-hide-input.vue b/packages/docs/src/examples/v-number-input/prop-hide-input.vue
new file mode 100644
index 00000000000..954ea1bc9b2
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/prop-hide-input.vue
@@ -0,0 +1,9 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col cols="auto">
+        <v-number-input hide-input></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-number-input/prop-inset.vue b/packages/docs/src/examples/v-number-input/prop-inset.vue
new file mode 100644
index 00000000000..d40c6caecdd
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/prop-inset.vue
@@ -0,0 +1,41 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <h5>Default</h5>
+
+        <v-number-input
+          control-variant="default"
+          inset
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <h5>Stacked</h5>
+
+        <v-number-input
+          control-variant="stacked"
+          inset
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <h5>Split</h5>
+
+        <v-number-input
+          control-variant="split"
+          inset
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <h5>Hide-input</h5>
+
+        <v-number-input
+          hide-input
+          inset
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-number-input/prop-min-max.vue b/packages/docs/src/examples/v-number-input/prop-min-max.vue
new file mode 100644
index 00000000000..3b9d367b404
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/prop-min-max.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <h5>min:10/max:20</h5>
+
+        <v-number-input
+          :max="20"
+          :min="10"
+          :model-value="15"
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-number-input/prop-reverse.vue b/packages/docs/src/examples/v-number-input/prop-reverse.vue
new file mode 100644
index 00000000000..8319e2ec525
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/prop-reverse.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" md="4" sm="4">
+        <h5>Default</h5>
+
+        <v-number-input
+          control-variant="default"
+          reverse
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Stacked</h5>
+
+        <v-number-input
+          control-variant="stacked"
+          reverse
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Split</h5>
+
+        <v-number-input
+          control-variant="split"
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-number-input/prop-step.vue b/packages/docs/src/examples/v-number-input/prop-step.vue
new file mode 100644
index 00000000000..0c0ef3d16b7
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/prop-step.vue
@@ -0,0 +1,16 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <h5>step 2; min:10; max:20</h5>
+
+        <v-number-input
+          :max="20"
+          :min="10"
+          :model-value="15"
+          :step="2"
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-number-input/usage.vue b/packages/docs/src/examples/v-number-input/usage.vue
new file mode 100644
index 00000000000..1294a9a6188
--- /dev/null
+++ b/packages/docs/src/examples/v-number-input/usage.vue
@@ -0,0 +1,59 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div class="text-center">
+      <v-number-input v-bind="props"></v-number-input>
+    </div>
+
+    <template v-slot:configuration>
+      <v-select
+        v-model="controlVariant"
+        :items="controlVariantOptions"
+        label="Control Variant"
+      ></v-select>
+      <v-checkbox v-model="reverse" label="Reverse"></v-checkbox>
+      <v-checkbox v-model="inset" label="Inset"></v-checkbox>
+      <v-checkbox v-model="hideInput" label="HideInput"></v-checkbox>
+      <v-text-field v-model="label" label="Label" clearable></v-text-field>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = ref('v-number-input')
+  const model = ref('default')
+  const options = ['outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled']
+  const controlVariantOptions = ['default', 'stacked', 'split']
+  const reverse = ref(false)
+  const controlVariant = ref('default')
+  const disabled = ref(false)
+  const loading = ref(false)
+  const inset = ref(false)
+  const hideInput = ref(false)
+  const label = ref('')
+
+  const props = computed(() => {
+    return {
+      reverse: reverse.value,
+      controlVariant: controlVariant.value,
+      disabled: disabled.value || undefined,
+      label: label.value,
+      loading: loading.value || undefined,
+      hideInput: hideInput.value,
+      inset: inset.value,
+      variant: model.value !== 'default' ? model.value : undefined,
+    }
+  })
+
+  const slots = computed(() => {
+    return ``
+  })
+
+  const code = computed(() => {
+    return `<v-number-input${propsToString(props.value)}>${slots.value}</v-number-input>`
+  })
+</script>
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 ef73d36c4ad..67112474a44 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
@@ -1,92 +1,64 @@
 <template>
-  <v-row>
-    <v-col
-      cols="11"
-      sm="5"
-    >
-      <v-menu
-        ref="menu"
-        v-model="menu2"
-        v-model:return-value="time"
-        :close-on-content-click="false"
-        :nudge-right="40"
-        max-width="290px"
-        min-width="290px"
-        transition="scale-transition"
-        offset-y
+  <v-container>
+    <v-row justify="space-around">
+      <v-col
+        cols="11"
+        sm="5"
       >
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            v-model="time"
-            label="Picker in menu"
-            prepend-icon="mdi-clock-time-four-outline"
-            readonly
-            v-bind="attrs"
-            v-on="on"
-          ></v-text-field>
-        </template>
-        <v-time-picker
-          v-if="menu2"
+        <v-text-field
           v-model="time"
-          full-width
-          @click:minute="menu.save(time)"
-        ></v-time-picker>
-      </v-menu>
-    </v-col>
-    <v-spacer></v-spacer>
-    <v-col
-      cols="11"
-      sm="5"
-    >
-      <v-dialog
-        ref="dialog"
-        v-model="modal2"
-        v-model:return-value="time"
-        width="290px"
-        persistent
+          :active="menu2"
+          :focus="menu2"
+          label="Picker in menu"
+          prepend-icon="mdi-clock-time-four-outline"
+          readonly
+        >
+          <v-menu
+            v-model="menu2"
+            :close-on-content-click="false"
+            activator="parent"
+            transition="scale-transition"
+          >
+            <v-time-picker
+              v-if="menu2"
+              v-model="time"
+              full-width
+            ></v-time-picker>
+          </v-menu>
+        </v-text-field>
+      </v-col>
+
+      <v-col
+        cols="11"
+        sm="5"
       >
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            v-model="time"
-            label="Picker in dialog"
-            prepend-icon="mdi-clock-time-four-outline"
-            readonly
-            v-bind="attrs"
-            v-on="on"
-          ></v-text-field>
-        </template>
-        <v-time-picker
-          v-if="modal2"
+        <v-text-field
           v-model="time"
-          full-width
+          :active="modal2"
+          :focused="modal2"
+          label="Picker in dialog"
+          prepend-icon="mdi-clock-time-four-outline"
+          readonly
         >
-          <v-spacer></v-spacer>
-          <v-btn
-            color="primary"
-            variant="text"
-            @click="modal2 = false"
+          <v-dialog
+            v-model="modal2"
+            activator="parent"
+            width="auto"
           >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="text"
-            @click="dialog.save(time)"
-          >
-            OK
-          </v-btn>
-        </v-time-picker>
-      </v-dialog>
-    </v-col>
-  </v-row>
+            <v-time-picker
+              v-if="modal2"
+              v-model="time"
+            ></v-time-picker>
+          </v-dialog>
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
   import { ref } from 'vue'
 
-  const menu = ref()
-  const dialog = ref()
-
   const time = ref(null)
   const menu2 = ref(false)
   const modal2 = ref(false)
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 4ce57b15c70..54baf57a79d 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
@@ -1,22 +1,23 @@
 <template>
-  <v-row justify="space-around">
-    <v-time-picker
-      v-model="time"
-      :allowed-hours="allowedHours"
-      :allowed-minutes="allowedMinutes"
-      class="mt-4"
-      format="24hr"
-      max="22:15"
-      min="9:30"
-      scrollable
-    ></v-time-picker>
-    <v-time-picker
-      v-model="timeStep"
-      :allowed-minutes="allowedStep"
-      class="mt-4"
-      format="24hr"
-    ></v-time-picker>
-  </v-row>
+  <v-container>
+    <v-row justify="space-around">
+      <v-time-picker
+        v-model="time"
+        :allowed-hours="allowedHours"
+        :allowed-minutes="allowedMinutes"
+        format="24hr"
+        max="22:15"
+        min="9:30"
+        scrollable
+      ></v-time-picker>
+
+      <v-time-picker
+        v-model="timeStep"
+        :allowed-minutes="allowedStep"
+        format="24hr"
+      ></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
diff --git a/packages/docs/src/examples/v-time-picker/prop-color.vue b/packages/docs/src/examples/v-time-picker/prop-color.vue
index 215e145611d..1409a47fc8e 100644
--- a/packages/docs/src/examples/v-time-picker/prop-color.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-color.vue
@@ -1,29 +1,14 @@
 <template>
-  <v-row justify="space-around">
-    <v-time-picker
-      v-model="e4"
-      color="green-lighten-1"
-    ></v-time-picker>
-    <v-time-picker
-      v-model="e4"
-      color="green-lighten-1"
-      header-color="primary"
-    ></v-time-picker>
-  </v-row>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
+  <v-container>
+    <v-row justify="space-around">
+      <v-time-picker
+        color="green-lighten-1"
+      ></v-time-picker>
 
-  const e4 = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        e4: null,
-      }
-    },
-  }
-</script>
+      <v-time-picker
+        color="pink"
+        header-color="primary"
+      ></v-time-picker>
+    </v-row>
+  </v-container>
+</template>
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 87d5ea61a7d..aa3b562c56c 100644
--- a/packages/docs/src/examples/v-time-picker/prop-elevation.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-elevation.vue
@@ -1,32 +1,9 @@
 <template>
-  <v-row
-    align="center"
-    justify="space-around"
-  >
-    <v-time-picker
-      v-model="picker"
-      flat
-    ></v-time-picker>
-
-    <v-time-picker
-      v-model="picker"
-      elevation="15"
-    ></v-time-picker>
-  </v-row>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker
+        elevation="15"
+      ></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const picker = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        picker: null,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-time-picker/prop-format.vue b/packages/docs/src/examples/v-time-picker/prop-format.vue
index cea2523d835..02d798b2710 100644
--- a/packages/docs/src/examples/v-time-picker/prop-format.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-format.vue
@@ -1,26 +1,7 @@
 <template>
-  <v-row justify="center">
-    <v-col>
-      <v-time-picker
-        v-model="e7"
-        format="24hr"
-      ></v-time-picker>
-    </v-col>
-  </v-row>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker format="24hr"></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const e7 = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        e7: null,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-time-picker/prop-hide-header.vue b/packages/docs/src/examples/v-time-picker/prop-hide-header.vue
new file mode 100644
index 00000000000..976558e564d
--- /dev/null
+++ b/packages/docs/src/examples/v-time-picker/prop-hide-header.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker hide-header></v-time-picker>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-time-picker/prop-no-title.vue b/packages/docs/src/examples/v-time-picker/prop-no-title.vue
deleted file mode 100644
index 77e0940fb6a..00000000000
--- a/packages/docs/src/examples/v-time-picker/prop-no-title.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <v-row
-    justify="space-around"
-  >
-    <v-time-picker
-      v-model="picker"
-      no-title
-    ></v-time-picker>
-    <v-time-picker
-      v-model="picker"
-      :landscape="$vuetify.breakpoint.smAndUp"
-      no-title
-    ></v-time-picker>
-  </v-row>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const picker = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        picker: null,
-      }
-    },
-  }
-</script>
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 8d34675c0fe..d040d336989 100644
--- a/packages/docs/src/examples/v-time-picker/prop-readonly.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-readonly.vue
@@ -1,32 +1,7 @@
 <template>
-  <v-row
-    align="center"
-    justify="space-around"
-  >
-    <v-time-picker
-      v-model="picker"
-      readonly
-    ></v-time-picker>
-    <v-time-picker
-      v-model="picker"
-      :landscape="$vuetify.breakpoint.smAndUp"
-      readonly
-    ></v-time-picker>
-  </v-row>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker readonly></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const picker = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        picker: null,
-      }
-    },
-  }
-</script>
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 e76bfee6b54..a74d7857a75 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,32 +1,7 @@
 <template>
-  <v-row
-    align="center"
-    justify="space-around"
-  >
-    <v-time-picker
-      v-model="picker"
-      use-seconds
-    ></v-time-picker>
-    <v-time-picker
-      v-model="picker"
-      :landscape="$vuetify.breakpoint.smAndUp"
-      use-seconds
-    ></v-time-picker>
-  </v-row>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker use-seconds></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const picker = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        picker: null,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-time-picker/prop-width.vue b/packages/docs/src/examples/v-time-picker/prop-width.vue
deleted file mode 100644
index 6fe2cb38d70..00000000000
--- a/packages/docs/src/examples/v-time-picker/prop-width.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <v-row align="center">
-    <v-time-picker
-      v-model="time"
-      class="ms-4"
-      type="month"
-      width="290"
-    ></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"
-        type="month"
-        full-width
-      ></v-time-picker>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const time = ref('11:15')
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      time: '11:15',
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/v-time-picker/usage.vue b/packages/docs/src/examples/v-time-picker/usage.vue
index 296d5f648dd..da382325d3e 100644
--- a/packages/docs/src/examples/v-time-picker/usage.vue
+++ b/packages/docs/src/examples/v-time-picker/usage.vue
@@ -1,41 +1,32 @@
 <template>
-  <v-time-picker
-    v-bind="$attrs"
-  ></v-time-picker>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <v-row justify="center">
+      <v-time-picker v-bind="props"></v-time-picker>
+    </v-row>
+  </ExamplesUsageExample>
 </template>
 
-<script>
-  export default {
-    name: 'Usage',
+<script setup>
+  const name = 'v-time-picker'
+  const model = ref('default')
+  const options = []
 
-    inheritAttrs: false,
+  const props = computed(() => {
+    return {
+      //
+    }
+  })
 
-    data: () => ({
-      defaults: {
-        'ampm-in-title': false,
-        disabled: false,
-        format: 'ampm',
-        'full-width': false,
-        landscape: false,
-        'no-title': false,
-        readonly: false,
-        scrollable: false,
-        'use-seconds': false,
-      },
-      options: {
-        booleans: [
-          'ampm-in-title',
-          'disabled',
-          'full-width',
-          'no-title',
-          'readonly',
-          'use-seconds',
-        ],
-        btnToggles: {
-          format: ['ampm', '24hr'],
-        },
-      },
-      tabs: ['landscape', 'scrollable'],
-    }),
-  }
+  const slots = computed(() => {
+    return ''
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
 </script>
diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
index 8d21f6c2aeb..9cdfa4ffabe 100644
--- a/packages/docs/src/pages/en/components/all.md
+++ b/packages/docs/src/pages/en/components/all.md
@@ -232,6 +232,12 @@ Form components are used to collect user input in a variety of ways.
 
 </ComponentsListItem>
 
+<ComponentsListItem name="Number input component" src="number-inputs" labs>
+
+  The number input component is used for collecting numerical data from the user
+
+</ComponentsListItem>
+
 <ComponentsListItem name="OTP Input component" src="otp-input" >
 
   The OTP input component is used for MFA authentication via input field
diff --git a/packages/docs/src/pages/en/components/chips.md b/packages/docs/src/pages/en/components/chips.md
index 2e932052656..1ee5cf87bf3 100644
--- a/packages/docs/src/pages/en/components/chips.md
+++ b/packages/docs/src/pages/en/components/chips.md
@@ -10,10 +10,10 @@ related:
   - /components/selects
 features:
   figma: true
-  github: /components/VBtn/
+  github: /components/VChip/
   label: 'C: VChip'
   report: true
-  spec: https://m2.material.io/components/buttons
+  spec: https://m2.material.io/components/chips
 ---
 
 # Chips
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 647ea088d3a..7fec440d18f 100644
--- a/packages/docs/src/pages/en/components/data-tables/introduction.md
+++ b/packages/docs/src/pages/en/components/data-tables/introduction.md
@@ -37,7 +37,7 @@ Before diving into the guides and examples, let's take a moment to understand th
 | [v-data-table](/api/v-data-table/)                 | Primary Component                                           |
 | [v-data-table-server](/api/v-data-table-server/)   | Specialized Data-table for displaying results from a server |
 | [v-data-table-virtual](/api/v-data-table-virtual/) | Data-table with built in row virtualization                 |
-| [v-data-table-footer](/api/v-data-table-footer/)   | Functional Component used to display Data-table headers     |
+| [v-data-table-footer](/api/v-data-table-footer/)   | Functional Component used to display Data-table footer     |
 | [v-checkbox-btn](/api/v-checkbox-btn/)             | Reusable lightweight [v-checkbox](/components/checkboxes)   |
 
 <ApiInline hide-links />
diff --git a/packages/docs/src/pages/en/components/number-inputs.md b/packages/docs/src/pages/en/components/number-inputs.md
new file mode 100644
index 00000000000..74e0ea7437f
--- /dev/null
+++ b/packages/docs/src/pages/en/components/number-inputs.md
@@ -0,0 +1,101 @@
+---
+emphasized: true
+meta:
+  title: Number inputs
+  description: The Number input component is used for ...
+  keywords: Number, vuetify number input component, vue number component
+related:
+  - /components/inputs/
+  - /components/text-fields/
+  - /components/forms/
+features:
+  label: 'C: VNumberInput'
+  github: /components/VNumberInput/
+  report: true
+---
+
+# Number inputs
+
+The VNumberInput extends the standard HTML number-type input, ensuring style consistency across browsers as a replacement for `<input type="number">`
+
+<page-features />
+
+::: warning
+
+This feature requires [v3.5.10](/getting-started/release-notes/?version=v3.5.10)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VNumberInput } from 'vuetify/labs/VNumberInput'
+
+export default createVuetify({
+  components: {
+    VNumberInput,
+  },
+})
+```
+
+## Usage
+
+Here we display a list of settings that could be applied within an application.
+
+<ExamplesUsage name="v-number-input" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-number-input](/api/v-number-input/) | Primary Component |
+
+<ApiInline hide-links />
+
+## Guide
+
+The `v-number-input` component is built upon the `v-field` and `v-input` components. It is used as a replacement for `<input type="number">`, accepting numeric values from the user.
+
+### Props
+
+The `v-number-input` component has support for most of `v-field`'s props and is follows the same design patterns as other inputs.
+
+#### Control-variant
+
+The `control-variant` prop offers an easy way to customize steppers button layout. The following values are valid options: **default**, **stacked** and **split**.
+
+<ExamplesExample file="v-number-input/prop-control-variant" />
+
+#### Reverse
+
+The `reverse` prop automatically changes the stepper buttons' position to the opposite side for both the default and stacked control variants.
+
+<ExamplesExample file="v-number-input/prop-reverse" />
+
+#### Hide-input
+
+The `hide-input` prop hides the input field, allowing only the stepper buttons to be visible. These stepper buttons follow a stacked control-variant layout.
+
+<ExamplesExample file="v-number-input/prop-hide-input" />
+
+#### Inset
+
+The `inset` prop adjusts the style of the stepper buttons by reducing the size of the button dividers.
+
+<ExamplesExample file="v-number-input/prop-inset" />
+
+#### Min/Max
+
+The `min` and `max` props specify the minimum and maximum values accepted by v-number-input, behaving identically to the native min and max attributes for `<input type="number">`.
+
+<ExamplesExample file="v-number-input/prop-min-max" />
+
+#### Step
+
+The `step` prop behaves the same as the `step` attribute in the `<input type="number">`, it defines the incremental steps for adjusting the numeric value.
+
+<ExamplesExample file="v-number-input/prop-step" />
diff --git a/packages/docs/src/pages/en/components/overlays.md b/packages/docs/src/pages/en/components/overlays.md
index 2fef0281d0b..d22e2d7580f 100644
--- a/packages/docs/src/pages/en/components/overlays.md
+++ b/packages/docs/src/pages/en/components/overlays.md
@@ -135,6 +135,10 @@ No scroll strategy is used.
 
 A **contained** overlay is positioned absolutely and contained inside its parent element.
 
+::: info
+  Note: The parent element must have position: relative.
+:::
+
 <ExamplesExample file="v-overlay/prop-contained" />
 
 ### Misc
diff --git a/packages/docs/src/pages/en/components/time-pickers.md b/packages/docs/src/pages/en/components/time-pickers.md
index f7398217fdc..28976898267 100644
--- a/packages/docs/src/pages/en/components/time-pickers.md
+++ b/packages/docs/src/pages/en/components/time-pickers.md
@@ -1,6 +1,7 @@
 ---
-disabled: true
+emphasized: true
 meta:
+  nav: Time pickers
   title: Time picker component
   description: The time picker component is a stand-alone interface that allows the selection of hours and minutes in AM/PM and 24hr formats.
   keywords: time pickers, vuetify time picker component, vue time picker component
@@ -14,7 +15,27 @@ 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.
 
-<PromotedEntry />
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.5.12](/getting-started/release-notes/?version=v3.5.12)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+
+export default createVuetify({
+  components: {
+    VTimePicker,
+  },
+})
+```
 
 ## Usage
 
@@ -22,9 +43,15 @@ Time pickers have the light theme enabled by default.
 
 <ExamplesUsage name="v-time-picker" />
 
+<PromotedEntry />
+
 ## API
 
-<ApiInline />
+| Component | Description |
+| - | - |
+| [v-time-picker](/api/v-time-picker/) | Primary Component |
+
+<ApiInline hide-links />
 
 ## Examples
 
@@ -36,12 +63,6 @@ You can specify allowed times using arrays, objects, and functions. You can also
 
 <ExamplesExample file="v-time-picker/prop-allowed-times" />
 
-#### AMPM in title
-
-You can move AM/PM switch to picker's 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."
@@ -66,11 +87,11 @@ A time picker can be switched to 24hr format. Note that the `format` prop define
 
 <ExamplesExample file="v-time-picker/prop-format" />
 
-#### No title
+#### No header
 
-You can remove picker's title.
+You can remove picker's header.
 
-<ExamplesExample file="v-time-picker/prop-no-title" />
+<ExamplesExample file="v-time-picker/prop-hide-header" />
 
 #### Range
 
@@ -96,12 +117,6 @@ Time picker can have seconds input.
 
 <ExamplesExample file="v-time-picker/prop-use-seconds" />
 
-#### Width
-
-You can specify the picker's width or make it full width.
-
-<ExamplesExample file="v-time-picker/prop-width" />
-
 ### Misc
 
 #### Dialog and menu
diff --git a/packages/docs/src/pages/en/features/internationalization.md b/packages/docs/src/pages/en/features/internationalization.md
index eabffa27ca9..e8d62303803 100644
--- a/packages/docs/src/pages/en/features/internationalization.md
+++ b/packages/docs/src/pages/en/features/internationalization.md
@@ -17,7 +17,7 @@ Vuetify supports language Internationalization (i18n) of its components.
 
 <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.
+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://vue-i18n.intlify.dev/). Using a locale that has an RTL (right-to-left) language also affects the directionality of the Vuetify components.
 
 ## Getting started
 
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 416cff323b1..430758fa964 100644
--- a/packages/docs/src/pages/en/getting-started/browser-support.md
+++ b/packages/docs/src/pages/en/getting-started/browser-support.md
@@ -15,7 +15,7 @@ Vuetify 3 is a next generation framework that takes advantage of the latest web
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 ## Browsers
 
diff --git a/packages/docs/src/pages/en/getting-started/contributing.md b/packages/docs/src/pages/en/getting-started/contributing.md
index 079efaac434..e5b542f59f6 100644
--- a/packages/docs/src/pages/en/getting-started/contributing.md
+++ b/packages/docs/src/pages/en/getting-started/contributing.md
@@ -15,7 +15,7 @@ Vuetify is made possible by an amazing community that submits issues, creates pu
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 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.
 
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 fb8dc7a3702..0b41d3c1b9c 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
@@ -15,7 +15,7 @@ Stuck on a particular problem? Check some of these common gotchas before creatin
 
 <PageFeatures />
 
-<PromotedPromoted slug="discord-subscriber-help" />
+<VoPromotionsCardHighlight slug="vuetify-discord-subscriber-help" />
 
 ## Questions
 
@@ -97,7 +97,7 @@ The following responses are a collection of common questions asked by the Vuetif
 
   The `value` prop was changed in Vue 3 to support a new `v-model` syntax. See the official Vue docs for more information on [Component v-model](https://vuejs.org/guide/components/v-model.html).
 
-* **Is Vuetify 3 compatible with @vue/compact?**
+* **Is Vuetify 3 compatible with `@vue/compat`?**
 
   No. If this changes in the future, we will update this FAQ and make a public notification.
 
diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md
index 782312315ae..a0460ebb1d2 100644
--- a/packages/docs/src/pages/en/getting-started/installation.md
+++ b/packages/docs/src/pages/en/getting-started/installation.md
@@ -20,7 +20,7 @@ Get started with Vuetify, the world’s most popular Vue.js framework for buildi
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardHighlight slug="vuemastery-getting-started" />
 
 ## Installation
 
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 ed0e5796e70..1c2c378ea73 100644
--- a/packages/docs/src/pages/en/getting-started/release-notes.md
+++ b/packages/docs/src/pages/en/getting-started/release-notes.md
@@ -16,6 +16,6 @@ The Vuetify team performs releases on a weekly basis.
 
 <PageFeatures />
 
-<DocReleases />
+<VoPromotionsCardVuetify />
 
-<PromotedEntry />
+<DocReleases />
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 8b261843f45..56626b03006 100644
--- a/packages/docs/src/pages/en/getting-started/unit-testing.md
+++ b/packages/docs/src/pages/en/getting-started/unit-testing.md
@@ -15,7 +15,7 @@ Add regression protection by adding unit tests to your Vuetify application
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 ## 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 f2efef7459e..d6b94603e30 100644
--- a/packages/docs/src/pages/en/getting-started/upgrade-guide.md
+++ b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -21,8 +21,6 @@ This page contains a detailed list of breaking changes and the steps required to
   <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>
 :::
 
-<PromotedEntry />
-
 ::: info
 
 Before upgrading, make sure to consult the Official [Vue 3 Migration Guide](https://v3-migration.vuejs.org/)
diff --git a/packages/docs/src/pages/en/getting-started/wireframes.md b/packages/docs/src/pages/en/getting-started/wireframes.md
index 5400663dbaa..09c5fd35c35 100644
--- a/packages/docs/src/pages/en/getting-started/wireframes.md
+++ b/packages/docs/src/pages/en/getting-started/wireframes.md
@@ -15,7 +15,7 @@ The Vuetify **layout system** makes it easy to rapidly scaffold an application's
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 ## Examples
 
diff --git a/packages/docs/src/pages/en/index.md b/packages/docs/src/pages/en/index.md
index e3397693484..50c5d7f92af 100644
--- a/packages/docs/src/pages/en/index.md
+++ b/packages/docs/src/pages/en/index.md
@@ -24,17 +24,21 @@ The continued development and maintenance of Vuetify is made possible by these g
 
 <HomeSponsors />
 
-<br>
+<v-divider style="max-width: 500px;" class="mx-auto my-16" />
 
-<v-divider style="max-width: 500px;" class="mx-auto" />
+## Templates Built With Vuetify
 
-<br>
+Check out these premium templates built using Vuetify.{style="max-width: 568px" .mx-auto .px-4}
+
+<DocPremiumThemesGallery />
+
+<v-divider style="max-width: 500px;" class="mx-auto my-16" />
 
 ## Made With Vuetify
 
 Check out these beautiful apps, plugins, and themes built using Vuetify.{style="max-width: 568px" .mx-auto .px-4}
 
-<DocMadeWithVuetifyGallery class="pa-3" />
+<DocMadeWithVuetifyGallery class="pa-3 mb-4" />
 
 <DocMadeWithVuetifyLink />
 
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 1409e7a974c..3c24fcdcc0c 100644
--- a/packages/docs/src/pages/en/introduction/long-term-support.md
+++ b/packages/docs/src/pages/en/introduction/long-term-support.md
@@ -15,7 +15,7 @@ Vuetify provides long-term support to the last major release for 18 months for c
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 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 b52d348dabe..58a9204bc4b 100644
--- a/packages/docs/src/pages/en/introduction/roadmap.md
+++ b/packages/docs/src/pages/en/introduction/roadmap.md
@@ -16,7 +16,7 @@ Vuetify is always under development. We are constantly working towards improving
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 ## 2024 Component Roadmap
 
@@ -25,19 +25,19 @@ The following is a list of all planned components for the year 2024.
 | Component | Entering Labs | Production Release |
 | - | - | - |
 | [v3.6 (Nebula)](https://github.com/vuetifyjs/vuetify/milestone/72) | | { .bg-surface-light } |
-| v-fab | February 2024 | April 2024 |
-| v-empty-state | February 2024 | April 2024 |
-| v-sparkline | February 2024 | April 2024 |
-| v-speed-dial | February 2024 | April 2024 |
+| [v-fab](/components/floating-action-buttons/) | *️⃣ | April 2024 |
+| [v-empty-state](/components/empty-states/) | *️⃣ | April 2024 |
+| [v-sparkline](/components/sparklines/) | *️⃣ | April 2024 |
+| [v-speed-dial](/components/speed-dials/) | *️⃣ | April 2024 |
 | v-confirm-edit | *️⃣ | April 2024 |
 | [v3.7 (Odyssey)](https://github.com/vuetifyjs/vuetify/milestone/73) | | { .bg-surface-light } |
-| 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 |
+| [v-treeview](/components/treeview/) | *️⃣ | July 2024 |
+| [v-number-input](/components/number-inputs/) | *️⃣  | July 2024 |
+| v-time-picker | *️⃣ | July 2024 |
 | v-date-input | April 2024 | July 2024 |
 | v-file-upload | April 2024 | July 2024 |
 | v-time-input | April 2024 | July 2024 |
+| v-stepper-vertical | ~~March~~ May 2024 | July 2024 |
 | [v3.8 (Andromeda)](https://github.com/vuetifyjs/vuetify/milestone/74) | | { .bg-surface-light } |
 | v-calendar | *️⃣ | Q4 |
 | v-date-time-picker | May 2024 | Q4 |
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 6cf9f9ba795..3efd6c343ca 100644
--- a/packages/docs/src/pages/en/introduction/sponsors-and-backers.md
+++ b/packages/docs/src/pages/en/introduction/sponsors-and-backers.md
@@ -16,7 +16,7 @@ Vuetify is an [MIT licensed](https://github.com/vuetifyjs/vuetify/blob/master/LI
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 ## Preamble
 
diff --git a/packages/docs/src/pages/en/introduction/why-vuetify.md b/packages/docs/src/pages/en/introduction/why-vuetify.md
index 3665bdb157b..048577a7981 100644
--- a/packages/docs/src/pages/en/introduction/why-vuetify.md
+++ b/packages/docs/src/pages/en/introduction/why-vuetify.md
@@ -16,7 +16,7 @@ Learn more about what Vuetify is, how to create an application from scratch, bro
 
 <PageFeatures />
 
-<PromotedEntry />
+<VoPromotionsCardVuetify />
 
 ## What is Vuetify?
 
@@ -27,6 +27,8 @@ Since its initial release in 2014, [Vue.js](https://vuejs.org/) has grown to be
 
 ## Getting started
 
+<VoPromotionsCardHighlight slug="vuemastery-getting-started" class="mb-4" />
+
 The fastest way to try Vuetify is in the browser at [Vuetify Play](https://play.vuetifyjs.com/). For a complete list of installation options please navigate to the [Installation page](/getting-started/installation/).
 
 ## Why Vuetify? { id="why-vuetify" }
diff --git a/packages/docs/src/pages/en/labs/introduction.md b/packages/docs/src/pages/en/labs/introduction.md
index f375816514b..24f3b3d60f3 100644
--- a/packages/docs/src/pages/en/labs/introduction.md
+++ b/packages/docs/src/pages/en/labs/introduction.md
@@ -79,8 +79,10 @@ The following is a list of available and up-and-coming components for use with L
 | [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-number-input](/components/number-input/) | A component for numerical data | [v3.5.10](/getting-started/release-notes/?version=v3.5.10) |
 | [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) |
+| [v-time-picker](/components/time-pickers/) | A time-picker component | [v3.5.12](/getting-started/release-notes/?version=v3.5.12) |
 | [v-treeview](/components/treeview/) | A treeview component | [v3.5.9](/getting-started/release-notes/?version=v3.5.9) |
 
 ::: warning
diff --git a/packages/docs/src/pages/en/styles/border-radius.md b/packages/docs/src/pages/en/styles/border-radius.md
index 2934de5aeeb..dba6c59bde8 100644
--- a/packages/docs/src/pages/en/styles/border-radius.md
+++ b/packages/docs/src/pages/en/styles/border-radius.md
@@ -15,79 +15,149 @@ Use border utilities to quickly style the border-radius of any element.
 
 <PageFeatures />
 
-<PromotedEntry />
+| Class | Properties |
+| - | - |
+| **rounded** | border-radius: 4px; |
+| **rounded-0** | border-radius: 0; |
+| **rounded-sm** | border-radius: 2px; |
+| **rounded-lg** | border-radius: 8px; |
+| **rounded-xl** | border-radius: 24px; |
+| **rounded-pill** | border-radius: 9999px; |
+| **rounded-circle** | border-radius: 50%; |
+| **rounded-shaped** | border-radius: 24px 0 |
+| **rounded-t** | border-top-left-radius: 4px;<br>border-top-right-radius: 4px; |
+| **rounded-t-0** | border-top-left-radius: 0;<br>border-top-right-radius: 0; |
+| **rounded-t-sm** | border-top-left-radius: 2px;<br>border-top-right-radius: 2px; |
+| **rounded-t-lg** | border-top-left-radius: 8px;<br>border-top-right-radius: 8px; |
+| **rounded-t-xl** | border-top-left-radius: 24px;<br>border-top-right-radius: 24px; |
+| **rounded-t-pill** | border-top-left-radius: 9999px;<br>border-top-right-radius: 9999px; |
+| **rounded-t-circle** | border-top-left-radius: 50%;<br>border-top-right-radius: 50%; |
+| **rounded-t-shaped** | border-top-left-radius: 24px; border-top-right-radius: 0; |
+| **rounded-te** | border-top-right-radius: 4px; |
+| **rounded-te-0** | border-top-right-radius: 0; |
+| **rounded-te-sm** | border-top-right-radius: 2px; |
+| **rounded-te-lg** | border-top-right-radius: 8px; |
+| **rounded-te-xl** | border-top-right-radius: 24px; |
+| **rounded-te-pill** | border-top-right-radius: 9999px; |
+| **rounded-te-circle** | border-top-right-radius: 50%; |
+| **rounded-te-shaped** | border-top-right-radius: 24px<br>border-top-left-radius: 0; |
+| **rounded-ts** | border-top-left-radius: 4px; |
+| **rounded-ts-0** | border-top-left-radius: 0; |
+| **rounded-ts-sm** | border-top-left-radius: 2px; |
+| **rounded-ts-lg** | border-top-left-radius: 8px; |
+| **rounded-ts-xl** | border-top-left-radius: 24px; |
+| **rounded-ts-pill** | border-top-left-radius: 9999px; |
+| **rounded-ts-circle** | border-top-left-radius: 50%; |
+| **rounded-ts-shaped** | border-top-left-radius: 24px; border-top-right-radius: 0; |
+| **rounded-e** | border-inline-end-radius: 4px; |
+| **rounded-e-0** | border-inline-end-radius: 0; |
+| **rounded-e-sm** | border-inline-end-radius: 2px; |
+| **rounded-e-lg** | border-inline-end-radius: 8px; |
+| **rounded-e-xl** | border-inline-end-radius: 24px; |
+| **rounded-e-pill** | border-inline-end-radius: 9999px; |
+| **rounded-e-circle** | border-inline-end-radius: 50%; |
+| **rounded-e-shaped** | border-inline-end-radius: 0; border-inline-start-radius: 24px; |
+| **rounded-b** | border-bottom-left-radius: 4px;<br>border-bottom-right-radius: 4px; |
+| **rounded-b-0** | border-bottom-left-radius: 0;<br>border-bottom-right-radius: 0; |
+| **rounded-b-sm** | border-bottom-left-radius: 2px;<br>border-bottom-right-radius: 2px; |
+| **rounded-b-lg** | border-bottom-left-radius: 8px;<br>border-bottom-right-radius: 8px; |
+| **rounded-b-xl** | border-bottom-left-radius: 24px;<br>border-bottom-right-radius: 24px; |
+| **rounded-b-pill** | border-bottom-left-radius: 9999px;<br>border-bottom-right-radius: 9999px; |
+| **rounded-b-circle** | border-bottom-left-radius: 50%;<br>border-bottom-right-radius: 50%; |
+| **rounded-b-shaped** | border-bottom-left-radius: 0; border-bottom-right-radius: 24px; |
+| **rounded-be** | border-bottom-right-radius: 4px; |
+| **rounded-be-0** | border-bottom-right-radius: 0; |
+| **rounded-be-sm** | border-bottom-right-radius: 2px; |
+| **rounded-be-lg** | border-bottom-right-radius: 8px; |
+| **rounded-be-xl** | border-bottom-right-radius: 24px; |
+| **rounded-be-pill** | border-bottom-right-radius: 9999px; |
+| **rounded-be-circle** | border-bottom-right-radius: 50%; |
+| **rounded-be-shaped** | border-bottom-right-radius: 24px; border-bottom-left-radius: 0; |
+| **rounded-bs** | border-inline-start-radius: 4px; |
+| **rounded-bs-0** | border-inline-start-radius: 0; |
+| **rounded-bs-sm** | border-inline-start-radius: 2px; |
+| **rounded-bs-lg** | border-inline-start-radius: 8px; |
+| **rounded-bs-xl** | border-inline-start-radius: 24px; |
+| **rounded-bs-pill** | border-inline-start-radius: 9999px; |
+| **rounded-bs-circle** | border-inline-start-radius: 50%; |
+| **rounded-bs-shaped** | border-inline-start-radius: 24px; border-inline-end-radius: 0; |
+| **rounded-s** | border-inline-start-radius: 4px; |
+| **rounded-s-0** | border-inline-start-radius: 0; |
+| **rounded-s-sm** | border-inline-start-radius: 2px; |
+| **rounded-s-lg** | border-inline-start-radius: 8px; |
+| **rounded-s-xl** | border-inline-start-radius: 24px; |
+| **rounded-s-pill** | border-inline-start-radius: 9999px; |
+| **rounded-s-circle** | border-inline-start-radius: 50%; |
+| **rounded-s-shaped** | border-inline-start-radius: 24px; border-inline-end-radius: 0; { style="max-height: 420px;" fixed-header } |
+
+<VoPromotionsCardVuetify />
 
 ## Usage
 
-<ExamplesExample file="border-radius/usage" />
+The `border-radius` utilities allow you to quickly style the border-radius of any element.
 
-## Caveats
+### Rounded corners
 
-::: info
-  The values **sm**, **md**, **lg**, and **xl** correlate to the border radius *size* and are not affected by breakpoints.
-:::
+Use the **rounded**, **rounded-0**, **rounded-sm**, **rounded-lg**, and **rounded-xl** classes to set the border-radius of an element.
 
-## SASS Variables
+<ExamplesExample file="border-radius/misc-rounded-corners" />
 
-Configure or disable the border radius helper classes. Requires the use of the [vue-cli-plugin-vuetify](https://github.com/vuetifyjs/vue-cli-plugins/tree/master/packages/vue-cli-plugin-vuetify) library and a configured `variables.s(c|a)ss` file. Additional information on how to configure variables is located on the [SASS Variables](/features/sass-variables) documentation page.
+### Pill and circle
 
-Rounded sizes are based off of the `$border-radius-root` variable which has a default value of **0.25rem**.
+Use the **rounded-pill** and **rounded-circle** classes to create pill and circle shapes.
 
-```scss
-$rounded: (
-  0: 0,
-  'sm': $border-radius-root / 2,
-  null: $border-radius-root,
-  'lg': $border-radius-root * 2,
-  'xl': $border-radius-root * 6,
-  'pill': 9999px,
-  'circle': 50%
-);
-```
+<ExamplesExample file="border-radius/misc-pill-and-circle" />
 
-### Overwriting Radiuses
+### Rounding by side
 
-You can change or add *border-radius* sizes by adding a list named `$rounded` in your project's `variables` file.
+Use the **rounded-t-\***, **rounded-b-\***, **rounded-s-\***, and **rounded-e-\*** classes to set the border-radius of an element on a specific side.
 
-```scss
-$rounded: (
-  'sm': $border-radius-root / 3,
-  'lg': $border-radius-root * 2
-);
-```
+<ExamplesExample file="border-radius/misc-rounding-by-side" />
 
-## Examples
+### Rounding by corner
 
-### Misc
+Use the **rounded-te-\***, **rounded-ts-\***, **rounded-be-\***, and **rounded-bs-\*** classes to set the border-radius of an element on a specific corner.
 
-::: info
-  Logical values `start` and `end` are only used in the inline direction (left and right) to avoid confusion
-:::
+<ExamplesExample file="border-radius/misc-rounding-by-corner" />
 
-#### Pill and circle
+### No rounding
 
-You can create pills with the `.rounded-pill` class and circles with the `.rounded-circle` class.
+Use the **rounded-0** class to remove the border-radius from an element.
 
-<ExamplesExample file="border-radius/misc-pill-and-circle" />
+<ExamplesExample file="border-radius/misc-removing-border-radius" />
 
-#### Rounding by side
+### Components
 
-Border radius is configurable on a per-side basis using the infix classes `-t`, `-e`, `-b`, and `-s` (corresponding respectively to the sides **top**, **end**, **bottom** and **start**).
+::: info
 
-E.g. `.rounded-b-xl` and `.rounded-t`.
+When using the **rounded** property on components, omit the `rounded-` prefix. For example, use `rounded="sm"` instead of `rounded-sm`.
 
-<ExamplesExample file="border-radius/misc-rounding-by-side" />
+:::
 
-#### Rounding by corner
+Setting the **rounded** property applies a component specific border-radius class, such as `v-sheet--rounded`. This is to ensure that basic rounded usage persists even if the utility classes are disabled.
 
-Border radius is configurable on a per-corner basis using the infix classes, `-ts`, `-te`, `-be`, `-bs` (corresponding respectively to the corners **top-start**, **top-end**, **bottom-end**, **bottom-start**)
+<ExamplesExample file="border-radius/misc-components" />
 
-E.g. `.rounded-be-xl` and `.rounded-te`.
+## SASS variables
 
-<ExamplesExample file="border-radius/misc-rounding-by-corner" />
+You can also use the following SASS variables to customize the border color and width:
 
-#### Removing Border Radius
+```scss
+$rounded: (
+  0: 0,
+  'sm': $border-radius-root / 2,
+  null: $border-radius-root,
+  'lg': $border-radius-root * 2,
+  'xl': $border-radius-root * 6,
+  'pill': 9999px,
+  'circle': 50%
+);
+```
 
-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`.
+Disable border-radius class generation by setting the $rounded variable to **false**.
 
-<ExamplesExample file="border-radius/misc-removing-border-radius" />
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $rounded: false
+);
+```
diff --git a/packages/docs/src/pages/en/styles/borders.md b/packages/docs/src/pages/en/styles/borders.md
new file mode 100644
index 00000000000..a1d7d8b3826
--- /dev/null
+++ b/packages/docs/src/pages/en/styles/borders.md
@@ -0,0 +1,150 @@
+---
+emphasized: true
+meta:
+  title: Borders
+  description: Use border utilities to quickly style the border of any element.
+  keywords: border classes, border utilities, vuetify border helper classes
+related:
+  - /styles/border-radius/
+  - /styles/display/
+  - /styles/content/
+features:
+  report: true
+---
+
+# Borders
+
+Utilities for controlling the border of elements in your application.
+
+<PageFeatures />
+
+| Class | Properties |
+| - | - |
+| **border** | border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)); |
+| **border-thin** | border-width: thin; |
+| **border-sm** | border-width: 1px; |
+| **border-md** | border-width: 2px; |
+| **border-lg** | border-width: 4px; |
+| **border-xl** | border-width: 8px; |
+| **border-0** | border-width: 0; |
+| **border-t** | border-top-width: thin; |
+| **border-t-0** | border-top-width: 0; |
+| **border-t-thin** | border-top-width: thin; |
+| **border-t-sm** | border-top-width: 1px; |
+| **border-t-md** | border-top-width: 2px; |
+| **border-t-lg** | border-top-width: 4px; |
+| **border-t-xl** | border-top-width: 8px; |
+| **border-e** | border-inline-end-width: thin; |
+| **border-e-0** | border-inline-end-width: 0; |
+| **border-e-thin** | border-inline-end-width: thin; |
+| **border-e-sm** | border-inline-end-width: 1px; |
+| **border-e-md** | border-inline-end-width: 2px; |
+| **border-e-lg** | border-inline-end-width: 4px; |
+| **border-e-xl** | border-inline-end-width: 8px; |
+| **border-b** | border-bottom-width: thin; |
+| **border-b-0** | border-bottom-width: 0; |
+| **border-b-thin** | border-bottom-width: thin; |
+| **border-b-sm** | border-bottom-width: 1px; |
+| **border-b-md** | border-bottom-width: 2px; |
+| **border-b-lg** | border-bottom-width: 4px; |
+| **border-b-xl** | border-bottom-width: 8px; |
+| **border-s** | border-inline-start-width: thin; |
+| **border-s-0** | border-inline-start-width: 0; |
+| **border-s-thin** | border-inline-start-width: thin; |
+| **border-s-sm** | border-inline-start-width: 1px; |
+| **border-s-md** | border-inline-start-width: 2px; |
+| **border-s-lg** | border-inline-start-width: 4px; |
+| **border-s-xl** | border-inline-start-width: 8px; |
+| **border-opacity-0** | --v-border-opacity: 0; |
+| **border-opacity** | --v-border-opacity: .12; |
+| **border-opacity-25** | --v-border-opacity: .25; |
+| **border-opacity-50** | --v-border-opacity: .5; |
+| **border-opacity-75** | --v-border-opacity: .75; |
+| **border-opacity-100** | --v-border-opacity: 1; |
+| **border-dashed** | border-style: dashed; |
+| **border-dotted** | border-style: dotted; |
+| **border-double** | border-style: double; |
+| **border-solid** | border-style: solid; { style="max-height: 420px;" fixed-header } |
+
+<PromotedEntry />
+
+## Usage
+
+The `border` utilities allow you to quickly style the border of any element.
+
+### All sides
+
+Use the **border**, **border-0**, **border-sm**, **border-md**, **border-lg**, and **border-xl** classes to set the border width of an element.
+
+<ExamplesExample file="border/all" />
+
+### Individual sides
+
+Use the **border-\***, **border-\*-0**, **border-\*-sm**, **border-\*-md**, **border-\*-lg**, and **border-\*-xl** classes to set the border width of an element on a specific side.
+
+<ExamplesExample file="border/sides" />
+
+### Border styles
+
+Use the **border-dashed**, **border-dotted**, **border-double**, and **border-solid** classes to set the border style of an element.
+
+<ExamplesExample file="border/styles" />
+
+### Theme colors
+
+Components that support the **border** property can take advantage of all border utility classes. This includes colors generated by your theme.
+
+<ExamplesExample file="border/colors" />
+
+| Class | Properties |
+| - | - |
+| **border-primary** | --v-border-color: var(--v-theme-primary); |
+| **border-secondary** | --v-border-color: var(--v-theme-secondary); |
+| **border-accent** | --v-border-color: var(--v-theme-accent); |
+| **border-error** | --v-border-color: var(--v-theme-error); |
+| **border-info** | --v-border-color: var(--v-theme-info); |
+| **border-success** | --v-border-color: var(--v-theme-success); |
+| **border-warning** | --v-border-color: var(--v-theme-warning); |
+| **border-surface** | --v-border-color: var(--v-theme-surface); |
+| **border-background** | --v-border-color: var(--v-theme-background); |
+| **border-surface-light** | --v-border-color: var(--v-theme-surface-light); |
+| **border-surface-variant** | --v-border-color: var(--v-theme-surface-variant); |
+| **border-surface-bright** | --v-border-color: var(--v-theme-surface-bright); { style="max-height: 420px;" fixed-header } |
+
+### Components
+
+::: info
+
+When using the **border** property on components, omit the `border-` prefix. For example, use `border="sm"` instead of `border="border-sm"`.
+
+:::
+
+Setting the **border** property to true applies a component specific border class, such as `v-card--border`. This is to ensure that basic border usage persists even if the utility classes are disabled.
+
+<ExamplesExample file="border/card" />
+
+### SASS variables
+
+You can also use the following SASS variables to customize the border color and width:
+
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $borders: (
+    0: 0,
+    null: thin,
+    thin: thin,
+    sm: 1px,
+    md: 2px,
+    lg: 4px,
+    xl: 8px
+  )
+);
+```
+
+Disable border class generation by setting the $borders variable to **false**.
+
+```sass { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $borders: false
+);
+```
diff --git a/packages/docs/src/plugins/global-components.ts b/packages/docs/src/plugins/global-components.ts
index 1f1a9853c03..0f40caa98f4 100644
--- a/packages/docs/src/plugins/global-components.ts
+++ b/packages/docs/src/plugins/global-components.ts
@@ -22,6 +22,7 @@ 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 DocPremiumThemesGallery from '@/components/doc/PremiumThemesGallery.vue'
 import DocReleases from '@/components/doc/Releases.vue'
 import DocThemeVendor from '@/components/doc/ThemeVendor.vue'
 import ExamplesExample from '@/components/examples/Example.vue'
@@ -73,6 +74,7 @@ export function installGlobalComponents (app: App) {
     .component('DocMadeWithVueAttribution', DocMadeWithVueAttribution)
     .component('DocMadeWithVuetifyGallery', DocMadeWithVuetifyGallery)
     .component('DocMadeWithVuetifyLink', DocMadeWithVuetifyLink)
+    .component('DocPremiumThemesGallery', DocPremiumThemesGallery)
     .component('DocReleases', DocReleases)
     .component('DocThemeVendor', DocThemeVendor)
     .component('ExamplesExample', ExamplesExample)
diff --git a/packages/docs/src/service-worker.js b/packages/docs/src/service-worker.js
index 87ccd5dcbe9..4f2c7f5761e 100644
--- a/packages/docs/src/service-worker.js
+++ b/packages/docs/src/service-worker.js
@@ -53,6 +53,8 @@ self.addEventListener('activate', event => {
 self.addEventListener('fetch', event => {
   const url = new URL(event.request.url, location.href)
 
+  if (!['http:', 'https:'].includes(url.protocol)) return
+
   if (event.request.method !== 'GET') return
 
   if (
@@ -102,24 +104,31 @@ function getCacheKeyForUrl (url) {
 
 async function networkFirst (request) {
   const cache = await openCache('runtime')
+  const fromNetwork = fetch(request).then(response => ensureCacheableResponse(response)).catch(() => null)
+  const race = Promise.race([
+    fromNetwork,
+    new Promise(resolve => setTimeout(() => resolve('timeout'), 3000)),
+  ])
 
-  let response
   try {
-    response = ensureCacheableResponse(await fetch(request))
+    const response = await race
+    if (response === 'timeout' || !response) {
+      const cached = await caches.match(request)
+      if (cached) return cached
+      throw new Error('Network timeout and no cache available')
+    }
+    const is400 = response?.status >= 400 && response?.status < 500
+    if (response?.status === 200) {
+      cache.put(request, response.clone())
+    } else if (!is400) {
+      await cache.delete(request)
+    }
+    return response
   } catch (e) {
     console.warn('[SW] Failed to fetch', e)
-  }
-  const is400 = response?.status >= 400 && response?.status < 500
-  if (response?.status === 200) {
-    cache.put(request, response.clone())
-  } else if (!is400) {
     const cached = await caches.match(request)
-    if (cached) return cached
-  } else {
-    await cache.delete(request)
+    return cached || Response.error()
   }
-
-  return response
 }
 
 async function getFallbackDocument () {
@@ -199,7 +208,7 @@ function createCacheKey (entry) {
 
   return {
     cacheKey: cacheKeyUrl.href,
-    url: new URL(url, location.href).href,
+    url: cacheKeyUrl.href,
   }
 }
 
diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
index d7508d54a0c..2205f6b7b3f 100644
--- a/packages/docs/vite.config.mts
+++ b/packages/docs/vite.config.mts
@@ -79,7 +79,15 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
         ],
         imports: [
           {
-            '@vuetify/one': ['createOne', 'useAuthStore', 'useHttpStore', 'useOneStore', 'useUserStore', 'useSettingsStore'],
+            '@vuetify/one': [
+              'createOne',
+              'useAuthStore',
+              'useHttpStore',
+              'useOneStore',
+              'useUserStore',
+              'useSettingsStore',
+              'useProductsStore',
+            ],
             'lodash-es': ['camelCase', 'kebabCase', 'upperFirst'],
             pinia: ['defineStore', 'storeToRefs'],
             vue: [
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 2ef697b6901..3bc8743d00f 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.9",
+  "version": "3.5.14",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
@@ -173,10 +173,10 @@
   },
   "peerDependencies": {
     "typescript": ">=4.7",
-    "vite-plugin-vuetify": ">=1.0.0-alpha.12",
+    "vite-plugin-vuetify": ">=1.0.0",
     "vue": "^3.3.0",
     "vue-i18n": "^9.0.0",
-    "webpack-plugin-vuetify": ">=2.0.0-alpha.11"
+    "webpack-plugin-vuetify": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index afdf33fc1d2..e676a30a39e 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -552,6 +552,14 @@ export const VAutocomplete = genericComponent<new <
 
                   const slotProps = {
                     'onClick:close': onChipClose,
+                    onKeydown (e: KeyboardEvent) {
+                      if (e.key !== 'Enter' && e.key !== ' ') return
+
+                      e.preventDefault()
+                      e.stopPropagation()
+
+                      onChipClose(e)
+                    },
                     onMousedown (e: MouseEvent) {
                       e.preventDefault()
                       e.stopPropagation()
diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass
index 121f45aadc2..88a7352ce45 100644
--- a/packages/vuetify/src/components/VAvatar/VAvatar.sass
+++ b/packages/vuetify/src/components/VAvatar/VAvatar.sass
@@ -24,6 +24,12 @@
   &--rounded
     @include tools.rounded($avatar-rounded-border-radius)
 
+  &--start
+    margin-inline-end: $avatar-margin-start
+
+  &--end  
+    margin-inline-start: $avatar-margin-end
+
   .v-img
     height: 100%
     width: 100%
diff --git a/packages/vuetify/src/components/VAvatar/_variables.scss b/packages/vuetify/src/components/VAvatar/_variables.scss
index 661434fcf92..e3c5924d197 100644
--- a/packages/vuetify/src/components/VAvatar/_variables.scss
+++ b/packages/vuetify/src/components/VAvatar/_variables.scss
@@ -14,6 +14,8 @@ $avatar-plain-opacity: .62 !default;
 $avatar-rounded-border-radius: variables.$border-radius-root !default;
 $avatar-vertical-align: middle !default;
 $avatar-width: 40px !default;
+$avatar-margin-end: map.get(variables.$grid-gutters, 'md') !default;
+$avatar-margin-start: map.get(variables.$grid-gutters, 'md') !default;
 
 $avatar-sizes: () !default;
 $avatar-sizes: functions.map-deep-merge(
diff --git a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
index f0cdedd9b69..0f2f228f1af 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
@@ -109,6 +109,11 @@ describe('VBreadcrumbs', () => {
     cy.then(() => {
       expect(router.currentRoute.value.path).to.equal('/about')
     })
+
+    // Return back to root to not break succeeding tests that don't have /about path.
+    cy.get('.v-breadcrumbs').then(() => {
+      router.push('/')
+    })
   })
 
   it('should apply active color', () => {
diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
index 9ebb439a418..933df33c792 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.tsx
+++ b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -199,8 +199,10 @@ export const VBtn = genericComponent<VBtnSlots>()({
             sizeStyles.value,
             props.style,
           ]}
+          aria-busy={ props.loading ? true : undefined }
           disabled={ isDisabled.value || undefined }
           href={ link.href.value }
+          tabindex={ props.loading ? -1 : undefined }
           v-ripple={[
             !isDisabled.value && props.ripple,
             null,
diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass
index 41733a71168..2c663a4d9d5 100644
--- a/packages/vuetify/src/components/VChip/VChip.sass
+++ b/packages/vuetify/src/components/VChip/VChip.sass
@@ -14,6 +14,9 @@
   white-space: $chip-white-space
   vertical-align: middle
 
+  .v-icon
+    --v-icon-size-multiplier: #{$chip-icon-size-multiplier}
+
   @at-root
     @include chip-sizes()
     @include chip-density('height', $chip-density)
diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
index f35621f0ec3..958332a03f0 100644
--- a/packages/vuetify/src/components/VChip/VChip.tsx
+++ b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -141,6 +141,7 @@ export const VChip = genericComponent<VChipSlots>()({
     const closeProps = computed(() => ({
       'aria-label': t(props.closeLabel),
       onClick (e: MouseEvent) {
+        e.preventDefault()
         e.stopPropagation()
 
         isActive.value = false
diff --git a/packages/vuetify/src/components/VChip/_variables.scss b/packages/vuetify/src/components/VChip/_variables.scss
index c667806bd42..950bcc5efee 100644
--- a/packages/vuetify/src/components/VChip/_variables.scss
+++ b/packages/vuetify/src/components/VChip/_variables.scss
@@ -12,13 +12,13 @@ $chip-border-thin-width: thin !default;
 $chip-border-width: 0 !default;
 $chip-close-size: 18px !default;
 $chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
-$chip-density: ("default": 0, "comfortable": -2, "compact": -3) !default;
+$chip-density: ("default": 0, "comfortable": -1, "compact": -2) !default;
 $chip-disabled-opacity: 0.3 !default;
 $chip-elevation: 1 !default;
 $chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default;
 $chip-font-weight: 400 !default;
 $chip-height: 32px !default;
-$chip-icon-font-size: 1.25rem !default;
+$chip-icon-size-multiplier: calc(18/21) !default;
 $chip-label-border-radius: settings.$border-radius-root !default;
 $chip-max-width: 100% !default;
 $chip-overflow: hidden !default;
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 0448c272f03..ac883135119 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -597,6 +597,14 @@ export const VCombobox = genericComponent<new <
 
                   const slotProps = {
                     'onClick:close': onChipClose,
+                    onKeydown (e: KeyboardEvent) {
+                      if (e.key !== 'Enter' && e.key !== ' ') return
+
+                      e.preventDefault()
+                      e.stopPropagation()
+
+                      onChipClose(e)
+                    },
                     onMousedown (e: MouseEvent) {
                       e.preventDefault()
                       e.stopPropagation()
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
index 5cdec91857a..752b48c8cab 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -3,6 +3,7 @@ import { makeDataTableProps } from './VDataTable'
 import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter'
 import { VDataTableHeaders } from './VDataTableHeaders'
 import { VDataTableRows } from './VDataTableRows'
+import { VDivider } from '@/components/VDivider'
 import { VTable } from '@/components/VTable'
 
 // Composables
@@ -189,12 +190,16 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
               </>
             ),
             bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
-              <VDataTableFooter
-                { ...dataTableFooterProps }
-                v-slots={{
-                  prepend: slots['footer.prepend'],
-                }}
-              />
+              <>
+                <VDivider />
+
+                <VDataTableFooter
+                  { ...dataTableFooterProps }
+                  v-slots={{
+                    prepend: slots['footer.prepend'],
+                  }}
+                />
+              </>
             ),
           }}
         </VTable>
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
index 78d7eae311e..853119afa04 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -119,17 +119,22 @@ export const VDatePicker = genericComponent<new <
 
     const isReversing = shallowRef(false)
     const header = computed(() => {
-      return props.multiple && model.value.length > 1
-        ? t('$vuetify.datePicker.itemsSelected', model.value.length)
-        : model.value[0] && adapter.isValid(model.value[0])
-          ? adapter.format(model.value[0], 'normalDateWithWeekday')
-          : t(props.header)
+      if (props.multiple && model.value.length > 1) {
+        return t('$vuetify.datePicker.itemsSelected', model.value.length)
+      }
+
+      return (model.value[0] && adapter.isValid(model.value[0]))
+        ? adapter.format(adapter.date(model.value[0]), 'normalDateWithWeekday')
+        : t(props.header)
     })
     const text = computed(() => {
-      return adapter.format(
-        adapter.date(new Date(year.value, month.value, 1)),
-        'monthAndYear',
-      )
+      let date = adapter.date()
+
+      date = adapter.setYear(date, year.value)
+      date = adapter.setMonth(date, month.value)
+      date = adapter.setDate(date, 1)
+
+      return adapter.format(date, 'monthAndYear')
     })
     // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
     const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`)
diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass
index 19fedd7b019..3f2e4f5df3a 100644
--- a/packages/vuetify/src/components/VDivider/VDivider.sass
+++ b/packages/vuetify/src/components/VDivider/VDivider.sass
@@ -15,7 +15,7 @@
     align-self: stretch
     border-width: $divider-vertical-border-width
     display: inline-flex
-    height: inherit
+    height: 100%
     margin-left: $divider-vertical-margin-left
     max-height: 100%
     max-width: 0px
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
index c1895a9f683..0318cb43c35 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
@@ -50,11 +50,11 @@
       border-top-right-radius: 0 !important
 
   &--variant-accordion
-    > :first-child
+    > :first-child:not(:last-child)
       border-bottom-left-radius: 0 !important
       border-bottom-right-radius: 0 !important
 
-    > :last-child
+    > :last-child:not(:first-child)
       border-top-left-radius: 0 !important
       border-top-right-radius: 0 !important
 
diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
index b5800fe10c8..668f5708550 100644
--- a/packages/vuetify/src/components/VField/VField.sass
+++ b/packages/vuetify/src/components/VField/VField.sass
@@ -453,6 +453,8 @@
 
   .v-field--variant-outlined &
     top: calc(100% - 3px)
+    width: calc(100% - #{$field-border-width} * 2)
+    left: $field-border-width
 
 /* endregion */
 /* region OVERLAY */
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 9a64ada4522..b3d658c127a 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -4,6 +4,7 @@ import './VField.sass'
 // Components
 import { VFieldLabel } from './VFieldLabel'
 import { VExpandXTransition } from '@/components/transitions'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { useInputIcon } from '@/components/VInput/InputIcon'
 
 // Composables
@@ -96,7 +97,7 @@ export const makeVFieldProps = propsFactory({
 }, 'VField')
 
 export type VFieldSlots = {
-  clear: never
+  clear: DefaultInputSlot & { props: Record<string, any> }
   'prepend-inner': DefaultInputSlot
   'append-inner': DefaultInputSlot
   label: DefaultInputSlot & { label: string | undefined, props: Record<string, any> }
@@ -210,9 +211,18 @@ export const VField = genericComponent<new <T>(
       }
     }
 
+    function onKeydownClear (e: KeyboardEvent) {
+      if (e.key !== 'Enter' && e.key !== ' ') return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      props['onClick:clear']?.(new MouseEvent('click'))
+    }
+
     useRender(() => {
       const isOutlined = props.variant === 'outlined'
-      const hasPrepend = (slots['prepend-inner'] || props.prependInnerIcon)
+      const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon)
       const hasClear = !!(props.clearable || slots.clear)
       const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear)
       const label = () => (
@@ -318,11 +328,33 @@ export const VField = genericComponent<new <T>(
                   e.preventDefault()
                   e.stopPropagation()
                 }}
+              >
+              <VDefaultsProvider
+                defaults={{
+                  VIcon: {
+                    icon: props.clearIcon,
+                  },
+                }}
               >
                 { slots.clear
-                  ? slots.clear()
-                  : <InputIcon name="clear" />
-                }
+                  ? slots.clear({
+                    ...slotProps.value,
+                    props: {
+                      onKeydown: onKeydownClear,
+                      onFocus: focus,
+                      onBlur: blur,
+                      onClick: props['onClick:clear'],
+                    },
+                  })
+                  : (
+                    <InputIcon
+                      name="clear"
+                      onKeydown={ onKeydownClear }
+                      onFocus={ focus }
+                      onBlur={ blur }
+                    />
+                  )}
+                </VDefaultsProvider>
               </div>
             </VExpandXTransition>
           )}
diff --git a/packages/vuetify/src/components/VField/_variables.scss b/packages/vuetify/src/components/VField/_variables.scss
index 9d8581579e6..f5ca24998fc 100644
--- a/packages/vuetify/src/components/VField/_variables.scss
+++ b/packages/vuetify/src/components/VField/_variables.scss
@@ -4,7 +4,7 @@
 
 // INPUT
 $field-border-radius: settings.$border-radius-root !default;
-$field-rounded-border-radius: map-get(settings.$rounded, 'pill') !default;
+$field-rounded-border-radius: map-get(settings.$rounded, 'xl') !default;
 $field-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $field-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
 $field-error-color: rgb(var(--v-theme-error)) !default;
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
index 9ee2fa62615..6bdb8aa19cb 100644
--- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx
+++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -66,7 +66,7 @@ export const makeVFileInputProps = propsFactory({
   ...makeVInputProps({ prependIcon: '$file' }),
 
   modelValue: {
-    type: Array as PropType<File[]>,
+    type: [Array, Object] as PropType<File[] | File>,
     default: () => ([]),
     validator: (val: any) => {
       return wrapInArray(val).every(v => v != null && typeof v === 'object')
@@ -92,7 +92,13 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
 
   setup (props, { attrs, emit, slots }) {
     const { t } = useLocale()
-    const model = useProxiedModel(props, 'modelValue')
+    const model = useProxiedModel(
+      props,
+      'modelValue',
+      props.modelValue,
+      val => wrapInArray(val),
+      val => (props.multiple || Array.isArray(props.modelValue)) ? val : val[0],
+    )
     const { isFocused, focus, blur } = useFocus(props)
     const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)
     const totalBytes = computed(() => (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0))
diff --git a/packages/vuetify/src/components/VIcon/VIcon.sass b/packages/vuetify/src/components/VIcon/VIcon.sass
index 2da9b737620..1585cf46fcf 100644
--- a/packages/vuetify/src/components/VIcon/VIcon.sass
+++ b/packages/vuetify/src/components/VIcon/VIcon.sass
@@ -22,6 +22,10 @@
   &--clickable
     cursor: pointer
 
+  &--disabled
+    pointer-events: none
+    opacity: $icon-disabled-opacity
+
   @each $name in settings.$sizes
     &--size-#{$name}
       font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)})
diff --git a/packages/vuetify/src/components/VIcon/VIcon.tsx b/packages/vuetify/src/components/VIcon/VIcon.tsx
index bd9a372eff3..4167c703d2a 100644
--- a/packages/vuetify/src/components/VIcon/VIcon.tsx
+++ b/packages/vuetify/src/components/VIcon/VIcon.tsx
@@ -15,6 +15,7 @@ import { convertToUnit, flattenFragments, genericComponent, propsFactory, useRen
 
 export const makeVIconProps = propsFactory({
   color: String,
+  disabled: Boolean,
   start: Boolean,
   end: Boolean,
   icon: IconValue,
@@ -45,6 +46,7 @@ export const VIcon = genericComponent()({
           node.type === Text && node.children && typeof node.children === 'string'
         )[0]?.children as string
       }
+      const hasClick = !!(attrs.onClick || attrs.onClickOnce)
 
       return (
         <iconData.value.component
@@ -57,7 +59,8 @@ export const VIcon = genericComponent()({
             sizeClasses.value,
             textColorClasses.value,
             {
-              'v-icon--clickable': !!attrs.onClick,
+              'v-icon--clickable': hasClick,
+              'v-icon--disabled': props.disabled,
               'v-icon--start': props.start,
               'v-icon--end': props.end,
             },
@@ -72,8 +75,9 @@ export const VIcon = genericComponent()({
             textColorStyles.value,
             props.style,
           ]}
-          role={ attrs.onClick ? 'button' : undefined }
-          aria-hidden={ !attrs.onClick }
+          role={ hasClick ? 'button' : undefined }
+          aria-hidden={ !hasClick }
+          tabindex={ hasClick ? props.disabled ? -1 : 0 : undefined }
         >
           { slotValue }
         </iconData.value.component>
diff --git a/packages/vuetify/src/components/VIcon/_variables.scss b/packages/vuetify/src/components/VIcon/_variables.scss
index b376aa18e54..8d21b4f5843 100644
--- a/packages/vuetify/src/components/VIcon/_variables.scss
+++ b/packages/vuetify/src/components/VIcon/_variables.scss
@@ -3,6 +3,7 @@
 @use '../../styles/tools';
 
 // VIcon
+$icon-disabled-opacity: 0.38 !default;
 $icon-left-margin-left: map.get(settings.$grid-gutters, 'md') !default;
 $icon-letter-spacing: normal !default;
 $icon-line-height: 1 !default;
diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
index 3d4ad61df52..416befa551e 100644
--- a/packages/vuetify/src/components/VList/VListItem.sass
+++ b/packages/vuetify/src/components/VList/VListItem.sass
@@ -47,6 +47,10 @@
       > .v-icon
         opacity: #{$list-item-icon-active-opacity}
 
+    &:not(.v-list-item--link)
+      .v-list-item__overlay
+        opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))
+
   &--rounded
     @include tools.rounded($list-item-rounded-border-radius)
 
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index 54cf2ab1fc5..a273e4fa568 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -178,9 +178,9 @@ export const VListItem = genericComponent<VListItemSlots>()({
 
       link.navigate?.(e)
 
-      if (root.activatable) {
+      if (root.activatable.value) {
         activate(!isActivated.value, e)
-      } else if (root.selectable) {
+      } else if (root.selectable.value) {
         select(!isSelected.value, e)
       } else if (props.value != null) {
         select(!isSelected.value, e)
diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
index 28f5ef00933..f1b59a088df 100644
--- a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
+++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
@@ -85,7 +85,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
       props,
       'modelValue',
       '',
-      val => String(val).split(''),
+      val => val == null ? [] : String(val).split(''),
       val => val.join('')
     )
     const { t } = useLocale()
@@ -168,7 +168,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
 
       const clipboardText = e?.clipboardData?.getData('Text') ?? ''
 
-      if (!isValidNumber(clipboardText)) return
+      if (isValidNumber(clipboardText)) return
 
       model.value = clipboardText.split('')
 
@@ -192,7 +192,7 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
     }
 
     function isValidNumber (value: string) {
-      return props.type === 'number' && !isNaN(Number(value))
+      return props.type === 'number' && /[^0-9]/g.test(value)
     }
 
     provideDefaults({
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index 5acfa5dbf9f..dd257f4aadb 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -162,6 +162,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
     })
 
     const root = ref<HTMLElement>()
+    const scrimEl = ref<HTMLElement>()
     const contentEl = ref<HTMLElement>()
     const { contentStyles, updateLocation } = useLocationStrategies(props, {
       isRtl,
@@ -184,8 +185,11 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       else animateClick()
     }
 
-    function closeConditional () {
-      return isActive.value && globalTop.value
+    function closeConditional (e: Event) {
+      return isActive.value && globalTop.value && (
+        // If using scrim, only close if clicking on it rather than anything opened on top
+        !props.scrim || e.target === scrimEl.value
+      )
     }
 
     IN_BROWSER && watch(isActive, val => {
@@ -297,6 +301,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
               <Scrim
                 color={ scrimColor }
                 modelValue={ isActive.value && !!props.scrim }
+                ref={ scrimEl }
                 { ...scrimEvents.value }
               />
               <MaybeTransition
@@ -332,6 +337,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
 
     return {
       activatorEl,
+      scrimEl,
       target,
       animateClick,
       contentEl,
diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass
index b9e2cfc7b33..50d30b774c6 100644
--- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass
+++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass
@@ -57,7 +57,6 @@
     right: auto
     top: 0
     width: auto
-    will-change: left, right
 
   .long
     animation-name: indeterminate-ltr
diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
index dc753cdf92e..a3e4e0a195d 100644
--- a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
+++ b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
@@ -86,6 +86,7 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
       onSliderTouchstart,
       position,
       trackContainerRef,
+      readonly,
     } = useSlider({
       props,
       steps,
@@ -167,8 +168,8 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
             default: ({ id, messagesId }) => (
               <div
                 class="v-slider__container"
-                onMousedown={ onSliderMousedown }
-                onTouchstartPassive={ onSliderTouchstart }
+                onMousedown={ !readonly.value ? onSliderMousedown : undefined }
+                onTouchstartPassive={ !readonly.value ? onSliderTouchstart : undefined }
               >
                 <input
                   id={ `${id.value}_start` }
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 44814fdde29..8f10f8ea1b4 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -463,6 +463,14 @@ export const VSelect = genericComponent<new <
 
                   const slotProps = {
                     'onClick:close': onChipClose,
+                    onKeydown (e: KeyboardEvent) {
+                      if (e.key !== 'Enter' && e.key !== ' ') return
+
+                      e.preventDefault()
+                      e.stopPropagation()
+
+                      onChipClose(e)
+                    },
                     onMousedown (e: MouseEvent) {
                       e.preventDefault()
                       e.stopPropagation()
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index 498723724f8..ab11c870b28 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -231,6 +231,7 @@ export const VSelectionControl = genericComponent<new <T>(
           onFocus={ onFocus }
           onInput={ onInput }
           aria-disabled={ !!props.disabled }
+          aria-label={ props.label }
           type={ props.type }
           value={ trueValue.value }
           name={ props.name }
diff --git a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
index 803f6254cce..5617035a128 100644
--- a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
+++ b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
@@ -15,6 +15,7 @@ import { deepEqual, genericComponent, getUid, propsFactory, useRender } from '@/
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
+import type { RippleDirectiveBinding } from '@/directives/ripple'
 import type { GenericProps } from '@/util'
 
 export interface VSelectionGroupContext {
@@ -38,7 +39,7 @@ export const makeSelectionControlGroupProps = propsFactory({
   falseIcon: IconValue,
   trueIcon: IconValue,
   ripple: {
-    type: Boolean,
+    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,
     default: true,
   },
   multiple: {
diff --git a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
index b87daffb377..021409e173e 100644
--- a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
@@ -204,8 +204,10 @@ describe('VSlideGroup', () => {
     cy.get('.v-card').eq(7).should('exist').should('be.visible').should('have.class', 'bg-primary')
   })
 
-  it('should support touch scroll', () => {
-    cy.mount(() => (
+  // TODO: Fix this in CI
+  it.skip('should support touch scroll', () => {
+    cy.viewport(1280, 768)
+      .mount(() => (
       <Application>
         <CenteredGrid width="400px">
           <VSlideGroup selectedClass="bg-primary">
@@ -217,7 +219,7 @@ describe('VSlideGroup', () => {
           </VSlideGroup>
         </CenteredGrid>
       </Application>
-    ))
+      ))
 
     cy.get('.v-slide-group__content').should('exist').swipe([450, 50], [50, 50])
 
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass
index 701b2271c57..8ed2ba3bfc7 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.sass
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass
@@ -120,3 +120,10 @@
   &.v-switch--inset
     .v-selection-control__wrapper
       width: auto
+
+  &.v-input--vertical
+    .v-label
+      min-width: max-content
+
+    .v-selection-control__wrapper
+      transform: $switch-thumb-vertical-transform
diff --git a/packages/vuetify/src/components/VSwitch/_variables.scss b/packages/vuetify/src/components/VSwitch/_variables.scss
index 0c7e9c24ff4..1eb8e10e127 100644
--- a/packages/vuetify/src/components/VSwitch/_variables.scss
+++ b/packages/vuetify/src/components/VSwitch/_variables.scss
@@ -27,6 +27,7 @@ $switch-thumb-width: 20px !default;
 $switch-thumb-offset: 2px !default;
 $switch-thumb-radius: 50% !default;
 $switch-thumb-transition: .15s .05s transform settings.$decelerated-easing, .2s color settings.$standard-easing, .2s background-color settings.$standard-easing !default;
+$switch-thumb-vertical-transform: rotate(-90deg) !default;
 
 $switch-track-background: rgb(var(--v-theme-surface-variant)) !default;
 $switch-track-radius: 9999px !default;
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePicker.ts b/packages/vuetify/src/components/VTimePicker/VTimePicker.ts
deleted file mode 100644
index 67a31bf3739..00000000000
--- a/packages/vuetify/src/components/VTimePicker/VTimePicker.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Components
-import VTimePickerTitle from './VTimePickerTitle'
-import VTimePickerClock from './VTimePickerClock'
-
-// Mixins
-import Picker from '../../mixins/picker'
-import PickerButton from '../../mixins/picker-button'
-
-// Utils
-import { createRange } from '../../util/helpers'
-import pad from '../VDatePicker/util/pad'
-import mixins from '../../util/mixins'
-
-// Types
-import { VNode, PropType } from 'vue'
-import { SelectingTimes } from './SelectingTimes'
-
-const rangeHours24 = createRange(24)
-const rangeHours12am = createRange(12)
-const rangeHours12pm = rangeHours12am.map(v => v + 12)
-const range60 = createRange(60)
-const selectingNames = { 1: 'hour', 2: 'minute', 3: 'second' }
-export { SelectingTimes }
-
-type Period = 'am' | 'pm'
-type AllowFunction = (val: number) => boolean
-
-export default mixins(
-  Picker,
-  PickerButton
-/* @vue/component */
-).extend({
-  name: 'v-time-picker',
-
-  props: {
-    allowedHours: [Function, Array] as PropType<AllowFunction | number[]>,
-    allowedMinutes: [Function, Array] as PropType<AllowFunction | number[]>,
-    allowedSeconds: [Function, Array] as PropType<AllowFunction | number[]>,
-    disabled: Boolean,
-    format: {
-      type: String as PropType<'ampm' | '24hr'>,
-      default: 'ampm',
-      validator (val: any) {
-        return ['ampm', '24hr'].includes(val)
-      },
-    },
-    min: String,
-    max: String,
-    readonly: Boolean,
-    scrollable: Boolean,
-    useSeconds: Boolean,
-    value: null as any as PropType<any>,
-    ampmInTitle: Boolean,
-  },
-
-  data () {
-    return {
-      inputHour: null as number | null,
-      inputMinute: null as number | null,
-      inputSecond: null as number | null,
-      lazyInputHour: null as number | null,
-      lazyInputMinute: null as number | null,
-      lazyInputSecond: null as number | null,
-      period: 'am' as Period,
-      selecting: SelectingTimes.Hour,
-    }
-  },
-
-  computed: {
-    selectingHour: {
-      get (): boolean {
-        return this.selecting === SelectingTimes.Hour
-      },
-      set (v: boolean) {
-        this.selecting = SelectingTimes.Hour
-      },
-    },
-    selectingMinute: {
-      get (): boolean {
-        return this.selecting === SelectingTimes.Minute
-      },
-      set (v: boolean) {
-        this.selecting = SelectingTimes.Minute
-      },
-    },
-    selectingSecond: {
-      get (): boolean {
-        return this.selecting === SelectingTimes.Second
-      },
-      set (v: boolean) {
-        this.selecting = SelectingTimes.Second
-      },
-    },
-    isAllowedHourCb (): AllowFunction {
-      let cb: AllowFunction
-
-      if (this.allowedHours instanceof Array) {
-        cb = (val: number) => (this.allowedHours as number[]).includes(val)
-      } else {
-        cb = this.allowedHours
-      }
-
-      if (!this.min && !this.max) return cb
-
-      const minHour = this.min ? Number(this.min.split(':')[0]) : 0
-      const maxHour = this.max ? Number(this.max.split(':')[0]) : 23
-
-      return (val: number) => {
-        return val >= minHour * 1 &&
-          val <= maxHour * 1 &&
-          (!cb || cb(val))
-      }
-    },
-    isAllowedMinuteCb (): AllowFunction {
-      let cb: AllowFunction
-
-      const isHourAllowed = !this.isAllowedHourCb || this.inputHour === null || this.isAllowedHourCb(this.inputHour)
-      if (this.allowedMinutes instanceof Array) {
-        cb = (val: number) => (this.allowedMinutes as number[]).includes(val)
-      } else {
-        cb = this.allowedMinutes
-      }
-
-      if (!this.min && !this.max) {
-        return isHourAllowed ? cb : () => false
-      }
-
-      const [minHour, minMinute] = this.min ? this.min.split(':').map(Number) : [0, 0]
-      const [maxHour, maxMinute] = this.max ? this.max.split(':').map(Number) : [23, 59]
-      const minTime = minHour * 60 + minMinute * 1
-      const maxTime = maxHour * 60 + maxMinute * 1
-
-      return (val: number) => {
-        const time = 60 * this.inputHour! + val
-        return time >= minTime &&
-          time <= maxTime &&
-          isHourAllowed &&
-          (!cb || cb(val))
-      }
-    },
-    isAllowedSecondCb (): AllowFunction {
-      let cb: AllowFunction
-
-      const isHourAllowed = !this.isAllowedHourCb || this.inputHour === null || this.isAllowedHourCb(this.inputHour)
-      const isMinuteAllowed = isHourAllowed &&
-        (!this.isAllowedMinuteCb ||
-          this.inputMinute === null ||
-          this.isAllowedMinuteCb(this.inputMinute)
-        )
-
-      if (this.allowedSeconds instanceof Array) {
-        cb = (val: number) => (this.allowedSeconds as number[]).includes(val)
-      } else {
-        cb = this.allowedSeconds
-      }
-
-      if (!this.min && !this.max) {
-        return isMinuteAllowed ? cb : () => false
-      }
-
-      const [minHour, minMinute, minSecond] = this.min ? this.min.split(':').map(Number) : [0, 0, 0]
-      const [maxHour, maxMinute, maxSecond] = this.max ? this.max.split(':').map(Number) : [23, 59, 59]
-      const minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1
-      const maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1
-
-      return (val: number) => {
-        const time = 3600 * this.inputHour! + 60 * this.inputMinute! + val
-        return time >= minTime &&
-          time <= maxTime &&
-          isMinuteAllowed &&
-          (!cb || cb(val))
-      }
-    },
-    isAmPm (): boolean {
-      return this.format === 'ampm'
-    },
-  },
-
-  watch: {
-    value: 'setInputData',
-  },
-
-  mounted () {
-    this.setInputData(this.value)
-    this.$on('update:period', this.setPeriod)
-  },
-
-  methods: {
-    genValue () {
-      if (this.inputHour != null && this.inputMinute != null && (!this.useSeconds || this.inputSecond != null)) {
-        return `${pad(this.inputHour)}:${pad(this.inputMinute)}` + (this.useSeconds ? `:${pad(this.inputSecond!)}` : '')
-      }
-
-      return null
-    },
-    emitValue () {
-      const value = this.genValue()
-      if (value !== null) this.$emit('input', value)
-    },
-    setPeriod (period: Period) {
-      this.period = period
-      if (this.inputHour != null) {
-        const newHour = this.inputHour! + (period === 'am' ? -12 : 12)
-        this.inputHour = this.firstAllowed('hour', newHour)
-        this.emitValue()
-      }
-    },
-    setInputData (value: string | null | Date) {
-      if (value == null || value === '') {
-        this.inputHour = null
-        this.inputMinute = null
-        this.inputSecond = null
-      } else if (value instanceof Date) {
-        this.inputHour = value.getHours()
-        this.inputMinute = value.getMinutes()
-        this.inputSecond = value.getSeconds()
-      } else {
-        const [, hour, minute, , second, period] = value.trim().toLowerCase().match(/^(\d+):(\d+)(:(\d+))?([ap]m)?$/) || new Array(6)
-
-        this.inputHour = period ? this.convert12to24(parseInt(hour, 10), period as Period) : parseInt(hour, 10)
-        this.inputMinute = parseInt(minute, 10)
-        this.inputSecond = parseInt(second || 0, 10)
-      }
-
-      this.period = (this.inputHour == null || this.inputHour < 12) ? 'am' : 'pm'
-    },
-    convert24to12 (hour: number) {
-      return hour ? ((hour - 1) % 12 + 1) : 12
-    },
-    convert12to24 (hour: number, period: Period) {
-      return hour % 12 + (period === 'pm' ? 12 : 0)
-    },
-    onInput (value: number) {
-      if (this.selecting === SelectingTimes.Hour) {
-        this.inputHour = this.isAmPm ? this.convert12to24(value, this.period) : value
-      } else if (this.selecting === SelectingTimes.Minute) {
-        this.inputMinute = value
-      } else {
-        this.inputSecond = value
-      }
-      this.emitValue()
-    },
-    onChange (value: number) {
-      this.$emit(`click:${selectingNames[this.selecting]}`, value)
-
-      const emitChange = this.selecting === (this.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute)
-
-      if (this.selecting === SelectingTimes.Hour) {
-        this.selecting = SelectingTimes.Minute
-      } else if (this.useSeconds && this.selecting === SelectingTimes.Minute) {
-        this.selecting = SelectingTimes.Second
-      }
-
-      if (this.inputHour === this.lazyInputHour &&
-        this.inputMinute === this.lazyInputMinute &&
-        (!this.useSeconds || this.inputSecond === this.lazyInputSecond)
-      ) return
-
-      const time = this.genValue()
-      if (time === null) return
-
-      this.lazyInputHour = this.inputHour
-      this.lazyInputMinute = this.inputMinute
-      this.useSeconds && (this.lazyInputSecond = this.inputSecond)
-
-      emitChange && this.$emit('change', time)
-    },
-    firstAllowed (type: 'hour' | 'minute' | 'second', value: number) {
-      const allowedFn = type === 'hour' ? this.isAllowedHourCb : (type === 'minute' ? this.isAllowedMinuteCb : this.isAllowedSecondCb)
-      if (!allowedFn) return value
-
-      // TODO: clean up
-      const range = type === 'minute'
-        ? range60
-        : (type === 'second'
-          ? range60
-          : (this.isAmPm
-            ? (value < 12
-              ? rangeHours12am
-              : rangeHours12pm)
-            : rangeHours24))
-      const first = range.find(v => allowedFn((v + value) % range.length + range[0]))
-      return ((first || 0) + value) % range.length + range[0]
-    },
-    genClock () {
-      return this.$createElement(VTimePickerClock, {
-        props: {
-          allowedValues:
-            this.selecting === SelectingTimes.Hour
-              ? this.isAllowedHourCb
-              : (this.selecting === SelectingTimes.Minute
-                ? this.isAllowedMinuteCb
-                : this.isAllowedSecondCb),
-          color: this.color,
-          dark: this.dark,
-          disabled: this.disabled,
-          double: this.selecting === SelectingTimes.Hour && !this.isAmPm,
-          format: this.selecting === SelectingTimes.Hour
-            ? (this.isAmPm ? this.convert24to12 : (val: number) => val)
-            : (val: number) => pad(val, 2),
-          light: this.light,
-          max: this.selecting === SelectingTimes.Hour ? (this.isAmPm && this.period === 'am' ? 11 : 23) : 59,
-          min: this.selecting === SelectingTimes.Hour && this.isAmPm && this.period === 'pm' ? 12 : 0,
-          readonly: this.readonly,
-          scrollable: this.scrollable,
-          size: Number(this.width) - ((!this.fullWidth && this.landscape) ? 80 : 20),
-          step: this.selecting === SelectingTimes.Hour ? 1 : 5,
-          value: this.selecting === SelectingTimes.Hour
-            ? this.inputHour
-            : (this.selecting === SelectingTimes.Minute
-              ? this.inputMinute
-              : this.inputSecond),
-        },
-        on: {
-          input: this.onInput,
-          change: this.onChange,
-        },
-        ref: 'clock',
-      })
-    },
-    genClockAmPm () {
-      return this.$createElement('div', this.setTextColor(this.color || 'primary', {
-        staticClass: 'v-time-picker-clock__ampm',
-      }), [
-        this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly),
-        this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly),
-      ])
-    },
-    genPickerBody () {
-      return this.$createElement('div', {
-        staticClass: 'v-time-picker-clock__container',
-        key: this.selecting,
-      }, [
-        !this.ampmInTitle && this.isAmPm && this.genClockAmPm(),
-        this.genClock(),
-      ])
-    },
-    genPickerTitle () {
-      return this.$createElement(VTimePickerTitle, {
-        props: {
-          ampm: this.isAmPm,
-          ampmReadonly: this.isAmPm && !this.ampmInTitle,
-          disabled: this.disabled,
-          hour: this.inputHour,
-          minute: this.inputMinute,
-          second: this.inputSecond,
-          period: this.period,
-          readonly: this.readonly,
-          useSeconds: this.useSeconds,
-          selecting: this.selecting,
-        },
-        on: {
-          'update:selecting': (value: 1 | 2 | 3) => (this.selecting = value),
-          'update:period': (period: string) => this.$emit('update:period', period),
-        },
-        ref: 'title',
-        slot: 'title',
-      })
-    },
-  },
-
-  render (): VNode {
-    return this.genPicker('v-picker--time')
-  },
-})
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerClock.ts b/packages/vuetify/src/components/VTimePicker/VTimePickerClock.ts
deleted file mode 100644
index e41bf6842fe..00000000000
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerClock.ts
+++ /dev/null
@@ -1,285 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VTimePickerClock.sass'
-
-// Mixins
-import Colorable from '../../mixins/colorable'
-import Themeable from '../../mixins/themeable'
-
-// Types
-import mixins, { ExtractVue } from '../../util/mixins'
-import Vue, { VNode, PropType, VNodeData } from 'vue'
-import { PropValidator } from 'vue/types/options'
-
-interface Point {
-  x: number
-  y: number
-}
-
-interface options extends Vue {
-  $refs: {
-    clock: HTMLElement
-    innerClock: HTMLElement
-  }
-}
-
-export default mixins<options &
-/* eslint-disable indent */
-  ExtractVue<[
-    typeof Colorable,
-    typeof Themeable
-  ]>
-/* eslint-enable indent */
->(
-  Colorable,
-  Themeable
-/* @vue/component */
-).extend({
-  name: 'v-time-picker-clock',
-
-  props: {
-    allowedValues: Function as PropType<(value: number) => boolean>,
-    ampm: Boolean,
-    disabled: Boolean,
-    double: Boolean,
-    format: {
-      type: Function,
-      default: (val: string | number) => val,
-    } as PropValidator<(val: string | number) => string | number>,
-    max: {
-      type: Number,
-      required: true,
-    },
-    min: {
-      type: Number,
-      required: true,
-    },
-    scrollable: Boolean,
-    readonly: Boolean,
-    rotate: {
-      type: Number,
-      default: 0,
-    },
-    step: {
-      type: Number,
-      default: 1,
-    },
-    value: Number,
-  },
-
-  data () {
-    return {
-      inputValue: this.value,
-      isDragging: false,
-      valueOnMouseDown: null as number | null,
-      valueOnMouseUp: null as number | null,
-    }
-  },
-
-  computed: {
-    count (): number {
-      return this.max - this.min + 1
-    },
-    degreesPerUnit (): number {
-      return 360 / this.roundCount
-    },
-    degrees (): number {
-      return this.degreesPerUnit * Math.PI / 180
-    },
-    displayedValue (): number {
-      return this.value == null ? this.min : this.value
-    },
-    innerRadiusScale (): number {
-      return 0.62
-    },
-    roundCount (): number {
-      return this.double ? (this.count / 2) : this.count
-    },
-  },
-
-  watch: {
-    value (value) {
-      this.inputValue = value
-    },
-  },
-
-  methods: {
-    wheel (e: WheelEvent) {
-      e.preventDefault()
-
-      const delta = Math.sign(-e.deltaY || 1)
-      let value = this.displayedValue
-      do {
-        value = value + delta
-        value = (value - this.min + this.count) % this.count + this.min
-      } while (!this.isAllowed(value) && value !== this.displayedValue)
-
-      if (value !== this.displayedValue) {
-        this.update(value)
-      }
-    },
-    isInner (value: number) {
-      return this.double && (value - this.min >= this.roundCount)
-    },
-    handScale (value: number) {
-      return this.isInner(value) ? this.innerRadiusScale : 1
-    },
-    isAllowed (value: number) {
-      return !this.allowedValues || this.allowedValues(value)
-    },
-    genValues () {
-      const children: VNode[] = []
-
-      for (let value = this.min; value <= this.max; value = value + this.step) {
-        const color = value === this.value && (this.color || 'accent')
-        children.push(this.$createElement('span', this.setBackgroundColor(color, {
-          staticClass: 'v-time-picker-clock__item',
-          class: {
-            'v-time-picker-clock__item--active': value === this.displayedValue,
-            'v-time-picker-clock__item--disabled': this.disabled || !this.isAllowed(value),
-          },
-          style: this.getTransform(value),
-          domProps: { innerHTML: `<span>${this.format(value)}</span>` },
-        })))
-      }
-
-      return children
-    },
-    genHand () {
-      const scale = `scaleY(${this.handScale(this.displayedValue)})`
-      const angle = this.rotate + this.degreesPerUnit * (this.displayedValue - this.min)
-      const color = (this.value != null) && (this.color || 'accent')
-      return this.$createElement('div', this.setBackgroundColor(color, {
-        staticClass: 'v-time-picker-clock__hand',
-        class: {
-          'v-time-picker-clock__hand--inner': this.isInner(this.value),
-        },
-        style: {
-          transform: `rotate(${angle}deg) ${scale}`,
-        },
-      }))
-    },
-    getTransform (i: number) {
-      const { x, y } = this.getPosition(i)
-      return {
-        left: `${50 + x * 50}%`,
-        top: `${50 + y * 50}%`,
-      }
-    },
-    getPosition (value: number) {
-      const rotateRadians = this.rotate * Math.PI / 180
-      return {
-        x: Math.sin((value - this.min) * this.degrees + rotateRadians) * this.handScale(value),
-        y: -Math.cos((value - this.min) * this.degrees + rotateRadians) * this.handScale(value),
-      }
-    },
-    onMouseDown (e: MouseEvent | TouchEvent) {
-      e.preventDefault()
-
-      this.valueOnMouseDown = null
-      this.valueOnMouseUp = null
-      this.isDragging = true
-      this.onDragMove(e)
-    },
-    onMouseUp (e: MouseEvent | TouchEvent) {
-      e.stopPropagation()
-
-      this.isDragging = false
-      if (this.valueOnMouseUp !== null && this.isAllowed(this.valueOnMouseUp)) {
-        this.$emit('change', this.valueOnMouseUp)
-      }
-    },
-    onDragMove (e: MouseEvent | TouchEvent) {
-      e.preventDefault()
-      if ((!this.isDragging && e.type !== 'click') || !this.$refs.clock) return
-
-      const { width, top, left } = this.$refs.clock.getBoundingClientRect()
-      const { width: innerWidth } = this.$refs.innerClock.getBoundingClientRect()
-      const { clientX, clientY } = 'touches' in e ? e.touches[0] : e
-      const center = { x: width / 2, y: -width / 2 }
-      const coords = { x: clientX - left, y: top - clientY }
-      const handAngle = Math.round(this.angle(center, coords) - this.rotate + 360) % 360
-      const insideClick = this.double && this.euclidean(center, coords) < (innerWidth + innerWidth * this.innerRadiusScale) / 4
-      const checksCount = Math.ceil(15 / this.degreesPerUnit)
-      let value
-
-      for (let i = 0; i < checksCount; i++) {
-        value = this.angleToValue(handAngle + i * this.degreesPerUnit, insideClick)
-        if (this.isAllowed(value)) return this.setMouseDownValue(value)
-
-        value = this.angleToValue(handAngle - i * this.degreesPerUnit, insideClick)
-        if (this.isAllowed(value)) return this.setMouseDownValue(value)
-      }
-    },
-    angleToValue (angle: number, insideClick: boolean): number {
-      const value = (
-        Math.round(angle / this.degreesPerUnit) +
-        (insideClick ? this.roundCount : 0)
-      ) % this.count + this.min
-
-      // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock
-      if (angle < (360 - this.degreesPerUnit / 2)) return value
-
-      return insideClick ? this.max - this.roundCount + 1 : this.min
-    },
-    setMouseDownValue (value: number) {
-      if (this.valueOnMouseDown === null) {
-        this.valueOnMouseDown = value
-      }
-
-      this.valueOnMouseUp = value
-      this.update(value)
-    },
-    update (value: number) {
-      if (this.inputValue !== value) {
-        this.inputValue = value
-        this.$emit('input', value)
-      }
-    },
-    euclidean (p0: Point, p1: Point) {
-      const dx = p1.x - p0.x
-      const dy = p1.y - p0.y
-
-      return Math.sqrt(dx * dx + dy * dy)
-    },
-    angle (center: Point, p1: Point) {
-      const value = 2 * Math.atan2(p1.y - center.y - this.euclidean(center, p1), p1.x - center.x)
-      return Math.abs(value * 180 / Math.PI)
-    },
-  },
-
-  render (h): VNode {
-    const data: VNodeData = {
-      staticClass: 'v-time-picker-clock',
-      class: {
-        'v-time-picker-clock--indeterminate': this.value == null,
-        ...this.themeClasses,
-      },
-      on: (this.readonly || this.disabled) ? undefined : {
-        mousedown: this.onMouseDown,
-        mouseup: this.onMouseUp,
-        mouseleave: (e: MouseEvent) => (this.isDragging && this.onMouseUp(e)),
-        touchstart: this.onMouseDown,
-        touchend: this.onMouseUp,
-        mousemove: this.onDragMove,
-        touchmove: this.onDragMove,
-      },
-      ref: 'clock',
-    }
-
-    if (this.scrollable && data.on) {
-      data.on.wheel = this.wheel
-    }
-
-    return h('div', data, [
-      h('div', {
-        staticClass: 'v-time-picker-clock__inner',
-        ref: 'innerClock',
-      }, [
-        this.genHand(),
-        this.genValues(),
-      ]),
-    ])
-  },
-})
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerTitle.sass b/packages/vuetify/src/components/VTimePicker/VTimePickerTitle.sass
deleted file mode 100644
index ebc548385a1..00000000000
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerTitle.sass
+++ /dev/null
@@ -1,61 +0,0 @@
-@import './_variables.scss'
-@import '../VPicker/_variables.scss'
-
-.v-time-picker-title
-  color: $time-picker-title-color
-  display: flex
-  line-height: 1
-  justify-content: flex-end
-
-.v-time-picker-title__time
-  white-space: nowrap
-  direction: ltr
-
-  .v-picker__title__btn,
-  span
-    align-items: center
-    display: inline-flex
-    height: $time-picker-title-btn-height
-    font-size: $time-picker-title-btn-height
-    justify-content: center
-
-.v-time-picker-title__ampm
-  align-self: flex-end
-  display: flex
-  flex-direction: column
-  font-size: $time-picker-ampm-title-font-size
-  text-transform: uppercase
-  margin-inline: $time-picker-ampm-title-margin-inline
-  margin-block: $time-picker-ampm-title-margin-block
-
-  div:only-child
-    flex-direction: row
-
-  &--readonly
-    .v-picker__title__btn.v-picker__title__btn--active
-      opacity: $picker-inactive-btn-opacity
-
-.v-picker__title--landscape
-  .v-time-picker-title
-    flex-direction: column
-    justify-content: center
-    height: 100%
-
-  .v-time-picker-title__time
-    text-align: right
-
-    .v-picker__title__btn,
-    span
-      height: $time-picker-landscape-title-btn-height
-      font-size: $time-picker-landscape-title-btn-height
-
-  .v-time-picker-title__ampm
-    margin: $time-picker-landscape-ampm-title-margin
-    align-self: initial
-    text-align: center
-
-.v-picker--time .v-picker__title--landscape
-  padding: 0
-
-  .v-time-picker-title__time
-    text-align: center
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerTitle.ts b/packages/vuetify/src/components/VTimePicker/VTimePickerTitle.ts
deleted file mode 100644
index d9d834374ac..00000000000
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerTitle.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VTimePickerTitle.sass'
-
-// Mixins
-import PickerButton from '../../mixins/picker-button'
-
-// Utils
-import { pad } from '../VDatePicker/util'
-import mixins from '../../util/mixins'
-
-import { SelectingTimes } from './SelectingTimes'
-import { VNode, PropType } from 'vue'
-
-export default mixins(
-  PickerButton
-/* @vue/component */
-).extend({
-  name: 'v-time-picker-title',
-
-  props: {
-    ampm: Boolean,
-    ampmReadonly: Boolean,
-    disabled: Boolean,
-    hour: Number,
-    minute: Number,
-    second: Number,
-    period: {
-      type: String as PropType<'am' | 'pm'>,
-      validator: period => period === 'am' || period === 'pm',
-    },
-    readonly: Boolean,
-    useSeconds: Boolean,
-    selecting: Number,
-  },
-
-  methods: {
-    genTime () {
-      let hour = this.hour
-      if (this.ampm) {
-        hour = hour ? ((hour - 1) % 12 + 1) : 12
-      }
-
-      const displayedHour = this.hour == null ? '--' : this.ampm ? String(hour) : pad(hour)
-      const displayedMinute = this.minute == null ? '--' : pad(this.minute)
-      const titleContent = [
-        this.genPickerButton('selecting', SelectingTimes.Hour, displayedHour, this.disabled),
-        this.$createElement('span', ':'),
-        this.genPickerButton('selecting', SelectingTimes.Minute, displayedMinute, this.disabled),
-      ]
-
-      if (this.useSeconds) {
-        const displayedSecond = this.second == null ? '--' : pad(this.second)
-        titleContent.push(this.$createElement('span', ':'))
-        titleContent.push(this.genPickerButton('selecting', SelectingTimes.Second, displayedSecond, this.disabled))
-      }
-      return this.$createElement('div', {
-        class: 'v-time-picker-title__time',
-      }, titleContent)
-    },
-    genAmPm () {
-      return this.$createElement('div', {
-        staticClass: 'v-time-picker-title__ampm',
-        class: {
-          'v-time-picker-title__ampm--readonly': this.ampmReadonly,
-        },
-      }, [
-        (!this.ampmReadonly || this.period === 'am') ? this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly) : null,
-        (!this.ampmReadonly || this.period === 'pm') ? this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly) : null,
-      ])
-    },
-  },
-
-  render (h): VNode {
-    const children = [this.genTime()]
-
-    this.ampm && children.push(this.genAmPm())
-
-    return h('div', {
-      staticClass: 'v-time-picker-title',
-    }, children)
-  },
-})
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePicker.spec.ts b/packages/vuetify/src/components/VTimePicker/__tests__/VTimePicker.spec.ts
deleted file mode 100644
index d25419880ed..00000000000
--- a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePicker.spec.ts
+++ /dev/null
@@ -1,753 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import Vue from 'vue'
-// import { Lang } from '../../../services/lang'
-// import VTimePicker, { SelectingTimes } from '../VTimePicker'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
-
-// import { preset } from '../../../presets/default'
-
-// Vue.prototype.$vuetify = {
-//   lang: new Lang(preset),
-// }
-
-describe.skip('VTimePicker.ts', () => {
-  type Instance = InstanceType<typeof VTimePicker>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-  beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VTimePicker, options)
-    }
-  });
-
-  [true, false].forEach(useSecondsValue => { // eslint-disable-line max-statements
-    const useSecondsDesc = (useSecondsValue ? '. with useSeconds' : '')
-    it('should accept a value' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '09:12:34',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.selectingHour).toBe(true)
-      expect(wrapper.vm.selectingMinute).toBe(false)
-      expect(wrapper.vm.selectingSecond).toBe(false)
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Hour)
-      expect(wrapper.vm.inputHour).toBe(9)
-      expect(wrapper.vm.inputMinute).toBe(12)
-      expect(wrapper.vm.inputSecond).toBe(34)
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render landscape component' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '09:12:34',
-          landscape: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render disabled component' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          disabled: true,
-          value: '09:12:34',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render flat component' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          flat: true,
-          value: '09:12:34',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render component with elevation' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          elevation: 15,
-          value: '09:12:34',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render component without a title' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '09:12:34',
-          noTitle: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-      expect(wrapper.findAll('.v-picker__title').wrappers).toHaveLength(0)
-    })
-
-    it('should accept a date object for a value' + useSecondsDesc, async () => {
-      const now = new Date('2017-01-01 12:00 AM')
-      const wrapper = mountFunction({
-        propsData: {
-          value: now,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.inputHour).toBe(0)
-      expect(wrapper.vm.inputMinute).toBe(0)
-      expect(wrapper.vm.inputSecond).toBe(0)
-      expect(wrapper.vm.period).toBe('am')
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should change am/pm when updated from model' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '9:00am',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      wrapper.setProps({ value: '9:00pm' })
-      expect(wrapper.vm.period).toBe('pm')
-      // with seconds
-      wrapper.setProps({ value: '9:00:12am' })
-      expect(wrapper.vm.period).toBe('am')
-      wrapper.setProps({ value: '9:00:12pm' })
-      expect(wrapper.vm.period).toBe('pm')
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should set picker to pm when given Date after noon' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: new Date('2017-01-01 12:00 PM'),
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.vm.period).toBe('pm')
-      // with seconds
-      wrapper.setProps({ value: new Date('2017-01-01 12:00:13 PM') })
-      expect(wrapper.vm.period).toBe('pm')
-    })
-
-    it('should set picker to pm when given string with PM in it' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '1:00 PM',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.vm.period).toBe('pm')
-      // with seconds
-      wrapper.setProps({ value: '1:00:12 PM' })
-      expect(wrapper.vm.period).toBe('pm')
-    })
-
-    it('should set picker to pm when given string with pm in it' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '1:00 pm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.vm.period).toBe('pm')
-      // with seconds
-      wrapper.setProps({ value: '1:00:13 pm' })
-      expect(wrapper.vm.period).toBe('pm')
-    })
-
-    it('should set picker to am when given Date before noon' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: new Date('2017-01-01 1:00 AM'),
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.vm.period).toBe('am')
-      // with seconds
-      wrapper.setProps({ value: new Date('2017-01-01 1:00:30 AM') })
-      expect(wrapper.vm.period).toBe('am')
-    })
-
-    it('should render colored time picker' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '09:00:00',
-          color: 'orange darken-1',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render colored time picker, header' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '09:00:00',
-          color: 'primary',
-          headerColor: 'orange darken-1',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render dark time picker' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          dark: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      await wrapper.vm.$nextTick()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should set input hour when setting hour in 12hr mode' + useSecondsDesc, () => { // eslint-disable-line max-statements
-      const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
-          format: 'ampm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      wrapper.vm.onInput(7)
-      expect(wrapper.vm.inputHour).toBe(19)
-
-      wrapper.setProps({ format: '24hr' })
-      wrapper.vm.onInput(8)
-      expect(wrapper.vm.inputHour).toBe(8)
-
-      wrapper.vm.selecting = SelectingTimes.Minute
-      wrapper.vm.onInput(33)
-      expect(wrapper.vm.inputHour).toBe(8)
-      expect(wrapper.vm.inputMinute).toBe(33)
-      expect(wrapper.vm.inputSecond).toBe(0)
-
-      // with seconds
-      wrapper.vm.selecting = SelectingTimes.Hour
-      wrapper.setProps({ format: 'ampm' })
-      wrapper.setProps({ value: '01:23:45pm' })
-      wrapper.vm.onInput(7)
-      expect(wrapper.vm.inputHour).toBe(19)
-
-      wrapper.setProps({ format: '24hr' })
-      wrapper.vm.onInput(8)
-      expect(wrapper.vm.inputHour).toBe(8)
-
-      wrapper.vm.selecting = SelectingTimes.Minute
-      wrapper.vm.onInput(33)
-      expect(wrapper.vm.inputHour).toBe(8)
-      expect(wrapper.vm.inputMinute).toBe(33)
-      expect(wrapper.vm.inputSecond).toBe(45)
-
-      wrapper.vm.selecting = SelectingTimes.Second
-      wrapper.vm.onInput(44)
-      expect(wrapper.vm.inputHour).toBe(8)
-      expect(wrapper.vm.inputMinute).toBe(33)
-      expect(wrapper.vm.inputSecond).toBe(44)
-    })
-
-    it('should set properly input time' + useSecondsDesc, () => { // eslint-disable-line max-statements
-      const wrapper = mountFunction({
-        propsData: {
-          format: '24hr',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      wrapper.vm.setInputData(new Date('2001-01-01 17:35'))
-      expect(wrapper.vm.inputHour).toBe(17)
-      expect(wrapper.vm.inputMinute).toBe(35)
-      expect(wrapper.vm.inputSecond).toBe(0)
-
-      wrapper.vm.setInputData(null)
-      expect(wrapper.vm.inputHour).toBeNull()
-      expect(wrapper.vm.inputMinute).toBeNull()
-      expect(wrapper.vm.inputSecond).toBeNull()
-
-      wrapper.vm.setInputData('')
-      expect(wrapper.vm.inputHour).toBeNull()
-      expect(wrapper.vm.inputMinute).toBeNull()
-      expect(wrapper.vm.inputSecond).toBeNull()
-
-      wrapper.vm.setInputData('12:34am')
-      expect(wrapper.vm.inputHour).toBe(0)
-      expect(wrapper.vm.inputMinute).toBe(34)
-      expect(wrapper.vm.inputSecond).toBe(0)
-
-      wrapper.vm.setInputData('12:34:28pm')
-      expect(wrapper.vm.inputHour).toBe(12)
-      expect(wrapper.vm.inputMinute).toBe(34)
-      expect(wrapper.vm.inputSecond).toBe(28)
-
-      wrapper.vm.setInputData('7:34am')
-      expect(wrapper.vm.inputHour).toBe(7)
-
-      wrapper.vm.setInputData('12:34pm')
-      expect(wrapper.vm.inputHour).toBe(12)
-
-      wrapper.vm.setInputData('7:34pm')
-      expect(wrapper.vm.inputHour).toBe(19)
-    })
-
-    it('should update hour when changing period' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '15:34',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      wrapper.vm.setPeriod('am')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.inputHour).toBe(3)
-      wrapper.vm.setPeriod('pm')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.inputHour).toBe(15)
-
-      // with seconds
-      wrapper.setProps({ value: '15:34:14' })
-      wrapper.vm.setPeriod('am')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.inputHour).toBe(3)
-      wrapper.vm.setPeriod('pm')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.inputHour).toBe(15)
-    })
-
-    it('should change selecting when hour/minute/second is selected' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
-          format: 'ampm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      wrapper.vm.onChange(-1)
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Minute)
-      expect(wrapper.vm.selectingHour).toBe(false)
-      expect(wrapper.vm.selectingMinute).toBe(true)
-      expect(wrapper.vm.selectingSecond).toBe(false)
-      wrapper.vm.onChange(-1)
-      expect(wrapper.vm.selecting).toBe(useSecondsValue ? SelectingTimes.Second : SelectingTimes.Minute)
-      expect(wrapper.vm.selectingHour).toBe(false)
-      expect(wrapper.vm.selectingMinute).toBe(!useSecondsValue)
-      expect(wrapper.vm.selectingSecond).toBe(useSecondsValue)
-    })
-
-    it('should emit click:XXX event on change' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '01:23:45pm',
-          format: 'ampm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const clickHour = jest.fn()
-      const clickMinute = jest.fn()
-      const clickSecond = jest.fn()
-
-      wrapper.vm.$on('click:hour', clickHour)
-      wrapper.vm.$on('click:minute', clickMinute)
-      wrapper.vm.$on('click:second', clickSecond)
-
-      wrapper.vm.onChange(1)
-      expect(clickHour).toHaveBeenCalledTimes(1)
-      expect(clickHour).toHaveBeenCalledWith(1)
-      expect(clickMinute).toHaveBeenCalledTimes(0)
-      expect(clickSecond).toHaveBeenCalledTimes(0)
-
-      wrapper.vm.onChange(59)
-      expect(clickHour).toHaveBeenCalledTimes(1)
-      expect(clickMinute).toHaveBeenCalledTimes(1)
-      expect(clickMinute).toHaveBeenCalledWith(59)
-      expect(clickSecond).toHaveBeenCalledTimes(0)
-
-      if (useSecondsValue) {
-        wrapper.vm.onChange(45)
-        expect(clickHour).toHaveBeenCalledTimes(1)
-        expect(clickMinute).toHaveBeenCalledTimes(1)
-        expect(clickSecond).toHaveBeenCalledTimes(1)
-        expect(clickSecond).toHaveBeenCalledWith(45)
-      }
-    })
-
-    it('should change selecting when clicked in title' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
-          format: 'ampm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const title = wrapper.vm.$refs.title
-
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Hour)
-      expect(wrapper.vm.selectingHour).toBe(true)
-      expect(wrapper.vm.selectingMinute).toBe(false)
-      expect(wrapper.vm.selectingSecond).toBe(false)
-      title.$emit('update:selecting', SelectingTimes.Minute)
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Minute)
-      expect(wrapper.vm.selectingHour).toBe(false)
-      expect(wrapper.vm.selectingMinute).toBe(true)
-      expect(wrapper.vm.selectingSecond).toBe(false)
-      title.$emit('update:selecting', SelectingTimes.Second)
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Second)
-      expect(wrapper.vm.selectingHour).toBe(false)
-      expect(wrapper.vm.selectingMinute).toBe(false)
-      expect(wrapper.vm.selectingSecond).toBe(true)
-    })
-
-    it('should change period when clicked in title' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '01:23pm',
-          format: 'ampm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const title = wrapper.vm.$refs.title
-
-      expect(wrapper.vm.period).toBe('pm')
-      title.$emit('update:period', 'am')
-      expect(wrapper.vm.period).toBe('am')
-      title.$emit('update:period', 'pm')
-      expect(wrapper.vm.period).toBe('pm')
-    })
-
-    it('should match snapshot with slot' + useSecondsDesc, async () => {
-      const vm = new Vue()
-      const slot = props => vm.$createElement('div', { class: 'scoped-slot' })
-      const component = Vue.component('test', {
-        render (h) {
-          return h(VTimePicker, {
-            props: {
-              value: '10:12',
-              useSeconds: useSecondsValue,
-            },
-            scopedSlots: {
-              default: slot,
-            },
-          })
-        },
-      })
-
-      const wrapper = mount(component)
-      expect(wrapper.findAll('.v-picker__actions .scoped-slot').wrappers).toHaveLength(1)
-    })
-
-    it('should calculate allowed seconds/minute/hour callback' + useSecondsDesc, async () => { // eslint-disable-line max-statements
-      const wrapper = mountFunction({
-        propsData: {
-          value: '10:00:00',
-          allowedSeconds: value => value === 0 || (value >= 30 && value <= 40),
-          allowedMinutes: value => value % 5 === 0,
-          allowedHours: value => value !== 11,
-          min: '9:31',
-          max: '12:30',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.vm.isAllowedHourCb(8)).toBe(false)
-      expect(wrapper.vm.isAllowedHourCb(9)).toBe(true)
-      expect(wrapper.vm.isAllowedHourCb(10)).toBe(true)
-      expect(wrapper.vm.isAllowedHourCb(11)).toBe(false)
-      expect(wrapper.vm.isAllowedHourCb(12)).toBe(true)
-      expect(wrapper.vm.isAllowedHourCb(13)).toBe(false)
-
-      wrapper.vm.inputHour = 8
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-
-      wrapper.vm.inputHour = 9
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-
-      wrapper.vm.inputHour = 10
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(true)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-
-      wrapper.vm.inputHour = 11
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-
-      wrapper.vm.inputHour = 12
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(true)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(0)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-    })
-
-    it('should calculate allowed seconds/minute/hour callback from array' + useSecondsDesc, async () => { // eslint-disable-line max-statements
-      const allowedHours = [9, 10, 12]
-      const allowedMinutes = [30, 35]
-      const allowedSeconds = [0, 30]
-
-      const wrapper = mountFunction({
-        propsData: {
-          value: '10:00:00',
-          allowedSeconds,
-          allowedMinutes,
-          allowedHours,
-          min: '9:31',
-          max: '12:30',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.vm.isAllowedHourCb(0)).toBe(false)
-      expect(wrapper.vm.isAllowedHourCb(8)).toBe(false)
-      expect(wrapper.vm.isAllowedHourCb(9)).toBe(true)
-      expect(wrapper.vm.isAllowedHourCb(10)).toBe(true)
-      expect(wrapper.vm.isAllowedHourCb(11)).toBe(false)
-      expect(wrapper.vm.isAllowedHourCb(12)).toBe(true)
-      expect(wrapper.vm.isAllowedHourCb(13)).toBe(false)
-
-      wrapper.vm.inputHour = 8
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-
-      wrapper.vm.inputHour = 9
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(0)).toBe(true)
-
-      wrapper.vm.inputHour = 10
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(true)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(0)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(true)
-
-      wrapper.vm.inputHour = 11
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-
-      wrapper.vm.inputHour = 12
-      wrapper.vm.inputMinute = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(true)
-      expect(wrapper.vm.isAllowedMinuteCb(31)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(0)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 30
-      expect(wrapper.vm.isAllowedSecondCb(0)).toBe(true)
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 31
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-      wrapper.vm.inputMinute = 35
-      expect(wrapper.vm.isAllowedSecondCb(29)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-
-      wrapper.vm.inputHour = 0
-      expect(wrapper.vm.isAllowedMinuteCb(30)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(35)).toBe(false)
-      expect(wrapper.vm.isAllowedMinuteCb(50)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(0)).toBe(false)
-      expect(wrapper.vm.isAllowedSecondCb(30)).toBe(false)
-    })
-
-    it('should update inputSecond when called setInputData' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          useSeconds: useSecondsValue,
-        },
-      })
-      const currentValue = jest.fn()
-      wrapper.vm.$on('input', currentValue)
-      wrapper.vm.emitValue()
-
-      wrapper.vm.setInputData(useSecondsValue ? '01:23:45' : '01:23')
-      expect(wrapper.vm.inputSecond).toBe(useSecondsValue ? 45 : 0)
-      wrapper.vm.setInputData(null)
-      expect(wrapper.vm.inputSecond).toBeNull()
-    })
-
-    it('should update when emit input' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          value: '01:23:45pm',
-          format: 'ampm',
-          useSeconds: useSecondsValue,
-        },
-      })
-      const currentValue = jest.fn()
-      wrapper.vm.$on('input', currentValue)
-      wrapper.vm.emitValue()
-      expect(currentValue).toHaveBeenCalledWith(useSecondsValue ? '13:23:45' : '13:23')
-    })
-
-    it('should update selecting when set selectingSecond/selectingMinute/selectingHour' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          useSeconds: useSecondsValue,
-        },
-      })
-      wrapper.vm.selectingHour = true
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Hour)
-      expect(wrapper.vm.selectingMinute).toBe(false)
-      expect(wrapper.vm.selectingSecond).toBe(false)
-
-      wrapper.vm.selectingMinute = true
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Minute)
-      expect(wrapper.vm.selectingHour).toBe(false)
-      expect(wrapper.vm.selectingSecond).toBe(false)
-
-      wrapper.vm.selectingSecond = true
-      expect(wrapper.vm.selecting).toBe(SelectingTimes.Second)
-      expect(wrapper.vm.selectingHour).toBe(false)
-      expect(wrapper.vm.selectingMinute).toBe(false)
-    })
-  })
-})
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePickerClock.spec.ts b/packages/vuetify/src/components/VTimePicker/__tests__/VTimePickerClock.spec.ts
deleted file mode 100644
index 251d2930598..00000000000
--- a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePickerClock.spec.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import VTimePickerClock from '../VTimePickerClock'
-// import { touch } from '../../../../test'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from '@jest/globals'
-
-const CLOCK_SIZE = 300
-const INNER_SIZE = 246
-
-describe.skip('VTimePickerClock.js', () => {
-  (window as any).TouchEvent = Event
-
-  function anglePosition (angle: number): [number, number] {
-    return [
-      CLOCK_SIZE / 2 + INNER_SIZE / 2 * Math.sin(angle / (180 / Math.PI)),
-      CLOCK_SIZE / 2 - INNER_SIZE / 2 * Math.cos(angle / (180 / Math.PI)),
-    ]
-  }
-
-  function createBoundingRect (wrapper) {
-    wrapper.vm.$refs.clock.getBoundingClientRect = () => {
-      return {
-        width: CLOCK_SIZE,
-        height: CLOCK_SIZE,
-        top: 0,
-        left: 0,
-        right: CLOCK_SIZE,
-        bottom: CLOCK_SIZE,
-        x: 0,
-        y: 0,
-      }
-    }
-
-    wrapper.vm.$refs.innerClock.getBoundingClientRect = () => {
-      return {
-        width: INNER_SIZE,
-        height: INNER_SIZE,
-        top: 0,
-        left: 0,
-        right: INNER_SIZE,
-        bottom: INNER_SIZE,
-        x: 0,
-        y: 0,
-      }
-    }
-  }
-
-  it('should render component', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        allowedValues: n => n % 2,
-        max: 59,
-        min: 0,
-        step: 5,
-        value: 10,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render disabled component', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        allowedValues: n => n % 2,
-        disabled: true,
-        max: 59,
-        min: 0,
-        step: 5,
-        value: 10,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render component with double prop', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        allowedValues: n => n % 2,
-        double: true,
-        max: 59,
-        min: 0,
-        step: 5,
-        value: 10,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should emit input event on wheel if scrollable', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        max: 59,
-        min: 3,
-        value: 59,
-        scrollable: true,
-      },
-    })
-
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-    wrapper.trigger('wheel')
-    expect(input).toHaveBeenCalledWith(3)
-  })
-
-  it('should not emit input event on wheel if readonly and scrollable', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        max: 10,
-        min: 1,
-        value: 6,
-        scrollable: true,
-        readonly: true,
-      },
-    })
-
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-    wrapper.trigger('wheel')
-    expect(input).not.toHaveBeenCalled()
-  })
-
-  it('should emit input event on wheel if scrollable and has allowedValues', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        max: 10,
-        min: 1,
-        value: 6,
-        scrollable: true,
-        allowedValues: val => !(val % 3),
-      },
-    })
-
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-    wrapper.trigger('wheel')
-    expect(input).toHaveBeenCalledWith(9)
-  })
-
-  it('should not emit input event on wheel if not scrollable', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        max: 59,
-        min: 3,
-        value: 59,
-        scrollable: false,
-      },
-    })
-
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-    wrapper.trigger('wheel')
-    expect(input).not.toHaveBeenCalled()
-  })
-
-  it('should emit change event on mouseup/touchend', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        value: 59,
-        min: 0,
-        max: 60,
-      },
-    })
-
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
-    wrapper.vm.valueOnMouseUp = 55
-    wrapper.trigger('mouseup')
-    expect(change).toHaveBeenCalledWith(55)
-
-    wrapper.trigger('touchend')
-    expect(change).toHaveBeenCalledWith(55)
-  })
-
-  it('should not emit change event on mouseup/touchend if readonly', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        value: 59,
-        min: 0,
-        max: 60,
-        readonly: true,
-      },
-    })
-
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
-    wrapper.vm.valueOnMouseUp = 55
-    wrapper.trigger('mouseup')
-    expect(change).not.toHaveBeenCalled()
-
-    wrapper.trigger('touchend')
-    expect(change).not.toHaveBeenCalled()
-  })
-
-  it('should emit change event on mouseleave', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        value: 59,
-        min: 0,
-        max: 60,
-      },
-    })
-
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
-
-    wrapper.trigger('mouseleave')
-    expect(change).not.toHaveBeenCalled()
-
-    wrapper.vm.isDragging = true
-    wrapper.vm.valueOnMouseUp = 58
-    wrapper.trigger('mouseleave')
-    expect(change).toHaveBeenCalledWith(58)
-  })
-
-  it('should calculate angle', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        value: 59,
-        min: 0,
-        max: 60,
-      },
-    })
-
-    const center = { x: 1, y: 1 }
-    const angle = p => Math.round(wrapper.vm.angle(center, p))
-    expect(angle({ x: 2, y: 1 })).toBe(90)
-    expect(angle({ x: 2, y: 2 })).toBe(45)
-    expect(angle({ x: 0, y: 2 })).toBe(315)
-    expect(angle({ x: 0, y: 0 })).toBe(225)
-    expect(angle({ x: 2, y: 0 })).toBe(135)
-  })
-
-  it('should calculate position from angle', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        min: 0,
-        max: 6,
-      },
-    })
-
-    createBoundingRect(wrapper)
-
-    const degreesPerUnit = wrapper.vm.degreesPerUnit
-    const input = jest.fn()
-
-    touch(wrapper).start(0, 0)
-    wrapper.vm.$on('input', input)
-
-    for (let i = 0; i <= 6; i++) {
-      touch(wrapper).move(...anglePosition(i * degreesPerUnit))
-      expect(input).toHaveBeenCalledWith(i)
-    }
-  })
-
-  it('should not emit input event when clicked disabled value (#5897)', () => {
-    const ALLOWED_VALUE = 15
-    const ACCURACY_ANGLE = 15
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        allowedValues: value => value === ALLOWED_VALUE || value === 60 - ALLOWED_VALUE,
-        min: 0,
-        max: 59,
-      },
-    })
-
-    createBoundingRect(wrapper)
-
-    const degreesPerUnit = wrapper.vm.degreesPerUnit
-    const input = jest.fn()
-
-    touch(wrapper).start(0, 0)
-    wrapper.vm.$on('input', input)
-
-    // Click on disabled value and more than 15 degrees away from the allowed value
-    touch(wrapper).move(...anglePosition(ALLOWED_VALUE * degreesPerUnit + ACCURACY_ANGLE + 1))
-    expect(input).not.toHaveBeenCalled()
-    touch(wrapper).move(...anglePosition(ALLOWED_VALUE * degreesPerUnit - ACCURACY_ANGLE - 1))
-    expect(input).not.toHaveBeenCalled()
-
-    // Click on disabled value and less than 15 degrees away from the allowed value
-    touch(wrapper).move(...anglePosition(ALLOWED_VALUE * degreesPerUnit + ACCURACY_ANGLE - 1))
-    expect(input).toHaveBeenCalledTimes(1)
-    expect(input).toHaveBeenCalledWith(ALLOWED_VALUE)
-    touch(wrapper).move(...anglePosition((60 - ALLOWED_VALUE) * degreesPerUnit + ACCURACY_ANGLE - 1))
-    expect(input).toHaveBeenCalledTimes(2)
-    expect(input).toHaveBeenCalledWith(60 - ALLOWED_VALUE)
-    touch(wrapper).move(...anglePosition(ALLOWED_VALUE * degreesPerUnit - ACCURACY_ANGLE + 1))
-    expect(input).toHaveBeenCalledTimes(3)
-    expect(input).toHaveBeenCalledWith(ALLOWED_VALUE)
-  })
-
-  it('should change with touch move', () => {
-    const wrapper = mount(VTimePickerClock, {
-      propsData: {
-        min: 0,
-        max: 7,
-        value: 0,
-        double: true,
-      },
-    })
-
-    createBoundingRect(wrapper)
-
-    const input = jest.fn()
-    const finger = touch(wrapper).start(0, 0)
-    wrapper.vm.$on('input', input)
-
-    finger.move(300, 150)
-    expect(input).toHaveBeenCalledWith(1)
-    finger.move(150, 250)
-    expect(input).toHaveBeenCalledWith(2)
-    finger.move(150, 249)
-    expect(input).toHaveBeenCalledWith(6)
-
-    // edge case
-    finger.move(120, 0)
-    expect(input).toHaveBeenCalledWith(0)
-    finger.move(135, 90)
-    expect(input).toHaveBeenCalledWith(4)
-    finger.move(90, 135)
-    expect(input).toHaveBeenCalledWith(7)
-  })
-})
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePickerTitle.spec.ts b/packages/vuetify/src/components/VTimePicker/__tests__/VTimePickerTitle.spec.ts
deleted file mode 100644
index 35529c100e3..00000000000
--- a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePickerTitle.spec.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import Vue from 'vue'
-// import VTimePickerTitle from '../VTimePickerTitle'
-// import { SelectingTimes } from '../VTimePicker'
-// import { Lang } from '../../../services/lang'
-// import { preset } from '../../../presets/default'
-import {
-  mount,
-  Wrapper,
-  MountOptions,
-} from '@vue/test-utils'
-
-// Vue.prototype.$vuetify = {
-//   lang: new Lang(preset),
-// }
-
-describe.skip('VTimePickerTitle.ts', () => {
-  type Instance = InstanceType<typeof VTimePickerTitle>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-  beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VTimePickerTitle, options)
-    }
-  });
-
-  [true, false].forEach(useSecondsValue => {
-    const useSecondsDesc = (useSecondsValue ? '. with useSeconds' : '')
-    it('should render component in 24hr' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          second: 25,
-          period: 'pm',
-          ampm: false,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render disabled component' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          disabled: true,
-          hour: 14,
-          minute: 13,
-          period: 'pm',
-          ampm: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render component in 12hr' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          second: 25,
-          period: 'pm',
-          ampm: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should render component when selecting hour' + useSecondsDesc, () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          second: 25,
-          period: 'pm',
-          selecting: SelectingTimes.Hour,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-
-    it('should emit event when clicked on am/pm' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          second: 25,
-          period: 'pm',
-          ampm: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const period = jest.fn()
-      wrapper.vm.$on('update:period', period)
-
-      wrapper.find('.v-time-picker-title__ampm .v-picker__title__btn--active').trigger('click')
-      expect(period).not.toHaveBeenCalled()
-      wrapper.find('.v-time-picker-title__ampm .v-picker__title__btn:not(.v-picker__title__btn--active)').trigger('click')
-      expect(period).toHaveBeenCalledWith('am')
-
-      wrapper.setProps({
-        hour: 2,
-        minute: 13,
-        second: 35,
-        period: 'am',
-      })
-      wrapper.find('.v-time-picker-title__ampm .v-picker__title__btn:not(.v-picker__title__btn--active)').trigger('click')
-      expect(period).toHaveBeenCalledWith('pm')
-    })
-
-    it('should not emit event when clicked on readonly am/pm' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          second: 25,
-          period: 'pm',
-          ampm: true,
-          readonly: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const period = jest.fn()
-      wrapper.vm.$on('update:period', period)
-
-      wrapper.find('.v-time-picker-title__ampm .v-picker__title__btn:not(.v-picker__title__btn--active)').trigger('click')
-      expect(period).not.toHaveBeenCalled()
-    })
-
-    it('should emit event when clicked on hours/minutes/seconds' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          second: 25,
-          period: 'pm',
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const selecting = jest.fn()
-      wrapper.vm.$on('update:selecting', selecting)
-
-      wrapper.findAll('.v-time-picker-title__time .v-picker__title__btn').at(1).trigger('click')
-      expect(selecting).toHaveBeenCalledWith(SelectingTimes.Minute)
-      wrapper.findAll('.v-time-picker-title__time .v-picker__title__btn').at(0).trigger('click')
-      expect(selecting).toHaveBeenCalledWith(SelectingTimes.Hour)
-      if (useSecondsValue) {
-        wrapper.findAll('.v-time-picker-title__time .v-picker__title__btn').at(2).trigger('click')
-        expect(selecting).toHaveBeenCalledWith(SelectingTimes.Second)
-      }
-      wrapper.setProps({ selecting: SelectingTimes.Hour })
-      await wrapper.vm.$nextTick()
-      wrapper.findAll('.v-time-picker-title__time .v-picker__title__btn').at(1).trigger('click')
-      expect(selecting).toHaveBeenCalledWith(SelectingTimes.Minute)
-    })
-
-    it('should emit event when clicked on readonly hours/minutes' + useSecondsDesc, async () => {
-      const wrapper = mountFunction({
-        propsData: {
-          hour: 14,
-          minute: 13,
-          period: 'pm',
-          readonly: true,
-          useSeconds: useSecondsValue,
-        },
-      })
-
-      const selecting = jest.fn()
-      wrapper.vm.$on('update:selecting', selecting)
-
-      wrapper.find('.v-time-picker-title__time .v-picker__title__btn').trigger('click')
-      expect(selecting).toHaveBeenCalledWith(SelectingTimes.Hour)
-    })
-  })
-})
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePicker.spec.ts.snap b/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePicker.spec.ts.snap
deleted file mode 100644
index 9c8dc4863b2..00000000000
--- a/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePicker.spec.ts.snap
+++ /dev/null
@@ -1,2681 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VTimePicker.ts should accept a date object for a value 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(0deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should accept a date object for a value. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(0deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should accept a value 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should accept a value. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          34
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should change am/pm when updated from model 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          PM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn">
-          AM
-        </div>
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should change am/pm when updated from model. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          PM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn">
-          AM
-        </div>
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render colored time picker 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title orange darken-1">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm orange--text text--darken-1">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand orange darken-1"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active orange darken-1"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render colored time picker, header 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title orange darken-1">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand primary"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active primary"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render colored time picker, header. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title orange darken-1">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand primary"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active primary"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render colored time picker. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title orange darken-1">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          00
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm orange--text text--darken-1">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand orange darken-1"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active orange darken-1"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render component with elevation 1`] = `
-<div class="v-picker v-card v-picker--time theme--light elevation-15">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render component with elevation. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light elevation-15">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          34
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render dark time picker 1`] = `
-<div class="v-picker v-card v-picker--time theme--dark">
-  <div class="v-picker__title">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          --
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          --
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--dark"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock v-time-picker-clock--indeterminate theme--dark">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand"
-               style="transform: rotate(0deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render dark time picker. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--dark">
-  <div class="v-picker__title">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          --
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          --
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          --
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--dark"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock v-time-picker-clock--indeterminate theme--dark">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand"
-               style="transform: rotate(0deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render disabled component 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn v-picker__title__btn--readonly">
-          12
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-          AM
-        </div>
-        <div class="v-picker__title__btn v-picker__title__btn--readonly">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render disabled component. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn v-picker__title__btn--readonly">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn v-picker__title__btn--readonly">
-          34
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-          AM
-        </div>
-        <div class="v-picker__title__btn v-picker__title__btn--readonly">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render flat component 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--flat theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render flat component. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--flat theme--light">
-  <div class="v-picker__title primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          34
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render landscape component 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--landscape theme--light">
-  <div class="v-picker__title v-picker__title--landscape primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePicker.ts should render landscape component. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--landscape theme--light">
-  <div class="v-picker__title v-picker__title--landscape primary">
-    <div class="v-time-picker-title">
-      <div class="v-time-picker-title__time">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          9
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          12
-        </div>
-        <span>
-          :
-        </span>
-        <div class="v-picker__title__btn">
-          34
-        </div>
-      </div>
-      <div class="v-time-picker-title__ampm v-time-picker-title__ampm--readonly">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-picker__body theme--light"
-       style="width: 290px;"
-  >
-    <div class="v-time-picker-clock__container">
-      <div class="v-time-picker-clock__ampm primary--text">
-        <div class="v-picker__title__btn v-picker__title__btn--active">
-          AM
-        </div>
-        <div class="v-picker__title__btn">
-          PM
-        </div>
-      </div>
-      <div class="v-time-picker-clock theme--light">
-        <div class="v-time-picker-clock__inner">
-          <div class="v-time-picker-clock__hand accent"
-               style="transform: rotate(270deg) scaleY(1);"
-          >
-          </div>
-          <span class="v-time-picker-clock__item"
-                style="left: 50%; top: 0%;"
-          >
-            <span>
-              12
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75%; top: 6.698729810778062%;"
-          >
-            <span>
-              1
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922192%; top: 24.999999999999993%;"
-          >
-            <span>
-              2
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 100%; top: 50%;"
-          >
-            <span>
-              3
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 93.30127018922194%; top: 74.99999999999999%;"
-          >
-            <span>
-              4
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 75.00000000000001%; top: 93.30127018922192%;"
-          >
-            <span>
-              5
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 50.00000000000001%; top: 100%;"
-          >
-            <span>
-              6
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 25.000000000000014%; top: 93.30127018922194%;"
-          >
-            <span>
-              7
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.698729810778076%; top: 75.00000000000003%;"
-          >
-            <span>
-              8
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item v-time-picker-clock__item--active accent"
-                style="left: 0%; top: 50.00000000000001%;"
-          >
-            <span>
-              9
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-          >
-            <span>
-              10
-            </span>
-          </span>
-          <span class="v-time-picker-clock__item"
-                style="left: 24.99999999999998%; top: 6.698729810778083%;"
-          >
-            <span>
-              11
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerClock.spec.ts.snap b/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerClock.spec.ts.snap
deleted file mode 100644
index 5e8c6c9304d..00000000000
--- a/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerClock.spec.ts.snap
+++ /dev/null
@@ -1,286 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VTimePickerClock.js should render component 1`] = `
-<div class="v-time-picker-clock theme--light">
-  <div class="v-time-picker-clock__inner">
-    <div class="v-time-picker-clock__hand accent"
-         style="transform: rotate(60deg) scaleY(1);"
-    >
-    </div>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 50%; top: 0%;"
-    >
-      <span>
-        0
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 75%; top: 6.698729810778062%;"
-    >
-      <span>
-        5
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
-          style="left: 93.30127018922192%; top: 24.999999999999993%;"
-    >
-      <span>
-        10
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 100%; top: 50%;"
-    >
-      <span>
-        15
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 93.30127018922194%; top: 74.99999999999999%;"
-    >
-      <span>
-        20
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 75.00000000000001%; top: 93.30127018922192%;"
-    >
-      <span>
-        25
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 50.00000000000001%; top: 100%;"
-    >
-      <span>
-        30
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 25.000000000000014%; top: 93.30127018922194%;"
-    >
-      <span>
-        35
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 6.698729810778076%; top: 75.00000000000003%;"
-    >
-      <span>
-        40
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 0%; top: 50.00000000000001%;"
-    >
-      <span>
-        45
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-    >
-      <span>
-        50
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 24.99999999999998%; top: 6.698729810778083%;"
-    >
-      <span>
-        55
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerClock.js should render component with double prop 1`] = `
-<div class="v-time-picker-clock theme--light">
-  <div class="v-time-picker-clock__inner">
-    <div class="v-time-picker-clock__hand accent"
-         style="transform: rotate(120deg) scaleY(1);"
-    >
-    </div>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 50%; top: 0%;"
-    >
-      <span>
-        0
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 93.30127018922192%; top: 24.999999999999993%;"
-    >
-      <span>
-        5
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
-          style="left: 93.30127018922194%; top: 74.99999999999999%;"
-    >
-      <span>
-        10
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 50.00000000000001%; top: 100%;"
-    >
-      <span>
-        15
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 6.698729810778076%; top: 75.00000000000003%;"
-    >
-      <span>
-        20
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-    >
-      <span>
-        25
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 49.99999999999999%; top: 19%;"
-    >
-      <span>
-        30
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 76.84678751731758%; top: 34.499999999999986%;"
-    >
-      <span>
-        35
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 76.84678751731761%; top: 65.49999999999997%;"
-    >
-      <span>
-        40
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 50.000000000000014%; top: 81%;"
-    >
-      <span>
-        45
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 23.153212482682427%; top: 65.50000000000004%;"
-    >
-      <span>
-        50
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item"
-          style="left: 23.153212482682385%; top: 34.50000000000003%;"
-    >
-      <span>
-        55
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerClock.js should render disabled component 1`] = `
-<div class="v-time-picker-clock theme--light">
-  <div class="v-time-picker-clock__inner">
-    <div class="v-time-picker-clock__hand accent"
-         style="transform: rotate(60deg) scaleY(1);"
-    >
-    </div>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 50%; top: 0%;"
-    >
-      <span>
-        0
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 75%; top: 6.698729810778062%;"
-    >
-      <span>
-        5
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--active v-time-picker-clock__item--disabled accent"
-          style="left: 93.30127018922192%; top: 24.999999999999993%;"
-    >
-      <span>
-        10
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 100%; top: 50%;"
-    >
-      <span>
-        15
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 93.30127018922194%; top: 74.99999999999999%;"
-    >
-      <span>
-        20
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 75.00000000000001%; top: 93.30127018922192%;"
-    >
-      <span>
-        25
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 50.00000000000001%; top: 100%;"
-    >
-      <span>
-        30
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 25.000000000000014%; top: 93.30127018922194%;"
-    >
-      <span>
-        35
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 6.698729810778076%; top: 75.00000000000003%;"
-    >
-      <span>
-        40
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 0%; top: 50.00000000000001%;"
-    >
-      <span>
-        45
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 6.6987298107780475%; top: 25.000000000000032%;"
-    >
-      <span>
-        50
-      </span>
-    </span>
-    <span class="v-time-picker-clock__item v-time-picker-clock__item--disabled"
-          style="left: 24.99999999999998%; top: 6.698729810778083%;"
-    >
-      <span>
-        55
-      </span>
-    </span>
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerTitle.spec.ts.snap b/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerTitle.spec.ts.snap
deleted file mode 100644
index 6fadbfc25b9..00000000000
--- a/packages/vuetify/src/components/VTimePicker/__tests__/__snapshots__/VTimePickerTitle.spec.ts.snap
+++ /dev/null
@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VTimePickerTitle.ts should render component in 12hr 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn">
-      2
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      13
-    </div>
-  </div>
-  <div class="v-time-picker-title__ampm">
-    <div class="v-picker__title__btn">
-      AM
-    </div>
-    <div class="v-picker__title__btn v-picker__title__btn--active">
-      PM
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render component in 12hr. with useSeconds 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn">
-      2
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      13
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      25
-    </div>
-  </div>
-  <div class="v-time-picker-title__ampm">
-    <div class="v-picker__title__btn">
-      AM
-    </div>
-    <div class="v-picker__title__btn v-picker__title__btn--active">
-      PM
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render component in 24hr 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn">
-      14
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      13
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render component in 24hr. with useSeconds 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn">
-      14
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      13
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      25
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render component when selecting hour 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn v-picker__title__btn--active">
-      14
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      13
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render component when selecting hour. with useSeconds 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn v-picker__title__btn--active">
-      14
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      13
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn">
-      25
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render disabled component 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      2
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      13
-    </div>
-  </div>
-  <div class="v-time-picker-title__ampm">
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      AM
-    </div>
-    <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-      PM
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VTimePickerTitle.ts should render disabled component. with useSeconds 1`] = `
-<div class="v-time-picker-title">
-  <div class="v-time-picker-title__time">
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      2
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      13
-    </div>
-    <span>
-      :
-    </span>
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      --
-    </div>
-  </div>
-  <div class="v-time-picker-title__ampm">
-    <div class="v-picker__title__btn v-picker__title__btn--readonly">
-      AM
-    </div>
-    <div class="v-picker__title__btn v-picker__title__btn--active v-picker__title__btn--readonly">
-      PM
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VTimePicker/_variables.scss b/packages/vuetify/src/components/VTimePicker/_variables.scss
deleted file mode 100644
index d72d9ffbd10..00000000000
--- a/packages/vuetify/src/components/VTimePicker/_variables.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../../styles/styles.sass';
-
-$time-picker-title-color: map-get($shades, 'white') !default;
-$time-picker-title-btn-height: 70px !default;
-$time-picker-landscape-title-btn-height: 55px !default;
-$time-picker-ampm-title-margin-inline: 8px 0 !default;
-$time-picker-ampm-title-margin-block: 0 6px !default;
-$time-picker-ampm-title-font-size: 16px !default;
-$time-picker-landscape-ampm-title-margin: 16px 0 0 !default;
-$time-picker-number-font-size: 16px !default;
-$time-picker-indicator-size: 40px !default;
-$time-picker-clock-padding: 10px !default;
-$time-picker-clock-max-width: 290px !default;
-$time-picker-clock-hand-height: calc(50% - 4px) !default;
-$time-picker-clock-hand-width: 2px !default;
-$time-picker-clock-hand-left: calc(50% - 1px) !default;
-$time-picker-clock-center-size: 8px !default;
-$time-picker-clock-end-size: 10px !default;
-$time-picker-clock-end-top: -4px !default;
-$time-picker-clock-inner-hand-height: 14px !default;
-$time-picker-clock-inner-offset: 27px !default;
-$time-picker-ampm-padding: 10px !default;
-$time-picker-clock-end-border-width: 2px !default;
-$time-picker-clock-end-border-style: solid !default;
-$time-picker-clock-end-border-color: inherit !default;
-
-// Deprecated
-$time-picker-ampm-title-margin-start: 8px !default;
-$time-picker-ampm-title-margin-bottom: 6px !default;
-$time-picker-ampm-title-margin: 0 0 $time-picker-ampm-title-margin-bottom $time-picker-ampm-title-margin-start !default;
-$time-picker-ampm-title-margin-ltr: $time-picker-ampm-title-margin !default;
-$time-picker-ampm-title-margin-rtl: 0 $time-picker-ampm-title-margin-start $time-picker-ampm-title-margin-bottom 0 !default;
diff --git a/packages/vuetify/src/components/VTimePicker/index.ts b/packages/vuetify/src/components/VTimePicker/index.ts
deleted file mode 100644
index fec08b7769f..00000000000
--- a/packages/vuetify/src/components/VTimePicker/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import VTimePicker from './VTimePicker'
-import VTimePickerClock from './VTimePickerClock'
-import VTimePickerTitle from './VTimePickerTitle'
-
-export { VTimePicker, VTimePickerClock, VTimePickerTitle }
-
-export default {
-  $_vuetify_subcomponents: {
-    VTimePicker,
-    VTimePickerClock,
-    VTimePickerTitle,
-  },
-}
diff --git a/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx b/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx
index 4ebcb45231f..103fa788b7b 100644
--- a/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx
+++ b/packages/vuetify/src/composables/__tests__/goto.spec.cy.tsx
@@ -71,8 +71,8 @@ describe('goto', () => {
       })
   })
 
-  // TODO: find a better way to test this
-  it('should scroll horizontal', () => {
+  // TODO: find a better way to test this and fix in CI
+  it.skip('should scroll horizontal', () => {
     cy
       .mount(() => (
         <div id="container" style="overflow-x: auto;">
diff --git a/packages/vuetify/src/composables/date/DateAdapter.ts b/packages/vuetify/src/composables/date/DateAdapter.ts
index 72b84c8488c..2ffd37fdbc4 100644
--- a/packages/vuetify/src/composables/date/DateAdapter.ts
+++ b/packages/vuetify/src/composables/date/DateAdapter.ts
@@ -39,6 +39,8 @@ export interface DateAdapter<T = unknown> {
   getWeekdays (): string[]
   getMonth (date: T): number
   setMonth (date: T, month: number): T
+  getDate (date: T): number
+  setDate (date: T, day: number): T
   getNextMonth (date: T): T
   getPreviousMonth(date: T): T
 
diff --git a/packages/vuetify/src/composables/date/adapters/vuetify.ts b/packages/vuetify/src/composables/date/adapters/vuetify.ts
index 2c43a8d7a4b..8537657a50e 100644
--- a/packages/vuetify/src/composables/date/adapters/vuetify.ts
+++ b/packages/vuetify/src/composables/date/adapters/vuetify.ts
@@ -375,6 +375,10 @@ function getMonth (date: Date) {
   return date.getMonth()
 }
 
+function getDate (date: Date) {
+  return date.getDate()
+}
+
 function getNextMonth (date: Date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 1)
 }
@@ -484,6 +488,12 @@ function setMonth (date: Date, count: number) {
   return d
 }
 
+function setDate (date: Date, day: number) {
+  const d = new Date(date)
+  d.setDate(day)
+  return d
+}
+
 function setYear (date: Date, year: number) {
   const d = new Date(date)
   d.setFullYear(year)
@@ -615,6 +625,10 @@ export class VuetifyDateAdapter implements DateAdapter<Date> {
     return setMonth(date, count)
   }
 
+  setDate (date: Date, day: number): Date {
+    return setDate(date, day)
+  }
+
   setYear (date: Date, year: number) {
     return setYear(date, year)
   }
@@ -635,6 +649,10 @@ export class VuetifyDateAdapter implements DateAdapter<Date> {
     return getMonth(date)
   }
 
+  getDate (date: Date) {
+    return getDate(date)
+  }
+
   getNextMonth (date: Date) {
     return getNextMonth(date)
   }
diff --git a/packages/vuetify/src/composables/form.ts b/packages/vuetify/src/composables/form.ts
index a75f907de69..803c6d43bee 100644
--- a/packages/vuetify/src/composables/form.ts
+++ b/packages/vuetify/src/composables/form.ts
@@ -15,8 +15,8 @@ export interface FormProvide {
     id: number | string
     vm: ComponentInternalInstance
     validate: () => Promise<string[]>
-    reset: () => void
-    resetValidation: () => void
+    reset: () => Promise<void>
+    resetValidation: () => Promise<void>
   }) => void
   unregister: (id: number | string) => void
   update: (id: number | string, isValid: boolean | null, errorMessages: string[]) => void
@@ -31,8 +31,8 @@ export interface FormProvide {
 export interface FormField {
   id: number | string
   validate: () => Promise<string[]>
-  reset: () => void
-  resetValidation: () => void
+  reset: () => Promise<void>
+  resetValidation: () => Promise<void>
   vm: Raw<ComponentInternalInstance>
   isValid: boolean | null
   errorMessages: string[]
diff --git a/packages/vuetify/src/composables/router.tsx b/packages/vuetify/src/composables/router.tsx
index b59d3c672a9..0ee41e2fa3c 100644
--- a/packages/vuetify/src/composables/router.tsx
+++ b/packages/vuetify/src/composables/router.tsx
@@ -57,29 +57,37 @@ export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['
     return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click')
   })
 
-  if (typeof RouterLink === 'string') {
+  if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
     return {
       isLink,
       isClickable,
       href: toRef(props, 'href'),
     }
   }
-
-  const link = props.to ? RouterLink.useLink(props as UseLinkOptions) : undefined
+  // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
+  const linkProps = computed(() => ({
+    ...props,
+    to: toRef(() => props.to || {}),
+  }))
+
+  const routerLink = RouterLink.useLink(linkProps.value as UseLinkOptions)
+  // Actual link needs to be undefined when to prop is not used
+  const link = computed(() => props.to ? routerLink : undefined)
   const route = useRoute()
 
   return {
     isLink,
     isClickable,
-    route: link?.route,
-    navigate: link?.navigate,
-    isActive: link && computed(() => {
-      if (!props.exact) return link.isActive?.value
-      if (!route.value) return link.isExactActive?.value
-
-      return link.isExactActive?.value && deepEqual(link.route.value.query, route.value.query)
+    route: link.value?.route,
+    navigate: link.value?.navigate,
+    isActive: computed(() => {
+      if (!link.value) return false
+      if (!props.exact) return link.value.isActive?.value ?? false
+      if (!route.value) return link.value.isExactActive?.value ?? false
+
+      return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query)
     }),
-    href: computed(() => props.to ? link?.route.value.href : props.href),
+    href: computed(() => props.to ? link.value?.route.value.href : props.href),
   }
 }
 
diff --git a/packages/vuetify/src/composables/transition.ts b/packages/vuetify/src/composables/transition.ts
index 98458bb84e0..79c088f0076 100644
--- a/packages/vuetify/src/composables/transition.ts
+++ b/packages/vuetify/src/composables/transition.ts
@@ -35,7 +35,7 @@ export const MaybeTransition: FunctionalComponent<MaybeTransitionProps> = (props
         : customProps as any,
       typeof transition === 'string'
         ? {}
-        : { disabled, group },
+        : Object.fromEntries(Object.entries({ disabled, group }).filter(([_, v]) => v !== undefined)),
       rest as any,
     ),
     slots
diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts
index ca1f5c9926b..9825007dc5f 100644
--- a/packages/vuetify/src/composables/validation.ts
+++ b/packages/vuetify/src/composables/validation.ts
@@ -168,15 +168,16 @@ export function useValidation (
     form?.update(uid.value, isValid.value, errorMessages.value)
   })
 
-  function reset () {
+  async function reset () {
     model.value = null
-    nextTick(resetValidation)
+    await nextTick()
+    await resetValidation()
   }
 
-  function resetValidation () {
+  async function resetValidation () {
     isPristine.value = true
     if (!validateOn.value.lazy) {
-      validate(true)
+      await validate(true)
     } else {
       internalErrorMessages.value = []
     }
diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
index 452722e775c..32b710a9c28 100644
--- a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
+++ b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
@@ -26,6 +26,10 @@
   font-size: $empty-state-headline-font-size
   font-weight: $empty-state-headline-font-weight
   line-height: $empty-state-headline-line-height
+  text-align: center
+
+  .v-empty-state--mobile &
+    font-size: $empty-state-headline-mobile-font-size
 
 .v-empty-state__title
   font-size: $empty-state-title-font-size
diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx b/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx
index 5d9d7732204..143be878527 100644
--- a/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx
+++ b/packages/vuetify/src/labs/VEmptyState/VEmptyState.tsx
@@ -11,6 +11,7 @@ import { VImg } from '@/components/VImg'
 import { useBackgroundColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
+import { useDisplay } from '@/composables/display'
 import { IconValue } from '@/composables/icons'
 import { makeSizeProps } from '@/composables/size'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
@@ -76,6 +77,7 @@ export const VEmptyState = genericComponent<VEmptyStateSlots>()({
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
     const { dimensionStyles } = useDimension(props)
+    const { displayClasses } = useDisplay()
 
     function onClickAction (e: Event) {
       emit('click:action', e)
@@ -98,6 +100,7 @@ export const VEmptyState = genericComponent<VEmptyStateSlots>()({
             },
             themeClasses.value,
             backgroundColorClasses.value,
+            displayClasses.value,
             props.class,
           ]}
           style={[
@@ -119,6 +122,7 @@ export const VEmptyState = genericComponent<VEmptyStateSlots>()({
                   ) : props.icon ? (
                     <VIcon
                       key="icon"
+                      color={ props.color }
                       size={ size }
                       icon={ props.icon }
                     />
diff --git a/packages/vuetify/src/labs/VEmptyState/_variables.scss b/packages/vuetify/src/labs/VEmptyState/_variables.scss
index ac3f51a50ad..f400753609c 100644
--- a/packages/vuetify/src/labs/VEmptyState/_variables.scss
+++ b/packages/vuetify/src/labs/VEmptyState/_variables.scss
@@ -8,6 +8,7 @@ $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-mobile-font-size: functions.map-deep-get(settings.$typography, 'h4', '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;
diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass b/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass
new file mode 100644
index 00000000000..ee47531f5ba
--- /dev/null
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass
@@ -0,0 +1,48 @@
+@use 'sass:selector'
+@use './variables' as *
+
+.v-number-input
+  $root: &
+  $control-root: #{selector.append($root, '__control')}
+
+  input[type="number"]
+    -moz-appearance: textfield
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button
+      -webkit-appearance: none
+
+  .v-field
+    padding-inline-end: 0
+    padding-inline-start: 0
+
+  &--inset
+    .v-divider
+      height: $number-input-inset-divider-size
+      width: $number-input-inset-divider-size
+      align-self: center
+
+  &--split
+    .v-field__input
+      text-align: center
+
+  &--stacked 
+    #{$control-root}
+      flex-direction: column-reverse
+      .v-btn
+        flex: 1
+
+  &--hide-input
+    .v-field
+      flex: none
+      &__input
+        width: 0
+        padding-inline: 0
+
+  &__control
+    display: flex
+    height: 100%
+
+    .v-btn
+      background-color: transparent
+      border-radius: 0
diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
new file mode 100644
index 00000000000..7ce3ea4e428
--- /dev/null
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -0,0 +1,285 @@
+// Styles
+import './VNumberInput.sass'
+
+// Components
+import { VBtn } from '../../components/VBtn'
+import { VDefaultsProvider } from '../../components/VDefaultsProvider'
+import { VDivider } from '../../components/VDivider'
+import { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'
+import { makeVInputProps, VInput } from '@/components/VInput/VInput'
+
+// Composables
+import { makeFocusProps, useFocus } from '@/composables/focus'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, ref } from 'vue'
+import { filterInputAttrs, genericComponent, only, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { VFieldSlots } from '@/components/VField/VField'
+import type { VInputSlots } from '@/components/VInput/VInput'
+
+type ControlSlot = {
+  click: () => void
+}
+
+type VNumberInputSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {
+  increment: ControlSlot
+  decrement: ControlSlot
+}
+
+type ControlVariant = 'default' | 'stacked' | 'split'
+
+const makeVNumberInputProps = propsFactory({
+  controlVariant: {
+    type: String as PropType<ControlVariant>,
+    default: 'default',
+  },
+  inset: Boolean,
+  hideInput: Boolean,
+  min: Number,
+  max: Number,
+  step: Number,
+
+  ...only(makeVInputProps(), [
+    'density',
+    'disabled',
+    'focused',
+    'hideDetails',
+    'hint',
+    'label',
+    'persistentHint',
+    'readonly',
+  ]),
+  ...only(makeVFieldProps(), [
+    'baseColor',
+    'bgColor',
+    'class',
+    'color',
+    'disabled',
+    'error',
+    'loading',
+    'reverse',
+    'rounded',
+    'style',
+    'theme',
+    'variant',
+  ]),
+  ...makeFocusProps(),
+}, 'VNumberInput')
+
+export const VNumberInput = genericComponent<VNumberInputSlots>()({
+  name: 'VNumberInput',
+
+  inheritAttrs: false,
+
+  props: {
+    ...makeVNumberInputProps(),
+
+    modelValue: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+
+  emits: {
+    'update:modelValue': (val: number) => true,
+  },
+
+  setup (props, { attrs, emit, slots }) {
+    const model = useProxiedModel(props, 'modelValue')
+    const { isFocused, focus, blur } = useFocus(props)
+    const inputRef = ref<HTMLInputElement>()
+
+    function onFocus () {
+      if (!isFocused.value) focus()
+    }
+
+    const controlVariant = computed(() => {
+      return props.hideInput ? 'stacked' : props.controlVariant
+    })
+
+    function toggleUpDown (increment = true) {
+      if (increment) {
+        inputRef.value?.stepUp()
+      } else {
+        inputRef.value?.stepDown()
+      }
+
+      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10)
+    }
+
+    function onClickUp () {
+      toggleUpDown()
+    }
+
+    function onClickDown () {
+      toggleUpDown(false)
+    }
+
+    const incrementSlotProps = computed(() => ({ click: onClickUp }))
+
+    const decrementSlotProps = computed(() => ({ click: onClickDown }))
+
+    useRender(() => {
+      const fieldProps = filterFieldProps(props)
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
+      const { modelValue: _, ...inputProps } = VInput.filterProps(props)
+
+      function controlNode () {
+        const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%'
+        return (
+          <div class="v-number-input__control">
+            {
+              !slots.decrement ? (
+                <VBtn
+                  flat
+                  key="decrement-btn"
+                  height={ defaultHeight }
+                  icon="$expand"
+                  size="small"
+                  onClick={ onClickDown }
+                />
+              ) : (
+                <VDefaultsProvider
+                  key="decrement-defaults"
+                  defaults={{
+                    VBtn: {
+                      flat: true,
+                      height: defaultHeight,
+                      size: 'small',
+                      icon: '$expand',
+                    },
+                  }}
+                >
+                  { slots.decrement(decrementSlotProps.value) }
+                </VDefaultsProvider>
+              )
+            }
+
+            <VDivider
+              vertical={ controlVariant.value !== 'stacked' }
+            />
+
+            {
+              !slots.increment ? (
+                <VBtn
+                  flat
+                  key="increment-btn"
+                  height={ defaultHeight }
+                  icon="$collapse"
+                  onClick={ onClickUp }
+                  size="small"
+                />
+              ) : (
+                <VDefaultsProvider
+                  key="increment-defaults"
+                  defaults={{
+                    VBtn: {
+                      flat: true,
+                      height: defaultHeight,
+                      size: 'small',
+                      icon: '$collapse',
+                    },
+                  }}
+                >
+                  { slots.increment(incrementSlotProps.value) }
+                </VDefaultsProvider>
+              )
+            }
+          </div>
+        )
+      }
+
+      function dividerNode () {
+        return !props.hideInput && !props.inset ? <VDivider vertical /> : undefined
+      }
+
+      return (
+        <VInput
+          class={[
+            'v-number-input',
+            {
+              'v-number-input--default': controlVariant.value === 'default',
+              'v-number-input--hide-input': props.hideInput,
+              'v-number-input--inset': props.inset,
+              'v-number-input--reverse': props.reverse,
+              'v-number-input--split': controlVariant.value === 'split',
+              'v-number-input--stacked': controlVariant.value === 'stacked',
+            },
+            props.class,
+          ]}
+          { ...rootAttrs }
+          { ...inputProps }
+          focused={ isFocused.value }
+          style={ props.style }
+        >
+          {{
+            ...slots,
+            default: () => (
+              <VField
+                { ...fieldProps }
+                active
+                focused={ isFocused.value }
+              >
+                {{
+                  ...slots,
+                  default: ({
+                    props: { class: fieldClass, ...slotProps },
+                  }) => (
+                    <input
+                      ref={ inputRef }
+                      type="number"
+                      v-model={ model.value }
+                      class={ fieldClass }
+                      max={ props.max }
+                      min={ props.min }
+                      step={ props.step }
+                      onFocus={ onFocus }
+                      onBlur={ blur }
+                      { ...inputAttrs }
+                    />
+                  ),
+                  'append-inner': controlVariant.value === 'split' ? () => (
+                    <div class="v-number-input__control">
+                      <VDivider vertical />
+
+                      <VBtn
+                        flat
+                        height="100%"
+                        icon="$plus"
+                        tile
+                        onClick={ onClickUp }
+                      />
+                    </div>
+                  ) : (!props.reverse
+                    ? () => <>{ dividerNode() }{ controlNode() }</>
+                    : undefined),
+                  'prepend-inner': controlVariant.value === 'split' ? () => (
+                    <div class="v-number-input__control">
+                      <VBtn
+                        flat
+                        height="100%"
+                        icon="$minus"
+                        tile
+                        onClick={ onClickDown }
+                      />
+
+                      <VDivider vertical />
+                    </div>
+                  ) : (props.reverse
+                    ? () => <>{ controlNode() }{ dividerNode() }</>
+                    : undefined),
+                }}
+              </VField>
+            ),
+          }}
+        </VInput>
+      )
+    })
+  },
+})
+
+export type VNumberInput = InstanceType<typeof VNumberInput>
diff --git a/packages/vuetify/src/labs/VNumberInput/_variables.scss b/packages/vuetify/src/labs/VNumberInput/_variables.scss
new file mode 100644
index 00000000000..16af2fe55be
--- /dev/null
+++ b/packages/vuetify/src/labs/VNumberInput/_variables.scss
@@ -0,0 +1 @@
+$number-input-inset-divider-size: 55% !default;
diff --git a/packages/vuetify/src/labs/VNumberInput/index.ts b/packages/vuetify/src/labs/VNumberInput/index.ts
new file mode 100644
index 00000000000..20aa5db57c5
--- /dev/null
+++ b/packages/vuetify/src/labs/VNumberInput/index.ts
@@ -0,0 +1 @@
+export { VNumberInput } from './VNumberInput'
diff --git a/packages/vuetify/src/components/VTimePicker/SelectingTimes.ts b/packages/vuetify/src/labs/VTimePicker/SelectingTimes.ts
similarity index 100%
rename from packages/vuetify/src/components/VTimePicker/SelectingTimes.ts
rename to packages/vuetify/src/labs/VTimePicker/SelectingTimes.ts
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass b/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass
new file mode 100644
index 00000000000..5fbe6833ed9
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePicker.sass
@@ -0,0 +1,10 @@
+@import './_variables.scss'
+@import '../VPicker/_variables.scss'
+
+.v-time-picker.v-picker
+  padding: $time-picker-padding
+  width: $time-picker-width
+
+  .v-picker-title
+    padding: 0
+    margin-bottom: 20px
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
new file mode 100644
index 00000000000..589444aa2ab
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
@@ -0,0 +1,363 @@
+// Styles
+import './VTimePicker.sass'
+
+// Components
+import { VTimePickerClock } from './VTimePickerClock'
+import { VTimePickerControls } from './VTimePickerControls'
+import { pad } from '@/components/VDatePicker/util'
+import { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'
+
+// Composables
+import { useLocale } from '@/composables/locale'
+
+// Utilities
+import { computed, onMounted, ref, watch } from 'vue'
+import { SelectingTimes } from './SelectingTimes'
+import { createRange, genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { VPickerSlots } from '@/labs/VPicker/VPicker'
+type Period = 'am' | 'pm'
+type AllowFunction = (val: number) => boolean
+
+const rangeHours24 = createRange(24)
+const rangeHours12am = createRange(12)
+const rangeHours12pm = rangeHours12am.map(v => v + 12)
+const range60 = createRange(60)
+const selectingNames = { 1: 'hour', 2: 'minute', 3: 'second' }
+
+export { SelectingTimes }
+
+export type VTimePickerSlots = Omit<VPickerSlots, 'header'>
+
+export const makeVTimePickerProps = propsFactory({
+  allowedHours: [Function, Array] as PropType<AllowFunction | number[]>,
+  allowedMinutes: [Function, Array] as PropType<AllowFunction | number[]>,
+  allowedSeconds: [Function, Array] as PropType<AllowFunction | number[]>,
+  ampmInTitle: Boolean,
+  disabled: Boolean,
+  format: {
+    type: String as PropType<'ampm' | '24hr'>,
+    default: 'ampm',
+  },
+  max: String,
+  min: String,
+  modelValue: null as any as PropType<any>,
+  readonly: Boolean,
+  scrollable: Boolean,
+  useSeconds: Boolean,
+  ...omit(makeVPickerProps({ title: '$vuetify.timePicker.title' }), ['landscape']),
+}, 'VTimePicker')
+
+export const VTimePicker = genericComponent<VTimePickerSlots>()({
+  name: 'VTimePicker',
+
+  props: makeVTimePickerProps(),
+
+  emits: {
+    'update:hour': (val: number) => val,
+    'update:minute': (val: number) => val,
+    'update:period': (val: Period) => val,
+    'update:second': (val: number) => val,
+    'update:modelValue': (val: string) => val,
+  },
+
+  setup (props, { emit, slots }) {
+    const { t } = useLocale()
+    const inputHour = ref(null as number | null)
+    const inputMinute = ref(null as number | null)
+    const inputSecond = ref(null as number | null)
+    const lazyInputHour = ref(null as number | null)
+    const lazyInputMinute = ref(null as number | null)
+    const lazyInputSecond = ref(null as number | null)
+    const period = ref('am' as Period)
+    const selecting = ref(SelectingTimes.Hour)
+    const controlsRef = ref<VTimePickerControls | null>(null)
+    const clockRef = ref<VTimePickerClock | null>(null)
+
+    const isAllowedHourCb = computed((): AllowFunction => {
+      let cb: AllowFunction
+
+      if (props.allowedHours instanceof Array) {
+        cb = (val: number) => (props.allowedHours as number[]).includes(val)
+      } else {
+        cb = props.allowedHours as AllowFunction
+      }
+
+      if (!props.min && !props.max) return cb
+
+      const minHour = props.min ? Number(props.min.split(':')[0]) : 0
+      const maxHour = props.max ? Number(props.max.split(':')[0]) : 23
+
+      return (val: number) => {
+        return val >= minHour * 1 &&
+          val <= maxHour * 1 &&
+          (!cb || cb(val))
+      }
+    })
+
+    const isAllowedMinuteCb = computed((): AllowFunction => {
+      let cb: AllowFunction
+
+      const isHourAllowed = !isAllowedHourCb.value || inputHour.value === null || isAllowedHourCb.value(inputHour.value)
+      if (props.allowedMinutes instanceof Array) {
+        cb = (val: number) => (props.allowedMinutes as number[]).includes(val)
+      } else {
+        cb = props.allowedMinutes as AllowFunction
+      }
+
+      if (!props.min && !props.max) {
+        return isHourAllowed ? cb : () => false
+      }
+
+      const [minHour, minMinute] = props.min ? props.min.split(':').map(Number) : [0, 0]
+      const [maxHour, maxMinute] = props.max ? props.max.split(':').map(Number) : [23, 59]
+      const minTime = minHour * 60 + minMinute * 1
+      const maxTime = maxHour * 60 + maxMinute * 1
+
+      return (val: number) => {
+        const time = 60 * inputHour.value! + val
+        return time >= minTime &&
+          time <= maxTime &&
+          isHourAllowed &&
+          (!cb || cb(val))
+      }
+    })
+
+    const isAllowedSecondCb = computed((): AllowFunction => {
+      let cb: AllowFunction
+
+      const isHourAllowed = !isAllowedHourCb.value || inputHour.value === null || isAllowedHourCb.value(inputHour.value)
+      const isMinuteAllowed = isHourAllowed &&
+        (!isAllowedMinuteCb.value ||
+          inputMinute.value === null ||
+          isAllowedMinuteCb.value(inputMinute.value)
+        )
+
+      if (props.allowedSeconds instanceof Array) {
+        cb = (val: number) => (props.allowedSeconds as number[]).includes(val)
+      } else {
+        cb = props.allowedSeconds as AllowFunction
+      }
+
+      if (!props.min && !props.max) {
+        return isMinuteAllowed ? cb : () => false
+      }
+
+      const [minHour, minMinute, minSecond] = props.min ? props.min.split(':').map(Number) : [0, 0, 0]
+      const [maxHour, maxMinute, maxSecond] = props.max ? props.max.split(':').map(Number) : [23, 59, 59]
+      const minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1
+      const maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1
+
+      return (val: number) => {
+        const time = 3600 * inputHour.value! + 60 * inputMinute.value! + val
+        return time >= minTime &&
+          time <= maxTime &&
+          isMinuteAllowed &&
+          (!cb || cb(val))
+      }
+    })
+
+    const isAmPm = computed((): boolean => {
+      return props.format === 'ampm'
+    })
+
+    watch(() => props.modelValue, val => setInputData(val))
+
+    onMounted(() => {
+      setInputData(props.modelValue)
+    })
+
+    function genValue () {
+      if (inputHour.value != null && inputMinute.value != null && (!props.useSeconds || inputSecond.value != null)) {
+        return `${pad(inputHour.value)}:${pad(inputMinute.value)}` + (props.useSeconds ? `:${pad(inputSecond.value!)}` : '')
+      }
+
+      return null
+    }
+
+    function emitValue () {
+      const value = genValue()
+      if (value !== null) emit('update:modelValue', value)
+    }
+
+    function convert24to12 (hour: number) {
+      return hour ? ((hour - 1) % 12 + 1) : 12
+    }
+
+    function convert12to24 (hour: number, period: Period) {
+      return hour % 12 + (period === 'pm' ? 12 : 0)
+    }
+
+    function setInputData (value: string | null | Date) {
+      if (value == null || value === '') {
+        inputHour.value = null
+        inputMinute.value = null
+        inputSecond.value = null
+      } else if (value instanceof Date) {
+        inputHour.value = value.getHours()
+        inputMinute.value = value.getMinutes()
+        inputSecond.value = value.getSeconds()
+      } else {
+        const [hour, , minute, , second, period] = value.trim().toLowerCase().match(/^(\d+):(\d+)(:(\d+))?([ap]m)?$/) || new Array(6)
+
+        inputHour.value = period ? convert12to24(parseInt(hour, 10), period as Period) : parseInt(hour, 10)
+        inputMinute.value = parseInt(minute, 10)
+        inputSecond.value = parseInt(second || 0, 10)
+      }
+
+      period.value = (inputHour.value == null || inputHour.value < 12) ? 'am' : 'pm'
+    }
+
+    function firstAllowed (type: 'hour' | 'minute' | 'second', value: number) {
+      const allowedFn = type === 'hour' ? isAllowedHourCb.value : (type === 'minute' ? isAllowedMinuteCb.value : isAllowedSecondCb.value)
+      if (!allowedFn) return value
+
+      // TODO: clean up (Note from V2 code)
+      const range = type === 'minute'
+        ? range60
+        : (type === 'second'
+          ? range60
+          : (isAmPm.value
+            ? (value < 12
+              ? rangeHours12am
+              : rangeHours12pm)
+            : rangeHours24))
+      const first = range.find(v => allowedFn((v + value) % range.length + range[0]))
+      return ((first || 0) + value) % range.length + range[0]
+    }
+
+    function setPeriod (val: Period) {
+      period.value = val
+      if (inputHour.value != null) {
+        const newHour = inputHour.value! + (period.value === 'am' ? -12 : 12)
+        inputHour.value = firstAllowed('hour', newHour)
+      }
+      emit('update:period', val)
+      emitValue()
+      return true
+    }
+
+    function onInput (value: number) {
+      if (selecting.value === SelectingTimes.Hour) {
+        inputHour.value = isAmPm.value ? convert12to24(value, period.value) : value
+      } else if (selecting.value === SelectingTimes.Minute) {
+        inputMinute.value = value
+      } else {
+        inputSecond.value = value
+      }
+    }
+
+    function onChange (value: number) {
+      switch (selectingNames[selecting.value]) {
+        case 'hour':
+          emit('update:hour', value)
+          break
+        case 'minutes':
+          emit('update:minute', value)
+          break
+        case 'seconds':
+          emit('update:second', value)
+          break
+        default:
+          break
+      }
+
+      const emitChange = selecting.value === (props.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute)
+
+      if (selecting.value === SelectingTimes.Hour) {
+        selecting.value = SelectingTimes.Minute
+      } else if (props.useSeconds && selecting.value === SelectingTimes.Minute) {
+        selecting.value = SelectingTimes.Second
+      }
+
+      if (inputHour.value === lazyInputHour.value &&
+        inputMinute.value === lazyInputMinute.value &&
+        (!props.useSeconds || inputSecond.value === lazyInputSecond.value)
+      ) return
+
+      const time = genValue()
+      if (time === null) return
+
+      lazyInputHour.value = inputHour.value
+      lazyInputMinute.value = inputMinute.value
+      props.useSeconds && (lazyInputSecond.value = inputSecond.value)
+
+      emitChange && emitValue()
+    }
+
+    useRender(() => {
+      const pickerProps = VPicker.filterProps(props)
+      const timePickerControlsProps = VTimePickerControls.filterProps(props)
+      const timePickerClockProps = VTimePickerClock.filterProps(omit(props, ['format', 'modelValue', 'min', 'max']))
+
+      return (
+        <VPicker
+          { ...pickerProps }
+          color={ undefined }
+          class={[
+            'v-time-picker',
+            props.class,
+          ]}
+          style={ props.style }
+          v-slots={{
+            title: () => slots.title?.() ?? (
+              <div class="v-time-picker__title">
+                { t(props.title) }
+              </div>
+            ),
+            header: () => (
+              <VTimePickerControls
+                { ...timePickerControlsProps }
+                ampm={ isAmPm.value || props.ampmInTitle }
+                ampmReadonly={ isAmPm.value && !props.ampmInTitle }
+                hour={ inputHour.value as number }
+                minute={ inputMinute.value as number }
+                period={ period.value }
+                second={ inputSecond.value as number }
+                selecting={ selecting.value }
+                onUpdate:period={ (val: Period) => setPeriod(val) }
+                onUpdate:selecting={ (value: 1 | 2 | 3) => (selecting.value = value) }
+                ref={ controlsRef }
+              />
+            ),
+            default: () => (
+              <VTimePickerClock
+                { ...timePickerClockProps }
+                allowedValues={
+                  selecting.value === SelectingTimes.Hour
+                    ? isAllowedHourCb.value
+                    : (selecting.value === SelectingTimes.Minute
+                      ? isAllowedMinuteCb.value
+                      : isAllowedSecondCb.value)
+                    }
+                double={ selecting.value === SelectingTimes.Hour && !isAmPm.value }
+                format={ selecting.value === SelectingTimes.Hour
+                  ? (isAmPm.value ? convert24to12 : (val: number) => val)
+                  : (val: number) => pad(val, 2)
+                }
+                max={ selecting.value === SelectingTimes.Hour ? (isAmPm.value && period.value === 'am' ? 11 : 23) : 59 }
+                min={ selecting.value === SelectingTimes.Hour && isAmPm.value && period.value === 'pm' ? 12 : 0 }
+                size={ 20 }
+                step={ selecting.value === SelectingTimes.Hour ? 1 : 5 }
+                modelValue={ selecting.value === SelectingTimes.Hour
+                  ? inputHour.value as number
+                  : (selecting.value === SelectingTimes.Minute
+                    ? inputMinute.value as number
+                    : inputSecond.value as number)
+                }
+                onChange={ onChange }
+                onInput={ onInput }
+                ref={ clockRef }
+              />
+            ),
+            actions: slots.actions,
+          }}
+        />
+      )
+    })
+  },
+})
+
+export type VTimePicker = InstanceType<typeof VTimePicker>
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerClock.sass b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass
similarity index 69%
rename from packages/vuetify/src/components/VTimePicker/VTimePickerClock.sass
rename to packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass
index 2693bc377ba..fb61819c4d5 100644
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerClock.sass
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.sass
@@ -1,32 +1,27 @@
 @import './_variables.scss'
 
 // Theme
-+theme(v-time-picker-clock) using ($material)
-  background: map-deep-get($material, 'picker', 'clock')
-
-  .v-time-picker-clock__item--disabled
-    color: map-deep-get($material, 'buttons', 'disabled')
+.v-time-picker-clock
+  background: rgb(var(--v-theme-background))
+  color: rgb(var(--v-theme-on-background))
 
-    &.v-time-picker-clock__item--active
-      color: map-deep-get($material-dark, 'buttons', 'disabled')
 
-  &--indeterminate
-    .v-time-picker-clock__hand
-      background-color: map-deep-get($material, 'picker', 'indeterminateTime')
+  &:after
+    color: rgb(var(--v-theme-primary))
 
-    &:after
-      color: map-deep-get($material, 'picker', 'indeterminateTime')
-
-    .v-time-picker-clock__item--active
-      background-color: map-deep-get($material, 'picker', 'indeterminateTime')
+  .v-time-picker-clock__item--active
+    background-color: rgb(var(--v-theme-surface-variant))
+    color: rgb(var(--v-theme-on-surface-variant))
 
 .v-time-picker-clock
-  border-radius: 100%
+  margin: 0 auto
+  background: rgb(var(--v-theme-surface-light))
+  border-radius: 50%
   position: relative
-  transition: $primary-transition
+  transition: none
   user-select: none
-  width: 100%
-  padding-top: 100%
+  height: 256px
+  width: 256px
   flex: 1 0 auto
 
   &__container
@@ -36,20 +31,8 @@
     justify-content: center
     padding: $time-picker-clock-padding
 
-  &__ampm
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-    align-items: flex-end
-    position: absolute
-    width: 100%
-    height: 100%
-    top: 0
-    left: 0
-    margin: 0
-    padding: $time-picker-ampm-padding
-
   &__hand
+    background-color: currentColor
     height: $time-picker-clock-hand-height
     width: $time-picker-clock-hand-width
     bottom: 50%
@@ -81,14 +64,18 @@
       top: 100%
       left: 50%
       border-radius: 100%
-      border-style: solid
-      border-color: inherit
-      background-color: inherit
+      background-color: currentColor
       transform: translate(-50%, -50%)
 
     &--inner:after
       height: $time-picker-clock-inner-hand-height
 
+  &--readonly
+    pointer-events: none
+
+  .v-time-picker-clock__item--disabled
+    opacity: var(--v-disabled-opacity)
+
 .v-picker--full-width
   .v-time-picker-clock__container
     max-width: $time-picker-clock-max-width
@@ -132,7 +119,6 @@
     width: $time-picker-indicator-size
 
   &--active
-    color: map-get($shades, 'white')
     cursor: default
     z-index: 2
 
@@ -143,6 +129,3 @@
   .v-time-picker-clock
     &__container
       flex-direction: row
-
-    &__ampm
-      flex-direction: column
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
new file mode 100644
index 00000000000..760e10ad30f
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
@@ -0,0 +1,286 @@
+// StylesthisValue
+// Styles
+import './VTimePickerClock.sass'
+
+// Composables
+import { useBackgroundColor, useTextColor } from '@/composables/color'
+
+// Utilities
+import { computed, ref, toRef, watch } from 'vue'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+interface Point {
+  x: number
+  y: number
+}
+
+export const makeVTimePickerClockProps = propsFactory({
+  allowedValues: Function as PropType<(value: number) => boolean>,
+  ampm: Boolean,
+  color: String,
+  disabled: Boolean,
+  displayedValue: {
+    default: null,
+  },
+  double: Boolean,
+  format: {
+    type: Function,
+    default: (val: string | number) => val,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  scrollable: Boolean,
+  readonly: Boolean,
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  modelValue: {
+    type: Number,
+  },
+}, 'VTimePickerClock')
+
+export const VTimePickerClock = genericComponent()({
+  name: 'VTimePickerClock',
+
+  props: makeVTimePickerClockProps(),
+
+  emits: {
+    change: (val: number) => val,
+    input: (val: number) => val,
+  },
+
+  setup (props, { emit }) {
+    const clockRef = ref<HTMLElement | null>(null)
+    const innerClockRef = ref<HTMLElement | null>(null)
+    const inputValue = ref<number | undefined>(undefined)
+    const isDragging = ref(false)
+    const valueOnMouseDown = ref(null as number | null)
+    const valueOnMouseUp = ref(null as number | null)
+
+    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
+
+    const count = computed(() => props.max - props.min + 1)
+    const roundCount = computed(() => props.double ? (count.value / 2) : count.value)
+    const degreesPerUnit = computed(() => 360 / roundCount.value)
+    const degrees = computed(() => degreesPerUnit.value * Math.PI / 180)
+    const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue)
+    const innerRadiusScale = computed(() => 0.62)
+
+    const genChildren = computed(() => {
+      const children = []
+      for (let value = props.min; value <= props.max; value = value + props.step) {
+        children.push(value)
+      }
+      return children
+    })
+
+    watch(() => props.modelValue, val => {
+      inputValue.value = val
+    })
+
+    function update (value: number) {
+      if (inputValue.value !== value) {
+        inputValue.value = value
+      }
+      emit('input', value)
+    }
+
+    function isAllowed (value: number) {
+      return !props.allowedValues || props.allowedValues(value)
+    }
+
+    function wheel (e: WheelEvent) {
+      e.preventDefault()
+
+      const delta = Math.sign(-e.deltaY || 1)
+      let value = displayedValue.value
+      do {
+        value = value + delta
+        value = (value - props.min + count.value) % count.value + props.min
+      } while (!isAllowed(value) && value !== displayedValue.value)
+
+      if (value !== props.displayedValue) {
+        update(value)
+      }
+    }
+
+    function isInner (value: number) {
+      return props.double && (value - props.min >= roundCount.value)
+    }
+
+    function handScale (value: number) {
+      return isInner(value) ? innerRadiusScale.value : 1
+    }
+
+    function getPosition (value: number) {
+      const rotateRadians = props.rotate * Math.PI / 180
+      return {
+        x: Math.sin((value - props.min) * degrees.value + rotateRadians) * handScale(value),
+        y: -Math.cos((value - props.min) * degrees.value + rotateRadians) * handScale(value),
+      }
+    }
+
+    function angleToValue (angle: number, insideClick: boolean): number {
+      const value = (
+        Math.round(angle / degreesPerUnit.value) +
+        (insideClick ? roundCount.value : 0)
+      ) % count.value + props.min
+
+      // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock
+      if (angle < (360 - degreesPerUnit.value / 2)) return value
+
+      return insideClick ? props.max - roundCount.value + 1 : props.min
+    }
+
+    function getTransform (i: number) {
+      const { x, y } = getPosition(i)
+      return {
+        left: `${50 + x * 50}%`,
+        top: `${50 + y * 50}%`,
+      }
+    }
+
+    function euclidean (p0: Point, p1: Point) {
+      const dx = p1.x - p0.x
+      const dy = p1.y - p0.y
+
+      return Math.sqrt(dx * dx + dy * dy)
+    }
+
+    function angle (center: Point, p1: Point) {
+      const value = 2 * Math.atan2(p1.y - center.y - euclidean(center, p1), p1.x - center.x)
+      return Math.abs(value * 180 / Math.PI)
+    }
+
+    function setMouseDownValue (value: number) {
+      if (valueOnMouseDown.value === null) {
+        valueOnMouseDown.value = value
+      }
+
+      valueOnMouseUp.value = value
+      update(value)
+    }
+
+    function onDragMove (e: MouseEvent | TouchEvent) {
+      e.preventDefault()
+      if ((!isDragging.value && e.type !== 'click') || !clockRef.value) return
+      const { width, top, left } = clockRef.value?.getBoundingClientRect()
+      const { width: innerWidth }: DOMRect = innerClockRef.value?.getBoundingClientRect() ?? { width: 0 } as DOMRect
+      const { clientX, clientY } = 'touches' in e ? e.touches[0] : e
+      const center = { x: width / 2, y: -width / 2 }
+      const coords = { x: clientX - left, y: top - clientY }
+      const handAngle = Math.round(angle(center, coords) - props.rotate + 360) % 360
+      const insideClick = props.double && euclidean(center, coords) < (innerWidth as number + innerWidth * innerRadiusScale.value) / 4
+      const checksCount = Math.ceil(15 / degreesPerUnit.value)
+      let value
+
+      for (let i = 0; i < checksCount; i++) {
+        value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick)
+        if (isAllowed(value)) return setMouseDownValue(value)
+
+        value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick)
+        if (isAllowed(value)) return setMouseDownValue(value)
+      }
+    }
+
+    function onMouseDown (e: MouseEvent | TouchEvent) {
+      e.preventDefault()
+
+      valueOnMouseDown.value = null
+      valueOnMouseUp.value = null
+      isDragging.value = true
+      onDragMove(e)
+    }
+
+    function onMouseUp (e: MouseEvent | TouchEvent) {
+      e.stopPropagation()
+
+      isDragging.value = false
+      if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {
+        emit('change', valueOnMouseUp.value)
+      }
+    }
+
+    useRender(() => {
+      return (
+        <div
+          class={[
+            {
+              'v-time-picker-clock': true,
+              'v-time-picker-clock--indeterminate': props.modelValue == null,
+              'v-time-picker-clock--readonly': props.readonly,
+            },
+          ]}
+          onMousedown={ onMouseDown }
+          onMouseup={ onMouseUp }
+          onMouseleave={ (e: MouseEvent) => (isDragging.value && onMouseUp(e)) }
+          onTouchstart={ onMouseDown }
+          onTouchend={ onMouseUp }
+          onMousemove={ onDragMove }
+          onTouchmove={ onDragMove }
+          onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }
+          ref={ clockRef }
+        >
+          <div class="v-time-picker-clock__inner" ref={ innerClockRef }>
+            <div
+              class={[
+                {
+                  'v-time-picker-clock__hand': true,
+                  'v-time-picker-clock__hand--inner': isInner(props.modelValue as number),
+                },
+                textColorClasses.value,
+              ]}
+              style={[
+                {
+                  transform: `rotate(${props.rotate + degreesPerUnit.value * (displayedValue.value - props.min)}deg) scaleY(${handScale(displayedValue.value)})`,
+                },
+                textColorStyles.value,
+              ]}
+            />
+
+            {
+              genChildren.value.map(value => {
+                const isActive = value === displayedValue.value
+
+                return (
+                  <div
+                    class={[
+                      {
+                        'v-time-picker-clock__item': true,
+                        'v-time-picker-clock__item--active': isActive,
+                        'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value),
+                      },
+                      isActive && backgroundColorClasses.value,
+                    ]}
+                    style={[
+                      getTransform(value),
+                      isActive && backgroundColorStyles.value,
+                    ]}
+                  >
+                    <span>{ props.format(value) }</span>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+      )
+    })
+  },
+})
+
+export type VTimePickerClock = InstanceType<typeof VTimePickerClock>
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass
new file mode 100644
index 00000000000..00166a6c1f4
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.sass
@@ -0,0 +1,102 @@
+@import './_variables.scss'
+@import '../VPicker/_variables.scss'
+
+
+.v-time-picker-controls
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: .875rem
+  padding-top: 4px
+  padding-bottom: 4px
+  // padding-inline-start: 6px
+  // padding-inline-end: 12px
+  margin-bottom: 36px
+
+  &__text
+    padding-bottom: 12px
+
+  &__time
+    display: flex
+    white-space: nowrap
+    direction: ltr
+    justify-content: center
+
+    &__btn.v-btn--density-default.v-btn
+      width: $time-picker-contols-btn-width
+      height: $time-picker-contols-btn-height
+      font-size: $time-picker-contols-btn-font
+
+      &__active
+        background: rgb(var(--v-theme-primary))
+      &.v-time-picker-controls__time--with-ampm__btn
+        width: $time-picker-contols-ampm-btn-width
+        height: $time-picker-contols-ampm-btn-height
+      &.v-time-picker-controls__time--with-seconds__btn
+        // overridden
+        width: $time-picker-contols-seconds-btn-width
+        height: $time-picker-contols-seconds-btn-height
+        font-size: $time-picker-contols-seconds-btn-font
+    &__separator
+      font-size: $time-picker-contols-btn-font
+      height: $time-picker-contols-btn-height
+      width: $time-picker-contols-separator-width
+      text-align: center
+    &__separator.v-time-picker-controls--with-seconds__time__separator
+      height: $time-picker-contols-seconds-btn-height
+      font-size: $time-picker-contols-btn-font
+
+.v-time-picker-controls__ampm
+  margin-left: 12px
+  align-self: flex-end
+  display: flex
+  flex-direction: column
+  font-size: $time-picker-ampm-title-font-size
+  text-transform: uppercase
+
+  &--readonly
+    pointer-events: none
+
+  &--readonly
+    .v-picker__title__btn.v-picker__title__btn--active
+      opacity: $picker-inactive-btn-opacity
+
+  &__btn.v-btn.v-btn--density-default
+    font-size: $time-picker-ampm-title-font-size
+    padding: 0 8px
+    min-width: 52px
+    height: $time-picker-contols-ampm-height
+    &.v-time-picker-controls__ampm__am
+      border-radius: $time-picker-contols-ampm-am-border-radius
+      border: 1px solid
+    &.v-time-picker-controls__ampm__pm
+      border-radius: $time-picker-contols-ampm-pm-border-radius
+      border: 1px solid
+      border-top: none
+    &__active
+      background: rgb(var(--v-theme-primary))
+
+.v-picker__title--landscape
+  .v-time-picker-controls
+    flex-direction: column
+    justify-content: center
+    height: 100%
+
+  .v-time-picker-controls__time
+    text-align: right
+
+    .v-picker__title__btn,
+    span
+      height: $time-picker-landscape-title-btn-height
+      font-size: $time-picker-landscape-title-btn-height
+
+  .v-time-picker-controls__ampm
+    margin: $time-picker-landscape-ampm-title-margin
+    align-self: initial
+    text-align: center
+
+.v-picker--time .v-picker__title--landscape
+  padding: 0
+
+  .v-time-picker-controls__time
+    text-align: center
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
new file mode 100644
index 00000000000..9e25f7557b0
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePickerControls.tsx
@@ -0,0 +1,166 @@
+// Styles
+import './VTimePickerControls.sass'
+
+// Components
+import { VBtn } from '@/components/VBtn'
+import { pad } from '@/components/VDatePicker/util'
+
+// Composables
+import { useLocale } from '@/composables/locale'
+
+// Utilities
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import { SelectingTimes } from './SelectingTimes'
+type Period = 'am' | 'pm'
+
+export const makeVTimePickerControlsProps = propsFactory({
+  ampm: Boolean,
+  ampmReadonly: Boolean,
+  color: String,
+  disabled: Boolean,
+  hour: Number,
+  minute: Number,
+  second: Number,
+  period: String,
+  readonly: Boolean,
+  useSeconds: Boolean,
+  selecting: Number,
+  value: Number,
+}, 'VTimePickerControls')
+
+export const VTimePickerControls = genericComponent()({
+  name: 'VTimePickerControls',
+
+  props: makeVTimePickerControlsProps(),
+
+  emits: {
+    'update:period': (data: Period) => data,
+    'update:selecting': (data: 1 | 2 | 3) => data,
+  },
+
+  setup (props, { emit, slots }) {
+    const { t } = useLocale()
+
+    useRender(() => {
+      let hour = props.hour
+      if (props.ampm) {
+        hour = hour ? ((hour - 1) % 12 + 1) : 12
+      }
+      return (
+        <div class="v-time-picker-controls">
+          <div
+            class={{
+              'v-time-picker-controls__time': true,
+              'v-time-picker-controls__time--with-seconds': props.useSeconds,
+            }}
+          >
+            <VBtn
+              active={ props.selecting === 1 }
+              color={ props.selecting === 1 ? props.color : undefined }
+              variant="tonal"
+              class={{
+                'v-time-picker-controls__time__btn': true,
+                'v-time-picker-controls__time--with-ampm__btn': props.ampm,
+                'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
+              }}
+              text={ props.hour == null ? '--' : pad(`${hour}`) }
+              onClick={ () => emit('update:selecting', SelectingTimes.Hour) }
+            />
+
+            <span
+              class={[
+                'v-time-picker-controls__time__separator',
+                { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
+              ]}
+            >:</span>
+
+            <VBtn
+              active={ props.selecting === 2 }
+              color={ props.selecting === 2 ? props.color : undefined }
+              class={{
+                'v-time-picker-controls__time__btn': true,
+                'v-time-picker-controls__time__btn__active': props.selecting === 2,
+                'v-time-picker-controls__time--with-ampm__btn': props.ampm,
+                'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
+              }}
+              variant="tonal"
+              text={ props.minute == null ? '--' : pad(props.minute) }
+              onClick={ () => emit('update:selecting', SelectingTimes.Minute) }
+            />
+
+            {
+              props.useSeconds && (
+                <span
+                  class={[
+                    'v-time-picker-controls__time__separator',
+                    { 'v-time-picker-controls--with-seconds__time__separator': props.useSeconds },
+                  ]}
+                  key="secondsDivider"
+                >:</span>
+              )
+            }
+
+            {
+              props.useSeconds && (
+                <VBtn
+                  key="secondsVal"
+                  variant="tonal"
+                  onClick={ () => emit('update:selecting', SelectingTimes.Second) }
+                  class={{
+                    'v-time-picker-controls__time__btn': true,
+                    'v-time-picker-controls__time__btn__active': props.selecting === 3,
+                    'v-time-picker-controls__time--with-seconds__btn': props.useSeconds,
+                  }}
+                  text={ props.second == null ? '--' : pad(props.second) }
+                />
+              )
+            }
+
+            {
+              props.ampm && (
+                <div
+                  class={['v-time-picker-controls__ampm', {
+                    'v-time-picker-controls__ampm--readonly': props.ampmReadonly,
+                  }]}
+                >
+                  <VBtn
+                    active={ props.period === 'am' }
+                    color={ props.period === 'am' ? props.color : undefined }
+                    class={{
+                      'v-time-picker-controls__ampm__am': true,
+                      'v-time-picker-controls__ampm__btn': true,
+                      'v-time-picker-controls__ampm__btn__active': props.period === 'am',
+                    }}
+                    text={ t('$vuetify.timePicker.am') }
+                    variant="tonal"
+                    onClick={ () => props.period !== 'am' ? emit('update:period', 'am') : null }
+                  />
+
+                  <VBtn
+                    active={ props.period === 'pm' }
+                    color={ props.period === 'pm' ? props.color : undefined }
+                    class={{
+                      'v-time-picker-controls__ampm__pm': true,
+                      'v-time-picker-controls__ampm__btn': true,
+                      'v-time-picker-controls__ampm__btn__active': props.period === 'pm',
+                    }}
+                    text={ t('$vuetify.timePicker.pm') }
+                    variant="tonal"
+                    onClick={ () => props.period !== 'pm' ? emit('update:period', 'pm') : null }
+                  />
+                </div>
+              )
+            }
+          </div>
+        </div>
+      )
+    })
+
+    return {}
+  },
+
+})
+
+export type VTimePickerControls = InstanceType<typeof VTimePickerControls>
diff --git a/packages/vuetify/src/labs/VTimePicker/_variables.scss b/packages/vuetify/src/labs/VTimePicker/_variables.scss
new file mode 100644
index 00000000000..a956d58552c
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/_variables.scss
@@ -0,0 +1,34 @@
+// @import '../../styles/styles.sass';
+
+$time-picker-padding: 24px !default;
+$time-picker-contols-btn-font: 56px !default;
+$time-picker-contols-btn-height: 80px !default;
+$time-picker-contols-btn-width: 96px !default;
+$time-picker-contols-seconds-btn-width: 64px !default;
+$time-picker-contols-seconds-btn-height: 80px !default;
+$time-picker-contols-seconds-btn-font: 40px !default;
+$time-picker-contols-separator-width: 24px !default;
+$time-picker-contols-ampm-btn-width: 96px !default;
+$time-picker-contols-ampm-btn-height: 80px !default;
+$time-picker-contols-ampm-height: 40px !default;
+$time-picker-contols-ampm-am-border-radius: 4px 4px 0 0 !default;
+$time-picker-contols-ampm-pm-border-radius: 0 0 4px 4px !default;
+$time-picker-ampm-title-font-size: 18px !default;
+$time-picker-number-font-size: 16px !default;
+$time-picker-indicator-size: 40px !default;
+$time-picker-clock-padding: 10px !default;
+$time-picker-clock-max-width: 290px !default;
+$time-picker-clock-hand-height: calc(50% - 4px) !default;
+$time-picker-clock-hand-width: 2px !default;
+$time-picker-clock-hand-left: calc(50% - 1px) !default;
+$time-picker-clock-center-size: 8px !default;
+$time-picker-clock-end-size: 10px !default;
+$time-picker-clock-end-top: -4px !default;
+$time-picker-clock-inner-hand-height: 14px !default;
+$time-picker-clock-inner-offset: 27px !default;
+$time-picker-clock-end-border-width: 2px !default;
+$time-picker-clock-end-border-style: solid !default;
+$time-picker-clock-end-border-color: currentColor !default;
+$time-picker-width: 328px !default;
+$time-picker-landscape-title-btn-height: 55px !default;
+$time-picker-landscape-ampm-title-margin: 16px 0 0 !default;
diff --git a/packages/vuetify/src/labs/VTimePicker/index.ts b/packages/vuetify/src/labs/VTimePicker/index.ts
new file mode 100644
index 00000000000..a0782a8c501
--- /dev/null
+++ b/packages/vuetify/src/labs/VTimePicker/index.ts
@@ -0,0 +1,3 @@
+export { VTimePicker } from './VTimePicker'
+export { VTimePickerClock } from './VTimePickerClock'
+export { VTimePickerControls } from './VTimePickerControls'
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 695e5631bf6..98850084f8e 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -2,7 +2,9 @@ export * from './VCalendar'
 export * from './VConfirmEdit'
 export * from './VEmptyState'
 export * from './VFab'
+export * from './VNumberInput'
 export * from './VPicker'
 export * from './VSparkline'
 export * from './VSpeedDial'
+export * from './VTimePicker'
 export * from './VTreeview'
diff --git a/packages/vuetify/src/locale/af.ts b/packages/vuetify/src/locale/af.ts
index fe1f1fc1f04..16b8461da6e 100644
--- a/packages/vuetify/src/locale/af.ts
+++ b/packages/vuetify/src/locale/af.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ar.ts b/packages/vuetify/src/locale/ar.ts
index d026772887e..b265d61335a 100644
--- a/packages/vuetify/src/locale/ar.ts
+++ b/packages/vuetify/src/locale/ar.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'صباحاً',
     pm: 'مساءً',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/az.ts b/packages/vuetify/src/locale/az.ts
index 1ef2762ad07..1bfeb3ccd86 100644
--- a/packages/vuetify/src/locale/az.ts
+++ b/packages/vuetify/src/locale/az.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/bg.ts b/packages/vuetify/src/locale/bg.ts
index 37a7157d26e..97556f97b8a 100644
--- a/packages/vuetify/src/locale/bg.ts
+++ b/packages/vuetify/src/locale/bg.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'пр. обяд',
     pm: 'сл. обяд',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ca.ts b/packages/vuetify/src/locale/ca.ts
index 5e4ac1d6c08..95e0c4cd1f5 100644
--- a/packages/vuetify/src/locale/ca.ts
+++ b/packages/vuetify/src/locale/ca.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ckb.ts b/packages/vuetify/src/locale/ckb.ts
index 47aae86e933..7a85013a3a0 100644
--- a/packages/vuetify/src/locale/ckb.ts
+++ b/packages/vuetify/src/locale/ckb.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'پێش نیوەڕۆژ',
     pm: 'دوای نیوەڕۆژ',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/cs.ts b/packages/vuetify/src/locale/cs.ts
index cebd73605fc..4ebe6d78d77 100644
--- a/packages/vuetify/src/locale/cs.ts
+++ b/packages/vuetify/src/locale/cs.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/da.ts b/packages/vuetify/src/locale/da.ts
index 5438caedc63..c80f32a89d4 100644
--- a/packages/vuetify/src/locale/da.ts
+++ b/packages/vuetify/src/locale/da.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/de.ts b/packages/vuetify/src/locale/de.ts
index ecaf961cbf7..aa8d614e8aa 100644
--- a/packages/vuetify/src/locale/de.ts
+++ b/packages/vuetify/src/locale/de.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/el.ts b/packages/vuetify/src/locale/el.ts
index 4a713e5d184..9a2c757b2fa 100755
--- a/packages/vuetify/src/locale/el.ts
+++ b/packages/vuetify/src/locale/el.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/en.ts b/packages/vuetify/src/locale/en.ts
index d67f45395c4..c03b6d6395b 100644
--- a/packages/vuetify/src/locale/en.ts
+++ b/packages/vuetify/src/locale/en.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/es.ts b/packages/vuetify/src/locale/es.ts
index 42c3829faf8..81dd808d8db 100644
--- a/packages/vuetify/src/locale/es.ts
+++ b/packages/vuetify/src/locale/es.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/et.ts b/packages/vuetify/src/locale/et.ts
index 2febb34a24b..f6ac5a40204 100644
--- a/packages/vuetify/src/locale/et.ts
+++ b/packages/vuetify/src/locale/et.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/fa.ts b/packages/vuetify/src/locale/fa.ts
index a37882bf45e..87841876b98 100644
--- a/packages/vuetify/src/locale/fa.ts
+++ b/packages/vuetify/src/locale/fa.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'قبل از ظهر',
     pm: 'بعد از ظهر',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/fi.ts b/packages/vuetify/src/locale/fi.ts
index d3e8e82b153..53b916003e9 100644
--- a/packages/vuetify/src/locale/fi.ts
+++ b/packages/vuetify/src/locale/fi.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'ap.',
     pm: 'ip.',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/fr.ts b/packages/vuetify/src/locale/fr.ts
index 39013b2b393..dfd33b512c6 100644
--- a/packages/vuetify/src/locale/fr.ts
+++ b/packages/vuetify/src/locale/fr.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/he.ts b/packages/vuetify/src/locale/he.ts
index 27837c99155..253b5c1708c 100644
--- a/packages/vuetify/src/locale/he.ts
+++ b/packages/vuetify/src/locale/he.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/hr.ts b/packages/vuetify/src/locale/hr.ts
index ee747f10af0..7e82c3be8d2 100644
--- a/packages/vuetify/src/locale/hr.ts
+++ b/packages/vuetify/src/locale/hr.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/hu.ts b/packages/vuetify/src/locale/hu.ts
index e958b2d772b..ae4efb4bded 100644
--- a/packages/vuetify/src/locale/hu.ts
+++ b/packages/vuetify/src/locale/hu.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'de',
     pm: 'du',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/id.ts b/packages/vuetify/src/locale/id.ts
index d537a7960e0..734fa04c40f 100644
--- a/packages/vuetify/src/locale/id.ts
+++ b/packages/vuetify/src/locale/id.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/it.ts b/packages/vuetify/src/locale/it.ts
index eb83b543e43..0614b098ce1 100644
--- a/packages/vuetify/src/locale/it.ts
+++ b/packages/vuetify/src/locale/it.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ja.ts b/packages/vuetify/src/locale/ja.ts
index ff4f9db1338..00211bf9280 100644
--- a/packages/vuetify/src/locale/ja.ts
+++ b/packages/vuetify/src/locale/ja.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/km.ts b/packages/vuetify/src/locale/km.ts
index 36654ceb514..f3f4b238701 100644
--- a/packages/vuetify/src/locale/km.ts
+++ b/packages/vuetify/src/locale/km.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'ព្រឹក',
     pm: 'ល្ងាច',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ko.ts b/packages/vuetify/src/locale/ko.ts
index 8a1e735b177..f0c212dd701 100644
--- a/packages/vuetify/src/locale/ko.ts
+++ b/packages/vuetify/src/locale/ko.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: '오전',
     pm: '오후',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/lt.ts b/packages/vuetify/src/locale/lt.ts
index 3cd19324acb..82174e1330c 100644
--- a/packages/vuetify/src/locale/lt.ts
+++ b/packages/vuetify/src/locale/lt.ts
@@ -1,10 +1,10 @@
 export default {
   badge: 'Ženklelis',
-  open: 'Open',
+  open: 'Atidaryti',
   close: 'Uždaryti',
   confirmEdit: {
     ok: 'OK',
-    cancel: 'Cancel',
+    cancel: 'Atšaukti',
   },
   dataIterator: {
     noResultsText: 'Nerasta atitinkančių įrašų',
@@ -20,7 +20,7 @@ export default {
       activateDescending: 'Suaktyvinkite, jei norite rikiuoti mažėjimo tvarka.',
       activateAscending: 'Suaktyvinkite, jei norite rikiuoti didėjimo tvarka.',
     },
-    sortBy: 'Sort by',
+    sortBy: 'Rikiuoti pagal',
   },
   dataFooter: {
     itemsPerPageText: 'Įrašai per puslapį:',
@@ -32,18 +32,18 @@ export default {
     pageText: '{0}-{1} iš {2}',
   },
   dateRangeInput: {
-    divider: 'to',
+    divider: 'iki',
   },
   datePicker: {
-    itemsSelected: '{0} selected',
+    itemsSelected: '{0} parinkta',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Pasirinkite datas',
+      header: 'Įveskite datas',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Pasirinkite datą',
+    header: 'Įveskite datą',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Įveskite datą',
     },
   },
   noDataText: 'Nėra duomenų',
@@ -51,18 +51,18 @@ export default {
     prev: 'Ankstesnioji skaidrė',
     next: 'Kita skaidrė',
     ariaLabel: {
-      delimiter: 'Carousel slide {0} of {1}',
+      delimiter: 'Skaidrė {0} iš {1}',
     },
   },
   calendar: {
     moreEvents: 'Daugiau {0}',
-    today: 'Today',
+    today: 'Šiandien',
   },
   input: {
-    clear: 'Clear {0}',
-    prependAction: '{0} prepended action',
-    appendAction: '{0} appended action',
-    otp: 'Please enter OTP character {0}',
+    clear: 'Išvalyti {0}',
+    prependAction: '{0} pridėtas veiksmas',
+    appendAction: '{0} pridėtas veiksmas',
+    otp: 'Prašome įvesti OTP simbolį {0}',
   },
   fileInput: {
     counter: '{0} failų',
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Pasirinkite laiką',
   },
   pagination: {
     ariaLabel: {
@@ -79,22 +80,22 @@ export default {
       previous: 'Ankstesnis puslapis',
       page: 'Eiti į puslapį {0}',
       currentPage: 'Dabartinis puslapis, puslapis {0}',
-      first: 'First page',
-      last: 'Last page',
+      first: 'Pirmas puslapis',
+      last: 'Paskutinis puslapis',
     },
   },
   stepper: {
-    next: 'Next',
-    prev: 'Previous',
+    next: 'Kitas',
+    prev: 'Ankstesnis',
   },
   rating: {
     ariaLabel: {
-      item: 'Rating {0} of {1}',
+      item: 'Įvertinimas {0} iš {1}',
     },
   },
-  loading: 'Loading...',
+  loading: 'Kraunama...',
   infiniteScroll: {
-    loadMore: 'Load more',
-    empty: 'No more',
+    loadMore: 'Užkrauti daugiau',
+    empty: 'Daugiau nėra',
   },
 }
diff --git a/packages/vuetify/src/locale/lv.ts b/packages/vuetify/src/locale/lv.ts
index 2ac8a834bbe..911cca0f464 100644
--- a/packages/vuetify/src/locale/lv.ts
+++ b/packages/vuetify/src/locale/lv.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/nl.ts b/packages/vuetify/src/locale/nl.ts
index 8d937d63590..de2fe1fb9e9 100644
--- a/packages/vuetify/src/locale/nl.ts
+++ b/packages/vuetify/src/locale/nl.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/no.ts b/packages/vuetify/src/locale/no.ts
index 9b759347077..3fb78ac86b0 100644
--- a/packages/vuetify/src/locale/no.ts
+++ b/packages/vuetify/src/locale/no.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/pl.ts b/packages/vuetify/src/locale/pl.ts
index a1ae749dd89..bdb1000c1ff 100644
--- a/packages/vuetify/src/locale/pl.ts
+++ b/packages/vuetify/src/locale/pl.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/pt.ts b/packages/vuetify/src/locale/pt.ts
index 675d701efce..52ec4131ddd 100644
--- a/packages/vuetify/src/locale/pt.ts
+++ b/packages/vuetify/src/locale/pt.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ro.ts b/packages/vuetify/src/locale/ro.ts
index 11f7363c1da..e0016f9088f 100644
--- a/packages/vuetify/src/locale/ro.ts
+++ b/packages/vuetify/src/locale/ro.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/ru.ts b/packages/vuetify/src/locale/ru.ts
index 12918906a4a..7af99bc3779 100644
--- a/packages/vuetify/src/locale/ru.ts
+++ b/packages/vuetify/src/locale/ru.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/sk.ts b/packages/vuetify/src/locale/sk.ts
index cb96e06363a..eef18e9739b 100644
--- a/packages/vuetify/src/locale/sk.ts
+++ b/packages/vuetify/src/locale/sk.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/sl.ts b/packages/vuetify/src/locale/sl.ts
index a7d64ad7486..9f5fe98b7d3 100644
--- a/packages/vuetify/src/locale/sl.ts
+++ b/packages/vuetify/src/locale/sl.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/sr-Cyrl.ts b/packages/vuetify/src/locale/sr-Cyrl.ts
index fd5fea9a171..f923df03f01 100644
--- a/packages/vuetify/src/locale/sr-Cyrl.ts
+++ b/packages/vuetify/src/locale/sr-Cyrl.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/sr-Latn.ts b/packages/vuetify/src/locale/sr-Latn.ts
index 4c51facdcd2..98dc97ab4ce 100644
--- a/packages/vuetify/src/locale/sr-Latn.ts
+++ b/packages/vuetify/src/locale/sr-Latn.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/sv.ts b/packages/vuetify/src/locale/sv.ts
index 6e8ab1897ad..5818b705339 100644
--- a/packages/vuetify/src/locale/sv.ts
+++ b/packages/vuetify/src/locale/sv.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/th.ts b/packages/vuetify/src/locale/th.ts
index a140962f26a..cd22cdcdd58 100644
--- a/packages/vuetify/src/locale/th.ts
+++ b/packages/vuetify/src/locale/th.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/tr.ts b/packages/vuetify/src/locale/tr.ts
index c8780f43569..7f0242c6b81 100644
--- a/packages/vuetify/src/locale/tr.ts
+++ b/packages/vuetify/src/locale/tr.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/uk.ts b/packages/vuetify/src/locale/uk.ts
index e60642249f4..ab6af48c040 100644
--- a/packages/vuetify/src/locale/uk.ts
+++ b/packages/vuetify/src/locale/uk.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/vi.ts b/packages/vuetify/src/locale/vi.ts
index 9dfed24c5d7..4d0a1b7b27e 100644
--- a/packages/vuetify/src/locale/vi.ts
+++ b/packages/vuetify/src/locale/vi.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'SA',
     pm: 'CH',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/zh-Hans.ts b/packages/vuetify/src/locale/zh-Hans.ts
index 71af6b4fdb4..6dddccf4a68 100644
--- a/packages/vuetify/src/locale/zh-Hans.ts
+++ b/packages/vuetify/src/locale/zh-Hans.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/locale/zh-Hant.ts b/packages/vuetify/src/locale/zh-Hant.ts
index 4938acef450..013282d2f85 100644
--- a/packages/vuetify/src/locale/zh-Hant.ts
+++ b/packages/vuetify/src/locale/zh-Hant.ts
@@ -71,6 +71,7 @@ export default {
   timePicker: {
     am: 'AM',
     pm: 'PM',
+    title: 'Select Time',
   },
   pagination: {
     ariaLabel: {
diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
index 537ab820a73..e29c25c62dd 100644
--- a/packages/vuetify/src/styles/settings/_variables.scss
+++ b/packages/vuetify/src/styles/settings/_variables.scss
@@ -18,6 +18,7 @@ $borders: map-deep-merge(
   (
     0: 0,
     null: thin,
+    thin: thin,
     sm: 1px,
     md: 2px,
     lg: 4px,
diff --git a/yarn.lock b/yarn.lock
index ecc6bb001a6..daa8202b6d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -180,12 +180,12 @@
     "@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.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==
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
+  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
   dependencies:
-    "@babel/highlight" "^7.23.4"
-    chalk "^2.4.2"
+    "@babel/highlight" "^7.24.2"
+    picocolors "^1.0.0"
 
 "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.3", "@babel/compat-data@^7.23.5":
   version "7.23.5"
@@ -412,14 +412,15 @@
     "@babel/traverse" "^7.23.7"
     "@babel/types" "^7.23.6"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.23.4":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
-  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
+  integrity sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==
   dependencies:
     "@babel/helper-validator-identifier" "^7.22.20"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
+    picocolors "^1.0.0"
 
 "@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"
@@ -3759,6 +3760,13 @@
     hookable "^5.5.3"
     unhead "1.8.9"
 
+"@vercel/analytics@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.2.2.tgz#715d8f203a170c06ba36b363e03b048c03060d5d"
+  integrity sha512-X0rctVWkQV1e5Y300ehVNqpOfSOufo7ieA5PIdna8yX/U7Vjz0GFsGf4qvAhxV02uQ2CVt7GYcrFfddXXK2Y4A==
+  dependencies:
+    server-only "^0.0.1"
+
 "@vitejs/plugin-basic-ssl@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.2.tgz#bac6553842b215f17b052d27c82e2b2ef29236dc"
@@ -3949,10 +3957,10 @@
     find-cache-dir "^3.3.2"
     upath "^2.0.1"
 
-"@vuetify/one@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.3.1.tgz#5d924d91a9c57db7791e6be43052ec8cf4a9635b"
-  integrity sha512-uv/l+pCU5JqRoWUkMIJG8vVAqO5uj3omhjcPwettF4aZ62ydxCBmMBxsrnVV2826t0XMPY+k3i7EeOC8+adDpA==
+"@vuetify/one@^1.5.4":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.5.4.tgz#c312eb99256c50d60c7099c2d445d949e2141887"
+  integrity sha512-gfgRqa2957pKAxqNH5oN1LgKxPh7NTNo+ZWZkjqNnpy/p19b8YVS9ox/GxvkEIT/LvMWJtQDdvy92+vmRCzpng==
 
 "@vueuse/head@^1.3.1":
   version "1.3.1"
@@ -5338,6 +5346,14 @@ 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"
@@ -5426,6 +5442,14 @@ 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"
@@ -5441,20 +5465,34 @@ conventional-changelog-angular@^6.0.0:
   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@^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"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-4.1.0.tgz#e3abc622f82d8923a8603eec19411fae0048e72b"
-  integrity sha512-MscvILWZ6nWOoC+p/3Nn3D2cVLkjeQjyZPUr0bQ+vUORE/SPrkClJh8BOoMNpS4yk+zFJ5LlgXACxH6XGQoRXA==
+conventional-changelog-cli@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-3.0.0.tgz#e5b1e67550702b098b4e03d8401927fe4c462f3e"
+  integrity sha512-3zMYi0IrfNd6AAHdPMrcgCg5DbcffiqNaEBf8cYrlntXPbBIXaELTbnRmUy5TQAe0Hkgi0J6+/VmRCkkJQflcQ==
   dependencies:
     add-stream "^1.0.0"
-    conventional-changelog "^5.1.0"
-    meow "^12.0.1"
-    tempfile "^5.0.0"
+    conventional-changelog "^4.0.0"
+    meow "^8.1.2"
+    tempfile "^3.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@^3.0.0:
   version "3.0.0"
@@ -5468,7 +5506,7 @@ conventional-changelog-conventionalcommits@^6.0.0:
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-core@^3.1.6:
+conventional-changelog-core@^3.1.0, 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==
@@ -5504,26 +5542,69 @@ conventional-changelog-core@^5.0.0:
     read-pkg "^3.0.0"
     read-pkg-up "^3.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@^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-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@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-4.0.0.tgz#cdcaee9bc14ffc97540ecef6771c472e54f3d75e"
   integrity sha512-nEZ9byP89hIU0dMx37JXQkE1IpMmqKtsaR24X7aM3L6Yy/uAtbb+ogqthuNYJkeO1HyvK7JsX84z8649hvp43Q==
 
+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-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-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@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-4.0.0.tgz#bbfea102b8ea66a781e245d43ead0608842ae326"
   integrity sha512-TTIN5CyzRMf8PUwyy4IOLmLV2DFmPtasKN+x7EQKzwSX8086XYwo+NeaeA3VUT8bvKaIy5z/JoWUvi7huUOgaw==
 
+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"
+
+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-jshint@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-3.0.0.tgz#a1743e77ffdee03b704af6faa199520d3a90a868"
@@ -5531,7 +5612,12 @@ conventional-changelog-jshint@^3.0.0:
   dependencies:
     compare-func "^2.0.0"
 
-conventional-changelog-preset-loader@3.0.0, conventional-changelog-preset-loader@^2.1.1, conventional-changelog-preset-loader@^3.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@^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==
@@ -5573,7 +5659,24 @@ conventional-changelog-writer@^6.0.0:
     semver "^7.0.0"
     split "^1.0.1"
 
-conventional-changelog@4.0.0, conventional-changelog@^2.0.0, conventional-changelog@^5.1.0:
+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@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-4.0.0.tgz#51a8d7765e5837bb29b3ef1cf395d6ef594827a9"
   integrity sha512-JbZjwE1PzxQCvm+HUTIr+pbSekS8qdOZzMakdFyPtdkEWwFvwEJYONzjgMm0txCb2yBcIcfKDmg8xtCKTdecNQ==
@@ -6356,6 +6459,13 @@ 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"
@@ -10116,9 +10226,9 @@ lru-cache@^6.0.0:
     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==
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
 macos-release@^2.2.0:
   version "2.3.0"
@@ -10321,11 +10431,6 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
-meow@^12.0.1:
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-12.1.1.tgz#e558dddbab12477b69b2e9a2728c327f191bace6"
-  integrity sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==
-
 meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -12765,6 +12870,11 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
+server-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -13512,11 +13622,6 @@ temp-dir@^2.0.0:
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
   integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
 
-temp-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-3.0.0.tgz#7f147b42ee41234cc6ba3138cd8e8aa2302acffa"
-  integrity sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==
-
 temp-write@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-3.4.0.tgz#8cff630fb7e9da05f047c74ce4ce4d685457d492"
@@ -13529,12 +13634,13 @@ temp-write@^3.4.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
-tempfile@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-5.0.0.tgz#40c141e441709fe2d9c17c138e81d4c33fbc9e03"
-  integrity sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==
+tempfile@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-3.0.0.tgz#5376a3492de7c54150d0cc0612c3f00e2cdaf76c"
+  integrity sha512-uNFCg478XovRi85iD42egu+eSFUmmka750Jy7L5tfHI5hQKKtbPnxaSaXAbBqCDYrw3wx4tXjKwci4/QmsZJxw==
   dependencies:
-    temp-dir "^3.0.0"
+    temp-dir "^2.0.0"
+    uuid "^3.3.2"
 
 tempy@^0.6.0:
   version "0.6.0"
@@ -13913,9 +14019,9 @@ type-fest@^0.8.1:
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
 type-fest@^4.8.3:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.9.0.tgz#d29c8efe5b1e703feeb29cef23d887b2f479844d"
-  integrity sha512-KS/6lh/ynPGiHD/LnAobrEFq3Ad4pBzOlJ1wAnJx9N4EYoqFhMfLIBjUT2UEx4wg5ZE+cC1ob6DCSpppVo+rtg==
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.15.0.tgz#21da206b89c15774cc718c4f2d693e13a1a14a43"
+  integrity sha512-tB9lu0pQpX5KJq54g+oHOLumOx+pMep4RaM6liXh2PKmVRFF+/vAtUP0ZaJ0kOySfVNjF6doBWPHhBhISKdlIA==
 
 typed-array-buffer@^1.0.0:
   version "1.0.0"