@carbon/vue 3.0.9 → 3.0.10

package/src/components/CvSlider/__tests__/__snapshots__/CvSlider.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvSlider should match snapshot 1`] = `
-<div class="cv-slider bx--form-item"><label for="abc" class="bx--label" id="abc-label" style="display: none;"></label>
+<div class="cv-slider bx--form-item"><label id="abc-label" for="abc" class="bx--label" style="display: none;"></label>
   <div class="bx--slider-container"><span class="bx--slider__range-label">0</span>
     <div class="bx--slider" data-slider="" data-slider-input-box="#slider-input-box">
       <div class="bx--slider__track"></div>

package/src/components/CvStructuredList/CvStructuredListItem.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     class="cv-structured-list-item"
     :value="value"
-    :modelValue="modelValue"
+    :model-value="modelValue"
   >
     <slot></slot>
   </component>
@@ -30,8 +30,8 @@ defineProps({
   },
 });
 
-const selectable = inject('selectable');
-const change = inject('change');
+const selectable = inject('selectable', false);
+const change = inject('change', () => {});
 const emit = defineEmits(['change']);
 
 provide('onRadioItemChange', clickedItemCvId => {

package/src/components/CvStructuredList/CvStructuredListItemSelectable.vue

@@ -11,8 +11,8 @@
     <slot></slot>
     <input
       v-bind="$attrs"
-      tabindex="-1"
       :id="cvId"
+      tabindex="-1"
       :class="`${carbonPrefix}--structured-list-input`"
       :checked="isChecked"
       :value="value"

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListItem.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" model-value="test"></cv-structured-list-item-standard-stub>`;
 
-exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
+exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" model-value="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
 
-exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" model-value="test"></cv-structured-list-item-standard-stub>`;

package/src/components/CvSvg/__tests__/_TestIcon.vue

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

package/src/components/CvTabs/CvTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="`cv-tab ${carbonPrefix}--tab-content`"
     :id="uid"
+    :class="`cv-tab ${carbonPrefix}--tab-content`"
     role="tabpanel"
     :aria-labelledby="`${uid}-link`"
     :aria-hidden="!dataSelected ? 'true' : 'false'"

package/src/components/CvTabs/CvTabs.vue

@@ -16,6 +16,7 @@
       @keydown.left.prevent.stop="onLeft"
     >
       <button
+        ref="elLeftOverflow"
         aria-hidden="true"
         aria-label="scroll left"
         :class="[
@@ -25,12 +26,11 @@
               leftOverflowNavButtonHidden,
           },
         ]"
+        tabIndex="-1"
+        type="button"
         @click.stop.prevent="e => onOverflowClick(e, { direction: -1 })"
         @mousedown.stop.prevent="e => onOverflowMouseDown(e, { direction: -1 })"
         @mouseup.stop.prevent="onOverflowMouseUp"
-        tabIndex="-1"
-        type="button"
-        ref="elLeftOverflow"
       >
         <ChevronLeft16 />
       </button>
@@ -40,9 +40,9 @@
       />
 
       <ul
+        ref="elTabList"
         :class="`${carbonPrefix}--tabs--scrollable__nav`"
         role="tablist"
-        ref="elTabList"
       >
         <li
           v-for="tab in tabs"
@@ -65,16 +65,16 @@
           role="presentation"
         >
           <button
+            :id="`${tab.uid}-link`"
+            ref="elLink"
             :class="`${carbonPrefix}--tabs--scrollable__nav-link`"
             role="tab"
             :aria-controls="tab.uid"
             :aria-disabled="disabledTabs.has(tab.uid)"
             :aria-selected="selectedId === tab.uid"
-            :id="`${tab.uid}-link`"
-            @click="onTabClick(tab.uid)"
-            ref="elLink"
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
+            @click="onTabClick(tab.uid)"
           >
             <slot :name="tab.uid" v-bind="tab">
               {{ tab.label }}
@@ -88,6 +88,7 @@
         :class="`${carbonPrefix}--tabs__overflow-indicator--right`"
       />
       <button
