@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/navigationindicator/MNavigationIndicator.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="mc-navigation-indicator"
-    role="navigation"
-    aria-label="Navigations steps"
-  >
+  <nav class="mc-navigation-indicator" aria-label="Navigation steps">
     <ul class="mc-navigation-indicator__list">
       <li
         v-for="(_step, index) in steps"
@@ -11,14 +7,14 @@
         class="mc-navigation-indicator__item"
       >
         <button
+          type="button"
           :class="{
             'mc-navigation-indicator__button': true,
             'mc-navigation-indicator__button--active': active === index,
           }"
-          aria-label="Navigation step button"
+          :aria-label="getStepAriaLabel(index)"
           :aria-current="active === index && 'step'"
           @click="setActiveStep(index)"
-          @keydown="onKeydown($event, index)"
         ></button>
       </li>
     </ul>
@@ -43,14 +39,14 @@
         size="s"
         ghost
         @click="emit('action')"
-        aria-label="Control button"
+        :aria-label="props.action === 'pause' ? 'Pause' : 'Resume'"
       >
         <template #icon>
           <component :is="actionIcon" />
         </template>
       </MIconButton>
     </template>
-  </div>
+  </nav>
 </template>
 
 <script setup lang="ts">
@@ -120,10 +116,12 @@ function setActiveStep(step: number) {
   active.value = step;
 }
 
