@brandsync/wc 1.5.4 → 1.7.0

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: '5508a6c6185bf836d4b30e7341f29f80ba06f2c3', class: "bs-attachment-list" }, h("div", { key: 'c8652402e683f80aee373adad7ad41590dd7fbaf', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'fb838b763b7047419d072c2c9f2cbe81046041e4', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'faaf4be7542539a32675fb2046b26840e539d509', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: '2e265dcc82737c0b129be0196f68c0ec1a745789', class: "bs-attachment-list" }, h("div", { key: 'b148b3743237126437344dc1680c6c64c311f89a', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'db30b9615067b73db4c048991745055742be759f', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '989a64c7dc6e8cb99036a779b0eefc02b4706dc6', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-avatar/bs-avatar.js

@@ -96,7 +96,7 @@ export class BsAvatar {
                     "references": {
                         "BsAvatarType": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-avatar/bs-avatar.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-avatar/bs-avatar.tsx",
                             "id": "src/components/bs-avatar/bs-avatar.tsx::BsAvatarType"
                         }
                     }
@@ -122,7 +122,7 @@ export class BsAvatar {
                     "references": {
                         "BsAvatarSize": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-avatar/bs-avatar.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-avatar/bs-avatar.tsx",
                             "id": "src/components/bs-avatar/bs-avatar.tsx::BsAvatarSize"
                         }
                     }

package/dist/collection/components/bs-badge/bs-badge.js

@@ -42,7 +42,7 @@ export class BsBadge {
                     "references": {
                         "BsBadgeVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-badge/bs-badge.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-badge/bs-badge.tsx",
                             "id": "src/components/bs-badge/bs-badge.tsx::BsBadgeVariant"
                         }
                     }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.js

@@ -107,7 +107,7 @@ export class BsBreadcrumb {
                     "references": {
                         "BsBreadcrumbSize": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx",
                             "id": "src/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.tsx::BsBreadcrumbSize"
                         }
                     }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.js

@@ -102,7 +102,7 @@ export class BsBreadcrumbOverflow {
                     "references": {
                         "BsBreadcrumbOverflowItem": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.tsx",
                             "id": "src/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.tsx::BsBreadcrumbOverflowItem"
                         }
                     }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js

@@ -54,7 +54,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '5ff4734b3de9444f7347443acdc0dcea94bb43a1', "aria-label": this.label }, h("ol", { key: '0aebf74594c40b9268576cf1ccdb872dc3866ab3', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '998f3aeb715ef1fdf4e602cb50e612f9125832af', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: '14bf783e0dc34d1f8368bde48499e684b1410b94', "aria-label": this.label }, h("ol", { key: 'feef69a5164f6d7dad670e56cdbd7912aff96c2c', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: 'b616fc5fcf0181025be6e5570b7d0fa10cae146e', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button/bs-button/bs-button.js

@@ -131,7 +131,7 @@ export class BsButton {
                     "references": {
                         "BsButtonVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-button/bs-button/bs-button.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-button/bs-button/bs-button.tsx",
                             "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonVariant"
                         }
                     }
@@ -157,7 +157,7 @@ export class BsButton {
                     "references": {
                         "BsButtonSize": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-button/bs-button/bs-button.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-button/bs-button/bs-button.tsx",
                             "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonSize"
                         }
                     }

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js

@@ -50,7 +50,7 @@ export class BsIconButton {
      */
     ariaLabel = null;
     render() {
-        return (h("button", { key: '86ddd0f1ff23372e205035ac1273a6b90a779855', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'f45944557ce068283c394e6a48fbc0f56087fbd9', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'ed067830c7f465099edbf40401b0e3ec6fb1e1c9' }))));
+        return (h("button", { key: '0721387caf111462e6ae846647ba1c48363158aa', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '8c69f815b6ca603cfcfab34e3530f4c783da0ee7', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '8533f8ecfae182d6bd7d7e0dd6af328015948864' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -76,7 +76,7 @@ export class BsIconButton {
                     "references": {
                         "BsIconButtonVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
                             "id": "src/components/bs-button/bs-icon-button/bs-icon-button.tsx::BsIconButtonVariant"
                         }
                     }
@@ -102,7 +102,7 @@ export class BsIconButton {
                     "references": {
                         "BsIconButtonSize": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-button/bs-icon-button/bs-icon-button.tsx",
                             "id": "src/components/bs-button/bs-icon-button/bs-icon-button.tsx::BsIconButtonSize"
                         }
                     }

package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js

@@ -25,7 +25,7 @@ export class BsButtonSkeleton {
     /** Sizing scale, matching the `bs-button` size it stands in for. */
     size = 'md';
     render() {
-        return h("span", { key: 'bc4e9d282c745bfacede27fbeae7dfc8ea5d7aed', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: '1b7d442c2522cd4591862c6d72ee9bc491570518', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-card/bs-card.js

@@ -59,7 +59,7 @@ export class BsCard {
                     "references": {
                         "BsCardSurface": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-card/bs-card.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-card/bs-card.tsx",
                             "id": "src/components/bs-card/bs-card.tsx::BsCardSurface"
                         }
                     }

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;
+  }
+}