@vuetify/nightly 3.7.0-beta.1-dev.2024-07-30 → 3.7.0-beta.1-dev.2024-08-08

package/lib/components/VDialog/VDialog.css

@@ -22,6 +22,11 @@
   --v-scrollbar-offset: 0px;
   border-radius: 4px;
   overflow-y: auto;
+}
+.v-dialog > .v-overlay__content > .v-card,
+.v-dialog > .v-overlay__content > .v-sheet,
+.v-dialog > .v-overlay__content > form > .v-card,
+.v-dialog > .v-overlay__content > form > .v-sheet {
   box-shadow: 0px 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 46px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-dialog > .v-overlay__content > .v-card,

package/lib/components/VDivider/VDivider.css

@@ -5,6 +5,8 @@
   max-height: 0px;
   opacity: var(--v-border-opacity);
   transition: inherit;
+}
+.v-divider {
   border-style: solid;
   border-width: thin 0 0 0;
 }

package/lib/components/VExpansionPanel/VExpansionPanel.css

@@ -94,15 +94,19 @@
   min-height: 64px;
 }
 
+.v-expansion-panel__shadow {
+  border-radius: inherit;
+  z-index: -1;
+}
 .v-expansion-panel__shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+.v-expansion-panel__shadow {
   box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  border-radius: inherit;
-  z-index: -1;
 }
 
 .v-expansion-panel-title {
@@ -146,15 +150,17 @@
   }
 }
 
+.v-expansion-panel-title__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  opacity: 0;
+}
 .v-expansion-panel-title__overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: currentColor;
