@carbon/vue 3.0.9 → 3.0.11

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">

package/src/components/CvTooltip/CvInteractiveTooltip.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="cv-interactive-tooltip" ref="root">
+  <div ref="root" class="cv-interactive-tooltip">
     <div :id="`${cvId}-label`" :class="`${carbonPrefix}--tooltip__label`">
       <slot name="label"></slot>
 
       <button
+        ref="trigger"
         :aria-expanded="dataVisible ? 'true' : 'false'"
         :aria-labelledby="`${cvId}-label`"
         :class="`${carbonPrefix}--tooltip__trigger`"
         :aria-controls="`${cvId}`"
         aria-haspopup="true"
-        ref="trigger"
         type="button"
         @click="toggle(dataVisible)"
         @keydown.tab="onTriggerTab"
@@ -23,7 +23,8 @@
 
     <div
       :id="cvId"
-      :aria-hidden="!dataVisible"
+      ref="popup"
+      :aria-hidden="`${!dataVisible}`"
       :data-floating-menu-direction="direction"
       :class="[
         `${carbonPrefix}--tooltip`,
@@ -33,18 +34,17 @@
           [`${carbonPrefix}--tooltip--align-${alignment}`]: alignment,
         },
       ]"
-      ref="popup"
       role="dialog"
       :aria-describedby="`${cvId}-body`"
       :aria-labelledby="`${cvId}-label`"
-      @focusout="checkFocusOut"
       :style="{ left: left + 'px', top: top + 'px' }"
       tabindex="-1"
+      @focusout="checkFocusOut"
       @mousedown.prevent="preventFocusOut"
     >
       <div
-        class="cv-interactive-tooltip__before-content"
         ref="beforeContent"
+        class="cv-interactive-tooltip__before-content"
         tabindex="0"
         style="position: absolute; left: -9999px; width: 1px; height: 1px"
         @focus="focusBeforeContent"
@@ -54,8 +54,8 @@
         <slot name="content"></slot>
       </div>
       <div
-        class="cv-interactive-tooltip__after-content"
         ref="afterContent"
+        class="cv-interactive-tooltip__after-content"
         tabindex="0"
         style="position: absolute; left: -9999px; width: 1px; height: 1px"
         @focus="focusAfterContent"

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

@@ -1,44 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment and direction set as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`center\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`end\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-end" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-end" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`start\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-start" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-start" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with direction set to \`bottom\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip with direction set to \`top\` as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 
 exports[`CvDefinitionTooltip should render definition tooltip: minimal as expected 1`] = `
-<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
-  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+<div id="test-1" class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div id="test-1-label" class="bx--assistive-text" role="tooltip">Brief description of the dotted, underlined term</div>
 </div>
 `;
 

package/src/components/CvUIShell/CvHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header :class="`cv-header ${carbonPrefix}--header`" data-header :id="uid">
+  <header :id="uid" :class="`cv-header ${carbonPrefix}--header`" data-header>
     <slot />
     <div v-if="hasGlobalHeader" :class="`${carbonPrefix}--header__global`">
       <slot name="header-global" />

package/src/components/CvUIShell/CvHeaderGlobalAction.vue

@@ -1,5 +1,7 @@
 <template>
   <cv-icon-button
+    :id="uid"
+    ref="el"
     :class="[
       `cv-header-global-action`,
       `${carbonPrefix}--header__action`,
@@ -9,15 +11,13 @@
     aria-haspopup="true"
     :aria-controls="ariaControls"
     :aria-expanded="active ? 'true' : 'false'"
+    :label="label"
+    :tip-alignment="tipAlignment"
+    :tip-position="tipPosition"
     @click="gaToggle"
     @focusout="gaFocusout"
-    :id="uid"
-    :label="label"
-    :tipAlignment="tipAlignment"
-    :tipPosition="tipPosition"
-    ref="el"
   >
-    <template v-slot:icon>
+    <template #icon>
       <slot />
     </template>
   </cv-icon-button>
@@ -39,7 +39,7 @@ import CvIconButton from '../CvButton/CvIconButton.vue';
 
 const props = defineProps({
   active: { type: Boolean, default: false },
-  ariaControls: { type: String },
+  ariaControls: { type: String, default: undefined },
   label: { type: String, default: undefined },
   tipPosition: {
     type: String,

package/src/components/CvUIShell/CvHeaderMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <li
+    ref="el"
     :class="`cv-header-menu ${carbonPrefix}--header__submenu`"
     @mouseenter="doHoverToggle(true)"
     @mouseleave="doHoverToggle(false)"
-    ref="el"
   >
     <a
       aria-haspopup="true"
@@ -26,11 +26,11 @@
       />
     </a>
     <ul
+      ref="menu"
       :aria-label="$attrs.ariaLabel"
       :aria-labelledby="$attrs.ariaLabelledBy"
       :class="`${carbonPrefix}--header__menu`"
       role="menu"
-      ref="menu"
       @focusout="onFocusout"
     >
       <slot></slot>
@@ -44,7 +44,7 @@ import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
 import { reactive, ref } from 'vue';
 
 const props = defineProps({
-  title: String,
+  title: { type: String, default: undefined },
   hoverToggle: { type: Boolean, default: true },
 });
 const data = reactive({

package/src/components/CvUIShell/CvHeaderMenuButton.vue

@@ -1,5 +1,7 @@
 <template>
   <button
+    :id="uid"
+    ref="el"
     class="cv-header-menu-button"
     :class="[
       `${carbonPrefix}--header__action`,
@@ -16,8 +18,6 @@
     :aria-expanded="active ? 'true' : 'false'"
     @click="gaToggle"
     @focusout="gaFocusout"
-    :id="uid"
-    ref="el"
   >
     <close20 v-if="dataActive" />
     <menu20 v-if="!dataActive" />

package/src/components/CvUIShell/CvHeaderMenuItem.vue

@@ -24,8 +24,8 @@ import { computed } from 'vue';
 
 const props = defineProps({
   active: Boolean,
-  ariaCurrent: String,
-  role: String,
+  ariaCurrent: { type: String, default: undefined },
+  role: { type: String, default: undefined },
   ...propsLink,
 });
 

package/src/components/CvUIShell/CvHeaderName.vue

@@ -16,7 +16,7 @@ import { carbonPrefix } from '../../global/settings';
 import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
 
 const props = defineProps({
-  prefix: String,
+  prefix: { type: String, default: undefined },
   ...propsLink,
 });
 

package/src/components/CvUIShell/CvHeaderNav.vue

@@ -13,6 +13,6 @@
 <script setup>
 import { carbonPrefix } from '../../global/settings';
 defineProps({
-  ariaLabelledBy: String,
+  ariaLabelledBy: { type: String, default: undefined },
 });
 </script>

package/src/components/CvUIShell/CvHeaderPanel.vue

@@ -1,15 +1,15 @@
 <template>
   <div
+    :id="id"
+    ref="el"
     :class="[
       `cv-header-panel`,
       `${carbonPrefix}--header-panel`,
       { [`${carbonPrefix}--header-panel--expanded`]: panelExpanded },
     ]"
     :aria-hidden="!panelExpanded ? 'true' : 'false'"
-    :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
-    ref="el"
   >
     <slot></slot>
   </div>
@@ -39,6 +39,7 @@ const props = defineProps({
       }
       return true;
     },
+    default: undefined,
   },
   expanded: Boolean,
   id: { type: String, required: true },