@mozaic-ds/vue 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -67,7 +67,7 @@
     "eslint-plugin-vue": "^10.0.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "husky": "^9.1.7",
-    "jsdom": "^26.0.0",
+    "jsdom": "^27.0.0",
     "lint-staged": "^16.1.5",
     "mdx-mermaid": "^2.0.3",
     "mermaid": "^11.5.0",

package/src/components/avatar/MAvatar.vue

@@ -12,7 +12,7 @@ import { computed, type VNode } from 'vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * Allows to define the avatar size
+     * Allows to define the avatar size.
      */
     size?: 's' | 'm' | 'l';
   }>(),
@@ -29,7 +29,7 @@ const classObject = computed(() => {
 
 defineSlots<{
   /**
-   * Use this slot to insert the image, icon or intials of the avatar
+   * Use this slot to insert the image, icon or intials of the avatar.
    */
   default: VNode;
 }>();

package/src/components/breadcrumb/MBreadcrumb.stories.ts

@@ -35,6 +35,7 @@ const meta: Meta<typeof MBreadcrumb> = {
         router: true,
       },
     ],
+    ariaLabel: 'breadcrumb',
   },
   render: (args) => ({
     components: { MBreadcrumb },

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="mc-breadcrumb" :class="classObject" aria-label="Breadcrumb">
+  <nav class="mc-breadcrumb" :class="classObject">
     <ul class="mc-breadcrumb__container">
       <li
         class="mc-breadcrumb__item"
@@ -31,11 +31,11 @@ import MLink from '../link/MLink.vue';
  */
 const props = defineProps<{
   /**
-   * Allows to define the breadcrumb style
+   * Allows to define the breadcrumb appearance.
    */
   appearance?: 'standard' | 'inverse';
   /**
-   * Links of the breadcrumb
+   * Links of the breadcrumb.
    */
   links: Array<{
     /**

package/src/components/button/MButton.vue

@@ -41,7 +41,7 @@
 import { computed, type VNode } from 'vue';
 import MLoader from '../loader/MLoader.vue';
 /**
- * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ * 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.
  */
 const props = withDefaults(
   defineProps<{

package/src/components/callout/MCallout.vue

@@ -25,15 +25,15 @@ import { computed, type VNode } from 'vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * Title of the callout
+     * Title of the callout.
      */
     title: string;
     /**
-     * Description of the callout
+     * Description of the callout.
      */
     description: string;
     /**
-     * Allows to define the callout style
+     * Allows to define the callout appearance.
      */
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
   }>(),
@@ -44,11 +44,11 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert an icon
+   * Use this slot to insert an icon.
    */
   icon?: VNode;
   /**
-   * Use this slot to insert a button or a link in the footer of the callout
+   * Use this slot to insert a button or a link in the footer of the callout.
    */
   footer?: VNode;
 }>();

package/src/components/checkbox/MCheckbox.vue

@@ -25,7 +25,7 @@
 import { computed } from 'vue';
 
 /**
- * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
  */
 const props = defineProps<{
   /**
@@ -80,6 +80,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: boolean): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/checkboxgroup/MCheckboxGroup.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MCheckboxGroup> = {
     docs: {
       description: {
         component:
-          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#checkbox-group).',
+          'A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).',
       },
     },
   },

package/src/components/checkboxgroup/MCheckboxGroup.vue

@@ -22,7 +22,7 @@ import { computed, ref, watch } from 'vue';
 import MCheckbox from '../checkbox/MCheckbox.vue';
 
 /**
- * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
  */
 const props = defineProps<{
   /**

package/src/components/circularprogressbar/MCircularProgressbar.vue

@@ -51,7 +51,7 @@ import { computed } from 'vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * Allows to define the progress bar size
+     * Sets the size of the progress bar.
      */
     size?: 's' | 'm' | 'l';
     /**
@@ -59,7 +59,7 @@ const props = withDefaults(
      */
     value?: number;
     /**
-     * Display type: `'percentage'` or `'content'`.
+     * Shows either a percentage or custom content.
      */
     type?: 'percentage' | 'content';
     /**

package/src/components/container/MContainer.stories.ts

@@ -5,7 +5,7 @@ const meta: Meta<typeof MContainer> = {
   title: 'Foundations/Container',
   component: MContainer,
   args: {
-    default: `<h1>Container</h1>`
+    default: `<h1>Container</h1>`,
   },
   render: (args) => ({
     components: { MContainer },
@@ -25,8 +25,8 @@ type Story = StoryObj<typeof MContainer>;
 export const Standard: Story = {};
 
 export const Fluid: Story = {
-  args: { 
+  args: {
     fluid: true,
-    default: `<h1>Fluid Container</h1>`
+    default: `<h1>Fluid Container</h1>`,
   },
 };

package/src/components/container/MContainer.vue

@@ -11,14 +11,14 @@ import { computed, type VNode } from 'vue';
  */
 const props = defineProps<{
   /**
-   * Determines the orientation of the divider
+   * If `true`, the container will take the full width.
    */
   fluid?: boolean;
 }>();
 
 defineSlots<{
   /**
-   * Use this slot to insert the content of the container
+   * Use this slot to insert the content of the container.
    */
   default?: VNode;
 }>();

package/src/components/datepicker/MDatepicker.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MDatepicker> = {
     docs: {
       description: {
         component:
-          'A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.',
+          'A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).',
       },
     },
   },

package/src/components/datepicker/MDatepicker.vue

@@ -38,7 +38,7 @@
 import { computed, ref } from 'vue';
 import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
 /**
- * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+ * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
  */
 const props = withDefaults(
   defineProps<{
@@ -63,7 +63,7 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Determines the size of the datepicker
+     * Determines the size of the datepicker.
      */
     size?: 's' | 'm';
     /**
@@ -75,7 +75,7 @@ const props = withDefaults(
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
   }>(),
@@ -105,6 +105,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/divider/MDivider.spec.ts

@@ -19,9 +19,9 @@ describe('MDivider component', () => {
     expect(innerDiv.classes()).toContain('mc-divider-vertical');
   });
 
-  it('applies the correct style class', () => {
+  it('applies the correct appearance class', () => {
     const wrapper = mount(MDivider, {
-      props: { style: 'secondary' },
+      props: { appearance: 'secondary' },
     });
     const innerDiv = wrapper.find('.mc-divider > div');
     expect(innerDiv.classes()).toContain('mc-divider-horizontal--secondary');
@@ -38,7 +38,7 @@ describe('MDivider component', () => {
   it('uses default props when none are provided', () => {
     const wrapper = mount(MDivider);
     expect(wrapper.props().orientation).toBe('horizontal');
-    expect(wrapper.props().style).toBe('primary');
+    expect(wrapper.props().appearance).toBe('primary');
     expect(wrapper.props().size).toBe('s');
   });
 
@@ -46,12 +46,12 @@ describe('MDivider component', () => {
     const wrapper = mount(MDivider, {
       props: {
         orientation: 'vertical',
-        style: 'tertiary',
+        appearance: 'tertiary',
         size: 'l',
       },
     });
     expect(wrapper.props().orientation).toBe('vertical');
-    expect(wrapper.props().style).toBe('tertiary');
+    expect(wrapper.props().appearance).toBe('tertiary');
     expect(wrapper.props().size).toBe('l');
   });
 });

package/src/components/divider/MDivider.stories.ts

@@ -4,18 +4,12 @@ import MDivider from './MDivider.vue';
 const meta: Meta<typeof MDivider> = {
   title: 'Structure/Divider',
   component: MDivider,
-  argTypes: {
-    orientation: {
-      control: 'radio',
-      options: ['horizontal', 'vertical'],
-    },
-    style: {
-      control: 'radio',
-      options: ['primary', 'secondary', 'tertiary', 'inverse'],
-    },
-    size: {
-      control: 'radio',
-      options: ['s', 'm', 'l'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.',
+      },
     },
   },
   render: (args) => ({
@@ -60,5 +54,5 @@ export const Size: Story = {
 };
 
 export const Secondary: Story = {
-  args: { style: 'secondary' },
+  args: { appearance: 'secondary' },
 };

package/src/components/divider/MDivider.vue

@@ -8,26 +8,26 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 /**
- * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Determines the orientation of the divider
+     * Determines the orientation of the divider.
      */
     orientation?: 'vertical' | 'horizontal';
     /**
-     * Determines the style of the divider
+     * Determines the appearance of the divider.
      */
-    style?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
     /**
-     * Determines the size of the divider
+     * Determines the size of the divider.
      */
     size?: 's' | 'm' | 'l';
   }>(),
   {
     orientation: 'horizontal',
-    style: 'primary',
+    appearance: 'primary',
     size: 's',
   },
 );
@@ -42,8 +42,8 @@ defineSlots<{
 const classObject = computed(() => {
   return {
     [`mc-divider-${props.orientation}`]: props.orientation,
-    [`mc-divider-horizontal--${props.style}`]:
-      props.style && props.style != 'primary',
+    [`mc-divider-horizontal--${props.appearance}`]:
+      props.appearance && props.appearance != 'primary',
     [`mc-divider-horizontal--${props.size}`]: props.size && props.size != 's',
   };
 });

package/src/components/drawer/MDrawer.vue

@@ -67,7 +67,7 @@ const props = defineProps<{
    */
   open?: boolean;
   /**
-   * Position of the drawer
+   * Position of the drawer.
    */
   position?: 'left' | 'right';
   /**
@@ -79,11 +79,11 @@ const props = defineProps<{
    */
   back?: boolean;
   /**
-   * Title of the drawer
+   * Title of the drawer.
    */
   title: string;
   /**
-   * Title of the content of the drawer
+   * Title of the content of the drawer.
    */
   contentTitle?: string;
 }>();
@@ -129,6 +129,10 @@ const emit = defineEmits<{
    */
   (on: 'back'): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/flag/MFlag.vue

@@ -13,11 +13,11 @@ import { computed } from 'vue';
  */
 const props = defineProps<{
   /**
-   * Label of the Flag
+   * Label of the Flag.
    */
   label: string;
   /**
-   * Allows to define the Flag style
+   * Allows to define the Flag appearance.
    */
   appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 }>();

package/src/components/iconbutton/MIconButton.vue

@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 /**
- * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ * 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.
  */
 const props = withDefaults(
   defineProps<{

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue

@@ -20,7 +20,7 @@ import { computed } from 'vue';
 const props = withDefaults(
   defineProps<{
     /**
-     * Allows to define the progress bar size
+     * Allows to define the progress bar size.
      */
     size?: 's' | 'm' | 'l';
     /**
@@ -39,6 +39,10 @@ const classObject = computed(() => {
       props.size && props.size != 'm',
   };
 });
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue

@@ -34,6 +34,10 @@ withDefaults(
     value: 0,
   },
 );
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/link/MLink.stories.ts

@@ -4,13 +4,13 @@ import ChevronLeft24 from '@mozaic-ds/icons-vue/src/components/ChevronLeft24/Che
 import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
 
 const meta: Meta<typeof MLink> = {
-  title: 'Navigation/Link (stand alone)',
+  title: 'Navigation/Link',
   component: MLink,
   parameters: {
     docs: {
       description: {
         component:
-          'A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.',
+          'A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.',
       },
     },
   },

package/src/components/link/MLink.vue

@@ -3,9 +3,7 @@
     :is="router ? 'router-link' : 'a'"
     class="mc-link"
     :class="classObject"
-    :href="href"
-    :target="target"
-    :to="router ? href : undefined"
+    v-bind="linkProps"
   >
     <span
       v-if="$slots.icon && iconPosition == 'left'"
@@ -30,7 +28,7 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 /**
- * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
+ * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
  */
 const props = withDefaults(
   defineProps<{
@@ -39,11 +37,11 @@ const props = withDefaults(
      */
     iconPosition?: 'left' | 'right';
     /**
-     * Allows to define the link style
+     * Allows to define the link appearance.
      */
     appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
     /**
-     * Allows to define the link size
+     * Allows to define the link size.
      */
     size?: 's' | 'm';
     /**
@@ -51,11 +49,11 @@ const props = withDefaults(
      */
     href?: string;
     /**
-     * Where to open the link
+     * Where to open the link.
      */
     target?: '_self' | '_blank' | '_parent' | '_top';
     /**
-     * Specify wether the link is inline
+     * Specify wether the link is inline.
      */
     inline?: boolean;
     /**
@@ -74,11 +72,11 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert the textual content of the Link
+   * Use this slot to insert the textual content of the Link.
    */
   default: string;
   /**
-   * Use this slot to insert an icon for the Link
+   * Use this slot to insert an icon for the Link.
    */
   icon?: VNode;
 }>();
@@ -92,6 +90,20 @@ const classObject = computed(() => {
     'mc-link--stand-alone': !props.inline,
   };
 });
+
+const linkProps = computed(() => {
+  if (props.router) {
+    return {
+      to: props.href,
+      target: props.target,
+    };
+  }
+
+  return {
+    href: props.href,
+    target: props.target,
+  };
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/loadingoverlay/MLoadingOverlay.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MLoadingOverlay> = {
       story: { height: '400px' },
       description: {
         component:
-          'An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.',
+          'A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.',
       },
     },
   },

package/src/components/loadingoverlay/MLoadingOverlay.vue

@@ -21,6 +21,10 @@ defineProps<{
    */
   text?: string;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/modal/MModal.vue

@@ -61,11 +61,11 @@ const props = withDefaults(
      */
     open?: boolean;
     /**
-     * Title of the modal
+     * Title of the modal.
      */
     title: string;
     /**
-     * Description of the modal
+     * Description of the modal.
      */
     description?: string;
     /**
@@ -80,19 +80,19 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert an icon next to the title of the modal
+   * Use this slot to insert an icon next to the title of the modal.
    */
   icon?: VNode;
   /**
-   * Use this slot to insert the content of the modal
+   * Use this slot to insert the content of the modal.
    */
   default?: VNode;
   /**
-   * Use this slot to insert a link in the footer
+   * Use this slot to insert a link in the footer.
    */
   link?: VNode;
   /**
-   * Use this slot to insert buttons in the footer
+   * Use this slot to insert buttons in the footer.
    */
   footer?: VNode;
 }>();
@@ -116,10 +116,14 @@ const onClose = () => {
 
 const emit = defineEmits<{
   /**
-   * Emits when the checkbox value changes, updating the modelValue prop.
+   * Emits when the modal display changes, updating the modelValue prop.
    */
   (on: 'update:open', value: boolean): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>