@mozaic-ds/vue 2.19.1 → 2.20.0

package/src/components/Welcome.mdx

@@ -39,7 +39,7 @@ import '@mozaic-ds/styles';
       <svg lass="mc-button__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 54 80" fill="none"><g clip-path="url(#figma__clip0_912_3)"><path d="M13.3333 80.0002C20.6933 80.0002 26.6667 74.0268 26.6667 66.6668V53.3335H13.3333C5.97333 53.3335 0 59.3068 0 66.6668C0 74.0268 5.97333 80.0002 13.3333 80.0002Z" fill="#0ACF83"/><path d="M0 39.9998C0 32.6398 5.97333 26.6665 13.3333 26.6665H26.6667V53.3332H13.3333C5.97333 53.3332 0 47.3598 0 39.9998Z" fill="#A259FF"/><path d="M0 13.3333C0 5.97333 5.97333 0 13.3333 0H26.6667V26.6667H13.3333C5.97333 26.6667 0 20.6933 0 13.3333Z" fill="#F24E1E"/><path d="M26.6667 0H40.0001C47.3601 0 53.3334 5.97333 53.3334 13.3333C53.3334 20.6933 47.3601 26.6667 40.0001 26.6667H26.6667V0Z" fill="#FF7262"/><path d="M53.3334 39.9998C53.3334 47.3598 47.3601 53.3332 40.0001 53.3332C32.6401 53.3332 26.6667 47.3598 26.6667 39.9998C26.6667 32.6398 32.6401 26.6665 40.0001 26.6665C47.3601 26.6665 53.3334 32.6398 53.3334 39.9998Z" fill="#1ABCFE"/></g><defs><clipPath id="figma__clip0_912_3"><rect width="53.3333" height="80" fill="white"/></clipPath></defs></svg>
       <span class="mc-button__label">Figma</span>
     </a>
-    <a href="?path=/docs/getting-started--docs" class="mc-button mc-button--accent">
+    <a href="/?path=/docs/getting-started--docs" class="mc-button mc-button--accent">
       <span class="mc-button__label">Get Started</span>
       <svg class="mc-button__icon" width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path fill-rule="evenodd" d="M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"></path>

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

@@ -1,28 +1,16 @@
 import { mount } from '@vue/test-utils';
