@brandsync/wc 1.6.0 → 1.8.0

package/dist/collection/components/bs-carousel/bs-carousel.cmp.test.js

@@ -0,0 +1,198 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { afterEach, beforeEach, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const slides = (n) => Array.from({ length: n }, (_, i) => h("div", null, "Slide ", i + 1));
+const visible = (root) => Array.from(root.children).filter(c => !c.hidden).map(c => c.textContent);
+// Autoplay deliberately holds while the pointer is over the carousel (WCAG pause-on-hover). The test
+// browser keeps ONE pointer for the whole run, so an earlier test that hovered something near the top
+// of the page leaves it resting where the next carousel renders -- which then holds autoplay and
+// never advances (this is exactly what failed on the CI runner while passing locally). Park the
+// pointer in the opposite corner before each autoplay test so they don't depend on test order.
+const parkPointer = async () => {
+    const dot = document.createElement('div');
+    dot.style.cssText = 'position:fixed;right:0;bottom:0;width:8px;height:8px';
+    document.body.appendChild(dot);
+    await userEvent.hover(dot);
+    dot.remove();
+};
+// Autoplay also starts paused for users who prefer reduced motion; make that independent of the
+// machine running the tests.
+const stubReducedMotion = (reduce) => vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+    matches: reduce && query.includes('prefers-reduced-motion'),
+    media: query,
+    onchange: null,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+}));
+// Resolves with the page of the next bsPageChange. Rejects with the carousel's state if none comes in
+// time, so a failure says WHY autoplay held (hovered/focused/paused) instead of just "timed out".
+const nextPage = (el, timeout = 5000) => new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+        const host = el;
+        const live = el.shadowRoot?.querySelector('[part="slides"]')?.getAttribute('aria-live');
+        reject(new Error(`no bsPageChange within the timeout (paused=${host.paused}, :hover=${el.matches(':hover')}, ` +
+            `:focus-within=${el.matches(':focus-within')}, aria-live=${live})`));
+    }, timeout);
+    el.addEventListener('bsPageChange', (e) => {
+        clearTimeout(timer);
+        resolve(e.detail);
+    }, { once: true });
+});
+const btn = (el) => el?.shadowRoot?.querySelector('button');
+describe('bs-carousel', () => {
+    it('has no axe-core violations (dots and numbers)', async () => {
+        for (const tracker of ['dots', 'numbers']) {
+            const { root } = await render(h("bs-carousel", { tracker: tracker, autoplay: true, label: "Featured" }, slides(9)));
+            await runAxeCheck(root);
+        }
+    });
+    it('exposes its documented shadow parts', async () => {
+        const { root } = await render(h("bs-carousel", { autoplay: true }, slides(9)));
+        assertShadowParts(root.shadowRoot, ['carousel', 'slides', 'tracker', 'prev', 'next', 'dots', 'dot', 'current', 'pause']);
+    });
+    it('shows slidesPerView slides per page and hides the rest', async () => {
+        const { root } = await render(h("bs-carousel", null, slides(7)));
+        expect(visible(root)).toEqual(['Slide 1', 'Slide 2', 'Slide 3']);
+    });
+    it('slidesPerView=1 shows one slide per page', async () => {
+        const { root } = await render(h("bs-carousel", { slidesPerView: 1 }, slides(3)));
+        expect(visible(root)).toEqual(['Slide 1']);
+    });
+    it('labels the region and each slide, without overriding existing labels', async () => {
+        const { root } = await render(h("bs-carousel", { label: "News" }, h("div", { "aria-label": "Custom" }, "A"), h("div", null, "B")));
+        const region = root.shadowRoot.querySelector('[part="carousel"]');
+        expect(region).toEqualAttribute('role', 'region');
+        expect(region).toEqualAttribute('aria-roledescription', 'carousel');
+        expect(region).toEqualAttribute('aria-label', 'News');
+        expect(root.children[0].getAttribute('aria-label')).toBe('Custom');
+        expect(root.children[1].getAttribute('aria-label')).toBe('2 of 2');
+        expect(root.children[1].getAttribute('aria-roledescription')).toBe('slide');
+    });
+    describe('dots tracker', () => {
+        it('renders one dot per page with the current one active', async () => {
+            const { root } = await render(h("bs-carousel", null, slides(12)));
+            const dots = root.shadowRoot.querySelectorAll('[part~="dot"]');
+            expect(dots.length).toBe(4);
+            expect(dots[0].getAttribute('part')).toContain('current');
+            expect(root.shadowRoot.querySelectorAll('[part~="current"]').length).toBe(1);
+        });
+        it('next/previous move the page, emit bsPageChange, and disable at the ends', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-carousel", null, slides(9)));
+            const spy = spyOnEvent('bsPageChange');
+            const prev = root.shadowRoot.querySelector('[part="prev"]');
+            const next = root.shadowRoot.querySelector('[part="next"]');
+            expect(prev.disabled).toBe(true);
+            btn(next).click();
+            await waitForChanges();
+            expect(visible(root)).toEqual(['Slide 4', 'Slide 5', 'Slide 6']);
+            expect(root.currentPage).toBe(2);
+            expect(spy).toHaveReceivedEventDetail(2);
+            btn(next).click();
+            await waitForChanges();
+            expect(next.disabled).toBe(true);
+            btn(prev).click();
+            await waitForChanges();
+            expect(root.currentPage).toBe(2);
+        });
+    });
+    describe('numbers tracker', () => {
+        it('renders a bs-pagination with one number per page and navigates on click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-carousel", { tracker: "numbers" }, slides(15)));
+            const spy = spyOnEvent('bsPageChange');
+            const pagination = root.shadowRoot.querySelector('bs-pagination');
+            expect(pagination.totalPages).toBe(5);
+            pagination.shadowRoot.querySelectorAll('.bs-pagination__page')[2].click();
+            await waitForChanges();
+            expect(root.currentPage).toBe(3);
+            expect(visible(root)).toEqual(['Slide 7', 'Slide 8', 'Slide 9']);
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy).toHaveReceivedEventDetail(3);
+        });
+    });
+    it('hides the tracker when there is only one page', async () => {
+        const { root } = await render(h("bs-carousel", null, slides(3)));
+        expect(root.shadowRoot.querySelector('[part="tracker"]')).toBeNull();
+    });
+    it('clamps an out-of-range currentPage', async () => {
+        const { root, waitForChanges } = await render(h("bs-carousel", { currentPage: 99 }, slides(9)));
+        await waitForChanges();
+        expect(root.currentPage).toBe(3);
+        expect(visible(root)).toEqual(['Slide 7', 'Slide 8', 'Slide 9']);
+    });
+    it('reacts to slides being added', async () => {
+        const { root, waitForChanges } = await render(h("bs-carousel", null, slides(3)));
+        for (let i = 4; i <= 7; i++) {
+            const d = document.createElement('div');
+            d.textContent = `Slide ${i}`;
+            root.appendChild(d);
+        }
+        await waitForChanges();
+        expect(root.shadowRoot.querySelectorAll('[part~="dot"]').length).toBe(3);
+    });
+    describe('autoplay', () => {
+        beforeEach(async () => {
+            stubReducedMotion(false);
+            await parkPointer();
+        });
+        afterEach(() => {
+            vi.restoreAllMocks();
+        });
+        it('renders no Pause button unless autoplay is set', async () => {
+            const { root } = await render(h("bs-carousel", null, slides(9)));
+            expect(root.shadowRoot.querySelector('[part="pause"]')).toBeNull();
+        });
+        it('auto-advances, looping from the last page to the first', async () => {
+            const { root } = await render(h("bs-carousel", { autoplay: true, interval: 250 }, slides(6)));
+            expect(await nextPage(root)).toBe(2);
+            expect(await nextPage(root)).toBe(1);
+        });
+        it('starts paused (showing Play) for users who prefer reduced motion, and does not advance', async () => {
+            stubReducedMotion(true);
+            const { root, waitForChanges } = await render(h("bs-carousel", { autoplay: true, interval: 250 }, slides(6)));
+            await waitForChanges();
+            expect(root.paused).toBe(true);
+            expect(root.shadowRoot.querySelector('[part="pause"]').textContent).toContain('Play');
+            await new Promise(r => setTimeout(r, 700));
+            expect(root.currentPage).toBe(1);
+        });
+        it('holds auto-advance while the pointer is over the carousel', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { autoplay: true, interval: 250 }, slides(6)));
+            await waitForChanges();
+            root.dispatchEvent(new MouseEvent('mouseenter'));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[part="slides"]').getAttribute('aria-live')).toBe('polite');
+            await new Promise(r => setTimeout(r, 700));
+            expect(root.currentPage).toBe(1);
+            root.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(await nextPage(root)).toBe(2);
+        });
+        it('Pause stops auto-advance, flips to Play, and emits bsPauseChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-carousel", { autoplay: true, interval: 1000 }, slides(9)));
+            const spy = spyOnEvent('bsPauseChange');
+            const pause = root.shadowRoot.querySelector('[part="pause"]');
+            expect(pause.textContent).toContain('Pause');
+            btn(pause).click();
+            await waitForChanges();
+            expect(root.paused).toBe(true);
+            expect(pause.textContent).toContain('Play');
+            expect(spy).toHaveReceivedEventDetail(true);
+            // Longer than one interval: had it not stopped, it would have advanced by now.
+            await new Promise(r => setTimeout(r, 1300));
+            expect(root.currentPage).toBe(1);
+        });
+        it('holds auto-advance while focus is inside, and announces politely only when not rotating', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { autoplay: true, interval: 1000 }, slides(9)));
+            const live = () => root.shadowRoot.querySelector('[part="slides"]').getAttribute('aria-live');
+            expect(live()).toBe('off');
+            root.dispatchEvent(new FocusEvent('focusin'));
+            await waitForChanges();
+            expect(live()).toBe('polite');
+            await new Promise(r => setTimeout(r, 1300));
+            expect(root.currentPage).toBe(1);
+        });
+    });
+});

