@carbon/vue 2.34.0-canary.0 → 2.35.0

package/src/components/cv-link/cv-link.vue

@@ -11,12 +11,11 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { linkMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvLink',
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [linkMixin, carbonPrefixMixin],
   props: {
     inline: Boolean,
   },

package/src/components/cv-list/cv-list-item.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvListItem',
   mixins: [carbonPrefixMixin],

package/src/components/cv-list/cv-list.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvList',
   mixins: [carbonPrefixMixin],

package/src/components/cv-loading/cv-loading.vue

@@ -10,8 +10,11 @@
       }"
       ref="loading"
     >
+      <label :class="`${carbonPrefix}--visually-hidden`">
+        {{ description }}
+      </label>
       <svg :class="`${carbonPrefix}--loading__svg`" viewBox="-75 -75 150 150">
-        <title>Loading</title>
+        <title>{{ description }}</title>
         <circle v-if="small" :class="`${carbonPrefix}--loading__background`" cx="0" cy="0" :r="loadingRadius" />
         <circle :class="`${carbonPrefix}--loading__stroke`" cx="0" cy="0" :r="loadingRadius" />
       </svg>
@@ -21,7 +24,7 @@
 
 <script>
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvLoading',
@@ -29,6 +32,7 @@ export default {
   components: { CvWrapper },
   props: {
     active: { type: Boolean, default: true },
+    description: { type: String, default: 'Loading' },
     overlay: Boolean,
     small: Boolean,
   },

package/src/components/cv-modal/cv-modal.vue

@@ -18,6 +18,7 @@
         `${carbonPrefix}--modal-container`,
         { [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize },
       ]"
+      v-bind="dialogAttrs"
       ref="modalDialog"
     >
       <div
@@ -81,9 +82,8 @@
 
 <script>
 import CvButton from '../cv-button/cv-button';
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Close16 from '@carbon/icons-vue/es/close/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvModal',
@@ -93,6 +93,7 @@ export default {
     Close16,
   },
   props: {
+    alert: Boolean,
     closeAriaLabel: { type: String, default: 'Close modal' },
     kind: {
       type: String,
@@ -134,6 +135,20 @@ export default {
     },
   },
   computed: {
+    dialogAttrs() {
+      const passive = !(this.hasPrimary || this.hasSecondary);
+      const attrs = { role: 'dialog' };
+
+      if (this.alert) {
+        if (passive) {
+          attrs.role = 'alert';
+        } else {
+          attrs.role = 'alertdialog';
+          attrs['aria-describedBy'] = this.uid;
+        }
+      }
+      return attrs;
+    },
     primaryKind() {
       if (this.kind === 'danger') {
         return 'danger';
@@ -229,9 +244,16 @@ export default {
       //restore any previous scrollability
       document.body.classList.remove(`${this.carbonPrefix}--body--with-modal-open`);
 
+      if (this.dataVisible) {
+        this.$el.addEventListener('transitionend', this.afterHide, { once: true });
+      }
+
       this.dataVisible = false;
       this.$emit('modal-hidden');
     },
+    afterHide() {
+      this.$emit('after-modal-hidden');
+    },
     onPrimaryClick(ev) {
       this.$emit('primary-click');
       if (!this.$listeners['primary-click']) {
@@ -245,5 +267,10 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    if (this.dataVisible) {
+      this.$emit('after-modal-hidden');
+    }
+  },
 };
 </script>

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -18,20 +18,13 @@
       >{{ title }}</label
     >
 
-    <div
-      v-if="!inline && isHelper"
-      :class="[`${carbonPrefix}--form__helper-text`, { [`${carbonPrefix}--form__helper-text--disabled`]: disabled }]"
-    >
-      <slot name="helper-text">{{ helperText }}</slot>
-    </div>
-
     <div
       role="listbox"
       tabindex="-1"
       :class="[
         `${carbonPrefix}--multi-select ${carbonPrefix}--list-box`,
         {
-          [`${carbonPrefix}--list-box--light`]: theme === 'light',
+          [`${carbonPrefix}--list-box--light`]: isLight,
           [`${carbonPrefix}--list-box--expanded`]: open,
           [`${carbonPrefix}--multi-select--invalid`]: isInvalid,
           [`${carbonPrefix}--multi-select--disabled`]: disabled,
@@ -147,19 +140,22 @@
     <div v-if="isInvalid && !inline" :class="`${carbonPrefix}--form-requirement`">
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
+    <div
+      v-if="!inline && !isInvalid && isHelper"
+      :class="[`${carbonPrefix}--form__helper-text`, { [`${carbonPrefix}--form__helper-text--disabled`]: disabled }]"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
   </div>
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
+import { themeMixin, uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
-import uidMixin from '../../mixins/uid-mixin';
 import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvTag from '../cv-tag/cv-tag';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 const TOP_AFTER_REOPEN = 0;
 const TOP = 1;

package/src/components/cv-number-input/cv-number-input-skeleton.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvNumberInputSkeleton',
   mixins: [carbonPrefixMixin],

package/src/components/cv-number-input/cv-number-input.vue

@@ -5,7 +5,7 @@
       :class="[
         `${carbonPrefix}--number`,
         {
-          [`${carbonPrefix}--number--light`]: theme === 'light',
+          [`${carbonPrefix}--number--light`]: isLight,
           [`${carbonPrefix}--number--helpertext`]: isHelper,
           [`cv-number-input`]: !formItem,
           [`${carbonPrefix}--number--mobile`]: mobile,
@@ -83,14 +83,11 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CaretDownGlyph from '@carbon/icons-vue/es/caret--down/index';
 import CaretUpGlyph from '@carbon/icons-vue/es/caret--up/index';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvNumberInput',

package/src/components/cv-overflow-menu/cv-overflow-menu-item.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvOverflowMenuItem',
   mixins: [carbonPrefixMixin],

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -67,9 +67,7 @@
 
 <script>
 import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvOverflowMenu',

package/src/components/cv-pagination/cv-pagination.vue

@@ -83,7 +83,7 @@ import CvSelect from '../cv-select/cv-select';
 import CvSelectOption from '../cv-select/cv-select-option';
 import CaretLeft16 from '@carbon/icons-vue/es/caret--left/16';
 import CaretRight16 from '@carbon/icons-vue/es/caret--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 const newPageValue = (page, lastPage) => {
   let result = 1;

package/src/components/cv-progress/cv-progress-step.vue

@@ -43,7 +43,7 @@
 <script>
 import CheckmarkOutline16 from '@carbon/icons-vue/es/checkmark--outline/16';
 import Warning16 from '@carbon/icons-vue/es/warning/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 const states = ['incomplete', 'current', 'complete'];
 

package/src/components/cv-progress/cv-progress.vue

@@ -18,7 +18,7 @@
 
 <script>
 import CvProgressStep from './cv-progress-step';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvProgress',

package/src/components/cv-radio-button/cv-radio-button.vue

@@ -24,10 +24,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import radioMixin from '../../mixins/radio-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, radioMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvRadioButton',

package/src/components/cv-radio-button/cv-radio-group.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvRadioGroup',
   mixins: [carbonPrefixMixin],

package/src/components/cv-search/cv-search.vue

@@ -4,7 +4,7 @@
       :class="[
         `${carbonPrefix}--search`,
         {
-          [`${carbonPrefix}--search--${theme}`]: theme.length,
+          [`${carbonPrefix}--search--light`]: isLight,
           [`${carbonPrefix}--search--${internalSize}`]: internalSize,
           [`${carbonPrefix}--toolbar-search`]: isToolbarKind,
           [`${carbonPrefix}--toolbar-search--active`]: toolbarActive,
@@ -55,14 +55,11 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Search20 from '@carbon/icons-vue/es/search/20';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvSearch',

package/src/components/cv-select/cv-select-optgroup.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSelectOptgroup',
   mixins: [carbonPrefixMixin],

package/src/components/cv-select/cv-select-option.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSelectOption',
   mixins: [carbonPrefixMixin],

package/src/components/cv-select/cv-select.vue

@@ -7,7 +7,7 @@
         {
           'cv-select': !formItem,
           [`${carbonPrefix}--select--inline`]: inline,
-          [`${carbonPrefix}--select--light`]: theme === 'light',
+          [`${carbonPrefix}--select--light`]: isLight,
           [`${carbonPrefix}--select--invalid`]: isInvalid,
           [`${carbonPrefix}--select--disabled`]: $attrs.disabled,
         },
@@ -56,13 +56,10 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvSelect',

package/src/components/cv-skeleton-text/cv-skeleton-text.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSkeletonText',
   mixins: [carbonPrefixMixin],

package/src/components/cv-slider/cv-slider-skeleton.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvSliderSkeleton',
   mixins: [carbonPrefixMixin],

package/src/components/cv-slider/cv-slider.vue

@@ -41,7 +41,7 @@
         type="number"
         :class="[
           `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
-          { [`${carbonPrefix}--text-input--light`]: theme === 'light' },
+          { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
         v-model="internalValue"
@@ -56,10 +56,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvSlider',

package/src/components/cv-structured-list/_cv-structured-list-item-selectable.vue

@@ -26,11 +26,8 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import radioMixin from '../../mixins/radio-mixin';
+import { uidMixin, radioMixin, carbonPrefixMixin } from '../../mixins';
 import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-
 export default {
   name: 'CvStructuredListItemSelectable',
   components: { CheckmarkFilled16 },

package/src/components/cv-structured-list/_cv-structured-list-item-standard.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvStructuredListItemStandard',
   mixins: [carbonPrefixMixin],

package/src/components/cv-structured-list/cv-structured-list-data.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvStructuredListData',
   mixins: [carbonPrefixMixin],

package/src/components/cv-structured-list/cv-structured-list-heading.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvStructuredListHeading',
   mixins: [carbonPrefixMixin],

package/src/components/cv-structured-list/cv-structured-list.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvStructuredList',
   mixins: [carbonPrefixMixin],

package/src/components/cv-tabs/cv-tab.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin } from '../../mixins';
 
 export default {
   name: 'CvTab',

package/src/components/cv-tabs/cv-tabs-skeleton.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvTabsSkeleton',
   mixins: [carbonPrefixMixin],

package/src/components/cv-tabs/cv-tabs.vue

@@ -61,7 +61,7 @@
 
 <script>
 import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvTabs',

package/src/components/cv-tag/cv-tag-skeleton.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvTagSkeleton',
   mixins: [carbonPrefixMixin],

package/src/components/cv-tag/cv-tag.vue

@@ -8,7 +8,6 @@
         [`${carbonPrefix}--tag--disabled`]: disabled,
       },
     ]"
-    :tabindex="!disabled ? 0 : undefined"
     role="listitem"
     :title="title"
     @keydown.enter.stop.prevent="$emit('remove')"
@@ -30,7 +29,7 @@
 
 <script>
 import Close16 from '@carbon/icons-vue/es/close/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 const tagKinds = [
   'red',

package/src/components/cv-text-area/cv-text-area.vue

@@ -17,7 +17,7 @@
         :class="[
           `${carbonPrefix}--text-area`,
           {
-            [`${carbonPrefix}--text-area--light`]: theme === 'light',
+            [`${carbonPrefix}--text-area--light`]: isLight,
             [`${carbonPrefix}--text-area--invalid`]: isInvalid,
           },
         ]"
@@ -43,11 +43,8 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, themeMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvTextArea',

package/src/components/cv-text-input/cv-text-input.vue

@@ -17,7 +17,7 @@
         :class="[
           `${carbonPrefix}--text-input`,
           {
-            [`${carbonPrefix}--text-input--light`]: theme === 'light',
+            [`${carbonPrefix}--text-input--light`]: isLight,
             [`${carbonPrefix}--text-input--invalid`]: isInvalid,
           },
         ]"
@@ -61,13 +61,10 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { uidMixin, themeMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import View16 from '@carbon/icons-vue/es/view/16';
 import ViewOff16 from '@carbon/icons-vue/es/view--off/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvTextInput',
@@ -81,7 +78,6 @@ export default {
     passwordHideLabel: { type: String, default: 'Hide password' },
     passwordShowLabel: { type: String, default: 'Show password' },
     passwordVisible: Boolean,
-    theme: String,
     type: String,
     value: String,
   },

package/src/components/cv-tile/_cv-tile-clickable.vue

@@ -13,12 +13,10 @@
 </template>
 
 <script>
-import LinkMixin from '../../mixins/link-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { linkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvTileClickable',
-  mixins: [LinkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
+  mixins: [linkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
 };
 </script>

package/src/components/cv-tile/_cv-tile-expandable.vue

@@ -37,8 +37,7 @@
 
 <script>
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
+import { carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvTileExpandable',

package/src/components/cv-tile/_cv-tile-selectable.vue

@@ -34,11 +34,8 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
-import checkMixin from '../../mixins/check-mixin';
+import { uidMixin, checkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTileSelectable',

package/src/components/cv-tile/cv-tile.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tagType"
-    :class="[`cv-tile ${carbonPrefix}--tile`, { [`${carbonPrefix}--tile--light`]: theme === 'light' }]"
+    :class="[`cv-tile ${carbonPrefix}--tile`, { [`${carbonPrefix}--tile--light`]: isLight }]"
     :checked="selected"
     :expanded="expanded"
     v-bind="$attrs"
@@ -19,13 +19,11 @@
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
+import { themeMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import CvTileClickable from './_cv-tile-clickable';
 import CvTileExpandable from './_cv-tile-expandable';
 import CvTileSelectable from './_cv-tile-selectable';
 import CvTileStandard from './_cv-tile-standard';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTile',