@mozaic-ds/vue 2.19.0 → 2.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.19.0",
+  "version": "2.19.1",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -43,7 +43,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.18.0",
+    "@mozaic-ds/styles": "^2.23.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9"
   },
@@ -54,6 +54,7 @@
     "@commitlint/cli": "^21.0.1",
     "@commitlint/config-conventional": "^21.0.1",
     "@figma/code-connect": "^1.4.1",
+    "@microsoft/api-extractor": "^7.58.7",
     "@mozaic-ds/css-dev-tools": "1.75.0",
     "@mozaic-ds/datatable-vue": "^1.0.0",
     "@mozaic-ds/icons-vue": "^2.5.0",
@@ -68,6 +69,7 @@
     "@vitest/eslint-plugin": "^1.1.38",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/language-core": "^3.3.2",
     "@vue/test-utils": "^2.4.6",
     "dotenv-cli": "^11.0.0",
     "eslint": "^10.0.2",
@@ -78,7 +80,7 @@
     "husky": "^9.1.7",
     "jsdom": "^29.0.0",
     "libphonenumber-js": "^1.12.23",
-    "lint-staged": "^16.1.5",
+    "lint-staged": "^17.0.5",
     "mdx-mermaid": "^2.0.3",
     "mermaid": "^11.5.0",
     "npm-run-all": "^4.1.5",
@@ -88,8 +90,8 @@
     "storybook": "^10.0.4",
     "storybook-addon-tag-badges": "^3.0.2",
     "typescript": "^6.0.3",
+    "unplugin-dts": "^1.0.1",
     "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.3",
     "vitest": "^4.0.7",
     "vue": "^3.5.13",
     "vue-component-meta": "^3.0.8",

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

@@ -22,22 +22,22 @@ figma.connect(
     },
     example: ({ appearance }) =>
       html`<script setup>
-        import { MAccordionList, MAccordionListItem } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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/accordionlist/MAccordionList.stories.ts

@@ -51,7 +51,7 @@ const meta: Meta<typeof MAccordionList> = {
       return { args, Wrench32, Project32, Sharpening32, handleUpdate };
     },
     template: `
-      <MAccordionList v-bind="args" @update:modelValue="handleUpdate">
+      <MAccordionList v-bind="args" v-model="args.modelValue" @update:modelValue="handleUpdate">
         ${args.default}
       </MAccordionList>
     `,

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

@@ -16,12 +16,16 @@ figma.connect(
     },
     example: ({ title, subtitle }) =>
       html`<script setup>
-        import { MAccordionListItem } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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.vue

@@ -23,7 +23,10 @@
     </div>
     <div
       :id="`content-${id}`"
-      class="mc-accordion__content"
+      :class="{
+        'mc-accordion__content': true,
+        'mc-accordion__content--open': open,
+      }"
       :inert="!open || undefined"
       :aria-labelledby="`accordion-${id}`"
       role="region"

package/src/components/accordionlistitem/README.md

@@ -15,6 +15,8 @@ If no ID is provided, a unique one is generated automatically. | `string` | - |
 | `subtitle` | An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item. | `string` | - |
 | `content` | The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements. | `string` | - |
 | `icon` | Icon component to display before the item title. | `Component` | - |
+| `tag` | Heading level for the accordion trigger (h2–h6). Adjust to match the
+heading hierarchy of the page where the accordion is used. | `"h2"` `"h1"` `"h3"` `"h4"` `"h5"` `"h6"` | `"h2"` |
 
 ## Slots
 

package/src/components/actionbottombar/MActionBottomBar.figma.ts

