@mozaic-ds/vue 2.17.0 → 2.19.0

package/src/components/accordionlistitem/MAccordionListItem.spec.ts

@@ -82,15 +82,34 @@ describe('MAccordionListItem', () => {
     expect(button.attributes('aria-expanded')).toBe('true');
   });
 
-  it('sets aria-hidden correctly for content', async () => {
+  it('sets inert correctly for content', async () => {
     const { wrapper, state } = mountItem({ id: 'item-1', title: 'Title' }, []);
 
     const content = wrapper.find('.mc-accordion__content');
-    expect(content.attributes('aria-hidden')).toBe('true');
+    expect(content.attributes('inert')).not.toBeUndefined();
 
     state.value.push('item-1');
     await wrapper.vm.$nextTick();
-    expect(content.attributes('aria-hidden')).toBe('false');
+    expect(content.attributes('inert')).toBeUndefined();
+  });
+
+  it('renders heading with default level h2', () => {
+    const { wrapper } = mountItem({ id: '1', title: 'Title' });
+    expect(wrapper.find('h2.mc-accordion__title').exists()).toBe(true);
+  });
+
+  it('renders heading with custom headingLevel prop', () => {
+    const wrapper = mount(MAccordionListItem, {
+      props: { id: '1', title: 'Title', tag: 'h3' },
+      global: {
+        provide: {
+          [AccordionStateKey as symbol]: ref([]),
+          [AccordionToggleFnKey as symbol]: vi.fn(),
+        },
+      },
+    });
+    expect(wrapper.find('h3.mc-accordion__title').exists()).toBe(true);
+    expect(wrapper.find('h2').exists()).toBe(false);
   });
 
   it('calls toggleItem when button is clicked', async () => {

package/src/components/accordionlistitem/MAccordionListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mc-accordion__item">
     <div class="mc-accordion__header">
-      <h2 class="mc-accordion__title">
+      <component :is="tag" class="mc-accordion__title">
         <button
           :id="`accordion-${id}`"
           class="mc-accordion__trigger"
@@ -19,12 +19,12 @@
             </span>
           </div>
         </button>
-      </h2>
+      </component>
     </div>
     <div
       :id="`content-${id}`"
       class="mc-accordion__content"
-      :aria-hidden="!open"
+      :inert="!open || undefined"
       :aria-labelledby="`accordion-${id}`"
       role="region"
     >
@@ -49,31 +49,41 @@ import {
   AccordionToggleFnKey,
 } from '../accordionlist/m-accordion-list.const';
 
-const props = defineProps<{
-  /**
-   * A unique identifier for the accordion item.
-   * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
-   * ensuring accessibility and tracking the open/closed state.
-   * If no ID is provided, a unique one is generated automatically.
-   */
-  id: string;
-  /**
-   * The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content.
-   */
-  title: string;
-  /**
-   * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
-   */
-  subtitle?: string;
-  /**
-   * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
-   */
-  content?: string;
-  /**
-   * Icon component to display before the item title.
-   */
-  icon?: Component;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the accordion item.
+     * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
+     * ensuring accessibility and tracking the open/closed state.
+     * If no ID is provided, a unique one is generated automatically.
+     */
+    id: string;
+    /**
+     * The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content.
+     */
+    title: string;
+    /**
+     * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
+     */
+    subtitle?: string;
+    /**
+     * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
+     */
+    content?: string;
+    /**
+     * Icon component to display before the item title.
+     */
+    icon?: Component;
+    /**
+     * Heading level for the accordion trigger (h2–h6). Adjust to match the
+     * heading hierarchy of the page where the accordion is used.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  }>(),
+  {
+    tag: 'h2',
+  },
+);
 
 defineSlots<{
   /**

package/src/components/actionlistbox/MActionListbox.spec.ts

@@ -135,4 +135,103 @@ describe('MActionListbox', () => {
     await actions[1].trigger('click');
     expect(wrapper.emitted('action')?.[1][0]).toBe('move');
   });
+
+  it('has role="menu" on the list and role="menuitem" on each button', () => {
+    const wrapper = mountComponent();
+    expect(wrapper.find('ul.mc-action-list').attributes('role')).toBe('menu');
+    const menuItems = wrapper.findAll('button[role="menuitem"]');
+    expect(menuItems.length).toBe(items.length);
+  });
+
+  describe('keyboard navigation', () => {
+    function mountAttached(props = {}) {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      const wrapper = mount(MActionListbox, {
+        props: { items, ...props },
+        attachTo: div,
+        global: { components: { MDivider, MIconButton, Cross24 } },
+      });
+      return wrapper;
+    }
+
+    it('ArrowDown moves focus to the next item', async () => {
+      const wrapper = mountAttached();
+      const buttons = wrapper.findAll('button[role="menuitem"]');
+      await buttons[0].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'ArrowDown' });
+      expect(document.activeElement).toBe(buttons[1].element);
+      wrapper.unmount();
+    });
+
+    it('ArrowDown wraps from last to first item', async () => {
+      const wrapper = mountAttached();
+      const buttons = wrapper.findAll('button[role="menuitem"]');
+      await buttons[buttons.length - 1].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'ArrowDown' });
+      expect(document.activeElement).toBe(buttons[0].element);
+      wrapper.unmount();
+    });
+
+    it('ArrowUp moves focus to the previous item', async () => {
+      const wrapper = mountAttached();
+      const buttons = wrapper.findAll('button[role="menuitem"]');
+      await buttons[1].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'ArrowUp' });
+      expect(document.activeElement).toBe(buttons[0].element);
+      wrapper.unmount();
+    });
+
+    it('ArrowUp wraps from first to last item', async () => {
+      const wrapper = mountAttached();
+      const buttons = wrapper.findAll('button[role="menuitem"]');
+      await buttons[0].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'ArrowUp' });
+      expect(document.activeElement).toBe(buttons[buttons.length - 1].element);
+      wrapper.unmount();
+    });
+
+    it('Home moves focus to the first item', async () => {
+      const wrapper = mountAttached();
+      const buttons = wrapper.findAll('button[role="menuitem"]');
+      await buttons[2].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'Home' });
+      expect(document.activeElement).toBe(buttons[0].element);
+      wrapper.unmount();
+    });
+
+    it('End moves focus to the last item', async () => {
+      const wrapper = mountAttached();
+      const buttons = wrapper.findAll('button[role="menuitem"]');
+      await buttons[0].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'End' });
+      expect(document.activeElement).toBe(buttons[buttons.length - 1].element);
+      wrapper.unmount();
+    });
+
+    it('Escape emits "close"', async () => {
+      const wrapper = mountAttached();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'Escape' });
+      expect(wrapper.emitted('close')).toBeTruthy();
+      wrapper.unmount();
+    });
+
+    it('disabled items are skipped during ArrowDown navigation', async () => {
+      const itemsWithDisabled = [
+        { label: 'First' },
+        { label: 'Disabled', disabled: true },
+        { label: 'Third' },
+      ];
+      const wrapper = mount(MActionListbox, {
+        props: { items: itemsWithDisabled },
+        attachTo: document.body,
+        global: { components: { MDivider, MIconButton, Cross24 } },
+      });
+      const enabledButtons = wrapper.findAll('button[role="menuitem"]:not([disabled])');
+      await enabledButtons[0].element.focus();
+      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'ArrowDown' });
+      expect(document.activeElement).toBe(enabledButtons[1].element);
+      wrapper.unmount();
+    });
+  });
 });

package/src/components/actionlistbox/MActionListbox.vue

@@ -9,9 +9,10 @@
       ref="popover"
       class="mc-listbox__content"
       v-bind="$slots.activator ? { id, popover: '' } : {}"
+      @toggle="onPopoverToggle"
     >
       <div class="mc-listbox__header">
-        <h3 v-if="title" class="mc-listbox__title">{{ title }}</h3>
+        <h3 v-if="title" :id="`${id}-title`" class="mc-listbox__title">{{ title }}</h3>
         <MIconButton
           class="mc-listbox__close"
           ghost
@@ -24,7 +25,15 @@
         </MIconButton>
       </div>
       <div class="mc-listbox__body">
-        <ul class="mc-action-list" role="menu">
+        <ul
+          ref="menuEl"
+          class="mc-action-list"
+          role="menu"
+          tabindex="-1"
+          :aria-label="title || undefined"
+          :aria-labelledby="title ? `${id}-title` : undefined"
+          @keydown="onMenuKeydown"
+        >
           <template v-for="(item, index) in items" :key="`item-${index}`">
             <MDivider
               v-if="item.divider"
@@ -35,22 +44,24 @@
               :class="[
                 'mc-action-list__element',
                 {
-                  'mc-action-list__element--danger':
-                    item.appearance === 'danger',
+                  'mc-action-list__element--danger': item.appearance === 'danger',
                   'mc-action-list__element--disabled': item.disabled,
                 },
               ]"
-              role="menuitem"
+              role="presentation"
             >
               <button
                 type="button"
+                role="menuitem"
                 class="mc-action-list__button"
+                :disabled="item.disabled || undefined"
                 @click="emit('action', item?.id || index)"
               >
                 <component
                   v-if="item.icon"
                   class="mc-action-list__icon"
                   :is="item.icon"
+                  aria-hidden="true"
                 />
                 <p class="mc-action-list__text">{{ item.label }}</p>
               </button>
@@ -65,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import { useId, useTemplateRef, type Component, type VNode } from 'vue';
+import { nextTick, useId, useTemplateRef, type Component, type VNode } from 'vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MDivider from '../divider/MDivider.vue';
 import { Cross24 } from '@mozaic-ds/icons-vue';
@@ -137,8 +148,44 @@ const slots = defineSlots<{
 }>();
 
 const id = useId();
-
 const popover = useTemplateRef('popover');
+const menuEl = useTemplateRef('menuEl');
+
+function getMenuItems(): HTMLButtonElement[] {
+  return Array.from(
+    menuEl.value?.querySelectorAll<HTMLButtonElement>('button[role="menuitem"]:not(:disabled)') ?? [],
+  );
+}
+
+function onMenuKeydown(e: KeyboardEvent) {
+  const items = getMenuItems();
+  if (!items.length) return;
+  const current = items.findIndex((el) => el === document.activeElement);
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    items[(current + 1) % items.length].focus();
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    items[(current - 1 + items.length) % items.length].focus();
+  } else if (e.key === 'Home') {
+    e.preventDefault();
+    items[0].focus();
+  } else if (e.key === 'End') {
+    e.preventDefault();
+    items[items.length - 1].focus();
+  } else if (e.key === 'Escape') {
+    close();
+  }
+}
+
+function onPopoverToggle(e: ToggleEvent) {
+  if (e.newState === 'open') {
+    nextTick(() => getMenuItems()[0]?.focus());
+  } else {
+    document.querySelector<HTMLElement>(`[popovertarget="${id}"]`)?.focus();
+  }
+}
 
 function close() {
   emit('close');

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="mc-breadcrumb" :class="classObject">
+  <nav class="mc-breadcrumb" :class="classObject" aria-label="Breadcrumb">
     <ul class="mc-breadcrumb__container">
       <li
         class="mc-breadcrumb__item"

package/src/components/builtinmenu/MBuiltInMenu.spec.ts

@@ -86,7 +86,9 @@ describe('MBuiltInMenu', () => {
     });
     const lis = wrapper.findAll('li');
     const selectedItem = lis[2];
-    expect(selectedItem.attributes('aria-current')).toBe('true');
+    // aria-current is on the interactive element, not the <li> container
+    const interactiveEl = selectedItem.find('button, a');
+    expect(interactiveEl.attributes('aria-current')).toBe('true');
     expect(selectedItem.classes()).toContain(
       'mc-built-in-menu__item--selected',
     );
@@ -108,4 +110,31 @@ describe('MBuiltInMenu', () => {
       'mc-built-in-menu--outlined',
     );
   });
+
+  it('uses default aria-label "Menu" on nav when label prop is not provided', () => {
+    const wrapper = mount(MBuiltInMenu, { props: { items } });
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Menu');
+  });
+
+  it('uses custom label prop as aria-label on nav', () => {
+    const wrapper = mount(MBuiltInMenu, {
+      props: { items, label: 'Settings navigation' },
+    });
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Settings navigation');
+  });
+
+  it('sets aria-hidden on ChevronRight and item icons', () => {
+    const wrapper = mount(MBuiltInMenu, { props: { items } });
+    // All SVG icons inside items should be aria-hidden
+    const ariaHiddenIcons = wrapper.findAll('[aria-hidden="true"]');
+    expect(ariaHiddenIcons.length).toBeGreaterThan(0);
+  });
+
+  it('does not put aria-current on the <li>, only on the interactive element', () => {
+    const wrapper = mount(MBuiltInMenu, { props: { items, modelValue: 0 } });
+    const li = wrapper.findAll('li')[0];
+    expect(li.attributes('aria-current')).toBeUndefined();
+    const interactive = li.find('button, a');
+    expect(interactive.attributes('aria-current')).toBe('true');
+  });
 });

package/src/components/builtinmenu/MBuiltInMenu.vue

@@ -4,7 +4,7 @@
       'mc-built-in-menu': true,
       'mc-built-in-menu--outlined': props.outlined,
     }"
-    aria-label="menu"
+    :aria-label="props.label"
   >
     <ul class="mc-built-in-menu__list">
       <li
@@ -14,7 +14,6 @@
           'mc-built-in-menu__item': true,
           'mc-built-in-menu__item--selected': currentMenuItem === index,
         }"
-        v-bind="currentMenuItem === index ? { 'aria-current': true } : {}"
       >
         <component
           :is="getItemTag(item)"
@@ -23,17 +22,19 @@
             'mc-built-in-menu__link': isLink(item),
           }"
           v-bind="isLink(item) ? getLinkAttrs(item) : {}"
+          :aria-current="currentMenuItem === index ? true : undefined"
           @click="currentMenuItem = index"
         >
           <component
             v-if="item.icon"
             :is="item.icon"
             class="mc-built-in-menu__icon"
+            aria-hidden="true"
           />
 
           <span class="mc-built-in-menu__label">{{ item.label }}</span>
 
-          <ChevronRight20 class="mc-built-in-menu__icon" />
+          <ChevronRight20 class="mc-built-in-menu__icon" aria-hidden="true" />
         </component>
       </li>
     </ul>
@@ -56,20 +57,28 @@ export type MenuItem = {
   target?: '_self' | '_blank' | '_parent' | '_top';
 };
 
-const props = defineProps<{
-  /**
-   * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
-   */
-  modelValue?: number;
-  /**
-   * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
-   */
-  items: MenuItem[];
-  /**
-   * When enabled, adds a visible border around the wrapper to highlight or separate its content.
-   */
-  outlined?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+     */
+    modelValue?: number;
+    /**
+     * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
+     */
+    items: MenuItem[];
+    /**
+     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+     */
+    outlined?: boolean;
+    /**
+     * Accessible label for the navigation landmark. Should describe the purpose
+     * of this menu to distinguish it from other navigations on the page.
+     */
+    label?: string;
+  }>(),
+  { label: 'Menu' },
+);
 
 const emit = defineEmits<{
   /**

package/src/components/builtinmenu/README.md

@@ -10,6 +10,8 @@ A built-in menu is a structured list of navigational or interactive options, typ
 | `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
 | `items*` | Defines the menu items, each of which can include an icon and act as a button, link, or router-link. | `MenuItem[]` | - |
 | `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+| `label` | Accessible label for the navigation landmark. Should describe the purpose
+of this menu to distinguish it from other navigations on the page. | `string` | `"Menu"` |
 
 ## Events
 

package/src/components/button/MButton.spec.ts

@@ -188,4 +188,30 @@ describe('MButton component', () => {
     expect(label.exists()).toBe(true);
     expect(label.text()).toBe('Normal Button');
   });
+
+  it('sets aria-busy="true" when isLoading is true', () => {
+    const wrapper = mount(MButton, {
+      props: { isLoading: true },
+      slots: { default: 'Loading' },
+    });
+    expect(wrapper.find('button').attributes('aria-busy')).toBe('true');
+  });
+
+  it('does not set aria-busy when isLoading is false', () => {
+    const wrapper = mount(MButton, {
+      props: { isLoading: false },
+      slots: { default: 'Normal' },
+    });
+    expect(wrapper.find('button').attributes('aria-busy')).toBeUndefined();
+  });
+
+  it('sets aria-hidden on the loader wrapper', () => {
+    const wrapper = mount(MButton, {
+      props: { isLoading: true },
+      slots: { default: 'Loading' },
+    });
+    const loaderWrapper = wrapper.find('.mc-button__icon[aria-hidden]');
+    expect(loaderWrapper.exists()).toBe(true);
+    expect(loaderWrapper.attributes('aria-hidden')).toBe('true');
+  });
 });

package/src/components/button/MButton.vue

@@ -4,6 +4,7 @@
     :class="classObject"
     :disabled="disabled"
     :type="type"
+    :aria-busy="isLoading || undefined"
   >
     <span
       v-if="$slots.icon && iconPosition == 'left' && !isLoading"
@@ -15,6 +16,7 @@
       v-if="isLoading"
       class="mc-button__icon"
       :style="{ position: 'absolute' }"
+      aria-hidden="true"
     >
       <MLoader :style="{ color: 'currentColor' }" size="s" />
     </span>

package/src/components/callout/MCallout.spec.ts

@@ -97,4 +97,39 @@ describe('MCallout.vue', () => {
 
     expect(wrapper.find('.mc-callout__footer').exists()).toBe(false);
   });
+
+  it('renders title with default tag prop (h2)', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc' },
+    });
+    expect(wrapper.find('h2.mc-callout__title').exists()).toBe(true);
+  });
+
+  it('renders title with custom tag prop', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc', tag: 'h3' },
+    });
+    expect(wrapper.find('h3.mc-callout__title').exists()).toBe(true);
+    expect(wrapper.find('h2').exists()).toBe(false);
+  });
+
+  it('has aria-labelledby pointing to the title', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc' },
+    });
+    const section = wrapper.find('section');
+    const titleId = wrapper.find('.mc-callout__title').attributes('id');
+    expect(titleId).toBeDefined();
+    expect(section.attributes('aria-labelledby')).toBe(titleId);
+  });
+
+  it('sets aria-hidden on the icon wrapper', () => {
+    const wrapper = mount(MCallout, {
+      props: { title: 'Title', description: 'Desc' },
+      slots: { icon: '<svg class="icon" />' },
+    });
+    expect(wrapper.find('.mc-callout__icon').attributes('aria-hidden')).toBe(
+      'true',
+    );
+  });
 });

package/src/components/callout/MCallout.stories.ts

@@ -18,9 +18,6 @@ const meta: Meta<typeof MCallout> = {
   },
   args: {
     icon: '<ImageAlt32 aria-hidden="true" />',
-    title:
-      'This is a title, be concise and use the description message to give details.',
-    description: 'Description message.',
   },
   render: (args) => ({
     components: { MCallout, MButton, MLink, ArrowNext20, ImageAlt32 },

package/src/components/callout/MCallout.vue

@@ -1,12 +1,23 @@
 <template>
-  <section class="mc-callout" role="status" :class="classObject">
-    <div class="mc-callout__icon">
+  <section
+    class="mc-callout"
+    role="status"
+    :class="classObject"
+    :aria-labelledby="`callout-title-${id}`"
+  >
+    <div class="mc-callout__icon" aria-hidden="true">
       <slot name="icon" />
     </div>
     <div class="mc-callout__content">
-      <h2 class="mc-callout__title">{{ title }}</h2>
+      <component
+        v-if="title"
+        :is="props.tag"
+        :id="`callout-title-${id}`"
+        class="mc-callout__title"
+        >{{ title }}</component
+      >
 
-      <p class="mc-callout__message">
+      <p v-if="description" class="mc-callout__message">
         {{ description }}
       </p>
 
@@ -18,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type VNode } from 'vue';
+import { computed, useId, type VNode } from 'vue';
 /**
  * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
  */
@@ -27,21 +38,29 @@ const props = withDefaults(
     /**
      * Title of the callout.
      */
-    title: string;
+    title?: string;
     /**
      * Description of the callout.
      */
-    description: string;
+    description?: string;
     /**
      * Allows to define the callout appearance.
      */
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
+    /**
+     * Heading level for the callout title (h2–h6). Adjust to match the
+     * heading hierarchy of the page where the callout is used.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   }>(),
   {
     appearance: 'standard',
+    tag: 'h2',
   },
 );
 
+const id = useId();
+
 defineSlots<{
   /**
    * Use this slot to insert an icon.

package/src/components/callout/README.md

@@ -7,9 +7,11 @@ A callout is used to highlight additional information that can assist users with
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `title*` | Title of the callout. | `string` | - |
-| `description*` | Description of the callout. | `string` | - |
+| `title` | Title of the callout. | `string` | - |
+| `description` | Description of the callout. | `string` | - |
 | `appearance` | Allows to define the callout appearance. | `"standard"` `"inverse"` `"accent"` `"tips"` | `"standard"` |
+| `tag` | Heading level for the callout title (h2–h6). Adjust to match the
+heading hierarchy of the page where the callout is used. | `"h2"` `"h1"` `"h3"` `"h4"` `"h5"` `"h6"` | `"h2"` |
 
 ## Slots