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

package/lib/components/VChip/VChip.sass

@@ -1,204 +1,73 @@
-// Imports
-@import './_variables.scss'
+@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
-
-      &--right
-        margin-left: $chip-icon-margin-after
-        margin-right: $chip-icon-margin-before
+  @at-root
+    @include chip-sizes()
+    @include chip-density('height', $chip-density)
 
-    +rtl()
-      &--left
-        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...)
 
-      &--right
-        margin-left: $chip-icon-margin-before
-        margin-right: $chip-icon-margin-after
+  &--border
+    border-width: $chip-border-thin-width
 
-  &:not(.v-chip--no-color)
-    .v-icon
-      color: inherit
+  &--link
+    cursor: pointer
 
-// Elements
-.v-chip
-  .v-chip__close.v-icon
-    font-size: $chip-close-size
-    max-height: $chip-close-size
-    max-width: $chip-close-size
+  &--filter
     user-select: none
 
-    &.v-icon--right
-      +ltr()
-        margin-right: $chip-icon-right-margin-after
-
-      +rtl()
-        margin-left: $chip-icon-right-margin-after
+  &--label
+    @include tools.rounded($chip-label-border-radius)
 
-    &:hover,
-    &:focus,
-    &:active
-      opacity: .72
+// Elements
+.v-chip__filter,
+.v-chip__prepend,
+.v-chip__append,
+.v-chip__close
+  align-items: center
+  display: inline-flex
 
-  .v-chip__content
-    align-items: center
-    display: inline-flex
-    height: 100%
-    max-width: 100%
+.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
 
-// Modifiers
-.v-chip--active
   .v-icon
-    color: inherit
-
-.v-chip--link
-  &::before
-    transition: opacity $primary-transition
+    font-size: inherit
 
-  &:focus::before
-    opacity: $chip-link-focus-opacity
-
-.v-chip--clickable
-  cursor: pointer
-  user-select: none
+.v-chip__filter
+  transition: $chip-filter-transition
 
-  &:active
-    +elevation(2)
+.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,85 @@
+@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.v-chip--size-#{$sizeName} {
+      --v-chip-size: #{$size};
+      --v-chip-height: #{$height};
+      font-size: $size;
+      padding: 0 $padding;
+
+      .v-avatar {
+        --v-avatar-height: #{$height - 6};
+
+        @at-root #{selector.append('.v-chip--pill', &)} {
+          --v-avatar-height: #{$height};
+        }
+      }
+
+      .v-chip__filter,
+      .v-chip__prepend,
+      > .v-avatar--start,
+      > .v-icon--start {
+        margin-inline-end: $padding * .5;
+      }
+
+      .v-chip__filter,
+      .v-chip__prepend,
+      .v-icon--start {
+        margin-inline-start: -$padding * .5;
+      }
+
+      .v-avatar--start {
+        margin-inline-start: -$padding * .7;
+
+        @at-root #{selector.append('.v-chip--pill', &)} {
+          margin-inline-start: -$padding;
+        }
+      }
+
+      .v-chip__append,
+      .v-chip__close,
+      > .v-avatar--end,
+      > .v-icon--end {
+        margin-inline-start: $padding * .5;
+        margin-inline-end: -$padding * .5;
+      }
+
+      .v-avatar--end,
+      .v-icon--end {
+        @at-root #{selector.append('.v-chip--pill', &)} {
+          margin-inline-end: -$padding;
+
+          + .v-chip__close {
+            margin-inline-start: $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,47 @@
-@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-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-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-filter-transition: .15s settings.$standard-easing !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,"file":"index.mjs","names":["VChip"],"sources":["../../../src/components/VChip/index.ts"],"sourcesContent":["export { VChip } from './VChip'\n"],"mappings":"SAASA,K"}

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,79 @@
-// @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, useRender } 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: 'tonal'
+    })
   },
-  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')
+      }
+    });
+    useRender(() => {
+      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
+        })]
+      });
+    });
+    return {};
   }
+
 });
 //# 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,"file":"VChipGroup.mjs","names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","deepEqual","defineComponent","useRender","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"],"sources":["../../../src/components/VChipGroup/VChipGroup.tsx"],"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, useRender } 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: 'tonal' } 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    useRender(() => (\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    return {}\n  },\n})\n\nexport type VChipGroup = InstanceType<typeof VChipGroup>\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,S,EAAWC,e,EAAiBC,S;AACrC,SAASC,KAAT,QAAsB,KAAtB,C,CAEA;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGN,eAAe,CAAC;EACxCO,IAAI,EAAE,YADkC;EAGxCC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,MAAM,EAAED,OAFH;IAGLE,eAAe,EAAE;MACfC,IAAI,EAAEC,QADS;MAEfC,OAAO,EAAEhB;IAFM,CAHZ;IAQL,GAAGP,cAAc,CAAC;MAAEwB,aAAa,EAAE;IAAjB,CAAD,CARZ;IASL,GAAGtB,YAAY,EATV;IAUL,GAAGC,cAAc,EAVZ;IAWL,GAAGE,gBAAgB,CAAC;MAAEoB,OAAO,EAAE;IAAX,CAAD;EAXd,CAHiC;EAiBxCC,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB;EADhC,CAjBiC;;EAqBxCC,KAAK,CAAEZ,KAAF,QAAoB;IAAA,IAAX;MAAEa;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmB1B,YAAY,CAACY,KAAD,CAArC;IACA,MAAM;MAAEe,UAAF;MAAcC,MAAd;MAAsBC,IAAtB;MAA4BC,IAA5B;MAAkCC;IAAlC,IAA+ClC,QAAQ,CAACe,KAAD,EAAQL,gBAAR,CAA7D;IAEAL,eAAe,CAAC;MACd8B,KAAK,EAAE;QACLC,KAAK,EAAE3B,KAAK,CAACM,KAAD,EAAQ,OAAR,CADP;QAELG,MAAM,EAAET,KAAK,CAACM,KAAD,EAAQ,QAAR,CAFR;QAGLS,OAAO,EAAEf,KAAK,CAACM,KAAD,EAAQ,SAAR;MAHT;IADO,CAAD,CAAf;IAQAP,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,cADK,EAEL;UACE,wBAAwBO,KAAK,CAACC;QADhC,CAFK,EAKLa,YAAY,CAACH,KALR;MAFD;QAAA,kCAUJE,KAAK,CAACN,OAVF,qBAUJ,oBAAAM,KAAK,EAAW;UAChBE,UADgB;UAEhBC,MAFgB;UAGhBC,IAHgB;UAIhBC,IAJgB;UAKhBC,QAAQ,EAAEA,QAAQ,CAACR;QALH,CAAX,CAVD;MAAA;IAAA,CAAD,CAAT;IAoBA,OAAO,EAAP;EACD;;AAtDuC,CAAD,CAAlC"}

package/lib/components/VChipGroup/VChipGroup.sass

@@ -1,27 +1,21 @@
-@import './_variables.scss'
+@use './variables' as *
 
 // 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;
+// VChipGroup
+$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,"file":"index.mjs","names":["VChipGroup"],"sources":["../../../src/components/VChipGroup/index.ts"],"sourcesContent":["export { VChipGroup } from './VChipGroup'\n"],"mappings":"SAASA,U"}

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;
+}