@vuetify/nightly 3.6.0-alpha.2-dev.2024-04-17 → 3.6.0-alpha.2-dev.2024-04-22

package/lib/components/index.d.mts

@@ -1452,6 +1452,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
         exact: boolean;
@@ -1514,6 +1515,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
         exact: boolean;
@@ -1577,6 +1579,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
@@ -1617,6 +1620,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
         exact: boolean;
@@ -1680,6 +1684,7 @@ declare const VAppBarNavIcon: {
         disabled: boolean;
         tag: string;
         icon: NonNullable<boolean | IconValue>;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         block: boolean;
@@ -1704,6 +1709,7 @@ declare const VAppBarNavIcon: {
     disabled: boolean;
     tag: string;
     icon: NonNullable<boolean | IconValue>;
+    readonly: boolean;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     block: boolean;
     exact: boolean;
@@ -1767,6 +1773,7 @@ declare const VAppBarNavIcon: {
     disabled: boolean;
     tag: string;
     icon: NonNullable<boolean | IconValue>;
+    readonly: boolean;
     rounded: string | number | boolean;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     block: boolean;
@@ -1872,6 +1879,7 @@ declare const VAppBarNavIcon: {
     prependIcon: vue.PropType<IconValue>;
     appendIcon: vue.PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
@@ -1962,6 +1970,7 @@ declare const VAppBarNavIcon: {
     prependIcon: vue.PropType<IconValue>;
     appendIcon: vue.PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
@@ -11166,6 +11175,7 @@ declare const VBtn: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -11238,6 +11248,7 @@ declare const VBtn: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -11305,6 +11316,7 @@ declare const VBtn: {
         active: boolean;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
@@ -11344,6 +11356,7 @@ declare const VBtn: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -11413,6 +11426,7 @@ declare const VBtn: {
         active: boolean;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
@@ -11436,6 +11450,7 @@ declare const VBtn: {
     size: string | number;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     block: boolean;
     exact: boolean;
@@ -11509,6 +11524,7 @@ declare const VBtn: {
     active: boolean;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     rounded: string | number | boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     block: boolean;
@@ -11608,6 +11624,7 @@ declare const VBtn: {
     prependIcon: PropType<IconValue>;
     appendIcon: PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
@@ -11692,6 +11709,7 @@ declare const VBtn: {
     prependIcon: PropType<IconValue>;
     appendIcon: PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
@@ -57362,6 +57380,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         exact: boolean;
         tile: boolean;
@@ -57427,6 +57446,7 @@ declare const VTab: {
             active: boolean;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             rounded: string | number | boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
@@ -57446,6 +57466,7 @@ declare const VTab: {
             size: string | number;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
             exact: boolean;
@@ -57508,6 +57529,7 @@ declare const VTab: {
             size: string | number;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
             exact: boolean;
@@ -57566,7 +57588,7 @@ declare const VTab: {
             "onGroup:selected"?: ((val: {
                 value: boolean;
             }) => any) | undefined;
-        }, "symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple">;
+        }, "symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "readonly" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -57601,6 +57623,7 @@ declare const VTab: {
             size: string | number;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
             exact: boolean;
@@ -57674,6 +57697,7 @@ declare const VTab: {
             active: boolean;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             rounded: string | number | boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
@@ -57726,6 +57750,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -57786,13 +57811,14 @@ declare const VTab: {
         }) => any) | undefined;
     }, "group"> & vue.ShallowUnwrapRef<{
         group: GroupItemProvide | null;
-    }> & {} & vue.ComponentCustomProperties & {}, "class" | "text" | "value" | "width" | "height" | "theme" | "key" | "href" | "color" | "v-slot:default" | "$children" | "v-slots" | "loading" | "icon" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "to" | "border" | "position" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "elevation" | "v-slot:prepend" | "v-slot:append" | "location" | "baseColor" | "selectedClass" | "onGroup:selected" | "prependIcon" | "appendIcon" | ("symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple") | "v-slot:loader">, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }> & {} & vue.ComponentCustomProperties & {}, "class" | "text" | "value" | "width" | "height" | "theme" | "key" | "href" | "color" | "v-slot:default" | "$children" | "v-slots" | "loading" | "icon" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "to" | "border" | "position" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "elevation" | "v-slot:prepend" | "v-slot:append" | "location" | "baseColor" | "selectedClass" | "onGroup:selected" | "prependIcon" | "appendIcon" | ("symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "readonly" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple") | "v-slot:loader">, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         replace: boolean;
         fixed: boolean;
         style: vue.StyleValue;
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         exact: boolean;
         tile: boolean;
@@ -57853,6 +57879,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         exact: boolean;
@@ -57893,6 +57920,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         exact: boolean;
         tile: boolean;
@@ -57958,6 +57986,7 @@ declare const VTab: {
             active: boolean;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             rounded: string | number | boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
@@ -57977,6 +58006,7 @@ declare const VTab: {
             size: string | number;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
             exact: boolean;
@@ -58039,6 +58069,7 @@ declare const VTab: {
             size: string | number;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
             exact: boolean;
@@ -58097,7 +58128,7 @@ declare const VTab: {
             "onGroup:selected"?: ((val: {
                 value: boolean;
             }) => any) | undefined;
-        }, "symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple">;
+        }, "symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "readonly" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -58132,6 +58163,7 @@ declare const VTab: {
             size: string | number;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
             exact: boolean;
@@ -58205,6 +58237,7 @@ declare const VTab: {
             active: boolean;
             disabled: boolean;
             tag: string;
+            readonly: boolean;
             rounded: string | number | boolean;
             variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
             block: boolean;
@@ -58257,6 +58290,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -58317,13 +58351,14 @@ declare const VTab: {
         }) => any) | undefined;
     }, "group"> & vue.ShallowUnwrapRef<{
         group: GroupItemProvide | null;
-    }> & {} & vue.ComponentCustomProperties & {}, "class" | "text" | "value" | "width" | "height" | "theme" | "key" | "href" | "color" | "v-slot:default" | "$children" | "v-slots" | "loading" | "icon" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "to" | "border" | "position" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "elevation" | "v-slot:prepend" | "v-slot:append" | "location" | "baseColor" | "selectedClass" | "onGroup:selected" | "prependIcon" | "appendIcon" | ("symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple") | "v-slot:loader">, `$${any}`>, {}, {}, {}, {
+    }> & {} & vue.ComponentCustomProperties & {}, "class" | "text" | "value" | "width" | "height" | "theme" | "key" | "href" | "color" | "v-slot:default" | "$children" | "v-slots" | "loading" | "icon" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "to" | "border" | "position" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "elevation" | "v-slot:prepend" | "v-slot:append" | "location" | "baseColor" | "selectedClass" | "onGroup:selected" | "prependIcon" | "appendIcon" | ("symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "readonly" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple") | "v-slot:loader">, `$${any}`>, {}, {}, {}, {
         replace: boolean;
         fixed: boolean;
         style: vue.StyleValue;
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         exact: boolean;
@@ -58348,6 +58383,7 @@ declare const VTab: {
     size: string | number;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     exact: boolean;
     tile: boolean;
@@ -58413,6 +58449,7 @@ declare const VTab: {
         active: boolean;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
@@ -58432,6 +58469,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -58494,6 +58532,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -58552,7 +58591,7 @@ declare const VTab: {
         "onGroup:selected"?: ((val: {
             value: boolean;
         }) => any) | undefined;
-    }, "symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple">;
+    }, "symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "readonly" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -58587,6 +58626,7 @@ declare const VTab: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -58660,6 +58700,7 @@ declare const VTab: {
         active: boolean;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
@@ -58712,6 +58753,7 @@ declare const VTab: {
     size: string | number;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     block: boolean;
     exact: boolean;
@@ -58772,13 +58814,14 @@ declare const VTab: {
     }) => any) | undefined;
 }, "group"> & vue.ShallowUnwrapRef<{
     group: GroupItemProvide | null;
-}> & {} & vue.ComponentCustomProperties & {}, "class" | "text" | "value" | "width" | "height" | "theme" | "key" | "href" | "color" | "v-slot:default" | "$children" | "v-slots" | "loading" | "icon" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "to" | "border" | "position" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "elevation" | "v-slot:prepend" | "v-slot:append" | "location" | "baseColor" | "selectedClass" | "onGroup:selected" | "prependIcon" | "appendIcon" | ("symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple") | "v-slot:loader">, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+}> & {} & vue.ComponentCustomProperties & {}, "class" | "text" | "value" | "width" | "height" | "theme" | "key" | "href" | "color" | "v-slot:default" | "$children" | "v-slots" | "loading" | "icon" | "ref" | "ref_for" | "ref_key" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "to" | "border" | "position" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "elevation" | "v-slot:prepend" | "v-slot:append" | "location" | "baseColor" | "selectedClass" | "onGroup:selected" | "prependIcon" | "appendIcon" | ("symbol" | "flat" | "replace" | "style" | "size" | "active" | "disabled" | "tag" | "readonly" | "rounded" | "variant" | "block" | "exact" | "tile" | "density" | "slim" | "stacked" | "ripple") | "v-slot:loader">, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     replace: boolean;
     fixed: boolean;
     style: vue.StyleValue;
     size: string | number;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     rounded: string | number | boolean;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     exact: boolean;
@@ -58835,6 +58878,7 @@ declare const VTab: {
     icon: PropType<boolean | IconValue>;
     to: PropType<vue_router.RouteLocationRaw>;
     border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+    readonly: BooleanConstructor;
     rounded: {
         type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: undefined;
@@ -58917,6 +58961,7 @@ declare const VTab: {
     icon: PropType<boolean | IconValue>;
     to: PropType<vue_router.RouteLocationRaw>;
     border: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+    readonly: BooleanConstructor;
     rounded: {
         type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: undefined;

package/lib/directives/ripple/VRipple.sass

@@ -1,39 +1,41 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-ripple
-  &__container
-    color: inherit
-    border-radius: inherit
-    position: absolute
-    width: 100%
-    height: 100%
-    left: 0
-    top: 0
-    overflow: hidden
-    z-index: 0
-    pointer-events: none
-    contain: strict
+@include tools.layer('components')
+  .v-ripple
+    &__container
+      color: inherit
+      border-radius: inherit
+      position: absolute
+      width: 100%
+      height: 100%
+      left: 0
+      top: 0
+      overflow: hidden
+      z-index: 0
+      pointer-events: none
+      contain: strict
 
-  &__animation
-    color: inherit
-    position: absolute
-    top: 0
-    left: 0
-    border-radius: 50%
-    background: currentColor
-    opacity: 0
-    pointer-events: none
-    overflow: hidden
-    will-change: transform, opacity
-
-    &--enter
-      transition: none
+    &__animation
+      color: inherit
+      position: absolute
+      top: 0
+      left: 0
+      border-radius: 50%
+      background: currentColor
       opacity: 0
+      pointer-events: none
+      overflow: hidden
+      will-change: transform, opacity
 
-    &--in
-      transition: $ripple-animation-transition-in
-      opacity: $ripple-animation-visible-opacity
+      &--enter
+        transition: none
+        opacity: 0
 
-    &--out
-      transition: $ripple-animation-transition-out
-      opacity: 0
+      &--in
+        transition: $ripple-animation-transition-in
+        opacity: $ripple-animation-visible-opacity
+
+      &--out
+        transition: $ripple-animation-transition-out
+        opacity: 0

package/lib/entry-bundler.mjs

@@ -16,7 +16,7 @@ export const createVuetify = function () {
     ...options
   });
 };
-export const version = "3.6.0-alpha.2-dev.2024-04-17";
+export const version = "3.6.0-alpha.2-dev.2024-04-22";
 createVuetify.version = version;
 export { blueprints, components, directives };
 export * from "./composables/index.mjs";

package/lib/framework.mjs

@@ -97,7 +97,7 @@ export function createVuetify() {
     goTo
   };
 }
-export const version = "3.6.0-alpha.2-dev.2024-04-17";
+export const version = "3.6.0-alpha.2-dev.2024-04-22";
 createVuetify.version = version;
 
 // Vue's inject() can only be used in setup