@mozaic-ds/vue 2.6.1 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -22,6 +22,7 @@
     "test:unit": "vitest",
     "format": "prettier --write src/",
     "build": "vite build",
+    "readme": "node generate-readmes.js ",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "npm run build-storybook",
     "storybook:deploy": "storybook-to-ghpages",
@@ -40,14 +41,14 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "2.0.0-beta.5",
+    "@mozaic-ds/styles": "^2.0.1",
     "@mozaic-ds/web-fonts": "1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
     "@mozaic-ds/css-dev-tools": "1.75.0",
     "@mozaic-ds/icons-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^10.0.1",
@@ -55,14 +56,13 @@
     "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-themes": "^9.0.18",
     "@storybook/vue3-vite": "^9.0.18",
-    "@types/jsdom": "^21.1.7",
+    "@types/jsdom": "^27.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^3.0.9",
     "@vitest/eslint-plugin": "^1.1.38",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
-    "all-contributors-cli": "^6.26.1",
     "eslint": "^9.22.0",
     "eslint-plugin-vue": "^10.0.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
@@ -76,10 +76,12 @@
     "release-it": "^19.0.4",
     "sass": "^1.86.0",
     "storybook": "^9.0.18",
+    "storybook-addon-tag-badges": "^2.0.2",
     "typescript": "^5.7.2",
     "vite": "^7.1.1",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
