@mozaic-ds/vue 2.6.1 → 2.7.0

package/src/components/linearprogressbarbuffer/README.md

@@ -0,0 +1,11 @@
+# MLinearProgressbarBuffer
+
+A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `size` | Allows to define the progress bar size. | `"s"` `"m"` `"l"` | - |
+| `value` | The current value of the progress bar. | `number` | `0` |

package/src/components/linearprogressbarpercentage/MLinearProgressbarPercentage.stories.ts

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

package/src/components/linearprogressbarpercentage/README.md

@@ -0,0 +1,10 @@
+# MLinearProgressbarPercentage
+
+A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `value` | The current value of the progress bar. | `number` | `0` |

package/src/components/link/MLink.vue

@@ -62,8 +62,6 @@ const props = withDefaults(
     router?: boolean;
   }>(),
   {
-    href: undefined,
-    target: undefined,
     appearance: 'standard',
     size: 's',
     iconPosition: 'left',

package/src/components/link/README.md

@@ -0,0 +1,23 @@
+# MLink
+
+A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `iconPosition` | Position of the icon relative to the text. | `"left"` `"right"` | `"left"` |
+| `appearance` | Allows to define the link appearance. | `"standard"` `"inverse"` `"accent"` `"secondary"` | `"standard"` |
+| `size` | Allows to define the link size. | `"s"` `"m"` | `"s"` |
+| `href` | URL for the link (for external links or the `to` prop for `router-link`). | `string` | - |
+| `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |
+| `inline` | Specify wether the link is inline. | `boolean` | - |
+| `router` | If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router). | `boolean` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Use this slot to insert the textual content of the Link. |
+| `icon` | Use this slot to insert an icon for the Link. |

package/src/components/loader/MLoader.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 /**
- * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
+ * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
  */
 const props = withDefaults(
   defineProps<{

package/src/components/loader/README.md

@@ -0,0 +1,12 @@
+# MLoader
+
+A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `appearance` | Specifies the visual appearance of the loader. | `"standard"` `"inverse"` `"accent"` | `"standard"` |
+| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` | `"m"` |
+| `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` | - |

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

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

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

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MSegmentedControl from './MSegmentedControl.vue';
+
+const meta: Meta<typeof MSegmentedControl> = {
+  title: 'Action/Segmented Control',
+  component: MSegmentedControl,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.',
+      },
+    },
+  },
+  args: {
+    segments: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MSegmentedControl },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MSegmentedControl
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      ></MSegmentedControl>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MSegmentedControl>;
+
+export const Default: Story = {};
+
+export const Icons: Story = {
+  args: {
+    segments: [
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+      {
+        label: 'Label',
+      },
+    ],
+  },
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};
+
+export const Full: Story = {
+  args: { full: true },
+};

package/src/components/segmentedcontrol/MSegmentedControl.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="mc-segmented-control" :class="classObject" role="radiogroup">
+    <button
+      v-for="(segment, index) in segments"
+      :key="`segment-${index}`"
+      type="button"
+      class="mc-segmented-control__segment"
+      :class="{
+        'mc-segmented-control__segment--selected': isSegmentSelected(index),
+      }"
+      :aria-checked="isSegmentSelected(index)"
+      role="radio"
+      @click="onClickSegment(index)"
+    >
+      {{ segment.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+/**
+ * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    modelValue?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+      /**
+       * The label displayed for the segment.
+       */
+      label: string;
+    }>;
+  }>(),
+  {
+    modelValue: 0,
+    size: 's',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    'mc-segmented-control--full': props.full,
+    [`mc-segmented-control--${props.size}`]: props.size && props.size != 's',
+  };
+});
+
+const modelValue = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    modelValue.value = newVal;
+  },
+);
+
+const onClickSegment = (index: number) => {
+  if (index !== modelValue.value) {
+    modelValue.value = index;
+    emit('update:modelValue', index);
+  }
+};
+
+const isSegmentSelected = (index: number) => {
+  return modelValue.value === index;
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the selected segment changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/segmented-control';
+</style>