@mozaic-ds/vue 2.16.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -32,7 +32,9 @@
     "release:beta": "release-it --preRelease=beta",
     "prepublishOnly": "npm run build",
     "npm:publish": "npm publish --access public",
-    "npm:publish:beta": "npm publish --access public --tag beta"
+    "npm:publish:beta": "npm publish --access public --tag beta",
+    "figma:connect": "figma connect parse",
+    "figma:connect:publish": "dotenv -e .env -- figma connect publish"
   },
   "files": [
     "dist/*",
@@ -41,7 +43,7 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/styles": "^2.13.0",
+    "@mozaic-ds/styles": "^2.15.0",
     "@mozaic-ds/web-fonts": "^1.65.0",
     "postcss-scss": "^4.0.9",
     "vue": "^3.5.13"
@@ -49,7 +51,9 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
+    "@figma/code-connect": "^1.4.1",
     "@mozaic-ds/css-dev-tools": "1.75.0",
+    "@mozaic-ds/datatable-vue": "^1.0.0",
     "@mozaic-ds/icons-vue": "^2.5.0",
     "@release-it/conventional-changelog": "^10.0.1",
     "@storybook/addon-a11y": "^10.0.4",
@@ -64,13 +68,14 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
+    "dotenv-cli": "^11.0.0",
     "eslint": "^10.0.2",
     "eslint-plugin-storybook": "^10.0.5",
     "eslint-plugin-vue": "^10.0.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "globals": "^17.3.0",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.0.0",
     "libphonenumber-js": "^1.12.23",
     "lint-staged": "^16.1.5",
     "mdx-mermaid": "^2.0.3",
@@ -82,7 +87,7 @@
     "storybook": "^10.0.4",
     "storybook-addon-tag-badges": "^3.0.2",
     "typescript": "^5.7.2",
-    "vite": "^7.1.1",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^4.0.7",
     "vue-component-meta": "^3.0.8",

package/src/components/BrandPresets.mdx

@@ -34,7 +34,7 @@ All it has to do is insert the following code into its main Sass file (entrypoin
   dark
   code={`
 // Entrypoint stylesheet
-@use "@mozaic-ds/tokens/<presetName>" as *;
+@use "@mozaic-ds/tokens/<presetName>/theme" as *;
 `}
 />
 
@@ -49,7 +49,7 @@ For example, for ADEO
   dark
   code={`
 // Entrypoint stylesheet
-@use "@mozaic-ds/tokens/adeo" as *;
+@use "@mozaic-ds/tokens/adeo/theme" as *;
 `}
 />
 

package/src/components/ComponentsMapping.mdx

@@ -0,0 +1,98 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Components v1 → v2" />
+
+# Components mapping v1 → v2
+
+## Introduction
+
+This document summarizes all component changes between the ADS Vue V1 and V2 design system libraries — including renames, splits, merges, removals, and new additions.
+
+
+### Mapping Table
+
+<table>
+  <thead>
+    <tr>
+      <th>V1 Component</th>
+      <th>V2 Component</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td><code>MAccordion</code></td><td><code>MAccordionList</code> + <code>MAccordionListItem</code></td><td>🔀 Split</td></tr>
+    <tr><td><code>MActionBar</code> + <code>MBottomBar</code></td><td><code>MActionBottomBar</code></td><td>🔗 Merged</td></tr>
+    <tr><td><code>MListBoxActions</code></td><td><code>MActionListBox</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MAvatar</code></td><td>✨ New</td></tr>
+    <tr><td><code>MBreadcrumb</code></td><td><code>MBreadcrumb</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MMenu</code></td><td><code>MBuiltInMenu</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MButton</code></td><td><code>MButton</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MCallout</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MCarousel</code></td><td>✨ New</td></tr>
+    <tr><td><code>MCheckbox</code></td><td><code>MCheckbox</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MCheckboxGroup</code></td><td><code>MCheckboxGroup</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MChecklistMenu</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MCircularProgressBar</code></td><td>✨ New</td></tr>
+    <tr><td><code>MAutocomplete</code> + <code>MDropdown</code></td><td><code>MCombobox</code></td><td>🔗 Merged</td></tr>
+    <tr><td><code>MContainer</code></td><td><code>MContainer</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MDatePicker</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MDivider</code></td><td>✨ New</td></tr>
+    <tr><td><code>MLayer</code></td><td><code>MDrawer</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MField</code></td><td><code>MField</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MFieldGroup</code></td><td>✨ New</td></tr>
+    <tr><td><code>MFileUploader</code></td><td><code>MFileUploader</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MFileUploaderItem</code></td><td>✨ New</td></tr>
+    <tr><td><code>MFlag</code></td><td><code>MFlag</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MIcon</code></td><td><em>removed</em></td><td>🗑️ Removed</td></tr>
+    <tr><td>—</td><td><code>MIconButton</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MKpiItem</code></td><td>✨ New</td></tr>
+    <tr><td><code>MProgress</code></td><td><code>MLinearProgressBarBuffer</code> + <code>MLinearProgressBarPercentage</code></td><td>🔀 Split</td></tr>
+    <tr><td><code>MLink</code></td><td><code>MLink</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MLoader</code></td><td><code>MLoader</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MLoadingOverlay</code></td><td>✨ New</td></tr>
+    <tr><td><code>MModal</code></td><td><code>MModal</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MNavigationIndicator</code></td><td>✨ New</td></tr>
+    <tr><td><code>MNotification</code></td><td><code>MStatusNotification</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MNumberBadge</code></td><td>✨ New</td></tr>
+    <tr><td><code>MListbox</code></td><td><code>MOptionListBox</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MOverlay</code></td><td><code>MOverlay</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MPageHeader</code></td><td>✨ New</td></tr>
+    <tr><td><code>MPagination</code></td><td><code>MPagination</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MPasswordInput</code></td><td><code>MPasswordInput</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MPhoneNumber</code></td><td><code>MPhoneNumber</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MPinCode</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MPopover</code></td><td>✨ New</td></tr>
+    <tr><td><code>MQuantitySelector</code></td><td><code>MQuantitySelector</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MRadio</code></td><td><code>MRadio</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MRadioGroup</code></td><td><code>MRadioGroup</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MSegmentedControl</code></td><td><code>MSegmentedControl</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MSelect</code></td><td><code>MSelect</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MSidebar</code></td><td><code>MSidebar</code> + 6 sub-components</td><td>🔀 Split</td></tr>
+    <tr><td>—</td><td><code>MSidebarExpandableItem</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarFooter</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarHeader</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarNavItem</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarShortcutItem</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MSidebarShortcuts</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MStarRating</code></td><td>✨ New</td></tr>
+    <tr><td><code>MBadge</code></td><td><code>MStatusBadge</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MStatusDot</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MStatusMessage</code></td><td>✨ New</td></tr>
+    <tr><td><code>MStepper</code> (<code>compact: false</code>)</td><td><code>MStepperInline</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MStepper</code> (<code>compact: true</code>)</td><td><code>MStepperCompact</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MStepperBottomBar</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MStepperStacked</code></td><td>✨ New</td></tr>
+    <tr><td><code>MTab</code> / <code>MTabsV2</code></td><td><code>MTabs</code></td><td>🔄 Renamed</td></tr>
+    <tr><td><code>MTag</code></td><td><code>MTag</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MTextArea</code></td><td><code>MTextArea</code></td><td>✅ Same name</td></tr>
+    <tr><td><code>MTextInput</code></td><td><code>MTextInput</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MTile</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MTileClickable</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MTileExpandable</code></td><td>✨ New</td></tr>
+    <tr><td><code>MOptionCard</code></td><td><code>MTileSelectable</code></td><td>🔄 Renamed</td></tr>
+    <tr><td>—</td><td><code>MToaster</code></td><td>✨ New</td></tr>
+    <tr><td><code>MToggle</code></td><td><code>MToggle</code></td><td>✅ Same name</td></tr>
+    <tr><td>—</td><td><code>MToggleGroup</code></td><td>✨ New</td></tr>
+    <tr><td>—</td><td><code>MTooltip</code></td><td>✨ New</td></tr>
+  </tbody>
+</table>

package/src/components/accordionlist/MAccordionList.figma.ts

@@ -0,0 +1,43 @@
+/**
+ * Code Connect mapping for MAccordionList
+ * Links Figma Accordion List to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1647%3A16440',
+  {
+    props: {
+      appearance: figma.enum('Appareance', {
+        Standard: 'standard',
+        Ghost: 'ghost',
+      }),
+      showItem02: figma.boolean('Show Item 02'),
+      showItem03: figma.boolean('Show Item 03'),
+      showItem04: figma.boolean('Show Item 04'),
+      showItem05: figma.boolean('Show Item 05'),
+      showItem06: figma.boolean('Show Item 06'),
+      showItem07: figma.boolean('Show Item 07'),
+      showItem08: figma.boolean('Show Item 08'),
+    },
+    example: ({ appearance }) =>
+      html`<script setup>
+        import { MAccordionList, MAccordionListItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MAccordionList appearance=${appearance}>
+        <MAccordionListItem id="1" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+        <MAccordionListItem id="2" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+        <MAccordionListItem id="3" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+        <MAccordionListItem id="4" title="Content title">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </MAccordionListItem>
+      </MAccordionList>`,
+  },
+);

package/src/components/accordionlistitem/MAccordionListItem.figma.ts

@@ -0,0 +1,27 @@
+/**
+ * Code Connect mapping for MAccordionListItem
+ * Links Figma Accordion List Item to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/branch/tOAc8mV1PF5g0tjBfSbUXA/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1647%3A16442',
+  {
+    props: {
+      title: figma.string('Title'),
+      subtitle: figma.boolean('Has subtitle', {
+        true: figma.string('Subtitle'),
+        false: undefined,
+      }),
+    },
+    example: ({ title, subtitle }) =>
+      html`<script setup>
+        import { MAccordionListItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MAccordionListItem id="accordion-1" title=${title} subtitle=${subtitle}>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+      </MAccordionListItem>`,
+    imports: ["import { MAccordionListItem } from '@mozaic-ds/vue'"],
+  },
+);

package/src/components/actionbottombar/MActionBottomBar.figma.ts

@@ -0,0 +1,24 @@
+/**
+ * Code Connect mapping for MActionBottomBar
+ * Links Figma Action bottom bar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=10709-6937',
+  {
+    props: {
+      shadow: figma.boolean('Has shadow'),
+    },
+    example: ({ shadow }) =>
+      html`<script setup>
+        import { MActionBottomBar, MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MActionBottomBar shadow=${shadow}>
+        <template #right>
+          <MButton size="s" appearance="accent">Save</MButton>
+        </template>
+      </MActionBottomBar>`,
+  },
+);

package/src/components/actionlistbox/MActionListbox.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MActionListbox
+ * Links Figma Action listbox (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29046',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MActionListbox, MButton } from '@mozaic-ds/vue';
+        import { Copy20, Download20, Trash20 } from '@mozaic-ds/icons-vue';
+      </script>
+
+      <MActionListbox
+        title="Listbox title"
+        :items="[
+          { id: '1', label: 'Duplicate', icon: Copy20 },
+          { id: '2', label: 'Download', icon: Download20 },
+          { id: '3', label: 'Delete', icon: Trash20, appearance: 'danger', divider: true },
+        ]"
+      >
+        <template #activator="{ id }">
+          <MButton :popovertarget="id">Open menu</MButton>
+        </template>
+      </MActionListbox>`,
+  },
+);

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

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MAvatar
+ * Links Figma Avatar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6412',
+  {
+    props: {
+      size: figma.enum('Size', {
+        'S (32px)': 's',
+        'M (48px)': 'm',
+        'L (64px)': 'l',
+      }),
+      type: figma.enum('Type', {
+        Picture: 'picture',
+        Initials: 'initials',
+        Icon: 'icon',
+      }),
+    },
+    example: ({ size }) =>
+      html`<script setup>
+        import { MAvatar } from '@mozaic-ds/vue';
+      </script>
+
+      <MAvatar size=${size}>
+        <img src="/placeholder.png" alt="Avatar" />
+      </MAvatar>`,
+  },
+);

package/src/components/breadcrumb/MBreadcrumb.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MBreadcrumb
+ * Links Figma Breadcrumb (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11237',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        'Inverse (only on dark background)': 'inverse',
+      }),
+    },
+    example: ({ appearance }) =>
+      html`<script setup>
+        import { MBreadcrumb } from '@mozaic-ds/vue';
+      </script>
+
+      <MBreadcrumb
+        appearance=${appearance}
+        :links="[
+          { label: 'Home', href: '#' },
+          { label: 'Level 01', href: '#' },
+          { label: 'Current Page', href: '#' },
+        ]"
+        aria-label="breadcrumb"
+      ></MBreadcrumb>`,
+  },
+);

package/src/components/builtinmenu/MBuiltInMenu.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MBuiltInMenu
+ * Links Figma Built-in menu (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-11260',
+  {
+    props: {
+      outlined: figma.enum('is outlined', {
+        'true': true,
+        'false': false,
+      }),
+    },
+    example: ({ outlined }) =>
+      html`<script setup>
+        import { MBuiltInMenu } from '@mozaic-ds/vue';
+      </script>
+
+      <MBuiltInMenu :items="[{ label: 'Label' }, { label: 'Label' }]" outlined=${outlined} />`,
+  },
+);

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

@@ -0,0 +1,41 @@
+/**
+ * Code Connect mapping for MButton
+ * Links Figma Button to @mozaic-ds/vue
+ * Props discovered via Figma MCP get_code_connect_suggestions
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1%3A609',
+  {
+    props: {
+      label: figma.string('Label'),
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Danger: 'danger',
+        'Inverse (only on dark background)': 'inverse',
+      }),
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+        L: 'l',
+      }),
+      iconLeft: figma.boolean('Icon left'),
+      iconRight: figma.boolean('Icon right'),
+      iconOnly: figma.boolean('Icon only'),
+      disabled: figma.boolean('Is disabled'),
+      isLoading: figma.boolean('Is loading'),
+      outlined: figma.enum('Type', { Outlined: true }),
+      ghost: figma.enum('Type', { Ghost: true }),
+    },
+    example: ({ label, appearance, size, disabled, isLoading, outlined, ghost }) =>
+      html`<script setup>
+        import { MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MButton appearance=${appearance} size=${size} disabled=${disabled} :is-loading=${isLoading} outlined=${outlined} ghost=${ghost}>
+        ${label}
+      </MButton>`,
+  },
+);

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

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MCallout
+ * Links Figma Callout (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6504',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Tips: 'tips',
+        Inverse: 'inverse',
+      }),
+    },
+    example: ({ appearance }) =>
+      html`<script setup>
+        import { MCallout } from '@mozaic-ds/vue';
+      </script>
+
+      <MCallout
+        title="This is a title, be concise and use the description message to give details."
+        description="Description message."
+        appearance=${appearance}
+      ></MCallout>`,
+  },
+);

package/src/components/carousel/MCarousel.figma.ts

@@ -0,0 +1,32 @@
+/**
+ * Code Connect mapping for MCarousel
+ * Links Figma Carousel (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=5-6454',
+  {
+    props: {
+      hasScrollbar: figma.boolean('Has scrollbar'),
+      hasPagination: figma.boolean('Has pagination'),
+      breakpoint: figma.enum('Breakpoint', {
+        'S to M (320 to 1023px)': 's',
+        'L to XXL (1024 and up)': 'l',
+      }),
+    },
+    example: () =>
+      html`<script setup>
+        import { MCarousel } from '@mozaic-ds/vue';
+      </script>
+
+      <MCarousel>
+        <template #header>
+          <h2>Carousel title</h2>
+        </template>
+        <div>Slide 1</div>
+        <div>Slide 2</div>
+        <div>Slide 3</div>
+      </MCarousel>`,
+  },
+);

package/src/components/checkbox/MCheckbox.figma.ts

@@ -0,0 +1,45 @@
+/**
+ * Code Connect mapping for MCheckbox
+ * Links Figma Checkbox (stand-alone) (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29180',
+  {
+    props: {
+      modelValue: figma.enum('Is checked', {
+        True: true,
+        False: false,
+      }),
+      indeterminate: figma.enum('is Indeterminate', {
+        True: true,
+        False: false,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      isInvalid: figma.enum('is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ modelValue, indeterminate, disabled, isInvalid }) =>
+      html`<script setup>
+        import { MCheckbox } from '@mozaic-ds/vue';
+      </script>
+
+      <MCheckbox
+        id="checkbox-id"
+        label="Checkbox Label"
+        :model-value=${modelValue}
+        :indeterminate=${indeterminate}
+        disabled=${disabled}
+        :is-invalid=${isInvalid}
+      ></MCheckbox>`,
+  },
+);

package/src/components/checkboxgroup/MCheckboxGroup.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MCheckboxGroup
+ * Links Figma Checkbox group (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29096',
+  {
+    props: {
+      inline: figma.enum('Layout', {
+        'Stacked (default)': false,
+        Inline: true,
+      }),
+    },
+    example: ({ inline }) =>
+      html`<script setup>
+        import { MCheckboxGroup } from '@mozaic-ds/vue';
+      </script>
+
+      <MCheckboxGroup
+        name="group"
+        :options="[
+          { id: '1', label: 'Option 1', value: '1' },
+          { id: '2', label: 'Option 2', value: '2' },
+        ]"
+        inline=${inline}
+      />`,
+  },
+);

package/src/components/checklistmenu/MCheckListMenu.figma.ts

@@ -0,0 +1,29 @@
+/**
+ * Code Connect mapping for MCheckListMenu
+ * Links Figma Check-list menu (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=72-30681',
+  {
+    props: {
+      outlined: figma.enum('is outlined', {
+        'true': true,
+        'false': false,
+      }),
+    },
+    example: ({ outlined }) =>
+      html`<script setup>
+        import { MCheckListMenu } from '@mozaic-ds/vue';
+      </script>
+
+      <MCheckListMenu
+        :items="[
+          { label: 'Label', checked: true },
+          { label: 'Label', checked: false },
+        ]"
+        outlined=${outlined}
+      />`,
+  },
+);

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

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MCircularProgressbar
+ * Links Figma Circular progress bar (ADS2) to @mozaic-ds/vue
+ */
+import figma, { html } from '@figma/code-connect/html';
+
+figma.connect(
+  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=61-2204',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+        L: 'l',
+      }),
+      value: figma.enum('Completion', {
+        '0%': 0,
+        '25%': 25,
+        '50%': 50,
+        '75%': 75,
+        '100%': 100,
+      }),
+    },
+    example: ({ size, value }) =>
+      html`<script setup>
+        import { MCircularProgressbar } from '@mozaic-ds/vue';
+      </script>
+
+      <MCircularProgressbar size=${size} :value=${value} aria-label="Progress bar"></MCircularProgressbar>`,
+  },
+);