@mozaic-ds/vue 2.18.0 → 2.19.1

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

@@ -17,13 +17,13 @@ figma.connect(
     },
     example: ({ appearance }) =>
       html`<script setup>
-        import { MCallout } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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/callout/MCallout.stories.ts

@@ -18,9 +18,6 @@ const meta: Meta<typeof MCallout> = {
   },
   args: {
     icon: '<ImageAlt32 aria-hidden="true" />',
-    title:
-      'This is a title, be concise and use the description message to give details.',
-    description: 'Description message.',
   },
   render: (args) => ({
     components: { MCallout, MButton, MLink, ArrowNext20, ImageAlt32 },

package/src/components/callout/MCallout.vue

@@ -10,13 +10,14 @@
     </div>
     <div class="mc-callout__content">
       <component
+        v-if="title"
         :is="props.tag"
         :id="`callout-title-${id}`"
         class="mc-callout__title"
         >{{ title }}</component
       >
 
-      <p class="mc-callout__message">
+      <p v-if="description" class="mc-callout__message">
         {{ description }}
       </p>
 
@@ -37,11 +38,11 @@ const props = withDefaults(
     /**
      * Title of the callout.
      */
-    title: string;
+    title?: string;
     /**
      * Description of the callout.
      */
-    description: string;
+    description?: string;
     /**
      * Allows to define the callout appearance.
      */

package/src/components/callout/README.md

@@ -7,8 +7,8 @@ A callout is used to highlight additional information that can assist users with
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
-| `title*` | Title of the callout. | `string` | - |
-| `description*` | Description of the callout. | `string` | - |
+| `title` | Title of the callout. | `string` | - |
+| `description` | Description of the callout. | `string` | - |
 | `appearance` | Allows to define the callout appearance. | `"standard"` `"inverse"` `"accent"` `"tips"` | `"standard"` |
 | `tag` | Heading level for the callout title (h2–h6). Adjust to match the
 heading hierarchy of the page where the callout is used. | `"h2"` `"h1"` `"h3"` `"h4"` `"h5"` `"h6"` | `"h2"` |

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

@@ -17,16 +17,16 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MCarousel } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <MCarousel>
+          <template #header>
+            <h2>Carousel title</h2>
+          </template>
+          <div>Slide 1</div>
+          <div>Slide 2</div>
+          <div>Slide 3</div>
+        </MCarousel>`,
   },
 );

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

@@ -1,17 +1,28 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  afterAll,
+  beforeEach,
+} from 'vitest';
 import MCarousel from './MCarousel.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+const observerInstances: MockIntersectionObserver[] = [];
+
 class MockIntersectionObserver {
   callback: any;
   options: any;
   constructor(callback: any, options?: any) {
     this.callback = callback;
     this.options = options;
+    observerInstances.push(this);
   }
   observe = vi.fn();
   unobserve = vi.fn();
@@ -21,6 +32,10 @@ class MockIntersectionObserver {
 describe('MCarousel component', () => {
   let originalObserver: any;
 
+  beforeEach(() => {
+    observerInstances.length = 0;
+  });
+
   beforeAll(() => {
     originalObserver = global.IntersectionObserver;
     global.IntersectionObserver = MockIntersectionObserver as any;
@@ -132,6 +147,15 @@ describe('MCarousel component', () => {
     const container = wrapper.find('.mc-carousel');
     expect(container.attributes('role')).toBe('group');
     expect(container.attributes('aria-roledescription')).toBe('carousel');
-    expect(container.attributes('aria-labelledby')).toBe('mc-carousel__title');
+    // aria-labelledby should point to the headings wrapper (dynamic id)
+    const labelledby = container.attributes('aria-labelledby');
+    expect(labelledby).toBeDefined();
+    expect(wrapper.find(`#${labelledby}`).exists()).toBe(true);
+  });
+
+  it('slide container has aria-live="polite"', () => {
+    const wrapper = mountCarousel();
+    const content = wrapper.find('.mc-carousel__content');
+    expect(content.attributes('aria-live')).toBe('polite');
   });
 });

package/src/components/carousel/MCarousel.vue

@@ -3,10 +3,10 @@
     class="mc-carousel"
     role="group"
     aria-roledescription="carousel"
-    aria-labelledby="mc-carousel__title"
+    :aria-labelledby="titleId"
   >
     <div class="mc-carousel__header">
-      <div class="mc-carousel__headings">
+      <div :id="titleId" class="mc-carousel__headings">
         <slot name="header" />
       </div>
       <div class="mc-carousel__controls">
@@ -34,7 +34,12 @@
         </MIconButton>
       </div>
     </div>
-    <div class="mc-carousel__content" ref="contentContainer">
+    <div
+      class="mc-carousel__content"
+      ref="contentContainer"
+      aria-live="polite"
+      aria-atomic="false"
+    >
       <template
         v-for="(child, index) in $slots.default?.()"
         :key="`carousel-slide-${index}`"
@@ -46,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, type VNode } from 'vue';
+import { computed, onMounted, ref, useId, type VNode } from 'vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 /**
@@ -80,6 +85,7 @@ defineSlots<{
   header: VNode;
 }>();
 
+const titleId = useId();
 const activeIndex = ref<number>(0);
 const contentContainer = ref<HTMLElement | null>(null);
 

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

@@ -30,16 +30,16 @@ figma.connect(
     },
     example: ({ modelValue, indeterminate, disabled, isInvalid }) =>
       html`<script setup>
-        import { MCheckbox } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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

@@ -15,16 +15,16 @@ figma.connect(
     },
     example: ({ inline }) =>
       html`<script setup>
-        import { MCheckboxGroup } from '@mozaic-ds/vue';
-      </script>
+          import { MCheckboxGroup } from '@mozaic-ds/vue';
+        </script>
 
-      <MCheckboxGroup
-        name="group"
-        :options="[
+        <MCheckboxGroup
+          name="group"
+          :options="[
           { id: '1', label: 'Option 1', value: '1' },
           { id: '2', label: 'Option 2', value: '2' },
         ]"
-        inline=${inline}
-      />`,
+          inline=${inline}
+        />`,
   },
 );

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

