@mozaic-ds/vue 2.14.0 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -56,17 +56,18 @@
     "@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",
     "@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

@@ -87,10 +87,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 +98,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 () => {

package/src/components/actionlistbox/MActionListbox.vue

@@ -61,12 +61,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,11 +79,7 @@ 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.
      */

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/pageheader/MPageHeader.spec.ts

@@ -98,9 +98,9 @@ describe('MPageHeader', () => {
         },
       });
 
-      expect(
-        wrapper.findComponent({ name: 'MStatusBadge' }).exists(),
-      ).toBe(true);
+      expect(wrapper.findComponent({ name: 'MStatusBadge' }).exists()).toBe(
+        true,
+      );
     });
 
     it('does not render status badge if statusLabel is missing', () => {
@@ -111,9 +111,9 @@ describe('MPageHeader', () => {
         },
       });
 
-      expect(
-        wrapper.findComponent({ name: 'MStatusBadge' }).exists(),
-      ).toBe(false);
+      expect(wrapper.findComponent({ name: 'MStatusBadge' }).exists()).toBe(
+        false,
+      );
     });
 
     it('renders extra info when provided', () => {
@@ -124,9 +124,9 @@ describe('MPageHeader', () => {
         },
       });
 
-      expect(
-        wrapper.find('.mc-page-header__extra-info').text(),
-      ).toBe('Details');
+      expect(wrapper.find('.mc-page-header__extra-info').text()).toBe(
+        'Details',
+      );
     });
 
     it('renders info wrapper only when status or extraInfo exists', () => {
@@ -134,9 +134,9 @@ describe('MPageHeader', () => {
         props: { title: 'My Page' },
       });
 
-      expect(
-        wrapper.find('.mc-page-header__info-wrapper').exists(),
-      ).toBe(false);
+      expect(wrapper.find('.mc-page-header__info-wrapper').exists()).toBe(
+        false,
+      );
     });
   });
 });

package/src/components/pageheader/MPageHeader.stories.ts

@@ -63,7 +63,15 @@ const meta: Meta<typeof MPageHeader> = {
     `,
   },
   render: (args) => ({
-    components: { MPageHeader, MTabs, MIconButton, Search24, HelpCircle24, Notification24, MSelect },
+    components: {
+      MPageHeader,
+      MTabs,
+      MIconButton,
+      Search24,
+      HelpCircle24,
+      Notification24,
+      MSelect,
+    },
     setup() {
       const handleBackButtonClick = action('back');
       const handleMenuClick = action('toggle-menu');

package/src/components/pageheader/MPageHeader.vue

@@ -23,10 +23,7 @@
             {{ title }}
           </span>
 
-          <div
-            v-if="status || extraInfo"
-            class="mc-page-header__info-wrapper"
-          >
+          <div v-if="status || extraInfo" class="mc-page-header__info-wrapper">
             <MStatusBadge
               v-if="statusLabel && status"
               :label="statusLabel"
@@ -55,13 +52,13 @@
         </MIconButton>
 
         <div class="mc-page-header__actions-content">
-          <slot name="actions"/>
+          <slot name="actions" />
         </div>
       </div>
     </div>
 
     <div class="mc-page-header__tabs">
-      <slot name="tabs"/>
+      <slot name="tabs" />
     </div>
   </div>
 </template>

package/src/components/segmentedcontrol/MSegmentedControl.spec.ts

@@ -4,9 +4,9 @@ import MSegmentedControl from './MSegmentedControl.vue';
 
 describe('MSegmentedControl.vue', () => {
   const segments = [
-    { label: 'First' },
-    { label: 'Second' },
-    { label: 'Third' },
+    { id: '1', label: 'First' },
+    { id: '2', label: 'Second' },
+    { id: '3', label: 'Third' },
   ];
 
   it('renders segments with correct labels', () => {
@@ -23,42 +23,74 @@ describe('MSegmentedControl.vue', () => {
 
   it('sets default active segment based on modelValue prop', () => {
     const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 1 },
+      props: { segments, modelValue: '1' },
     });
 
     const buttons = wrapper.findAll('button');
-    expect(buttons[1].classes()).toContain(
+    expect(buttons[0].classes()).toContain(
       'mc-segmented-control__segment--selected',
     );
-    expect(buttons[1].attributes('aria-checked')).toBe('true');
+    expect(buttons[0].attributes('aria-checked')).toBe('true');
   });
 
-  it('emits update:modelValue and changes active segment on click', async () => {
-    const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 0 },
+  describe('Segment selection - string type model', () => {
+    it('emits update:modelValue and changes active segment on click', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: '1' },
+      });
+
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['3']);
+
+      expect(buttons[2].classes()).toContain(
+        'mc-segmented-control__segment--selected',
+      );
+      expect(buttons[2].attributes('aria-checked')).toBe('true');
     });
 
-    const buttons = wrapper.findAll('button');
-    await buttons[2].trigger('click');
+    it('does not emit update event if clicking already active segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: '2' },
+      });
 
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+      const buttons = wrapper.findAll('button');
+      await buttons[1].trigger('click');
 
-    expect(buttons[2].classes()).toContain(
-      'mc-segmented-control__segment--selected',
-    );
-    expect(buttons[2].attributes('aria-checked')).toBe('true');
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
   });
 
-  it('does not emit update event if clicking already active segment', async () => {
-    const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 1 },
+  describe('Segment selection - number type model', () => {
+    it('emits update:modelValue and changes active segment on click', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: 0 },
+      });
+
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+
+      expect(buttons[2].classes()).toContain(
+        'mc-segmented-control__segment--selected',
+      );
+      expect(buttons[2].attributes('aria-checked')).toBe('true');
     });
 
-    const buttons = wrapper.findAll('button');
-    await buttons[1].trigger('click');
+    it('does not emit update event if clicking already active segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: 1 },
+      });
 
-    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+      const buttons = wrapper.findAll('button');
+      await buttons[1].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
   });
 
   it('applies full width class when full prop is true', () => {
@@ -87,7 +119,7 @@ describe('MSegmentedControl.vue', () => {
 
   it('updates active segment when modelValue prop changes', async () => {
     const wrapper = mount(MSegmentedControl, {
-      props: { segments, modelValue: 0 },
+      props: { segments, modelValue: '1' },
     });
 
     const buttons = wrapper.findAll('button');
@@ -95,7 +127,7 @@ describe('MSegmentedControl.vue', () => {
       'mc-segmented-control__segment--selected',
     );
 
-    await wrapper.setProps({ modelValue: 2 });
+    await wrapper.setProps({ modelValue: '3' });
 
     expect(buttons[2].classes()).toContain(
       'mc-segmented-control__segment--selected',

package/src/components/segmentedcontrol/MSegmentedControl.stories.ts

@@ -15,17 +15,22 @@ const meta: Meta<typeof MSegmentedControl> = {
     },
   },
   args: {
+    modelValue: 'label1',
     segments: [
       {
+        id: 'label1',
         label: 'Label',
       },
       {
+        id: 'label2',
         label: 'Label',
       },
       {
+        id: 'label3',
         label: 'Label',
       },
       {
+        id: 'label4',
         label: 'Label',
       },
     ],
@@ -40,6 +45,7 @@ const meta: Meta<typeof MSegmentedControl> = {
     template: `
       <MSegmentedControl
         v-bind="args"
+        v-model="args.modelValue"
         @update:modelValue="handleUpdate"
       ></MSegmentedControl>
     `,
@@ -50,25 +56,6 @@ type Story = StoryObj<typeof MSegmentedControl>;
 
 export const Default: Story = {};
 
-export const Icons: Story = {
-  args: {
-    segments: [
-      {
-        label: 'Label',
-      },
-      {
-        label: 'Label',
-      },
-      {
-        label: 'Label',
-      },
-      {
-        label: 'Label',
-      },
-    ],
-  },
-};
-
 export const Size: Story = {
   args: { size: 'm' },
 };

package/src/components/segmentedcontrol/MSegmentedControl.vue

@@ -6,11 +6,14 @@
       type="button"
       class="mc-segmented-control__segment"
       :class="{
-        'mc-segmented-control__segment--selected': isSegmentSelected(index),
+        'mc-segmented-control__segment--selected': isSegmentSelected(
+          index,
+          segment.id,
+        ),
       }"
-      :aria-checked="isSegmentSelected(index)"
+      :aria-checked="isSegmentSelected(index, segment.id)"
       role="radio"
-      @click="onClickSegment(index)"
+      @click="onClickSegment(index, segment.id)"
     >
       {{ segment.label }}
     </button>
@@ -25,9 +28,12 @@ import { computed, ref, watch } from 'vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * The selected segment index, bound via v-model.
+     * Defines the currently active tab.
+     *
+     * - If a `number` is provided, it represents the index of the segment.
+     * - If a `string` is provided, it must match the `id` of one of the segments.
      */
-    modelValue?: number;
+    modelValue?: string | number;
     /**
      * if `true`, the segmented control take the full width.
      */
@@ -40,6 +46,10 @@ const props = withDefaults(
      * An array of objects that allows you to provide all the data needed to generate the content for each segment.
      */
     segments: Array<{
+      /**
+       * Unique identifier for the segment.
+       */
+      id?: string;
       /**
        * The label displayed for the segment.
        */
@@ -59,7 +69,7 @@ const classObject = computed(() => {
   };
 });
 
-const modelValue = ref(props.modelValue);
+const modelValue = ref<string | number | undefined>(props.modelValue);
 
 watch(
   () => props.modelValue,
@@ -68,22 +78,26 @@ watch(
   },
 );
 
-const onClickSegment = (index: number) => {
-  if (index !== modelValue.value) {
-    modelValue.value = index;
-    emit('update:modelValue', index);
+const onClickSegment = (index: number, id?: string) => {
+  const value = typeof props.modelValue === 'number' ? index : id;
+
+  if (value !== modelValue.value) {
+    modelValue.value = value;
+    emit('update:modelValue', value);
   }
 };
 
-const isSegmentSelected = (index: number) => {
-  return modelValue.value === index;
+const isSegmentSelected = (index: number, id?: string) => {
+  const value = typeof props.modelValue === 'number' ? index : id;
+
+  return modelValue.value === value;
 };
 
 const emit = defineEmits<{
   /**
    * Emits when the selected segment changes, updating the modelValue prop.
    */
-  (on: 'update:modelValue', value: number): void;
+  (on: 'update:modelValue', value?: string | number): void;
 }>();
 </script>
 

package/src/components/segmentedcontrol/README.md

@@ -7,13 +7,16 @@ A Segmented Control allows users to switch between multiple options or views wit
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `modelValue` | The selected segment index, bound via v-model. | `number` | `0` |
+| `modelValue` | Defines the currently active tab.
+
+- If a `number` is provided, it represents the index of the segment.
+- If a `string` is provided, it must match the `id` of one of the segments. | `string` `number` | `0` |
 | `full` | if `true`, the segmented control take the full width. | `boolean` | - |
 | `size` | Determines the size of the segmented control. | `"s"` `"m"` | `"s"` |
-| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `{ label: string; }[]` | - |
+| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `{ id?: string` `undefined; label: string; }[]` | - |
 
 ## Events
 
 | Name | Description | Type |
 | --- | --- | --- |
-| `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value: number] |
+| `update:modelValue` | Emits when the selected segment changes, updating the modelValue prop. | [value?: string | number] |

