@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/popover/MPopover.vue

@@ -10,10 +10,13 @@
   >
     <div
       :id="id"
+      ref="popoverRef"
       class="mc-popover__wrapper"
       popover
+      tabindex="-1"
       :aria-labelledby="title && `${id}-title`"
       :aria-describedby="description && `${id}-description`"
+      @toggle="onToggle"
     >
       <div class="mc-popover__content">
         <div v-if="title || description" class="mc-popover__headings">
@@ -58,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { useId, type VNode } from 'vue';
+import { useId, useTemplateRef, nextTick, type VNode } from 'vue';
 import { Cross20 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 /**
@@ -124,6 +127,38 @@ defineSlots<{
 }>();
 
 const id = useId();
+const popoverRef = useTemplateRef('popoverRef');
+
+function onToggle(event: ToggleEvent) {
+  if (event.newState === 'open') {
+    nextTick(() => {
+      const focusable = popoverRef.value?.querySelector<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable) {
+        focusable.focus();
+      } else {
+        popoverRef.value?.focus();
+      }
+    });
+  } else {
+    const activeEl = document.activeElement as HTMLElement | null;
+    const closedFromInside =
+      !activeEl ||
+      activeEl === document.body ||
+      popoverRef.value?.contains(activeEl);
+
+    if (closedFromInside) {
+      const triggers = document.querySelectorAll<HTMLElement>(
+        `[popovertarget="${id}"]:not(.mc-popover__close)`,
+      );
+      const trigger = Array.from(triggers).find(
+        (el) => !popoverRef.value?.contains(el),
+      );
+      trigger?.focus();
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/quantityselector/MQuantitySelector.figma.ts

@@ -0,0 +1,50 @@
+/**
+ * Code Connect mapping for MQuantitySelector
+ * Links Figma _quantity selector / 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-29697',
+  {
+    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 { MQuantitySelector } from '@mozaic-ds/vue';
+      </script>
+
+      <MQuantitySelector
+        id="quantity-selector-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        :model-value="1"
+        :min="0"
+        :max="10"
+      ></MQuantitySelector>`,
+  },
+);

package/src/components/radio/MRadio.figma.ts

@@ -0,0 +1,40 @@
+/**
+ * Code Connect mapping for MRadio
+ * Links Figma Radio button (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-29235',
+  {
+    props: {
+      modelValue: figma.enum('Is checked', {
+        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, disabled, isInvalid }) =>
+      html`<script setup>
+        import { MRadio } from '@mozaic-ds/vue';
+      </script>
+
+      <MRadio
+        id="radio-id"
+        label="Radio button Label"
+        :model-value=${modelValue}
+        disabled=${disabled}
+        :is-invalid=${isInvalid}
+      ></MRadio>`,
+  },
+);

package/src/components/radiogroup/MRadioGroup.figma.ts

@@ -0,0 +1,30 @@
+/**
+ * Code Connect mapping for MRadioGroup
+ * Links Figma Radio button 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-29119',
+  {
+    props: {
+      inline: figma.enum('Layout', {
+        'Stacked (default)': false,
+        Inline: true,
+      }),
+    },
+    example: ({ inline }) =>
+      html`<script setup>
+        import { MRadioGroup } from '@mozaic-ds/vue';
+      </script>
+
+      <MRadioGroup
+        name="group"
+        :options="[
+          { id: '1', label: 'Option 1', value: '1' },
+          { id: '2', label: 'Option 2', value: '2' },
+        ]"
+        inline=${inline}
+      />`,
+  },
+);

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

@@ -0,0 +1,33 @@
+/**
+ * Code Connect mapping for MSegmentedControl
+ * Links Figma Segmented control (ADS2) to @mozaic-ds/vue
+ * Props from figma_get_component (Figma Console MCP) + MSegmentedControl.stories.ts
+ */
+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-26997',
+  {
+    props: {
+      size: figma.enum('Size', {
+        S: 's',
+        M: 'm',
+      }),
+      full: figma.enum('Full width', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ size, full }) =>
+      html`<script setup>
+        import { MSegmentedControl } from '@mozaic-ds/vue';
+      </script>
+
+      <MSegmentedControl
+        size=${size}
+        full=${full}
+        :segments="[{ id: 'label1', label: 'Label' }, { id: 'label2', label: 'Label' }]"
+        model-value="label1"
+      ></MSegmentedControl>`,
+  },
+);

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
+import { nextTick } from 'vue';
 import MSegmentedControl from './MSegmentedControl.vue';
 
 describe('MSegmentedControl.vue', () => {
@@ -145,4 +146,95 @@ describe('MSegmentedControl.vue', () => {
       expect(button.attributes('role')).toBe('radio');
     });
   });
