@carbon/vue 3.0.29 → 3.0.31

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.28",
+  "version": "3.0.30",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.29",
+  "version": "3.0.31",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",

package/src/components/CvContentSwitcher/CvContentSwitcher.stories.mdx

@@ -77,7 +77,7 @@ const domTemplate = `
 const domCode = domTemplate.replace("v-bind='args'", '');
 const multipleTemplate = `
 <div>
-  <cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected" id="star-wars">
+  <cv-content-switcher tabindex="0" aria-label='Choose content' v-bind='args' @selected="onSelected" id="star-wars">
     <cv-content-switcher-button parent-switcher="star-wars" owner-id="episode-1" :selected="selectedIndex === 0">Episode 1</cv-content-switcher-button>
     <cv-content-switcher-button parent-switcher="star-wars" owner-id="episode-2" :selected="selectedIndex === 1">Episode 2</cv-content-switcher-button>
     <cv-content-switcher-button parent-switcher="star-wars" :icon="iconSample" owner-id="episode-3" :selected="selectedIndex === 2">Episode 3</cv-content-switcher-button>
@@ -96,7 +96,7 @@ const multipleTemplate = `
       <p>Yoda</p>
     </cv-content-switcher-content>
   </section>
-  <cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected" id="LotR">
+  <cv-content-switcher tabindex="1" aria-label='Choose content' v-bind='args' @selected="onSelected" id="LotR">
     <cv-content-switcher-button parent-switcher="LotR" owner-id="book-1" :selected="selectedIndex === 0">Book 1</cv-content-switcher-button>
     <cv-content-switcher-button parent-switcher="LotR" owner-id="book-2" :selected="selectedIndex === 1">Book 2</cv-content-switcher-button>
     <cv-content-switcher-button parent-switcher="LotR" :icon="iconSample" owner-id="book-3" :selected="selectedIndex === 2">Book 3</cv-content-switcher-button>

package/src/components/CvContentSwitcher/CvContentSwitcher.vue

@@ -18,7 +18,7 @@
 import { carbonPrefix } from '../../global/settings';
 import { props as propsCvId, useCvId } from '../../use/cvId';
 import { useIsLight, props as propsTheme } from '../../use/cvTheme';
-import { onUnmounted, watch } from 'vue';
+import { onUnmounted, watch, onMounted, nextTick } from 'vue';
 import store from './cvContentSwitcherStore';
 
 const emit = defineEmits(['selected']);
@@ -36,14 +36,26 @@ const cvId = useCvId(props, true);
 const isLight = useIsLight(props);
 store.addParent(cvId.value);
 store.setContentSelected('global', undefined);
+
+// Check for initial selection after child components have set up
+let hadInitialSelection = null;
+onMounted(async () => {
+  // Use nextTick to ensure child components have mounted and set their initial state
+  await nextTick();
+  hadInitialSelection =
+    store.state[cvId.value]?.selected !== undefined &&
+    store.state[cvId.value]?.selected !== '';
+});
+
 onUnmounted(() => {
   store.removeParent(cvId.value);
 });
+
 watch(
   () => store.state.global.latest,
   (val, prev) => {
     // if previous is not set, do not emit. This mimics the current v2 behaviour where the initial content does not generate an event
-    if (prev) emit('selected', val);
+    if (prev || (val && hadInitialSelection === false)) emit('selected', val);
   }
 );
 
@@ -53,7 +65,9 @@ watch(
   val => {
     if (ourLatest !== val?.latest) {
       // if ourLatest is not set, do not emit. This mimics the current v2 behaviour where the initial content does not generate an event
-      if (ourLatest) emit('selected', val?.latest);
+      // However, if there was no initial selection (selectedIndex=-1), we should emit on first click
+      if (ourLatest || (val?.latest && hadInitialSelection === false))
+        emit('selected', val?.latest);
       ourLatest = val?.latest;
     }
   },

package/src/components/CvDropdown/CvDropdown.vue

@@ -36,8 +36,9 @@
           `${carbonPrefix}--label`,
           { [`${carbonPrefix}--label--disabled`]: disabled },
         ]"
-        >{{ label }}</label
       >
+        {{ label }}
+      </label>
 
       <div
         ref="listBox"
@@ -110,7 +111,10 @@
           ref="dropList"
           :aria-hidden="!open ? 'true' : 'false'"
           :aria-labelledby="`${uid}-label`"
-          :class="`${carbonPrefix}--list-box__menu`"
+          :class="[
+            `${carbonPrefix}--list-box__menu`,
+            { 'cv-dropdown__menu--transition-done': transitionDone },
+          ]"
           role="menu"
           tabindex="-1"
         >
@@ -268,6 +272,7 @@ provide('dropdown-caption', dataCaption);
 const itemsList = ref([]);
 provide('dropdown-items', itemsList);
 const open = ref(false);
+const transitionDone = ref(false);
 const data = reactive({
   isHelper: false,
   isInvalid: undefined,
@@ -301,6 +306,15 @@ watch(dataValue, () => {
 });
 watch(open, () => {
   focusItem.value = '';
+  if (open.value) {
+    // Wait for the transition to complete before allowing overflow
+    transitionDone.value = false;
+    setTimeout(() => {
+      transitionDone.value = true;
+    }, 200); // Increase delay to ensure animation completes
+  } else {
+    transitionDone.value = false;
+  }
 });
 const ariaLabeledBy = computed(() => {
   if (props.label) {
@@ -432,3 +446,13 @@ function onClick(ev) {
   }
 }
 </script>
+
+<style lang="scss">
+.bx--list-box .bx--list-box__menu {
+  overflow-y: hidden !important;
+}
+
+.bx--list-box--expanded .bx--list-box__menu.cv-dropdown__menu--transition-done {
+  overflow-y: auto !important;
+}
+</style>

package/src/components/CvOverflowMenu/CvOverflowMenu.vue

@@ -229,7 +229,8 @@ function doFocus() {
         !(
           tryOn.classList.contains('cv-overflow-menu__before-content') ||
           tryOn.classList.contains('cv-overflow-menu__after-content') ||
-          tryOn.tabindex < 0
+          tryOn.tabindex < 0 ||
+          tryOn.disabled
         )
       ) {
         focusOn = tryOn;

package/src/components/CvTabs/CvTabs.vue

@@ -11,14 +11,16 @@
         },
       ]"
       role="navigation"
-      v-bind="$attrs"
+      :aria-label="attrs['aria-label'] || 'Tabs'"
+      v-bind="attrsWithoutAriaLabel"
       @keydown.right.prevent.stop="onRight"
       @keydown.left.prevent.stop="onLeft"
     >
       <button
         ref="elLeftOverflow"
-        aria-hidden="true"
-        aria-label="scroll left"
+        :aria-label="
+          leftOverflowNavButtonHidden ? undefined : 'Scroll tabs left'
+        "
         :class="[
           {
             [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
@@ -26,7 +28,7 @@
               leftOverflowNavButtonHidden,
           },
         ]"
-        tabIndex="-1"
+        :tabIndex="leftOverflowNavButtonHidden ? -1 : 0"
         type="button"
         @click.stop.prevent="e => onOverflowClick(e, { direction: -1 })"
         @mousedown.stop.prevent="e => onOverflowMouseDown(e, { direction: -1 })"
@@ -89,8 +91,9 @@
       />
       <button
         ref="elRightOverflow"
-        aria-hidden="true"
-        aria-label="scroll right"
+        :aria-label="
+          rightOverflowNavButtonHidden ? undefined : 'Scroll tabs right'
+        "
         :class="[
           {
             [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
@@ -98,7 +101,7 @@
               rightOverflowNavButtonHidden,
           },
         ]"
-        tabIndex="-1"
+        :tabIndex="rightOverflowNavButtonHidden ? -1 : 0"
         type="button"
         @click="e => onOverflowClick(e, { direction: 1 })"
         @mousedown="e => onOverflowMouseDown(e, { direction: 1 })"
@@ -117,15 +120,21 @@
 import { carbonPrefix } from '../../global/settings';
 import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-vue';
 import {
+  computed,
   nextTick,
   onBeforeUnmount,
   onMounted,
   onUpdated,
   provide,
   ref,
+  useAttrs,
   watch,
 } from 'vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const OVERFLOW_BUTTON_OFFSET = 40;
 
 const props = defineProps({
@@ -152,6 +161,12 @@ const props = defineProps({
 });
 const emit = defineEmits(['tab-selected', 'tab-selected-id']);
 
+const attrs = useAttrs();
+const attrsWithoutAriaLabel = computed(() => {
+  const { 'aria-label': _, ...rest } = attrs;
+  return rest;
+});
+
 const selectedId = ref('');
 provide('tab-selected', selectedId);
 /**

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

@@ -1,8 +1,8 @@
 // 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">
+<div class="cv-tabs" style="width: 100%;">
+  <div data-tabs="" class="cv-tab bx--tabs--scrollable ABC-class-123" role="navigation" aria-label="ABC-aria-label-123"><button 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-->
@@ -11,7 +11,7 @@ exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
       <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-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-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">
+    <!--v-if--><button 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>

package/src/components/CvUIShell/CvSideNav.vue

@@ -13,8 +13,8 @@
         [`${carbonPrefix}--side-nav--ux`]: isChildOfHeader,
       },
     ]"
-    :aria-hidden="!panelExpanded && !fixed ? 'true' : 'false'"
-    :inert="!panelExpanded && !fixed"
+    :aria-hidden="isHidden ? 'true' : 'false'"
+    :inert="isHidden"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
     @mouseenter="onHoverToggle(true)"
@@ -79,6 +79,9 @@ const panelExpanded = computed({
     data.dataExpanded = val;
   },
 });
+const isHidden = computed(() => {
+  return !panelExpanded.value && !props.fixed && !props.rail;
+});
 /**
  * @type {CvHeaderPanel}
  */