@vuetify/nightly 3.4.11-dev.2024-01-19 → 3.5.0-dev.2024-01-20

package/lib/blueprints/index.d.mts

@@ -1,4 +1,4 @@
-import { Ref, JSXComponent, PropType } from 'vue';
+import { Ref, ComponentPublicInstance, JSXComponent, PropType } from 'vue';
 
 interface DateAdapter<T = unknown> {
     date(value?: any): T | null;
@@ -144,6 +144,15 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
+interface GoToOptions {
+    container: ComponentPublicInstance | HTMLElement | string;
+    duration: number;
+    layout: boolean;
+    offset: number;
+    easing: string | ((t: number) => number);
+    patterns: Record<string, (t: number) => number>;
+}
+
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {
@@ -207,6 +216,7 @@ interface VuetifyOptions {
     directives?: Record<string, any>;
     defaults?: DefaultsOptions;
     display?: DisplayOptions;
+    goTo?: GoToOptions;
     theme?: ThemeOptions;
     icons?: IconOptions;
     locale?: LocaleOptions & RtlOptions;

package/lib/blueprints/md1.d.mts

@@ -1,4 +1,4 @@
-import { Ref, JSXComponent, PropType } from 'vue';
+import { Ref, ComponentPublicInstance, JSXComponent, PropType } from 'vue';
 
 interface DateAdapter<T = unknown> {
     date(value?: any): T | null;
@@ -144,6 +144,15 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
+interface GoToOptions {
+    container: ComponentPublicInstance | HTMLElement | string;
+    duration: number;
+    layout: boolean;
+    offset: number;
+    easing: string | ((t: number) => number);
+    patterns: Record<string, (t: number) => number>;
+}
+
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {
@@ -207,6 +216,7 @@ interface VuetifyOptions {
     directives?: Record<string, any>;
     defaults?: DefaultsOptions;
     display?: DisplayOptions;
+    goTo?: GoToOptions;
     theme?: ThemeOptions;
     icons?: IconOptions;
     locale?: LocaleOptions & RtlOptions;

package/lib/blueprints/md2.d.mts

@@ -1,4 +1,4 @@
-import { Ref, JSXComponent, PropType } from 'vue';
+import { Ref, ComponentPublicInstance, JSXComponent, PropType } from 'vue';
 
 interface DateAdapter<T = unknown> {
     date(value?: any): T | null;
@@ -144,6 +144,15 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
+interface GoToOptions {
+    container: ComponentPublicInstance | HTMLElement | string;
+    duration: number;
+    layout: boolean;
+    offset: number;
+    easing: string | ((t: number) => number);
+    patterns: Record<string, (t: number) => number>;
+}
+
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {
@@ -207,6 +216,7 @@ interface VuetifyOptions {
     directives?: Record<string, any>;
     defaults?: DefaultsOptions;
     display?: DisplayOptions;
+    goTo?: GoToOptions;
     theme?: ThemeOptions;
     icons?: IconOptions;
     locale?: LocaleOptions & RtlOptions;

package/lib/blueprints/md3.d.mts

@@ -1,4 +1,4 @@
-import { Ref, JSXComponent, PropType } from 'vue';
+import { Ref, ComponentPublicInstance, JSXComponent, PropType } from 'vue';
 
 interface DateAdapter<T = unknown> {
     date(value?: any): T | null;
@@ -144,6 +144,15 @@ type DefaultsInstance = undefined | {
 };
 type DefaultsOptions = Partial<DefaultsInstance>;
 
+interface GoToOptions {
+    container: ComponentPublicInstance | HTMLElement | string;
+    duration: number;
+    layout: boolean;
+    offset: number;
+    easing: string | ((t: number) => number);
+    patterns: Record<string, (t: number) => number>;
+}
+
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {
@@ -207,6 +216,7 @@ interface VuetifyOptions {
     directives?: Record<string, any>;
     defaults?: DefaultsOptions;
     display?: DisplayOptions;
+    goTo?: GoToOptions;
     theme?: ThemeOptions;
     icons?: IconOptions;
     locale?: LocaleOptions & RtlOptions;

package/lib/components/VSwitch/VSwitch.css

@@ -23,25 +23,45 @@
   color: rgb(var(--v-theme-on-error));
 }
 
+.v-switch__track-true {
+  margin-inline-end: auto;
+}
+.v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
+  opacity: 0;
+}
+
+.v-switch__track-false {
+  margin-inline-start: auto;
+}
+.v-selection-control--dirty .v-switch__track-false {
+  opacity: 0;
+}
+
 .v-switch__track {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.5rem;
+  padding: 0 5px;
   background-color: rgb(var(--v-theme-surface-variant));
   border-radius: 9999px;
   height: 14px;
   opacity: 0.6;
-  width: 36px;
+  min-width: 36px;
   cursor: pointer;
   transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-switch--inset .v-switch__track {
   border-radius: 9999px;
+  font-size: 0.75rem;
   height: 32px;
-  width: 52px;
+  min-width: 52px;
 }
 
 .v-switch__thumb {
   align-items: center;
   border-radius: 50%;
   display: flex;
+  font-size: 0.75rem;
   height: 20px;
   justify-content: center;
   width: 20px;

package/lib/components/VSwitch/VSwitch.mjs

@@ -4,6 +4,7 @@ import "./VSwitch.css";
 
 // Components
 import { VScaleTransition } from "../transitions/index.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/VDefaultsProvider.mjs";
 import { VIcon } from "../VIcon/index.mjs";
 import { makeVInputProps, VInput } from "../VInput/VInput.mjs";
 import { VProgressCircular } from "../VProgressCircular/index.mjs";
@@ -90,6 +91,10 @@ export const VSwitch = genericComponent()({
             isReadonly,
             isValid
           } = _ref2;
+          const slotProps = {
+            model,
+            isValid
+          };
           return _createVNode(VSelectionControl, _mergeProps({
             "ref": control
           }, controlProps, {
@@ -114,7 +119,13 @@ export const VSwitch = genericComponent()({
                 "class": ['v-switch__track', ...backgroundColorClasses.value],
                 "style": backgroundColorStyles.value,
                 "onClick": onTrackClick
-              }, null);
+              }, [slots['track-true'] && _createVNode("div", {
+                "key": "prepend",
+                "class": "v-switch__track-true"
+              }, [slots['track-true'](slotProps)]), slots['track-false'] && _createVNode("div", {
+                "key": "append",
+                "class": "v-switch__track-false"
+              }, [slots['track-false'](slotProps)])]);
             },
             input: _ref4 => {
               let {
@@ -128,9 +139,21 @@ export const VSwitch = genericComponent()({
                   'v-switch__thumb--filled': icon || props.loading
                 }, props.inset ? undefined : backgroundColorClasses.value],
                 "style": props.inset ? undefined : backgroundColorStyles.value
-              }, [_createVNode(VScaleTransition, null, {
+              }, [slots.thumb ? _createVNode(VDefaultsProvider, {
+                "defaults": {
+                  VIcon: {
+                    icon,
+                    size: 'x-small'
+                  }
+                }
+              }, {
+                default: () => [slots.thumb({
+                  ...slotProps,
+                  icon
+                })]
+              }) : _createVNode(VScaleTransition, null, {
                 default: () => [!props.loading ? icon && _createVNode(VIcon, {
-                  "key": icon,
+                  "key": String(icon),
                   "icon": icon,
                   "size": "x-small"
                 }, null) : _createVNode(LoaderSlot, {

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

@@ -1 +1 @@
-{"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","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","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'\nimport type { GenericProps } from '@/util'\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<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: 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 = VInput.filterProps(props)\n      const controlProps = 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          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\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: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__track',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                      onClick={ onTrackClick }\n                    ></div>\n                  ),\n                  input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                    <>\n                      { inputNode }\n                      <div\n                        class={[\n                          'v-switch__thumb',\n                          { 'v-switch__thumb--filled': icon || props.loading },\n                          props.inset ? undefined : backgroundColorClasses.value,\n                        ]}\n                        style={ props.inset ? undefined : backgroundColorStyles.value }\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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"}
+{"version":3,"file":"VSwitch.mjs","names":["VScaleTransition","VDefaultsProvider","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","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","slotProps","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","thumb","size","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\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 { ComputedRef, Ref } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { IconValue } from '@/composables/icons'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlot = {\n  model: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n}\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & {\n    loader: LoaderSlotProps\n    thumb: { icon: IconValue | undefined } & VSwitchSlot\n    'track-false': VSwitchSlot\n    'track-true': VSwitchSlot\n  }\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<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: 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 = VInput.filterProps(props)\n      const controlProps = 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          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => {\n              const slotProps = {\n                model,\n                isValid,\n              }\n\n              return (\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: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                      <div\n                        class={[\n                          'v-switch__track',\n                          ...backgroundColorClasses.value,\n                        ]}\n                        style={ backgroundColorStyles.value }\n                        onClick={ onTrackClick }\n                      >\n                        { slots['track-true'] && (\n                          <div key=\"prepend\" class=\"v-switch__track-true\">\n                            { slots['track-true'](slotProps) }\n                          </div>\n                        )}\n\n                        { slots['track-false'] && (\n                          <div key=\"append\" class=\"v-switch__track-false\">\n                            { slots['track-false'](slotProps) }\n                          </div>\n                        )}\n                      </div>\n                    ),\n                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                      <>\n                        { inputNode }\n                        <div\n                          class={[\n                            'v-switch__thumb',\n                            { 'v-switch__thumb--filled': icon || props.loading },\n                            props.inset ? undefined : backgroundColorClasses.value,\n                          ]}\n                          style={ props.inset ? undefined : backgroundColorStyles.value }\n                        >\n                          { slots.thumb ? (\n                            <VDefaultsProvider\n                              defaults={{\n                                VIcon: {\n                                  icon,\n                                  size: 'x-small',\n                                },\n                              }}\n                            >\n                              { slots.thumb({ ...slotProps, icon }) }\n                            </VDefaultsProvider>\n                          ) : (\n                            <VScaleTransition>\n                              { !props.loading ? (\n                                (icon && (\n                                  <VIcon\n                                    key={ String(icon) }\n                                    icon={ icon }\n                                    size=\"x-small\"\n                                  />\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                          )}\n                        </div>\n                      </>\n                    ),\n                  }}\n                </VSelectionControl>\n              )\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

@@ -25,24 +25,42 @@
     background-color: $switch-error-background-color
     color: $switch-error-color
 
+.v-switch__track-true
+  margin-inline-end: auto
+
+  .v-selection-control:not(.v-selection-control--dirty) &
+    opacity: 0
+
+.v-switch__track-false
+  margin-inline-start: auto
+
+  .v-selection-control--dirty &
+    opacity: 0
+
 .v-switch__track
+  display: inline-flex
+  align-items: center
+  font-size: .5rem
+  padding: 0 5px
   background-color: $switch-track-background
   border-radius: $switch-track-radius
   height: $switch-track-height
   opacity: $switch-track-opacity
-  width: $switch-track-width
+  min-width: $switch-track-width
   cursor: pointer
   transition: $switch-track-transition
 
   .v-switch--inset &
     border-radius: $switch-inset-track-border-radius
+    font-size: .75rem
     height: $switch-inset-track-height
-    width: $switch-inset-track-width
+    min-width: $switch-inset-track-width
 
 .v-switch__thumb
   align-items: center
   border-radius: $switch-thumb-radius
   display: flex
+  font-size: .75rem
   height: $switch-thumb-height
   justify-content: center
   width: $switch-thumb-width

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

@@ -96,8 +96,17 @@ interface LoaderSlotProps {
     isActive: boolean;
 }
 
+type VSwitchSlot = {
+    model: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+};
 type VSwitchSlots = VInputSlots & VSelectionControlSlots & {
     loader: LoaderSlotProps;
+    thumb: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot;
+    'track-false': VSwitchSlot;
+    'track-true': VSwitchSlot;
 };
 declare const VSwitch: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
@@ -154,7 +163,7 @@ declare const VSwitch: {
         'update:focused': (focused: boolean) => boolean;
         'update:modelValue': (value: any) => boolean;
         'update:indeterminate': (value: boolean) => boolean;
-    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         flat: boolean;
         inline: boolean;
         error: boolean;
@@ -229,8 +238,8 @@ declare const VSwitch: {
         persistentHint: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: VInputSlot & {
-            backgroundColorClasses: vue.Ref<string[]>;
-            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            backgroundColorClasses: Ref<string[]>;
+            backgroundColorStyles: Ref<vue.CSSProperties>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -258,6 +267,17 @@ declare const VSwitch: {
         loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
+        thumb: (arg: {
+            icon: IconValue | undefined;
+        } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
     }>>, {
         P: {};
         B: {};
@@ -396,7 +416,7 @@ declare const VSwitch: {
     'update:focused': (focused: boolean) => boolean;
     'update:modelValue': (value: any) => boolean;
     'update:indeterminate': (value: boolean) => boolean;
-}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, string, {
+}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, string, {
     flat: boolean;
     inline: boolean;
     error: boolean;
@@ -421,8 +441,8 @@ declare const VSwitch: {
     persistentHint: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: VInputSlot & {
-        backgroundColorClasses: vue.Ref<string[]>;
-        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        backgroundColorClasses: Ref<string[]>;
+        backgroundColorStyles: Ref<vue.CSSProperties>;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -450,6 +470,17 @@ declare const VSwitch: {
     loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    thumb: (arg: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T | null | undefined;
     'onUpdate:modelValue'?: ((value: T | null) => void) | undefined;

package/lib/components/index.d.mts

@@ -54208,8 +54208,17 @@ declare const VStepperWindowItem: {
 }>>;
 type VStepperWindowItem = InstanceType<typeof VStepperWindowItem>;
 
+type VSwitchSlot = {
+    model: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+};
 type VSwitchSlots = VInputSlots & VSelectionControlSlots & {
     loader: LoaderSlotProps;
+    thumb: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot;
+    'track-false': VSwitchSlot;
+    'track-true': VSwitchSlot;
 };
 declare const VSwitch: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
@@ -54266,7 +54275,7 @@ declare const VSwitch: {
         'update:focused': (focused: boolean) => boolean;
         'update:modelValue': (value: any) => boolean;
         'update:indeterminate': (value: boolean) => boolean;
-    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         flat: boolean;
         inline: boolean;
         error: boolean;
@@ -54341,8 +54350,8 @@ declare const VSwitch: {
         persistentHint: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: VInputSlot & {
-            backgroundColorClasses: vue.Ref<string[]>;
-            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            backgroundColorClasses: Ref<string[]>;
+            backgroundColorStyles: Ref<vue.CSSProperties>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -54370,6 +54379,17 @@ declare const VSwitch: {
         loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
+        thumb: (arg: {
+            icon: IconValue | undefined;
+        } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
     }>>, {
         P: {};
         B: {};
@@ -54508,7 +54528,7 @@ declare const VSwitch: {
     'update:focused': (focused: boolean) => boolean;
     'update:modelValue': (value: any) => boolean;
     'update:indeterminate': (value: boolean) => boolean;
-}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, string, {
+}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, string, {
     flat: boolean;
     inline: boolean;
     error: boolean;
@@ -54533,8 +54553,8 @@ declare const VSwitch: {
     persistentHint: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: VInputSlot & {
-        backgroundColorClasses: vue.Ref<string[]>;
-        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        backgroundColorClasses: Ref<string[]>;
+        backgroundColorStyles: Ref<vue.CSSProperties>;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -54562,6 +54582,17 @@ declare const VSwitch: {
     loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    thumb: (arg: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T | null | undefined;
     'onUpdate:modelValue'?: ((value: T | null) => void) | undefined;

package/lib/composables/goto.mjs

@@ -0,0 +1,105 @@
+// Utilities
+import { inject } from 'vue';
+import { mergeDeep, refElement } from "../util/index.mjs"; // Types
+export const GoToSymbol = Symbol.for('vuetify:goto');
+function genDefaults() {
+  return {
+    container: undefined,
+    duration: 300,
+    layout: false,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    patterns: {
+      linear: t => t,
+      easeInQuad: t => t ** 2,
+      easeOutQuad: t => t * (2 - t),
+      easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t,
+      easeInCubic: t => t ** 3,
+      easeOutCubic: t => --t ** 3 + 1,
+      easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+      easeInQuart: t => t ** 4,
+      easeOutQuart: t => 1 - --t ** 4,
+      easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4,
+      easeInQuint: t => t ** 5,
+      easeOutQuint: t => 1 + --t ** 5,
+      easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5
+    }
+  };
+}
+function getContainer(el) {
+  return getTarget(el) ?? (document.scrollingElement || document.body);
+}
+function getTarget(el) {
+  return typeof el === 'string' ? document.querySelector(el) : refElement(el);
+}
+function getOffset(target, horizontal, rtl) {
+  if (typeof target === 'number') return horizontal && rtl ? -target : target;
+  let el = getTarget(target);
+  let totalOffset = 0;
+  while (el) {
+    totalOffset += horizontal ? el.offsetLeft : el.offsetTop;
+    el = el.offsetParent;
+  }
+  return totalOffset;
+}
+export function createGoTo(options, locale) {
+  return {
+    rtl: locale.isRtl,
+    options: mergeDeep(genDefaults(), options)
+  };
+}
+async function scrollTo(_target, _options, horizontal, goTo) {
+  const options = mergeDeep(goTo?.options, _options);
+  const rtl = goTo?.rtl.value;
+  const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0;
+  const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
+  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing];
+  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`);
+  let targetLocation;
+  if (typeof target === 'number') {
+    targetLocation = getOffset(target, horizontal, rtl);
+  } else {
+    targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl);
+    if (options.layout) {
+      const styles = window.getComputedStyle(target);
+      const layoutOffset = styles.getPropertyValue('--v-layout-top');
+      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10);
+    }
+  }
+  targetLocation += options.offset;
+  const startLocation = (horizontal ? container.scrollLeft : container.scrollTop) ?? 0;
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation);
+  const startTime = performance.now();
+  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
+    const timeElapsed = currentTime - startTime;
+    const progress = Math.abs(options.duration ? Math.min(timeElapsed / options.duration, 1) : 1);
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress));
+    container[horizontal ? 'scrollLeft' : 'scrollTop'] = location;
+    if (progress === 1) return resolve(targetLocation);
+    let clientSize;
+    let reachEnd;
+    if (!horizontal) {
+      clientSize = container === document.body ? document.documentElement.clientHeight : container.clientHeight;
+      reachEnd = clientSize + container.scrollTop >= container.scrollHeight;
+      if (targetLocation > container.scrollTop && reachEnd) return resolve(targetLocation);
+    } else {
+      clientSize = container === document.body ? document.documentElement.clientWidth : container.clientWidth;
+      reachEnd = clientSize + container.scrollLeft >= container.scrollWidth;
+      if (targetLocation > container.scrollLeft && reachEnd) return resolve(targetLocation);
+    }
+    requestAnimationFrame(step);
+  }));
+}
+export function useGoTo() {
+  let _options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const goTo = inject(GoToSymbol);
+  if (!goTo) throw new Error('[Vuetify] Could not find injected goto instance');
+  async function go(target, options) {
+    return scrollTo(target, mergeDeep(_options, options), false, goTo);
+  }
+  go.horizontal = async (target, options) => {
+    return scrollTo(target, mergeDeep(_options, options), true, goTo);
+  };
+  return go;
+}
+//# sourceMappingURL=goto.mjs.map