@mozaic-ds/vue 2.14.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -41,7 +41,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.11.0",
+    "@mozaic-ds/styles": "^2.13.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -56,17 +56,19 @@
     "@storybook/addon-docs": "^10.0.4",
     "@storybook/addon-themes": "^10.0.4",
     "@storybook/vue3-vite": "^10.0.4",
-    "@types/jsdom": "^27.0.0",
+    "@types/jsdom": "^28.0.0",
+    "@types/lodash": "^4.17.23",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^4.0.7",
     "@vitest/eslint-plugin": "^1.1.38",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.22.0",
+    "eslint": "^10.0.2",
     "eslint-plugin-storybook": "^10.0.5",
     "eslint-plugin-vue": "^10.0.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "globals": "^17.3.0",
     "husky": "^9.1.7",
     "jsdom": "^28.0.0",
     "libphonenumber-js": "^1.12.23",

package/src/components/DarkMode.mdx

@@ -0,0 +1,115 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Dark Mode" />
+
+# Dark Mode
+
+A concise guide explaining **how dark mode works** with your CSS variables and **how to use it** in Storybook.
+
+---
+
+## What dark mode is (high‑level)
+
+Dark mode is implemented with **two sets of CSS variables** (tokens):
+
+- **Light** values live under `:root`.
+- **Dark** values override under `:root[data-theme="dark"]`.
+
+Components only reference tokens with `var(--token-name)` — switching theme is just toggling the `data-theme` attribute (no component code changes).
+
+---
+
+## Token structure (SCSS → CSS)
+
+Your presets export SCSS like this:
+
+<Source 
+  language="scss" 
+  dark 
+  code={`
+  $root-selector: ':root' !default;
+$dark-selector: '[data-theme="dark"]' !default;
+
+#{$root-selector} {
+/_ Light tokens _/
+--color-background-primary: #ffffff;
+--color-text-primary: #000000;
+/_ … all your light variables … _/
+}
+
+#{$root-selector}#{$dark-selector} {
+/_ Dark tokens _/
+--color-background-primary: #191919;
+--color-text-primary: #d9d9d9;
+/_ … all your dark variables … _/
+}
+`}
+/>
+
+After compilation, this becomes standard CSS:
+
+<Source
+  language="css"
+  dark
+  code={`
+    :root {
+      /* light tokens */
+    }
+    :root[data-theme='dark'] {
+      /* dark tokens */
+    }
+  `}
+/>
+
+> If you can’t (or don’t want to) target `:root`, you can pass a different `$root-selector` when building your theme and apply `data-theme="dark"` on that container instead.
+
+---
+
+## Using tokens inside components
+
+To enable the dark mode you have to ensure to:
+
+- Add the `data-theme` attribute in your root element with the value `dark`,
+- Use variables — never hard‑code colors or sizes
+
+```html
+<div class="root" data-theme="dark">…</div>
+```
+
+<Source 
+  language="sass" 
+  dark 
+  code={`
+    @use "@mozaic-ds/tokens" as *;
+
+    .mc-component: {
+      background-color: $--color-background-primary;
+    }
+
+`}
+/>
+
+When the theme changes, these values update automatically via CSS.
+
+---
+
+## Accessibility & good practices
+
+- Aim for **WCAG AA** contrast at minimum; verify text vs. background pairs.
+- Prefer **semantic tokens** (`--button-color-…`, `--color-text-…`) over raw color hexes.
+- Keep all component styles expressed in tokens so the **theme switch has zero component logic**.
+
+---
+
+## Troubleshooting
+
+- **Dark toggle does nothing** → Ensure the tokens were imported **before** component styles and that `data-theme="dark"` is set on the same selector the tokens target (usually `:root`).
+- **Weird colors** → Search for hard‑coded values and replace them with tokens.
+- **Variables undefined** → Check your build order and that the SCSS was compiled to CSS and loaded by Storybook.
+
+---
+
+## Summary
+
+- Light tokens on `:root`, dark overrides on `:root[data-theme="dark"]`.
+- Components read tokens with `var(--$token-name)` — no runtime branching required.

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

@@ -24,6 +24,7 @@ const items = [
     icon: DummyIcon,
   },
   {
+    id: 'move',
     label: 'Move to...',
     icon: DummyIcon,
   },