@@ -12,13 +12,13 @@ figma.connect(
     },
     example: ({ shadow }) =>
       html`<script setup>
-        import { MActionBottomBar, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MActionBottomBar, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MActionBottomBar shadow=${shadow}>
-        <template #right>
-          <MButton size="s" appearance="accent">Save</MButton>
-        </template>
-      </MActionBottomBar>`,
+        <MActionBottomBar shadow=${shadow}>
+          <template #right>
+            <MButton size="s" appearance="accent">Save</MButton>
+          </template>
+        </MActionBottomBar>`,
   },
 );

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

@@ -10,21 +10,21 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MActionListbox, MButton } from '@mozaic-ds/vue';
-        import { Copy20, Download20, Trash20 } from '@mozaic-ds/icons-vue';
-      </script>
+          import { MActionListbox, MButton } from '@mozaic-ds/vue';
+          import { Copy20, Download20, Trash20 } from '@mozaic-ds/icons-vue';
+        </script>
 
-      <MActionListbox
-        title="Listbox title"
-        :items="[
+        <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>`,
+        >
+          <template #activator="{ id }">
+            <MButton :popovertarget="id">Open menu</MButton>
+          </template>
+        </MActionListbox>`,
   },
 );

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

@@ -159,7 +159,9 @@ describe('MActionListbox', () => {
       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' });
+      await wrapper
+        .find('ul[role="menu"]')
+        .trigger('keydown', { key: 'ArrowDown' });
       expect(document.activeElement).toBe(buttons[1].element);
       wrapper.unmount();
     });
@@ -168,7 +170,9 @@ describe('MActionListbox', () => {
       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' });
+      await wrapper
+        .find('ul[role="menu"]')
+        .trigger('keydown', { key: 'ArrowDown' });
       expect(document.activeElement).toBe(buttons[0].element);
       wrapper.unmount();
     });
@@ -177,7 +181,9 @@ describe('MActionListbox', () => {
       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' });
+      await wrapper
+        .find('ul[role="menu"]')
+        .trigger('keydown', { key: 'ArrowUp' });
       expect(document.activeElement).toBe(buttons[0].element);
       wrapper.unmount();
     });
@@ -186,7 +192,9 @@ describe('MActionListbox', () => {
       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' });
+      await wrapper
+        .find('ul[role="menu"]')
+        .trigger('keydown', { key: 'ArrowUp' });
       expect(document.activeElement).toBe(buttons[buttons.length - 1].element);
       wrapper.unmount();
     });
@@ -211,7 +219,9 @@ describe('MActionListbox', () => {
 
     it('Escape emits "close"', async () => {
       const wrapper = mountAttached();
-      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'Escape' });
+      await wrapper
+        .find('ul[role="menu"]')
+        .trigger('keydown', { key: 'Escape' });
       expect(wrapper.emitted('close')).toBeTruthy();
       wrapper.unmount();
     });
@@ -227,9 +237,13 @@ describe('MActionListbox', () => {
         attachTo: document.body,
         global: { components: { MDivider, MIconButton, Cross24 } },
       });
-      const enabledButtons = wrapper.findAll('button[role="menuitem"]:not([disabled])');
+      const enabledButtons = wrapper.findAll(
+        'button[role="menuitem"]:not([disabled])',
+      );
       await enabledButtons[0].element.focus();
-      await wrapper.find('ul[role="menu"]').trigger('keydown', { key: 'ArrowDown' });
+      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

@@ -12,7 +12,9 @@
       @toggle="onPopoverToggle"
     >
       <div class="mc-listbox__header">
-        <h3 v-if="title" :id="`${id}-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
@@ -44,7 +46,8 @@
               :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,
                 },
               ]"
@@ -76,7 +79,13 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, 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';
@@ -153,7 +162,9 @@ const menuEl = useTemplateRef('menuEl');
 
 function getMenuItems(): HTMLButtonElement[] {
   return Array.from(
-    menuEl.value?.querySelectorAll<HTMLButtonElement>('button[role="menuitem"]:not(:disabled)') ?? [],
+    menuEl.value?.querySelectorAll<HTMLButtonElement>(
+      'button[role="menuitem"]:not(:disabled)',
+    ) ?? [],
   );
 }
 

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

