@mozaic-ds/vue 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.6.0",
+  "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,19 +56,18 @@
     "@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",
     "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",
@@ -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/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/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/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/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

@@ -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<{
@@ -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/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/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/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/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/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/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/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/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,8 +4,16 @@ 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>`
+    default: `<h1>Container</h1>`,
   },
   render: (args) => ({
     components: { MContainer },
@@ -25,8 +33,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

@@ -7,18 +7,18 @@
 <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<{
   /**
-   * 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/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,11 +6,12 @@ import MDatepicker from './MDatepicker.vue';
 const meta: Meta<typeof MDatepicker> = {
   title: 'Form Elements/Datepicker',
   component: MDatepicker,
+  tags: ['v2'],
   parameters: {
     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/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] |