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

package/lib/components/VBtn/VBtn.mjs

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

package/lib/components/VBtn/VBtn.sass

@@ -88,9 +88,8 @@
           opacity: $button-disabled-opacity
       @else
         opacity: 1
-        &.v-btn
-          // specificity has to be higher to override theme !important
-          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
+        @include tools.layer('trumps')
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
 
       &.v-btn--variant-elevated,
       &.v-btn--variant-flat
@@ -101,7 +100,8 @@
           color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
           background: rgb(var(--v-theme-surface))
         @else
-          background: rgb(var(--v-theme-surface)) !important
+          @include tools.layer('trumps')
+            background: rgb(var(--v-theme-surface))
 
         .v-btn__overlay
           // __overlay uses currentColor, so we need to divide

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

@@ -74,7 +74,7 @@ interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'v
 }
 
 declare const VBtn: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         symbol: any;
         replace: boolean;
         flat: boolean;
@@ -148,75 +148,7 @@ declare const VBtn: {
         'group:selected': (val: {
             value: boolean;
         }) => true;
-    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        symbol: any;
-        replace: boolean;
-        flat: boolean;
-        variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-        exact: boolean;
-        block: boolean;
-        style: vue.StyleValue;
-        disabled: boolean;
-        size: string | number;
-        readonly: boolean;
-        tag: string;
-        tile: boolean;
-        density: Density;
-        slim: boolean;
-        stacked: boolean;
-        ripple: boolean | {
-            class: string;
-        } | undefined;
-    } & {
-        location?: Anchor | null | undefined;
-        height?: string | number | undefined;
-        width?: string | number | undefined;
-        active?: boolean | undefined;
-        border?: string | number | boolean | undefined;
-        color?: string | undefined;
-        maxHeight?: string | number | undefined;
-        maxWidth?: string | number | undefined;
-        minHeight?: string | number | undefined;
-        minWidth?: string | number | undefined;
-        position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
-        value?: any;
-        loading?: string | boolean | undefined;
-        text?: string | undefined;
-        class?: any;
-        theme?: string | undefined;
-        to?: vue_router.RouteLocationRaw | undefined;
-        icon?: boolean | IconValue | undefined;
-        href?: string | undefined;
-        elevation?: string | number | undefined;
-        rounded?: string | number | boolean | undefined;
-        baseColor?: string | undefined;
-        selectedClass?: string | undefined;
-        activeColor?: string | undefined;
-        prependIcon?: IconValue | undefined;
-        appendIcon?: IconValue | undefined;
-    } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-            default?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            append?: (() => vue.VNodeChild) | undefined;
-            loader?: (() => vue.VNodeChild) | undefined;
-        };
-        'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
-            prepend?: false | (() => vue.VNodeChild) | undefined;
-            append?: false | (() => vue.VNodeChild) | undefined;
-            loader?: false | (() => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
-        "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
-    } & {
-        "onGroup:selected"?: ((val: {
-            value: boolean;
-        }) => any) | undefined;
-    }, {
+    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         symbol: any;
         replace: boolean;
         flat: boolean;
@@ -242,7 +174,7 @@ declare const VBtn: {
         prepend: () => vue.VNode[];
         append: () => vue.VNode[];
         loader: () => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -444,7 +376,7 @@ declare const VBtn: {
     prepend: () => vue.VNode[];
     append: () => vue.VNode[];
     loader: () => 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: PropType<Variant>;

package/lib/components/VBtnGroup/VBtnGroup.css

@@ -1,65 +1,64 @@
-.v-btn-group {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  vertical-align: middle;
-}
-.v-btn-group {
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  border-style: solid;
-  border-width: 0;
-}
-.v-btn-group--border {
-  border-width: thin;
-  box-shadow: none;
-}
-.v-btn-group {
-  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-btn-group {
-  border-radius: 4px;
-}
-.v-btn-group {
-  background: transparent;
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-btn-group--density-default.v-btn-group {
-  height: 48px;
-}
-
-.v-btn-group--density-comfortable.v-btn-group {
-  height: 40px;
-}
-
-.v-btn-group--density-compact.v-btn-group {
-  height: 36px;
-}
-
-.v-btn-group .v-btn {
-  border-radius: 0;
-  border-color: inherit;
-}
-.v-btn-group .v-btn:not(:last-child) {
-  border-inline-end: none;
-}
-.v-btn-group .v-btn:not(:first-child) {
-  border-inline-start: none;
-}
-.v-btn-group .v-btn:first-child {
-  border-start-start-radius: inherit;
-  border-end-start-radius: inherit;
-}
-.v-btn-group .v-btn:last-child {
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-}
-.v-btn-group--divided .v-btn:not(:last-child) {
-  border-inline-end-width: thin;
-  border-inline-end-style: solid;
-  border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.v-btn-group--tile {
-  border-radius: 0;
+@layer vuetify.components {
+  .v-btn-group {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    vertical-align: middle;
+  }
+  .v-btn-group {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    border-style: solid;
+    border-width: 0;
+  }
+  .v-btn-group--border {
+    border-width: thin;
+    box-shadow: none;
+  }
+  .v-btn-group {
+    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-btn-group {
+    border-radius: 4px;
+  }
+  .v-btn-group {
+    background: transparent;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-btn-group--density-default.v-btn-group {
+    height: 48px;
+  }
+  .v-btn-group--density-comfortable.v-btn-group {
+    height: 40px;
+  }
+  .v-btn-group--density-compact.v-btn-group {
+    height: 36px;
+  }
+  .v-btn-group .v-btn {
+    border-radius: 0;
+    border-color: inherit;
+  }
+  .v-btn-group .v-btn:not(:last-child) {
+    border-inline-end: none;
+  }
+  .v-btn-group .v-btn:not(:first-child) {
+    border-inline-start: none;
+  }
+  .v-btn-group .v-btn:first-child {
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+  }
+  .v-btn-group .v-btn:last-child {
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+  .v-btn-group--divided .v-btn:not(:last-child) {
+    border-inline-end-width: thin;
+    border-inline-end-style: solid;
+    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  .v-btn-group--tile {
+    border-radius: 0;
+  }
 }

package/lib/components/VBtnGroup/VBtnGroup.mjs

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

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

@@ -13,7 +13,7 @@ declare const allowedVariants: readonly ["elevated", "flat", "tonal", "outlined"
 type Variant = typeof allowedVariants[number];
 
 declare const VBtnGroup: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         style: vue.StyleValue;
         tag: string;
@@ -37,31 +37,7 @@ declare const VBtnGroup: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-        style: vue.StyleValue;
-        tag: string;
-        tile: boolean;
-        density: Density;
-        divided: boolean;
-    } & {
-        border?: string | number | boolean | undefined;
-        color?: string | undefined;
-        class?: any;
-        theme?: string | undefined;
-        elevation?: string | number | undefined;
-        rounded?: string | number | boolean | undefined;
-        baseColor?: string | undefined;
-    } & {
-        $children?: vue.VNodeChild | {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | (() => vue.VNodeChild);
-        'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, {
+    }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         style: vue.StyleValue;
         tag: string;
@@ -71,7 +47,7 @@ declare const VBtnGroup: {
         divided: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -148,7 +124,7 @@ declare const VBtnGroup: {
     divided: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => 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: {
         type: vue.PropType<Variant>;

package/lib/components/VBtnToggle/VBtnToggle.css

@@ -1,14 +1,16 @@
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
-  opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
-}
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
-  opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-}
-.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
-  opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-}
-@supports not selector(:focus-visible) {
-  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
+@layer vuetify.components {
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
+    opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
+  }
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
+    opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+  .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
     opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
   }
+  @supports not selector(:focus-visible) {
+    .v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
+      opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+    }
+  }
 }

package/lib/components/VBtnToggle/VBtnToggle.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 "./VBtnToggle.css";
 

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

@@ -68,7 +68,7 @@ type VBtnToggleSlots = {
     default: DefaultBtnToggleSlot;
 };
 declare const VBtnToggle: {
-    new (...args: any[]): vue.CreateComponentPublicInstance<{
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         style: vue.StyleValue;
         disabled: boolean;
@@ -94,27 +94,7 @@ declare const VBtnToggle: {
         select: (id: number, value: boolean) => void;
     }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
         'update:modelValue': (value: any) => true;
-    }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-        style: vue.StyleValue;
-        disabled: boolean;
-        multiple: boolean;
-        tag: string;
-        tile: boolean;
-        density: Density;
-        divided: boolean;
-    } & {
-        max?: number | undefined;
-        border?: string | number | boolean | undefined;
-        color?: string | undefined;
-        class?: any;
-        theme?: string | undefined;
-        mandatory?: boolean | "force" | undefined;
-        elevation?: string | number | undefined;
-        rounded?: string | number | boolean | undefined;
-        baseColor?: string | undefined;
-        selectedClass?: string | undefined;
-    } & {}, {
+    }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
         style: vue.StyleValue;
         disabled: boolean;
@@ -126,7 +106,7 @@ declare const VBtnToggle: {
         divided: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: DefaultBtnToggleSlot) => vue.VNode[];
-    }>>, {
+    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -209,7 +189,7 @@ declare const VBtnToggle: {
     divided: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: DefaultBtnToggleSlot) => vue.VNode[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
+}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T;
     "onUpdate:modelValue"?: (value: T) => void;
 }, slots: VBtnToggleSlots) => GenericProps<typeof props, typeof slots>) & FilterPropsOptions<{