@mozaic-ds/vue 2.13.1 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.13.1",
+  "version": "2.15.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.7.0",
+    "@mozaic-ds/styles": "^2.11.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -50,25 +50,26 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@mozaic-ds/css-dev-tools": "1.75.0",
-    "@mozaic-ds/icons-vue": "^2.2.0",
+    "@mozaic-ds/icons-vue": "^2.5.0",
     "@release-it/conventional-changelog": "^10.0.1",
     "@storybook/addon-a11y": "^10.0.4",
     "@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": "^27.0.0",
+    "jsdom": "^28.0.0",
     "libphonenumber-js": "^1.12.23",
     "lint-staged": "^16.1.5",
     "mdx-mermaid": "^2.0.3",

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

@@ -40,12 +40,9 @@ const items = [
 ];
 
 describe('MActionListbox', () => {
-  it('renders the title if provided', () => {
-    const wrapper = mount(MActionListbox, {
-      props: {
-        title: 'Action List',
-        items,
-      },
+  function mountComponent(props = {}, options = {}) {
+    return mount(MActionListbox, {
+      props: { items, ...props },
       global: {
         components: {
           MDivider,
@@ -53,82 +50,75 @@ describe('MActionListbox', () => {
           Cross24,
         },
       },
+      ...options,
     });
+  }
 
+  it('renders the title if provided', () => {
+    const wrapper = mountComponent({ title: 'Action List' });
     expect(wrapper.find('.mc-listbox__title').text()).toBe('Action List');
   });
 
   it('renders all item labels', () => {
-    const wrapper = mount(MActionListbox, {
-      props: {
-        items,
-      },
-      global: {
-        components: {
-          MDivider,
-          MIconButton,
-          Cross24,
-        },
-      },
-    });
-
+    const wrapper = mountComponent();
     items.forEach((item) => {
       expect(wrapper.text()).toContain(item.label);
     });
   });
 
   it('renders icons for each item', () => {
-    const wrapper = mount(MActionListbox, {
-      props: {
-        items,
-      },
-      global: {
-        components: {
-          MDivider,
-          MIconButton,
-          Cross24,
-        },
-      },
-    });
-
+    const wrapper = mountComponent();
     const icons = wrapper.findAll('[data-testid="icon"]');
     expect(icons.length).toBe(items.length);
   });
 
   it('adds danger class to items with appearance set to danger', () => {
-    const wrapper = mount(MActionListbox, {
-      props: {
-        items,
-      },
-      global: {
-        components: {
-          MDivider,
-          MIconButton,
-          Cross24,
-        },
-      },
-    });
-
+    const wrapper = mountComponent();
     const dangerousItem = wrapper.findAll('.mc-action-list__element--danger');
+
     expect(dangerousItem.length).toBe(1);
     expect(dangerousItem[0].text()).toContain('Delete');
   });
 
-  it('renders MDivider with divider set to true', () => {
-    const wrapper = mount(MActionListbox, {
-      props: {
-        items,
-      },
-      global: {
-        components: {
-          MDivider,
-          MIconButton,
-          Cross24,
-        },
-      },
-    });
-
+  it('renders MDivider when divider is true', () => {
+    const wrapper = mountComponent();
     const dividers = wrapper.findAll('.mc-action-list__divider');
     expect(dividers.length).toBe(1);
   });
+
+  it('applies disabled class when item.disabled is true', () => {
+    const disabledItems = [...items, { label: 'Disabled', disabled: true }];
+
+    const wrapper = mountComponent({ items: disabledItems });
+
+    const disabled = wrapper.findAll('.mc-action-list__element--disabled');
+    expect(disabled.length).toBe(1);
+    expect(disabled[0].text()).toContain('Disabled');
+  });
+
+  it('applies mc-listbox--bottom by default', () => {
+    const wrapper = mountComponent();
+    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');
+  });
+
+  it('applies mc-listbox--left when position is "left"', () => {
+    const wrapper = mountComponent({ position: 'left' });
+    expect(wrapper.find('.mc-listbox').classes()).toContain('mc-listbox--left');
+  });
+
+  it('emits "close" when close button is clicked', async () => {
+    const wrapper = mountComponent({ title: 'Action List' });
+
+    await wrapper.find('.mc-listbox__close').trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+    expect(wrapper.emitted('close')?.length).toBe(1);
+  });
 });

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MActionListbox from './MActionListbox.vue';
+import MButton from '../button/MButton.vue';
 import {
   Copy20,
   ArrowTopRight20,
@@ -12,7 +13,9 @@ const meta: Meta<typeof MActionListbox> = {
   title: 'Overlay/Action Listbox',
   component: MActionListbox,
   parameters: {
+    layout: 'centered',
     docs: {
+      story: { height: '700px' },
       description: {
         component:
           'An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.',
@@ -64,7 +67,7 @@ const meta: Meta<typeof MActionListbox> = {
       return { args };
     },
     template: `
-      <MActionListbox v-bind="args"></MActionListbox>
+        <MActionListbox v-bind="args" />
     `,
   }),
 };
@@ -72,3 +75,21 @@ export default meta;
 type Story = StoryObj<typeof MActionListbox>;
 
 export const Default: Story = {};
+
+export const Activator: Story = {
+  render: (args) => ({
+    components: { MActionListbox, MButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <MActionListbox v-bind="args">
+          <template #activator="{id}">
+            <MButton :popovertarget="id">Activator</MButton>
+          </template>
+        </MActionListbox>
+      </div>
+    `,
+  }),
+};

package/src/components/actionlistbox/MActionListbox.vue

@@ -1,9 +1,23 @@
 <template>
-  <div class="mc-listbox">
-    <div class="mc-listbox__content">
+  <div
+    :class="{
+      'mc-listbox': true,
+      [`mc-listbox--${props.position}`]: true,
+    }"
+  >
+    <div
+      ref="popover"
+      class="mc-listbox__content"
+      v-bind="$slots.activator ? { id, popover: '' } : {}"
+    >
       <div class="mc-listbox__header">
         <h3 v-if="title" class="mc-listbox__title">{{ title }}</h3>
-        <MIconButton class="mc-listbox__close" ghost aria-label="Close">
+        <MIconButton
+          class="mc-listbox__close"
+          ghost
+          aria-label="Close"
+          @click="close"
+        >
           <template #icon>
             <Cross24 aria-hidden="true" />
           </template>
@@ -42,45 +56,85 @@
       </div>
     </div>
   </div>
+
+  <slot name="activator" v-bind="{ id }" />
 </template>
 
 <script setup lang="ts">
-import type { Component } 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';
+
 /**
  * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
  */
-defineProps<{
-  /**
-   * title displayed in mobile version.
-   */
-  title?: string;
-  /**
-   * An array of objects that allows you to provide all the data needed to generate the content for each item.
-   */
-  items: Array<{
+const props = withDefaults(
+  defineProps<{
     /**
-     * The icon displayed for the item from Mozaic-icon-vue.
+     * title displayed in mobile version.
      */
-    icon?: Component;
-    /**
-     * The label displayed for the item.
-     */
-    label: string;
-    /**
-     * If `true`, the item will be disabled.
-     */
-    disabled?: boolean;
+
+    title?: string;
     /**
-     * Allows to define the item appearance.
+     * Defines the position of the listbox relative to its trigger or container.
      */
-    appearance?: 'standard' | 'danger';
+    position?: 'top' | 'bottom' | 'left' | 'right';
     /**
-     * Add a divider on top of the item.
+     * An array of objects that allows you to provide all the data needed to generate the content for each item.
      */
-    divider?: boolean;
-  }>;
+
+    items: Array<{
+      /**
+       * The icon displayed for the item from Mozaic-icon-vue.
+       */
+      icon?: Component;
+      /**
+       * The label displayed for the item.
+       */
+      label: string;
+      /**
+       * If `true`, the item will be disabled.
+       */
+      disabled?: boolean;
+      /**
+       * Allows to define the item appearance.
+       */
+      appearance?: 'standard' | 'danger';
+      /**
+       * Add a divider on top of the item.
+       */
+      divider?: boolean;
+    }>;
+  }>(),
+  { position: 'bottom' },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the close button is clicked.
+   */
+  (on: 'close'): void;
 }>();
+
+const slots = defineSlots<{
+  /**
+   * Activator element that triggers the listbox.
+   */
+  activator?: VNode[];
+}>();
+
+const id = useId();
+
+const popover = useTemplateRef('popover');
+
+function close() {
+  emit('close');
+
+  if (slots.activator) {
+    popover.value?.hidePopover();
+  }
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/actionlistbox/README.md

@@ -8,18 +8,33 @@ An action list is a contextual menu that presents a list of available actions re
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `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; }[]` | - |
 
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `activator` | Activator element that triggers the listbox. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `close` | Emits when the close button is clicked. | [] |
+
 ## Dependencies
 
 ### Depends on
 
 - [MDivider](../divider)
+- [MIconButton](../iconbutton)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  MActionListbox --> MIconButton
   MActionListbox --> MDivider
 style MActionListbox fill:#008240,stroke:#333,stroke-width:4px
 ```

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

@@ -14,9 +14,13 @@
           :class="{
             'mc-breadcrumb__current': isLastLink(index),
           }"
+          iconPosition="right"
           :aria-current="isLastLink(index) ? 'page' : undefined"
         >
           {{ link.label }}
+          <template v-if="index !== links.length - 1" #icon>
+            <ChevronRight20 />
+          </template>
         </MLink>
       </li>
     </ul>
@@ -26,6 +30,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import MLink from '../link/MLink.vue';
+import { ChevronRight20 } from '@mozaic-ds/icons-vue';
 /**
  * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
  */

package/src/components/button/README.md

@@ -40,17 +40,21 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 ### Used By
 
 - [MFileUploaderItem](../fileuploaderitem)
+- [MNavigationIndicator](../navigationindicator)
 - [MPagination](../pagination)
 - [MPasswordInput](../passwordinput)
 - [MStepperBottomBar](../stepperbottombar)
+- [MTileExpandable](../tileexpandable)
 
 ### Graph
 
 ```mermaid
 graph TD;
   MFileUploaderItem --> MButton
+  MNavigationIndicator --> MButton
   MPagination --> MButton
   MPasswordInput --> MButton
   MStepperBottomBar --> MButton
+  MTileExpandable --> MButton
 style MButton fill:#008240,stroke:#333,stroke-width:4px
 ```

package/src/components/checkbox/README.md

@@ -27,11 +27,13 @@ A checkbox is an interactive component used to select or deselect an option, typ
 ### Used By
 
 - [MCheckboxGroup](../checkboxgroup)
+- [MTileSelectable](../tileselectable)
 
 ### Graph
 
 ```mermaid
 graph TD;
   MCheckboxGroup --> MCheckbox
+  MTileSelectable --> MCheckbox
 style MCheckbox fill:#008240,stroke:#333,stroke-width:4px
 ```

package/src/components/divider/README.md

@@ -24,6 +24,8 @@ A divider is a visual element used to separate content or sections within an int
 - [MActionBottomBar](../actionbottombar)
 - [MActionListbox](../actionlistbox)
 - [MFileUploaderItem](../fileuploaderitem)
+- [MSidebarFooter](../sidebarfooter)
+- [_MSidebarFooterMenu](../sidebarfooter)
 - [MStepperBottomBar](../stepperbottombar)
 - [MTabs](../tabs)
 
@@ -34,6 +36,8 @@ graph TD;
   MActionBottomBar --> MDivider
   MActionListbox --> MDivider
   MFileUploaderItem --> MDivider
+  MSidebarFooter --> MDivider
+  _MSidebarFooterMenu --> MDivider
   MStepperBottomBar --> MDivider
   MTabs --> MDivider
 style MDivider fill:#008240,stroke:#333,stroke-width:4px

package/src/components/iconbutton/MIconButton.stories.ts

@@ -87,6 +87,18 @@ export const Ghost: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: { isLoading: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A loader replaces the icon to indicate that an action is in progress. Mouse events are prohibited.',
+      },
+    },
+  },
+};
+
 export const Standard: Story = {
   args: { appearance: 'standard' },
   parameters: {

package/src/components/iconbutton/MIconButton.vue

@@ -5,7 +5,14 @@
     :disabled="disabled"
     :type="type"
   >
-    <span class="mc-button__icon">
+    <span
+      v-if="isLoading"
+      class="mc-button__icon"
+      :style="{ position: 'absolute' }"
+    >
+      <MLoader :style="{ color: 'currentColor' }" size="s" />
+    </span>
+    <span v-else class="mc-button__icon">
       <slot name="icon" />
     </span>
   </button>
@@ -13,6 +20,7 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
+import MLoader from '../loader/MLoader.vue';
 /**
  * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
  */
@@ -42,6 +50,10 @@ const props = withDefaults(
      * Specifies the button's HTML `type` attribute.
      */
     type?: 'button' | 'reset' | 'submit';
+    /**
+     * If `true`, a loading state is displayed.
+     */
+    isLoading?: boolean;
   }>(),
   {
     appearance: 'standard',