feat(VSwitch): add 'square' as new inset variant

packages/api-generator/src/locale/en/VSwitch.json

@@ -3,7 +3,7 @@
   "props": {
     "flat": "Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it.",
     "indeterminate": "Sets an indeterminate state for the switch.",
-    "inset": "Enlarge the `v-switch` track to encompass the thumb.",
+    "inset": "Controls the track and thumb styling\n- **tonal** (or `true`) enlarges the track to encompass the thumb\n- **material** applies the Material Design 3 treatment: an outlined track that fills when on and a thumb that morphs between states\n- **square** is the **material** variant with less round corners.",
     "loading": "Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color.",
     "multiple": "Changes expected model to an array."
   },

packages/vuetify/src/components/VSwitch/VSwitch.sass

@@ -151,6 +151,13 @@
         .v-icon
           opacity: .4
 
+  .v-switch--inset-square
+    .v-switch__track
+      border-radius: $switch-inset-square-track-radius
+
+    .v-switch__thumb
+      border-radius: $switch-inset-square-thumb-radius
+
   .v-switch
     $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
 

packages/vuetify/src/components/VSwitch/VSwitch.tsx

@@ -45,7 +45,7 @@ export type VSwitchSlots =
 
 export const makeVSwitchProps = propsFactory({
   inset: {
-    type: [Boolean, String] as PropType<boolean | 'tonal' | 'material'>,
+    type: [Boolean, String] as PropType<boolean | 'tonal' | 'material' | 'square'>,
     default: false,
   },
   flat: Boolean,
@@ -125,7 +125,8 @@ export const VSwitch = genericComponent<new <T>(
             'v-switch',
             { 'v-switch--flat': props.flat },
             { 'v-switch--inset': !!props.inset },
-            { 'v-switch--inset-material': props.inset === 'material' },
+            { 'v-switch--inset-material': isMaterial },
+            { 'v-switch--inset-square': props.inset === 'square' },
             { 'v-switch--indeterminate': indeterminate.value },
             loaderClasses.value,
             props.class,

packages/vuetify/src/components/VSwitch/_variables.scss

@@ -18,6 +18,9 @@ $switch-inset-track-width: 52px !default;
 $switch-inset-track-opacity: 1 !default;
 $switch-inset-border-width: 2px !default;
 
+$switch-inset-square-track-radius: 6px !default;
+$switch-inset-square-thumb-radius: 4px !default;
+
 $switch-inset-unselected-track-color: color-mix(in srgb, rgb(var(--v-theme-on-surface-variant)) 50%, #888) !default;
 $switch-inset-unselected-thumb-color: color-mix(in srgb, rgb(var(--v-theme-surface-variant)) 50%, #888) !default;
 $switch-inset-unselected-border-color: $switch-inset-unselected-thumb-color !default;