+
+  it('forwards attrs to the radiogroup so callers can name the group', () => {
+    const wrapper = mount(MSegmentedControl, {
+      props: { segments },
+      attrs: { 'aria-label': 'View options' },
+    });
+    expect(wrapper.find('[role="radiogroup"]').attributes('aria-label')).toBe(
+      'View options',
+    );
+  });
+
+  describe('Keyboard navigation (radiogroup pattern)', () => {
+    it('selected button has tabindex="0", others have tabindex="-1"', () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: '2' },
+      });
+      const buttons = wrapper.findAll('button');
+      expect(buttons[0].attributes('tabindex')).toBe('-1');
+      expect(buttons[1].attributes('tabindex')).toBe('0');
+      expect(buttons[2].attributes('tabindex')).toBe('-1');
+    });
+
+    it('keeps the first segment tabbable when modelValue does not match any segment', () => {
+      const wrapper = mount(MSegmentedControl, {
+        props: { segments, modelValue: 'unknown' },
+      });
+      const buttons = wrapper.findAll('button');
+      expect(buttons[0].attributes('tabindex')).toBe('0');
+      expect(buttons[1].attributes('tabindex')).toBe('-1');
+      expect(buttons[2].attributes('tabindex')).toBe('-1');
+      expect(buttons[0].attributes('aria-checked')).toBe('false');
+    });
+
+    it('ArrowRight selects and focuses the next segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '1' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[0].element.focus();
+      await buttons[0].trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['2']);
+      expect(document.activeElement).toBe(buttons[1].element);
+      wrapper.unmount();
+    });
+
+    it('ArrowLeft selects and focuses the previous segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '2' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[1].trigger('keydown', { key: 'ArrowLeft' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
+      wrapper.unmount();
+    });
+
+    it('ArrowRight wraps around from last to first segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '3' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('keydown', { key: 'ArrowRight' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
+      wrapper.unmount();
+    });
+
+    it('Home selects the first segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '3' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[2].trigger('keydown', { key: 'Home' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
+      wrapper.unmount();
+    });
+
+    it('End selects the last segment', async () => {
+      const wrapper = mount(MSegmentedControl, {
+        attachTo: document.body,
+        props: { segments, modelValue: '1' },
+      });
+      const buttons = wrapper.findAll('button');
+      await buttons[0].trigger('keydown', { key: 'End' });
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['3']);
+      wrapper.unmount();
+    });
+  });
 });

package/src/components/segmentedcontrol/MSegmentedControl.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="mc-segmented-control" :class="classObject" role="radiogroup">
+  <div
+    class="mc-segmented-control"
+    :class="classObject"
+    role="radiogroup"
+    v-bind="$attrs"
+  >
     <button
       v-for="(segment, index) in segments"
       :key="`segment-${index}`"
+      :ref="(el) => setButtonRef(el, index)"
       type="button"
       class="mc-segmented-control__segment"
       :class="{
@@ -13,7 +19,9 @@
       }"
       :aria-checked="isSegmentSelected(index, segment.id)"
       role="radio"
+      :tabindex="index === selectedIndex ? 0 : -1"
       @click="onClickSegment(index, segment.id)"
+      @keydown="onKeydown($event, index)"
     >
       {{ segment.label }}
     </button>
@@ -21,7 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  ref,
+  watch,
+  type ComponentPublicInstance,
+} 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.
  */
