xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/Carousel/Carousel.spec.js

@@ -1,557 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel testId="carousel"></Carousel>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("carousel")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with correct role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel></Carousel>`);
-        yield (0, fixtures_1.expect)(page.getByRole("region")).toBeVisible();
-    }));
-    // NOTE: all carousel items are visible by default in embla-carousel
-    // From this point on, instead of visibility checks, we check that the correct slide is in the viewport
-    (0, fixtures_1.test)("component renders with correct role on items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel>
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        const slides = page.getByRole("region").getByRole("group");
-        yield (0, fixtures_1.expect)(slides).toHaveCount(3);
-        yield (0, fixtures_1.expect)(slides.nth(0)).toContainText("Slide 1");
-        yield (0, fixtures_1.expect)(slides.nth(1)).toContainText("Slide 2");
-        yield (0, fixtures_1.expect)(slides.nth(2)).toContainText("Slide 3");
-    }));
-    (0, fixtures_1.test)("renders slide #2 if startIndex is 1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel startIndex="1">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("group").nth(1)).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("controls prop displays controls", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous Slide" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next Slide" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component scrolls to next slide on control click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        // Click next button
-        yield page.getByRole("button", { name: "Next Slide" }).click();
-        // Verify second slide is now visible
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("group").nth(1)).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("component scrolls to previous slide on control click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel startIndex="1" controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        // Verify we start on slide 2
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("group").nth(1)).toBeInViewport();
-        // Click previous button
-        yield page.getByRole("button", { name: "Previous Slide" }).click();
-        // Verify first slide is now visible
-        const firstSlide = page.getByRole("region").getByRole("group").first();
-        yield (0, fixtures_1.expect)(firstSlide).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("component navigates to slide on indicator click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel>
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        // Click on the third indicator
-        const indicators = page.getByRole("tab", { name: "Go to slide 3" });
-        yield indicators.click();
-        // Verify third slide is visible
-        const thirdSlide = page.getByRole("region").getByRole("group").nth(2);
-        yield (0, fixtures_1.expect)(thirdSlide).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("component loops correctly when loop is enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel loop="true" startIndex="2">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        // Verify we're on the last slide
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("group").nth(2)).toBeInViewport();
-        // Click next again to loop back to first slide
-        yield page.getByRole("button", { name: "Next Slide" }).click();
-        // Verify we're back on the first slide
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("group").first()).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("component autoplay works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel autoplay="true" autoplayInterval="100">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-        <CarouselItem>Slide 3</CarouselItem>
-      </Carousel>
-    `);
-        const slides = page.getByRole("region").getByRole("group");
-        // Verify first slide is initially visible
-        yield (0, fixtures_1.expect)(slides.first()).toBeInViewport();
-        yield page.waitForTimeout(200);
-        yield (0, fixtures_1.expect)(slides.nth(1)).toBeInViewport();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-// --- Used this resource for a11y testing best practices: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("regular carousel has correct a11y attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel indicators="false">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>
-    `);
-        const carousel = page.getByRole("region");
-        const slides = carousel.getByRole("group");
-        yield (0, fixtures_1.expect)(carousel).toHaveAttribute("aria-roledescription", "carousel");
-        yield (0, fixtures_1.expect)(slides.first()).toHaveAttribute("aria-roledescription", "slide");
-    }));
-    (0, fixtures_1.test)("tabbed carousel has correct a11y attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-      </Carousel>
-    `);
-        const carousel = page.getByRole("region");
-        const slides = carousel.getByRole("group");
-        yield (0, fixtures_1.expect)(slides.first()).toHaveAttribute("role", "group tabpanel");
-        yield (0, fixtures_1.expect)(slides.first()).not.toHaveAttribute("aria-roledescription", "slide");
-    }));
-    (0, fixtures_1.test)("carousel controls have correct a11y attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>
-    `);
-        const prevControl = page.getByRole("button", { name: "Previous Slide" });
-        const nextControl = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(prevControl).toHaveAttribute("aria-label", "Previous Slide");
-        yield (0, fixtures_1.expect)(nextControl).toHaveAttribute("aria-label", "Next Slide");
-    }));
-    (0, fixtures_1.test)("component is keyboard navigable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-    <Carousel>
-      <CarouselItem>Slide 1</CarouselItem>
-      <CarouselItem>Slide 2</CarouselItem>
-      <CarouselItem>Slide 3</CarouselItem>
-    </Carousel>
-  `);
-        // Focus the carousel container
-        yield page.getByRole("region").focus();
-        // Press right arrow key
-        yield page.keyboard.press("ArrowRight");
-        // Verify second slide is visible
-        const secondSlide = page.getByRole("region").getByRole("group").nth(1);
-        yield (0, fixtures_1.expect)(secondSlide).toBeInViewport();
-        // Press left arrow key
-        yield page.keyboard.press("ArrowLeft");
-        // Verify first slide is visible again
-        const firstSlide = page.getByRole("region").getByRole("group").first();
-        yield (0, fixtures_1.expect)(firstSlide).toBeInViewport();
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Visual States", () => {
-    (0, fixtures_1.test)("component width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel width="500px">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`);
-        const carousel = page.getByRole("region");
-        yield (0, fixtures_1.expect)(carousel).toHaveCSS("width", "500px");
-    }));
-    (0, fixtures_1.test)("component height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel height="500px">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`);
-        const carousel = page.getByRole("region");
-        yield (0, fixtures_1.expect)(carousel).toHaveCSS("height", "500px");
-    }));
-    (0, fixtures_1.test)("component control background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-control-Carousel": "rgb(255, 0, 0)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("component control text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-control-Carousel": "rgb(0, 0, 255)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("component indicator width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "width-indicator-Carousel": "20px",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("width", "20px");
-    }));
-    (0, fixtures_1.test)("component control height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "height-control-Carousel": "50px",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("height", "50px");
-    }));
-    (0, fixtures_1.test)("component control width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "width-control-Carousel": "50px",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("width", "50px");
-    }));
-    (0, fixtures_1.test)("component control border radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "borderRadius-control-Carousel": "10px",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("border-radius", "10px");
-    }));
-    (0, fixtures_1.test)("component control hover background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-control-hover-Carousel": "rgb(255, 165, 0)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield control.hover();
-        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(255, 165, 0)");
-    }));
-    (0, fixtures_1.test)("component control hover text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-control-hover-Carousel": "rgb(255, 255, 255)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield control.hover();
-        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(255, 255, 255)");
-    }));
-    (0, fixtures_1.test)("component control active background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-control-active-Carousel": "rgb(0, 128, 0)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield control.hover();
-        yield page.mouse.down();
-        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(0, 128, 0)");
-    }));
-    (0, fixtures_1.test)("component control active text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-control-active-Carousel": "rgb(255, 255, 0)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield control.hover();
-        yield page.mouse.down();
-        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(255, 255, 0)");
-    }));
-    (0, fixtures_1.test)("component control disabled background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true" loop="false">
-        <CarouselItem>Slide 1</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-control-disabled-Carousel": "rgb(200, 200, 200)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(200, 200, 200)");
-    }));
-    (0, fixtures_1.test)("component control disabled text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel controls="true" loop="false">
-        <CarouselItem>Slide 1</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-control-disabled-Carousel": "rgb(150, 150, 150)",
-            },
-        });
-        const control = page.getByRole("button", { name: "Next Slide" });
-        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(150, 150, 150)");
-    }));
-    (0, fixtures_1.test)("component indicator height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "height-indicator-Carousel": "15px",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("height", "15px");
-    }));
-    (0, fixtures_1.test)("component indicator background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-indicator-Carousel": "rgb(100, 100, 100)",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("background-color", "rgb(100, 100, 100)");
-    }));
-    (0, fixtures_1.test)("component indicator text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-indicator-Carousel": "rgb(50, 50, 50)",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("color", "rgb(50, 50, 50)");
-    }));
-    (0, fixtures_1.test)("component indicator hover background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-indicator-hover-Carousel": "rgb(150, 150, 255)",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
-        yield indicator.hover();
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("background-color", "rgb(150, 150, 255)");
-    }));
-    (0, fixtures_1.test)("component indicator hover text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-indicator-hover-Carousel": "rgb(255, 100, 100)",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
-        yield indicator.hover();
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("color", "rgb(255, 100, 100)");
-    }));
-    (0, fixtures_1.test)("component indicator active background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "backgroundColor-indicator-active-Carousel": "rgb(0, 0, 255)",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("background-color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("component indicator active text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Carousel indicators="true">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>`, {
-            testThemeVars: {
-                "textColor-indicator-active-Carousel": "rgb(255, 255, 255)",
-            },
-        });
-        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
-        yield (0, fixtures_1.expect)(indicator).toHaveCSS("color", "rgb(255, 255, 255)");
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("component handles many slides efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const itemNum = 20;
-        // Create many carousel items
-        let carouselItems = "";
-        for (let i = 1; i <= itemNum; i++) {
-            carouselItems += `<CarouselItem>Slide ${i}</CarouselItem>`;
-        }
-        yield initTestBed(`
-      <Carousel>
-        ${carouselItems}
-      </Carousel>
-    `);
-        // Verify carousel renders
-        yield (0, fixtures_1.expect)(page.getByRole("region")).toBeVisible();
-        const slides = page.getByRole("region").getByRole("group");
-        // Verify all slides are created
-        yield (0, fixtures_1.expect)(slides).toHaveCount(itemNum);
-        // Verify we can navigate through slides
-        yield page
-            .getByRole("button", { name: "Next Slide" })
-            .click({ clickCount: itemNum, delay: 100 });
-        // Verify we've navigated to the correct slide
-        yield (0, fixtures_1.expect)(slides.last()).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("component displays tab indicators for many slides", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        // Create many carousel items
-        let carouselItems = "";
-        for (let i = 1; i <= 20; i++) {
-            carouselItems += `<CarouselItem>Slide ${i}</CarouselItem>`;
-        }
-        yield initTestBed(`
-      <Carousel indicators="true" controls="false">
-        ${carouselItems}
-      </Carousel>
-    `);
-        // Verify carousel renders
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("tab")).toHaveCount(20);
-    }));
-    (0, fixtures_1.test)("component works without indicators and controls", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel indicators="false" controls="false">
-        <CarouselItem>Slide 1</CarouselItem>
-        <CarouselItem>Slide 2</CarouselItem>
-      </Carousel>
-    `);
-        // Verify carousel container renders
-        yield (0, fixtures_1.expect)(page.getByRole("region")).toBeVisible();
-        // Verify indicators are not visible
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("tablist")).not.toBeVisible();
-        // Verify controls are not visible
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("button", { name: "Previous Slide" })).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("region").getByRole("button", { name: "Next Slide" })).not.toBeVisible();
-    }));
-});
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly with custom content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Carousel>
-        <CarouselItem>
-          <Card title="Card 1" />
-        </CarouselItem>
-        <CarouselItem>
-          <Card title="Card 2" />
-        </CarouselItem>
-      </Carousel>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("group").first()).toContainText("Card 1");
-        yield (0, fixtures_1.expect)(page.getByRole("group").last()).toContainText("Card 2");
-    }));
-    (0, fixtures_1.test)("component handles custom control icon on Prev button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-          <Carousel controls="true" prevIcon="test">
-            <CarouselItem>Slide 1</CarouselItem>
-            <CarouselItem>Slide 2</CarouselItem>
-          </Carousel>    
-        `, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        const useElement = page.getByRole("button", { name: "Previous Slide" }).locator("svg use");
-        yield (0, fixtures_1.expect)(useElement).toHaveAttribute("href", fixtures_1.expect.stringMatching(/#bell/));
-    }));
-    (0, fixtures_1.test)("component handles custom control icon on Next button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-          <Carousel controls="true" nextIcon="test">
-            <CarouselItem>Slide 1</CarouselItem>
-            <CarouselItem>Slide 2</CarouselItem>
-          </Carousel>    
-        `, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        const useElement = page.getByRole("button", { name: "Next Slide" }).locator("svg use");
-        yield (0, fixtures_1.expect)(useElement).toHaveAttribute("href", fixtures_1.expect.stringMatching(/#bell/));
-    }));
-});

package/dist/scripts/src/components/Carousel/CarouselContext.js

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCarousel = exports.CarouselContext = void 0;
-exports.useCarouselContextValue = useCarouselContextValue;
-const react_1 = require("react");
-const immer_1 = __importDefault(require("immer"));
-exports.CarouselContext = (0, react_1.createContext)({
-    register: (column) => { },
-    unRegister: (id) => { },
-    itemProps: {},
-});
-const useCarousel = () => {
-    const context = (0, react_1.useContext)(exports.CarouselContext);
-    if (!context) {
-        throw new Error("useCarousel must be used within a Carousel");
-    }
-    return context;
-};
-exports.useCarousel = useCarousel;
-function useCarouselContextValue(isTabbed) {
-    const [carouselItems, setCarouselItems] = (0, react_1.useState)([]);
-    const carouselContextValue = (0, react_1.useMemo)(() => {
-        return {
-            register: (column) => {
-                setCarouselItems((0, immer_1.default)((draft) => {
-                    const existing = draft.findIndex((col) => col.id === column.id);
-                    if (existing < 0) {
-                        draft.push(column);
-                    }
-                    else {
-                        draft[existing] = column;
-                    }
-                }));
-            },
-            unRegister: (id) => {
-                setCarouselItems((0, immer_1.default)((draft) => {
-                    return draft.filter((col) => col.id !== id);
-                }));
-            },
-            itemProps: isTabbed
-                ? {
-                    role: "group tabpanel",
-                }
-                : {
-                    role: "group",
-                    "aria-roledescription": "slide",
-                },
-        };
-    }, [setCarouselItems, isTabbed]);
-    return {
-        carouselItems,
-        carouselContextValue,
-    };
-}

package/dist/scripts/src/components/Carousel/CarouselItem.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.carouselItemComponentRenderer = exports.CarouselItemMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const CarouselItemNative_1 = require("./CarouselItemNative");
-const COMP = "CarouselItem";
-exports.CarouselItemMd = (0, metadata_helpers_1.createMetadata)({
-    status: "in progress",
-});
-exports.carouselItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CarouselItemMd, (rendererContext) => {
-    const { node, renderChild } = rendererContext;
-    return (0, jsx_runtime_1.jsx)(CarouselItemNative_1.CarouselItemComponent, { children: renderChild(node.children) });
-});