@mozaic-ds/vue 2.6.0 → 2.7.0

package/src/components/loadingoverlay/MLoadingOverlay.vue

@@ -21,6 +21,10 @@ defineProps<{
    */
   text?: string;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/loadingoverlay/README.md

@@ -0,0 +1,11 @@
+# MLoadingOverlay
+
+A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `isVisible` | Controls the visibility of the loading overlay. | `boolean` | - |
+| `text` | Text of the loading overlay. | `string` | - |

package/src/components/modal/MModal.vue

@@ -61,11 +61,11 @@ const props = withDefaults(
      */
     open?: boolean;
     /**
-     * Title of the modal
+     * Title of the modal.
      */
     title: string;
     /**
-     * Description of the modal
+     * Description of the modal.
      */
     description?: string;
     /**
@@ -80,19 +80,19 @@ const props = withDefaults(
 
 defineSlots<{
   /**
-   * Use this slot to insert an icon next to the title of the modal
+   * Use this slot to insert an icon next to the title of the modal.
    */
   icon?: VNode;
   /**
-   * Use this slot to insert the content of the modal
+   * Use this slot to insert the content of the modal.
    */
   default?: VNode;
   /**
-   * Use this slot to insert a link in the footer
+   * Use this slot to insert a link in the footer.
    */
   link?: VNode;
   /**
-   * Use this slot to insert buttons in the footer
+   * Use this slot to insert buttons in the footer.
    */
   footer?: VNode;
 }>();
@@ -116,10 +116,14 @@ const onClose = () => {
 
 const emit = defineEmits<{
   /**
-   * Emits when the checkbox value changes, updating the modelValue prop.
+   * Emits when the modal display changes, updating the modelValue prop.
    */
   (on: 'update:open', value: boolean): void;
 }>();
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/modal/README.md

@@ -0,0 +1,28 @@
+# MModal
+
+A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `open` | if `true`, display the modal. | `boolean` | - |
+| `title*` | Title of the modal. | `string` | - |
+| `description` | Description of the modal. | `string` | - |
+| `closable` | if `true`, display the close button. | `boolean` | `true` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `icon` | Use this slot to insert an icon next to the title of the modal. |
+| `default` | Use this slot to insert the content of the modal. |
+| `link` | Use this slot to insert a link in the footer. |
+| `footer` | Use this slot to insert buttons in the footer. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:open` | Emits when the modal display changes, updating the modelValue prop. | [value: boolean] |

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

@@ -0,0 +1,12 @@
+# MNumberBadge
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `label*` | Content of the badge. | `number` | - |
+| `appearance` | Allows to define the badge appearance. | `"standard"` `"inverse"` `"accent"` `"danger"` | `"standard"` |
+| `size` | Allows to define the badge size. | `"s"` `"m"` | `"s"` |

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

@@ -0,0 +1,17 @@
+# MOverlay
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `isVisible` | Controls the visibility of the overlay. | `boolean` | - |
+| `dialogLabel` | Accessible label for the overlay dialog. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert a centered content inside the overlay. |

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

@@ -0,0 +1,20 @@
+# MPagination
+
+Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the pagination. | `string` | - |
+| `modelValue*` | The current value of the selected page. | `number` | - |
+| `compact` | If `true`, display a compact version without the select. | `boolean` | - |
+| `options*` | Define the available choices for the pagination select element. | `{ id?: string` `undefined; text: string; value: number; }[]` | - |
+| `selectLabel` | Accessible label for the select of the pagination. | `string` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the pagination value changes, updating the modelValue prop. | [value: number] |

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

@@ -0,0 +1,25 @@
+# MPasswordInput
+
+A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the password input element, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the password input element, typically used for form submission. | `string` | - |
+| `modelValue` | The current value of the password input field. | `string` `number` | - |
+| `placeholder` | A placeholder text to show in the password input when it is empty. | `string` | - |
+| `isInvalid` | If `true`, applies an invalid state to the password input. | `boolean` | - |
+| `disabled` | If `true`, disables the password input, making it non-interactive. | `boolean` | - |
+| `readonly` | If `true`, the password input is read-only (cannot be edited). | `boolean` | - |
+| `isClearable` | If `true`, a clear button will appear when the password input has a value. | `boolean` | - |
+| `clearLabel` | The label text for the clear button. | `string` | `"Clear content"` |
+| `buttonLabel` | Labels of the button displayed when showing or hiding the password. | `{ show: string; hide: string; }` | `{ show: "Show", hide: "Hide" }` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |

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

@@ -93,7 +93,10 @@ describe('MPincode component', () => {
       },
     });
 
-    expect(wrapper.classes()).toContain('is-invalid');
+    const inputs = wrapper.findAll('input');
+    for (const input of inputs) {
+      expect(input.classes()).toContain('is-invalid');
+    }
   });
 
   it('disables inputs when disabled is true', () => {

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-pincode-input" :class="classObject" @paste="onPaste">
+  <div class="mc-pincode-input" @paste="onPaste">
     <input
       v-for="(digit, index) in otp"
       :key="index"
@@ -12,6 +12,7 @@
       autocomplete="one-time-code"
       :name="name || `pincode-${id}`"
       class="mc-pincode-input__control"
+      :class="classObject"
       :disabled="disabled"
       :readonly="readonly"
       :value="digit"
@@ -32,7 +33,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<{
@@ -77,6 +78,9 @@ const classObject = computed(() => {
 });
 
 const emit = defineEmits<{
+  /**
+   * Emits when the pincode value changes, updating the modelValue prop.
+   */
   (on: 'update:modelValue', value: string): void;
 }>();
 
@@ -141,6 +145,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/pincode/README.md

@@ -0,0 +1,22 @@
+# MPincode
+
+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).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the pincode element, used to associate the label with the form element. | `string` | - |
+| `length` | The number of input displayed in the pincode element. | `4` `5` `6` | `6` |
+| `name` | The name attribute for the pincode element, typically used for form submission. | `string` | - |
+| `modelValue` | The current value of the pincode field. | `string` `number` | - |
+| `isInvalid` | If `true`, applies an invalid state to the pincode. | `boolean` | - |
+| `disabled` | If `true`, disables the pincode, making it non-interactive. | `boolean` | - |
+| `readonly` | If `true`, the pincode is read-only (cannot be edited). | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: string]` |

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

@@ -0,0 +1,27 @@
+# MQuantitySelector
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the quantity selector element, used to associate the label with the form element. | `string` | - |
+| `name` | The name attribute for the quantity selector element, typically used for form submission. | `string` | `"quantity-selector-input"` |
+| `modelValue` | The current value of the quantity selector field. | `number` | `1` |
+| `isInvalid` | If `true`, applies an invalid state to the quantity selector. | `boolean` | - |
+| `disabled` | If `true`, disables the quantity selector, making it non-interactive. | `boolean` | - |
+| `size` | Determines the size of the quantity selector. | `"s"` `"m"` | `"m"` |
+| `min` | Minimum acceptable value for the quantity selector. | `number` | `1` |
+| `max` | Maximum acceptable value for the quantity selector. | `number` | `100` |
+| `step` | Determines how much the value will change per click when the quantity is increased or decreased. | `number` | `1` |
+| `readonly` | If `true`, the quantity selector is read-only (cannot be edited). | `boolean` | - |
+| `incrementlabel` | The label text for the increment button. | `string` | `"Increment"` |
+| `decrementLabel` | The label text for the decrement button. | `string` | `"Decrement"` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the quantity selector value changes, updating the `modelValue` prop. | [value: number] |

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

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

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

@@ -0,0 +1,21 @@
+# MRadioGroup
+
+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).
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `name*` | The name attribute for the radio 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 radio button of the radio group | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; }[]` | - |
+| `isInvalid` | If `true`, applies an invalid state to the radio group. | `boolean` | - |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the radio group value changes, updating the modelValue prop. | [value: string] |

package/src/components/segmentedcontrol/MSegmentedControl.spec.ts

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MSegmentedControl from './MSegmentedControl.vue';
+
+describe('MSegmentedControl.vue', () => {
+  const segments = [
+    { label: 'First' },
+    { label: 'Second' },
+    { label: 'Third' },
+  ];
+
+  it('renders segments with correct labels', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+    });
+
+    const buttons = wrapper.findAll('button');
+    expect(buttons).toHaveLength(segments.length);
+    buttons.forEach((btn, i) => {
+      expect(btn.text()).toBe(segments[i].label);
+    });
+  });
+
+  it('sets default active segment based on modelValue prop', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 1 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    expect(buttons[1].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+    expect(buttons[1].attributes('aria-checked')).toBe('true');
+  });
+
+  it('emits update:modelValue and changes active segment on click', async () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 0 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    await buttons[2].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);
+
+    expect(buttons[2].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+    expect(buttons[2].attributes('aria-checked')).toBe('true');
+  });
+
+  it('does not emit update event if clicking already active segment', async () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 1 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    await buttons[1].trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  });
+
+  it('applies full width class when full prop is true', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, full: true },
+    });
+
+    expect(wrapper.classes()).toContain('mc-segmented-control--full');
+  });
+
+  it('applies size class when size prop is "m"', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, size: 'm' },
+    });
+
+    expect(wrapper.classes()).toContain('mc-segmented-control--m');
+  });
+
+  it('does not apply size class when size is "s" (default)', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-segmented-control--s');
+  });
+
+  it('updates active segment when modelValue prop changes', async () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments, modelValue: 0 },
+    });
+
+    const buttons = wrapper.findAll('button');
+    expect(buttons[0].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+
+    await wrapper.setProps({ modelValue: 2 });
+
+    expect(buttons[2].classes()).toContain(
+      'mc-segmented-control__segment--selected',
+    );
+    expect(buttons[2].attributes('aria-checked')).toBe('true');
+  });
+
+  it('adds role="radio" attribute to buttons', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+    });
+
+    const buttons = wrapper.findAll('button');
+    buttons.forEach((button) => {
+      expect(button.attributes('role')).toBe('radio');
+    });
+  });
+});