@carbon/vue 3.0.30 → 3.0.31

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.29",
+  "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.30",
+  "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/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}
  */