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

package/lib/components/VChip/VChip.sass

@@ -1,204 +1,68 @@
-// Imports
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
+@use './mixins' as *
 
-// Theme
-.v-chip:not(.v-chip--outlined)
-  &.primary,
-  &.secondary,
-  &.accent,
-  &.success,
-  &.error,
-  &.warning,
-  &.info
-    color: map-deep-get($material-dark, 'text', 'primary')
-
-+theme(v-chip) using ($material)
-  border-color: map-get($material, 'dividers')
-  color: map-deep-get($material, 'text', 'primary')
-
-  &:not(.v-chip--active)
-    background: map-get($material, 'chips')
-
-  +states($material)
-
-// Block
 .v-chip
   align-items: center
   cursor: default
   display: inline-flex
-  line-height: $chip-line-height
-  max-width: 100%
-  outline: none
+  font-weight: $chip-font-weight
+  max-width: $chip-max-width
   overflow: hidden
-  padding: $chip-padding
   position: relative
   text-decoration: none
-  transition-duration: $chip-transition-duration
-  transition-property: box-shadow, opacity
-  transition-timing-function: $chip-transition-fn
-  vertical-align: middle
   white-space: $chip-white-space
+  vertical-align: middle
 
-  &:before
-    background-color: currentColor
-    bottom: 0
-    border-radius: inherit
-    content: ''
-    left: 0
-    opacity: 0
-    position: absolute
-    pointer-events: none
-    right: 0
-    top: 0
-
-  // Important is needed to account for new avatar structure
-  .v-avatar
-    height: $chip-avatar-size !important
-    min-width: $chip-avatar-size !important
-    width: $chip-avatar-size !important
-
-  .v-icon
-    font-size: $chip-icon-size
-
-  .v-avatar,
-  .v-icon
-    +ltr()
-      &--left
-        margin-left: $chip-icon-margin-before
-        margin-right: $chip-icon-margin-after
+  @at-root
+    @include chip-sizes()
+    @include chip-density('height', $chip-density)
 
-      &--right
-        margin-left: $chip-icon-margin-after
-        margin-right: $chip-icon-margin-before
+  @include tools.border($chip-border...)
+  @include tools.rounded($chip-border-radius)
+  @include tools.variant($chip-variants...)
 
-    +rtl()
-      &--left
-        margin-left: $chip-icon-margin-after
-        margin-right: $chip-icon-margin-before
+  &--border
+    border-width: $chip-border-thin-width
 
-      &--right
-        margin-left: $chip-icon-margin-before
-        margin-right: $chip-icon-margin-after
+  &--link
+    cursor: pointer
 
-  &:not(.v-chip--no-color)
-    .v-icon
-      color: inherit
+  &--label
+    @include tools.rounded($chip-label-border-radius)
 
 // Elements
-.v-chip
-  .v-chip__close.v-icon
-    font-size: $chip-close-size
-    max-height: $chip-close-size
-    max-width: $chip-close-size
-    user-select: none
-
-    &.v-icon--right
-      +ltr()
-        margin-right: $chip-icon-right-margin-after
-
-      +rtl()
-        margin-left: $chip-icon-right-margin-after
-
-    &:hover,
-    &:focus,
-    &:active
-      opacity: .72
-
-  .v-chip__content
-    align-items: center
-    display: inline-flex
-    height: 100%
-    max-width: 100%
-
-// Modifiers
-.v-chip--active
-  .v-icon
-    color: inherit
-
-.v-chip--link
-  &::before
-    transition: opacity $primary-transition
-
-  &:focus::before
-    opacity: $chip-link-focus-opacity
+.v-chip__filter,
+.v-chip__prepend,
+.v-chip__append,
+.v-chip__close
+  align-items: center
+  display: inline-flex
 
-.v-chip--clickable
+.v-chip__close
   cursor: pointer
+  flex: 0 1 auto
+  font-size: $chip-close-size
+  max-height: $chip-close-size
+  max-width: $chip-close-size
   user-select: none
 