-function onKeydown(event: KeyboardEvent, step: number) {
-  if (event.key === 'Enter') {
-    setActiveStep(step);
+function getStepAriaLabel(step: number) {
+  if (active.value === step) {
+    return `Current step, ${step + 1} of ${props.steps}`;
   }
+
+  return `Go to step ${step + 1} of ${props.steps}`;
 }
 </script>
 

package/src/components/numberbadge/MNumberBadge.figma.ts

@@ -0,0 +1,31 @@
+/**
+ * Code Connect mapping for MNumberBadge
+ * Links Figma Number badge (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-13889',
+  {
+    props: {
+      label: figma.string('Count (number only)'),
+      appearance: figma.enum('Appearance', {
+        Standard: 'standard',
+        Accent: 'accent',
+        Inverse: 'inverse',
+        Danger: 'danger',
+      }),
+      size: figma.enum('Size', {
+        'S (16px)': 's',
+        'M (24px)': 'm',
+        'L (32px)': 'm',
+      }),
+    },
+    example: ({ label, appearance, size }) =>
+      html`<script setup>
+        import { MNumberBadge } from '@mozaic-ds/vue';
+      </script>
+
+      <MNumberBadge :label=${label} appearance=${appearance} size=${size}></MNumberBadge>`,
+  },
+);

package/src/components/optionListbox/MOptionListbox.figma.ts

@@ -0,0 +1,36 @@
+/**
+ * Code Connect mapping for MOptionListbox
+ * Links Figma _option listbox / multi-select 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=20140-26198',
+  {
+    props: {
+      search: figma.boolean('Has a search'),
+      actions: figma.boolean('Has actions (select / unselect all)'),
+      hasSections: figma.enum('Has sections', {
+        False: false,
+        True: true,
+      }),
+      hasAdditionalInfo: figma.enum('Has additional info', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ search, actions }) =>
+      html`<script setup>
+        import { MOptionListbox } from '@mozaic-ds/vue';
+      </script>
+
+      <MOptionListbox
+        id="option-listbox"
+        v-model="selected"
+        multiple
+        search=${search}
+        actions=${actions}
+        :options="[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]"
+      />`,
+  },
+);

package/src/components/optionListbox/MOptionListbox.vue

@@ -82,23 +82,23 @@
         "
       >
         <div class="mc-option-listbox__label">
-          <slot v-if="item.type !== 'section'" name="optionPrefix" />
-
-          <div class="mc-option-listbox__content">
-            <span
-              :class="
-                item.type === 'section'
-                  ? 'mc-option-listbox__section-title'
-                  : 'mc-option-listbox__text'
-              "
-            >
-              {{ item.label }}
-            </span>
+          <slot name="item" v-bind="{ item }">
+            <div class="mc-option-listbox__content">
+              <span
+                :class="
+                  item.type === 'section'
+                    ? 'mc-option-listbox__section-title'
+                    : 'mc-option-listbox__text'
+                "
+              >
+                {{ item.label }}
+              </span>
 
-            <span v-if="item.content" class="mc-option-listbox__additional">
-              {{ item.content }}
-            </span>
-          </div>
+              <span v-if="item.content" class="mc-option-listbox__additional">
+                {{ item.content }}
+              </span>
+            </div>
+          </slot>
 
           <div class="mc-option-listbox__spacer"></div>
 
@@ -137,7 +137,22 @@ import {
   Less20,
   Check20,
 } from '@mozaic-ds/icons-vue';
-import { debounce } from 'lodash';
+
+function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return function (this: unknown, ...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn.apply(this, args);
+    }, wait);
+  };
+}
 
 /**
  * An Option Listbox is a customizable, accessible listbox component designed to power dropdowns and comboboxes with advanced selection capabilities. It supports single or multiple selection, optional search, grouped options with section headers, and full keyboard navigation.
@@ -228,9 +243,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 listboxEl = useTemplateRef('listboxEl');

package/src/components/optionListbox/README.md

@@ -24,7 +24,7 @@ An Option Listbox is a customizable, accessible listbox component designed to po
 
 | 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/overlay/MOverlay.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MOverlay
+ * Links Figma Overlay (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-19511',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MOverlay } from '@mozaic-ds/vue';
+      </script>
+
+      <MOverlay is-visible dialog-label="Overlay">
+        <p>Overlay content</p>
+      </MOverlay>`,
+  },
+);

package/src/components/pageheader/MPageHeader.figma.ts

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MPageHeader
+ * Links Figma Page header (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=16419-62764',
+  {
+    props: {
+      title: figma.string('Title'),
+      shadow: figma.boolean('Has shadow'),
+    },
+    example: ({ title, shadow }) =>
+      html`<script setup>
+        import { MPageHeader } from '@mozaic-ds/vue';
+      </script>
+
+      <MPageHeader title=${title} shadow=${shadow} />`,
+  },
+);

package/src/components/pagination/MPagination.figma.ts

@@ -0,0 +1,34 @@
+/**
+ * Code Connect mapping for MPagination
+ * Links Figma Pagination (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-11558',
+  {
+    props: {
+      compact: figma.enum('Compact mode', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ compact }) =>
+      html`<script setup>
+        import { MPagination } from '@mozaic-ds/vue';
+      </script>
+
+      <MPagination
+        id="pagination-id"
+        :model-value="1"
+        :compact=${compact}
+        :options="[
+          { text: 'Page 1 of 99', value: 1 },
+          { text: 'Page 2 of 99', value: 2 },
+          { text: 'Page 99 of 99', value: 99 },
+        ]"
+        select-label="Select page"
+        aria-label="pagination"
+      ></MPagination>`,
+  },
+);

package/src/components/passwordinput/MPasswordInput.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MPasswordInput
+ * Links Figma _password input / 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=6-29957',
+  {
+    props: {
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+      isClearable: figma.boolean('Is clearable'),
+    },
+    example: ({ isInvalid, isClearable }) =>
+      html`<script setup>
+        import { MPasswordInput } from '@mozaic-ds/vue';
+      </script>
+
+      <MPasswordInput
+        id="password-input-id"
+        :is-invalid=${isInvalid}
+        :is-clearable=${isClearable}
+        placeholder="Enter your password"
+        model-value=""
+      ></MPasswordInput>`,
+  },
+);

package/src/components/phonenumber/MPhoneNumber.figma.ts

@@ -0,0 +1,47 @@
+/**
+ * Code Connect mapping for MPhoneNumber
+ * Links Figma _phone number input / 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=5022-21080',
+  {
+    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 { MPhoneNumber } from '@mozaic-ds/vue';
+      </script>
+
+      <MPhoneNumber
+        id="phone-number-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+      ></MPhoneNumber>`,
+  },
+);

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

@@ -0,0 +1,41 @@
+/**
+ * Code Connect mapping for MPincode
+ * Links Figma Pincode input (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=12443-35984',
+  {
+    props: {
+      disabled: figma.enum('State', {
+        Disabled: true,
+        Default: false,
+        Hovered: false,
+        'Read-only': false,
+      }),
+      readonly: figma.enum('State', {
+        'Read-only': true,
+        Default: false,
+        Disabled: false,
+        Hovered: false,
+      }),
+      isInvalid: figma.enum('Is invalid', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ disabled, readonly, isInvalid }) =>
+      html`<script setup>
+        import { MPincode } from '@mozaic-ds/vue';
+      </script>
+
+      <MPincode
+        id="pincode-id"
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        aria-label="Enter your code"
+      ></MPincode>`,
+  },
+);

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

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

package/src/components/pincode/MPincode.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="mc-pincode-input" @paste="onPaste">
+  <div
+    class="mc-pincode-input"
+    :class="{
+      'mc-pincode-input': true,
+      'mc-pincode-input__disabled': disabled,
+      'mc-pincode-input__readonly': readonly,
+      'is-invalid': isInvalid,
+    }"
+    @paste="onPaste"
+  >
     <input
       v-for="(digit, index) in otp"
       :key="index"
@@ -12,7 +21,6 @@
       autocomplete="one-time-code"
       :name="name || `pincode-${id}`"
       class="mc-pincode-input__control"
-      :class="classObject"
       :disabled="disabled"
       :readonly="readonly"
       :value="digit"
@@ -25,13 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-  type ComponentPublicInstance,
-} from 'vue';
+import { ref, watch, nextTick, 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.<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).
  */
@@ -71,12 +73,6 @@ const props = withDefaults(
   },
 );
 
-const classObject = computed(() => {
-  return {
-    'is-invalid': props.isInvalid,
-  };
-});
-
 const emit = defineEmits<{
   /**
    * Emits when the pincode value changes, updating the modelValue prop.

package/src/components/popover/MPopover.figma.ts

@@ -0,0 +1,42 @@
+/**
+ * Code Connect mapping for MPopover
+ * Links Figma Popover (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=9680-7268',
+  {
+    props: {
+      appearance: figma.enum('Appareance', {
+        Standard: 'standard',
+        Inverse: 'inverse',
+      }),
+      size: figma.enum('Size', {
+        'S (default)': 's',
+        M: 'm',
+        L: 'l',
+      }),
+      pointer: figma.boolean('Has pointer'),
+      closable: figma.boolean('Is closable'),
+    },
+    example: ({ appearance, size, pointer, closable }) =>
+      html`<script setup>
+        import { MPopover, MButton } from '@mozaic-ds/vue';
+      </script>
+
+      <MPopover
+        id="popover-id"
+        title="Popover title"
+        description="Popover description"
+        :pointer=${pointer}
+        :closable=${closable}
+        appearance=${appearance}
+        size=${size}
+      >
+        <template #activator="{ id }">
+          <MButton :popovertarget="id">Open</MButton>
+        </template>
+      </MPopover>`,
+  },
+);

package/src/components/popover/MPopover.spec.ts

@@ -103,4 +103,130 @@ describe('MPopover.vue', () => {
     expect(activator.exists()).toBe(true);
     expect(activator.attributes('popovertarget')).toBe(id);
   });
+
+  describe('Focus management (toggle)', () => {
+    it('focuses the first focusable element inside when opened', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        props: { closable: true },
+      });
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'open' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      const firstFocusable = popoverEl.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      expect(document.activeElement).toBe(firstFocusable);
+      wrapper.unmount();
+    });
+
+    it('focuses the popover container when opened without focusable content', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        props: {
+          closable: false,
+          title: 'Information',
+          description: 'Read-only content',
+        },
+      });
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper')
+        .element as HTMLElement;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'open' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      expect(document.activeElement).toBe(popoverEl);
+      wrapper.unmount();
+    });
+
+    it('returns focus to the trigger when closed with focus inside the popover', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        props: { closable: true },
+        slots: {
+          activator: (slotProps: { id: string }) =>
+            h('button', {
+              popovertarget: slotProps.id,
+              class: 'trigger-btn',
+            }),
+        },
+      });
+
+      // Simulate focus being on the close button (inside the popover)
+      const closeBtn = wrapper.findComponent(MIconButton).find('button')
+        .element as HTMLElement;
+      closeBtn.focus();
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'closed' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      const trigger = wrapper.find('.trigger-btn').element as HTMLElement;
+      expect(document.activeElement).toBe(trigger);
+      wrapper.unmount();
+    });
+
+    it('returns focus to the trigger when closed with focus on document.body', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        slots: {
+          activator: (slotProps: { id: string }) =>
+            h('button', {
+              popovertarget: slotProps.id,
+              class: 'trigger-btn',
+            }),
+        },
+      });
+
+      // Simulate browser moving focus to body after popover collapses
+      (document.activeElement as HTMLElement)?.blur?.();
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'closed' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      const trigger = wrapper.find('.trigger-btn').element as HTMLElement;
+      expect(document.activeElement).toBe(trigger);
+      wrapper.unmount();
+    });
+
+    it('does not steal focus when closed by an outside click (focus already on another element)', async () => {
+      const wrapper = mount(MPopover, {
+        attachTo: document.body,
+        slots: {
+          activator: (slotProps: { id: string }) =>
+            h('button', {
+              popovertarget: slotProps.id,
+              class: 'trigger-btn',
+            }),
+        },
+      });
+
+      // Simulate user clicking an outside input
+      const outsideInput = document.createElement('input');
+      document.body.appendChild(outsideInput);
+      outsideInput.focus();
+
+      const popoverEl = wrapper.find('.mc-popover__wrapper').element;
+      const toggleEvent = new Event('toggle') as ToggleEvent;
+      Object.defineProperty(toggleEvent, 'newState', { value: 'closed' });
+      popoverEl.dispatchEvent(toggleEvent);
+      await wrapper.vm.$nextTick();
+
+      // Focus should remain on the outside input, not be stolen by the trigger
+      expect(document.activeElement).toBe(outsideInput);
+      outsideInput.remove();
+      wrapper.unmount();
+    });
+  });
 });