@carbon/vue 2.27.1 → 2.28.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.27.1",
+  "version": "2.28.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "7a7cdf4e9694f1fda56404f36147f0a58551391a"
+  "gitHead": "e0141cdee45e0c910fbb10ac5c665b736712d99f"
 }

package/src/assets/images/example-icon-svg.js

@@ -0,0 +1,10 @@
+export default {
+  exampleSvgString: `
+    <?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+    <g fill-rule="evenodd"  id="g">
+        <path id="path" d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+    </g>
+</svg>
+`,
+};

package/src/assets/images/example-icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+    <g fill-rule="evenodd"  id="g">
+        <path id="path" d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+    </g>
+</svg>

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

@@ -10,7 +10,7 @@
     <button
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
-      :aria-expanded="`${dataOpen}`"
+      :aria-expanded="dataOpen ? 'true' : 'false'"
       :aria-controls="uid"
       @click="toggle"
     >

package/src/components/cv-breadcrumb/_cv-breadcrumb-item-skeleton.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="bx--breadcrumb-item">
-    <a class="bx--link">&nbsp;</a>
+  <div :class="`${carbonPrefix}--breadcrumb-item`">
+    <a :class="`${carbonPrefix}--link`">&nbsp;</a>
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvBreadcrumbItemSkeleton',
+  mixins: [carbonPrefixMixin],
 };
 </script>

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

@@ -1,16 +1,14 @@
 <template>
-  <div
-    class="cv-breadcrumb-item bx--breadcrumb-item"
-    :class="{ 'bx--breadcrumb-item--current': activePage }"
-    :aria-current="ariaCurrent"
-  >
+  <div :class="breadcrumbItemClasses" :aria-current="ariaCurrent">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvBreadcrumbItem',
+  mixins: [carbonPrefixMixin],
   props: {
     active: Boolean,
     ariaCurrent: String,
@@ -19,6 +17,13 @@ export default {
     activePage() {
       return this.active && this.ariaCurrent !== 'page';
     },
+    breadcrumbItemClasses() {
+      const classes = [`cv-breadcrumb-item ${this.carbonPrefix}--breadcrumb-item`];
+      if (this.activePage) {
+        classes.push(`${this.carbonPrefix}--breadcrumb-item--current`);
+      }
+      return classes.join(' ');
+    },
   },
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bx--breadcrumb bx--skeleton" :aria-label="ariaLabel">
+  <nav :class="`${carbonPrefix}--breadcrumb ${carbonPrefix}--skeleton`" :aria-label="ariaLabel">
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
@@ -8,9 +8,11 @@
 
 <script>
 import CvBreadcrumbItemSkeleton from './_cv-breadcrumb-item-skeleton';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvBreadcrumbSkeleton',
+  mixins: [carbonPrefixMixin],
   components: {
     CvBreadcrumbItemSkeleton,
   },

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

@@ -1,19 +1,26 @@
 <template>
-  <nav
-    class="cv-breadcrumb bx--breadcrumb"
-    :class="{ 'bx--breadcrumb--no-trailing-slash': noTrailingSlash }"
-    :aria-label="ariaLabel"
-  >
+  <nav class="cv-breadcrumb" :class="breadcrumbClasses" :aria-label="ariaLabel">
     <slot></slot>
   </nav>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvBreadcrumb',
+  mixins: [carbonPrefixMixin],
   props: {
     ariaLabel: { type: String, default: 'breadcrumb' },
     noTrailingSlash: Boolean,
   },
+  computed: {
+    breadcrumbClasses() {
+      let classes = [`${this.carbonPrefix}--breadcrumb`];
+      if (this.noTrailingSlash) {
+        classes.push(`${this.carbonPrefix}--breadcrumb--no-trailing-slash`);
+      }
+      return classes;
+    },
+  },
 };
 </script>

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

@@ -2,20 +2,19 @@
   <button class="cv-button" :class="buttonClasses" v-on="inputListeners" role="button">
     <slot></slot>
 