@@ -9,21 +9,21 @@ figma.connect(
   {
     props: {
       outlined: figma.enum('is outlined', {
-        'true': true,
-        'false': false,
+        true: true,
+        false: false,
       }),
     },
     example: ({ outlined }) =>
       html`<script setup>
-        import { MCheckListMenu } from '@mozaic-ds/vue';
-      </script>
+          import { MCheckListMenu } from '@mozaic-ds/vue';
+        </script>
 
-      <MCheckListMenu
-        :items="[
+        <MCheckListMenu
+          :items="[
           { label: 'Label', checked: true },
           { label: 'Label', checked: false },
         ]"
-        outlined=${outlined}
-      />`,
+          outlined=${outlined}
+        />`,
   },
 );

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

@@ -23,9 +23,13 @@ figma.connect(
     },
     example: ({ size, value }) =>
       html`<script setup>
-        import { MCircularProgressbar } from '@mozaic-ds/vue';
-      </script>
+          import { MCircularProgressbar } from '@mozaic-ds/vue';
+        </script>
 
-      <MCircularProgressbar size=${size} :value=${value} aria-label="Progress bar"></MCircularProgressbar>`,
+        <MCircularProgressbar
+          size=${size}
+          :value=${value}
+          aria-label="Progress bar"
+        ></MCircularProgressbar>`,
   },
 );

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

@@ -33,16 +33,16 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MCombobox } from '@mozaic-ds/vue';
-      </script>
+          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>`,
+        <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.vue

@@ -65,6 +65,7 @@
     <MOptionListbox
       ref="listbox"
       v-model="selection"
+      @update:model-value="onSelectionUpdate"
       :id
       :open="isOpen"
       :multiple
@@ -267,6 +268,12 @@ function close() {
   document.removeEventListener('click', handleClickOutside);
 }
 
+function onSelectionUpdate() {
+  if (!props.multiple) {
+    close();
+  }
+}
+
 function toggleListbox() {
   return isOpen.value ? close() : open();
 }

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

@@ -20,11 +20,11 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MContainer } from '@mozaic-ds/vue';
-      </script>
+          import { MContainer } from '@mozaic-ds/vue';
+        </script>
 
-      <MContainer>
-        <p>Container content</p>
-      </MContainer>`,
+        <MContainer>
+          <p>Container content</p>
+        </MContainer>`,
   },
 );

package/src/components/datatable/DataTable.stories.ts

@@ -3,10 +3,20 @@ import * as utils from './utils';
 
 // Components
 import '@mozaic-ds/datatable-vue/style.css';
-import { MDataTable, MDataTableColumn, MDataTableTop } from '@mozaic-ds/datatable-vue';
+import {
+  MDataTable,
+  MDataTableColumn,
+  MDataTableTop,
+} from '@mozaic-ds/datatable-vue';
 import MButton from '../button/MButton.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
-import { Settings24, Edit24, Download24, Filter24, Search24 } from '@mozaic-ds/icons-vue';
+import {
+  Settings24,
+  Edit24,
+  Download24,
+  Filter24,
+  Search24,
+} from '@mozaic-ds/icons-vue';
 import MToggle from '../toggle/MToggle.vue';
 import MTextInput from '../textinput/MTextInput.vue';
 import MTag from '../tag/MTag.vue';
@@ -38,7 +48,7 @@ const meta: Meta<typeof MDataTable> = {
       <!-- Status -->
       <MDataTableColumn label="Statut" value="status" />
       <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
-    `
+    `,
   },
   argTypes: utils.argtypes,
   parameters: {
@@ -46,7 +56,7 @@ const meta: Meta<typeof MDataTable> = {
     backgrounds: utils.backgrounds,
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn, MDataTableTop, MButton },
@@ -104,7 +114,15 @@ export const FixedHeader: Story = {
 
 export const TopbarActions: Story = {
   render: (args) => ({
-    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton, Settings24, Filter24, MToggle },
+    components: {
+      MDataTable,
+      MDataTableColumn,
+      MDataTableTop,
+      MButton,
+      Settings24,
+      Filter24,
+      MToggle,
+    },
     setup() {
       return { args };
     },
@@ -153,7 +171,15 @@ export const TopbarActions: Story = {
 
 export const TopbarEdition: Story = {
   render: (args) => ({
-    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton, MIconButton, Edit24, Download24 },
+    components: {
+      MDataTable,
+      MDataTableColumn,
+      MDataTableTop,
+      MButton,
+      MIconButton,
+      Edit24,
+      Download24,
+    },
     setup() {
       return { args };
     },
@@ -214,7 +240,7 @@ export const TopbarFull: Story = {
       Settings24,
       Filter24,
       Search24,
-      MTag
+      MTag,
     },
     setup() {
       return { args };

package/src/components/datatable/DataTableCells.stories.ts

@@ -19,7 +19,7 @@ export default {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
 };
 
@@ -248,4 +248,4 @@ export const Default = {
       },
     },
   }),
-};
+};

package/src/components/datatable/DataTableEmpty.stories.ts

@@ -14,7 +14,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
 };
 
@@ -99,4 +99,4 @@ export const Search: Story = {
       </MDataTable>
     `,
   }),