@@ -21,11 +21,11 @@ figma.connect(
     },
     example: ({ size }) =>
       html`<script setup>
-        import { MAvatar } from '@mozaic-ds/vue';
-      </script>
+          import { MAvatar } from '@mozaic-ds/vue';
+        </script>
 
-      <MAvatar size=${size}>
-        <img src="/placeholder.png" alt="Avatar" />
-      </MAvatar>`,
+        <MAvatar size=${size}>
+          <img src="/placeholder.png" alt="Avatar" />
+        </MAvatar>`,
   },
 );

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

@@ -15,17 +15,17 @@ figma.connect(
     },
     example: ({ appearance }) =>
       html`<script setup>
-        import { MBreadcrumb } from '@mozaic-ds/vue';
-      </script>
+          import { MBreadcrumb } from '@mozaic-ds/vue';
+        </script>
 
-      <MBreadcrumb
-        appearance=${appearance}
-        :links="[
+        <MBreadcrumb
+          appearance=${appearance}
+          :links="[
           { label: 'Home', href: '#' },
           { label: 'Level 01', href: '#' },
           { label: 'Current Page', href: '#' },
         ]"
-        aria-label="breadcrumb"
-      ></MBreadcrumb>`,
+          aria-label="breadcrumb"
+        ></MBreadcrumb>`,
   },
 );

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

@@ -9,15 +9,18 @@ figma.connect(
   {
     props: {
       outlined: figma.enum('is outlined', {
-        'true': true,
-        'false': false,
+        true: true,
+        false: false,
       }),
     },
     example: ({ outlined }) =>
       html`<script setup>
-        import { MBuiltInMenu } from '@mozaic-ds/vue';
-      </script>
+          import { MBuiltInMenu } from '@mozaic-ds/vue';
+        </script>
 
-      <MBuiltInMenu :items="[{ label: 'Label' }, { label: 'Label' }]" outlined=${outlined} />`,
+        <MBuiltInMenu
+          :items="[{ label: 'Label' }, { label: 'Label' }]"
+          outlined=${outlined}
+        />`,
   },
 );

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

@@ -120,7 +120,9 @@ describe('MBuiltInMenu', () => {
     const wrapper = mount(MBuiltInMenu, {
       props: { items, label: 'Settings navigation' },
     });
-    expect(wrapper.find('nav').attributes('aria-label')).toBe('Settings navigation');
+    expect(wrapper.find('nav').attributes('aria-label')).toBe(
+      'Settings navigation',
+    );
   });
 
   it('sets aria-hidden on ChevronRight and item icons', () => {

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

@@ -29,13 +29,28 @@ figma.connect(
       outlined: figma.enum('Type', { Outlined: true }),
       ghost: figma.enum('Type', { Ghost: true }),
     },
-    example: ({ label, appearance, size, disabled, isLoading, outlined, ghost }) =>
+    example: ({
+      label,
+      appearance,
+      size,
+      disabled,
+      isLoading,
+      outlined,
+      ghost,
+    }) =>
       html`<script setup>
-        import { MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MButton appearance=${appearance} size=${size} disabled=${disabled} :is-loading=${isLoading} outlined=${outlined} ghost=${ghost}>
-        ${label}
-      </MButton>`,
+        <MButton
+          appearance=${appearance}
+          size=${size}
+          disabled=${disabled}
+          :is-loading=${isLoading}
+          outlined=${outlined}
+          ghost=${ghost}
+        >
+          ${label}
+        </MButton>`,
   },
 );

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

@@ -17,13 +17,13 @@ figma.connect(
     },
     example: ({ appearance }) =>
       html`<script setup>
-        import { MCallout } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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/carousel/MCarousel.figma.ts

@@ -17,16 +17,16 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MCarousel } from '@mozaic-ds/vue';
-      </script>
+          import { MCarousel } from '@mozaic-ds/vue';
+        </script>
 
-      <MCarousel>
-        <template #header>
-          <h2>Carousel title</h2>
-        </template>
-        <div>Slide 1</div>
-        <div>Slide 2</div>
-        <div>Slide 3</div>
-      </MCarousel>`,
+        <MCarousel>
+          <template #header>
+            <h2>Carousel title</h2>
+          </template>
+          <div>Slide 1</div>
+          <div>Slide 2</div>
+          <div>Slide 3</div>
+        </MCarousel>`,
   },
 );

package/src/components/checkbox/MCheckbox.figma.ts

@@ -30,16 +30,16 @@ figma.connect(
     },
     example: ({ modelValue, indeterminate, disabled, isInvalid }) =>
       html`<script setup>
-        import { MCheckbox } from '@mozaic-ds/vue';
-      </script>
+          import { MCheckbox } from '@mozaic-ds/vue';
+        </script>
 
-      <MCheckbox
-        id="checkbox-id"
-        label="Checkbox Label"
-        :model-value=${modelValue}
-        :indeterminate=${indeterminate}
-        disabled=${disabled}
-        :is-invalid=${isInvalid}
-      ></MCheckbox>`,
+        <MCheckbox
+          id="checkbox-id"
+          label="Checkbox Label"
+          :model-value=${modelValue}
+          :indeterminate=${indeterminate}
+          disabled=${disabled}
+          :is-invalid=${isInvalid}
+        ></MCheckbox>`,
   },
 );