-    <component v-if="typeof icon === 'object'" :is="icon" class="bx--temp-fix" :class="`${carbonPrefix}--btn__icon`" />
-    <svg v-if="typeof icon === 'string' || iconHref" :class="`${carbonPrefix}--btn__icon`">
-      <use :href="icon || iconHref" />
-    </svg>
+    <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
   </button>
 </template>
 
 <script>
 import buttonMixin from './button-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import CvSvg from '../cv-svg/_cv-svg';
 
 export default {
   name: 'CvButton',
   mixins: [buttonMixin, carbonPrefixMixin],
+  components: { CvSvg },
   computed: {
     buttonClasses() {
       return this.buttonClassOpts();

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

@@ -2,20 +2,19 @@
   <button class="cv-button" :class="buttonClasses" v-on="inputListeners" type="button">
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
 
-    <component v-if="typeof icon === 'object'" :is="icon" class="bx--temp-fix" :class="`${carbonPrefix}--btn__icon`" />
-    <svg v-if="typeof icon === 'string' || iconHref" :class="`${carbonPrefix}--btn__icon`">
-      <use :href="icon || iconHref" />
-    </svg>
+    <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
   </button>
 </template>
 
 <script>
 import buttonMixin from './button-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import CvSvg from '../cv-svg/_cv-svg';
 
 export default {
   name: 'CvIconButton',
   mixins: [buttonMixin, carbonPrefixMixin],
+  components: { CvSvg },
   props: {
     label: { type: String, default: undefined },
     tipPosition: {

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

@@ -1,11 +1,13 @@
 <template>
-  <div class="cv-checkbox bx--form-item bx--checkbox-wrapper">
-    <label class="bx--checkbox-label bx--skeleton"></label>
+  <div class="cv-checkbox" :class="`${carbonPrefix}--form-item ${carbonPrefix}--checkbox-wrapper`">
+    <label :class="`${carbonPrefix}--checkbox-label ${carbonPrefix}--skeleton`"></label>
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvCheckboxSkeleton',
+  mixins: [carbonPrefixMixin],
 };
 </script>

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="cv-checkbox bx--checkbox-wrapper" :class="{ 'bx--form-item': formItem }">
+  <div class="cv-checkbox" :class="formItemClasses">
     <input
       ref="input"
       v-bind="$attrs"
       v-on="inputListeners"
-      class="bx--checkbox"
+      :class="`${carbonPrefix}--checkbox`"
       type="checkbox"
       :checked="isChecked === true"
       :aria-checked="`${isChecked}`"
@@ -14,18 +14,12 @@
       :id="uid"
     />
     <label
-      :class="[
-        'bx--checkbox-label',
-        {
-          'bx--label--disabled': $attrs.disabled !== undefined && $attrs.disabled,
-          'bx--checkbox-label__focus': hasFocus,
-        },
-      ]"
+      :class="labelClasses"
       :data-contained-checkbox-state="isChecked"
       :data-contained-checkbox-disabled="$attrs.disabled"
       :for="uid"
     >
-      <span class="bx--checkbox-label-text" :class="{ 'bx--visually-hidden': hideLabel }">
+      <span :class="labelContentClasses">
         {{ label }}
       </span>
     </label>
@@ -35,10 +29,11 @@
 <script>
 import checkMixin from '../../mixins/check-mixin';
 import uidMixin from '../../mixins/uid-mixin';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvCheckbox',
-  mixins: [checkMixin, uidMixin],
+  mixins: [checkMixin, uidMixin, carbonPrefixMixin],
   inheritAttrs: false,
   props: {
     hideLabel: Boolean,
@@ -60,6 +55,32 @@ export default {
       dataMixed: this.mixed,
     };
   },
+  computed: {
+    formItemClasses() {
+      const classes = [`${this.carbonPrefix}--checkbox-wrapper`];
+      if (this.formItem) {
+        classes.push(`${this.carbonPrefix}--form-item`);
+      }
+      return classes;
+    },
+    labelClasses() {
+      const classes = [`${this.carbonPrefix}--checkbox-label`];
+      if (this.$attrs.disabled !== undefined && this.$attrs.disabled) {
+        classes.push(`${this.carbonPrefix}--label--disabled`);
+      }
+      if (this.hasFocus) {
+        classes.push(`${this.carbonPrefix}--checkbox-label__focus`);
+      }
+      return classes;
+    },
+    labelContentClasses() {
+      const classes = [`${this.carbonPrefix}--checkbox-label-text`];
+      if (this.hideLabel) {
+        classes.push(`${this.carbonPrefix}--visually-hidden`);
+      }
+      return classes;
+    },
+  },
   methods: {
     onFocus() {
       this.hasFocus = true;

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -17,7 +17,7 @@
         'bx--combo-box--disabled bx--list-box--disabled': disabled,
       }"
       :data-invalid="isInvalid"
-      v-bind="$attr"
+      v-bind="$attrs"
       @keydown.down.prevent="onDown"
       @keydown.up.prevent="onUp"
       @keydown.enter.prevent="onEnter"
@@ -28,7 +28,7 @@
       <div
         role="button"
         aria-haspopup="true"
-        :aria-expanded="open"
+        :aria-expanded="open ? 'true' : 'false'"
         :aria-owns="uid"
         :aria-controls="uid"
         class="bx--list-box__field"
@@ -45,7 +45,7 @@
           aria-autocomplete="list"
           role="combobox"
           :aria-disabled="disabled"
-          :aria-expanded="open"
+          :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
           :disabled="disabled"
           :placeholder="label"

package/src/components/cv-content-switcher/cv-content-switcher-button.vue

@@ -22,13 +22,10 @@
       },
     ]"
     :data-target="contentSelector"
-    :aria-selected="`${dataSelected}`"
+    :aria-selected="dataSelected ? 'true' : 'false'"
     @click="open"
   >
-    <component v-if="typeof icon === 'object'" :is="icon" class="bx--content-switcher__icon" />
-    <svg v-if="typeof icon === 'string'" class="bx--content-switcher__icon" height="16" width="16">
-      <use :href="icon" />
-    </svg>
+    <CvSvg v-if="icon" :svg="icon" class="bx--content-switcher__icon" height="16" width="16" />
     <span class="bx--content-switcher__label">
       <slot></slot>
     </span>
@@ -37,10 +34,12 @@
 
 <script>
 import uidMixin from '../../mixins/uid-mixin';
+import CvSvg from '../cv-svg/_cv-svg';
 
 export default {
   name: 'CvContentSwitcherButton',
   mixins: [uidMixin],
+  components: { CvSvg },
   props: {
     contentSelector: { type: String, default: undefined },
     icon: {

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

@@ -60,11 +60,12 @@
           class="bx--dropdown-text"
           :aria-disabled="disabled"
           aria-haspopup="true"
-          :aria-expanded="open"
+          :aria-expanded="open ? 'true' : 'false'"
           :aria-controls="`${uid}-menu`"
           :aria-labelledby="ariaLabeledBy"
           :disabled="disabled"
           type="button"
+          ref="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
           <span
@@ -83,7 +84,7 @@
           class="bx--dropdown-list"
           :id="`${uid}-menu`"
           role="menu"
-          :aria-hidden="!open"
+          :aria-hidden="!open ? 'true' : 'false'"
           wh-menu-anchor="left"
           :aria-labelledby="`${uid}-label`"
           ref="droplist"
@@ -285,7 +286,7 @@ export default {
     },
     onEsc() {
       this.open = false;
-      this.$el.focus();
+      this.focus();
     },
     onClick(ev) {
       if (this.disabled) {
@@ -293,7 +294,7 @@ export default {
       } else {
         this.open = !this.open;
         if (!this.open) {
-          this.$el.focus();
+          this.focus();
         }
 
         let target = ev.target;
@@ -309,6 +310,11 @@ export default {
         }
       }
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.button.focus();
+      });
+    },
   },
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <form class="cv-form bx--form">
+  <form class="cv-form bx--form" v-on="$listeners">
     <slot></slot>
   </form>
 </template>

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

@@ -1,19 +1,22 @@
 <template>
-  <div data-inline-loading class="bx--inline-loading" role="alert" aria-live="assertive">
-    <div class="bx--inline-loading__animation" :class="{ 'bx--loading--stop': internalState === STATES.ENDING }">
+  <div data-inline-loading :class="`${carbonPrefix}--inline-loading`" role="alert" aria-live="assertive">
+    <div :class="animationClasses">
       <div
         v-show="internalState === STATES.LOADING || internalState === STATES.ENDING"
-        class="bx--loading bx--loading--small"
+        :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`"
       >
-        <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-          <circle class="bx--loading__background" cx="0" cy="0" r="26.8125" />
-          <circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125" />
+        <svg :class="`${carbonPrefix}--loading__svg`" viewBox="-75 -75 150 150">
+          <circle :class="`${carbonPrefix}--loading__background`" cx="0" cy="0" r="26.8125" />
+          <circle :class="`${carbonPrefix}--loading__stroke`" cx="0" cy="0" r="26.8125" />
         </svg>
       </div>
-      <CheckmarkFilled16 :hidden="internalState !== STATES.LOADED" class="bx--inline-loading__checkmark-container" />
-      <ErrorFilled16 :hidden="internalState !== STATES.ERROR" class="bx--inline-loading--error" />
+      <CheckmarkFilled16
+        :hidden="internalState !== STATES.LOADED"
+        :class="`${carbonPrefix}--inline-loading__checkmark-container`"
+      />
+      <ErrorFilled16 :hidden="internalState !== STATES.ERROR" :class="`${carbonPrefix}--inline-loading--error`" />
     </div>
-    <p class="bx--inline-loading__text">{{ stateText }}</p>
+    <p :class="`${carbonPrefix}--inline-loading__text`">{{ stateText }}</p>
   </div>
 </template>
 
@@ -21,10 +24,12 @@
 import { STATES } from './consts';
 import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
 import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvInlineLoading',
   components: { ErrorFilled16, CheckmarkFilled16 },
+  mixins: [carbonPrefixMixin],
   created() {
     this.STATES = STATES;
   },
@@ -76,12 +81,13 @@ export default {
           return this.loadingText;
       }
     },
-    CONSTS() {
-      return { STATES };
+    animationClasses() {
+      const classes = [`${this.carbonPrefix}--inline-loading__animation`];
+      if (this.internalState === STATES.ENDING) {
+        classes.push(`${this.carbonPrefix}--loading--stop`);
+      }
+      return classes;
     },
   },
-  CONSTS() {
-    return { STATES };
-  },
 };
 </script>

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

@@ -1,23 +1,27 @@
 <template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    class="cv-link bx--link"
-    :class="{ 'bx--link--inline': inline }"
-  >
+  <component :is="tagType" v-on="$listeners" v-bind="linkProps" class="cv-link" :class="linkClasses">
     <slot></slot>
   </component>
 </template>
 
 <script>
 import LinkMixin from '../../mixins/link-mixin';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvLink',
-  mixins: [LinkMixin],
+  mixins: [LinkMixin, carbonPrefixMixin],
   props: {
     inline: Boolean,
   },
+  computed: {
+    linkClasses() {
+      const classes = [`${this.carbonPrefix}--link`];
+      if (this.inline) {
+        classes.push(`${this.carbonPrefix}--link--inline`);
+      }
+      return classes;
+    },
+  },
 };
 </script>

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

@@ -43,7 +43,7 @@
       <div
         role="button"
         aria-haspopup="true"
-        :aria-expanded="open"
+        :aria-expanded="open ? 'true' : 'false'"
         :aria-owns="uid"
         :aria-controls="uid"
         class="bx--list-box__field"
@@ -71,7 +71,7 @@
             :aria-controls="uid"
             aria-autocomplete="list"
             role="combobox"
-            :aria-expanded="open"
+            :aria-expanded="open ? 'true' : 'false'"
             autocomplete="off"
             :placeholder="label"
             v-model="filter"

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

@@ -1,12 +1,14 @@
 <template>
-  <div class="cv-number-input bx--form-item">
-    <label class="bx--label bx--skeleton" />
-    <div class="bx--number bx--skeleton" />
+  <div class="cv-number-input" :class="`${carbonPrefix}--form-item`">
+    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`" />
+    <div :class="`${carbonPrefix}--number ${carbonPrefix}--skeleton`" />
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvNumberInputSkeleton',
+  mixins: [carbonPrefixMixin],
 };
 </script>

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

@@ -1,24 +1,14 @@
 <template>
-  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input bx--form-item">
-    <div
-      data-numberinput
-      class="bx--number"
-      :class="{
-        'bx--number--light': theme === 'light',
-        'bx--number--helpertext': isHelper,
-        'cv-number-input': !formItem,
-        'bx--number--mobile': mobile,
-      }"
-      :data-invalid="isInvalid"
-    >
-      <label :for="uid" class="bx--label">{{ label }}</label>
-      <div class="bx--form__helper-text" v-if="isHelper">
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input" :class="`${carbonPrefix}--form-item`">
+    <div data-numberinput :class="numberInputClasses" :data-invalid="isInvalid">
+      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <div :class="`${carbonPrefix}--form__helper-text`" v-if="isHelper">
         <slot name="helper-text">{{ helperText }}</slot>
       </div>
-      <div class="bx--number__input-wrapper">
+      <div :class="`${carbonPrefix}--number__input-wrapper`">
         <button
           v-if="mobile"
-          class="bx--number__control-btn down-icon"
+          :class="`${carbonPrefix}--number__control-btn down-icon`"
           @click="doDown"
           type="button"
           :aria-label="ariaLabelForDownButton"
@@ -38,10 +28,10 @@
           :max="max"
           ref="input"
         />
-        <WarningFilled16 v-if="isInvalid && !mobile" class="bx--number__invalid" />
-        <div class="bx--number__controls" v-if="!mobile">
+        <WarningFilled16 v-if="isInvalid && !mobile" :class="`${carbonPrefix}--number__invalid`" />
+        <div :class="`${carbonPrefix}--number__controls`" v-if="!mobile">
           <button
-            class="bx--number__control-btn up-icon"
+            :class="`${carbonPrefix}--number__control-btn up-icon`"
             @click="doUp"
             type="button"
             :aria-label="ariaLabelForUpButton"
@@ -50,7 +40,7 @@
             <CaretUpGlyph />
           </button>
           <button
-            class="bx--number__control-btn down-icon"
+            :class="`${carbonPrefix}--number__control-btn down-icon`"
             @click="doDown"
             type="button"
             :aria-label="ariaLabelForDownButton"
@@ -61,7 +51,7 @@
         </div>
         <button
           v-else
-          class="bx--number__control-btn up-icon"
+          :class="`${carbonPrefix}--number__control-btn up-icon`"
           @click="doUp"
           type="button"
           :aria-label="ariaLabelForUpButton"
@@ -70,7 +60,7 @@
           <CaretUpGlyph />
         </button>
       </div>
-      <div class="bx--form-requirement" v-if="isInvalid">
+      <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
         <slot name="invalid-message">{{ invalidMessage }}</slot>
       </div>
     </div>
@@ -84,10 +74,11 @@ 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';
 
 export default {
   name: 'CvNumberInput',
-  mixins: [uidMixin, themeMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
   components: { CaretDownGlyph, CaretUpGlyph, WarningFilled16, CvWrapper },
   inheritAttrs: false,
   props: {
@@ -140,6 +131,24 @@ export default {
     },
   },
   computed: {
+    numberInputClasses() {
+      const classes = [`${this.carbonPrefix}--number`];
+
+      if (this.theme === 'light') {
+        classes.push(`${this.carbonPrefix}--number--light`);
+      }
+      if (this.isHelper) {
+        classes.push(`${this.carbonPrefix}--number--helpertext`);
+      }
+      if (!this.formItem) {
+        classes.push(`cv-number-input`);
+      }
+      if (this.mobile) {
+        classes.push(`${this.carbonPrefix}--number--mobile`);
+      }
+
+      return classes;
+    },
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
     // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model