@vuetify/nightly 3.7.3-master.2024-10-31 → 3.7.3-next.2024-11-01

package/lib/components/VOverlay/VOverlay.css

@@ -1,64 +1,61 @@
-.v-overlay-container {
-  contain: layout;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  display: contents;
-}
-
-.v-overlay-scroll-blocked {
-  padding-inline-end: var(--v-scrollbar-offset);
-}
-.v-overlay-scroll-blocked:not(html) {
-  overflow-y: hidden !important;
-}
-html.v-overlay-scroll-blocked {
-  position: fixed;
-  top: var(--v-body-scroll-y);
-  left: var(--v-body-scroll-x);
-  width: 100%;
-  height: 100%;
-}
-
-.v-overlay {
-  border-radius: inherit;
-  display: flex;
-  left: 0;
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.v-overlay__content {
-  outline: none;
-  position: absolute;
-  pointer-events: auto;
-  contain: layout;
-}
-
-.v-overlay__scrim {
-  pointer-events: auto;
-  background: rgb(var(--v-theme-on-surface));
-  border-radius: inherit;
-  bottom: 0;
-  left: 0;
-  opacity: var(--v-overlay-opacity, 0.32);
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.v-overlay--absolute {
-  position: absolute;
-}
-
-.v-overlay--contained .v-overlay__scrim {
-  position: absolute;
-}
-
-.v-overlay--scroll-blocked {
-  padding-inline-end: var(--v-scrollbar-offset);
+@layer vuetify.components {
+  .v-overlay-container {
+    contain: layout;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    display: contents;
+  }
+  .v-overlay {
+    border-radius: inherit;
+    display: flex;
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .v-overlay__content {
+    outline: none;
+    position: absolute;
+    pointer-events: auto;
+    contain: layout;
+  }
+  .v-overlay__scrim {
+    pointer-events: auto;
+    background: rgb(var(--v-theme-on-surface));
+    border-radius: inherit;
+    bottom: 0;
+    left: 0;
+    opacity: var(--v-overlay-opacity, 0.32);
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+  .v-overlay--absolute {
+    position: absolute;
+  }
+  .v-overlay--contained .v-overlay__scrim {
+    position: absolute;
+  }
+  .v-overlay--scroll-blocked {
+    padding-inline-end: var(--v-scrollbar-offset);
+  }
+}
+@layer vuetify.trumps {
+  .v-overlay-scroll-blocked {
+    padding-inline-end: var(--v-scrollbar-offset);
+  }
+  .v-overlay-scroll-blocked:not(html) {
+    overflow-y: hidden;
+  }
+  html.v-overlay-scroll-blocked {
+    position: fixed;
+    top: var(--v-body-scroll-y);
+    left: var(--v-body-scroll-x);
+    width: 100%;
+    height: 100%;
+  }
 }

package/lib/components/VOverlay/VOverlay.mjs

@@ -1,4 +1,4 @@
-import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment, vShow as _vShow, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 // Styles
 import "./VOverlay.css";
 

package/lib/components/VOverlay/VOverlay.sass

@@ -12,19 +12,6 @@
     top: 0
     display: contents
 
-  .v-overlay-scroll-blocked
-    padding-inline-end: var(--v-scrollbar-offset)
-
-    &:not(html)
-      overflow-y: hidden !important
-
-    @at-root #{selector.append(html, &)}
-      position: fixed
-      top: var(--v-body-scroll-y)
-      left: var(--v-body-scroll-x)
-      width: 100%
-      height: 100%
-
   .v-overlay
     border-radius: inherit
     display: flex
@@ -62,3 +49,17 @@
 
   .v-overlay--scroll-blocked
     padding-inline-end: var(--v-scrollbar-offset)
+
+@include tools.layer('trumps')
+  .v-overlay-scroll-blocked
+    padding-inline-end: var(--v-scrollbar-offset)
+
+    &:not(html)
+      overflow-y: hidden
+
+    @at-root #{selector.append(html, &)}
+      position: fixed
+      top: var(--v-body-scroll-y)
+      left: var(--v-body-scroll-x)
+      width: 100%
+      height: 100%

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

@@ -93,7 +93,7 @@ declare function blockScrollStrategy(data: ScrollStrategyData, props: StrategyPr
 declare function repositionScrollStrategy(data: ScrollStrategyData, props: StrategyProps, scope: EffectScope): void;
 
 declare const VOverlay: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         absolute: boolean;
         location: Anchor;
         origin: "auto" | Anchor | "overlap";
@@ -176,102 +176,20 @@ declare const VOverlay: {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     }, {
-        activatorEl: Ref<HTMLElement | undefined>;
-        scrimEl: Ref<HTMLElement | undefined>;
+        activatorEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        scrimEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
         target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
         animateClick: () => void;
-        contentEl: Ref<HTMLElement | undefined>;
-        globalTop: Readonly<Ref<boolean>>;
+        contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        globalTop: Readonly<Ref<boolean, boolean>>;
         localTop: vue.ComputedRef<boolean>;
-        updateLocation: Ref<((e: Event) => void) | undefined>;
+        updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         'click:outside': (e: MouseEvent) => true;
         'update:modelValue': (value: boolean) => true;
         afterEnter: () => true;
         afterLeave: () => true;
-    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        absolute: boolean;
-        location: Anchor;
-        origin: "auto" | Anchor | "overlap";
-        transition: string | boolean | (vue.TransitionProps & {
-            component?: vue.Component;
-        });
-        zIndex: string | number;
-        style: vue.StyleValue;
-        eager: boolean;
-        disabled: boolean;
-        persistent: boolean;
-        modelValue: boolean;
-        locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps$1, contentStyles: Ref<Record<string, string>>) => undefined | {
-            updateLocation: (e?: Event) => void;
-        });
-        scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps, scope: vue.EffectScope) => void) | "reposition";
-        activatorProps: Record<string, any>;
-        openOnHover: boolean;
-        closeOnContentClick: boolean;
-        closeOnBack: boolean;
-        contained: boolean;
-        noClickAnimation: boolean;
-        scrim: string | boolean;
-        _disableGlobalStack: boolean;
-    } & {
-        offset?: string | number | number[] | undefined;
-        height?: string | number | undefined;
-        width?: string | number | undefined;
-        maxHeight?: string | number | undefined;
-        maxWidth?: string | number | undefined;
-        minHeight?: string | number | undefined;
-        minWidth?: string | number | undefined;
-        opacity?: string | number | undefined;
-        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
-        class?: any;
-        theme?: string | undefined;
-        contentClass?: any;
-        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
-        closeDelay?: string | number | undefined;
-        openDelay?: string | number | undefined;
-        openOnClick?: boolean | undefined;
-        openOnFocus?: boolean | undefined;
-        contentProps?: any;
-        attach?: string | boolean | Element | undefined;
-    } & {
-        $children?: vue.VNodeChild | {
-            default?: ((arg: {
-                isActive: Ref<boolean>;
-            }) => vue.VNodeChild) | undefined;
-            activator?: ((arg: {
-                isActive: boolean;
-                props: Record<string, any>;
-                targetRef: TemplateRef;
-            }) => vue.VNodeChild) | undefined;
-        } | ((arg: {
-            isActive: Ref<boolean>;
-        }) => vue.VNodeChild);
-        'v-slots'?: {
-            default?: false | ((arg: {
-                isActive: Ref<boolean>;
-            }) => vue.VNodeChild) | undefined;
-            activator?: false | ((arg: {
-                isActive: boolean;
-                props: Record<string, any>;
-                targetRef: TemplateRef;
-            }) => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | ((arg: {
-            isActive: Ref<boolean>;
-        }) => vue.VNodeChild) | undefined;
-        "v-slot:activator"?: false | ((arg: {
-            isActive: boolean;
-            props: Record<string, any>;
-            targetRef: TemplateRef;
-        }) => vue.VNodeChild) | undefined;
-    } & {
-        onAfterEnter?: (() => any) | undefined;
-        onAfterLeave?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
-    }, {
+    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         absolute: boolean;
         location: Anchor;
         origin: "auto" | Anchor | "overlap";
@@ -307,7 +225,7 @@ declare const VOverlay: {
             props: Record<string, any>;
             targetRef: TemplateRef;
         }) => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -397,14 +315,14 @@ declare const VOverlay: {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     }, {
-        activatorEl: Ref<HTMLElement | undefined>;
-        scrimEl: Ref<HTMLElement | undefined>;
+        activatorEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        scrimEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
         target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
         animateClick: () => void;
-        contentEl: Ref<HTMLElement | undefined>;
-        globalTop: Readonly<Ref<boolean>>;
+        contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        globalTop: Readonly<Ref<boolean, boolean>>;
         localTop: vue.ComputedRef<boolean>;
-        updateLocation: Ref<((e: Event) => void) | undefined>;
+        updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     }, {}, {}, {}, {
         absolute: boolean;
         location: Anchor;
@@ -519,14 +437,14 @@ declare const VOverlay: {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
 }, {
-    activatorEl: Ref<HTMLElement | undefined>;
-    scrimEl: Ref<HTMLElement | undefined>;
+    activatorEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    scrimEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
     target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
     animateClick: () => void;
-    contentEl: Ref<HTMLElement | undefined>;
-    globalTop: Readonly<Ref<boolean>>;
+    contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    globalTop: Readonly<Ref<boolean, boolean>>;
     localTop: vue.ComputedRef<boolean>;
-    updateLocation: Ref<((e: Event) => void) | undefined>;
+    updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'click:outside': (e: MouseEvent) => true;
     'update:modelValue': (value: boolean) => true;
@@ -568,7 +486,7 @@ declare const VOverlay: {
         props: Record<string, any>;
         targetRef: TemplateRef;
     }) => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     transition: {
         type: PropType<string | boolean | (vue.TransitionProps & {
             component?: vue.Component;

package/lib/components/VPagination/VPagination.css

@@ -1,9 +1,11 @@
-.v-pagination__list {
-  display: inline-flex;
-  list-style-type: none;
-  justify-content: center;
-  width: 100%;
-}
-.v-pagination__item, .v-pagination__first, .v-pagination__prev, .v-pagination__next, .v-pagination__last {
-  margin: 0.3rem;
+@layer vuetify.components {
+  .v-pagination__list {
+    display: inline-flex;
+    list-style-type: none;
+    justify-content: center;
+    width: 100%;
+  }
+  .v-pagination__item, .v-pagination__first, .v-pagination__prev, .v-pagination__next, .v-pagination__last {
+    margin: 0.3rem;
+  }
 }

package/lib/components/VPagination/VPagination.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VPagination.css";
 

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

@@ -32,7 +32,7 @@ type ControlSlot = {
     'aria-disabled': boolean;
 };
 declare const VPagination: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         length: string | number;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         start: string | number;
@@ -98,67 +98,7 @@ declare const VPagination: {
         prev: (value: number) => true;
         next: (value: number) => true;
         last: (value: number) => true;
-    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        length: string | number;
-        variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-        start: string | number;
-        style: vue.StyleValue;
-        ariaLabel: string;
-        disabled: boolean;
-        size: string | number;
-        tag: string;
-        ellipsis: string;
-        modelValue: number;
-        tile: boolean;
-        density: Density;
-        nextIcon: IconValue;
-        prevIcon: IconValue;
-        firstIcon: IconValue;
-        lastIcon: IconValue;
-        pageAriaLabel: string;
-        currentPageAriaLabel: string;
-        firstAriaLabel: string;
-        previousAriaLabel: string;
-        nextAriaLabel: string;
-        lastAriaLabel: string;
-        showFirstLastPage: boolean;
-    } & {
-        border?: string | number | boolean | undefined;
-        color?: string | undefined;
-        class?: any;
-        theme?: string | undefined;
-        elevation?: string | number | undefined;
-        rounded?: string | number | boolean | undefined;
-        activeColor?: string | undefined;
-        totalVisible?: string | number | undefined;
-    } & {
-        $children?: {} | vue.VNodeChild | {
-            item?: ((arg: ItemSlot) => vue.VNodeChild) | undefined;
-            first?: ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-            prev?: ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-            next?: ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-            last?: ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-        };
-        'v-slots'?: {
-            item?: false | ((arg: ItemSlot) => vue.VNodeChild) | undefined;
-            first?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-            prev?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-            next?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-            last?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:item"?: false | ((arg: ItemSlot) => vue.VNodeChild) | undefined;
-        "v-slot:first"?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-        "v-slot:prev"?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-        "v-slot:next"?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-        "v-slot:last"?: false | ((arg: ControlSlot) => vue.VNodeChild) | undefined;
-    } & {
-        "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        onNext?: ((value: number) => any) | undefined;
-        onPrev?: ((value: number) => any) | undefined;
-        onFirst?: ((value: number) => any) | undefined;
-        onLast?: ((value: number) => any) | undefined;
-    }, {
+    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         length: string | number;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         start: string | number;
@@ -189,7 +129,7 @@ declare const VPagination: {
         prev: (arg: ControlSlot) => vue.VNode[];
         next: (arg: ControlSlot) => vue.VNode[];
         last: (arg: ControlSlot) => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -382,7 +322,7 @@ declare const VPagination: {
     prev: (arg: ControlSlot) => vue.VNode[];
     next: (arg: ControlSlot) => vue.VNode[];
     last: (arg: ControlSlot) => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     color: StringConstructor;
     variant: Omit<{
         type: vue.PropType<Variant>;

package/lib/components/VParallax/VParallax.css

@@ -1,7 +1,9 @@
-.v-parallax {
-  position: relative;
-  overflow: hidden;
-}
-.v-parallax--active > .v-img__img {
-  will-change: transform;
+@layer vuetify.components {
+  .v-parallax {
+    position: relative;
+    overflow: hidden;
+  }
+  .v-parallax--active > .v-img__img {
+    will-change: transform;
+  }
 }

package/lib/components/VParallax/VParallax.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VParallax.css";
 

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

@@ -8,7 +8,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 type ClassValue = any;
 
 declare const VParallax: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         scale: string | number;
         style: vue.StyleValue;
     } & {
@@ -31,30 +31,7 @@ declare const VParallax: {
         "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
-    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        scale: string | number;
-        style: vue.StyleValue;
-    } & {
-        class?: any;
-    } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-            default?: (() => vue.VNodeChild) | undefined;
-            placeholder?: (() => vue.VNodeChild) | undefined;
-            error?: (() => vue.VNodeChild) | undefined;
-            sources?: (() => vue.VNodeChild) | undefined;
-        };
-        'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
-            placeholder?: false | (() => vue.VNodeChild) | undefined;
-            error?: false | (() => vue.VNodeChild) | undefined;
-            sources?: false | (() => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
-    }, {
+    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         scale: string | number;
         style: vue.StyleValue;
     }, true, {}, vue.SlotsType<Partial<{
@@ -62,7 +39,7 @@ declare const VParallax: {
         placeholder: () => vue.VNode[];
         error: () => vue.VNode[];
         sources: () => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -130,7 +107,7 @@ declare const VParallax: {
     placeholder: () => vue.VNode[];
     error: () => vue.VNode[];
     sources: () => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     class: vue.PropType<ClassValue>;
     style: {
         type: vue.PropType<vue.StyleValue>;