package/src/components/select/MSelect.vue

@@ -1,7 +1,8 @@
 <template>
-  <div :class="{
-    'mc-select': true,
-    [`mc-select--${size}`]: props.size && props.size != 'm',
+  <div
+    :class="{
+      'mc-select': true,
+      [`mc-select--${size}`]: props.size && props.size != 'm',
     }"
   >
     <select

package/src/components/sidebar/stories/DefaultCase.stories.vue

@@ -5,7 +5,7 @@
     @close="emit('close')"
   >
     <template #header>
-      <MSidebarHeader title="Adeo Design System" logo="/logo.svg" />
+      <MSidebarHeader title="Adeo Design System" logo="/mozaic-vue/logo.svg" />
     </template>
 
     <template #shortcuts>
@@ -49,7 +49,7 @@
         title="Dieter Rams"
         subtitle="Industrial designer"
         href="#"
-        avatar="/images/Avatar.png"
+        avatar="/mozaic-vue/images/Avatar.png"
         @log-out="emit('log-out')"
       >
         <MSidebarNavItem

package/src/components/sidebar/stories/README.md

@@ -2,6 +2,14 @@
 
 
 
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `any[]` |
+| `close` | - | `any[]` |
+| `log-out` | - | `any[]` |
+
 ## Dependencies
 
 ### Depends on