diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass
index b202f2006f3..69d72605883 100644
--- a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass
+++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass
@@ -1,23 +1,32 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
// Transition
.bottom-sheet-transition
- &-enter
+ &-enter-from
transform: translateY(100%)
&-leave-to
transform: translateY(100%)
// Block
-.v-bottom-sheet.v-dialog
- align-self: flex-end
- border-radius: 0
- flex: 0 1 auto
- margin: 0
- overflow: visible
+.v-bottom-sheet
+ > .v-bottom-sheet__content.v-overlay__content
+ align-self: flex-end
+ border-radius: 0
+ flex: 0 1 auto
+ left: 0
+ right: 0
+ margin-inline-start: 0
+ margin-inline-end: 0
+ margin-bottom: 0
+ transition-duration: .3s
+ width: 100%
+ max-width: 100%
+ overflow: visible
&.v-bottom-sheet--inset
max-width: none
- @media #{map-get($display-breakpoints, 'sm-and-up')}
- max-width: $bottom-sheet-inset-width
+ // @media #{map-get(variables.$display-breakpoints, 'sm-and-up')}
+ // max-width: $bottom-sheet-inset-width
diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts
deleted file mode 100644
index f97093bab35..00000000000
--- a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VBottomSheet.sass'
-
-// Extensions
-import VDialog from '../VDialog/VDialog'
-
-/* @vue/component */
-export default VDialog.extend({
- name: 'v-bottom-sheet',
-
- props: {
- inset: Boolean,
- maxWidth: [String, Number],
- transition: {
- type: String,
- default: 'bottom-sheet-transition',
- },
- },
-
- computed: {
- classes (): object {
- return {
- ...VDialog.options.computed.classes.call(this),
- 'v-bottom-sheet': true,
- 'v-bottom-sheet--inset': this.inset,
- }
- },
- },
-})
diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx
new file mode 100644
index 00000000000..f1bb833c22d
--- /dev/null
+++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx
@@ -0,0 +1,77 @@
+// Styles
+import './VBottomSheet.sass'
+
+// Components
+import { makeVDialogProps, VDialog } from '@/components/VDialog/VDialog'
+
+// Utilities
+import { genericComponent, useRender } from '@/util'
+
+export const VBottomSheet = genericComponent()({
+ name: 'VBottomSheet',
+
+ props: {
+ inset: Boolean,
+
+ ...makeVDialogProps({
+ contentClass: 'v-bottom-sheet__content',
+ transition: 'bottom-sheet-transition',
+ }),
+ },
+
+ setup (props, { slots }) {
+ useRender(() => {
+ const [dialogProps] = VDialog.filterProps(props)
+
+ return (
+
+ {{
+ activator: slots.activator,
+ default: slots.default,
+ }}
+
+ )
+ })
+
+ return {}
+ },
+})
+
+export type VBottomSheet = InstanceType
+
+// import './VBottomSheet.sass'
+
+// // Extensions
+// import VDialog from '../VDialog/VDialog'
+
+// /* @vue/component */
+// export default VDialog.extend({
+// name: 'v-bottom-sheet',
+
+// props: {
+// inset: Boolean,
+// maxWidth: [String, Number],
+// transition: {
+// type: String,
+// default: 'bottom-sheet-transition',
+// },
+// },
+
+// computed: {
+// classes (): object {
+// return {
+// ...VDialog.options.computed.classes.call(this),
+// 'v-bottom-sheet': true,
+// 'v-bottom-sheet--inset': this.inset,
+// }
+// },
+// },
+// })
diff --git a/packages/vuetify/src/components/VBottomSheet/_variables.scss b/packages/vuetify/src/components/VBottomSheet/_variables.scss
index a989b8a469a..0b4f2d212b6 100644
--- a/packages/vuetify/src/components/VBottomSheet/_variables.scss
+++ b/packages/vuetify/src/components/VBottomSheet/_variables.scss
@@ -1,3 +1,3 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
$bottom-sheet-inset-width: 70% !default;
diff --git a/packages/vuetify/src/components/VBottomSheet/index.ts b/packages/vuetify/src/components/VBottomSheet/index.ts
index 13dcfc4c43c..4b6fbc2ab6b 100644
--- a/packages/vuetify/src/components/VBottomSheet/index.ts
+++ b/packages/vuetify/src/components/VBottomSheet/index.ts
@@ -1,4 +1 @@
-import VBottomSheet from './VBottomSheet'
-
-export { VBottomSheet }
-export default VBottomSheet
+export { VBottomSheet } from './VBottomSheet'
diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx
index 41cef3376f3..77e28a3dcfc 100644
--- a/packages/vuetify/src/components/VDialog/VDialog.tsx
+++ b/packages/vuetify/src/components/VDialog/VDialog.tsx
@@ -13,30 +13,32 @@ import { forwardRefs } from '@/composables/forwardRefs'
// Utilities
import { computed, mergeProps, nextTick, ref, watch } from 'vue'
-import { genericComponent, IN_BROWSER, useRender } from '@/util'
+import { genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'
import { makeVOverlayProps } from '@/components/VOverlay/VOverlay'
// Types
import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
+export const makeVDialogProps = propsFactory({
+ fullscreen: Boolean,
+ retainFocus: {
+ type: Boolean,
+ default: true,
+ },
+ scrollable: Boolean,
+
+ ...makeVOverlayProps({
+ origin: 'center center' as const,
+ scrollStrategy: 'block' as const,
+ transition: { component: VDialogTransition },
+ zIndex: 2400,
+ }),
+}, 'VDialog')
+
export const VDialog = genericComponent()({
name: 'VDialog',
- props: {
- fullscreen: Boolean,
- retainFocus: {
- type: Boolean,
- default: true,
- },
- scrollable: Boolean,
-
- ...makeVOverlayProps({
- origin: 'center center' as const,
- scrollStrategy: 'block' as const,
- transition: { component: VDialogTransition },
- zIndex: 2400,
- }),
- },
+ props: makeVDialogProps(),
emits: {
'update:modelValue': (value: boolean) => true,
diff --git a/packages/vuetify/src/components/index.ts b/packages/vuetify/src/components/index.ts
index 38e70426b6e..e43b109f5ed 100644
--- a/packages/vuetify/src/components/index.ts
+++ b/packages/vuetify/src/components/index.ts
@@ -6,7 +6,7 @@ export * from './VAvatar'
export * from './VBadge'
export * from './VBanner'
export * from './VBottomNavigation'
-// export * from './VBottomSheet'
+export * from './VBottomSheet'
export * from './VBreadcrumbs'
export * from './VBtn'
export * from './VBtnGroup'