@vuetify/nightly 3.0.0-beta.3 → 3.0.0-beta.6

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

@@ -1 +1 @@
-{"version":3,"file":"VCheckbox.mjs","names":["filterInputProps","makeVInputProps","VInput","filterControlProps","makeSelectionControlProps","VSelectionControl","useProxiedModel","IconValue","computed","defineComponent","filterInputAttrs","useRender","VCheckbox","name","inheritAttrs","props","indeterminate","Boolean","indeterminateIcon","type","default","falseIcon","trueIcon","emits","val","setup","attrs","slots","value","onChange","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","isDisabled","isReadonly","undefined"],"sources":["../../../src/components/VCheckbox/VCheckbox.tsx"],"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'\nimport { IconValue } from '@/composables/icons'\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: IconValue,\n      default: '$checkboxIndeterminate',\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n\n    falseIcon: {\n      type: IconValue,\n      default: '$checkboxOff',\n    },\n    trueIcon: {\n      type: IconValue,\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                v-slots={ slots }\n              />\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCheckbox = InstanceType<typeof VCheckbox>\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,gB,EAAkBC,e,EAAiBC,M;SACnCC,kB,EAAoBC,yB,EAA2BC,iB,sDAExD;;SACSC,e;SACAC,S,uCAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,gB,EAAkBC,S;AAE5C,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE,WADiC;EAGvCC,YAAY,EAAE,KAHyB;EAKvCC,KAAK,EAAE;IACLC,aAAa,EAAEC,OADV;IAELC,iBAAiB,EAAE;MACjBC,IAAI,EAAEZ,SADW;MAEjBa,OAAO,EAAE;IAFQ,CAFd;IAOL,GAAGnB,eAAe,EAPb;IAQL,GAAGG,yBAAyB,EARvB;IAULiB,SAAS,EAAE;MACTF,IAAI,EAAEZ,SADG;MAETa,OAAO,EAAE;IAFA,CAVN;IAcLE,QAAQ,EAAE;MACRH,IAAI,EAAEZ,SADE;MAERa,OAAO,EAAE;IAFD;EAdL,CALgC;EAyBvCG,KAAK,EAAE;IACL,wBAAyBC,GAAD,IAAkB;EADrC,CAzBgC;;EA6BvCC,KAAK,CAAEV,KAAF,QAA2B;IAAA,IAAlB;MAAEW,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMX,aAAa,GAAGV,eAAe,CAACS,KAAD,EAAQ,eAAR,CAArC;IACA,MAAMM,SAAS,GAAGb,QAAQ,CAAC,MAAM;MAC/B,OAAOQ,aAAa,CAACY,KAAd,GACHb,KAAK,CAACG,iBADH,GAEHH,KAAK,CAACM,SAFV;IAGD,CAJyB,CAA1B;IAKA,MAAMC,QAAQ,GAAGd,QAAQ,CAAC,MAAM;MAC9B,OAAOQ,aAAa,CAACY,KAAd,GACHb,KAAK,CAACG,iBADH,GAEHH,KAAK,CAACO,QAFV;IAGD,CAJwB,CAAzB;;IAMA,SAASO,QAAT,GAAqB;MACnB,IAAIb,aAAa,CAACY,KAAlB,EAAyB;QACvBZ,aAAa,CAACY,KAAd,GAAsB,KAAtB;MACD;IACF;;IAEDjB,SAAS,CAAC,MAAM;MACd,MAAM,CAACmB,UAAD,EAAaC,YAAb,IAA6BrB,gBAAgB,CAACgB,KAAD,CAAnD;MACA,MAAM,CAACM,UAAD,EAAaC,EAAb,IAAmBjC,gBAAgB,CAACe,KAAD,CAAzC;MACA,MAAM,CAACmB,YAAD,EAAeC,EAAf,IAAqBhC,kBAAkB,CAACY,KAAD,CAA7C;MAEA;QAAA,SAEU;MAFV,GAGSe,UAHT,EAISE,UAJT,KAOM,GAAGL,KAPT;QAQMP,OAAO,EAAE;UAAA,IAAC;YACRgB,UADQ;YAERC;UAFQ,CAAD;UAAA,mDAKAH,YALA;YAAA,QAMA,UANA;YAAA,uBAOiBL,QAPjB;YAAA,aAQOR,SAAS,CAACO,KARjB;YAAA,YASMN,QAAQ,CAACM,KATf;YAAA,gBAUUZ,aAAa,CAACY,KAAd,GAAsB,OAAtB,GAAgCU,SAV1C;YAAA,YAWMF,UAAU,CAACR,KAXjB;YAAA,YAYMS,UAAU,CAACT;UAZjB,GAaAG,YAbA,GAcKJ,KAdL;QAAA;MARf;IA4BD,CAjCQ,CAAT;IAmCA,OAAO,EAAP;EACD;;AApFsC,CAAD,CAAjC"}
+{"version":3,"file":"VCheckbox.mjs","names":["filterInputProps","makeVInputProps","VInput","filterCheckboxBtnProps","makeVCheckboxBtnProps","VCheckboxBtn","computed","defineComponent","filterInputAttrs","getUid","useRender","VCheckbox","name","inheritAttrs","props","setup","attrs","slots","uid","id","inputAttrs","controlAttrs","inputProps","_1","checkboxProps","_2","value","default","isDisabled","isReadonly"],"sources":["../../../src/components/VCheckbox/VCheckbox.tsx"],"sourcesContent":["// Styles\nimport './VCheckbox.sass'\n\n// Components\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { filterCheckboxBtnProps, makeVCheckboxBtnProps, VCheckboxBtn } from './VCheckboxBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, filterInputAttrs, getUid, useRender } from '@/util'\n\nexport const VCheckbox = defineComponent({\n  name: 'VCheckbox',\n\n  inheritAttrs: false,\n\n  props: {\n    ...makeVInputProps(),\n    ...makeVCheckboxBtnProps(),\n  },\n\n  setup (props, { attrs, slots }) {\n    const uid = getUid()\n    const id = computed(() => props.id || `checkbox-${uid}`)\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = filterInputProps(props)\n      const [checkboxProps, _2] = filterCheckboxBtnProps(props)\n\n      return (\n        <VInput\n          class=\"v-checkbox\"\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              isDisabled,\n              isReadonly,\n            }) => (\n              <VCheckboxBtn\n                { ...checkboxProps }\n                id={ id.value }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                { ...controlAttrs }\n                v-slots={ slots }\n              />\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCheckbox = InstanceType<typeof VCheckbox>\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,gB,EAAkBC,e,EAAiBC,M;SACnCC,sB,EAAwBC,qB,EAAuBC,Y,8BAExD;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,gB,EAAkBC,M,EAAQC,S;AAEpD,OAAO,MAAMC,SAAS,GAAGJ,eAAe,CAAC;EACvCK,IAAI,EAAE,WADiC;EAGvCC,YAAY,EAAE,KAHyB;EAKvCC,KAAK,EAAE,EACL,GAAGb,eAAe,EADb;IAEL,GAAGG,qBAAqB;EAFnB,CALgC;;EAUvCW,KAAK,CAAED,KAAF,QAA2B;IAAA,IAAlB;MAAEE,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,GAAG,GAAGT,MAAM,EAAlB;IACA,MAAMU,EAAE,GAAGb,QAAQ,CAAC,MAAMQ,KAAK,CAACK,EAAN,IAAa,YAAWD,GAAI,EAAnC,CAAnB;IAEAR,SAAS,CAAC,MAAM;MACd,MAAM,CAACU,UAAD,EAAaC,YAAb,IAA6Bb,gBAAgB,CAACQ,KAAD,CAAnD;MACA,MAAM,CAACM,UAAD,EAAaC,EAAb,IAAmBvB,gBAAgB,CAACc,KAAD,CAAzC;MACA,MAAM,CAACU,aAAD,EAAgBC,EAAhB,IAAsBtB,sBAAsB,CAACW,KAAD,CAAlD;MAEA;QAAA,SAEU;MAFV,GAGSM,UAHT,EAISE,UAJT;QAAA,MAKSH,EAAE,CAACO;MALZ,MAQM,GAAGT,KART;QASMU,OAAO,EAAE;UAAA,IAAC;YACRR,EADQ;YAERS,UAFQ;YAGRC;UAHQ,CAAD;UAAA,8CAMAL,aANA;YAAA,MAOAL,EAAE,CAACO,KAPH;YAAA,YAQME,UAAU,CAACF,KARjB;YAAA,YASMG,UAAU,CAACH;UATjB,GAUAL,YAVA,GAWKJ,KAXL;QAAA;MATf;IA0BD,CA/BQ,CAAT;IAiCA,OAAO,EAAP;EACD;;AAhDsC,CAAD,CAAjC"}

package/lib/components/VCheckbox/VCheckbox.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use 'sass:map'
 @use '../../styles/settings'
 @use '../../styles/tools'

package/lib/components/VCheckbox/VCheckboxBtn.mjs

@@ -0,0 +1,67 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Components
+import { makeSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
+
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
+
+import { computed } from 'vue';
+import { defineComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
+
+export const makeVCheckboxBtnProps = propsFactory({
+  indeterminate: Boolean,
+  indeterminateIcon: {
+    type: IconValue,
+    default: '$checkboxIndeterminate'
+  },
+  ...makeSelectionControlProps({
+    falseIcon: '$checkboxOff',
+    trueIcon: '$checkboxOn'
+  })
+});
+export const VCheckboxBtn = defineComponent({
+  name: 'VCheckboxBtn',
+  props: makeVCheckboxBtnProps(),
+  emits: {
+    'update:modelValue': value => true,
+    'update:indeterminate': val => true
+  },
+
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const indeterminate = useProxiedModel(props, 'indeterminate');
+
+    function onChange(v) {
+      if (indeterminate.value) {
+        indeterminate.value = false;
+      }
+
+      emit('update:modelValue', v);
+    }
+
+    const falseIcon = computed(() => {
+      return props.indeterminate ? props.indeterminateIcon : props.falseIcon;
+    });
+    const trueIcon = computed(() => {
+      return props.indeterminate ? props.indeterminateIcon : props.trueIcon;
+    });
+    useRender(() => _createVNode(VSelectionControl, _mergeProps(props, {
+      "class": "v-checkbox-btn",
+      "type": "checkbox",
+      "inline": true,
+      "onUpdate:modelValue": onChange,
+      "falseIcon": falseIcon.value,
+      "trueIcon": trueIcon.value,
+      "aria-checked": props.indeterminate ? 'mixed' : undefined
+    }), slots));
+    return {};
+  }
+
+});
+export function filterCheckboxBtnProps(props) {
+  return pick(props, Object.keys(VCheckboxBtn.props));
+}
+//# sourceMappingURL=VCheckboxBtn.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VCheckboxBtn.mjs","names":["makeSelectionControlProps","VSelectionControl","useProxiedModel","IconValue","computed","defineComponent","pick","propsFactory","useRender","makeVCheckboxBtnProps","indeterminate","Boolean","indeterminateIcon","type","default","falseIcon","trueIcon","VCheckboxBtn","name","props","emits","value","val","setup","slots","emit","onChange","v","undefined","filterCheckboxBtnProps","Object","keys"],"sources":["../../../src/components/VCheckbox/VCheckboxBtn.tsx"],"sourcesContent":["// Components\nimport { makeSelectionControlProps, VSelectionControl } from '../VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ExtractPropTypes } from 'vue'\n\nexport const makeVCheckboxBtnProps = propsFactory({\n  indeterminate: Boolean,\n  indeterminateIcon: {\n    type: IconValue,\n    default: '$checkboxIndeterminate',\n  },\n\n  ...makeSelectionControlProps({\n    falseIcon: '$checkboxOff',\n    trueIcon: '$checkboxOn',\n  }),\n})\n\nexport const VCheckboxBtn = defineComponent({\n  name: 'VCheckboxBtn',\n\n  props: makeVCheckboxBtnProps(),\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n\n    function onChange (v: any) {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n\n      emit('update:modelValue', v)\n    }\n\n    const falseIcon = computed(() => {\n      return props.indeterminate\n        ? props.indeterminateIcon\n        : props.falseIcon\n    })\n\n    const trueIcon = computed(() => {\n      return props.indeterminate\n        ? props.indeterminateIcon\n        : props.trueIcon\n    })\n\n    useRender(() => (\n      <VSelectionControl\n        { ...props }\n        class=\"v-checkbox-btn\"\n        type=\"checkbox\"\n        inline\n        onUpdate:modelValue={ onChange }\n        falseIcon={ falseIcon.value }\n        trueIcon={ trueIcon.value }\n        aria-checked={ props.indeterminate ? 'mixed' : undefined }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>\n\nexport function filterCheckboxBtnProps (props: ExtractPropTypes<ReturnType<typeof makeVCheckboxBtnProps>>) {\n  return pick(props, Object.keys(VCheckboxBtn.props) as any)\n}\n"],"mappings":";AAAA;SACSA,yB,EAA2BC,iB,sDAEpC;;SACSC,e;SACAC,S,uCAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,I,EAAMC,Y,EAAcC,S,gCAE9C;;AAGA,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChDG,aAAa,EAAEC,OADiC;EAEhDC,iBAAiB,EAAE;IACjBC,IAAI,EAAEV,SADW;IAEjBW,OAAO,EAAE;EAFQ,CAF6B;EAOhD,GAAGd,yBAAyB,CAAC;IAC3Be,SAAS,EAAE,cADgB;IAE3BC,QAAQ,EAAE;EAFiB,CAAD;AAPoB,CAAD,CAA1C;AAaP,OAAO,MAAMC,YAAY,GAAGZ,eAAe,CAAC;EAC1Ca,IAAI,EAAE,cADoC;EAG1CC,KAAK,EAAEV,qBAAqB,EAHc;EAK1CW,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB,IADhC;IAEL,wBAAyBC,GAAD,IAAkB;EAFrC,CALmC;;EAU1CC,KAAK,CAAEJ,KAAF,QAA0B;IAAA,IAAjB;MAAEK,KAAF;MAASC;IAAT,CAAiB;IAC7B,MAAMf,aAAa,GAAGR,eAAe,CAACiB,KAAD,EAAQ,eAAR,CAArC;;IAEA,SAASO,QAAT,CAAmBC,CAAnB,EAA2B;MACzB,IAAIjB,aAAa,CAACW,KAAlB,EAAyB;QACvBX,aAAa,CAACW,KAAd,GAAsB,KAAtB;MACD;;MAEDI,IAAI,CAAC,mBAAD,EAAsBE,CAAtB,CAAJ;IACD;;IAED,MAAMZ,SAAS,GAAGX,QAAQ,CAAC,MAAM;MAC/B,OAAOe,KAAK,CAACT,aAAN,GACHS,KAAK,CAACP,iBADH,GAEHO,KAAK,CAACJ,SAFV;IAGD,CAJyB,CAA1B;IAMA,MAAMC,QAAQ,GAAGZ,QAAQ,CAAC,MAAM;MAC9B,OAAOe,KAAK,CAACT,aAAN,GACHS,KAAK,CAACP,iBADH,GAEHO,KAAK,CAACH,QAFV;IAGD,CAJwB,CAAzB;IAMAR,SAAS,CAAC,kDAEDW,KAFC;MAAA,SAGA,gBAHA;MAAA,QAID,UAJC;MAAA;MAAA,uBAMgBO,QANhB;MAAA,aAOMX,SAAS,CAACM,KAPhB;MAAA,YAQKL,QAAQ,CAACK,KARd;MAAA,gBASSF,KAAK,CAACT,aAAN,GAAsB,OAAtB,GAAgCkB;IATzC,IAUIJ,KAVJ,CAAD,CAAT;IAcA,OAAO,EAAP;EACD;;AAhDyC,CAAD,CAApC;AAqDP,OAAO,SAASK,sBAAT,CAAiCV,KAAjC,EAAoG;EACzG,OAAOb,IAAI,CAACa,KAAD,EAAQW,MAAM,CAACC,IAAP,CAAYd,YAAY,CAACE,KAAzB,CAAR,CAAX;AACD"}

package/lib/components/VCheckbox/index.mjs

@@ -1,2 +1,3 @@
 export { VCheckbox } from "./VCheckbox.mjs";
+export { VCheckboxBtn } from "./VCheckboxBtn.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["VCheckbox"],"sources":["../../../src/components/VCheckbox/index.ts"],"sourcesContent":["export { VCheckbox } from './VCheckbox'\n"],"mappings":"SAASA,S"}
+{"version":3,"file":"index.mjs","names":["VCheckbox","VCheckboxBtn"],"sources":["../../../src/components/VCheckbox/index.ts"],"sourcesContent":["export { VCheckbox } from './VCheckbox'\nexport { VCheckboxBtn } from './VCheckboxBtn'\n"],"mappings":"SAASA,S;SACAC,Y"}

package/lib/components/VChip/VChip.css

@@ -14,160 +14,230 @@
   border-width: 0;
   border-radius: 9999px;
 }
-.v-chip--size-x-small {
+.v-chip.v-chip--size-x-small {
   --v-chip-size: 0.625rem;
   --v-chip-height: 20px;
   font-size: 0.625rem;
   padding: 0 8px;
 }
-.v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 12px;
+.v-chip.v-chip--size-x-small .v-avatar {
+  --v-avatar-height: 14px;
 }
-.v-chip--pill.v-chip--size-x-small .v-avatar {
+.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar {
   --v-avatar-height: 20px;
 }
 
-.v-chip--size-x-small .v-chip__prepend,
-.v-chip--size-x-small .v-chip__filter {
-  margin-inline-start: -4px;
+.v-chip.v-chip--size-x-small .v-chip__filter,
+.v-chip.v-chip--size-x-small .v-chip__prepend,
+.v-chip.v-chip--size-x-small > .v-avatar--start,
+.v-chip.v-chip--size-x-small > .v-icon--start {
   margin-inline-end: 4px;
 }
-.v-chip--pill.v-chip--size-x-small .v-chip__prepend, .v-chip--pill.v-chip--size-x-small .v-chip__filter {
+.v-chip.v-chip--size-x-small .v-chip__filter,
+.v-chip.v-chip--size-x-small .v-chip__prepend,
+.v-chip.v-chip--size-x-small .v-icon--start {
+  margin-inline-start: -4px;
+}
+.v-chip.v-chip--size-x-small .v-avatar--start {
+  margin-inline-start: -5.6px;
+}
+.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--start {
   margin-inline-start: -8px;
 }
 
-.v-chip--size-x-small .v-chip__append,
-.v-chip--size-x-small .v-chip__close {
-  margin-inline-end: -4px;
+.v-chip.v-chip--size-x-small .v-chip__append,
+.v-chip.v-chip--size-x-small .v-chip__close,
+.v-chip.v-chip--size-x-small > .v-avatar--end,
+.v-chip.v-chip--size-x-small > .v-icon--end {
   margin-inline-start: 4px;
+  margin-inline-end: -4px;
 }
-.v-chip--pill.v-chip--size-x-small .v-chip__append, .v-chip--pill.v-chip--size-x-small .v-chip__close {
+.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end, .v-chip--pill.v-chip.v-chip--size-x-small .v-icon--end {
   margin-inline-end: -8px;
 }
+.v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close, .v-chip--pill.v-chip.v-chip--size-x-small .v-icon--end + .v-chip__close {
+  margin-inline-start: 8px;
+}
 
-.v-chip--size-small {
+.v-chip.v-chip--size-small {
   --v-chip-size: 0.75rem;
   --v-chip-height: 26px;
   font-size: 0.75rem;
   padding: 0 10px;
 }
-.v-chip--size-small .v-avatar {
-  --v-avatar-height: 18px;
+.v-chip.v-chip--size-small .v-avatar {
+  --v-avatar-height: 20px;
 }
-.v-chip--pill.v-chip--size-small .v-avatar {
+.v-chip--pill.v-chip.v-chip--size-small .v-avatar {
   --v-avatar-height: 26px;
 }
 
-.v-chip--size-small .v-chip__prepend,
-.v-chip--size-small .v-chip__filter {
-  margin-inline-start: -5px;
+.v-chip.v-chip--size-small .v-chip__filter,
+.v-chip.v-chip--size-small .v-chip__prepend,
+.v-chip.v-chip--size-small > .v-avatar--start,
+.v-chip.v-chip--size-small > .v-icon--start {
   margin-inline-end: 5px;
 }
-.v-chip--pill.v-chip--size-small .v-chip__prepend, .v-chip--pill.v-chip--size-small .v-chip__filter {
+.v-chip.v-chip--size-small .v-chip__filter,
+.v-chip.v-chip--size-small .v-chip__prepend,
+.v-chip.v-chip--size-small .v-icon--start {
+  margin-inline-start: -5px;
+}
+.v-chip.v-chip--size-small .v-avatar--start {
+  margin-inline-start: -7px;
+}
+.v-chip--pill.v-chip.v-chip--size-small .v-avatar--start {
   margin-inline-start: -10px;
 }
 
-.v-chip--size-small .v-chip__append,
-.v-chip--size-small .v-chip__close {
-  margin-inline-end: -5px;
+.v-chip.v-chip--size-small .v-chip__append,
+.v-chip.v-chip--size-small .v-chip__close,
+.v-chip.v-chip--size-small > .v-avatar--end,
+.v-chip.v-chip--size-small > .v-icon--end {
   margin-inline-start: 5px;
+  margin-inline-end: -5px;
 }
-.v-chip--pill.v-chip--size-small .v-chip__append, .v-chip--pill.v-chip--size-small .v-chip__close {
+.v-chip--pill.v-chip.v-chip--size-small .v-avatar--end, .v-chip--pill.v-chip.v-chip--size-small .v-icon--end {
   margin-inline-end: -10px;
 }
+.v-chip--pill.v-chip.v-chip--size-small .v-avatar--end + .v-chip__close, .v-chip--pill.v-chip.v-chip--size-small .v-icon--end + .v-chip__close {
+  margin-inline-start: 10px;
+}
 
-.v-chip--size-default {
+.v-chip.v-chip--size-default {
   --v-chip-size: 0.875rem;
   --v-chip-height: 32px;
   font-size: 0.875rem;
   padding: 0 12px;
 }
-.v-chip--size-default .v-avatar {
-  --v-avatar-height: 24px;
+.v-chip.v-chip--size-default .v-avatar {
+  --v-avatar-height: 26px;
 }
-.v-chip--pill.v-chip--size-default .v-avatar {
+.v-chip--pill.v-chip.v-chip--size-default .v-avatar {
   --v-avatar-height: 32px;
 }
 
-.v-chip--size-default .v-chip__prepend,
-.v-chip--size-default .v-chip__filter {
-  margin-inline-start: -6px;
+.v-chip.v-chip--size-default .v-chip__filter,
+.v-chip.v-chip--size-default .v-chip__prepend,
+.v-chip.v-chip--size-default > .v-avatar--start,
+.v-chip.v-chip--size-default > .v-icon--start {
   margin-inline-end: 6px;
 }
-.v-chip--pill.v-chip--size-default .v-chip__prepend, .v-chip--pill.v-chip--size-default .v-chip__filter {
+.v-chip.v-chip--size-default .v-chip__filter,
+.v-chip.v-chip--size-default .v-chip__prepend,
+.v-chip.v-chip--size-default .v-icon--start {
+  margin-inline-start: -6px;
+}
+.v-chip.v-chip--size-default .v-avatar--start {
+  margin-inline-start: -8.4px;
+}
+.v-chip--pill.v-chip.v-chip--size-default .v-avatar--start {
   margin-inline-start: -12px;
 }
 
-.v-chip--size-default .v-chip__append,
-.v-chip--size-default .v-chip__close {
-  margin-inline-end: -6px;
+.v-chip.v-chip--size-default .v-chip__append,
+.v-chip.v-chip--size-default .v-chip__close,
+.v-chip.v-chip--size-default > .v-avatar--end,
+.v-chip.v-chip--size-default > .v-icon--end {
   margin-inline-start: 6px;
+  margin-inline-end: -6px;
 }
-.v-chip--pill.v-chip--size-default .v-chip__append, .v-chip--pill.v-chip--size-default .v-chip__close {
+.v-chip--pill.v-chip.v-chip--size-default .v-avatar--end, .v-chip--pill.v-chip.v-chip--size-default .v-icon--end {
   margin-inline-end: -12px;
 }
+.v-chip--pill.v-chip.v-chip--size-default .v-avatar--end + .v-chip__close, .v-chip--pill.v-chip.v-chip--size-default .v-icon--end + .v-chip__close {
+  margin-inline-start: 12px;
+}
 
-.v-chip--size-large {
+.v-chip.v-chip--size-large {
   --v-chip-size: 1rem;
   --v-chip-height: 38px;
   font-size: 1rem;
   padding: 0 14px;
 }
-.v-chip--size-large .v-avatar {
-  --v-avatar-height: 30px;
+.v-chip.v-chip--size-large .v-avatar {
+  --v-avatar-height: 32px;
 }
-.v-chip--pill.v-chip--size-large .v-avatar {
+.v-chip--pill.v-chip.v-chip--size-large .v-avatar {
   --v-avatar-height: 38px;
 }
 
-.v-chip--size-large .v-chip__prepend,
-.v-chip--size-large .v-chip__filter {
-  margin-inline-start: -7px;
+.v-chip.v-chip--size-large .v-chip__filter,
+.v-chip.v-chip--size-large .v-chip__prepend,
+.v-chip.v-chip--size-large > .v-avatar--start,
+.v-chip.v-chip--size-large > .v-icon--start {
   margin-inline-end: 7px;
 }
-.v-chip--pill.v-chip--size-large .v-chip__prepend, .v-chip--pill.v-chip--size-large .v-chip__filter {
+.v-chip.v-chip--size-large .v-chip__filter,
+.v-chip.v-chip--size-large .v-chip__prepend,
+.v-chip.v-chip--size-large .v-icon--start {
+  margin-inline-start: -7px;
+}
+.v-chip.v-chip--size-large .v-avatar--start {
+  margin-inline-start: -9.8px;
+}
+.v-chip--pill.v-chip.v-chip--size-large .v-avatar--start {
   margin-inline-start: -14px;
 }
 
-.v-chip--size-large .v-chip__append,
-.v-chip--size-large .v-chip__close {
-  margin-inline-end: -7px;
+.v-chip.v-chip--size-large .v-chip__append,
+.v-chip.v-chip--size-large .v-chip__close,
+.v-chip.v-chip--size-large > .v-avatar--end,
+.v-chip.v-chip--size-large > .v-icon--end {
   margin-inline-start: 7px;
+  margin-inline-end: -7px;
 }
-.v-chip--pill.v-chip--size-large .v-chip__append, .v-chip--pill.v-chip--size-large .v-chip__close {
+.v-chip--pill.v-chip.v-chip--size-large .v-avatar--end, .v-chip--pill.v-chip.v-chip--size-large .v-icon--end {
   margin-inline-end: -14px;
 }
+.v-chip--pill.v-chip.v-chip--size-large .v-avatar--end + .v-chip__close, .v-chip--pill.v-chip.v-chip--size-large .v-icon--end + .v-chip__close {
+  margin-inline-start: 14px;
+}
 
-.v-chip--size-x-large {
+.v-chip.v-chip--size-x-large {
   --v-chip-size: 1.125rem;
   --v-chip-height: 44px;
   font-size: 1.125rem;
   padding: 0 17px;
 }
-.v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 36px;
+.v-chip.v-chip--size-x-large .v-avatar {
+  --v-avatar-height: 38px;
 }
-.v-chip--pill.v-chip--size-x-large .v-avatar {
+.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar {
   --v-avatar-height: 44px;
 }
 
-.v-chip--size-x-large .v-chip__prepend,
-.v-chip--size-x-large .v-chip__filter {
-  margin-inline-start: -8.5px;
+.v-chip.v-chip--size-x-large .v-chip__filter,
+.v-chip.v-chip--size-x-large .v-chip__prepend,
+.v-chip.v-chip--size-x-large > .v-avatar--start,
+.v-chip.v-chip--size-x-large > .v-icon--start {
   margin-inline-end: 8.5px;
 }
-.v-chip--pill.v-chip--size-x-large .v-chip__prepend, .v-chip--pill.v-chip--size-x-large .v-chip__filter {
+.v-chip.v-chip--size-x-large .v-chip__filter,
+.v-chip.v-chip--size-x-large .v-chip__prepend,
+.v-chip.v-chip--size-x-large .v-icon--start {
+  margin-inline-start: -8.5px;
+}
+.v-chip.v-chip--size-x-large .v-avatar--start {
+  margin-inline-start: -11.9px;
+}
+.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--start {
   margin-inline-start: -17px;
 }
 
-.v-chip--size-x-large .v-chip__append,
-.v-chip--size-x-large .v-chip__close {
-  margin-inline-end: -8.5px;
+.v-chip.v-chip--size-x-large .v-chip__append,
+.v-chip.v-chip--size-x-large .v-chip__close,
+.v-chip.v-chip--size-x-large > .v-avatar--end,
+.v-chip.v-chip--size-x-large > .v-icon--end {
   margin-inline-start: 8.5px;
+  margin-inline-end: -8.5px;
 }
-.v-chip--pill.v-chip--size-x-large .v-chip__append, .v-chip--pill.v-chip--size-x-large .v-chip__close {
+.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end, .v-chip--pill.v-chip.v-chip--size-x-large .v-icon--end {
   margin-inline-end: -17px;
 }
+.v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close, .v-chip--pill.v-chip.v-chip--size-x-large .v-icon--end + .v-chip__close {
+  margin-inline-start: 17px;
+}
 
 .v-chip.v-chip--density-default {
   height: calc(var(--v-chip-height) + 0px);
@@ -181,7 +251,7 @@
   height: calc(var(--v-chip-height) + -12px);
 }
 
-.v-chip--variant-plain, .v-chip--variant-outlined, .v-chip--variant-text, .v-chip--variant-contained-text {
+.v-chip--variant-plain, .v-chip--variant-outlined, .v-chip--variant-text, .v-chip--variant-tonal {
   background: transparent;
   color: inherit;
 }
@@ -194,14 +264,14 @@
 .v-chip--variant-plain .v-chip__overlay {
   display: none;
 }
-.v-chip--variant-contained, .v-chip--variant-contained-flat {
+.v-chip--variant-elevated, .v-chip--variant-flat {
   background: rgb(var(--v-theme-surface-variant));
   color: rgb(var(--v-theme-on-surface-variant));
 }
-.v-chip--variant-contained {
+.v-chip--variant-elevated {
   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 {
+.v-chip--variant-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 {
@@ -210,7 +280,7 @@
 .v-chip--variant-text .v-chip__overlay {
   background: currentColor;
 }
-.v-chip--variant-contained-text .v-chip__underlay {
+.v-chip--variant-tonal .v-chip__underlay {
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
@@ -228,6 +298,9 @@
 .v-chip--link {
   cursor: pointer;
 }
+.v-chip--filter {
+  user-select: none;
+}
 .v-chip--label {
   border-radius: 4px;
 }
@@ -252,6 +325,10 @@
   font-size: inherit;
 }
 
+.v-chip__filter {
+  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .v-chip__overlay {
   position: absolute;
   top: 0;

package/lib/components/VChip/VChip.mjs

@@ -1,9 +1,12 @@
 import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+
+/* eslint-disable complexity */
 // Styles
 import "./VChip.css"; // Components
 
 import { VAvatar } from "../VAvatar/index.mjs";
 import { VChipGroupSymbol } from "../VChipGroup/VChipGroup.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VExpandXTransition } from "../transitions/index.mjs";
 import { VIcon } from "../VIcon/index.mjs"; // Composables
 
@@ -73,13 +76,14 @@ export const VChip = defineComponent({
     }),
     ...makeThemeProps(),
     ...makeVariantProps({
-      variant: 'contained-text'
+      variant: 'tonal'
     })
   },
   emits: {
     'click:close': e => true,
     'update:active': value => true,
-    'update:modelValue': value => true
+    'update:modelValue': value => true,
+    'group:selected': val => true
   },
 
   setup(props, _ref) {
@@ -88,10 +92,6 @@ export const VChip = defineComponent({
       emit,
       slots
     } = _ref;
-    const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      themeClasses
-    } = provideTheme(props);
     const {
       borderClasses
     } = useBorder(props);
@@ -100,10 +100,12 @@ export const VChip = defineComponent({
       colorStyles,
       variantClasses
     } = useVariant(props);
+    const {
+      densityClasses
+    } = useDensity(props);
     const {
       elevationClasses
     } = useElevation(props);
-    const group = useGroupItem(props, VChipGroupSymbol, false);
     const {
       roundedClasses
     } = useRounded(props);
@@ -111,8 +113,10 @@ export const VChip = defineComponent({
       sizeClasses
     } = useSize(props);
     const {
-      densityClasses
-    } = useDensity(props);
+      themeClasses
+    } = provideTheme(props);
+    const isActive = useProxiedModel(props, 'modelValue');
+    const group = useGroupItem(props, VChipGroupSymbol, false);
     const link = useLink(props, attrs);
 
     function onCloseClick(e) {
@@ -136,6 +140,7 @@ export const VChip = defineComponent({
           'v-chip--disabled': props.disabled,
           'v-chip--label': props.label,
           'v-chip--link': isClickable,
+          'v-chip--filter': hasFilter,
           'v-chip--pill': props.pill
         }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group == null ? void 0 : group.selectedClass.value],
         "style": [hasColor ? colorStyles.value : undefined],
@@ -144,42 +149,76 @@ export const VChip = defineComponent({
         "href": link.href.value,
         "onClick": isClickable && onClickFunc
       }, {
-        default: () => [genOverlays(isClickable, 'v-chip'), hasFilter && _createVNode(VExpandXTransition, null, {
-          default: () => [_withDirectives(_createVNode("div", {
-            "class": "v-chip__filter"
-          }, [slots.filter ? slots.filter() : _createVNode(VIcon, {
-            "icon": props.filterIcon
-          }, null)]), [[_vShow, group.isSelected.value]])]
-        }), hasPrepend && _createVNode("div", {
-          "class": "v-chip__prepend"
-        }, [slots.prepend ? slots.prepend() : _createVNode(VAvatar, {
-          "icon": props.prependIcon,
-          "image": props.prependAvatar,
-          "size": props.size
-        }, null)]), (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots, {
+        default: () => [genOverlays(isClickable, 'v-chip'), hasFilter && _createVNode(VDefaultsProvider, {
+          "key": "filter",
+          "defaults": {
+            VIcon: {
+              icon: props.filterIcon
+            }
+          }
+        }, {
+          default: () => [_createVNode(VExpandXTransition, null, {
+            default: () => [_withDirectives(_createVNode("div", {
+              "class": "v-chip__filter"
+            }, [slots.filter ? slots.filter() : _createVNode(VIcon, null, null)]), [[_vShow, group.isSelected.value]])]
+          })]
+        }), hasPrepend && _createVNode(VDefaultsProvider, {
+          "key": "prepend",
+          "defaults": {
+            VAvatar: {
+              image: props.prependAvatar
+            },
+            VIcon: {
+              icon: props.prependIcon
+            }
+          }
+        }, {
+          default: () => [slots.prepend ? _createVNode("div", {
+            "class": "v-chip__prepend"
+          }, [slots.prepend()]) : props.prependAvatar ? _createVNode(VAvatar, {
+            "start": true
+          }, null) : props.prependIcon ? _createVNode(VIcon, {
+            "start": true
+          }, null) : undefined]
+        }), (_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots, {
           isSelected: group == null ? void 0 : group.isSelected.value,
           selectedClass: group == null ? void 0 : group.selectedClass.value,
           select: group == null ? void 0 : group.select,
           toggle: group == null ? void 0 : group.toggle,
           value: group == null ? void 0 : group.value.value,
           disabled: props.disabled
-        })) != null ? _slots$default : props.text, hasAppend && _createVNode("div", {
-          "class": "v-chip__append"
-        }, [slots.append ? slots.append() : _createVNode(VAvatar, {
-          "icon": props.appendIcon,
-          "image": props.appendAvatar,
-          "size": props.size
-        }, null)]), hasClose && _createVNode("div", {
-          "class": "v-chip__close",
-          "onClick": onCloseClick
-        }, [slots.close ? slots.close({
-          props: {
-            onClick: onCloseClick
+        })) != null ? _slots$default : props.text, hasAppend && _createVNode(VDefaultsProvider, {
+          "key": "append",
+          "defaults": {
+            VAvatar: {
+              image: props.appendAvatar
+            },
+            VIcon: {
+              icon: props.appendIcon
+            }
+          }
+        }, {
+          default: () => [slots.append ? _createVNode("div", {
+            "class": "v-chip__append"
+          }, [slots.append()]) : props.appendAvatar ? _createVNode(VAvatar, {
+            "end": true
+          }, null) : props.appendIcon ? _createVNode(VIcon, {
+            "end": true
+          }, null) : undefined]
+        }), hasClose && _createVNode(VDefaultsProvider, {
+          "key": "close",
+          "defaults": {
+            VIcon: {
+              icon: props.closeIcon,
+              size: 'x-small'
+            }
           }
-        }) : _createVNode(VIcon, {
-          "icon": props.closeIcon,
-          "size": "x-small"
-        }, null)])]
+        }, {
+          default: () => [_createVNode("div", {
+            "class": "v-chip__close",
+            "onClick": onCloseClick
+          }, [slots.close ? slots.close() : _createVNode(VIcon, null, null)])]
+        })]
       }), [[_resolveDirective("ripple"), isClickable && props.ripple, null]]);
     };
   }