@mozaic-ds/vue 2.13.0 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.13.0",
+  "version": "2.14.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,7 +50,7 @@
     "@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",
@@ -68,7 +68,7 @@
     "eslint-plugin-vue": "^10.0.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "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/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,79 @@ 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,94 @@
       </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/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',

package/src/components/iconbutton/README.md

@@ -13,6 +13,7 @@ Buttons are key interactive elements used to perform actions and can be used as
 | `ghost` | If `true`, applies a "ghost" style to the icon button. | `boolean` | - |
 | `outlined` | If `true`, the icon button gets an outlined style. | `boolean` | - |
 | `type` | Specifies the button's HTML `type` attribute. | `"button"` `"reset"` `"submit"` | `"button"` |
+| `isLoading` | If `true`, a loading state is displayed. | `boolean` | - |
 
 ## Slots
 
@@ -22,24 +23,50 @@ Buttons are key interactive elements used to perform actions and can be used as
 
 ## Dependencies
 
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MIconButton --> MLoader
+style MIconButton fill:#008240,stroke:#333,stroke-width:4px
+```
+
 ### Used By
 
+- [MActionListbox](../actionlistbox)
 - [MCarousel](../carousel)
 - [MDrawer](../drawer)
 - [MModal](../modal)
+- [MNavigationIndicator](../navigationindicator)
+- [MPageHeader](../pageheader)
 - [MPagination](../pagination)
+- [MPopover](../popover)
+- [MSidebar](../sidebar)
+- [MSidebarFooter](../sidebarfooter)
 - [MStatusNotification](../statusnotification)
+- [MTileExpandable](../tileexpandable)
 - [MToaster](../toaster)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  MActionListbox --> MIconButton
   MCarousel --> MIconButton
   MDrawer --> MIconButton
   MModal --> MIconButton
+  MNavigationIndicator --> MIconButton
+  MPageHeader --> MIconButton
   MPagination --> MIconButton
+  MPopover --> MIconButton
+  MSidebar --> MIconButton
+  MSidebarFooter --> MIconButton
   MStatusNotification --> MIconButton
+  MTileExpandable --> MIconButton
   MToaster --> MIconButton
 style MIconButton fill:#008240,stroke:#333,stroke-width:4px
 ```

package/src/components/loader/README.md

@@ -17,6 +17,7 @@ A loader is a visual indicator used to inform users that a process is in progres
 
 - [MButton](../button)
 - [MField](../field)
+- [MIconButton](../iconbutton)
 - [MLoadingOverlay](../loadingoverlay)
 - [MStatusMessage](../statusmessage)
 
@@ -26,6 +27,7 @@ A loader is a visual indicator used to inform users that a process is in progres
 graph TD;
   MButton --> MLoader
   MField --> MLoader
+  MIconButton --> MLoader
   MLoadingOverlay --> MLoader
   MStatusMessage --> MLoader
 style MLoader fill:#008240,stroke:#333,stroke-width:4px