@carbon/vue 3.0.9-alpha.0 → 3.0.10

package/src/components/CvPagination/CvPagination.vue

@@ -2,12 +2,12 @@
   <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
     <div :class="`${carbonPrefix}--pagination__left`">
       <cv-select
+        ref="pageSizeSelect"
         :class="`${carbonPrefix}--select__item-count`"
         :label="pageSizesLabel"
         inline
-        ref="pageSizeSelect"
-        @change="onPageSizeChange"
         :value="`${pageSizeValue}`"
+        @change="onPageSizeChange"
       >
         <cv-select-option
           v-for="(size, index) in pageSizes"
@@ -21,23 +21,21 @@
 
       <span :class="`${carbonPrefix}--pagination__text`">
         <span data-displayed-item-range>
-          <slot name="range-text" v-bind:scope="rangeProps">{{
-            rangeText
-          }}</slot>
+          <slot name="range-text" :scope="rangeProps">{{ rangeText }}</slot>
         </span>
       </span>
     </div>
 
     <div :class="`${carbonPrefix}--pagination__right`">
       <cv-select
+        v-if="numberOfItems !== Infinity"
+        ref="pageSelect"
         :class="`${carbonPrefix}--select__page-number`"
         :label="pageNumberLabel"
         inline
-        hideLabel
-        ref="pageSelect"
-        @change="onPageChange"
+        hide-label
         :value="`${pageValue}`"
-        v-if="numberOfItems !== Infinity"
+        @change="onPageChange"
       >
         <cv-select-option
           v-for="pageNumber in pages"
@@ -48,9 +46,7 @@
         >
       </cv-select>
       <span :class="`${carbonPrefix}--pagination__text`">
-        <slot name="of-n-pages" v-bind:scope="ofNPagesProps">{{
-          pageOfPages
-        }}</slot>
+        <slot name="of-n-pages" :scope="ofNPagesProps">{{ pageOfPages }}</slot>
       </span>
 
       <button
@@ -61,8 +57,8 @@
         ]"
         data-page-backward
         :aria-label="backwardText"
-        @click="onPrevPage"
         :disabled="noWayBack"
+        @click="onPrevPage"
       >
         <CaretLeft16 :class="`${carbonPrefix}--pagination__button-icon`" />
       </button>
@@ -75,8 +71,8 @@
         ]"
         data-page-forward
         :aria-label="forwardText"
-        @click="onNextPage"
         :disabled="noWayForward"
+        @click="onNextPage"
       >
         <CaretRight16 :class="`${carbonPrefix}--pagination__button-icon`" />
       </button>
@@ -102,7 +98,7 @@ const props = defineProps({
   pageSizesLabel: { type: String, default: 'Items per page:' },
   numberOfItems: { type: Number, default: Infinity },
   actualItemsOnPage: { type: Number, default: Infinity },
-  page: Number,
+  page: { type: Number, default: undefined },
   pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
 });
 

package/src/components/CvProgress/CvProgress.vue

@@ -34,7 +34,7 @@ const props = defineProps({
   /**
    * An array of labels for the steps. Use `cv-progress-step` components for more control over the step logic.
    */
-  steps: Array,
+  steps: { type: Array, default: () => [] },
   /**
    * Determines whether the ProgressIndicator should be rendered vertically.
    */

package/src/components/CvProgress/CvProgressStep.vue

@@ -1,11 +1,11 @@
 <!--suppress HtmlUnknownTag -->
 <template>
   <li
+    :id="uid"
     :class="[
       `cv-progress-step ${carbonPrefix}--progress-step`,
       `${carbonPrefix}--progress-step--${internalState}`,
     ]"
-    :id="uid"
     :aria-disabled="disabled"
   >
     <button
@@ -62,12 +62,12 @@ const STEP_INCOMPLETE = 'incomplete';
 const STEP_DISABLED = 'disabled';
 
 const props = defineProps({
-  additionalInfo: String,
-  description: String,
+  additionalInfo: { type: String, default: undefined },
+  description: { type: String, default: undefined },
   disabled: Boolean,
   invalid: Boolean,
-  label: String,
-  tipText: String,
+  label: { type: String, default: undefined },
+  tipText: { type: String, default: undefined },
   complete: Boolean,
   ...propsCvId,
 });

package/src/components/CvRadioButton/CvRadioButton.vue

@@ -8,9 +8,9 @@
     <input
       v-bind="$attrs"
       :id="cvId"
+      ref="input"
       :checked="isChecked"
       :class="`${carbonPrefix}--radio-button`"
-      ref="input"
       type="radio"
       :value="value"
       @change="onChange"
@@ -33,9 +33,9 @@ import { carbonPrefix } from '../../global/settings';
 import { useCvId, propsCvId, useMethods, useRadio } from '../../use';
 
 const props = defineProps({
-  modelValue: String,
+  modelValue: { type: String, default: undefined },
   checked: Boolean,
-  label: String,
+  label: { type: String, default: undefined },
   value: { type: String, required: true },
   hideLabel: Boolean,
   labelLeft: Boolean,

package/src/components/CvSearch/CvSearch.vue

@@ -4,6 +4,7 @@
     :class="`cv-search ${carbonPrefix}--form-item`"
   >
     <div
+      ref="elSearch"
       :aria-label="internalAriaLabel"
       :aria-labelledby="internalAriaLabelBy"
       :class="[
@@ -18,7 +19,6 @@
         },
       ]"
       role="search"
-      ref="elSearch"
     >
       <div
         :class="`${carbonPrefix}--search-magnifier`"
@@ -33,20 +33,20 @@
       }}</label>
 
       <input