-  &:active
-    +elevation(2)
+  .v-icon
+    font-size: inherit
+
+.v-chip__overlay
+  @include tools.absolute()
+  background-color: currentColor
+  border-radius: inherit
+  pointer-events: none
+  opacity: 0
+  transition: opacity .2s ease-in-out
 
 .v-chip--disabled
   opacity: $chip-disabled-opacity
   pointer-events: none
   user-select: none
 
-.v-chip__filter
-  // TODO: Figure out why the absence
-  // of this breaks the transition
-  max-width: $chip-filter-max-width
-
-  // Increase specificity to
-  // overwrite theme style
-  &.v-icon
-    color: inherit
-
-  &.expand-x-transition-leave-active,
-  &.expand-x-transition-enter
-    margin: 0
-
-.v-chip--pill
-  .v-chip__filter
-    margin-right: $chip-pill-filter-margin
-
-  .v-avatar
-    height: $chip-pill-avatar-size !important
-    width: $chip-pill-avatar-size !important
-
-  .v-avatar
-    +ltr()
-      &--left
-        margin-left: $chip-pill-avatar-margin-before
-
-      &--right
-        margin-right: $chip-pill-avatar-margin-before
-
-    +rtl()
-      &--left
-        margin-right: $chip-pill-avatar-margin-before
-
-      &--right
-        margin-left: $chip-pill-avatar-margin-before
-
 .v-chip--label
-  border-radius: $chip-label-border-radius !important
-
-.v-chip.v-chip--outlined
-  border-width: $icon-outlined-border-width
-  border-style: solid
-
-  &.v-chip--active:before
-    opacity: $chip-outlined-active-opacity
-
-  .v-icon
-    color: inherit
-
-  // Needs increased specificity
-  &.v-chip.v-chip
-    background-color: transparent !important
-
-// Needs increased specificity
-// to overwrite theme color
-.v-chip.v-chip--selected
-  background: transparent
-
-  &:after
-    opacity: $chip-selected-opacity
-
-.v-chip
-  @each $name, $size in $icon-sizes
-    &.v-size--#{$name}
-      border-radius: #{map-get($size, 'height') / 2}px
-      font-size: #{map-get($size, 'font-size')}px
-      height: #{map-get($size, 'height')}px
+  border-radius: $chip-label-border-radius

package/lib/components/VChip/_mixins.scss

@@ -0,0 +1,65 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:selector';
+@use '../../styles/settings';
+@use './variables' as *;
+
+@mixin chip-sizes {
+  @each $sizeName, $multiplier in settings.$size-scales {
+    $size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16);
+    $height: map.get($chip-sizes, "height") + (6 * $multiplier);
+    $padding: math.round(math.div($height, $chip-padding-ratio));
+
+    .v-chip--size-#{$sizeName} {
+      --v-chip-size: #{$size};
+      --v-chip-height: #{$height};
+      font-size: $size;
+      padding: 0 $padding;
+
+      .v-avatar {
+        --v-avatar-height: #{$height - 8};
+
+        @at-root #{selector.append('.v-chip--pill', &)} {
+          --v-avatar-height: #{$height};
+        }
+      }
+
+      .v-chip__prepend,
+      .v-chip__filter {
+        margin-inline-start: -$padding * .5;
+        margin-inline-end: $padding * .5;
+
+        @at-root #{selector.append('.v-chip--pill', &)} {
+          margin-inline-start: -$padding;
+        }
+      }
+
+      .v-chip__append,
+      .v-chip__close {
+        margin-inline-end: -$padding * .5;
+        margin-inline-start: $padding * .5;
+
+        @at-root #{selector.append('.v-chip--pill', &)} {
+          margin-inline-end: -$padding;
+        }
+      }
+    }
+  }
+}
+
+@mixin chip-density($properties, $densities) {
+  @each $density, $multiplier in $densities {
+    $value: calc(var(--v-chip-height) + #{$multiplier * settings.$spacer});
+
+    &.v-chip--density-#{$density} {
+      @if meta.type-of($properties) == "list" {
+        @each $property in $properties {
+          #{$property}: $value;
+        }
+      } @else {
+        #{$properties}: $value;
+      }
+    }
+  }
+}