-  border-radius: inherit;
-  opacity: 0;
 }
 
 .v-expansion-panel-title__icon {

package/lib/components/VExpansionPanel/VExpansionPanel.sass

@@ -108,10 +108,10 @@
           min-height: $expansion-panel-active-title-min-height
 
   .v-expansion-panel__shadow
-    @include tools.absolute()
-    @include tools.elevation(2)
     border-radius: inherit
     z-index: -1
+    @include tools.absolute()
+    @include tools.elevation(2)
 
   .v-expansion-panel-title
     align-items: center
@@ -134,10 +134,10 @@
       @include tools.active-states('.v-expansion-panel-title__overlay')
 
   .v-expansion-panel-title__overlay
-    @include tools.absolute()
     background-color: currentColor
     border-radius: inherit
     opacity: 0
+    @include tools.absolute()
 
   .v-expansion-panel-title__icon
     display: inline-flex

package/lib/components/VField/VField.css

@@ -1,6 +1,5 @@
 /* region INPUT */
 .v-field {
-  --v-theme-overlay-multiplier: 1;
   display: grid;
   grid-template-areas: "prepend-inner field clear append-inner";
   grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
@@ -12,6 +11,7 @@
   flex: 1 0;
   grid-area: control;
   position: relative;
+  --v-theme-overlay-multiplier: 1;
   --v-field-padding-start: 16px;
   --v-field-padding-end: 16px;
   --v-field-padding-top: 8px;
@@ -39,12 +39,16 @@
   background: rgb(var(--v-theme-surface));
   border-color: transparent;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-field--variant-solo, .v-field--variant-solo-filled {
   box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-field--variant-solo-inverted {
   background: rgb(var(--v-theme-surface));
   border-color: transparent;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-field--variant-solo-inverted {
   box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-field--variant-solo-inverted.v-field--focused {
@@ -367,6 +371,8 @@ textarea.v-field__input::placeholder {
   border-width: 0 0 var(--v-field-border-width);
   opacity: var(--v-field-border-opacity);
   transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
   content: "";
   position: absolute;
   top: 0;
@@ -380,6 +386,8 @@ textarea.v-field__input::placeholder {
   border-width: 0 0 2px;
   transform: scaleX(0);
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
   content: "";
   position: absolute;
   top: 0;
@@ -432,6 +440,8 @@ textarea.v-field__input::placeholder {
 .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
   opacity: var(--v-field-border-opacity);
   transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
   content: "";
   position: absolute;
   top: 0;
@@ -494,6 +504,8 @@ textarea.v-field__input::placeholder {
 .v-field__overlay {
   border-radius: inherit;
   pointer-events: none;
+}
+.v-field__overlay {
   position: absolute;
   top: 0;
   left: 0;

package/lib/components/VField/VField.sass

@@ -8,8 +8,6 @@
 @include tools.layer('components')
   /* region INPUT */
   .v-field
-    --v-theme-overlay-multiplier: 1
-
     display: grid
     grid-template-areas: "prepend-inner field clear append-inner"
     grid-template-columns: min-content minmax(0, 1fr) min-content min-content
@@ -22,10 +20,7 @@
     grid-area: control
     position: relative
 
-    &--disabled
-      opacity: var(--v-disabled-opacity)
-      pointer-events: none
-
+    --v-theme-overlay-multiplier: 1
     --v-field-padding-start: #{$field-control-padding-start}
     --v-field-padding-end: #{$field-control-padding-end}
     --v-field-padding-top: #{$field-control-padding-top}
@@ -33,6 +28,10 @@
     --v-field-input-padding-top: #{$field-input-padding-top}
     --v-field-input-padding-bottom: #{$field-input-padding-bottom}
 
+    &--disabled
+      opacity: var(--v-disabled-opacity)
+      pointer-events: none
+
     .v-chip
       --v-chip-height: #{$field-chip-height}
 
@@ -50,14 +49,12 @@
       background: $field-control-solo-background
       border-color: transparent
       color: $field-control-solo-color
-
       @include tools.elevation($field-control-solo-elevation)
 
     &--variant-solo-inverted
       background: $field-control-solo-background
       border-color: transparent
       color: $field-control-solo-inverted-color
-
       @include tools.elevation($field-control-solo-elevation)
 
       &.v-field--focused

package/lib/components/VFooter/VFooter.css

@@ -6,24 +6,32 @@
   position: relative;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: height, width, transform, max-width, left, right, top, bottom;
+}
+.v-footer {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  border-radius: 0;
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-footer--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-footer {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
 .v-footer--absolute {
   position: absolute;
 }
 .v-footer--fixed {
   position: fixed;
 }
+.v-footer {
+  border-radius: 0;
+}
+.v-footer {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
 .v-footer--rounded {
   border-radius: 4px;
 }

package/lib/components/VFooter/VFooter.mjs

@@ -11,8 +11,9 @@ import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs
 import { useResizeObserver } from "../../composables/resizeObserver.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
-import { computed, shallowRef, toRef } from 'vue';
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
+import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 export const makeVFooterProps = propsFactory({
   app: Boolean,
@@ -38,6 +39,8 @@ export const VFooter = genericComponent()({
     let {
       slots
     } = _ref;
+    const layoutItemStyles = ref();
+    const layoutIsReady = shallowRef();
     const {
       themeClasses
     } = provideTheme(props);
@@ -62,17 +65,20 @@ export const VFooter = genericComponent()({
       autoHeight.value = entries[0].target.clientHeight;
     });
     const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
-    const {
-      layoutItemStyles,
-      layoutIsReady
-    } = useLayoutItem({
-      id: props.name,
-      order: computed(() => parseInt(props.order, 10)),
-      position: computed(() => 'bottom'),
-      layoutSize: height,
-      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
-      active: computed(() => props.app),
-      absolute: toRef(props, 'absolute')
+    useToggleScope(() => props.app, () => {
+      const layout = useLayoutItem({
+        id: props.name,
+        order: computed(() => parseInt(props.order, 10)),
+        position: computed(() => 'bottom'),
+        layoutSize: height,
+        elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
+        active: computed(() => props.app),
+        absolute: toRef(props, 'absolute')
+      });
+      watchEffect(() => {
+        layoutItemStyles.value = layout.layoutItemStyles.value;
+        layoutIsReady.value = layout.layoutIsReady;
+      });
     });
     useRender(() => _createVNode(props.tag, {
       "ref": resizeRef,
@@ -81,7 +87,7 @@ export const VFooter = genericComponent()({
         height: convertToUnit(props.height)
       }, props.style]
     }, slots));
-    return props.app ? layoutIsReady : {};
+    return props.app ? layoutIsReady.value : {};
   }
 });
 //# sourceMappingURL=VFooter.mjs.map

package/lib/components/VFooter/VFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VFooter.mjs","names":["makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","useResizeObserver","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVFooterProps","app","Boolean","color","String","height","type","Number","default","tag","VFooter","name","props","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","autoHeight","resizeRef","entries","length","value","target","clientHeight","parseInt","layoutItemStyles","layoutIsReady","id","order","position","layoutSize","elementSize","undefined","active","absolute","_createVNode","class","style"],"sources":["../../../src/components/VFooter/VFooter.tsx"],"sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVFooterProps = propsFactory({\n  app: Boolean,\n  color: String,\n  height: {\n    type: [Number, String],\n    default: 'auto',\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'footer' }),\n  ...makeThemeProps(),\n}, 'VFooter')\n\nexport const VFooter = genericComponent()({\n  name: 'VFooter',\n\n  props: makeVFooterProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const autoHeight = shallowRef(32)\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      autoHeight.value = entries[0].target.clientHeight\n    })\n    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))\n    const { layoutItemStyles, layoutIsReady } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: height,\n      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),\n      active: computed(() => props.app),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ resizeRef }\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          props.app ? layoutItemStyles.value : {\n            height: convertToUnit(props.height),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return props.app ? layoutIsReady : {}\n  },\n})\n\nexport type VFooter = InstanceType<typeof VFooter>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VFooter.mjs","names":["makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","useResizeObserver","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useToggleScope","computed","ref","shallowRef","toRef","watchEffect","convertToUnit","genericComponent","propsFactory","useRender","makeVFooterProps","app","Boolean","color","String","height","type","Number","default","tag","VFooter","name","props","setup","_ref","slots","layoutItemStyles","layoutIsReady","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","autoHeight","resizeRef","entries","length","value","target","clientHeight","parseInt","layout","id","order","position","layoutSize","elementSize","undefined","active","absolute","_createVNode","class","style"],"sources":["../../../src/components/VFooter/VFooter.tsx"],"sourcesContent":["// Styles\nimport './VFooter.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watchEffect } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVFooterProps = propsFactory({\n  app: Boolean,\n  color: String,\n  height: {\n    type: [Number, String],\n    default: 'auto',\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'footer' }),\n  ...makeThemeProps(),\n}, 'VFooter')\n\nexport const VFooter = genericComponent()({\n  name: 'VFooter',\n\n  props: makeVFooterProps(),\n\n  setup (props, { slots }) {\n    const layoutItemStyles = ref()\n    const layoutIsReady = shallowRef()\n\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const autoHeight = shallowRef(32)\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!entries.length) return\n      autoHeight.value = entries[0].target.clientHeight\n    })\n    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))\n\n    useToggleScope(() => props.app, () => {\n      const layout = useLayoutItem({\n        id: props.name,\n        order: computed(() => parseInt(props.order, 10)),\n        position: computed(() => 'bottom'),\n        layoutSize: height,\n        elementSize: computed(() => props.height === 'auto' ? undefined : height.value),\n        active: computed(() => props.app),\n        absolute: toRef(props, 'absolute'),\n      })\n\n      watchEffect(() => {\n        layoutItemStyles.value = layout.layoutItemStyles.value\n        layoutIsReady.value = layout.layoutIsReady\n      })\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ resizeRef }\n        class={[\n          'v-footer',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          props.app ? layoutItemStyles.value : {\n            height: convertToUnit(props.height),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return props.app ? layoutIsReady.value : {}\n  },\n})\n\nexport type VFooter = InstanceType<typeof VFooter>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VFooter/index.d.mts

@@ -31,7 +31,7 @@ declare const VFooter: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, any, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         absolute: boolean;
         height: string | number;
         order: string | number;
@@ -101,7 +101,7 @@ declare const VFooter: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, {}, {}, {}, {}, {
+    }, any, {}, {}, {}, {
         absolute: boolean;
         height: string | number;
         order: string | number;
@@ -139,7 +139,7 @@ declare const VFooter: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+}, any, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     absolute: boolean;
     height: string | number;
     order: string | number;

package/lib/components/VGrid/VGrid.sass

@@ -19,7 +19,7 @@
   //
   // Rows contain and clear the floats of your columns.
   .v-row
-    +make-row
+    @include make-row
 
     & + .v-row
       margin-top: settings.$grid-gutter * .5

package/lib/components/VGrid/_mixins.sass

@@ -12,7 +12,7 @@
 // For each breakpoint, define the maximum width of the container in a media query
 @mixin make-container-max-widths($max-widths: settings.$container-max-widths, $breakpoints: settings.$grid-breakpoints)
   @each $breakpoint, $container-max-width in $max-widths
-    +tools.media-breakpoint-up($breakpoint, $breakpoints)
+    @include tools.media-breakpoint-up($breakpoint, $breakpoints)
       max-width: $container-max-width
 
 @mixin make-row($gutter: settings.$grid-gutter)
@@ -53,7 +53,7 @@
     .v-col#{$infix},
     .v-col#{$infix}-auto
       @extend %grid-column
-    +tools.media-breakpoint-up($breakpoint, $breakpoints)
+    @include tools.media-breakpoint-up($breakpoint, $breakpoints)
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .v-col#{$infix}
         flex-basis: 0
@@ -65,10 +65,10 @@
         max-width: 100% // Reset earlier grid tiers
       @for $i from 1 through $columns
         .v-col#{$infix}-#{$i}
-          +make-col($i, $columns)
+          @include make-col($i, $columns)
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through $columns - 1
         @if not ($infix == "" and $i == 0)
           // Avoid emitting useless .offset-0
           .offset#{$infix}-#{$i}
-            +make-col-offset($i, $columns)
+            @include make-col-offset($i, $columns)

package/lib/components/VImg/VImg.css

@@ -24,6 +24,12 @@
 .v-img__placeholder,
 .v-img__error {
   z-index: -1;
+}
+.v-img__img,
+.v-img__picture,
+.v-img__gradient,
+.v-img__placeholder,
+.v-img__error {
   position: absolute;
   top: 0;
   left: 0;

package/lib/components/VKbd/VKbd.css

@@ -6,5 +6,7 @@
   font-size: 85%;
   font-weight: normal;
   padding: 0.2em 0.4rem;
+}
+.v-kbd {
   box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }

package/lib/components/VList/VList.css

@@ -3,18 +3,26 @@
   padding: 8px 0;
   position: relative;
   outline: none;
+}
+.v-list {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  border-radius: 0;
-  background: rgba(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-list--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-list {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-list {
+  border-radius: 0;
+}
+.v-list {
+  background: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
 .v-list--disabled {
   pointer-events: none;
   user-select: none;

package/lib/components/VList/VListItem.css

@@ -9,10 +9,11 @@
   padding: 4px 16px;
   position: relative;
   text-decoration: none;
+}
+.v-list-item {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  border-radius: 0;
 }
 .v-list-item--border {
   border-width: thin;
@@ -43,6 +44,9 @@
     opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
   }
 }
+.v-list-item {
+  border-radius: 0;
+}
 .v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-tonal {
   background: transparent;
   color: inherit;
@@ -86,6 +90,13 @@
   position: absolute;
 }
 @supports selector(:focus-visible) {
+  .v-list-item::after {
+    pointer-events: none;
+    border: 2px solid currentColor;
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
   .v-list-item::after {
     content: "";
     position: absolute;
@@ -93,11 +104,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    pointer-events: none;
-    border: 2px solid currentColor;
-    border-radius: 4px;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
   }
   .v-list-item:focus-visible::after {
     opacity: calc(0.15 * var(--v-theme-overlay-multiplier));
@@ -251,11 +257,6 @@
   text-overflow: ellipsis;
   overflow-wrap: break-word;
   word-break: initial;
-  font-size: 0.875rem;
-  font-weight: 400;
-  letter-spacing: 0.0178571429em;
-  line-height: 1rem;
-  text-transform: none;
 }
 .v-list-item--one-line .v-list-item-subtitle {
   -webkit-line-clamp: 1;
@@ -266,6 +267,13 @@
 .v-list-item--three-line .v-list-item-subtitle {
   -webkit-line-clamp: 3;
 }
+.v-list-item-subtitle {
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  line-height: 1rem;
+  text-transform: none;
+}
 .v-list-item--nav .v-list-item-subtitle {
   font-size: 0.75rem;
   font-weight: 400;
@@ -282,6 +290,8 @@
   text-overflow: ellipsis;
   word-break: normal;
   word-wrap: break-word;
+}
+.v-list-item-title {
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: 0.009375em;

package/lib/components/VList/VListItem.sass

@@ -25,12 +25,12 @@
 
     @supports selector(:focus-visible)
       &::after
-        @include tools.absolute(true)
         pointer-events: none
         border: 2px solid currentColor
         border-radius: 4px
         opacity: 0
         transition: opacity .2s ease-in-out
+        @include tools.absolute(true)
 
       &:focus-visible::after
         opacity: calc(.15 * var(--v-theme-overlay-multiplier))

package/lib/components/VMain/VMain.css

@@ -13,6 +13,8 @@
 }
 .v-main--scrollable {
   display: flex;
+}
+.v-main--scrollable {
   position: absolute;
   top: 0;
   left: 0;

package/lib/components/VMenu/VMenu.css

@@ -1,6 +1,8 @@
 .v-menu > .v-overlay__content {
   display: flex;
   flex-direction: column;
+}
+.v-menu > .v-overlay__content {
   border-radius: 4px;
 }
 .v-menu > .v-overlay__content > .v-card,
@@ -10,5 +12,9 @@
   border-radius: inherit;
   overflow: auto;
   height: 100%;
+}
+.v-menu > .v-overlay__content > .v-card,
+.v-menu > .v-overlay__content > .v-sheet,
+.v-menu > .v-overlay__content > .v-list {
   box-shadow: 0px 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 3px 14px 2px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }

package/lib/components/VMenu/VMenu.mjs

@@ -63,7 +63,7 @@ export const VMenu = genericComponent()({
       },
       closeParents(e) {
         setTimeout(() => {
-          if (!openChildren.value.size && !props.persistent && (e == null || e && !isClickInsideElement(e, overlay.value.contentEl))) {
+          if (!openChildren.value.size && !props.persistent && (e == null || overlay.value?.contentEl && !isClickInsideElement(e, overlay.value.contentEl))) {
             isActive.value = false;
             parent?.closeParents();
           }