vuetify 3.3.12 → 3.4.0-alpha.0

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

@@ -4,7 +4,7 @@ import { Ref, EffectScope, ComponentPropsOptions, ExtractPropTypes } from 'vue';
 interface ScrollStrategyData {
     root: Ref<HTMLElement | undefined>;
     contentEl: Ref<HTMLElement | undefined>;
-    activatorEl: Ref<HTMLElement | undefined>;
+    targetEl: Ref<HTMLElement | undefined>;
     isActive: Ref<boolean>;
     updateLocation: Ref<((e: Event) => void) | undefined>;
 }
@@ -52,7 +52,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 
 interface LocationStrategyData {
     contentEl: Ref<HTMLElement | undefined>;
-    activatorEl: Ref<HTMLElement | undefined>;
+    target: Ref<HTMLElement | [x: number, y: number] | undefined>;
     isActive: Ref<boolean>;
     isRtl: Ref<boolean>;
 }
@@ -125,6 +125,7 @@ declare const VSnackbar: {
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
             position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 activator?: ((arg: {
@@ -187,7 +188,7 @@ declare const VSnackbar: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
@@ -256,11 +257,12 @@ declare const VSnackbar: {
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
             position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             theme?: string | undefined;
             contentClass?: any;
             rounded?: string | number | boolean | undefined;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             closeDelay?: string | number | undefined;
             openDelay?: string | number | undefined;
             openOnClick?: boolean | undefined;
@@ -331,6 +333,7 @@ declare const VSnackbar: {
                 maxWidth?: string | number | undefined;
                 minHeight?: string | number | undefined;
                 minWidth?: string | number | undefined;
+                target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
                 class?: any;
                 onAfterLeave?: (() => any) | undefined;
                 $children?: vue.VNodeChild | {
@@ -400,7 +403,7 @@ declare const VSnackbar: {
                     [key: string]: any;
                 }>) => void)[] | undefined;
                 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                activator?: string | Element | vue.ComponentPublicInstance | undefined;
+                activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
                 "v-slot:activator"?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
@@ -467,10 +470,11 @@ declare const VSnackbar: {
                 maxWidth?: string | number | undefined;
                 minHeight?: string | number | undefined;
                 minWidth?: string | number | undefined;
+                target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
                 class?: any;
                 theme?: string | undefined;
                 contentClass?: any;
-                activator?: string | Element | vue.ComponentPublicInstance | undefined;
+                activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
                 closeDelay?: string | number | undefined;
                 openDelay?: string | number | undefined;
                 openOnClick?: boolean | undefined;
@@ -512,6 +516,7 @@ declare const VSnackbar: {
                 "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
             }, {
                 activatorEl: vue.Ref<HTMLElement | undefined>;
+                target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
                 animateClick: () => void;
                 contentEl: vue.Ref<HTMLElement | undefined>;
                 globalTop: Readonly<vue.Ref<boolean>>;
@@ -613,10 +618,11 @@ declare const VSnackbar: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             theme?: string | undefined;
             contentClass?: any;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             closeDelay?: string | number | undefined;
             openDelay?: string | number | undefined;
             openOnClick?: boolean | undefined;
@@ -658,12 +664,13 @@ declare const VSnackbar: {
             "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
         } & vue.ShallowUnwrapRef<{
             activatorEl: vue.Ref<HTMLElement | undefined>;
+            target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
             animateClick: () => void;
             contentEl: vue.Ref<HTMLElement | undefined>;
             globalTop: Readonly<vue.Ref<boolean>>;
             localTop: vue.ComputedRef<boolean>;
             updateLocation: vue.Ref<((e: Event) => void) | undefined>;
-        }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "target" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             'update:modelValue': (v: boolean) => boolean;
         }, string, {
             absolute: boolean;
@@ -759,11 +766,12 @@ declare const VSnackbar: {
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
         position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
+        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
         class?: any;
         theme?: string | undefined;
         contentClass?: any;
         rounded?: string | number | boolean | undefined;
-        activator?: string | Element | vue.ComponentPublicInstance | undefined;
+        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
         closeDelay?: string | number | undefined;
         openDelay?: string | number | undefined;
         openOnClick?: boolean | undefined;
@@ -834,6 +842,7 @@ declare const VSnackbar: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             onAfterLeave?: (() => any) | undefined;
             $children?: vue.VNodeChild | {
@@ -903,7 +912,7 @@ declare const VSnackbar: {
                 [key: string]: any;
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
@@ -970,10 +979,11 @@ declare const VSnackbar: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
             class?: any;
             theme?: string | undefined;
             contentClass?: any;
-            activator?: string | Element | vue.ComponentPublicInstance | undefined;
+            activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
             closeDelay?: string | number | undefined;
             openDelay?: string | number | undefined;
             openOnClick?: boolean | undefined;
@@ -1015,6 +1025,7 @@ declare const VSnackbar: {
             "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
         }, {
             activatorEl: vue.Ref<HTMLElement | undefined>;
+            target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
             animateClick: () => void;
             contentEl: vue.Ref<HTMLElement | undefined>;
             globalTop: Readonly<vue.Ref<boolean>>;
@@ -1116,10 +1127,11 @@ declare const VSnackbar: {
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
         class?: any;
         theme?: string | undefined;
         contentClass?: any;
-        activator?: string | Element | vue.ComponentPublicInstance | undefined;
+        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
         closeDelay?: string | number | undefined;
         openDelay?: string | number | undefined;
         openOnClick?: boolean | undefined;
@@ -1161,12 +1173,13 @@ declare const VSnackbar: {
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     } & vue.ShallowUnwrapRef<{
         activatorEl: vue.Ref<HTMLElement | undefined>;
+        target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
         animateClick: () => void;
         contentEl: vue.Ref<HTMLElement | undefined>;
         globalTop: Readonly<vue.Ref<boolean>>;
         localTop: vue.ComputedRef<boolean>;
         updateLocation: vue.Ref<((e: Event) => void) | undefined>;
-    }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>> & {} & vue.ComponentCustomProperties & {};
+    }> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "target" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>> & {} & vue.ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
@@ -1204,11 +1217,12 @@ declare const VSnackbar: {
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
     position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
+    target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
     class?: any;
     theme?: string | undefined;
     contentClass?: any;
     rounded?: string | number | boolean | undefined;
-    activator?: string | Element | vue.ComponentPublicInstance | undefined;
+    activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
     closeDelay?: string | number | undefined;
     openDelay?: string | number | undefined;
     openOnClick?: boolean | undefined;
@@ -1279,6 +1293,7 @@ declare const VSnackbar: {
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
         class?: any;
         onAfterLeave?: (() => any) | undefined;
         $children?: vue.VNodeChild | {
@@ -1348,7 +1363,7 @@ declare const VSnackbar: {
             [key: string]: any;
         }>) => void)[] | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        activator?: string | Element | vue.ComponentPublicInstance | undefined;
+        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
@@ -1415,10 +1430,11 @@ declare const VSnackbar: {
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
         class?: any;
         theme?: string | undefined;
         contentClass?: any;
-        activator?: string | Element | vue.ComponentPublicInstance | undefined;
+        activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
         closeDelay?: string | number | undefined;
         openDelay?: string | number | undefined;
         openOnClick?: boolean | undefined;
@@ -1460,6 +1476,7 @@ declare const VSnackbar: {
         "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
     }, {
         activatorEl: vue.Ref<HTMLElement | undefined>;
+        target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
         animateClick: () => void;
         contentEl: vue.Ref<HTMLElement | undefined>;
         globalTop: Readonly<vue.Ref<boolean>>;
@@ -1561,10 +1578,11 @@ declare const VSnackbar: {
     maxWidth?: string | number | undefined;
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
+    target?: Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined;
     class?: any;
     theme?: string | undefined;
     contentClass?: any;
-    activator?: string | Element | vue.ComponentPublicInstance | undefined;
+    activator?: Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined;
     closeDelay?: string | number | undefined;
     openDelay?: string | number | undefined;
     openOnClick?: boolean | undefined;
@@ -1606,12 +1624,13 @@ declare const VSnackbar: {
     "onClick:outside"?: ((e: MouseEvent) => any) | undefined;
 } & vue.ShallowUnwrapRef<{
     activatorEl: vue.Ref<HTMLElement | undefined>;
+    target: vue.ComputedRef<HTMLElement | [x: number, y: number] | undefined>;
     animateClick: () => void;
     contentEl: vue.Ref<HTMLElement | undefined>;
     globalTop: Readonly<vue.Ref<boolean>>;
     localTop: vue.ComputedRef<boolean>;
     updateLocation: vue.Ref<((e: Event) => void) | undefined>;
-}> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}> & {} & vue.ComponentCustomProperties & {}, "offset" | "key" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "target" | "class" | "onAfterLeave" | "$children" | "ref" | "ref_for" | "ref_key" | "theme" | "v-slot:default" | "v-slots" | "contentClass" | "onVnodeBeforeMount" | "onVnodeMounted" | "onVnodeBeforeUpdate" | "onVnodeUpdated" | "onVnodeBeforeUnmount" | "onVnodeUnmounted" | "onUpdate:modelValue" | "activator" | "v-slot:activator" | "closeDelay" | "openDelay" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "_disableGlobalStack")>, `$${any}`>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (v: boolean) => boolean;
 }, string, {
     absolute: boolean;
@@ -1692,13 +1711,14 @@ declare const VSnackbar: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
+    target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
     eager: BooleanConstructor;
     disabled: BooleanConstructor;
     class: vue.PropType<any>;
     theme: StringConstructor;
     contentClass: null;
     modelValue: BooleanConstructor;
-    activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
+    activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
     locationStrategy: {
         type: vue.PropType<"connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
             updateLocation: (e: Event) => void;
@@ -1788,13 +1808,14 @@ declare const VSnackbar: {
         type: vue.PropType<vue.StyleValue>;
         default: null;
     };
+    target: vue.PropType<Element | "cursor" | "parent" | (string & {}) | vue.ComponentPublicInstance | [x: number, y: number] | undefined>;
     eager: BooleanConstructor;
     disabled: BooleanConstructor;
     class: vue.PropType<any>;
     theme: StringConstructor;
     contentClass: null;
     modelValue: BooleanConstructor;
-    activator: vue.PropType<string | Element | vue.ComponentPublicInstance | undefined>;
+    activator: vue.PropType<Element | "parent" | (string & {}) | vue.ComponentPublicInstance | undefined>;
     locationStrategy: {
         type: vue.PropType<"connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
             updateLocation: (e: Event) => void;

package/lib/components/VSwitch/VSwitch.css

@@ -11,52 +11,56 @@
 
 .v-switch__track,
 .v-switch__thumb {
-  background-color: currentColor;
   transition: none;
 }
 .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
 .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
   background-color: rgb(var(--v-theme-error));
-}
-
-.v-selection-control--dirty .v-switch__thumb {
-  color: currentColor;
+  color: rgb(var(--v-theme-on-error));
 }
 
 .v-switch__track {
-  border-radius: 8px;
+  background-color: currentColor;
+  border-radius: 9999px;
   height: 14px;
   opacity: 0.6;
   width: 36px;
   cursor: pointer;
+  transition: 0.2s color cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-switch--inset .v-switch__track {
-  border-radius: 14px;
-  height: 28px;
-  width: 48px;
+  border-radius: 9999px;
+  height: 32px;
+  width: 52px;
 }
 
 .v-switch__thumb {
   align-items: center;
   border-radius: 50%;
-  color: rgb(var(--v-theme-surface));
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
   display: flex;
   height: 20px;
   justify-content: center;
   width: 20px;
   pointer-events: none;
-  transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
+  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
   box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-switch--inset .v-switch__thumb {
+  height: 24px;
+  width: 24px;
+  transform: scale(0.6666666667);
   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-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
-.v-switch:not(.v-switch--loading) .v-icon ~ .v-switch__thumb {
-  display: none;
+.v-switch--inset .v-switch__thumb--filled {
+  transform: none;
 }
-
-.v-switch--loading .v-selection-control__input > .v-icon {
-  display: none;
+.v-switch--inset .v-selection-control--dirty .v-switch__thumb {
+  transform: none;
+  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
 }
 
 .v-switch .v-selection-control {
@@ -64,10 +68,13 @@
 }
 .v-switch .v-selection-control__input {
   border-radius: 50%;
-  transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
+  transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateX(-10px);
   position: absolute;
 }
+.v-switch .v-selection-control__input .v-icon {
+  position: absolute;
+}
 .v-switch .v-selection-control--dirty .v-selection-control__input {
   transform: translateX(10px);
 }

package/lib/components/VSwitch/VSwitch.mjs

@@ -1,8 +1,10 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Styles
 import "./VSwitch.css";
 
 // Components
+import { VScaleTransition } from "../transitions/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
 import { makeVInputProps, VInput } from "../VInput/VInput.mjs";
 import { VProgressCircular } from "../VProgressCircular/index.mjs";
 import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
@@ -46,6 +48,7 @@ export const VSwitch = genericComponent()({
       focus,
       blur
     } = useFocus(props);
+    const control = ref();
     const loaderColor = computed(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
@@ -56,16 +59,15 @@ export const VSwitch = genericComponent()({
         indeterminate.value = false;
       }
     }
+    function onTrackClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      control.value?.input?.click();
+    }
     useRender(() => {
-      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = VInput.filterProps(props);
       const [controlProps, _2] = VSelectionControl.filterProps(props);
-      const control = ref();
-      function onClick(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        control.value?.input?.click();
-      }
       return _createVNode(VInput, _mergeProps({
         "class": ['v-switch', {
           'v-switch--inset': props.inset
@@ -73,7 +75,7 @@ export const VSwitch = genericComponent()({
           'v-switch--indeterminate': indeterminate.value
         }, loaderClasses.value, props.class],
         "style": props.style
-      }, inputAttrs, inputProps, {
+      }, rootAttrs, inputProps, {
         "id": id.value,
         "focused": isFocused.value
       }), {
@@ -103,29 +105,36 @@ export const VSwitch = genericComponent()({
             ...slots,
             default: () => _createVNode("div", {
               "class": "v-switch__track",
-              "onClick": onClick
+              "onClick": onTrackClick
             }, null),
             input: _ref3 => {
               let {
-                textColorClasses,
-                textColorStyles
+                inputNode,
+                icon
               } = _ref3;
-              return _createVNode("div", {
-                "class": ['v-switch__thumb', textColorClasses.value],
-                "style": textColorStyles.value
-              }, [props.loading && _createVNode(LoaderSlot, {
-                "name": "v-switch",
-                "active": true,
-                "color": isValid.value === false ? undefined : loaderColor.value
-              }, {
-                default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
-                  "active": slotProps.isActive,
-                  "color": slotProps.color,
-                  "indeterminate": true,
-                  "size": "16",
-                  "width": "2"
-                }, null)
-              })]);
+              return _createVNode(_Fragment, null, [inputNode, _createVNode("div", {
+                "class": ['v-switch__thumb', {
+                  'v-switch__thumb--filled': icon || props.loading
+                }]
+              }, [_createVNode(VScaleTransition, null, {
+                default: () => [!props.loading ? icon && _createVNode(VIcon, {
+                  "key": icon,
+                  "icon": icon,
+                  "size": "x-small"
+                }, null) : _createVNode(LoaderSlot, {
+                  "name": "v-switch",
+                  "active": true,
+                  "color": isValid.value === false ? undefined : loaderColor.value
+                }, {
+                  default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
+                    "active": slotProps.isActive,
+                    "color": slotProps.color,
+                    "indeterminate": true,
+                    "size": "16",
+                    "width": "2"
+                  }, null)
+                })]
+              })])]);
             }
           });
         }

package/lib/components/VSwitch/VSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","update:modelValue","val","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","control","onClick","e","stopPropagation","preventDefault","input","click","_createVNode","_mergeProps","class","style","_ref2","messagesId","isDisabled","isReadonly","isValid","$event","undefined","_ref3","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & { loader: LoaderSlotProps }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [controlProps, _2] = VSelectionControl.filterProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick (e: Event) {\n        e.stopPropagation()\n        e.preventDefault()\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      )}\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}
+{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","update:modelValue","val","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","loaderColor","color","uid","id","onChange","value","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","_createVNode","_mergeProps","class","style","_ref2","messagesId","isDisabled","isReadonly","isValid","$event","undefined","_ref3","inputNode","icon","_Fragment","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & { loader: LoaderSlotProps }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const control = ref<VSelectionControl>()\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [controlProps, _2] = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          { ...rootAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onTrackClick }></div>),\n                  input: ({ inputNode, icon }) => (\n                    <>\n                      { inputNode }\n                      <div\n                        class={[\n                          'v-switch__thumb',\n                          { 'v-switch__thumb--filled': icon || props.loading },\n                        ]}\n                      >\n                        <VScaleTransition>\n                          { !props.loading ? (\n                            icon && <VIcon key={ icon as any } icon={ icon } size=\"x-small\" />\n                          ) : (\n                            <LoaderSlot\n                              name=\"v-switch\"\n                              active\n                              color={ isValid.value === false ? undefined : loaderColor.value }\n                            >\n                              { slotProps => (\n                                slots.loader\n                                  ? slots.loader(slotProps)\n                                  : (\n                                    <VProgressCircular\n                                      active={ slotProps.isActive }\n                                      color={ slotProps.color }\n                                      indeterminate\n                                      size=\"16\"\n                                      width=\"2\"\n                                    />\n                                  )\n                              )}\n                            </LoaderSlot>\n                          )}\n                        </VScaleTransition>\n                      </div>\n                    </>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}

package/lib/components/VSwitch/VSwitch.sass

@@ -15,22 +15,20 @@
 
 .v-switch__track,
 .v-switch__thumb
-  background-color: currentColor
   transition: none
 
   .v-selection-control--error:not(.v-selection-control--disabled) &
     background-color: $switch-error-background-color
-
-.v-switch__thumb
-  .v-selection-control--dirty &
-    color: currentColor
+    color: $switch-error-color
 
 .v-switch__track
+  background-color: currentColor
   border-radius: $switch-track-radius
   height: $switch-track-height
   opacity: $switch-track-opacity
   width: $switch-track-width
   cursor: pointer
+  transition: $switch-track-transition
 
   .v-switch--inset &
     border-radius: $switch-inset-track-border-radius
@@ -40,24 +38,32 @@
 .v-switch__thumb
   align-items: center
   border-radius: $switch-thumb-radius
-  color: rgb(var(--v-theme-surface))
+  background: $switch-thumb-background
+  color: $switch-thumb-color
   display: flex
   height: $switch-thumb-height
   justify-content: center
   width: $switch-thumb-width
   pointer-events: none
-  transition: $switch-control-input-transition
+  transition: .15s .05s transform settings.$decelerated-easing
+  position: relative
+  overflow: hidden
 
   @include tools.elevation($switch-thumb-elevation)
 
   .v-switch--inset &
+    height: $switch-inset-thumb-height
+    width: $switch-inset-thumb-width
+    transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
+
     @include tools.elevation(0)
 
-  .v-switch:not(.v-switch--loading) .v-icon ~ &
-    display: none
+    &--filled
+      transform: none
 
-.v-switch--loading .v-selection-control__input > .v-icon
-  display: none
+  .v-switch--inset .v-selection-control--dirty &
+    transform: none
+    transition: .15s .05s transform settings.$decelerated-easing
 
 .v-switch
   $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
@@ -71,6 +77,9 @@
     transform: translateX(-$switch-thumb-transform)
     position: absolute
 
+    .v-icon
+      position: absolute
+
   .v-selection-control--dirty
     .v-selection-control__input
       transform: translateX($switch-thumb-transform)