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

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

@@ -626,7 +626,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -654,8 +654,9 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -681,6 +682,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -731,7 +733,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -757,6 +759,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -810,7 +813,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
         autoSelectFirst?: boolean | "exact" | undefined;
     } & {
@@ -1166,7 +1169,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1194,8 +1197,9 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1221,6 +1225,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -1271,7 +1276,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1297,6 +1302,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -1350,7 +1356,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
         autoSelectFirst?: boolean | "exact" | undefined;
     } & {
@@ -1820,7 +1826,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1848,8 +1854,9 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1875,6 +1882,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -1925,7 +1933,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1951,6 +1959,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -2004,7 +2013,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
         autoSelectFirst?: boolean | "exact" | undefined;
     } & {
@@ -2409,7 +2418,7 @@ declare const VCombobox: {
         }) => vue.VNodeChild) | undefined;
     }) | undefined;
     menuProps?: (Partial<{
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
@@ -2437,8 +2446,9 @@ declare const VCombobox: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
     }> & Omit<{
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
@@ -2464,6 +2474,7 @@ declare const VCombobox: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
         offset?: string | number | number[] | undefined;
         id?: string | undefined;
         height?: string | number | undefined;
@@ -2514,7 +2525,7 @@ declare const VCombobox: {
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
@@ -2540,6 +2551,7 @@ declare const VCombobox: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
     } & {
         offset?: string | number | number[] | undefined;
         id?: string | undefined;
@@ -2593,7 +2605,7 @@ declare const VCombobox: {
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+    }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
     itemColor?: string | undefined;
     autoSelectFirst?: boolean | "exact" | undefined;
 } & {
@@ -3212,7 +3224,7 @@ declare const VCombobox: {
     };
     menuProps: {
         type: PropType<Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3240,8 +3252,9 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3267,6 +3280,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -3317,7 +3331,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3343,6 +3357,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -3396,7 +3411,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">>;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">>;
     };
     multiple: BooleanConstructor;
     noDataText: {
@@ -3865,7 +3880,7 @@ declare const VCombobox: {
     };
     menuProps: {
         type: PropType<Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3893,8 +3908,9 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3920,6 +3936,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -3970,7 +3987,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3996,6 +4013,7 @@ declare const VCombobox: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -4049,7 +4067,7 @@ declare const VCombobox: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">>;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">>;
     };
     multiple: BooleanConstructor;
     noDataText: {

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/VDialog/index.d.mts

@@ -628,7 +628,7 @@ declare const VDialog: {
         onAfterLeave?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
-    }, "target" | "activatorEl" | "scrimEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "updateLocation"> & vue.ShallowUnwrapRef<{
+    }, "target" | "contentEl" | "activatorEl" | "scrimEl" | "animateClick" | "globalTop" | "localTop" | "updateLocation"> & vue.ShallowUnwrapRef<{
         activatorEl: vue.Ref<HTMLElement | undefined>;
         scrimEl: vue.Ref<HTMLElement | undefined>;
         target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
@@ -1312,7 +1312,7 @@ declare const VDialog: {
         onAfterLeave?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
-    }, "target" | "activatorEl" | "scrimEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "updateLocation"> & vue.ShallowUnwrapRef<{
+    }, "target" | "contentEl" | "activatorEl" | "scrimEl" | "animateClick" | "globalTop" | "localTop" | "updateLocation"> & vue.ShallowUnwrapRef<{
         activatorEl: vue.Ref<HTMLElement | undefined>;
         scrimEl: vue.Ref<HTMLElement | undefined>;
         target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
@@ -1893,7 +1893,7 @@ declare const VDialog: {
     onAfterLeave?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
-}, "target" | "activatorEl" | "scrimEl" | "animateClick" | "contentEl" | "globalTop" | "localTop" | "updateLocation"> & vue.ShallowUnwrapRef<{
+}, "target" | "contentEl" | "activatorEl" | "scrimEl" | "animateClick" | "globalTop" | "localTop" | "updateLocation"> & vue.ShallowUnwrapRef<{
     activatorEl: vue.Ref<HTMLElement | undefined>;
     scrimEl: vue.Ref<HTMLElement | undefined>;
     target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;

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