package/lib/components/VChip/_variables.scss

@@ -1,52 +1,51 @@
-@import '../../styles/styles.sass';
-@import '../../styles/tools/_functions.sass';
+@use 'sass:math';
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
 
-$chip-avatar-size: 24px !default;
+// Defaults
+$chip-append-margin-inline-end: 0 !default;
+$chip-append-margin-inline-start: 8px !default;
+$chip-background: rgb(var(--v-theme-surface-variant)) !default;
+$chip-border-color: settings.$border-color-root !default;
+$chip-border-radius: map.get(settings.$rounded, "pill") !default;
+$chip-border-style: settings.$border-style-root !default;
+$chip-border-thin-width: thin !default;
+$chip-border-width: 0 !default;
+$chip-close-margin-inline-end: -4px !default;
+$chip-close-margin-inline-start: 8px !default;
 $chip-close-size: 18px !default;
-$chip-icon-margin-after: 6px !default;
-$chip-icon-margin-before: -6px !default;
-$chip-icon-right-margin-after: -4px !default;
-$chip-icon-right-margin-before: 8px !default;
-$chip-icon-size: 24px !default;
-$chip-label-border-radius: $border-radius-root !default;
-$chip-link-focus-opacity: 0.32 !default;
-$chip-pill-avatar-margin-after: 8px !default;
-$chip-pill-avatar-margin-before: -12px !default;
-$chip-pill-avatar-size: 32px !default;
-$chip-pill-filter-margin: 0 16px 0 0 !default;
-$chip-transition-duration: 0.28s !default;
-$chip-transition-fn: map-get($transition, 'fast-out-slow-in') !default;
-$icon-outlined-border-width: thin !default;
-$chip-line-height: 20px !default;
-$chip-padding: 0 12px !default;
+$chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
+$chip-density: ("default": 0, "comfortable": -2, "compact": -3) !default;
+$chip-disabled-opacity: 0.3 !default;
+$chip-elevation: 1 !default;
+$chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default;
+$chip-font-weight: 400 !default;
+$chip-height: 32px !default;
+$chip-icon-font-size: 1.25rem !default;
+$chip-label-border-radius: settings.$border-radius-root !default;
+$chip-max-width: 100% !default;
+$chip-overflow: hidden !default;
+$chip-padding-ratio: 2 + math.div(2, 3) !default;
+$chip-plain-opacity: 0.26 !default;
+$chip-rounded-border-radius: settings.$border-radius-root !default;
 $chip-white-space: nowrap !default;
-$chip-disabled-opacity: 0.4 !default;
-$chip-filter-max-width: 24px !default;
-$chip-outlined-active-opacity: 0.08 !default;
-$chip-selected-opacity: 0.28 !default;
-$icon-sizes: () !default;
-$icon-sizes: map-deep-merge(
-  (
-    'x-small': (
-      'font-size': 10,
-      'height': 16
-    ),
-    'small': (
-      'font-size': 12,
-      'height': 24
-    ),
-    'default': (
-      'font-size': 14,
-      'height': 32
-    ),
-    'large': (
-      'font-size': 16,
-      'height': 54
-    ),
-    'x-large': (
-      'font-size': 18,
-      'height': 66
-    )
-  ),
-  $icon-sizes
-);
+
+$chip-sizes: (
+  "height": $chip-height,
+  "font-size": $chip-font-size,
+) !default;
+
+$chip-border: (
+  $chip-border-color,
+  $chip-border-style,
+  $chip-border-width
+) !default;
+
+$chip-variants: (
+  $chip-background,
+  $chip-color,
+  $chip-elevation,
+  $chip-plain-opacity,
+  'v-chip'
+) !default;

package/lib/components/VChip/index.mjs

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

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

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

package/lib/components/VChipGroup/VChipGroup.css