-        role="searchbox"
         :id="uid"
-        :class="`${carbonPrefix}--search-input`"
         v-bind="$attrs"
+        ref="elInput"
         v-model="internalSearchText"
-        @input="onInput"
+        role="searchbox"
+        :class="`${carbonPrefix}--search-input`"
         type="text"
-        ref="elInput"
         :placeholder="placeholder"
         :aria-labelledby="uid"
+        :disabled="disabled ? 'true' : undefined"
+        @input="onInput"
         @blur="checkFocus"
         @click="toggleActive"
         @keydown.esc="onClearClick"
-        :disabled="disabled ? 'true' : undefined"
       />
 
       <button
@@ -111,7 +111,7 @@ const props = defineProps({
   /**
    * Provide the label text for the Search icon
    */
-  label: String,
+  label: { type: String, default: undefined },
   /**
    * Specify the search size ('sm', 'md', 'lg', 'xl')
    */
@@ -151,7 +151,7 @@ const props = defineProps({
   /**
    * Optionally provide the default value of the `<input>`
    */
-  value: String,
+  value: { type: String, default: undefined },
   /**
    * @deprecated use value
    */
@@ -172,10 +172,11 @@ const props = defineProps({
    */
   toolbarAriaLabel: {
     type: String,
-    validator: () => {
-      console.warn('Deprecated: probably you want expandable=true');
+    validator: s => {
+      if (s) console.warn('Deprecated: probably you want expandable=true');
       return true;
     },
+    default: undefined,
   },
   ...propsTheme,
   ...propsCvId,

package/src/components/CvSelect/CvSelect.vue

@@ -37,7 +37,7 @@
       >
         <div
           :class="`${carbonPrefix}--select-input__wrapper`"
-          :data-invalid="isInvalid ? true : undefined"
+          :data-invalid="isInvalid || null"
         >
           <select
             v-bind="$attrs"

package/src/components/CvSlider/CvSlider.vue

@@ -2,12 +2,12 @@
   <div :class="`cv-slider ${carbonPrefix}--form-item`">
     <label
       v-show="label"
+      :id="labelId"
       :for="cvId"
       :class="[
         `${carbonPrefix}--label`,
         { [`${carbonPrefix}--label--disabled`]: disabled },
       ]"
-      :id="labelId"
     >
       {{ label }}
     </label>
@@ -26,9 +26,9 @@
         data-slider-input-box="#slider-input-box"
       >
         <div
+          ref="track"
           :class="`${carbonPrefix}--slider__track`"
           @click="onTrackClick"
-          ref="track"
         ></div>
 
         <div
@@ -37,6 +37,7 @@
         ></div>
 
         <div
+          ref="thumb"
           :class="[
             `${carbonPrefix}--slider__thumb`,
             {
@@ -46,7 +47,6 @@
           tabindex="0"
           :aria-labelledby="labelId"
           :style="`left: ${percentage};`"
-          ref="thumb"
           @keydown.up.right.prevent="onUp"
           @keydown.down.left.prevent="onDown"
           @mousedown="onStartDrag"
@@ -54,12 +54,12 @@
 
         <input
           :id="cvId"
+          ref="range"
           :class="`${carbonPrefix}--slider__input`"
           type="range"
           :step="step"
           :min="min"
           :max="max"
-          ref="range"
         />
       </div>
 
@@ -68,18 +68,18 @@
       </span>
 
       <input
+        ref="inputBox"
+        v-model="internalValue"
         type="string"
         :class="[
           `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
           { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
-        v-model="internalValue"
+        :disabled="disabled"
         @change="onChange"
-        ref="inputBox"
         @keydown.up.prevent="onUp"
         @keydown.down.prevent="onDown"
-        :disabled="disabled"
       />
     </div>
   </div>

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.stories.mdx

@@ -5,6 +5,7 @@ import CvTab from './CvTab.vue';
 import CvTabsSkeleton from './CvTabsSkeleton.vue';
 import SbContainer from './_SbContainer.vue';
 import { action } from '@storybook/addon-actions';
+import { IbmSecurity20 as SampleIcon } from '@carbon/icons-vue';
 
 <Meta
   title={`${sbCompPrefix}/CvTabs`}
@@ -23,6 +24,7 @@ export const Template = args => ({
     CvTabs,
     CvTab,
     CvTabsSkeleton,
+    SampleIcon,
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
@@ -31,6 +33,7 @@ export const Template = args => ({
       noDefaultToFirst: args.noDefaultToFirst,
       selectedId: args.selectedId,
       disabledIds: args.disabledIds,
+      slottedTabs: args.slottedTabs,
       onTabSelected: action('tab-selected'),
       onTabSelectedId: action('tab-selected-id'),
     };
@@ -46,20 +49,47 @@ const defaultTemplate = `
   @tab-selected-id="onTabSelectedId"
   aria-label="navigation tab label">
     <cv-tab id="tab-1" label="House" :selected="selectedId === 'tab-1'" :disabled="disabledIds.includes('tab-1')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-1</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-1="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;IbmSecurity20 /&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         29 Arlington Avenue is a house in Islington, London. Douglas Adams shared the house for a time
         with Jonny Brock and Clare Gorst. It is mentioned in the dedication of The Hitchhiker's Guide to
         the Galaxy, which is dedicated to the "Arlingtonians for tea, sympathy, and a sofa."
       </p>
     </cv-tab>
     <cv-tab id="tab-2" label="Bar" :selected="selectedId === 'tab-2'" :disabled="disabledIds.includes('tab-2')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-2</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-2="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;strong style="color: red;"&gt;(*)&lt;/strong&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         The Old Pink Dog Bar was the bar in Han Dold City that Ford Prefect was in when he discovered
         that his Guide had his full entry on Earth on it.
       </p>
     </cv-tab>
     <cv-tab id="tab-3" label="Reach" :selected="selectedId === 'tab-3'" :disabled="disabledIds.includes('tab-3')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-3</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-3="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;strong style="color: orange;"&gt;(!)&lt;/strong&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         The Third Reach of the Unknown is what might be loosely described as a "place" which exists only
         under high improbability conditions and was created on the starship Heart of Gold due to the
         Infinite Improbability Drive. During Arthur Dent and Ford Prefect's first trip on board the Heart
@@ -81,6 +111,15 @@ const defaultTemplate = `
         <a target='_blank' href='https://hitchhikers.fandom.com/wiki/Main_Page'>credits</a>
       </p>
     </cv-tab>
+    <template v-if="slottedTabs" #tab-1="tab">
+      House <SampleIcon/>
+    </template>
+    <template v-if="slottedTabs" #tab-2="tab">
+      {{tab.label}} <strong style="color: red;">(*)</strong>
+    </template>
+    <template v-if="slottedTabs" #tab-3="tab">
+      {{tab.label}} <strong style="color: orange;">(!)</strong>
+    </template>
 </cv-tabs>
 `;
 const skeletonTemplate = `<cv-tabs-skeleton></cv-tabs-skeleton>`;
@@ -173,3 +212,45 @@ screens, and so I suggest using a different component for mobile cases.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+# Tabs slotted
+
+<Canvas>
+  <Story
+    name="tabsSlot"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'leftOverflowIconButtonProps',
+          'rightOverflowIconButtonProps',
+          'scrollIntoView',
+          'tab-selected',
+          'tab-selected-id',
+          'slottedTabs',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      selectedId: '',
+      disabledIds: [],
+      slottedTabs: true
+    }}
+    argTypes={{
+      selectedId: {
+        control: 'select',
+        default: '',
+        options: ['', 'tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+      disabledIds: {
+        control: 'multi-select',
+        options: ['tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

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,18 +65,20 @@
           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)"
           >
-            {{ tab.label }}
+            <slot :name="tab.uid" v-bind="tab">
+              {{ tab.label }}
+            </slot>
           </button>
         </li>
       </ul>
@@ -86,6 +88,7 @@
         :class="`${carbonPrefix}--tabs__overflow-indicator--right`"
       />
       <button
+        ref="elRightOverflow"
         aria-hidden="true"
         aria-label="scroll right"
         :class="[
@@ -95,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>
@@ -134,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.
    */
@@ -142,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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
+<div class="cv-tabs ABC-class-123" style="width: 100%;" aria-label="ABC-aria-label-123">
+  <div data-tabs="" class="cv-tab bx--tabs--scrollable ABC-class-123" role="navigation" aria-label="ABC-aria-label-123"><button aria-hidden="true" aria-label="scroll left" 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="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path>
+      </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 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 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,11 +10,11 @@ export default {
   title: `${sbCompPrefix}/CvTag`,
   component: CvTag,
   argTypes: {
-    kind: { control: { type: 'select', options: tagKinds } },
+    kind: { control: 'select', options: tagKinds },
   },
 };
 
-const template = `<CvTag @remove="onRemove" v-bind="args" />`;
+const template = `<cv-tag @remove="onRemove" v-bind="args" />`;
 const Template = (args, { argTypes }) => {
   return {
     props: Object.keys(argTypes),
@@ -56,6 +56,7 @@ Filter.parameters = storyParametersObject(
 export const Skeleton = Template.bind({});
 Skeleton.args = {
   skeleton: true,
+  label: '',
 };
 Skeleton.parameters = storyParametersObject(
   Skeleton.parameters,