@@ -87,10 +88,7 @@ describe('MActionListbox', () => {
   });
 
   it('applies disabled class when item.disabled is true', () => {
-    const disabledItems = [
-      ...items,
-      { label: 'Disabled', disabled: true },
-    ];
+    const disabledItems = [...items, { label: 'Disabled', disabled: true }];
 
     const wrapper = mountComponent({ items: disabledItems });
 
@@ -101,20 +99,19 @@ describe('MActionListbox', () => {
 
   it('applies mc-listbox--bottom by default', () => {
     const wrapper = mountComponent();
-    expect(wrapper.find('.mc-listbox').classes())
-      .toContain('mc-listbox--bottom');
+    expect(wrapper.find('.mc-listbox').classes()).toContain(
+      'mc-listbox--bottom',
+    );
   });
 
   it('applies mc-listbox--top when position is "top"', () => {
     const wrapper = mountComponent({ position: 'top' });
-    expect(wrapper.find('.mc-listbox').classes())
-      .toContain('mc-listbox--top');
+    expect(wrapper.find('.mc-listbox').classes()).toContain('mc-listbox--top');
   });
 
   it('applies mc-listbox--left when position is "left"', () => {
     const wrapper = mountComponent({ position: 'left' });
-    expect(wrapper.find('.mc-listbox').classes())
-      .toContain('mc-listbox--left');
+    expect(wrapper.find('.mc-listbox').classes()).toContain('mc-listbox--left');
   });
 
   it('emits "close" when close button is clicked', async () => {
@@ -125,4 +122,17 @@ describe('MActionListbox', () => {
     expect(wrapper.emitted('close')).toBeTruthy();
     expect(wrapper.emitted('close')?.length).toBe(1);
   });
+
+  it('emits "action" when an item is clicked', async () => {
+    const wrapper = mountComponent({ title: 'Action List' });
+
+    const actions = wrapper.findAll('.mc-action-list__button');
+    await actions[0].trigger('click');
+
+    expect(wrapper.emitted('action')).toBeTruthy();
+    expect(wrapper.emitted('action')?.[0][0]).toBe(0);
+
+    await actions[1].trigger('click');
+    expect(wrapper.emitted('action')?.[1][0]).toBe('move');
+  });
 });

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MActionListbox from './MActionListbox.vue';
 import MButton from '../button/MButton.vue';
@@ -25,10 +26,10 @@ const meta: Meta<typeof MActionListbox> = {
         <template>
           <MActionListbox
             :items="[
-              { label: 'Duplicate', icon: Copy20, disabled: true },
-              { label: 'Move to...', icon: ArrowTopRight20 },
-              { label: 'Download', icon: Download20 },
-              { label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
+              { id: 'item-1', label: 'Duplicate', icon: Copy20, disabled: true },
+              { id: 'item-2', label: 'Move to...', icon: ArrowTopRight20 },
+              { id: 'item-3', label: 'Download', icon: Download20 },
+              { id: 'item-4', label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
             ]"
             title="Listbox title (optional)"
           />
@@ -41,19 +42,23 @@ const meta: Meta<typeof MActionListbox> = {
     title: 'Listbox title (optional)',
     items: [
       {
+        id: 'item-1',
         label: 'Duplicate',
         icon: Copy20,
         disabled: true,
       },
       {
+        id: 'item-2',
         label: 'Move to...',
         icon: ArrowTopRight20,
       },
       {
+        id: 'item-3',
         label: 'Download',
         icon: Download20,
       },
       {
+        id: 'item-4',
         label: 'Delete',
         icon: Trash20,
         appearance: 'danger',
@@ -64,10 +69,11 @@ const meta: Meta<typeof MActionListbox> = {
   render: (args) => ({
     components: { MActionListbox },
     setup() {
-      return { args };
+      const handleAction = action('action');
+      return { args, handleAction };
     },
     template: `
-        <MActionListbox v-bind="args" />
+        <MActionListbox v-bind="args" @action="handleAction" />
     `,
   }),
 };
@@ -80,11 +86,12 @@ export const Activator: Story = {
   render: (args) => ({
     components: { MActionListbox, MButton },
     setup() {
-      return { args };
+      const handleAction = action('action');
+      return { args, handleAction };
     },
     template: `
       <div>
-        <MActionListbox v-bind="args">
+        <MActionListbox v-bind="args" @action="handleAction">
           <template #activator="{id}">
             <MButton :popovertarget="id">Activator</MButton>
           </template>

package/src/components/actionlistbox/MActionListbox.vue

@@ -42,7 +42,11 @@
               ]"
               role="menuitem"
             >
-              <button type="button" class="mc-action-list__button">
+              <button
+                type="button"
+                class="mc-action-list__button"
+                @click="emit('action', item?.id || index)"
+              >
                 <component
                   v-if="item.icon"
                   class="mc-action-list__icon"
@@ -61,12 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  useId,
-  useTemplateRef,
-  type Component,
-  type VNode,
-} from 'vue';
+import { 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';
@@ -84,16 +83,16 @@ const props = withDefaults(
     /**
      * Defines the position of the listbox relative to its trigger or container.
      */
-    position?:
-      | 'top'
-      | 'bottom'
-      | 'left'
-      | 'right';
+    position?: 'top' | 'bottom' | 'left' | 'right';
     /**
      * An array of objects that allows you to provide all the data needed to generate the content for each item.
      */
 
     items: Array<{
+      /**
+       * Unique identifier for the item.
+       */
+      id?: string;
       /**
        * The icon displayed for the item from Mozaic-icon-vue.
        */
@@ -124,6 +123,10 @@ const emit = defineEmits<{
    * Emits when the close button is clicked.
    */
   (on: 'close'): void;
+  /**
+   * Emits when an item is clicked, providing its id or index.
+   */
+  (on: 'action', value: string | number): void;
 }>();
 
 const slots = defineSlots<{

package/src/components/actionlistbox/README.md

@@ -9,7 +9,7 @@ An action list is a contextual menu that presents a list of available actions re
 | --- | --- | --- | --- | 
 | `title` | title displayed in mobile version. | `string` | - |
 | `position` | Defines the position of the listbox relative to its trigger or container. | `"bottom"` `"top"` `"left"` `"right"` | `"bottom"` |
-| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
+| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ id?: string` `undefined; icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
 
 ## Slots
 
@@ -22,6 +22,7 @@ An action list is a contextual menu that presents a list of available actions re
 | Name | Description | Type |
 | --- | --- | --- |
 | `close` | Emits when the close button is clicked. | [] |
+| `action` | Emits when an item is clicked, providing its id or index. | [value: string | number] |
 
 ## Dependencies
 

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

@@ -17,7 +17,7 @@ const meta: Meta<typeof MAvatar> = {
   },
   args: {
     default: `
-      <img src="/images/Avatar.png" alt="Dieter Rams" loading="lazy"/>
+      <img src="/mozaic-vue/images/Avatar.png" alt="Dieter Rams" loading="lazy"/>
     `,
   },
   render: (args) => ({

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -18,8 +18,8 @@
           :aria-current="isLastLink(index) ? 'page' : undefined"
         >
           {{ link.label }}
-          <template v-if="index !== (links.length - 1)" #icon>
-            <ChevronRight20/>
+          <template v-if="index !== links.length - 1" #icon>
+            <ChevronRight20 />
           </template>
         </MLink>
       </li>

package/src/components/button/README.md

@@ -41,6 +41,7 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 
 - [MFileUploaderItem](../fileuploaderitem)
 - [MNavigationIndicator](../navigationindicator)
+- [MOptionListbox](../optionListbox)
 - [MPagination](../pagination)
 - [MPasswordInput](../passwordinput)
 - [MStepperBottomBar](../stepperbottombar)
@@ -52,6 +53,7 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 graph TD;
   MFileUploaderItem --> MButton
   MNavigationIndicator --> MButton
+  MOptionListbox --> MButton
   MPagination --> MButton
   MPasswordInput --> MButton
   MStepperBottomBar --> MButton

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

@@ -0,0 +1,246 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, ref, nextTick } from 'vue';
+import MCombobox from './MCombobox.vue';
+
+const MOptionListboxStub = defineComponent({
+  name: 'MOptionListbox',
+  props: [
+    'modelValue',
+    'open',
+    'multiple',
+    'search',
+    'actions',
+    'checkableSections',
+    'searchPlaceholder',
+    'selectLabel',
+    'clearLabel',
+    'options',
+    'id',
+  ],
+  emits: ['update:modelValue', 'open', 'close'],
+  setup() {
+    const activeIndex = ref(-1);
+    const listboxEl = ref(document.createElement('div'));
+
+    // On crée une fonction mock que l’on expose
+    const toggleValue = vi.fn();
+
+    return {
+      activeIndex,
+      listboxEl,
+      handleKeydown: () => {},
+      toggleValue, // <- expose ici
+    };
+  },
+  template: `<div />`,
+});
+
+const MTagStub = defineComponent({
+  name: 'MTag',
+  props: ['id', 'label', 'type', 'size'],
+  emits: ['remove-tag'],
+  template: `<div class="m-tag-stub">{{ label }}</div>`,
+});
+
+const MButtonStub = defineComponent({
+  name: 'MButton',
+  props: ['outlined', 'size'],
+  emits: ['click'],
+  template: `<button @click="$emit('click')"><slot/></button>`,
+});
+
+const CrossCircleFilled24 = defineComponent({
+  name: 'CrossCircleFilled24',
+  template: `<svg/>`,
+});
+const ChevronDown24 = defineComponent({
+  name: 'ChevronDown24',
+  template: `<svg/>`,
+});
+
+describe('MCombobox', () => {
+  const options = [
+    { label: 'One', value: 1 },
+    { label: 'Two', value: 2 },
+    { label: 'Three', value: 3 },
+  ];
+
+  it('renders placeholder when no selection', () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const control = wrapper.find('.mc-combobox__control');
+    expect(control.exists()).toBe(true);
+    expect(control.text()).toBe('Select an option');
+  });
+
+  it('renders selected label for single value', () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: 1, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const control = wrapper.find('.mc-combobox__control');
+    expect(control.text()).toBe('One');
+  });
+
+  it('multiple selection shows joins values', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: [1, 2], multiple: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    expect(wrapper.find('.mc-combobox__control').text()).toBe('1, 2');
+  });
+
+  it('toggles listbox open/close on control click', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const root = wrapper.find('.mc-combobox');
+    const control = wrapper.find('.mc-combobox__control');
+
+    await control.trigger('click');
+    expect(root.classes()).toContain('mc-combobox--open');
+
+    await control.trigger('click');
+    expect(root.classes()).not.toContain('mc-combobox--open');
+  });
+
+  it('clear button clears selection and emits update:modelValue', async () => {
+    const wrapperSingle = mount(MCombobox, {
+      props: { modelValue: 1, clearable: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const clearBtnSingle = wrapperSingle.find('.mc-combobox__clear');
+    expect(clearBtnSingle.exists()).toBe(true);
+    await clearBtnSingle.trigger('click');
+    const emittedSingle = wrapperSingle.emitted('update:modelValue') || [];
+    expect(emittedSingle.length).toBeGreaterThan(0);
+    expect(emittedSingle[emittedSingle.length - 1][0]).toBeNull();
+
+    const wrapperMulti = mount(MCombobox, {
+      props: { modelValue: [1], multiple: true, clearable: true, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const clearBtnMulti = wrapperMulti.find('.mc-combobox__clear');
+    expect(clearBtnMulti.exists()).toBe(true);
+    await clearBtnMulti.trigger('click');
+    const emittedMulti = wrapperMulti.emitted('update:modelValue') || [];
+    expect(emittedMulti.length).toBeGreaterThan(0);
+
+    const last = emittedMulti[emittedMulti.length - 1][0];
+    expect(Array.isArray(last)).toBe(true);
+    expect(last).toEqual([]);
+  });
+
+  it('activeDescendant reflects child listbox activeIndex', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+    });
+
+    const listboxRef = (wrapper.vm as InstanceType<typeof MCombobox>).$refs
+      .listbox as { activeIndex: number };
+    expect(listboxRef).toBeTruthy();
+
+    listboxRef.activeIndex = 2;
+    await nextTick();
+
+    const control = wrapper.find('.mc-combobox__control');
+    const attr = control.attributes()['aria-activedescendant'];
+    expect(attr).toBeTruthy();
+
+    expect(attr.includes('-2')).toBe(true);
+  });
+
+  it('clicking outside closes the listbox', async () => {
+    const wrapper = mount(MCombobox, {
+      props: { modelValue: null, options },
+      global: {
+        components: {
+          MOptionListbox: MOptionListboxStub,
+          MTag: MTagStub,
+          MButton: MButtonStub,
+          CrossCircleFilled24,
+          ChevronDown24,
+        },
+      },
+      attachTo: document.body,
+    });
+
+    const root = wrapper.find('.mc-combobox');
+    const control = wrapper.find('.mc-combobox__control');
+
+    await control.trigger('click');
+    expect(root.classes()).toContain('mc-combobox--open');
+
+    document.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await nextTick();
+    expect(root.classes()).not.toContain('mc-combobox--open');
+  });
+});