@vuetify/nightly 3.0.0-alpha.11 → 3.0.0-beta.0

package/lib/components/VCheckbox/VCheckbox.mjs

@@ -1,110 +1,83 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 // Styles
-import "./VCheckbox.css";
-import "../../styles/components/_selection-controls.css"; // Components
+import "./VCheckbox.css"; // Components
 
-import VIcon from "../VIcon/index.mjs";
-import VInput from "../VInput/index.mjs"; // Mixins
+import { filterInputProps, makeVInputProps, VInput } from "../VInput/VInput.mjs";
+import { filterControlProps, makeSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
 
-import Selectable from "../../mixins/selectable/index.mjs";
-/* @vue/component */
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 
-export default Selectable.extend({
-  name: 'v-checkbox',
+import { computed } from 'vue';
+import { defineComponent, filterInputAttrs, useRender } from "../../util/index.mjs";
+export const VCheckbox = defineComponent({
+  name: 'VCheckbox',
+  inheritAttrs: false,
   props: {
     indeterminate: Boolean,
     indeterminateIcon: {
       type: String,
       default: '$checkboxIndeterminate'
     },
-    offIcon: {
+    ...makeVInputProps(),
+    ...makeSelectionControlProps(),
+    falseIcon: {
       type: String,
       default: '$checkboxOff'
     },
-    onIcon: {
+    trueIcon: {
       type: String,
       default: '$checkboxOn'
     }
   },
-
-  data() {
-    return {
-      inputIndeterminate: this.indeterminate
-    };
+  emits: {
+    'update:indeterminate': val => true
   },
 
-  computed: {
-    classes() {
-      return { ...VInput.options.computed.classes.call(this),
-        'v-input--selection-controls': true,
-        'v-input--checkbox': true,
-        'v-input--indeterminate': this.inputIndeterminate
-      };
-    },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const indeterminate = useProxiedModel(props, 'indeterminate');
+    const falseIcon = computed(() => {
+      return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
+    });
+    const trueIcon = computed(() => {
+      return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
+    });
 
-    computedIcon() {
-      if (this.inputIndeterminate) {
-        return this.indeterminateIcon;
-      } else if (this.isActive) {
-        return this.onIcon;
-      } else {
-        return this.offIcon;
+    function onChange() {
+      if (indeterminate.value) {
+        indeterminate.value = false;
       }
-    },
-
-    // Do not return undefined if disabled,
-    // according to spec, should still show
-    // a color when disabled and active
-    validationState() {
-      if (this.isDisabled && !this.inputIndeterminate) return undefined;
-      if (this.hasError && this.shouldValidate) return 'error';
-      if (this.hasSuccess) return 'success';
-      if (this.hasColor !== null) return this.computedColor;
-      return undefined;
-    }
-
-  },
-  watch: {
-    indeterminate(val) {
-      // https://github.com/vuetifyjs/vuetify/issues/8270
-      this.$nextTick(() => this.inputIndeterminate = val);
-    },
-
-    inputIndeterminate(val) {
-      this.$emit('update:indeterminate', val);
-    },
-
-    isActive() {
-      if (!this.indeterminate) return;
-      this.inputIndeterminate = false;
     }
 
-  },
-  methods: {
-    genCheckbox() {
-      const {
-        title,
-        ...checkboxAttrs
-      } = this.attrs$;
-      return this.$createElement('div', {
-        staticClass: 'v-input--selection-controls__input'
-      }, [this.$createElement(VIcon, this.setTextColor(this.validationState, {
-        props: {
-          dense: this.dense,
-          dark: this.dark,
-          light: this.light
+    useRender(() => {
+      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
+      const [inputProps, _1] = filterInputProps(props);
+      const [controlProps, _2] = filterControlProps(props);
+      return _createVNode(VInput, _mergeProps({
+        "class": "v-checkbox"
+      }, inputAttrs, inputProps), { ...slots,
+        default: _ref2 => {
+          let {
+            isDisabled,
+            isReadonly
+          } = _ref2;
+          return _createVNode(VSelectionControl, _mergeProps(controlProps, {
+            "type": "checkbox",
+            "onUpdate:modelValue": onChange,
+            "falseIcon": falseIcon.value,
+            "trueIcon": trueIcon.value,
+            "aria-checked": indeterminate.value ? 'mixed' : undefined,
+            "disabled": isDisabled.value,
+            "readonly": isReadonly.value
+          }, controlAttrs), null);
         }
-      }), this.computedIcon), this.genInput('checkbox', { ...checkboxAttrs,
-        'aria-checked': this.inputIndeterminate ? 'mixed' : this.isActive.toString()
-      }), this.genRipple(this.setTextColor(this.rippleState))]);
-    },
-
-    genDefaultSlot() {
-      return [this.genCheckbox(), this.genLabel()];
-    }
-
+      });
+    });
+    return {};
   }
+
 });
 //# sourceMappingURL=VCheckbox.mjs.map

package/lib/components/VCheckbox/VCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCheckbox/VCheckbox.ts"],"names":["VIcon","VInput","Selectable","extend","name","props","indeterminate","Boolean","indeterminateIcon","type","String","default","offIcon","onIcon","data","inputIndeterminate","computed","classes","options","call","computedIcon","isActive","validationState","isDisabled","undefined","hasError","shouldValidate","hasSuccess","hasColor","computedColor","watch","val","$nextTick","$emit","methods","genCheckbox","title","checkboxAttrs","attrs$","$createElement","staticClass","setTextColor","dense","dark","light","genInput","toString","genRipple","rippleState","genDefaultSlot","genLabel"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VCheckbox.sass'\nimport '../../styles/components/_selection-controls.sass'\n\n// Components\nimport VIcon from '../VIcon'\nimport VInput from '../VInput'\n\n// Mixins\nimport Selectable from '../../mixins/selectable'\n\n/* @vue/component */\nexport default Selectable.extend({\n  name: 'v-checkbox',\n\n  props: {\n    indeterminate: Boolean,\n    indeterminateIcon: {\n      type: String,\n      default: '$checkboxIndeterminate',\n    },\n    offIcon: {\n      type: String,\n      default: '$checkboxOff',\n    },\n    onIcon: {\n      type: String,\n      default: '$checkboxOn',\n    },\n  },\n\n  data () {\n    return {\n      inputIndeterminate: this.indeterminate,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        ...VInput.options.computed.classes.call(this),\n        'v-input--selection-controls': true,\n        'v-input--checkbox': true,\n        'v-input--indeterminate': this.inputIndeterminate,\n      }\n    },\n    computedIcon (): string {\n      if (this.inputIndeterminate) {\n        return this.indeterminateIcon\n      } else if (this.isActive) {\n        return this.onIcon\n      } else {\n        return this.offIcon\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.isDisabled && !this.inputIndeterminate) return 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  },\n\n  watch: {\n    indeterminate (val) {\n      // https://github.com/vuetifyjs/vuetify/issues/8270\n      this.$nextTick(() => (this.inputIndeterminate = val))\n    },\n    inputIndeterminate (val) {\n      this.$emit('update:indeterminate', val)\n    },\n    isActive () {\n      if (!this.indeterminate) return\n      this.inputIndeterminate = false\n    },\n  },\n\n  methods: {\n    genCheckbox () {\n      const { title, ...checkboxAttrs } = this.attrs$\n      return this.$createElement('div', {\n        staticClass: 'v-input--selection-controls__input',\n      }, [\n        this.$createElement(VIcon, this.setTextColor(this.validationState, {\n          props: {\n            dense: this.dense,\n            dark: this.dark,\n            light: this.light,\n          },\n        }), this.computedIcon),\n        this.genInput('checkbox', {\n          ...checkboxAttrs,\n          'aria-checked': this.inputIndeterminate\n            ? 'mixed'\n            : this.isActive.toString(),\n        }),\n        this.genRipple(this.setTextColor(this.rippleState)),\n      ])\n    },\n    genDefaultSlot () {\n      return [\n        this.genCheckbox(),\n        this.genLabel(),\n      ]\n    },\n  },\n})\n"],"file":"VCheckbox.mjs"}
+{"version":3,"sources":["../../../src/components/VCheckbox/VCheckbox.tsx"],"names":["filterInputProps","makeVInputProps","VInput","filterControlProps","makeSelectionControlProps","VSelectionControl","useProxiedModel","computed","defineComponent","filterInputAttrs","useRender","VCheckbox","name","inheritAttrs","props","indeterminate","Boolean","indeterminateIcon","type","String","default","falseIcon","trueIcon","emits","val","setup","attrs","slots","value","onChange","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","isDisabled","isReadonly","undefined"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,gB,EAAkBC,e,EAAiBC,M;SACnCC,kB,EAAoBC,yB,EAA2BC,iB,sDAExD;;SACSC,e,8CAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,gB,EAAkBC,S;AAE5C,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;AACvCI,EAAAA,IAAI,EAAE,WADiC;AAGvCC,EAAAA,YAAY,EAAE,KAHyB;AAKvCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,aAAa,EAAEC,OADV;AAELC,IAAAA,iBAAiB,EAAE;AACjBC,MAAAA,IAAI,EAAEC,MADW;AAEjBC,MAAAA,OAAO,EAAE;AAFQ,KAFd;AAOL,OAAGnB,eAAe,EAPb;AAQL,OAAGG,yBAAyB,EARvB;AAULiB,IAAAA,SAAS,EAAE;AACTH,MAAAA,IAAI,EAAEC,MADG;AAETC,MAAAA,OAAO,EAAE;AAFA,KAVN;AAcLE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,IAAI,EAAEC,MADE;AAERC,MAAAA,OAAO,EAAE;AAFD;AAdL,GALgC;AAyBvCG,EAAAA,KAAK,EAAE;AACL,4BAAyBC,GAAD,IAAkB;AADrC,GAzBgC;;AA6BvCC,EAAAA,KAAK,CAAEX,KAAF,QAA2B;AAAA,QAAlB;AAAEY,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;AAC9B,UAAMZ,aAAa,GAAGT,eAAe,CAACQ,KAAD,EAAQ,eAAR,CAArC;AACA,UAAMO,SAAS,GAAGd,QAAQ,CAAC,MAAM;AAC/B,aAAOQ,aAAa,CAACa,KAAd,GACHd,KAAK,CAACG,iBADH,GAEHH,KAAK,CAACO,SAFV;AAGD,KAJyB,CAA1B;AAKA,UAAMC,QAAQ,GAAGf,QAAQ,CAAC,MAAM;AAC9B,aAAOQ,aAAa,CAACa,KAAd,GACHd,KAAK,CAACG,iBADH,GAEHH,KAAK,CAACQ,QAFV;AAGD,KAJwB,CAAzB;;AAMA,aAASO,QAAT,GAAqB;AACnB,UAAId,aAAa,CAACa,KAAlB,EAAyB;AACvBb,QAAAA,aAAa,CAACa,KAAd,GAAsB,KAAtB;AACD;AACF;;AAEDlB,IAAAA,SAAS,CAAC,MAAM;AACd,YAAM,CAACoB,UAAD,EAAaC,YAAb,IAA6BtB,gBAAgB,CAACiB,KAAD,CAAnD;AACA,YAAM,CAACM,UAAD,EAAaC,EAAb,IAAmBjC,gBAAgB,CAACc,KAAD,CAAzC;AACA,YAAM,CAACoB,YAAD,EAAeC,EAAf,IAAqBhC,kBAAkB,CAACW,KAAD,CAA7C;AAEA;AAAA,iBAEU;AAFV,SAGSgB,UAHT,EAISE,UAJT,KAOM,GAAGL,KAPT;AAQMP,QAAAA,OAAO,EAAE;AAAA,cAAC;AACRgB,YAAAA,UADQ;AAERC,YAAAA;AAFQ,WAAD;AAAA,6DAKAH,YALA;AAAA,oBAMA,UANA;AAAA,mCAOiBL,QAPjB;AAAA,yBAQOR,SAAS,CAACO,KARjB;AAAA,wBASMN,QAAQ,CAACM,KATf;AAAA,4BAUUb,aAAa,CAACa,KAAd,GAAsB,OAAtB,GAAgCU,SAV1C;AAAA,wBAWMF,UAAU,CAACR,KAXjB;AAAA,wBAYMS,UAAU,CAACT;AAZjB,aAaAG,YAbA;AAAA;AARf;AA2BD,KAhCQ,CAAT;AAkCA,WAAO,EAAP;AACD;;AAnFsC,CAAD,CAAjC","sourcesContent":["// Styles\nimport './VCheckbox.sass'\n\n// Components\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { filterControlProps, makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed } from 'vue'\nimport { defineComponent, filterInputAttrs, useRender } from '@/util'\n\nexport const VCheckbox = defineComponent({\n  name: 'VCheckbox',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    indeterminateIcon: {\n      type: String,\n      default: '$checkboxIndeterminate',\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n\n    falseIcon: {\n      type: String,\n      default: '$checkboxOff',\n    },\n    trueIcon: {\n      type: String,\n      default: '$checkboxOn',\n    },\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 falseIcon = computed(() => {\n      return indeterminate.value\n        ? props.indeterminateIcon\n        : props.falseIcon\n    })\n    const trueIcon = computed(() => {\n      return indeterminate.value\n        ? props.indeterminateIcon\n        : props.trueIcon\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\n      return (\n        <VInput\n          class=\"v-checkbox\"\n          { ...inputAttrs }\n          { ...inputProps }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isReadonly,\n            }) => (\n              <VSelectionControl\n                { ...controlProps }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                falseIcon={ falseIcon.value }\n                trueIcon={ trueIcon.value }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                { ...controlAttrs }\n              />\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCheckbox = InstanceType<typeof VCheckbox>\n"],"file":"VCheckbox.mjs"}

package/lib/components/VCheckbox/VCheckbox.sass

@@ -1,9 +1,9 @@
-@import './_variables.scss'
+@forward './variables'
+@use 'sass:map'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-input--checkbox
-  &.v-input--indeterminate
-    &.v-input--is-disabled
-      opacity: $checkbox-disabled-opacity
-
-  &.v-input--dense
-    margin-top: $checkbox-dense-margin-top
+.v-checkbox
+  .v-selection-control
+    height: var(--v-input-control-height)

package/lib/components/VCheckbox/_variables.scss

@@ -1,4 +1,2 @@
-@import '../../styles/styles.sass';
-
-$checkbox-disabled-opacity: .6 !default;
-$checkbox-dense-margin-top: 4px !default;
+$checkbox-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
+$checkbox-error-color: rgb(var(--v-theme-error)) !default;

package/lib/components/VCheckbox/index.mjs

@@ -1,10 +1,2 @@
-import VCheckbox from "./VCheckbox.mjs";
-import VSimpleCheckbox from "./VSimpleCheckbox.mjs";
-export { VCheckbox, VSimpleCheckbox };
-export default {
-  $_vuetify_subcomponents: {
-    VCheckbox,
-    VSimpleCheckbox
-  }
-};
+export { VCheckbox } from "./VCheckbox.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCheckbox/index.ts"],"names":["VCheckbox","VSimpleCheckbox","$_vuetify_subcomponents"],"mappings":"OAAOA,S;OACAC,e;AAEP,SAASD,SAAT,EAAoBC,eAApB;AACA,eAAe;AACbC,EAAAA,uBAAuB,EAAE;AACvBF,IAAAA,SADuB;AAEvBC,IAAAA;AAFuB;AADZ,CAAf","sourcesContent":["import VCheckbox from './VCheckbox'\nimport VSimpleCheckbox from './VSimpleCheckbox'\n\nexport { VCheckbox, VSimpleCheckbox }\nexport default {\n  $_vuetify_subcomponents: {\n    VCheckbox,\n    VSimpleCheckbox,\n  },\n}\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VCheckbox/index.ts"],"names":["VCheckbox"],"mappings":"SAASA,S","sourcesContent":["export { VCheckbox } from './VCheckbox'\n"],"file":"index.mjs"}

package/lib/components/VChip/VChip.css

@@ -2,70 +2,75 @@
   align-items: center;
   cursor: default;
   display: inline-flex;
+  font-weight: 400;
   position: relative;
   text-decoration: none;
+  vertical-align: middle;
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  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);
   border-radius: 9999px;
 }
 .v-chip--size-x-small {
   --v-chip-size: 0.625rem;
-  --v-chip-height: 16px;
+  --v-chip-height: 20px;
   font-size: 0.625rem;
-  padding: 0 6px;
+  padding: 0 8px;
 }
 .v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 8px;
+  --v-avatar-height: 12px;
 }
 .v-chip--pill.v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 16px;
+  --v-avatar-height: 20px;
 }
 
-.v-chip--size-x-small .v-chip__prepend {
-  margin-inline-start: -3px;
-  margin-inline-end: 3px;
+.v-chip--size-x-small .v-chip__prepend,
+.v-chip--size-x-small .v-chip__filter {
+  margin-inline-start: -4px;
+  margin-inline-end: 4px;
 }
-.v-chip--pill.v-chip--size-x-small .v-chip__prepend {
-  margin-inline-start: -6px;
+.v-chip--pill.v-chip--size-x-small .v-chip__prepend, .v-chip--pill.v-chip--size-x-small .v-chip__filter {
+  margin-inline-start: -8px;
 }
 
-.v-chip--size-x-small .v-chip__append {
-  margin-inline-end: -3px;
-  margin-inline-start: 3px;
+.v-chip--size-x-small .v-chip__append,
+.v-chip--size-x-small .v-chip__close {
+  margin-inline-end: -4px;
+  margin-inline-start: 4px;
 }
-.v-chip--pill.v-chip--size-x-small .v-chip__append {
-  margin-inline-end: -6px;
+.v-chip--pill.v-chip--size-x-small .v-chip__append, .v-chip--pill.v-chip--size-x-small .v-chip__close {
+  margin-inline-end: -8px;
 }
 
 .v-chip--size-small {
   --v-chip-size: 0.75rem;
-  --v-chip-height: 24px;
+  --v-chip-height: 26px;
   font-size: 0.75rem;
-  padding: 0 9px;
+  padding: 0 10px;
 }
 .v-chip--size-small .v-avatar {
-  --v-avatar-height: 16px;
+  --v-avatar-height: 18px;
 }
 .v-chip--pill.v-chip--size-small .v-avatar {
-  --v-avatar-height: 24px;
+  --v-avatar-height: 26px;
 }
 
-.v-chip--size-small .v-chip__prepend {
-  margin-inline-start: -4.5px;
-  margin-inline-end: 4.5px;
+.v-chip--size-small .v-chip__prepend,
+.v-chip--size-small .v-chip__filter {
+  margin-inline-start: -5px;
+  margin-inline-end: 5px;
 }
-.v-chip--pill.v-chip--size-small .v-chip__prepend {
-  margin-inline-start: -9px;
+.v-chip--pill.v-chip--size-small .v-chip__prepend, .v-chip--pill.v-chip--size-small .v-chip__filter {
+  margin-inline-start: -10px;
 }
 
-.v-chip--size-small .v-chip__append {
-  margin-inline-end: -4.5px;
-  margin-inline-start: 4.5px;
+.v-chip--size-small .v-chip__append,
+.v-chip--size-small .v-chip__close {
+  margin-inline-end: -5px;
+  margin-inline-start: 5px;
 }
-.v-chip--pill.v-chip--size-small .v-chip__append {
-  margin-inline-end: -9px;
+.v-chip--pill.v-chip--size-small .v-chip__append, .v-chip--pill.v-chip--size-small .v-chip__close {
+  margin-inline-end: -10px;
 }
 
 .v-chip--size-default {
@@ -81,78 +86,84 @@
   --v-avatar-height: 32px;
 }
 
-.v-chip--size-default .v-chip__prepend {
+.v-chip--size-default .v-chip__prepend,
+.v-chip--size-default .v-chip__filter {
   margin-inline-start: -6px;
   margin-inline-end: 6px;
 }
-.v-chip--pill.v-chip--size-default .v-chip__prepend {
+.v-chip--pill.v-chip--size-default .v-chip__prepend, .v-chip--pill.v-chip--size-default .v-chip__filter {
   margin-inline-start: -12px;
 }
 
-.v-chip--size-default .v-chip__append {
+.v-chip--size-default .v-chip__append,
+.v-chip--size-default .v-chip__close {
   margin-inline-end: -6px;
   margin-inline-start: 6px;
 }
-.v-chip--pill.v-chip--size-default .v-chip__append {
+.v-chip--pill.v-chip--size-default .v-chip__append, .v-chip--pill.v-chip--size-default .v-chip__close {
   margin-inline-end: -12px;
 }
 
 .v-chip--size-large {
   --v-chip-size: 1rem;
-  --v-chip-height: 40px;
+  --v-chip-height: 38px;
   font-size: 1rem;
-  padding: 0 15px;
+  padding: 0 14px;
 }
 .v-chip--size-large .v-avatar {
-  --v-avatar-height: 32px;
+  --v-avatar-height: 30px;
 }
 .v-chip--pill.v-chip--size-large .v-avatar {
-  --v-avatar-height: 40px;
+  --v-avatar-height: 38px;
 }
 
-.v-chip--size-large .v-chip__prepend {
-  margin-inline-start: -7.5px;
-  margin-inline-end: 7.5px;
+.v-chip--size-large .v-chip__prepend,
+.v-chip--size-large .v-chip__filter {
+  margin-inline-start: -7px;
+  margin-inline-end: 7px;
 }
-.v-chip--pill.v-chip--size-large .v-chip__prepend {
-  margin-inline-start: -15px;
+.v-chip--pill.v-chip--size-large .v-chip__prepend, .v-chip--pill.v-chip--size-large .v-chip__filter {
+  margin-inline-start: -14px;
 }
 
-.v-chip--size-large .v-chip__append {
-  margin-inline-end: -7.5px;
-  margin-inline-start: 7.5px;
+.v-chip--size-large .v-chip__append,
+.v-chip--size-large .v-chip__close {
+  margin-inline-end: -7px;
+  margin-inline-start: 7px;
 }
-.v-chip--pill.v-chip--size-large .v-chip__append {
-  margin-inline-end: -15px;
+.v-chip--pill.v-chip--size-large .v-chip__append, .v-chip--pill.v-chip--size-large .v-chip__close {
+  margin-inline-end: -14px;
 }
 
 .v-chip--size-x-large {
   --v-chip-size: 1.125rem;
-  --v-chip-height: 48px;
+  --v-chip-height: 44px;
   font-size: 1.125rem;
-  padding: 0 18px;
+  padding: 0 17px;
 }
 .v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 40px;
+  --v-avatar-height: 36px;
 }
 .v-chip--pill.v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 48px;
+  --v-avatar-height: 44px;
 }
 
-.v-chip--size-x-large .v-chip__prepend {
-  margin-inline-start: -9px;
-  margin-inline-end: 9px;
+.v-chip--size-x-large .v-chip__prepend,
+.v-chip--size-x-large .v-chip__filter {
+  margin-inline-start: -8.5px;
+  margin-inline-end: 8.5px;
 }
-.v-chip--pill.v-chip--size-x-large .v-chip__prepend {
-  margin-inline-start: -18px;
+.v-chip--pill.v-chip--size-x-large .v-chip__prepend, .v-chip--pill.v-chip--size-x-large .v-chip__filter {
+  margin-inline-start: -17px;
 }
 
-.v-chip--size-x-large .v-chip__append {
-  margin-inline-end: -9px;
-  margin-inline-start: 9px;
+.v-chip--size-x-large .v-chip__append,
+.v-chip--size-x-large .v-chip__close {
+  margin-inline-end: -8.5px;
+  margin-inline-start: 8.5px;
 }
-.v-chip--pill.v-chip--size-x-large .v-chip__append {
-  margin-inline-end: -18px;
+.v-chip--pill.v-chip--size-x-large .v-chip__append, .v-chip--pill.v-chip--size-x-large .v-chip__close {
+  margin-inline-end: -17px;
 }
 
 .v-chip.v-chip--density-default {
@@ -180,10 +191,15 @@
 .v-chip--variant-plain .v-chip__overlay {
   display: none;
 }
+.v-chip--variant-contained, .v-chip--variant-contained-flat {
+  background: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+}
 .v-chip--variant-contained {
-  background: rgba(var(--v-theme-on-surface), var(--v-activated-opacity));
-  color: currentColor;
-  z-index: 1;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+.v-chip--variant-contained-flat {
+  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-chip--variant-outlined {
   border: thin solid currentColor;
@@ -210,38 +226,42 @@
   cursor: pointer;
 }
 .v-chip--label {
-  border-radius: 8px;
-}
-
-.v-chip__append {
-  margin-inline-start: 8px;
-  margin-inline-end: 0;
-}
-.v-chip__append + .v-chip__close {
-  margin-inline-start: 0;
+  border-radius: 4px;
 }
 
-.v-chip__prepend {
-  margin-inline-start: -12px;
-  margin-inline-end: 8px;
+.v-chip__filter,
+.v-chip__prepend,
+.v-chip__append,
+.v-chip__close {
+  align-items: center;
+  display: inline-flex;
 }
 
 .v-chip__close {
-  align-self: center;
   cursor: pointer;
-  display: inline-flex;
   flex: 0 1 auto;
   font-size: 18px;
   max-height: 18px;
   max-width: 18px;
   user-select: none;
-  margin-inline-start: 8px;
-  margin-inline-end: -4px;
 }
 .v-chip__close .v-icon {
   font-size: inherit;
 }
 
+.v-chip__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
 .v-chip--disabled {
   opacity: 0.3;
   pointer-events: none;
@@ -249,5 +269,5 @@
 }
 
 .v-chip--label {
-  border-radius: 8px;
+  border-radius: 4px;
 }