-import {
-  describe,
-  it,
-  expect,
-  vi,
-  beforeAll,
-  afterAll,
-  beforeEach,
-} from 'vitest';
+import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import { nextTick } from 'vue';
 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 {
+class MockResizeObserver {
   callback: any;
-  options: any;
-  constructor(callback: any, options?: any) {
+  constructor(callback: any) {
     this.callback = callback;
-    this.options = options;
-    observerInstances.push(this);
   }
   observe = vi.fn();
   unobserve = vi.fn();
@@ -30,24 +18,33 @@ class MockIntersectionObserver {
 }
 
 describe('MCarousel component', () => {
-  let originalObserver: any;
-
-  beforeEach(() => {
-    observerInstances.length = 0;
-  });
+  let originalResizeObserver: any;
 
   beforeAll(() => {
-    originalObserver = global.IntersectionObserver;
-    global.IntersectionObserver = MockIntersectionObserver as any;
+    originalResizeObserver = global.ResizeObserver;
+    global.ResizeObserver = MockResizeObserver as any;
 
     Object.defineProperty(window.HTMLElement.prototype, 'scrollIntoView', {
       value: vi.fn(),
       writable: true,
     });
+
+    // Mock getBoundingClientRect for visibility tests
+    window.HTMLElement.prototype.getBoundingClientRect = vi.fn(() => ({
+      left: 0,
+      top: 0,
+      right: 100,
+      bottom: 100,
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    }));
   });
 
   afterAll(() => {
-    global.IntersectionObserver = originalObserver;
+    global.ResizeObserver = originalResizeObserver;
   });
 
   const mockChildren = [
@@ -101,45 +98,70 @@ describe('MCarousel component', () => {
     expect(wrapper.findComponent(ChevronRight20).exists()).toBe(true);
   });
 
-  it('disables the previous button when on the first slide', () => {
+  it('disables the previous button when on the first slide', async () => {
     const wrapper = mountCarousel();
+
+    // Mock container at start position
+    const contentContainer = wrapper.find('.mc-carousel__content');
+    Object.defineProperty(contentContainer.element, 'scrollLeft', {
+      value: 0,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'scrollWidth', {
+      value: 300,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'clientWidth', {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
+
+    // Trigger scroll to update state
+    await contentContainer.trigger('scroll');
+    await nextTick();
+
     const [prevButton] = wrapper.findAllComponents(MIconButton);
     expect(prevButton.props('disabled')).toBe(true);
   });
 
-  it('scrolls to next slide when goNext is called', async () => {
-    const scrollIntoViewMock = vi.fn();
-    (window.HTMLElement.prototype.scrollIntoView as any) = scrollIntoViewMock;
+  it('enables next button when not on last slide', async () => {
+    const wrapper = mountCarousel({
+      slots: {
+        default:
+          '<div class="slide">Slide 1</div><div class="slide">Slide 2</div><div class="slide">Slide 3</div>',
+        header: '<h2 id="mc-carousel__title">Carousel Header</h2>',
+      },
+    });
 
-    const wrapper = mountCarousel();
-    const vm = wrapper.vm as any;
-    vi.spyOn(vm, 'getCarouselChildren').mockReturnValue([
-      { scrollIntoView: scrollIntoViewMock },
-      { scrollIntoView: scrollIntoViewMock },
-      { scrollIntoView: scrollIntoViewMock },
-    ]);
-
-    vm.goNext();
-    expect(scrollIntoViewMock).toHaveBeenCalled();
-  });
+    // Mock container with scrollable content (on first slide)
+    const contentContainer = wrapper.find('.mc-carousel__content');
+    Object.defineProperty(contentContainer.element, 'scrollLeft', {
+      value: 0,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'scrollWidth', {
+      value: 300,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'clientWidth', {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
 
-  it('scrolls to previous slide when goPrevious is called', async () => {
-    const scrollIntoViewMock = vi.fn();
-    (window.HTMLElement.prototype.scrollIntoView as any) = scrollIntoViewMock;
+    // Trigger scroll to update state
+    await contentContainer.trigger('scroll');
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 200));
 
-    const wrapper = mountCarousel();
-    const vm = wrapper.vm as any;
-    vi.spyOn(vm, 'getCarouselChildren').mockReturnValue([
-      { scrollIntoView: scrollIntoViewMock },
-      { scrollIntoView: scrollIntoViewMock },
-      { scrollIntoView: scrollIntoViewMock },
-    ]);
-
-    vm.goNext();
-    vm.goNext();
-    vm.goPrevious();
-
-    expect(scrollIntoViewMock).toHaveBeenCalled();
+    const buttons = wrapper.findAllComponents(MIconButton);
+    const nextButton = buttons[1];
+    expect(nextButton.props('disabled')).toBe(false);
   });
 
   it('sets correct ARIA attributes on main container', () => {
@@ -158,4 +180,101 @@ describe('MCarousel component', () => {
     const content = wrapper.find('.mc-carousel__content');
     expect(content.attributes('aria-live')).toBe('polite');
   });
+
+  it('disables next button when there is only one child', async () => {
+    const wrapper = mountCarousel({
+      slots: {
+        default: '<div class="slide">Slide 1</div>',
+        header: '<h2 id="mc-carousel__title">Carousel Header</h2>',
+      },
+    });
+
+    // Wait for component to initialize
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const buttons = wrapper.findAllComponents(MIconButton);
+    const nextButton = buttons[1];
+
+    // Next button should be disabled when there's only one child (which is the last)
+    expect(nextButton.props('disabled')).toBe(true);
+  });
+
+  it('enables next button when there are multiple children and not on last', async () => {
+    const wrapper = mountCarousel({
+      slots: {
+        default:
+          '<div class="slide">Slide 1</div><div class="slide">Slide 2</div>',
+        header: '<h2 id="mc-carousel__title">Carousel Header</h2>',
+      },
+    });
+
+    // Mock container to simulate being on first slide with more content to scroll
+    const contentContainer = wrapper.find('.mc-carousel__content');
+    Object.defineProperty(contentContainer.element, 'scrollLeft', {
+      value: 0,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'scrollWidth', {
+      value: 200,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'clientWidth', {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
+
+    // Trigger scroll to update state
+    await contentContainer.trigger('scroll');
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    const buttons = wrapper.findAllComponents(MIconButton);
+    const nextButton = buttons[1];
+
+    // Next button should be enabled when on first slide of two
+    expect(nextButton.props('disabled')).toBe(false);
+  });
+
+  it('disables next button when on last child even with remaining scroll space', async () => {
+    const wrapper = mountCarousel({
+      slots: {
+        default: '<div class="slide" style="width: 200px;">Wide Slide</div>',
+        header: '<h2 id="mc-carousel__title">Carousel Header</h2>',
+      },
+    });
+
+    // Mock container with a wide child that can still scroll but is the only/last child
+    const contentContainer = wrapper.find('.mc-carousel__content');
+    Object.defineProperty(contentContainer.element, 'scrollLeft', {
+      value: 50,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'scrollWidth', {
+      value: 200,
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(contentContainer.element, 'clientWidth', {
+      value: 100,
+      writable: true,
+      configurable: true,
+    });
+
+    // Trigger scroll to update state
+    await contentContainer.trigger('scroll');
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    const buttons = wrapper.findAllComponents(MIconButton);
+    const nextButton = buttons[1];
+
+    // Should be disabled because we're on the last (only) child
+    // even though scrollLeft (50) < scrollWidth - clientWidth (100)
+    expect(nextButton.props('disabled')).toBe(true);
+  });
 });

package/src/components/carousel/MCarousel.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, useId, type VNode } from 'vue';
+import { computed, onMounted, onUnmounted, ref, useId, type VNode } from 'vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-vue';
 /**
@@ -88,62 +88,135 @@ defineSlots<{
 const titleId = useId();
 const activeIndex = ref<number>(0);
 const contentContainer = ref<HTMLElement | null>(null);
-
-let observer: IntersectionObserver;
+const canScrollLeft = ref<boolean>(false);
+const canScrollRight = ref<boolean>(false);
 
 const scrollOptions: ScrollIntoViewOptions = {
   behavior: 'smooth',
   block: 'nearest',
-  inline: 'center',
+  inline: 'start',
 };
 
-function getCarouselChildren() {
+function getCarouselChildren(): Element[] {
   return contentContainer.value ? [...contentContainer.value.children] : [];
 }
 
-onMounted(() => {
-  observer = new IntersectionObserver(
-    (entries: IntersectionObserverEntry[]) => {
-      const entry = entries.find(
-        (e: IntersectionObserverEntry) => e.isIntersecting,
-      );
-      if (entry) {
-        activeIndex.value = getCarouselChildren().findIndex(
-          (e) => e === entry.target,
-        );
-      }
-    },
-    {
-      root: contentContainer.value,
-      threshold: 0.9,
-    },
-  );
-
-  getCarouselChildren().forEach((el) => {
-    observer.observe(el);
+function updateScrollCapabilities() {
+  if (!contentContainer.value) return;
+
+  const container = contentContainer.value;
+  const scrollLeft = container.scrollLeft;
+  const scrollWidth = container.scrollWidth;
+  const clientWidth = container.clientWidth;
+
+  // Tolerance of 1px to handle rounding errors
+  const tolerance = 1;
+
+  canScrollLeft.value = scrollLeft > tolerance;
+
+  const children = getCarouselChildren();
+  const isLastChildActive = activeIndex.value === children.length - 1;
+
+  canScrollRight.value =
+    !isLastChildActive && scrollLeft < scrollWidth - clientWidth - tolerance;
+}
+
+function updateActiveIndex() {
+  if (!contentContainer.value) return;
+
+  const container = contentContainer.value;
+  const children = getCarouselChildren();
+
+  if (children.length === 0) return;
+
+  const containerRect = container.getBoundingClientRect();
+  const containerLeft = containerRect.left;
+
+  let closestIndex = 0;
+  let minDistance = Infinity;
+
+  children.forEach((child, index) => {
+    const childRect = child.getBoundingClientRect();
+    const distance = Math.abs(childRect.left - containerLeft);
+
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestIndex = index;
+    }
   });
-});
+
+  activeIndex.value = closestIndex;
+}
+
+let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+function handleScroll() {
+  updateScrollCapabilities();
+
+  // Debounce for updateActiveIndex (more expensive)
+  if (scrollTimeout) {
+    clearTimeout(scrollTimeout);
+  }
+  scrollTimeout = setTimeout(() => {
+    updateActiveIndex();
+  }, 150);
+}
 
 function scrollToChild(index: number) {
-  getCarouselChildren()[index].scrollIntoView(scrollOptions);
+  const children = getCarouselChildren();
+  if (index >= 0 && index < children.length) {
+    children[index].scrollIntoView(scrollOptions);
+    activeIndex.value = index;
+  }
 }
 
 function goPrevious() {
-  if (activeIndex.value > 0) {
+  if (canScrollLeft.value && activeIndex.value > 0) {
     scrollToChild(activeIndex.value - 1);
   }
 }
 
 function goNext() {
-  if (activeIndex.value < getCarouselChildren().length - 1) {
+  const children = getCarouselChildren();
+  if (canScrollRight.value && activeIndex.value < children.length - 1) {
     scrollToChild(activeIndex.value + 1);
   }
 }
 
-const isFirstChildActive = computed(() => activeIndex.value === 0);
-const isLastChildActive = computed(
-  () => activeIndex.value === getCarouselChildren().length - 1,
-);
+const isFirstChildActive = computed(() => !canScrollLeft.value);
+const isLastChildActive = computed(() => !canScrollRight.value);
+
+onMounted(() => {
+  if (contentContainer.value) {
+    contentContainer.value.addEventListener('scroll', handleScroll, {
+      passive: true,
+    });
+
+    updateScrollCapabilities();
+    updateActiveIndex();
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateScrollCapabilities();
+      updateActiveIndex();
+    });
+    resizeObserver.observe(contentContainer.value);
+
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout);
+      }
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (contentContainer.value) {
+    contentContainer.value.removeEventListener('scroll', handleScroll);
+  }
+  if (scrollTimeout) {
+    clearTimeout(scrollTimeout);
+  }
+});
 </script>
 
 <style scoped lang="scss">

package/src/components/checkboxgroup/MCheckboxGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mc-field__container" :class="classObjectContainer">
+  <div class="mc-field__content" :class="classObjectContainer">
     <MCheckbox
       v-for="option in options"
       :id="option.id"
@@ -8,7 +8,6 @@
       :is-invalid="option.isInvalid"
       :name="name"
       class="mc-field__item"
-      :class="classObjectItem"
       :model-value="modelValue ? modelValue.includes(option.value) : undefined"
       :disabled="option.disabled"
       :indented="option.indented"
@@ -76,13 +75,7 @@ const onChange = (isChecked: boolean, value: string) => {
 
 const classObjectContainer = computed(() => {
   return {
-    'mc-field__container--inline': props.inline,
-  };
-});
-
-const classObjectItem = computed(() => {
-  return {
-    'mc-field__container--inline__item': props.inline,
+    'mc-field__content--inline': props.inline,
   };
 });
 

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

@@ -217,6 +217,150 @@ describe('MCombobox', () => {
     expect(attr.includes('-2')).toBe(true);
   });
 
+  describe('accessibility attributes', () => {
+    function mountCombobox(props = {}) {
+      return mount(MCombobox, {
+        props: { modelValue: null, options, ...props },
+        global: {
+          components: {
+            MOptionListbox: MOptionListboxStub,
+            CrossCircleFilled24,
+            ChevronDown24,
+          },
+        },
+      });
+    }
+
+    it('control button has aria-expanded="false" when closed', () => {
+      const wrapper = mountCombobox();
+      const control = wrapper.find('.mc-combobox__control');
+      expect(control.attributes('aria-expanded')).toBe('false');
+      expect(control.attributes('aria-haspopup')).toBe('listbox');
+    });
+
+    it('control button has default aria-label "Combobox input"', () => {
+      const wrapper = mountCombobox();
+      expect(
+        wrapper.find('.mc-combobox__control').attributes('aria-label'),
+      ).toBe('Combobox input');
+    });
+
+    it('control button uses controlAriaLabel prop when provided', () => {
+      const wrapper = mountCombobox({ controlAriaLabel: 'Select a country' });
+      expect(
+        wrapper.find('.mc-combobox__control').attributes('aria-label'),
+      ).toBe('Select a country');
+    });
+
+    it('expand icon button has tabindex="-1" and aria-hidden="true"', () => {
+      const wrapper = mountCombobox();
+      const icon = wrapper.find('.mc-combobox__icon');
+      expect(icon.attributes('tabindex')).toBe('-1');
+      expect(icon.attributes('aria-hidden')).toBe('true');
+    });
+  });
+
+  describe('open prop (controlled mode)', () => {
+    function mountControlled(open: boolean) {
+      return mount(MCombobox, {
+        props: { modelValue: null, options, open },
+        global: {
+          components: {
+            MOptionListbox: MOptionListboxStub,
+            MTag: MTagStub,
+            MButton: MButtonStub,
+            CrossCircleFilled24,
+            ChevronDown24,
+          },
+        },
+      });
+    }
+
+    it('renders open when open prop is true', () => {
+      const wrapper = mountControlled(true);
+      expect(wrapper.find('.mc-combobox').classes()).toContain(
+        'mc-combobox--open',
+      );
+    });
+
+    it('renders closed when open prop is false', () => {
+      const wrapper = mountControlled(false);
+      expect(wrapper.find('.mc-combobox').classes()).not.toContain(
+        'mc-combobox--open',
+      );
+    });
+
+    it('emits update:open with toggled value on click without changing visual state', async () => {
+      const wrapper = mountControlled(false);
+      await wrapper.find('.mc-combobox__control').trigger('click');
+      expect(wrapper.emitted('update:open')?.[0]).toEqual([true]);
+      expect(wrapper.find('.mc-combobox').classes()).not.toContain(
+        'mc-combobox--open',
+      );
+
+      const wrapper2 = mountControlled(true);
+      await wrapper2.find('.mc-combobox__control').trigger('click');
+      expect(wrapper2.emitted('update:open')?.[0]).toEqual([false]);
+      expect(wrapper2.find('.mc-combobox').classes()).toContain(
+        'mc-combobox--open',
+      );
+    });
+
+    it('reflects open prop changes from parent', async () => {
+      const wrapper = mountControlled(false);
+      expect(wrapper.find('.mc-combobox').classes()).not.toContain(
+        'mc-combobox--open',
+      );
+
+      await wrapper.setProps({ open: true });
+      expect(wrapper.find('.mc-combobox').classes()).toContain(
+        'mc-combobox--open',
+      );
+
+      await wrapper.setProps({ open: false });
+      expect(wrapper.find('.mc-combobox').classes()).not.toContain(
+        'mc-combobox--open',
+      );
+    });
+
+    it('opens and closes correctly with v-model:open', async () => {
+      const Parent = defineComponent({
+        components: { MCombobox },
+        setup() {
+          const open = ref(false);
+          return { open, options };
+        },
+        template: `<MCombobox v-model:open="open" :model-value="null" :options="options" />`,
+      });
+
+      const wrapper = mount(Parent, {
+        global: {
+          components: {
+            MOptionListbox: MOptionListboxStub,
+            MTag: MTagStub,
+            MButton: MButtonStub,
+            CrossCircleFilled24,
+            ChevronDown24,
+          },
+        },
+      });
+
+      expect(wrapper.find('.mc-combobox').classes()).not.toContain(
+        'mc-combobox--open',
+      );
+
+      await wrapper.find('.mc-combobox__control').trigger('click');
+      expect(wrapper.find('.mc-combobox').classes()).toContain(
+        'mc-combobox--open',
+      );
+
+      await wrapper.find('.mc-combobox__control').trigger('click');
+      expect(wrapper.find('.mc-combobox').classes()).not.toContain(
+        'mc-combobox--open',
+      );
+    });
+  });
+
   it('clicking outside closes the listbox', async () => {
     const wrapper = mount(MCombobox, {
       props: { modelValue: null, options },

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

@@ -46,6 +46,7 @@ const meta: Meta<typeof MCombobox> = {
     },
   },
   args: {
+    open: false,
     modelValue: null,
     checkableSections: true,
     options: defaultOptions,
@@ -59,7 +60,7 @@ const meta: Meta<typeof MCombobox> = {
       return { args, counterLabel };
     },
     template: `
-      <MCombobox v-bind="args" v-model="args.modelValue" :counter-label="counterLabel"></MCombobox>
+      <MCombobox v-bind="args" v-model="args.modelValue" v-model:open="args.open" :counter-label="counterLabel"></MCombobox>
     `,
   }),
 };