package/dist/collection/components/bs-carousel/bs-carousel.css

@@ -0,0 +1,107 @@
+/**
+ * @prop --bs-carousel-gap: Gap between visible slides. Aliased to --bs-spacing-200.
+ * @prop --bs-carousel-tracker-offset: Vertical gap between the slides and the tracker row. Aliased to --bs-spacing-200.
+ * @prop --bs-carousel-tracker-gap: Gap between the items of the tracker row (previous, dots, next, Pause). Aliased to --bs-spacing-50.
+ * @prop --bs-carousel-dot-size: Width/height of an inactive dot; the active dot is twice as wide. Aliased to --bs-spacing-100 (8px, exact match to Figma).
+ * @prop --bs-carousel-dot-radius: Corner radius of a dot. Aliased to --bs-border-radius-full.
+ * @prop --bs-carousel-dot-color: Fill of an inactive dot. Aliased to --bs-surface-container.
+ * @prop --bs-carousel-dot-active-color: Fill of the active dot. Aliased to --bs-color-primary-default.
+ * @prop --bs-carousel-dots-gap: Gap between dots. Aliased to --bs-spacing-50.
+ */
+:host {
+  display: block;
+
+  --bs-carousel-gap: var(--bs-spacing-200);
+  --bs-carousel-tracker-offset: var(--bs-spacing-200);
+  --bs-carousel-tracker-gap: var(--bs-spacing-50);
+
+  --bs-carousel-dot-size: var(--bs-spacing-100);
+  --bs-carousel-dot-radius: var(--bs-border-radius-full);
+  --bs-carousel-dot-color: var(--bs-surface-container);
+  --bs-carousel-dot-active-color: var(--bs-color-primary-default);
+  --bs-carousel-dots-gap: var(--bs-spacing-50);
+}
+
+.bs-carousel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-carousel-tracker-offset);
+}
+
+.bs-carousel__slides {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-carousel-gap);
+  width: 100%;
+}
+
+/* Each slide takes an equal share of the row for the configured slidesPerView (set inline by the
+   component -- an internal variable, not a customization point). */
+.bs-carousel__slides ::slotted(*) {
+  flex: 0 0
+    calc(
+      (100% - (var(--bs-carousel-slides-per-view) - 1) * var(--bs-carousel-gap)) / var(--bs-carousel-slides-per-view)
+    );
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+/* Off-page slides carry the `hidden` attribute; a slide's own :host { display } would otherwise
+   override the UA's [hidden] rule. */
+.bs-carousel__slides ::slotted([hidden]) {
+  display: none !important;
+}
+
+.bs-carousel__tracker {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-carousel-tracker-gap);
+}
+
+.bs-carousel__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-carousel-tracker-gap);
+}
+
+.bs-carousel__dots {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-carousel-dots-gap);
+}
+
+.bs-carousel__dot {
+  display: block;
+  width: var(--bs-carousel-dot-size);
+  height: var(--bs-carousel-dot-size);
+  border-radius: var(--bs-carousel-dot-radius);
+  background: var(--bs-carousel-dot-color);
+}
+
+.bs-carousel__dot--active {
+  width: calc(var(--bs-carousel-dot-size) * 2);
+  background: var(--bs-carousel-dot-active-color);
+}
+
+/* Figma colors the previous/next chevrons with the default icon color (--bs-icon-default, #21262e),
+   one step darker than bs-icon-button's subtle variant (--bs-icon-neutral-default). Re-pointing that
+   token on these buttons only keeps the alias-to-a-token rule without touching bs-icon-button. */
+.bs-carousel__nav bs-icon-button {
+  --bs-icon-neutral-default: var(--bs-icon-default);
+}
+
+/* In RTL the previous button sits on the right, so its chevron must point right (and vice versa). */
+:host(:dir(rtl)) .bs-carousel__chevron {
+  transform: scaleX(-1);
+}
+
+@media (forced-colors: active) {
+  .bs-carousel__dot {
+    forced-color-adjust: none;
+    background: GrayText;
+  }
+  .bs-carousel__dot--active {
+    background: Highlight;
+  }
+}