@@ -0,0 +1,18 @@
+.v-chip-group {
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  padding: 4px 0;
+}
+.v-chip-group .v-chip {
+  margin: 4px 8px 4px 0;
+}
+.v-chip-group .v-chip.v-chip--selected:not(.v-chip--disabled) .v-chip__overlay {
+  opacity: var(--v-activated-opacity);
+}
+
+.v-chip-group--column {
+  flex-wrap: wrap;
+  white-space: normal;
+}

package/lib/components/VChipGroup/VChipGroup.mjs

@@ -1,50 +1,78 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VChipGroup.sass"; // Extensions
-
-import { BaseSlideGroup } from "../VSlideGroup/VSlideGroup.mjs"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs"; // Utilities
+import "./VChipGroup.css"; // Composables
 
-import mixins from "../../util/mixins.mjs";
-/* @vue/component */
+import { makeGroupProps, useGroup } from "../../composables/group.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { makeVariantProps } from "../../composables/variant.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-export default mixins(BaseSlideGroup, Colorable).extend({
-  name: 'v-chip-group',
-
-  provide() {
-    return {
-      chipGroup: this
-    };
-  },
+import { deepEqual, defineComponent } from "../../util/index.mjs";
+import { toRef } from 'vue'; // Types
 
+export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
+export const VChipGroup = defineComponent({
+  name: 'VChipGroup',
   props: {
-    column: Boolean
+    column: Boolean,
+    filter: Boolean,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    },
+    ...makeGroupProps({
+      selectedClass: 'v-chip--selected'
+    }),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'contained-text'
+    })
   },
-  computed: {
-    classes() {
-      return { ...BaseSlideGroup.options.computed.classes.call(this),
-        'v-chip-group': true,
-        'v-chip-group--column': this.column
-      };
-    }
-
+  emits: {
+    'update:modelValue': value => true
   },
-  watch: {
-    column(val) {
-      if (val) this.scrollOffset = 0;
-      this.$nextTick(this.onResize);
-    }
 
-  },
-  methods: {
-    genData() {
-      return this.setTextColor(this.color, { ...BaseSlideGroup.options.methods.genData.call(this)
-      });
-    }
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      isSelected,
+      select,
+      next,
+      prev,
+      selected
+    } = useGroup(props, VChipGroupSymbol);
+    provideDefaults({
+      VChip: {
+        color: toRef(props, 'color'),
+        filter: toRef(props, 'filter'),
+        variant: toRef(props, 'variant')
+      }
+    });
+    return () => {
+      var _slots$default;
 
+      return _createVNode(props.tag, {
+        "class": ['v-chip-group', {
+          'v-chip-group--column': props.column
+        }, themeClasses.value]
+      }, {
+        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          isSelected,
+          select,
+          next,
+          prev,
+          selected: selected.value
+        })]
+      });
+    };
   }
+
 });
 //# sourceMappingURL=VChipGroup.mjs.map

