@mozaic-ds/vue 2.5.0 → 2.6.1

package/src/components/numberbadge/MNumberBadge.vue

@@ -7,21 +7,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 /**
- * A badge indicates the status of an entity and can evolve at any time.
+ * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Content of the badge
+     * Content of the badge.
      */
     label: number;
     /**
-     * Allows to define the Badge style
+     * Allows to define the badge appearance.
      */
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 
     /**
-     * Allows to define the Badge size
+     * Allows to define the badge size.
      */
     size?: 's' | 'm';
   }>(),

package/src/components/overlay/MOverlay.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MOverlay> = {
       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.',
+          'An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.',
       },
     },
   },

package/src/components/overlay/MOverlay.vue

@@ -10,7 +10,7 @@
 import type { VNode } from 'vue';
 
 /**
- * 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.
+ * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
  */
 defineProps<{
   /**
@@ -25,7 +25,7 @@ defineProps<{
 
 defineSlots<{
   /**
-   * Use this slot to insert a centered content inside the overlay
+   * Use this slot to insert a centered content inside the overlay.
    */
   default?: VNode;
 }>();

package/src/components/pagination/MPagination.stories.ts

@@ -40,6 +40,7 @@ const meta: Meta<typeof MPagination> = {
       },
     ],
     selectLabel: 'Select page',