+        ref="elRightOverflow"
         aria-hidden="true"
         aria-label="scroll right"
         :class="[
@@ -97,12 +98,11 @@
               rightOverflowNavButtonHidden,
           },
         ]"
+        tabIndex="-1"
+        type="button"
         @click="e => onOverflowClick(e, { direction: 1 })"
         @mousedown="e => onOverflowMouseDown(e, { direction: 1 })"
         @mouseup="onOverflowMouseUp"
-        tabIndex="-1"
-        type="button"
-        ref="elRightOverflow"
       >
         <ChevronRight16 />
       </button>
@@ -136,7 +136,7 @@ const props = defineProps({
   /**
    * @deprecated not used in component
    */
-  leftOverflowIconButtonProps: Object,
+  leftOverflowIconButtonProps: { type: Object, default: undefined },
   /**
    * This is an edge use case. By default, if no tab is explicitly selected, the first non-disabled tab is selected.
    */
@@ -144,7 +144,7 @@ const props = defineProps({
   /**
    * @deprecated not used in component
    */
-  rightOverflowIconButtonProps: Object,
+  rightOverflowIconButtonProps: { type: Object, default: undefined },
   /**
    * @deprecated not used in component
    */

package/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap

@@ -7,18 +7,18 @@ exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
       </svg></button>
     <!--v-if-->
     <ul class="bx--tabs--scrollable__nav" role="tablist">
-      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-disabled="false" aria-selected="true" id="tab-1-link" tabindex="0" type="button">Hello <strong style="color: red;">(*)</strong></button></li>
-      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-disabled="false" aria-selected="false" id="tab-2-link" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
-      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-disabled="false" aria-selected="false" id="tab-3-link" tabindex="-1" type="button">Tab 3 label</button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected" role="presentation"><button id="tab-1-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-disabled="false" aria-selected="true" tabindex="0" type="button">Hello <strong style="color: red;">(*)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-2-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-disabled="false" aria-selected="false" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button id="tab-3-link" class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-disabled="false" aria-selected="false" tabindex="-1" type="button">Tab 3 label</button></li>
     </ul>
     <!--v-if--><button aria-hidden="true" aria-label="scroll right" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
         <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
       </svg></button>
   </div>
   <div class="cv-tabs__panels">
-    <div class="cv-tab bx--tab-content" id="tab-1" role="tabpanel" aria-labelledby="tab-1-link" aria-hidden="false">Tab 1 content</div>
-    <div class="cv-tab bx--tab-content" id="tab-2" role="tabpanel" aria-labelledby="tab-2-link" aria-hidden="true" hidden="">Tab 2 content</div>
-    <div class="cv-tab bx--tab-content" id="tab-3" role="tabpanel" aria-labelledby="tab-3-link" aria-hidden="true" hidden="">Tab 3 content</div>
+    <div id="tab-1" class="cv-tab bx--tab-content" role="tabpanel" aria-labelledby="tab-1-link" aria-hidden="false">Tab 1 content</div>
+    <div id="tab-2" class="cv-tab bx--tab-content" role="tabpanel" aria-labelledby="tab-2-link" aria-hidden="true" hidden="">Tab 2 content</div>
+    <div id="tab-3" class="cv-tab bx--tab-content" role="tabpanel" aria-labelledby="tab-3-link" aria-hidden="true" hidden="">Tab 3 content</div>
   </div>
 </div>
 `;

package/src/components/CvTag/CvTag.stories.js

@@ -10,7 +10,7 @@ export default {
   title: `${sbCompPrefix}/CvTag`,
   component: CvTag,
   argTypes: {
-    kind: { control: { type: 'select', options: tagKinds } },
+    kind: { control: 'select', options: tagKinds },
   },
 };
 

package/src/components/CvTag/CvTag.vue

@@ -8,8 +8,8 @@
       v-if="filter"
       :class="`${carbonPrefix}--tag__close-icon`"
       :aria-label="clearAriaLabel"
-      @click.stop.prevent="onRemove"
       :disabled="disabled"
+      @click.stop.prevent="onRemove"
     >
       <Close16 />
     </button>

package/src/components/CvTextArea/CvTextArea.vue

@@ -14,16 +14,16 @@
     </label>
     <div
       :class="`${carbonPrefix}--text-area__wrapper`"
-      :data-invalid="isInvalid"
+      :data-invalid="isInvalid || null"
     >
       <WarningFilled16
         v-if="isInvalid"
         :class="`${carbonPrefix}--text-area__invalid-icon`"
       />
       <textarea
-        :aria-invalid="isInvalid"
-        :aria-describedby="isInvalid ? errorId : undefined"
         :id="cvId"
+        :aria-invalid="isInvalid || null"
+        :aria-describedby="isInvalid ? errorId : undefined"
         :class="[
           `${carbonPrefix}--text-area`,
           {
@@ -66,12 +66,12 @@ const props = defineProps({
   helperText: { type: String, default: undefined },
   hideLabel: { type: Boolean, default: false },
   invalidMessage: { type: String, default: undefined },
-  label: String,
-  modelValue: String,
+  label: { type: String, default: undefined },
+  modelValue: { type: String, default: undefined },
   ...propsCvId,
   ...propsTheme,
 });
-
+defineEmits(['update:modelValue']);
 const cvId = useCvId(props);
 
 // DOM

package/src/components/CvTextInput/CvTextInput.stories.js

@@ -3,7 +3,7 @@ import {
   storyParametersObject,
 } from '../../global/storybook-utils';
 
-import CvTextInput from '.';
+import { CvTextInput, CvTextInputSkeleton } from '.';
 import { ref } from 'vue';
 
 export default {
@@ -34,8 +34,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description:
-        'Provide text that is used alongside the control label for additional help',
     },
     hideLabel: {
       type: 'boolean',
@@ -44,8 +42,6 @@ export default {
         category: 'props',
         defaultValue: false,
       },
-      description:
-        'Specify whether you want the underlying label to be visually hidden',
     },
     invalidMessage: {
       type: 'string',
@@ -53,8 +49,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description:
-        'Provide the text that is displayed when the control is in an invalid state',
     },
     label: {
       type: 'string',
@@ -62,7 +56,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description: "Input's label",
     },
     light: {
       type: 'boolean',
@@ -80,8 +73,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description:
-        "Input's value, modelValue is the vue3 default 'prop' for two-way data binding with v-model",
     },
     passwordHideLabel: {
       type: 'string',
@@ -89,7 +80,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description: '"Hide password" tooltip text on password visibility toggle',
     },
     passwordShowLabel: {
       type: 'string',
@@ -97,7 +87,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description: '"Show password" tooltip text on password visibility toggle',
     },
     passwordVisible: {
       type: 'boolean',
@@ -105,7 +94,6 @@ export default {
         type: { summary: 'boolean' },
         category: 'props',
       },
-      description: 'Toggle password visibility.',
     },
     type: {
       type: 'string',
@@ -118,7 +106,6 @@ export default {
       control: {
         type: 'select',
       },
-      description: 'Input type, only `text` and `password` are available',
     },
     warnText: {
       type: 'string',
@@ -126,8 +113,6 @@ export default {
         type: { summary: 'string' },
         category: 'props',
       },
-      description:
-        'Provide the text that is displayed when the control is in warning state',
     },
     // slots
     'helper-text': {
@@ -171,11 +156,13 @@ export default {
 };
 
 const template = `
+<form @submit.prevent='()=>{}'>
   <cv-text-input v-bind="args">
     <template v-if="args['helper-text']" v-slot:helper-text />
     <template v-if="args['warn-text']" v-slot:warn-text />
     <template v-if="args['invalid-message']" v-slot:invalid-message />
   </cv-text-input>
+</form>
 `;
 const Template = args => {
   return {
@@ -191,6 +178,7 @@ Default.args = {
   label: 'Text input label',
   placeholder: 'Sample placeholder',
 };
+
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -237,9 +225,33 @@ export const Password = Template.bind({});
 Password.args = {
   label: 'Password input label',
   type: 'password',
+  autocomplete: 'password',
 };
 Password.parameters = storyParametersObject(
   Password.parameters,
   template,
   Password.args
 );
+
+const templateSkeleton = `<cv-text-input-skeleton v-bind='args'/>`;
+const TemplateSkeleton = args => {
+  return {
+    components: { CvTextInputSkeleton },
+    setup: () => ({ args }),
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});
+
+Skeleton.parameters = {
+  controls: {
+    include: ['hideLabel'],
+  },
+};
+
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  templateSkeleton,
+  Skeleton.args
+);

package/src/components/CvTextInput/CvTextInput.vue

@@ -24,7 +24,7 @@
         `${carbonPrefix}--text-input__field-wrapper`,
         { [`${carbonPrefix}--text-input__field-wrapper--warning`]: isWarn },
       ]"
-      :data-invalid="isInvalid"
+      :data-invalid="isInvalid || null"
     >
       <WarningFilled16
         v-if="isInvalid"
@@ -35,8 +35,8 @@
         :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
       />
       <input
-        ref="input"
         :id="cvId"
+        ref="input"
         :class="[
           `${carbonPrefix}--text-input`,
           {
@@ -49,7 +49,7 @@
         v-bind="$attrs"
         :type="dataType"
         :value="modelValue"
-        :data-toggle-password-visibility="isPassword"
+        :data-toggle-password-visibility="isPassword || null"
         @input="$event => $emit('update:modelValue', $event.target.value)"
       />
       <button
@@ -64,9 +64,9 @@
           `${carbonPrefix}--tooltip--align-center`,
           { [`${carbonPrefix}--btn--disabled`]: $attrs.disabled },
         ]"
-        @click="togglePasswordVisibility"
         type="button"
         :disabled="$attrs.disabled"
+        @click="togglePasswordVisibility"
       >
         <span :class="`${carbonPrefix}--assistive-text`">
           {{ passwordHideShowLabel }}
@@ -118,24 +118,54 @@ import { useIsLight, props as propsTheme } from '../../use/cvTheme';
 import { inputTypes } from './const';
 
 const props = defineProps({
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
   helperText: { type: String, default: undefined },
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
   hideLabel: { type: Boolean, default: false },
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
   invalidMessage: { type: String, default: undefined },
-  label: String,
-  modelValue: String,
+  /**
+   * Input's label
+   */
+  label: { type: String, default: undefined },
+  /**
+   * Input's value, modelValue is the vue3 default 'prop' for two-way data binding with v-model
+   */
+  modelValue: { type: String, default: undefined },
+  /**
+   * Hide password" tooltip text on password visibility toggle
+   */
   passwordHideLabel: { type: String, default: 'Hide password' },
+  /**
+   * Show password tooltip text on password visibility toggle
+   */
   passwordShowLabel: { type: String, default: 'Show password' },
+  /**
+   * Toggle password visibility
+   */
   passwordVisible: { type: Boolean, default: undefined },
+  /**
+   * Input type, only `text` and `password` are available
+   */
   type: {
     type: String,
     default: 'text',
     validator: value => inputTypes.has(value),
   },
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
   warnText: { type: String, default: undefined },
   ...propsCvId,
   ...propsTheme,
 });
-
+defineEmits(['update:modelValue']);
 const cvId = useCvId(props);
 
 // DOM Elements

package/src/components/CvTextInput/CvTextInputSkeleton.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="[`${carbonPrefix}--form-item`]">
+    <span
+      v-if="!hideLabel"
+      :class="[`${carbonPrefix}--label`, `${carbonPrefix}--skeleton`]"
+    ></span>
+    <div
+      :class="[`${carbonPrefix}--text-input`, `${carbonPrefix}--skeleton`]"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+
+defineProps({ hideLabel: { type: Boolean, default: false } });
+</script>

package/src/components/CvTextInput/index.js

@@ -1,4 +1,5 @@
 import CvTextInput from './CvTextInput.vue';
+import CvTextInputSkeleton from './CvTextInputSkeleton.vue';
 
-export { CvTextInput };
+export { CvTextInput, CvTextInputSkeleton };
 export default CvTextInput;

package/src/components/CvTile/CvTile.vue

@@ -3,14 +3,14 @@
     :is="tagType"
     :checked="checkProp('checked', selected)"
     :expanded="checkProp('expanded', expanded)"
-    :tileCollapsedLabel="checkProp('tileCollapsedLabel', tileCollapsedLabel)"
-    :tileExpandedLabel="checkProp('tileCollapsedLabel', tileExpandedLabel)"
+    :tile-collapsed-label="checkProp('tileCollapsedLabel', tileCollapsedLabel)"
+    :tile-expanded-label="checkProp('tileCollapsedLabel', tileExpandedLabel)"
     :class="[
       `cv-tile ${carbonPrefix}--tile`,
       { [`${carbonPrefix}--tile--light`]: isLight },
     ]"
   >
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData"
+    <template v-for="(_, name) in $slots" #[name]="slotData"
       ><slot :name="name" v-bind="slotData"
     /></template>
   </component>

package/src/components/CvTile/CvTileExpandable.vue

@@ -1,19 +1,19 @@
 <template>
   <button
+    ref="el"
     type="button"
     :style="data.styleObject"
-    @click="toggle"
     :class="[
       `cv-tile-expandable ${carbonPrefix}--tile--expandable`,
       { [`${carbonPrefix}--tile--is-expanded`]: data.internalExpanded },
     ]"
-    ref="el"
+    @click="toggle"
   >
     <div :class="`${carbonPrefix}--tile-content`">
       <span
+        ref="aboveFold"
         data-tile-atf
         :class="`${carbonPrefix}--tile-content__above-the-fold`"
-        ref="aboveFold"
       >
         <slot>
           <!-- Above the fold content here -->
@@ -24,9 +24,9 @@
         <ChevronDown16 />
       </div>
       <span
-        :class="`${carbonPrefix}--tile-content__below-the-fold`"
-        ref="belowFold"
         v-show="data.internalExpanded || data.initialized"
+        ref="belowFold"
+        :class="`${carbonPrefix}--tile-content__below-the-fold`"
       >
         <slot name="below">
           <!-- Rest of the content here -->
@@ -43,8 +43,8 @@ import { computed, nextTick, reactive, ref, watch } from 'vue';
 
 const props = defineProps({
   expanded: Boolean,
-  tileCollapsedLabel: String,
-  tileExpandedLabel: String,
+  tileCollapsedLabel: { type: String, default: undefined },
+  tileExpandedLabel: { type: String, default: undefined },
 });
 const data = reactive({
   styleObject: {

package/src/components/CvTile/CvTileSelectable.vue

@@ -8,12 +8,12 @@
     ]"
     data-tile="selectable"
     tabindex="0"
-    :data-contained-checkbox-state="isChecked"
+    :data-contained-checkbox-state="isChecked || null"
   >
     <input
+      :id="uid"
       tabindex="-1"
       data-tile-input
-      :id="uid"
       type="checkbox"
       :checked="isChecked === true"
       :aria-checked="`${isChecked}`"

package/src/components/CvTimePicker/CvTimePicker.vue

@@ -7,7 +7,7 @@
         `${carbonPrefix}--time-picker--${fieldSize}`,
         { [`${carbonPrefix}--time-picker--light`]: isLight },
       ]"
-      :data-invalid="isInvalid"
+      :data-invalid="isInvalid || null"
     >
       <div :class="`${carbonPrefix}--time-picker__input`">
         <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>

package/src/components/CvTooltip/CvDefinitionTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="`cv-definition-tooltip ${carbonPrefix}--tooltip--definition ${carbonPrefix}--tooltip--a11y`"
     :id="cvId"
+    :class="`cv-definition-tooltip ${carbonPrefix}--tooltip--definition ${carbonPrefix}--tooltip--a11y`"
   >
     <button
       :aria-describedby="`${cvId}-label`"
@@ -19,8 +19,8 @@
       </slot>
     </button>
     <div
-      :class="`${carbonPrefix}--assistive-text`"
       :id="`${cvId}-label`"
+      :class="`${carbonPrefix}--assistive-text`"
       role="tooltip"
     >
       <slot name="definition">