package/lib/components/VChipGroup/VChipGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VChipGroup/VChipGroup.ts"],"names":["BaseSlideGroup","Colorable","mixins","extend","name","provide","chipGroup","props","column","Boolean","computed","classes","options","call","watch","val","scrollOffset","$nextTick","onResize","methods","genData","setTextColor","color"],"mappings":"AAAA;;AACA;AAEA;AACA,2B,CAEA;;SACSA,c,0CAET;;OACOC,S,0CAEP;;OACOC,M;AAEP;;AACA,eAAeA,MAAM,CACnBF,cADmB,EAEnBC,SAFmB,CAAN,CAGbE,MAHa,CAGN;AACPC,EAAAA,IAAI,EAAE,cADC;;AAGPC,EAAAA,OAAO,GAAI;AACT,WAAO;AACLC,MAAAA,SAAS,EAAE;AADN,KAAP;AAGD,GAPM;;AASPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEC;AADH,GATA;AAaPC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAI;AACT,aAAO,EACL,GAAGX,cAAc,CAACY,OAAf,CAAuBF,QAAvB,CAAgCC,OAAhC,CAAwCE,IAAxC,CAA6C,IAA7C,CADE;AAEL,wBAAgB,IAFX;AAGL,gCAAwB,KAAKL;AAHxB,OAAP;AAKD;;AAPO,GAbH;AAuBPM,EAAAA,KAAK,EAAE;AACLN,IAAAA,MAAM,CAAEO,GAAF,EAAO;AACX,UAAIA,GAAJ,EAAS,KAAKC,YAAL,GAAoB,CAApB;AAET,WAAKC,SAAL,CAAe,KAAKC,QAApB;AACD;;AALI,GAvBA;AA+BPC,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,GAAI;AACT,aAAO,KAAKC,YAAL,CAAkB,KAAKC,KAAvB,EAA8B,EACnC,GAAGtB,cAAc,CAACY,OAAf,CAAuBO,OAAvB,CAA+BC,OAA/B,CAAuCP,IAAvC,CAA4C,IAA5C;AADgC,OAA9B,CAAP;AAGD;;AALM;AA/BF,CAHM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VChipGroup.sass'\n\n// Extensions\nimport { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n/* @vue/component */\nexport default mixins(\n  BaseSlideGroup,\n  Colorable\n).extend({\n  name: 'v-chip-group',\n\n  provide () {\n    return {\n      chipGroup: this,\n    }\n  },\n\n  props: {\n    column: Boolean,\n  },\n\n  computed: {\n    classes () {\n      return {\n        ...BaseSlideGroup.options.computed.classes.call(this),\n        'v-chip-group': true,\n        'v-chip-group--column': this.column,\n      }\n    },\n  },\n\n  watch: {\n    column (val) {\n      if (val) this.scrollOffset = 0\n\n      this.$nextTick(this.onResize)\n    },\n  },\n\n  methods: {\n    genData () {\n      return this.setTextColor(this.color, {\n        ...BaseSlideGroup.options.methods.genData.call(this),\n      })\n    },\n  },\n})\n"],"file":"VChipGroup.mjs"}
+{"version":3,"sources":["../../../src/components/VChipGroup/VChipGroup.tsx"],"names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","deepEqual","defineComponent","toRef","VChipGroupSymbol","Symbol","for","VChipGroup","name","props","column","Boolean","filter","valueComparator","type","Function","default","selectedClass","variant","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","VChip","color"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,S,EAAWC,e;AACpB,SAASC,KAAT,QAAsB,KAAtB,C,CAEA;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGL,eAAe,CAAC;AACxCM,EAAAA,IAAI,EAAE,YADkC;AAGxCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEC,OADH;AAELC,IAAAA,MAAM,EAAED,OAFH;AAGLE,IAAAA,eAAe,EAAE;AACfC,MAAAA,IAAI,EAAEC,QADS;AAEfC,MAAAA,OAAO,EAAEf;AAFM,KAHZ;AAQL,OAAGP,cAAc,CAAC;AAAEuB,MAAAA,aAAa,EAAE;AAAjB,KAAD,CARZ;AASL,OAAGrB,YAAY,EATV;AAUL,OAAGC,cAAc,EAVZ;AAWL,OAAGE,gBAAgB,CAAC;AAAEmB,MAAAA,OAAO,EAAE;AAAX,KAAD;AAXd,GAHiC;AAiBxCC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAgB;AADhC,GAjBiC;;AAqBxCC,EAAAA,KAAK,CAAEZ,KAAF,QAAoB;AAAA,QAAX;AAAEa,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBzB,YAAY,CAACW,KAAD,CAArC;AACA,UAAM;AAAEe,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,IAAtB;AAA4BC,MAAAA,IAA5B;AAAkCC,MAAAA;AAAlC,QAA+CjC,QAAQ,CAACc,KAAD,EAAQL,gBAAR,CAA7D;AAEAJ,IAAAA,eAAe,CAAC;AACd6B,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAE3B,KAAK,CAACM,KAAD,EAAQ,OAAR,CADP;AAELG,QAAAA,MAAM,EAAET,KAAK,CAACM,KAAD,EAAQ,QAAR,CAFR;AAGLS,QAAAA,OAAO,EAAEf,KAAK,CAACM,KAAD,EAAQ,SAAR;AAHT;AADO,KAAD,CAAf;AAQA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,cADK,EAEL;AACE,kCAAwBA,KAAK,CAACC;AADhC,SAFK,EAKLa,YAAY,CAACH,KALR;AAFJ;AAAA,0CAUDE,KAAK,CAACN,OAVL,qBAUD,oBAAAM,KAAK,EAAW;AAChBE,UAAAA,UADgB;AAEhBC,UAAAA,MAFgB;AAGhBC,UAAAA,IAHgB;AAIhBC,UAAAA,IAJgB;AAKhBC,UAAAA,QAAQ,EAAEA,QAAQ,CAACR;AALH,SAAX,CAVJ;AAAA;AAAA,KAAP;AAmBD;;AApDuC,CAAD,CAAlC","sourcesContent":["// Styles\nimport './VChipGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { deepEqual, defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')\n\nexport const VChipGroup = defineComponent({\n  name: 'VChipGroup',\n\n  props: {\n    column: Boolean,\n    filter: Boolean,\n    valueComparator: {\n      type: Function as PropType<typeof deepEqual>,\n      default: deepEqual,\n    },\n\n    ...makeGroupProps({ selectedClass: 'v-chip--selected' }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'contained-text' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol)\n\n    provideDefaults({\n      VChip: {\n        color: toRef(props, 'color'),\n        filter: toRef(props, 'filter'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-chip-group',\n          {\n            'v-chip-group--column': props.column,\n          },\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    )\n  },\n})\n\nexport type VChipGroup = InstanceType<typeof VChipGroup>\n"],"file":"VChipGroup.mjs"}

package/lib/components/VChipGroup/VChipGroup.sass

@@ -2,26 +2,20 @@
 
 // Block
 .v-chip-group
+  display: flex
+  max-width: 100%
+  min-width: 0
+  overflow-x: auto
+  padding: $chip-group-padding
+
   .v-chip
     margin: $chip-group-margin
 
-  .v-chip--active
-    color: inherit
-
-    &.v-chip--no-color
-      &:after
-        opacity: $chip-group-no-color-opacity
-
-      &:focus:after
-        opacity: $chip-group-no-color-focus-opacity
-
-// Element
-.v-chip-group .v-slide-group__content
-  padding: $chip-group-content-padding
+    &.v-chip--selected:not(.v-chip--disabled)
+      .v-chip__overlay
+        opacity: $chip-group-selected-opacity
 
 // Modifiers
 .v-chip-group--column
-  .v-slide-group__content
-    white-space: normal
-    flex-wrap: wrap
-    max-width: 100%
+  flex-wrap: wrap
+  white-space: normal

package/lib/components/VChipGroup/_variables.scss

@@ -1,6 +1,4 @@
-@import '../../styles/styles.sass';
-
-$chip-group-content-padding: 4px 0 !default;
+// Defaults
+$chip-group-selected-opacity: var(--v-activated-opacity) !default;
+$chip-group-padding: 4px 0 !default;
 $chip-group-margin: 4px 8px 4px 0 !default;
-$chip-group-no-color-focus-opacity: .32 !default;
-$chip-group-no-color-opacity: .22 !default;

package/lib/components/VChipGroup/index.mjs

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

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

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

package/lib/components/VCode/VCode.css

@@ -0,0 +1,7 @@
+.v-code {
+  background-color: rgb(var(--v-code-background-color));
+  border-radius: 3px;
+  font-size: 85%;
+  font-weight: normal;
+  padding: 0.2em 0.4em;
+}

package/lib/components/VCode/VCode.sass

@@ -0,0 +1,9 @@
+@forward './variables'
+@use './variables' as *
+
+.v-code
+  background-color: rgb(var(--v-code-background-color))
+  border-radius: $code-border-radius
+  font-size: $code-font-size
+  font-weight: $code-font-weight
+  padding: $code-padding

package/lib/components/VCode/_variables.scss

@@ -0,0 +1,5 @@
+// Defaults
+$code-border-radius: 3px !default;
+$code-font-size: 85% !default;
+$code-font-weight: normal !default;
+$code-padding: .2em .4em !default;