+    ariaLabel: 'pagination',
   },
   render: (args) => ({
     components: { MPagination },

package/src/components/pagination/MPagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="mc-pagination" role="navigation" aria-label="pagination">
+  <nav class="mc-pagination" role="navigation">
     <MButton
       v-if="!compact"
       icon-position="only"

package/src/components/passwordinput/MPasswordInput.vue

@@ -81,11 +81,11 @@ const props = withDefaults(
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
     /**
-     * Labels of the button displayed when showing or hiding the password
+     * Labels of the button displayed when showing or hiding the password.
      */
     buttonLabel?: {
       show: string;
@@ -137,6 +137,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/pincode/MPincode.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MPincode> = {
     docs: {
       description: {
         component:
-          'A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.',
+          'A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<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/pincode/MPincode.vue

@@ -32,7 +32,7 @@ import {
   type ComponentPublicInstance,
 } from 'vue';
 /**
- * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+ * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<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<{
@@ -141,6 +141,10 @@ const onPaste = (e: ClipboardEvent) => {
   emit('update:modelValue', otp.value.join(''));
   focusInput(Math.min(digits.length, props.length - 1));
 };
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/quantityselector/MQuantitySelector.stories.ts

@@ -10,7 +10,7 @@ const meta: Meta<typeof MQuantitySelector> = {
     docs: {
       description: {
         component:
-          'A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.',
+          'A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.<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/quantityselector/MQuantitySelector.vue

@@ -55,7 +55,7 @@ import More24 from '@mozaic-ds/icons-vue/src/components/More24/More24.vue';
 import Less24 from '@mozaic-ds/icons-vue/src/components/Less24/Less24.vue';
 
 /**
- * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.
+ * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
  */
 const props = withDefaults(
   defineProps<{
@@ -80,7 +80,7 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Determines the size of the quantity selector
+     * Determines the size of the quantity selector.
      */
     size?: 's' | 'm';
     /**
@@ -170,6 +170,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/radio/MRadio.vue

@@ -24,7 +24,7 @@
 import { computed } from 'vue';
 
 /**
- * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
  */
 const props = defineProps<{
   /**
@@ -65,6 +65,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: boolean): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/radiogroup/MRadioGroup.vue

@@ -23,7 +23,7 @@ import { computed } from 'vue';
 import MRadio from '../radio/MRadio.vue';
 
 /**
- * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<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#radio-group).
  */
 const props = defineProps<{
   /**

package/src/components/select/MSelect.vue

@@ -30,7 +30,7 @@
 import { computed } from 'vue';
 
 /**
- * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<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#select).
  */
 const props = withDefaults(
   defineProps<{
@@ -69,7 +69,7 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Determines the size of the select
+     * Determines the size of the select.
      */
     size?: 's' | 'm';
     /**
@@ -96,6 +96,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/statusbadge/MStatusBadge.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<typeof MStatusBadge> = {
     docs: {
       description: {
         component:
-          'A status badge indicates the status of an entity and can evolve at any time.',
+          'A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.',
       },
     },
   },

package/src/components/statusbadge/MStatusBadge.vue

@@ -9,16 +9,16 @@
 import { computed } from 'vue';
 import MStatusDot from '../statusdot/MStatusDot.vue';
 /**
- * A status badge indicates the status of an entity and can evolve at any time.
+ * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Content of the Status Badge
+     * Content of the status badge
      */
     label: string;
     /**
-     * Allows to define the Status Badge style
+     * Allows to define the status badge type
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
   }>(),

package/src/components/statusdot/MStatusDot.vue

@@ -5,16 +5,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 /**
- * A badge indicates the status of an entity and can evolve at any time.
+ * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Allows to define the Status Dot style
+     * Allows to define the status dot type.
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
     /**
-     * Determines the size of the Status Dot.
+     * Determines the size of the status dot.
      */
     size?: 's' | 'm' | 'l';
   }>(),

package/src/components/statusnotification/MStatusNotification.vue

@@ -17,17 +17,18 @@
       </div>
     </div>
 
-    <button
+    <MIconButton
       v-if="closable"
       class="mc-status-notification-closable__close"
+      size="s"
+      ghost
+      aria-label="Close"
       @click="emit('close')"
     >
-      <Cross20
-        class="mc-status-notification-closable__icon"
-        aria-hidden="true"
-      />
-      <span class="mc-status-notification-closable__text">Close</span>
-    </button>
+      <template #icon>
+        <Cross20 class="mc-button__icon" aria-hidden="true" />
+      </template>
+    </MIconButton>
   </section>
 </template>
 
@@ -38,21 +39,22 @@ import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFi
 import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
 import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
 import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import MIconButton from '../iconbutton/MIconButton.vue';
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
  */
 const props = withDefaults(
   defineProps<{
     /**
-     * Title of the Status Notification
+     * Title of the status notification.
      */
     title: string;
     /**
-     * Description of the Status Notification
+     * Description of the status notification.
      */
     description: string;
     /**
-     * Allows to define the Status Notification style
+     * Allows to define the status notification type.
      */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**

package/src/components/tabs/Mtabs.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MTabs from './MTabs.vue';
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, markRaw } from 'vue';
 
 describe('MTabs.vue', () => {
   const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }];
@@ -119,14 +119,14 @@ describe('MTabs.vue', () => {
   });
 
   it('renders icon component when icon prop is provided', () => {
-    const DummyIcon = defineComponent({
+    const DummyIcon = markRaw(defineComponent({
       name: 'DummyIcon',
       render() {
         return h('svg', { class: 'dummy-icon' }, [
           h('circle', { cx: 10, cy: 10, r: 10 }),
         ]);
       },
-    });
+    }));
 
     const tabsWithIcon = [
       { label: 'Tab 1', icon: DummyIcon },

package/src/components/tag/MTag.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<typeof MTag> = {
     docs: {
       description: {
         component:
-          'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
+          'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
       },
     },
   },

package/src/components/tag/MTag.vue

@@ -144,6 +144,10 @@ const emit = defineEmits<{
    */
   (on: 'remove-tag', id: string): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/textarea/MTextArea.vue

@@ -23,7 +23,7 @@
 import { computed } from 'vue';
 
 /**
- * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<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#textarea).
  */
 const props = withDefaults(
   defineProps<{
@@ -85,6 +85,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/textinput/MTextInput.vue

@@ -41,7 +41,7 @@ import { computed, type VNode } from 'vue';
 import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
 
 /**
- * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
+ * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data 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<{
@@ -62,7 +62,7 @@ const props = withDefaults(
      */
     placeholder?: string;
     /**
-     * Defines the type of input
+     * Defines the type of input.
      */
     inputType?:
       | 'date'
@@ -81,7 +81,7 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Determines the size of the input
+     * Determines the size of the input.
      */
     size?: 's' | 'm';
     /**
@@ -93,7 +93,7 @@ const props = withDefaults(
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
   }>(),
@@ -106,7 +106,7 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert an icon in the input
+   * Use this slot to insert an icon in the input.
    */
   icon?: VNode;
 }>();
@@ -128,9 +128,13 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: string | number): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>
 @use '@mozaic-ds/styles/components/controls-options';
 @use '@mozaic-ds/styles/components/text-input';
-</style>
+</style>

package/src/components/toaster/MToaster.vue

@@ -58,11 +58,11 @@ import MLinearProgressbarBuffer from '../linearprogressbarbuffer/MLinearProgress
 const props = withDefaults(
   defineProps<{
     /**
-     * if `true`, display the Toaster.
+     * If `true`, display the Toaster.
      */
     open?: boolean;
     /**
-     * Position of the toaster
+     * Position of the toaster.
      */
     position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';
     /**
@@ -74,11 +74,11 @@ const props = withDefaults(
      */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**
-     * if `true`, display the close button.
+     * If `true`, display the close button.
      */
     closable?: boolean;
     /**
-     * if `true`, display the progress bar of the duration.
+     * If `true`, display the progress bar of the duration.
      */
     progress?: boolean;
     /**

package/src/components/toggle/MToggle.vue

@@ -24,7 +24,7 @@
 import { computed } from 'vue';
 
 /**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
  */
 const props = withDefaults(
   defineProps<{
@@ -45,7 +45,7 @@ const props = withDefaults(
      */
     modelValue?: boolean;
     /**
-     * Determines the size of the toggle
+     * Determines the size of the toggle.
      */
     size?: 's' | 'm';
     /**
@@ -70,6 +70,10 @@ const emit = defineEmits<{
    */
   (on: 'update:modelValue', value: boolean): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/togglegroup/MToggleGroup.vue

@@ -20,7 +20,7 @@ import { computed, ref, watch } from 'vue';
 import MToggle from '../toggle/MToggle.vue';
 
 /**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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#toggle-group).A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<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#toggle-group).
  */
 const props = defineProps<{
   /**
@@ -33,7 +33,7 @@ const props = defineProps<{
    */
   modelValue?: Array<string>;
   /**
-   * list of properties of each toggle of the toggle group
+   * List of properties of each toggle of the toggle group.
    */
   options: Array<{
     id: string;

package/src/components/tooltip/MTooltip.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="tooltip-story-wrapper">
-    <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
-      <slot />
-      <span :id="id" class="mc-tooltip__content" role="tooltip">
-        {{ text }}
-      </span>
-    </div>
+  <div class="mc-tooltip" :class="classObject" :aria-describedby="id">
+    <slot />
+    <span :id="id" class="mc-tooltip__content" role="tooltip">
+      {{ text }}
+    </span>
   </div>
 </template>
 
@@ -21,15 +19,15 @@ const props = withDefaults(
      */
     id: string;
     /**
-     * Content of the tooltip
+     * Content of the tooltip.
      */
     text: string;
     /**
-     * Determines the position of the tooltip
+     * Determines the position of the tooltip.
      */
     position?: 'top' | 'bottom' | 'left' | 'right';
     /**
-     * if `true`, the tooltip display a pointer.
+     * If `true`, the tooltip display a pointer.
      */
     pointer?: boolean;
   }>(),

package/src/main.ts

@@ -1,10 +1,10 @@
 export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
 export { default as MButton } from './components/button/MButton.vue';
+export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
-export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';
@@ -13,6 +13,8 @@ export { default as MField } from './components/field/MField.vue';
 export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
 export { default as MFlag } from './components/flag/MFlag.vue';
 export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
+export { default as MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
+export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue';
 export { default as MLink } from './components/link/MLink.vue';
 export { default as MLoader } from './components/loader/MLoader.vue';
 export { default as MLoadingOverlay } from './components/loadingoverlay/MLoadingOverlay.vue';
@@ -22,13 +24,12 @@ export { default as MOverlay } from './components/overlay/MOverlay.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
 export { default as MPincode } from './components/pincode/MPincode.vue';
-export { default as MLinearProgressbarBuffer } from './components/linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
-export { default as MLinearProgressbarPercentage } from './components/linearprogressbarpercentage/MLinearProgressbarPercentage.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
 export { default as MSelect } from './components/select/MSelect.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
+export { default as MStatusDot } from './components/statusdot/MStatusDot.vue';
 export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
@@ -36,5 +37,5 @@ export { default as MTextArea } from './components/textarea/MTextArea.vue';
 export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToaster } from './components/toaster/MToaster.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';
-export { default as MTooltip } from './components/tooltip/MTooltip.vue';
 export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';
+export { default as MTooltip } from './components/tooltip/MTooltip.vue';