package/src/components/checkboxgroup/MCheckboxGroup.figma.ts

@@ -15,16 +15,16 @@ figma.connect(
     },
     example: ({ inline }) =>
       html`<script setup>
-        import { MCheckboxGroup } from '@mozaic-ds/vue';
-      </script>
+          import { MCheckboxGroup } from '@mozaic-ds/vue';
+        </script>
 
-      <MCheckboxGroup
-        name="group"
-        :options="[
+        <MCheckboxGroup
+          name="group"
+          :options="[
           { id: '1', label: 'Option 1', value: '1' },
           { id: '2', label: 'Option 2', value: '2' },
         ]"
-        inline=${inline}
-      />`,
+          inline=${inline}
+        />`,
   },
 );

package/src/components/checklistmenu/MCheckListMenu.figma.ts

@@ -9,21 +9,21 @@ figma.connect(
   {
     props: {
       outlined: figma.enum('is outlined', {
-        'true': true,
-        'false': false,
+        true: true,
+        false: false,
       }),
     },
     example: ({ outlined }) =>
       html`<script setup>
-        import { MCheckListMenu } from '@mozaic-ds/vue';
-      </script>
+          import { MCheckListMenu } from '@mozaic-ds/vue';
+        </script>
 
-      <MCheckListMenu
-        :items="[
+        <MCheckListMenu
+          :items="[
           { label: 'Label', checked: true },
           { label: 'Label', checked: false },
         ]"
-        outlined=${outlined}
-      />`,
+          outlined=${outlined}
+        />`,
   },
 );

package/src/components/circularprogressbar/MCircularProgressbar.figma.ts

@@ -23,9 +23,13 @@ figma.connect(
     },
     example: ({ size, value }) =>
       html`<script setup>
-        import { MCircularProgressbar } from '@mozaic-ds/vue';
-      </script>
+          import { MCircularProgressbar } from '@mozaic-ds/vue';
+        </script>
 
-      <MCircularProgressbar size=${size} :value=${value} aria-label="Progress bar"></MCircularProgressbar>`,
+        <MCircularProgressbar
+          size=${size}
+          :value=${value}
+          aria-label="Progress bar"
+        ></MCircularProgressbar>`,
   },
 );

package/src/components/combobox/MCombobox.figma.ts

@@ -33,16 +33,16 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MCombobox } from '@mozaic-ds/vue';
-      </script>
+          import { MCombobox } from '@mozaic-ds/vue';
+        </script>
 
-      <MCombobox
-        id="combobox-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        :options="[{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }]"
-      ></MCombobox>`,
+        <MCombobox
+          id="combobox-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          :options="[{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }]"
+        ></MCombobox>`,
   },
 );

package/src/components/container/MContainer.figma.ts

@@ -20,11 +20,11 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MContainer } from '@mozaic-ds/vue';
-      </script>
+          import { MContainer } from '@mozaic-ds/vue';
+        </script>
 
-      <MContainer>
-        <p>Container content</p>
-      </MContainer>`,
+        <MContainer>
+          <p>Container content</p>
+        </MContainer>`,
   },
 );