+    "vue-component-meta": "^3.0.8",
     "vue-eslint-parser": "^10.1.1"
   },
   "bugs": {

package/src/components/Contributing.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { Mermaid } from 'mdx-mermaid/Mermaid';
 
-<Meta title="Contributing" />
+<Meta title="Getting Started/Contributing" />
 
 # Be part of something bigger!
 

package/src/components/GettingStarted.mdx

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Getting Started" />
+<Meta title="Getting Started/Getting Started" />
 
 # Getting Started
 

package/src/components/Introduction.mdx

@@ -2,7 +2,7 @@ import { Meta, Source } from '@storybook/addon-docs/blocks';
 import ads from '../../.storybook/assets/logo.svg';
 import vue from '../../.storybook/assets/vue.svg';
 
-<Meta title="Introduction" />
+<Meta title="Getting Started/Introduction" />
 
 <p
   style={{

package/src/components/Support.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Support" />
+<Meta title="Getting Started/Support" />
 
 # Support
 

package/src/components/avatar/MAvatar.stories.ts

@@ -6,6 +6,7 @@ import Profile24 from '@mozaic-ds/icons-vue/src/components/Profile24/Profile24.v
 const meta: Meta<typeof MAvatar> = {
   title: 'Content/Avatar',
   component: MAvatar,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/avatar/README.md

@@ -0,0 +1,16 @@
+# MAvatar
+
+An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `size` | Allows to define the avatar size. | `"s"` `"m"` `"l"` | `"s"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the image, icon or intials of the avatar. |

package/src/components/breadcrumb/README.md

@@ -0,0 +1,11 @@
+# MBreadcrumb
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Allows to define the breadcrumb appearance. | `"standard"` `"inverse"` | - |
+| `links*` | Links of the breadcrumb. | `{ label: string; href: string; router?: boolean` `undefined; }[]` | - |

package/src/components/button/MButton.stories.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 import MButton from './MButton.vue';
-import Download24 from '@mozaic-ds/icons-vue/src/components/Download24/Download24.vue';
 import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
 
 const meta: Meta<typeof MButton> = {
@@ -17,7 +16,7 @@ const meta: Meta<typeof MButton> = {
   },
   args: { default: 'Button Label' },
   render: (args) => ({
-    components: { MButton, Download24, ChevronRight24 },
+    components: { MButton, ChevronRight24 },
     setup() {
       return { args };
     },

package/src/components/button/MButton.vue

@@ -91,7 +91,7 @@ defineSlots<{
    */
   default: string;
   /**
-   * Use this slot to insert an icon for the Button
+   * Use this slot to insert an icon for the Button.
    */
   icon?: VNode;
 }>();
@@ -110,4 +110,9 @@ const classObject = computed(() => {
 
 <style lang="scss" scoped>
 @use '@mozaic-ds/styles/components/button';
+
+.mc-button__icon::v-deep(svg) {
+  width: 100%;
+  height: 100%;
+}
 </style>

package/src/components/button/README.md

@@ -0,0 +1,24 @@
+# MButton
+
+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 button. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `size` | Determines the size of the button. | `"s"` `"m"` `"l"` | `"m"` |
+| `disabled` | If `true`, disables the button, making it non-interactive. | `boolean` | - |
+| `ghost` | If `true`, applies a "ghost" style to the button, typically a transparent background with a border. | `boolean` | - |
+| `outlined` | If `true`, the button gets an outlined style, usually with just the border and no solid background. | `boolean` | - |
+| `iconPosition` | Controls the positioning of an icon in the button. | `"left"` `"right"` `"only"` | - |
+| `type` | Specifies the button's HTML `type` attribute. | `"button"` `"reset"` `"submit"` | `"button"` |
+| `isLoading` | If `true`, a loading state is displayed. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | The content displayed in the button. |
+| `icon` | Use this slot to insert an icon for the Button. |

package/src/components/callout/MCallout.stories.ts

@@ -8,6 +8,7 @@ import ImageAlt32 from '@mozaic-ds/icons-vue/src/components/ImageAlt32/ImageAlt3
 const meta: Meta<typeof MCallout> = {
   title: 'Content/Callout',
   component: MCallout,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/callout/README.md

@@ -0,0 +1,19 @@
+# MCallout
+
+A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `title*` | Title of the callout. | `string` | - |
+| `description*` | Description of the callout. | `string` | - |
+| `appearance` | Allows to define the callout appearance. | `"standard"` `"inverse"` `"accent"` `"tips"` | `"standard"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon. |
+| `footer` | Use this slot to insert a button or a link in the footer of the callout. |

package/src/components/checkbox/README.md

@@ -0,0 +1,23 @@
+# MCheckbox
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the checkbox, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the checkbox element, typically used for form submission. | `string` | - |
+| `label` | The text label displayed next to the checkbox. | `string` | - |
+| `modelValue` | The checkbox's checked state, bound via v-model. | `boolean` | - |
+| `indeterminate` | Sets the checkbox to an indeterminate state (partially selected). | `boolean` | - |
+| `isInvalid` | If `true`, applies an invalid state to the checkbox. | `boolean` | - |
+| `disabled` | If `true`, disables the checkbox, making it non-interactive. | `boolean` | - |
+| `indented` | If `true`, indent the checkbox. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the checkbox value changes, updating the modelValue prop. | [value: boolean] |

package/src/components/checkboxgroup/README.md

@@ -0,0 +1,20 @@
+# MCheckboxGroup
+
+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).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `name*` | The name attribute for the checkbox element, typically used for form submission. | `string` | - |
+| `modelValue` | Property used to manage the values checked by v-model
+(Do not use directly) | `string[]` | - |
+| `options*` | list of properties of each checkbox button of the checkbox group | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; isInvalid?: boolean` `undefined; indented?: boolean` `undefined; }[]` | - |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the checkbox group value changes, updating the modelValue prop. | [value: Array<string>] |

package/src/components/circularprogressbar/MCircularProgressbar.stories.ts

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

package/src/components/circularprogressbar/README.md

@@ -0,0 +1,14 @@
+# MCircularProgressbar
+
+A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `size` | Sets the size of the progress bar. | `"s"` `"m"` `"l"` | - |
+| `value` | The current value of the progress bar. | `number` | `0` |
+| `type` | Shows either a percentage or custom content. | `"percentage"` `"content"` | `"percentage"` |
+| `contentValue` | Main content shown when `type` is `'content'`. | `string` | - |
+| `additionalInfo` | Additional text shown to define the `contentValue`. | `string` | - |

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

@@ -4,6 +4,14 @@ import MContainer from './MContainer.vue';
 const meta: Meta<typeof MContainer> = {
   title: 'Foundations/Container',
   component: MContainer,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.',
+      },
+    },
+  },
   args: {
     default: `<h1>Container</h1>`,
   },

package/src/components/container/MContainer.vue

@@ -7,7 +7,7 @@
 <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.
+ * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
  */
 const props = defineProps<{
   /**

package/src/components/container/README.md

@@ -0,0 +1,16 @@
+# MContainer
+
+The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `fluid` | If `true`, the container will take the full width. | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the content of the container. |

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

@@ -6,6 +6,7 @@ import MDatepicker from './MDatepicker.vue';
 const meta: Meta<typeof MDatepicker> = {
   title: 'Form Elements/Datepicker',
   component: MDatepicker,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

package/src/components/datepicker/README.md

@@ -0,0 +1,24 @@
+# MDatepicker
+
+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).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the datepicker element, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the datepicker element, typically used for form submission. | `string` | - |
+| `modelValue` | The current value of the datepicker field. | `string` `number` | - |
+| `isInvalid` | If `true`, applies an invalid state to the datepicker. | `boolean` | - |
+| `disabled` | If `true`, disables the datepicker, making it non-interactive. | `boolean` | - |
+| `size` | Determines the size of the datepicker. | `"s"` `"m"` | `"m"` |
+| `readonly` | If `true`, the datepicker is read-only (cannot be edited). | `boolean` | - |
+| `isClearable` | If `true`, a clear button will appear when the datepicker has a value. | `boolean` | - |
+| `clearLabel` | The label text for the clear button. | `string` | `"clear content"` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the datepicker value changes, updating the `modelValue` prop. | [value: string | number] |

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

@@ -4,6 +4,7 @@ import MDivider from './MDivider.vue';
 const meta: Meta<typeof MDivider> = {
   title: 'Structure/Divider',
   component: MDivider,
+  tags: ['v2'],
   parameters: {
     docs: {
       description: {

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';
@@ -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);
 };

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/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

@@ -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: {