@@ -71,6 +85,17 @@ const classObject = computed(() => {
 
 const modelValue = ref<string | number | undefined>(props.modelValue);
 
+const selectedIndex = computed(() => {
+  const index = props.segments.findIndex((segment, segmentIndex) => {
+    const value =
+      typeof props.modelValue === 'number' ? segmentIndex : segment.id;
+
+    return modelValue.value === value;
+  });
+
+  return index >= 0 ? index : 0;
+});
+
 watch(
   () => props.modelValue,
   (newVal) => {
@@ -93,6 +118,40 @@ const isSegmentSelected = (index: number, id?: string) => {
   return modelValue.value === value;
 };
 
+const buttonRefs = ref<(HTMLButtonElement | null)[]>([]);
+
+function setButtonRef(
+  el: Element | ComponentPublicInstance | null,
+  index: number,
+) {
+  buttonRefs.value[index] = el as HTMLButtonElement | null;
+}
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  let nextIndex: number | null = null;
+
+  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+    event.preventDefault();
+    nextIndex = (index + 1) % props.segments.length;
+  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    nextIndex = (index - 1 + props.segments.length) % props.segments.length;
+  } else if (event.key === 'Home') {
+    event.preventDefault();
+    nextIndex = 0;
+  } else if (event.key === 'End') {
+    event.preventDefault();
+    nextIndex = props.segments.length - 1;
+  }
+
+  if (nextIndex !== null) {
+    onClickSegment(nextIndex, props.segments[nextIndex].id);
+    nextTick(() => buttonRefs.value[nextIndex!]?.focus());
+  }
+}
+
+defineOptions({ inheritAttrs: false });
+
 const emit = defineEmits<{
   /**
    * Emits when the selected segment changes, updating the modelValue prop.

package/src/components/select/MSelect.figma.ts

@@ -0,0 +1,49 @@
+/**
+ * Code Connect mapping for MSelect
+ * Links Figma _select / 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=4924-17972',
+  {
+    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 { MSelect } from '@mozaic-ds/vue';
+      </script>
+
+      <MSelect
+        id="select-id"
+        size=${size}
+        disabled=${disabled}
+        readonly=${readonly}
+        :is-invalid=${isInvalid}
+        placeholder="Choose an option"
+        :options="[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]"
+      ></MSelect>`,
+  },
+);

package/src/components/sidebar/MSidebar.figma.ts

@@ -0,0 +1,28 @@
+/**
+ * Code Connect mapping for MSidebar
+ * Links Figma Sidebar (desktop only) (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=11697-6444',
+  {
+    props: {
+      modelValue: figma.enum('is expanded', {
+        True: true,
+        False: false,
+      }),
+    },
+    example: ({ modelValue }) =>
+      html`<script setup>
+        import { MSidebar } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebar :model-value=${modelValue}>
+        <template #header>Header</template>
+        <template #shortcuts>Shortcuts</template>
+        <template #nav>Nav items</template>
+        <template #footer>Footer</template>
+      </MSidebar>`,
+  },
+);

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.figma.ts

@@ -0,0 +1,19 @@
+/**
+ * Code Connect mapping for MSidebarExpandableItem
+ * Links Figma _sidebar / section menu item (multiple levels) 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=11697-6356',
+  {
+    example: () =>
+      html`<script setup>
+        import { MSidebarExpandableItem, MSidebarNavItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarExpandableItem label="Section" menu-label="Section">
+        <MSidebarNavItem label="Sub item" />
+      </MSidebarExpandableItem>`,
+  },
+);

package/src/components/sidebarfooter/MSidebarFooter.figma.ts

@@ -0,0 +1,21 @@
+/**
+ * Code Connect mapping for MSidebarFooter
+ * Links Figma _sidebar / footer 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=11880-28442',
+  {
+    props: {
+      expendable: figma.boolean('Is expandable'),
+      hasProfileInfo: figma.boolean('Has profile info'),
+    },
+    example: ({ expendable }) =>
+      html`<script setup>
+        import { MSidebarFooter } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarFooter title="User name" subtitle="user@example.com" :expendable=${expendable} />`,
+  },
+);

package/src/components/sidebarheader/MSidebarHeader.figma.ts

@@ -0,0 +1,18 @@
+/**
+ * Code Connect mapping for MSidebarHeader
+ * Links Figma _sidebar / header 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=11910-12842',
+  {
+    props: {},
+    example: () =>
+      html`<script setup>
+        import { MSidebarHeader } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarHeader title="App name" logo="/logo.png" />`,
+  },
+);

package/src/components/sidebarnavitem/MSidebarNavItem.figma.ts

@@ -0,0 +1,23 @@
+/**
+ * Code Connect mapping for MSidebarNavItem
+ * Links Figma _sidebar / section menu item (single level) 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=18213-20397',
+  {
+    props: {
+      active: figma.enum('Is selected', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ active }) =>
+      html`<script setup>
+        import { MSidebarNavItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarNavItem label="Menu item" active=${active} />`,
+  },
+);

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.figma.ts

@@ -0,0 +1,20 @@
+/**
+ * Code Connect mapping for MSidebarShortcutItem
+ * Links Figma _sidebar / shortcut item 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=11697-6376',
+  {
+    props: {
+      label: figma.string('Text'),
+    },
+    example: ({ label }) =>
+      html`<script setup>
+        import { MSidebarShortcutItem } from '@mozaic-ds/vue';
+      </script>
+
+      <MSidebarShortcutItem label=${label} href="#" />`,
+  },
+);

package/src/components/starrating/MStarRating.figma.ts

@@ -0,0 +1,35 @@
+/**
+ * Code Connect mapping for MStarRating
+ * Links Figma Star Rating to @mozaic-ds/vue
+ * Figma component (node 5:14389) exposes: Type, Size, Text only.
+ */
+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-14389',
+  {
+    props: {
+      text: figma.string('Text'),
+      size: figma.enum('Size', {
+        'S (20px)': 's',
+        'M (24px)': 'm',
+        'L (32px)': 'l',
+      }),
+      type: figma.enum('Type', {
+        'Stars only (read-only or as input)': 'stars',
+        'Additional info': 'additionalInfo',
+        Link: 'link',
+      }),
+    },
+    example: ({ text, size }) =>
+      html`<script setup>
+        import { MStarRating } from '@mozaic-ds/vue';
+      </script>
+
+      <MStarRating
+        :model-value="3.5"
+        size=${size}
+        text=${text}
+      ></MStarRating>`,
+  },
+);