@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/accordionlist/MAccordionList.figma.ts

@@ -0,0 +1,43 @@
+/**
+ * Code Connect mapping for MAccordionList
+ * Links Figma Accordion List to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1647%3A16440',
+  {
+    props: {
+      appearance: figma.enum('Appareance', {
+        Standard: 'standard',
+        Ghost: 'ghost',
+      }),
+      showItem02: figma.boolean('Show Item 02'),
+      showItem03: figma.boolean('Show Item 03'),
+      showItem04: figma.boolean('Show Item 04'),
+      showItem05: figma.boolean('Show Item 05'),
+      showItem06: figma.boolean('Show Item 06'),
+      showItem07: figma.boolean('Show Item 07'),
+      showItem08: figma.boolean('Show Item 08'),
+    },
+    example: ({ appearance }) =>
+      html`<script setup>
+        import { MAccordionList, MAccordionListItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MAccordionList appearance=${appearance}>
+        <MAccordionListItem id="1" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+        <MAccordionListItem id="2" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+        <MAccordionListItem id="3" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+        <MAccordionListItem id="4" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+      </MAccordionList>`,
+  },
+);

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

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MAccordionListItem
+ * Links Figma Accordion List Item to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/branch/tOAc8mV1PF5g0tjBfSbUXA/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1647%3A16442',
+  {
+    props: {
+      title: figma.string('Title'),
+      subtitle: figma.boolean('Has subtitle', {
+        true: figma.string('Subtitle'),
+        false: undefined,
+      }),
+    },
+    example: ({ title, subtitle }) =>
+      html`<script setup>
+        import { MAccordionListItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MAccordionListItem id="accordion-1" title=${title} subtitle=${subtitle}>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+      </MAccordionListItem>`,
+    imports: ["import { MAccordionListItem } from '@mozaic-ds/vue'"],
+  },
+);

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/actionbottombar/MActionBottomBar.figma.ts

@@ -0,0 +1,24 @@
+/**
+ * Code Connect mapping for MActionBottomBar
+ * Links Figma Action bottom bar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=10709-6937',
+  {
+    props: {
+      shadow: figma.boolean('Has shadow'),
+    },
+    example: ({ shadow }) =>
+      html`<script setup>
+        import { MActionBottomBar, MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MActionBottomBar shadow=${shadow}>
+        <template #right>
+          <MButton size="s" appearance="accent">Save</MButton>
+        </template>
+      </MActionBottomBar>`,
+  },
+);

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

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MActionListbox
+ * Links Figma Action listbox (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29046',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MActionListbox, MButton } from '@mozaic-ds/vue';
+        import { Copy20, Download20, Trash20 } from '@mozaic-ds/icons-vue';
+      </script>
+
+      <MActionListbox
+        title="Listbox title"
+        :items="[
+          { id: '1', label: 'Duplicate', icon: Copy20 },
+          { id: '2', label: 'Download', icon: Download20 },
+          { id: '3', label: 'Delete', icon: Trash20, appearance: 'danger', divider: true },
+        ]"
+      >
+        <template #activator="{ id }">
+          <MButton :popovertarget="id">Open menu</MButton>
+        </template>
+      </MActionListbox>`,
+  },
+);

package/src/components/avatar/MAvatar.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MAvatar
+ * Links Figma Avatar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6412',
+  {
+    props: {
+      size: figma.enum('Size', {
+        'S (32px)': 's',
+        'M (48px)': 'm',
+        'L (64px)': 'l',
+      }),
+      type: figma.enum('Type', {
+        Picture: 'picture',
+        Initials: 'initials',
+        Icon: 'icon',
+      }),
+    },
+    example: ({ size }) =>
+      html`<script setup>
+        import { MAvatar } from '@mozaic-ds/vue';
+      </script>
+
+      <MAvatar size=${size}>
+        <img src="/placeholder.png" alt="Avatar" />
+      </MAvatar>`,
+  },
+);

package/src/components/breadcrumb/MBreadcrumb.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MBreadcrumb
+ * Links Figma Breadcrumb (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11237',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        'Inverse (only on dark background)': 'inverse',
+      }),
+    },
+    example: ({ appearance }) =>
+      html`<script setup>
+        import { MBreadcrumb } from '@mozaic-ds/vue';
+      </script>
+
+      <MBreadcrumb
+        appearance=${appearance}
+        :links="[
+          { label: 'Home', href: '#' },
+          { label: 'Level 01', href: '#' },
+          { label: 'Current Page', href: '#' },
+        ]"
+        aria-label="breadcrumb"
+      ></MBreadcrumb>`,
+  },
+);

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

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MBuiltInMenu
+ * Links Figma Built-in menu (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11260',
+  {
+    props: {
+      outlined: figma.enum('is outlined', {
+        'true': true,
+        'false': false,
+      }),
+    },
+    example: ({ outlined }) =>
+      html`<script setup>
+        import { MBuiltInMenu } from '@mozaic-ds/vue';
+      </script>
+
+      <MBuiltInMenu :items="[{ label: 'Label' }, { label: 'Label' }]" outlined=${outlined} />`,
+  },
+);

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.figma.ts

@@ -0,0 +1,41 @@
+/**
+ * Code Connect mapping for MButton
+ * Links Figma Button to @mozaic-ds/vue
+ * Props discovered via Figma MCP get_code_connect_suggestions
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1%3A609',
+  {
+    props: {
+      label: figma.string('Label'),
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Danger: 'danger',
+        'Inverse (only on dark background)': 'inverse',
+      }),
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+        L: 'l',
+      }),
+      iconLeft: figma.boolean('Icon left'),
+      iconRight: figma.boolean('Icon right'),
+      iconOnly: figma.boolean('Icon only'),
+      disabled: figma.boolean('Is disabled'),
+      isLoading: figma.boolean('Is loading'),
+      outlined: figma.enum('Type', { Outlined: true }),
+      ghost: figma.enum('Type', { Ghost: true }),
+    },
+    example: ({ label, appearance, size, disabled, isLoading, outlined, ghost }) =>
+      html`<script setup>
+        import { MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MButton appearance=${appearance} size=${size} disabled=${disabled} :is-loading=${isLoading} outlined=${outlined} ghost=${ghost}>
+        ${label}
+      </MButton>`,
+  },
+);

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

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MCallout
+ * Links Figma Callout (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6504',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Tips: 'tips',
+        Inverse: 'inverse',
+      }),
+    },
+    example: ({ appearance }) =>
+      html`<script setup>
+        import { MCallout } from '@mozaic-ds/vue';
+      </script>
+
+      <MCallout
+        title="This is a title, be concise and use the description message to give details."
+        description="Description message."
+        appearance=${appearance}
+      ></MCallout>`,
+  },
+);

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.vue

@@ -1,10 +1,20 @@
 <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
+        :is="props.tag"
+        :id="`callout-title-${id}`"
+        class="mc-callout__title"
+        >{{ title }}</component
+      >
 
       <p class="mc-callout__message">
         {{ description }}
@@ -18,7 +28,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.
  */
@@ -36,12 +46,20 @@ const props = withDefaults(
      * 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

@@ -10,6 +10,8 @@ A callout is used to highlight additional information that can assist users with
 | `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