npm - @mozaic-ds/vue - Versions diffs - 2.18.0 → 2.19.1 - Mend

@mozaic-ds/vue 2.18.0 → 2.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.18.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"
   },
@@ -51,9 +51,10 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
+    "@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/BrandPresets.mdx CHANGED Viewed

@@ -80,16 +80,34 @@ The table below summarises which font to use depending on the brand.
   </tr>
 </table>
+For example, here is how to include the Roboto font in your HTML for the Adeo brand:
+<Source
+  language="html"
+  dark
+  code={`
+<head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+`}
+/>
 From there, we can update the main style sheet of your project, in order to import the right font.
 <Source
   language='css'
   dark
   code={`
-@use "@mozaic-ds/styles/tools/t.font" as *;
+@use '@mozaic-ds/tokens/adeo/theme' as *;
 body {
-@include set-font-family();
+font-family: var(--font-family, 'Roboto', sans-serif);
 }
 `} />

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -135,4 +135,117 @@ 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 CHANGED Viewed

@@ -9,9 +9,12 @@
       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 +27,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"
@@ -40,17 +51,20 @@
                   '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 +79,13 @@
 </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 +157,46 @@ 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/avatar/MAvatar.figma.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/breadcrumb/MBreadcrumb.vue CHANGED Viewed

@@ -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.figma.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/button/MButton.spec.ts CHANGED Viewed

@@ -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 CHANGED Viewed

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