@mozaic-ds/vue 2.6.0 → 2.7.0

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,13 @@ 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'],
+  tags: ['v2'],
+  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 +55,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/divider/README.md

@@ -0,0 +1,18 @@
+# MDivider
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `orientation` | Determines the orientation of the divider. | `"horizontal"` `"vertical"` | `"horizontal"` |
+| `appearance` | Determines the appearance of the divider. | `"inverse"` `"primary"` `"secondary"` `"tertiary"` | `"primary"` |
+| `size` | Determines the size of the divider. | `"s"` `"m"` `"l"` | `"s"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the content who need a vertical divider |

package/src/components/drawer/MDrawer.spec.ts

@@ -97,4 +97,32 @@ describe('MDrawer component', () => {
 
     expect(wrapper.find('.mc-drawer__back').exists()).toBe(false);
   });
+
+  it('sets the focus on the title when the drawer opens', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        title: 'Test Title',
+      },
+      attachTo: document.body,
+    });
+
+    const titleElement = wrapper.find('.mc-drawer__title').element;
+    expect(document.activeElement).not.toBe(titleElement);
+    await wrapper.setProps({ open: true });
+    expect(document.activeElement).toBe(titleElement);
+  });
+
+  it('does not set the focus on the title when the drawer closes', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        title: 'Test Title',
+        open: true
+      },
+      attachTo: document.body,
+    });
+
+    const titleElement = wrapper.find('.mc-drawer__title').element;
+    await wrapper.setProps({ open: false });
+    expect(document.activeElement).not.toBe(titleElement);
+  });
 });

package/src/components/drawer/MDrawer.stories.ts

@@ -7,6 +7,7 @@ import { ref, watch } from 'vue';
 const meta: Meta<typeof MDrawer> = {
   title: 'Overlay/Drawer',
   component: MDrawer,
+  tags: ['v2'],
   parameters: {
     layout: 'fullscreen',
     docs: {

package/src/components/drawer/MDrawer.vue

@@ -24,7 +24,7 @@
               <ArrowBack24 aria-hidden="true" />
             </template>
           </MIconButton>
-          <h2 class="mc-drawer__title" id="drawerTitle">{{ title }}</h2>
+          <h2 class="mc-drawer__title" tabindex="-1" id="drawerTitle" ref="titleRef">{{ title }}</h2>
           <MIconButton
             class="mc-drawer__close"
             aria-label="Close"
@@ -53,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, type VNode } from 'vue';
+import { computed, watch, type VNode, ref } from 'vue';
 import ArrowBack24 from '@mozaic-ds/icons-vue/src/components/ArrowBack24/ArrowBack24.vue';
 import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
 import MIconButton from '../iconbutton/MIconButton.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;
 }>();
@@ -115,6 +115,13 @@ watch(
   },
 );
 
+const titleRef = ref<HTMLElement | null>(null);
+watch(() => props.open, (newValue) => {
+  if (newValue && titleRef.value) {
+    titleRef.value.focus();
+  }
+});
+
 const onClose = () => {
   emit('update:open', false);
 };
@@ -129,6 +136,10 @@ const emit = defineEmits<{
    */
   (on: 'back'): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/drawer/README.md

@@ -0,0 +1,29 @@
+# MDrawer
+
+A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `open` | If `true`, display the drawer. | `boolean` | - |
+| `position` | Position of the drawer. | `"left"` `"right"` | - |
+| `extended` | If `true`, the drawer have a bigger width. | `boolean` | - |
+| `back` | If `true`, display the back button. | `boolean` | - |
+| `title*` | Title of the drawer. | `string` | - |
+| `contentTitle` | Title of the content of the drawer. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the content of the drawer |
+| `footer` | Use this slot to insert buttons in the footer |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `back` | Emits when click back button of the drawer. | [] |
+| `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |

package/src/components/field/MField.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
 /**
- * This component creates a structured form field with a label, optional help text, error and validation message handling.
+ * 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.
  */
 const props = defineProps<{
   /**

package/src/components/field/README.md

@@ -0,0 +1,24 @@
+# MField
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the form field, used to associate the label with the form element. | `string` | - |
+| `label*` | The text displayed as the label for the form field. | `string` | - |
+| `requirementText` | Additional text displayed alongside the label, typically used to indicate if the form field is required or optional | `string` | - |
+| `helpText` | Text shown below the form field to provide additional context or instructions for the user. | `string` | - |
+| `helpId` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` | - |
+| `isValid` | If `true`, applies a valid state to the form field. | `boolean` | - |
+| `isInvalid` | If `true`, applies an invalid state to the form field. | `boolean` | - |
+| `messageId` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` | - |
+| `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the form element of your choice |

package/src/components/fieldgroup/README.md

@@ -0,0 +1,22 @@
+# MFieldGroup
+
+This component creates a structured form field for group field such as Radio Group, Checkbox Group or Toggle Group with a label, optional help text, error and validation message handling.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the form field, used to associate the label with the form element. | `string` | - |
+| `legend*` | The text displayed as the legend for the form fieldset. | `string` | - |
+| `requirementText` | Additional text displayed alongside the label, typically used to indicate if the form field is required or optional | `string` | - |
+| `helpText` | Text shown below the form field to provide additional context or instructions for the user. | `string` | - |
+| `isValid` | If `true`, applies a valid state to the form field. | `boolean` | - |
+| `isInvalid` | If `true`, applies an invalid state to the form field. | `boolean` | - |
+| `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the form element of your choice |

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/flag/README.md

@@ -0,0 +1,11 @@
+# MFlag
+
+A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | Label of the Flag. | `string` | - |
+| `appearance` | Allows to define the Flag appearance. | `"standard"` `"inverse"` `"accent"` `"danger"` | - |

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

@@ -8,6 +8,7 @@ import ChevronRight32 from '@mozaic-ds/icons-vue/src/components/ChevronRight32/C
 const meta: Meta<typeof MIconButton> = {
   title: 'Action/Icon Button',
   component: MIconButton,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

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<{
@@ -52,7 +52,7 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert the form element of your choice
+   * Use this slot to insert an icon for the Button.
    */
   icon: VNode;
 }>();

package/src/components/iconbutton/README.md

@@ -0,0 +1,21 @@
+# MIconButton
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Defines the visual style of the icon button. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `size` | Determines the size of the icon button. | `"s"` `"m"` `"l"` | `"m"` |
+| `disabled` | If `true`, disables the icon button, making it non-interactive. | `boolean` | - |
+| `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"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon for the Button. |

package/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.stories.ts

@@ -4,6 +4,7 @@ import MLinearProgressbarBuffer from './MLinearProgressbarBuffer.vue';
 const meta: Meta<typeof MLinearProgressbarBuffer> = {
   title: 'Indicators/Linear Progress Bar (Buffer)',
   component: MLinearProgressbarBuffer,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

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/linearprogressbarbuffer/README.md

@@ -0,0 +1,11 @@
+# MLinearProgressbarBuffer
+
+A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `size` | Allows to define the progress bar size. | `"s"` `"m"` `"l"` | - |
+| `value` | The current value of the progress bar. | `number` | `0` |

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.stories.ts

@@ -4,6 +4,7 @@ import MLinearProgressbarPercentage from './MLinearProgressbarPercentage.vue';
 const meta: Meta<typeof MLinearProgressbarPercentage> = {
   title: 'Indicators/Linear Progress Bar (Percentage)',
   component: MLinearProgressbarPercentage,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue

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

package/src/components/linearprogressbarpercentage/README.md

@@ -0,0 +1,10 @@
+# MLinearProgressbarPercentage
+
+A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `value` | The current value of the progress bar. | `number` | `0` |

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;
     /**
@@ -64,8 +62,6 @@ const props = withDefaults(
     router?: boolean;
   }>(),
   {
-    href: undefined,
-    target: undefined,
     appearance: 'standard',
     size: 's',
     iconPosition: 'left',
@@ -74,11 +70,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 +88,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/link/README.md

@@ -0,0 +1,23 @@
+# MLink
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `iconPosition` | Position of the icon relative to the text. | `"left"` `"right"` | `"left"` |
+| `appearance` | Allows to define the link appearance. | `"standard"` `"inverse"` `"accent"` `"secondary"` | `"standard"` |
+| `size` | Allows to define the link size. | `"s"` `"m"` | `"s"` |
+| `href` | URL for the link (for external links or the `to` prop for `router-link`). | `string` | - |
+| `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |
+| `inline` | Specify wether the link is inline. | `boolean` | - |
+| `router` | If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router). | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the textual content of the Link. |
+| `icon` | Use this slot to insert an icon for the Link. |

package/src/components/loader/MLoader.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 /**
- * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
+ * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
  */
 const props = withDefaults(
   defineProps<{

package/src/components/loader/README.md

@@ -0,0 +1,12 @@
+# MLoader
+
+A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Specifies the visual appearance of the loader. | `"standard"` `"inverse"` `"accent"` | `"standard"` |
+| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` | `"m"` |
+| `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` | - |

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.',
       },
     },
   },