@mozaic-ds/vue 2.6.1 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.6.1",
+  "version": "2.8.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,11 +76,14 @@
     "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-eslint-parser": "^10.1.1"
+    "vue-component-meta": "^3.0.8",
+    "vue-eslint-parser": "^10.1.1",
+    "libphonenumber-js": "^1.12.23"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

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

@@ -2,6 +2,19 @@ import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MDrawer from '@/components/drawer/MDrawer.vue';
 
+// Stubs for child components
+const stubs = {
+  ArrowBack24: { template: '<svg />' },
+  Cross24: { template: '<svg />' },
+  MIconButton: {
+    template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
+  },
+  MOverlay: {
+    name: 'MOverlay',
+    template: `<div class="overlay" @click="$emit('click')"><slot/></div>`,
+  },
+};
+
 describe('MDrawer component', () => {
   it('renders title and contentTitle when provided', () => {
     const wrapper = mount(MDrawer, {
@@ -13,6 +26,7 @@ describe('MDrawer component', () => {
       slots: {
         default: '<p>Drawer content</p>',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__title').text()).toBe('Main Drawer Title');
@@ -30,6 +44,7 @@ describe('MDrawer component', () => {
         open: true,
         title: 'Test Title',
       },
+      global: { stubs },
     });
 
     const closeButton = wrapper.find('.mc-drawer__close');
@@ -46,6 +61,7 @@ describe('MDrawer component', () => {
         title: 'Test Title',
         back: true,
       },
+      global: { stubs },
     });
 
     const backButton = wrapper.find('.mc-drawer__back');
@@ -63,6 +79,7 @@ describe('MDrawer component', () => {
       slots: {
         footer: '<button>Footer Button</button>',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__footer').exists()).toBe(true);
@@ -79,6 +96,7 @@ describe('MDrawer component', () => {
         extended: true,
         position: 'left',
       },
+      global: { stubs },
     });
 
     const section = wrapper.find('section.mc-drawer');
@@ -93,8 +111,85 @@ describe('MDrawer component', () => {
         open: true,
         title: 'Test Title',
       },
+      global: { stubs },
     });
 
     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,
+      global: { stubs },
+    });
+
+    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,
+      global: { stubs },
+    });
+
+    const titleElement = wrapper.find('.mc-drawer__title').element;
+    await wrapper.setProps({ open: false });
+    expect(document.activeElement).not.toBe(titleElement);
+  });
+
+  // ✅ New tests for closeOnOverlay behavior
+  it('emits update:open false when overlay is clicked and closeOnOverlay is true', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        closeOnOverlay: true,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+  });
+
+  it('does not emit update:open when overlay is clicked and closeOnOverlay is false', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        closeOnOverlay: false,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
+
+  it('does not emit update:open when overlay is clicked and closeOnOverlay is not set', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    expect(wrapper.emitted('update:open')).toBeFalsy();
+  });
 });

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

@@ -1,5 +1,9 @@
 <template>
-  <MOverlay :is-visible="open" dialogLabel="drawerTitle">
+  <MOverlay
+    :is-visible="open"
+    dialogLabel="drawerTitle"
+    @click="onClickOverlay"
+  >
     <section
       class="mc-drawer"
       :class="classObject"
@@ -24,7 +28,14 @@
               <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 +64,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';
@@ -86,6 +97,10 @@ const props = defineProps<{
    * Title of the content of the drawer.
    */
   contentTitle?: string;
+  /**
+   * if `true`, close the drawer when clicking the overlay.
+   */
+  closeOnOverlay?: boolean;
 }>();
 
 defineSlots<{
@@ -115,6 +130,22 @@ watch(
   },
 );
 
+const titleRef = ref<HTMLElement | null>(null);
+watch(
+  () => props.open,
+  (newValue) => {
+    if (newValue && titleRef.value) {
+      titleRef.value.focus();
+    }
+  },
+);
+
+const onClickOverlay = () => {
+  if (props.closeOnOverlay) {
+    onClose();
+  }
+};
+
 const onClose = () => {
   emit('update:open', false);
 };