@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

package/lib/components/VSwitch/VSwitch.css

@@ -0,0 +1,69 @@
+.v-switch .v-label {
+  padding-inline-start: 10px;
+}
+
+.v-switch__loader {
+  display: flex;
+}
+
+.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-switch__track {
+  border-radius: 8px;
+  height: 14px;
+  opacity: 0.6;
+  width: 36px;
+  cursor: pointer;
+}
+.v-switch--inset .v-switch__track {
+  border-radius: 14px;
+  height: 28px;
+  width: 48px;
+}
+
+.v-switch__thumb {
+  align-items: center;
+  border-radius: 50%;
+  color: rgb(var(--v-theme-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);
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+.v-switch--inset .v-switch__thumb {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+
+.v-switch .v-selection-control {
+  height: var(--v-input-control-height);
+}
+.v-switch .v-selection-control__wrapper {
+  width: auto;
+}
+.v-switch .v-selection-control__input {
+  border-radius: 50%;
+  transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(-10px);
+  position: absolute;
+}
+.v-switch .v-selection-control--dirty .v-selection-control__input {
+  transform: translateX(10px);
+}
+.v-switch.v-switch--indeterminate .v-selection-control__input {
+  transform: scale(0.8);
+}
+.v-switch.v-switch--indeterminate .v-switch__thumb {
+  transform: scale(0.75);
+  box-shadow: none;
+}

package/lib/components/VSwitch/VSwitch.mjs

@@ -1,125 +1,117 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
-import "../../styles/components/_selection-controls.sass";
-import "./VSwitch.sass"; // Mixins
-
-import Selectable from "../../mixins/selectable/index.mjs";
-import VInput from "../VInput/index.mjs"; // Directives
+import "./VSwitch.css"; // Components
 
-import Touch from "../../directives/touch/index.mjs"; // Components
+import { filterControlProps, makeSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs";
+import { filterInputProps, makeVInputProps, VInput } from "../VInput/VInput.mjs";
+import { VProgressCircular } from "../VProgressCircular/index.mjs"; // Composables
 
-import { VFabTransition } from "../transitions/index.mjs";
-import VProgressCircular from "../VProgressCircular/VProgressCircular.mjs"; // Helpers
+import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 
-import { keyCodes } from "../../util/helpers.mjs"; // Types
-
-/* @vue/component */
-export default Selectable.extend({
-  name: 'v-switch',
-  directives: {
-    Touch
-  },
+import { computed, ref } from 'vue';
+import { defineComponent, filterInputAttrs, useRender } from "../../util/index.mjs";
+export const VSwitch = defineComponent({
+  name: 'VSwitch',
+  inheritAttrs: false,
   props: {
+    indeterminate: Boolean,
     inset: Boolean,
+    flat: Boolean,
     loading: {
       type: [Boolean, String],
       default: false
     },
-    flat: {
-      type: Boolean,
-      default: false
-    }
+    ...makeVInputProps(),
+    ...makeSelectionControlProps()
   },
-  computed: {
-    classes() {
-      return { ...VInput.options.computed.classes.call(this),
-        'v-input--selection-controls v-input--switch': true,
-        'v-input--switch--flat': this.flat,
-        'v-input--switch--inset': this.inset
-      };
-    },
-
-    attrs() {
-      return {
-        'aria-checked': String(this.isActive),
-        'aria-disabled': String(this.isDisabled),
-        role: 'switch'
-      };
-    },
-
-    // Do not return undefined if disabled,
-    // according to spec, should still show
-    // a color when disabled and active
-    validationState() {
-      if (this.hasError && this.shouldValidate) return 'error';
-      if (this.hasSuccess) return 'success';
-      if (this.hasColor !== null) return this.computedColor;
-      return undefined;
-    },
-
-    switchData() {
-      return this.setTextColor(this.loading ? undefined : this.validationState, {
-        class: this.themeClasses
-      });
-    }
-
+  emits: {
+    'update:indeterminate': val => true
   },
-  methods: {
-    genDefaultSlot() {
-      return [this.genSwitch(), this.genLabel()];
-    },
-
-    genSwitch() {
-      const {
-        title,
-        ...switchAttrs
-      } = this.attrs$;
-      return this.$createElement('div', {
-        staticClass: 'v-input--selection-controls__input'
-      }, [this.genInput('checkbox', { ...this.attrs,
-        ...switchAttrs
-      }), this.genRipple(this.setTextColor(this.validationState, {
-        directives: [{
-          name: 'touch',
-          value: {
-            left: this.onSwipeLeft,
-            right: this.onSwipeRight
-          }
-        }]
-      })), this.$createElement('div', {
-        staticClass: 'v-input--switch__track',
-        ...this.switchData
-      }), this.$createElement('div', {
-        staticClass: 'v-input--switch__thumb',
-        ...this.switchData
-      }, [this.genProgress()])]);
-    },
-
-    genProgress() {
-      return this.$createElement(VFabTransition, {}, [this.loading === false ? null : this.$slots.progress || this.$createElement(VProgressCircular, {
-        props: {
-          color: this.loading === true || this.loading === '' ? this.color || 'primary' : this.loading,
-          size: 16,
-          width: 2,
-          indeterminate: true
-        }
-      })]);
-    },
 
-    onSwipeLeft() {
-      if (this.isActive) this.onChange();
-    },
-
-    onSwipeRight() {
-      if (!this.isActive) this.onChange();
-    },
-
-    onKeydown(e) {
-      if (e.keyCode === keyCodes.left && this.isActive || e.keyCode === keyCodes.right && !this.isActive) this.onChange();
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const indeterminate = useProxiedModel(props, 'indeterminate');
+    const {
+      loaderClasses
+    } = useLoader(props);
+    const loaderColor = computed(() => {
+      return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
+    });
+
+    function onChange() {
+      if (indeterminate.value) {
+        indeterminate.value = false;
+      }
     }
 
+    useRender(() => {
+      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [inputProps, _1] = filterInputProps(props);
+      const [controlProps, _2] = filterControlProps(props);
+      const control = ref();
+
+      function onClick() {
+        var _control$value, _control$value$input;
+
+        (_control$value = control.value) == null ? void 0 : (_control$value$input = _control$value.input) == null ? void 0 : _control$value$input.click();
+      }
+
+      return _createVNode(VInput, _mergeProps({
+        "class": ['v-switch', {
+          'v-switch--inset': props.inset
+        }, {
+          'v-switch--indeterminate': indeterminate.value
+        }, loaderClasses.value]
+      }, inputAttrs, inputProps), { ...slots,
+        default: _ref2 => {
+          let {
+            isDisabled,
+            isReadonly,
+            isValid
+          } = _ref2;
+          return _createVNode(VSelectionControl, _mergeProps({
+            "ref": control
+          }, controlProps, {
+            "type": "checkbox",
+            "onUpdate:modelValue": onChange,
+            "aria-checked": indeterminate.value ? 'mixed' : undefined,
+            "disabled": isDisabled.value,
+            "readonly": isReadonly.value
+          }, controlAttrs), { ...slots,
+            default: () => _createVNode("div", {
+              "class": "v-switch__track",
+              "onClick": onClick
+            }, null),
+            input: _ref3 => {
+              let {
+                textColorClasses
+              } = _ref3;
+              return _createVNode("div", {
+                "class": ['v-switch__thumb', textColorClasses.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 {};
   }
+
 });
 //# sourceMappingURL=VSwitch.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSwitch/VSwitch.ts"],"names":["Selectable","VInput","Touch","VFabTransition","VProgressCircular","keyCodes","extend","name","directives","props","inset","Boolean","loading","type","String","default","flat","computed","classes","options","call","attrs","isActive","isDisabled","role","validationState","hasError","shouldValidate","hasSuccess","hasColor","computedColor","undefined","switchData","setTextColor","class","themeClasses","methods","genDefaultSlot","genSwitch","genLabel","title","switchAttrs","attrs$","$createElement","staticClass","genInput","genRipple","value","left","onSwipeLeft","right","onSwipeRight","genProgress","$slots","progress","color","size","width","indeterminate","onChange","onKeydown","e","keyCode"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport '../../styles/components/_selection-controls.sass'\nimport './VSwitch.sass'\n\n// Mixins\nimport Selectable from '../../mixins/selectable'\nimport VInput from '../VInput'\n\n// Directives\nimport Touch from '../../directives/touch'\n\n// Components\nimport { VFabTransition } from '../transitions'\nimport VProgressCircular from '../VProgressCircular/VProgressCircular'\n\n// Helpers\nimport { keyCodes } from '../../util/helpers'\n\n// Types\nimport { VNode, VNodeData } from 'vue'\n\n/* @vue/component */\nexport default Selectable.extend({\n  name: 'v-switch',\n\n  directives: { Touch },\n\n  props: {\n    inset: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n    flat: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        ...VInput.options.computed.classes.call(this),\n        'v-input--selection-controls v-input--switch': true,\n        'v-input--switch--flat': this.flat,\n        'v-input--switch--inset': this.inset,\n      }\n    },\n    attrs (): object {\n      return {\n        'aria-checked': String(this.isActive),\n        'aria-disabled': String(this.isDisabled),\n        role: 'switch',\n      }\n    },\n    // Do not return undefined if disabled,\n    // according to spec, should still show\n    // a color when disabled and active\n    validationState (): string | undefined {\n      if (this.hasError && this.shouldValidate) return 'error'\n      if (this.hasSuccess) return 'success'\n      if (this.hasColor !== null) return this.computedColor\n      return undefined\n    },\n    switchData (): VNodeData {\n      return this.setTextColor(this.loading ? undefined : this.validationState, {\n        class: this.themeClasses,\n      })\n    },\n  },\n\n  methods: {\n    genDefaultSlot (): (VNode | null)[] {\n      return [\n        this.genSwitch(),\n        this.genLabel(),\n      ]\n    },\n    genSwitch (): VNode {\n      const { title, ...switchAttrs } = this.attrs$\n\n      return this.$createElement('div', {\n        staticClass: 'v-input--selection-controls__input',\n      }, [\n        this.genInput('checkbox', {\n          ...this.attrs,\n          ...switchAttrs,\n        }),\n        this.genRipple(this.setTextColor(this.validationState, {\n          directives: [{\n            name: 'touch',\n            value: {\n              left: this.onSwipeLeft,\n              right: this.onSwipeRight,\n            },\n          }],\n        })),\n        this.$createElement('div', {\n          staticClass: 'v-input--switch__track',\n          ...this.switchData,\n        }),\n        this.$createElement('div', {\n          staticClass: 'v-input--switch__thumb',\n          ...this.switchData,\n        }, [this.genProgress()]),\n      ])\n    },\n    genProgress (): VNode {\n      return this.$createElement(VFabTransition, {}, [\n        this.loading === false\n          ? null\n          : this.$slots.progress || this.$createElement(VProgressCircular, {\n            props: {\n              color: (this.loading === true || this.loading === '')\n                ? (this.color || 'primary')\n                : this.loading,\n              size: 16,\n              width: 2,\n              indeterminate: true,\n            },\n          }),\n      ])\n    },\n    onSwipeLeft () {\n      if (this.isActive) this.onChange()\n    },\n    onSwipeRight () {\n      if (!this.isActive) this.onChange()\n    },\n    onKeydown (e: KeyboardEvent) {\n      if (\n        (e.keyCode === keyCodes.left && this.isActive) ||\n        (e.keyCode === keyCodes.right && !this.isActive)\n      ) this.onChange()\n    },\n  },\n})\n"],"file":"VSwitch.mjs"}
+{"version":3,"file":"VSwitch.mjs","names":["filterControlProps","makeSelectionControlProps","VSelectionControl","filterInputProps","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useProxiedModel","computed","ref","defineComponent","filterInputAttrs","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","val","setup","attrs","slots","loaderClasses","loaderColor","color","onChange","value","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","control","onClick","input","click","isDisabled","isReadonly","isValid","undefined","textColorClasses","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { filterControlProps, makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { defineComponent, filterInputAttrs, useRender } from '@/util'\n\nexport const VSwitch = defineComponent({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const { loaderClasses } = useLoader(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\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] = filterInputProps(props)\n      const [controlProps, _2] = filterControlProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick () {\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          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\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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"}

package/lib/components/VSwitch/VSwitch.sass

@@ -1,132 +1,74 @@
-@import './_variables.scss'
-
-// Theme
-+theme(v-input--switch) using ($material)
-  .v-input--switch__thumb
-    color: map-deep-get($material, 'selection-controls', 'thumb', 'inactive')
-
-  .v-input--switch__track
-    color: map-deep-get($material, 'selection-controls', 'track', 'inactive')
-
-  &.v-input--is-disabled:not(.v-input--is-dirty)
-    .v-input--switch__thumb
-      color: map-deep-get($material, 'selection-controls', 'thumb', 'disabled') !important
-
-    .v-input--switch__track
-      color: map-deep-get($material, 'selection-controls', 'track', 'disabled') !important
-
-.v-input--switch
-  &__track,
-  &__thumb
-    background-color: currentColor
-    pointer-events: none
-    transition: inherit
-
-  &__track
-    border-radius: $switch-track-border-radius
-    width: $switch-track-width
-    height: $switch-track-height
-    left: $switch-track-x
-    position: absolute
-    opacity: $switch-track-opacity
-    right: $switch-track-x
-    top: $switch-track-top
-
-  &__thumb
+@forward './variables'
+@use 'sass:selector'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-switch
+  .v-label
+    padding-inline-start: $switch-label-margin-inline-start
+
+.v-switch__loader
+  display: flex
+
+.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__track
+  border-radius: $switch-track-radius
+  height: $switch-track-height
+  opacity: $switch-track-opacity
+  width: $switch-track-width
+  cursor: pointer
+
+  .v-switch--inset &
+    border-radius: $switch-inset-track-border-radius
+    height: $switch-inset-track-height
+    width: $switch-inset-track-width
+
+.v-switch__thumb
+  align-items: center
+  border-radius: $switch-thumb-radius
+  color: rgb(var(--v-theme-surface))
+  display: flex
+  height: $switch-thumb-height
+  justify-content: center
+  width: $switch-thumb-width
+  pointer-events: none
+  transition: $switch-control-input-transition
+
+  @include tools.elevation($switch-thumb-elevation)
+
+  .v-switch--inset &
+    @include tools.elevation(0)
+
+.v-switch
+  $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
+
+  .v-selection-control
+    height: var(--v-input-control-height)
+
+  .v-selection-control__wrapper
+    width: auto
+
+  .v-selection-control__input
     border-radius: 50%
-    top: $switch-thumb-top
-    height: $switch-thumb-height
-    position: relative
-    width: $switch-thumb-width
-    display: flex
-    justify-content: center
-    align-items: center
-    transition: $primary-transition
-
-  .v-input--selection-controls__input
-    width: $switch-width
-
-  .v-input--selection-controls__ripple
-    top: $switch-ripple-top
-
-  &.v-input--dense
-    .v-input--switch__thumb
-      width: $switch-thumb-dense-width
-      height: $switch-thumb-dense-height
-
-    .v-input--switch__track
-      height: $switch-track-dense-height
-      width: $switch-track-dense-width
-
-    &.v-input--switch--inset
-      .v-input--switch__track
-        height: $switch-track-dense-inset-height
-        width: $switch-track-dense-inset-width
-        top: $switch-track-dense-top
-        left: -3px
-
-    .v-input--selection-controls__ripple
-      top: $switch-ripple-dense-top
-
-  &.v-input--is-dirty
-    &.v-input--is-disabled
-      opacity: $switch-disabled-opacity
-
-  +ltr()
-    .v-input--selection-controls__ripple
-      left: $switch-ripple-x
-
-    &.v-input--dense
-      .v-input--selection-controls__ripple
-        left: $switch-ripple-dense-x
-
-    &.v-input--is-dirty
-      .v-input--selection-controls__ripple,
-      .v-input--switch__thumb
-        transform: translate($switch-dirty-offset-x, 0)
-
-  +rtl()
-    .v-input--selection-controls__ripple
-      right: $switch-ripple-x
-
-    &.v-input--dense
-      .v-input--selection-controls__ripple
-        right: $switch-ripple-dense-x
-
-    &.v-input--is-dirty
-      .v-input--selection-controls__ripple,
-      .v-input--switch__thumb
-        transform: translate(-$switch-dirty-offset-x, 0)
-
-  &:not(&--flat):not(&--inset)
-    .v-input--switch__thumb
-      +elevation($switch-thumb-elevation)
-
-  &--inset
-    .v-input--switch__track,
-    .v-input--selection-controls__input
-      width: $switch-track-inset-width
-
-    .v-input--switch__track
-      border-radius: $switch-track-inset-border-radius
-      height: $switch-track-inset-height
-      left: -4px
-      opacity: $switch-track-inset-opacity
-      top: calc(50% - #{$switch-track-inset-height / 2})
-
-    .v-input--selection-controls__ripple,
-    .v-input--switch__thumb
-      +ltr()
-        transform: translate(0, 0) !important
-
-      +rtl()
-        transform: translate(-6px, 0) !important
+    transition: $switch-control-input-transition
+    transform: translateX(-$switch-thumb-transform)
+    position: absolute
 
-    &.v-input--is-dirty
-      .v-input--selection-controls__ripple,
-      .v-input--switch__thumb
-        +ltr()
-          transform: translate($switch-dirty-offset-x, 0) !important
+  .v-selection-control--dirty
+    .v-selection-control__input
+      transform: translateX($switch-thumb-transform)
 
-        +rtl()
-          transform: translate(-$switch-dirty-offset-x - 6px, 0) !important
+  &.v-switch--indeterminate
+    .v-selection-control__input
+      transform: scale(.8)
+    .v-switch__thumb
+      transform: scale(.75)
+      box-shadow: none

package/lib/components/VSwitch/_variables.scss

@@ -1,30 +1,17 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$switch-dirty-offset-x: 20px !default;
-$switch-disabled-opacity: .6 !default;
-$switch-ripple-dense-top: calc(50% - 22px) !default;
-$switch-ripple-dense-x: -12px !default;
-$switch-ripple-top: calc(50% - 24px) !default;
-$switch-ripple-x: -14px !default;
-$switch-thumb-dense-height: 18px !default;
-$switch-thumb-dense-width: 18px !default;
+$switch-control-input-transition: .15s transform settings.$standard-easing !default;
+$switch-error-background-color: rgb(var(--v-theme-error)) !default;
+$switch-inset-track-border-radius: 14px !default;
+$switch-inset-track-height: 28px !default;
+$switch-inset-track-width: 48px !default;
+$switch-label-margin-inline-start: 10px !default;
 $switch-thumb-elevation: 4 !default;
 $switch-thumb-height: 20px !default;
-$switch-thumb-top: calc(50% - 10px) !default;
 $switch-thumb-width: 20px !default;
-$switch-track-border-radius: 8px !default;
-$switch-track-dense-height: 12px !default;
-$switch-track-dense-inset-height: 22px !default;
-$switch-track-dense-inset-width: 44px !default;
-$switch-track-dense-top: calc(50% - 12px) !default;
-$switch-track-dense-width: 32px !default;
+$switch-thumb-offset: 2px !default;
+$switch-thumb-radius: 50% !default;
+$switch-track-radius: 8px !default;
 $switch-track-height: 14px !default;
-$switch-track-inset-border-radius: 14px !default;
-$switch-track-inset-height: 28px !default;
-$switch-track-inset-opacity: .32 !default;
-$switch-track-inset-width: 48px !default;
 $switch-track-opacity: .6 !default;
-$switch-track-top: calc(50% - 7px) !default;
 $switch-track-width: 36px !default;
-$switch-track-x: 2px !default;
-$switch-width: 38px !default;

package/lib/components/VSwitch/index.mjs

@@ -1,4 +1,2 @@
-import VSwitch from "./VSwitch.mjs";
-export { VSwitch };
-export default VSwitch;
+export { VSwitch } from "./VSwitch.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSwitch/index.ts"],"names":["VSwitch"],"mappings":"OAAOA,O;AAEP,SAASA,OAAT;AACA,eAAeA,OAAf","sourcesContent":["import VSwitch from './VSwitch'\n\nexport { VSwitch }\nexport default VSwitch\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VSwitch"],"sources":["../../../src/components/VSwitch/index.ts"],"sourcesContent":["export { VSwitch } from './VSwitch'\n"],"mappings":"SAASA,O"}

package/lib/components/VSystemBar/VSystemBar.css

@@ -0,0 +1,35 @@
+.v-system-bar {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  height: 24px;
+  justify-content: flex-end;
+  max-width: 100%;
+  padding: 0 8px;
+  position: relative;
+  text-align: end;
+  width: 100%;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  background: rgba(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-variant), var(--v-medium-emphasis-opacity));
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 0.0333333333em;
+  line-height: 1.25rem;
+  text-transform: none;
+}
+.v-system-bar .v-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-system-bar--absolute {
+  position: absolute;
+}
+.v-system-bar--fixed {
+  position: fixed;
+}
+.v-system-bar--rounded {
+  border-radius: 0;
+}
+.v-system-bar--window {
+  height: 32px;
+}