@mozaic-ds/vue 2.15.0 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.15.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.11.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",
@@ -57,19 +61,21 @@
     "@storybook/addon-themes": "^10.0.4",
     "@storybook/vue3-vite": "^10.0.4",
     "@types/jsdom": "^28.0.0",
+    "@types/lodash": "^4.17.23",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^4.0.7",
     "@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",
+    "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",
@@ -81,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/actionlistbox/MActionListbox.spec.ts

@@ -24,6 +24,7 @@ const items = [
     icon: DummyIcon,
   },
   {
+    id: 'move',
     label: 'Move to...',
     icon: DummyIcon,
   },
@@ -121,4 +122,17 @@ describe('MActionListbox', () => {
     expect(wrapper.emitted('close')).toBeTruthy();
     expect(wrapper.emitted('close')?.length).toBe(1);
   });
+
+  it('emits "action" when an item is clicked', async () => {
+    const wrapper = mountComponent({ title: 'Action List' });
+
+    const actions = wrapper.findAll('.mc-action-list__button');
+    await actions[0].trigger('click');
+
+    expect(wrapper.emitted('action')).toBeTruthy();
+    expect(wrapper.emitted('action')?.[0][0]).toBe(0);
+
+    await actions[1].trigger('click');
+    expect(wrapper.emitted('action')?.[1][0]).toBe('move');
+  });
 });

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MActionListbox from './MActionListbox.vue';
 import MButton from '../button/MButton.vue';
@@ -25,10 +26,10 @@ const meta: Meta<typeof MActionListbox> = {
         <template>
           <MActionListbox
             :items="[
-              { label: 'Duplicate', icon: Copy20, disabled: true },
-              { label: 'Move to...', icon: ArrowTopRight20 },
-              { label: 'Download', icon: Download20 },
-              { label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
+              { id: 'item-1', label: 'Duplicate', icon: Copy20, disabled: true },
+              { id: 'item-2', label: 'Move to...', icon: ArrowTopRight20 },
+              { id: 'item-3', label: 'Download', icon: Download20 },
+              { id: 'item-4', label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
             ]"
             title="Listbox title (optional)"
           />
@@ -41,19 +42,23 @@ const meta: Meta<typeof MActionListbox> = {
     title: 'Listbox title (optional)',
     items: [
       {
+        id: 'item-1',
         label: 'Duplicate',
         icon: Copy20,
         disabled: true,
       },
       {
+        id: 'item-2',
         label: 'Move to...',
         icon: ArrowTopRight20,
       },
       {
+        id: 'item-3',
         label: 'Download',
         icon: Download20,
       },
       {
+        id: 'item-4',
         label: 'Delete',
         icon: Trash20,
         appearance: 'danger',
@@ -64,10 +69,11 @@ const meta: Meta<typeof MActionListbox> = {
   render: (args) => ({
     components: { MActionListbox },
     setup() {
-      return { args };
+      const handleAction = action('action');
+      return { args, handleAction };
     },
     template: `
-        <MActionListbox v-bind="args" />
+        <MActionListbox v-bind="args" @action="handleAction" />
     `,
   }),
 };
@@ -80,11 +86,12 @@ export const Activator: Story = {
   render: (args) => ({
     components: { MActionListbox, MButton },
     setup() {
-      return { args };
+      const handleAction = action('action');
+      return { args, handleAction };
     },
     template: `
       <div>
-        <MActionListbox v-bind="args">
+        <MActionListbox v-bind="args" @action="handleAction">
           <template #activator="{id}">
             <MButton :popovertarget="id">Activator</MButton>
           </template>

package/src/components/actionlistbox/MActionListbox.vue

@@ -42,7 +42,11 @@
               ]"
               role="menuitem"
             >
-              <button type="button" class="mc-action-list__button">
+              <button
+                type="button"
+                class="mc-action-list__button"
+                @click="emit('action', item?.id || index)"
+              >
                 <component
                   v-if="item.icon"
                   class="mc-action-list__icon"
@@ -85,6 +89,10 @@ const props = withDefaults(
      */
 
     items: Array<{
+      /**
+       * Unique identifier for the item.
+       */
+      id?: string;
       /**
        * The icon displayed for the item from Mozaic-icon-vue.
        */
@@ -115,6 +123,10 @@ const emit = defineEmits<{
    * Emits when the close button is clicked.
    */
   (on: 'close'): void;
+  /**
+   * Emits when an item is clicked, providing its id or index.
+   */
+  (on: 'action', value: string | number): void;
 }>();
 
 const slots = defineSlots<{

package/src/components/actionlistbox/README.md

@@ -9,7 +9,7 @@ An action list is a contextual menu that presents a list of available actions re
 | --- | --- | --- | --- | 
 | `title` | title displayed in mobile version. | `string` | - |
 | `position` | Defines the position of the listbox relative to its trigger or container. | `"bottom"` `"top"` `"left"` `"right"` | `"bottom"` |
-| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
+| `items*` | An array of objects that allows you to provide all the data needed to generate the content for each item. | `{ id?: string` `undefined; icon?: Component` `undefined; label: string; disabled?: boolean` `undefined; appearance?: "standard"` `"danger"` `undefined; divider?: boolean` `undefined; }[]` | - |
 
 ## Slots
 
@@ -22,6 +22,7 @@ An action list is a contextual menu that presents a list of available actions re
 | Name | Description | Type |
 | --- | --- | --- |
 | `close` | Emits when the close button is clicked. | [] |
+| `action` | Emits when an item is clicked, providing its id or index. | [value: string | number] |
 
 ## Dependencies
 

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

@@ -41,6 +41,7 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 
 - [MFileUploaderItem](../fileuploaderitem)
 - [MNavigationIndicator](../navigationindicator)
+- [MOptionListbox](../optionListbox)
 - [MPagination](../pagination)
 - [MPasswordInput](../passwordinput)
 - [MStepperBottomBar](../stepperbottombar)
@@ -52,6 +53,7 @@ style MButton fill:#008240,stroke:#333,stroke-width:4px
 graph TD;
   MFileUploaderItem --> MButton
   MNavigationIndicator --> MButton
+  MOptionListbox --> MButton
   MPagination --> MButton
   MPasswordInput --> MButton
   MStepperBottomBar --> 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>`,
+  },
+);