@mozaic-ds/vue 2.16.0 → 2.18.0

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/checklistmenu/MCheckListMenu.spec.ts

@@ -6,7 +6,7 @@ import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
 
 const StubMBuiltInMenu = {
   name: 'MBuiltInMenu',
-  props: ['modelValue', 'items', 'outlined'],
+  props: ['modelValue', 'items', 'outlined', 'label'],
   emits: ['update:modelValue'],
   template: '<div />',
 };
@@ -60,6 +60,17 @@ describe('MCheckListMenu', () => {
     expect(builtIn.props('outlined')).toBe(true);
   });
 
+  it('forwards label prop to MBuiltInMenu', () => {
+    const items = [{ label: 'A', checked: false }];
+    const wrapper = mount(MCheckListMenu, {
+      props: { items, label: 'Checklist navigation' },
+      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
+    });
+
+    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
+    expect(builtIn.props('label')).toBe('Checklist navigation');
+  });
+
   it('emits update:modelValue when inner menu updates modelValue', async () => {
     const items = [{ label: 'X', checked: false }];
     const wrapper = mount(MCheckListMenu, {

package/src/components/checklistmenu/MCheckListMenu.vue

@@ -3,6 +3,7 @@
     v-model="currentMenuItem"
     :items="menuItems"
     :outlined="props.outlined"
+    :label="props.label"
   />
 </template>
 
@@ -31,6 +32,11 @@ const props = defineProps<{
    * When enabled, adds a visible border around the wrapper to highlight or separate its content.
    */
   outlined?: boolean;
+  /**
+   * Accessible label for the navigation landmark. Should describe the purpose
+   * of this menu to distinguish it from other navigations on the page.
+   */
+  label?: string;
 }>();
 
 const emit = defineEmits<{

package/src/components/checklistmenu/README.md

@@ -10,6 +10,8 @@ A check-list menu is a structured vertical list where each item represents a dis
 | `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
 | `items*` | Defines the menu items, each of which sets a checked state and act as a button, link, or router-link. | `CheckListMenuItem[]` | - |
 | `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+| `label` | Accessible label for the navigation landmark. Should describe the purpose
+of this menu to distinguish it from other navigations on the page. | `string` | - |
 
 ## Events
 

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>`,
+  },
+);

package/src/components/combobox/MCombobox.figma.ts

@@ -0,0 +1,48 @@
+/**
+ * Code Connect mapping for MCombobox
+ * Links Figma _combobox / base 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=19683-17907',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        'M (default)': 'm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Hovered: false,
+        Focused: false,
+        Disabled: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ size, disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MCombobox } from '@mozaic-ds/vue';
+      </script>
+
+      <MCombobox
+        id="combobox-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :options="[{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }]"
+      ></MCombobox>`,
+  },
+);

package/src/components/combobox/MCombobox.spec.ts

@@ -117,7 +117,7 @@ describe('MCombobox', () => {
       },
     });
 
-    expect(wrapper.find('.mc-combobox__control').text()).toBe('1, 2');
+    expect(wrapper.find('.mc-combobox__control').text()).toBe('One, Two');
   });
 
   it('toggles listbox open/close on control click', async () => {

package/src/components/combobox/MCombobox.vue

@@ -14,6 +14,7 @@
     <div class="mc-combobox__input">
       <button
         ref="comboboxControl"
+        type="button"
         :aria-expanded="isOpen ? 'true' : 'false'"
         aria-haspopup="listbox"
         :aria-controls="`listbox-${id}`"
@@ -33,7 +34,10 @@
       >
         {{ selectionLabel }}
       </button>
-      <span v-if="multiple && hasValue" class="mc-combobox__counter">
+      <span
+        v-if="multiple && hasValue && counterLabel"
+        class="mc-combobox__counter"
+      >
         {{ counterLabel }}
       </span>
 
@@ -80,8 +84,8 @@
         }
       "
     >
-      <template #optionPrefix>
-        <slot name="optionPrefix" />
+      <template #item="{ item }">
+        <slot name="item" v-bind="{ item }" />
       </template>
     </MOptionListbox>
   </div>
@@ -173,7 +177,6 @@ const props = withDefaults(
   }>(),
   {
     placeholder: 'Select an option',
-    counterLabel: '99 selected',
     searchPlaceholder: 'Find an option...',
     selectLabel: 'Select all',
     clearLabel: 'Clear',
@@ -197,9 +200,9 @@ const emit = defineEmits<{
 
 defineSlots<{
   /**
-   * Use this slot to add a prefix to options.
+   * Use this slot to customize the content of each item.
    */
-  optionPrefix: VNode;
+  item(props: { item: ListboxOption }): VNode;
 }>();
 
 const id = useId();
@@ -227,12 +230,13 @@ const selection = computed({
 const selectionLabel = computed(() => {
   if (Array.isArray(selection.value)) {
     if (!selection.value.length) return props.placeholder;
-    return (selection.value as (string | number)[]).join(', ');
+    return (selection.value as (string | number)[])
+      .map((value) => getOptionLabel(value))
+      .join(', ');
   }
 
   return (
-    props.options.find((option) => option.value === selection.value)?.label ||
-    props.placeholder
+    getOptionLabel(selection.value as string | number) || props.placeholder
   );
 });
 
@@ -267,6 +271,11 @@ function toggleListbox() {
   return isOpen.value ? close() : open();
 }
 
+function getOptionLabel(value: string | number) {
+  const option = props.options.find((option) => option.value === value);
+  return option ? option.label : '';
+}
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });

package/src/components/combobox/README.md

@@ -18,7 +18,7 @@ A combobox is an input field that allows users to select an option from a dropdo
 | `actions` | Show select all / clear buttons when multiple. | `boolean` | - |
 | `checkableSections` | Enable checkable section headers in the listbox. | `boolean` | - |
 | `placeholder` | Placeholder text when no value is selected. | `string` | `"Select an option"` |
-| `counterLabel` | Label for the selected items counter. | `string` | `"99 selected"` |
+| `counterLabel` | Label for the selected items counter. | `string` | - |
 | `searchPlaceholder` | Placeholder text for the search input. | `string` | `"Find an option..."` |
 | `selectLabel` | Label for the "Select all" button. | `string` | `"Select all"` |
 | `clearLabel` | Label for the "Clear selection" button. | `string` | `"Clear"` |
@@ -28,7 +28,7 @@ A combobox is an input field that allows users to select an option from a dropdo
 
 | Name | Description |
 | --- | --- |
-| `optionPrefix` | Use this slot to add a prefix to options. |
+| `item` | Use this slot to customize the content of each item. |
 
 ## Events
 

package/src/components/container/MContainer.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MContainer
+ * Links Figma Container 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=20116-26427',
+  {
+    props: {
+      appearance: figma.enum('Appearance', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Inverse: 'inverse',
+      }),
+      bordered: figma.enum('Is bordered', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: () =>
+      html`<script setup>
+        import { MContainer } from '@mozaic-ds/vue';
+      </script>
+
+      <MContainer>
+        <p>Container content</p>
+      </MContainer>`,
+  },
+);