-};
+};

package/src/components/datatable/DataTableExpandable.stories.ts

@@ -12,7 +12,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },
@@ -92,4 +92,4 @@ export const SpecifiedRows: Story = {
     ...Default.args,
     expandableList: [1, 7, 9],
   },
-};
+};

package/src/components/datatable/DataTableNested.stories.ts

@@ -13,7 +13,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },

package/src/components/datatable/DataTableSelectable.stories.ts

@@ -5,7 +5,6 @@ import * as utils from './utils';
 import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
 import MCheckbox from '../checkbox/MCheckbox.vue';
 
-
 const meta: Meta<typeof MDataTable> = {
   title: 'DataTable/MDataTable Selectable',
   component: MDataTable,
@@ -14,7 +13,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },
@@ -121,4 +120,4 @@ export const SpecifiedRows: Story = {
       },
     },
   }),
-};
+};

package/src/components/datatable/DataTableSortable.stories.ts

@@ -14,7 +14,7 @@ const meta: Meta<typeof MDataTable> = {
     componentName: 'MDataTable',
     docs: {
       canvas: { sourceState: 'none' },
-    }
+    },
   },
   render: (args) => ({
     components: { MDataTable, MDataTableColumn },

package/src/components/datepicker/MDatepicker.figma.ts

@@ -12,9 +12,9 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MDatepicker } from '@mozaic-ds/vue';
-      </script>
+          import { MDatepicker } from '@mozaic-ds/vue';
+        </script>
 
-      <MDatepicker id="datepicker" />`,
+        <MDatepicker id="datepicker" />`,
   },
 );

package/src/components/divider/MDivider.figma.ts

@@ -22,9 +22,9 @@ figma.connect(
     },
     example: ({ appearance, size }) =>
       html`<script setup>
-        import { MDivider } from '@mozaic-ds/vue';
-      </script>
+          import { MDivider } from '@mozaic-ds/vue';
+        </script>
 
-      <MDivider appearance=${appearance} size=${size} />`,
+        <MDivider appearance=${appearance} size=${size} />`,
   },
 );

package/src/components/drawer/MDrawer.figma.ts

@@ -19,19 +19,19 @@ figma.connect(
     },
     example: ({ position, extended }) =>
       html`<script setup>
-        import { MDrawer, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MDrawer, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MDrawer
-        open
-        title="Drawer title"
-        :position=${position}
-        :extended=${extended}
-      >
-        <p>Drawer content</p>
-        <template #footer>
-          <MButton>Confirm</MButton>
-        </template>
-      </MDrawer>`,
+        <MDrawer
+          open
+          title="Drawer title"
+          :position=${position}
+          :extended=${extended}
+        >
+          <p>Drawer content</p>
+          <template #footer>
+            <MButton>Confirm</MButton>
+          </template>
+        </MDrawer>`,
   },
 );