xmlui 0.11.3 → 0.11.6

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

@@ -1,1237 +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 component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// SMOKE TESTS
-// =============================================================================
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        // Check that tabs component is rendered
-        yield (0, fixtures_1.expect)(page.getByRole('tablist')).toBeAttached();
-    }));
-    (0, fixtures_1.test)("renders tab labels correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="First Tab">Content 1</TabItem>
-        <TabItem label="Second Tab">Content 2</TabItem>
-        <TabItem label="Third Tab">Content 3</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "First Tab" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Second Tab" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Third Tab" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("shows first tab content by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">First content</TabItem>
-        <TabItem label="Tab 2">Second content</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("First content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Second content")).not.toBeVisible();
-    }));
-});
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("basic functionality", () => {
-    (0, fixtures_1.test)("switches tabs when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">First content</TabItem>
-        <TabItem label="Tab 2">Second content</TabItem>
-        <TabItem label="Tab 3">Third content</TabItem>
-      </Tabs>
-    `);
-        // Wait for tabs to be fully rendered
-        yield (0, fixtures_1.expect)(page.getByRole('tablist')).toBeAttached();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeVisible();
-        // Initially first tab is active
-        yield (0, fixtures_1.expect)(page.getByText("First content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Second content")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Third content")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
-        // Click second tab and wait for transition
-        yield page.getByRole("tab", { name: "Tab 2" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
-        yield (0, fixtures_1.expect)(page.getByText("First content")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Second content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Third content")).not.toBeVisible();
-        // Click third tab and wait for transition
-        yield page.getByRole("tab", { name: "Tab 3" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toHaveAttribute("aria-selected", "true");
-        yield (0, fixtures_1.expect)(page.getByText("First content")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Second content")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Third content")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("activeTab prop sets initial active tab", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs activeTab="{1}">
-        <TabItem label="Tab 1">First content</TabItem>
-        <TabItem label="Tab 2">Second content</TabItem>
-        <TabItem label="Tab 3">Third content</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("First content")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Second content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Third content")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("orientation prop changes tab layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs orientation="vertical" testId="vertical-tabs">
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        // Check that tabs component has vertical orientation
-        const tabsRoot = page.getByTestId("vertical-tabs");
-        yield (0, fixtures_1.expect)(tabsRoot).toHaveAttribute("data-orientation", "vertical");
-    }));
-    fixtures_1.test.describe("tabAlignment property", () => {
-        (0, fixtures_1.test)("tabAlignment='start' positions tabs at the start of container (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="start" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tabsContainer = page.getByTestId("tabs");
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            // Tab should be near the start of the container (within a small margin for padding)
-            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment='end' positions tabs at the end of container (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="end" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tabsContainer = page.getByTestId("tabs");
-            const tab3 = page.getByRole("tab", { name: "Tab 3" });
-            const { right: containerRight } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
-            // Last tab should be near the end of the container (within a small margin for padding)
-            (0, fixtures_1.expect)(containerRight - tab3Right).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment='center' positions tabs in center of container (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="center" testId="tabs" style="width: 800px">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tabsContainer = page.getByTestId("tabs");
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            const tab3 = page.getByRole("tab", { name: "Tab 3" });
-            const { left: containerLeft, right: containerRight, width: containerWidth } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
-            const containerCenter = containerLeft + containerWidth / 2;
-            const tabsCenter = tab1Left + (tab3Right - tab1Left) / 2;
-            // Tabs should be centered (within a reasonable margin)
-            (0, fixtures_1.expect)(Math.abs(tabsCenter - containerCenter)).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment='stretch' makes tabs fill container width (horizontal)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="stretch" testId="tabs" style="width: 600px">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tabsContainer = page.getByTestId("tabs");
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            const tab3 = page.getByRole("tab", { name: "Tab 3" });
-            const { left: containerLeft, right: containerRight } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
-            // First tab should start near container start
-            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
-            // Last tab should end near container end
-            (0, fixtures_1.expect)(containerRight - tab3Right).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment can be dynamically changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <Tabs tabAlignment="{testState ?? 'start'}" testId="tabs" style="width: 700px">
-            <TabItem label="Tab 1">Content 1</TabItem>
-            <TabItem label="Tab 2">Content 2</TabItem>
-            <TabItem label="Tab 3">Content 3</TabItem>
-          </Tabs>
-          <Button testId="changeBtn" onClick="testState = 'end'" />
-        </Fragment>
-      `);
-            const tabsContainer = page.getByTestId("tabs");
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            // Initially with 'start' alignment
-            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { left: initialTab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            (0, fixtures_1.expect)(initialTab1Left - containerLeft).toBeLessThan(50);
-            // Change to 'end' alignment
-            yield page.getByTestId("changeBtn").click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("end");
-            // After changing to 'end', the last tab should be near the end
-            const tab3 = page.getByRole("tab", { name: "Tab 3" });
-            const { right: containerRight } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { right: tab3Right } = yield (0, component_test_helpers_1.getBounds)(tab3);
-            (0, fixtures_1.expect)(containerRight - tab3Right).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment works with single tab", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="center" testId="tabs" style="width: 600px">
-          <TabItem label="Only Tab">Only Content</TabItem>
-        </Tabs>
-      `);
-            const tab = page.getByRole("tab", { name: "Only Tab" });
-            yield (0, fixtures_1.expect)(tab).toBeVisible();
-            // Verify the tab renders and is functional
-            yield (0, fixtures_1.expect)(page.getByText("Only Content")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("tabAlignment='stretch' distributes multiple tabs evenly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="stretch" testId="tabs" style="width: 600px">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            const tab2 = page.getByRole("tab", { name: "Tab 2" });
-            const tab3 = page.getByRole("tab", { name: "Tab 3" });
-            const { width: tab1Width } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            const { width: tab2Width } = yield (0, component_test_helpers_1.getBounds)(tab2);
-            const { width: tab3Width } = yield (0, component_test_helpers_1.getBounds)(tab3);
-            // All tabs should have similar widths when stretched (within 20px tolerance for text differences)
-            (0, fixtures_1.expect)(Math.abs(tab1Width - tab2Width)).toBeLessThan(20);
-            (0, fixtures_1.expect)(Math.abs(tab2Width - tab3Width)).toBeLessThan(20);
-        }));
-        (0, fixtures_1.test)("tabAlignment handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="{null}" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-        </Tabs>
-      `);
-            // Should fall back to default 'start' alignment
-            const tabsContainer = page.getByTestId("tabs");
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            yield (0, fixtures_1.expect)(tab1).toBeVisible();
-            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            // Should behave like 'start' alignment
-            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="{undefined}" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-        </Tabs>
-      `);
-            // Should fall back to default 'start' alignment
-            const tabsContainer = page.getByTestId("tabs");
-            const tab1 = page.getByRole("tab", { name: "Tab 1" });
-            yield (0, fixtures_1.expect)(tab1).toBeVisible();
-            const { left: containerLeft } = yield (0, component_test_helpers_1.getBounds)(tabsContainer);
-            const { left: tab1Left } = yield (0, component_test_helpers_1.getBounds)(tab1);
-            // Should behave like 'start' alignment
-            (0, fixtures_1.expect)(tab1Left - containerLeft).toBeLessThan(50);
-        }));
-        (0, fixtures_1.test)("tabAlignment maintains functionality when tabs are clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs tabAlignment="center" testId="tabs" style="width: 700px">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            // Verify all tabs are visible
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeVisible();
-            // Click different tabs and verify content changes
-            yield page.getByRole("tab", { name: "Tab 2" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield page.getByRole("tab", { name: "Tab 3" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield page.getByRole("tab", { name: "Tab 1" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-        }));
-    });
-    fixtures_1.test.describe("accordionView property", () => {
-        (0, fixtures_1.test)("accordionView renders all tab headers when true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="true" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            // All tab headers should be visible
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("accordionView shows only active tab content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="true" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            // Only first tab content should be visible (default active)
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("accordionView positions active tab header above its content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="true" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
-            const tab1Content = page.getByText("Content 1");
-            const { bottom: headerBottom } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
-            const { top: contentTop } = yield (0, component_test_helpers_1.getBounds)(tab1Content);
-            // Header should be above content (header bottom should be less than or near content top)
-            (0, fixtures_1.expect)(headerBottom).toBeLessThanOrEqual(contentTop + 5);
-        }));
-        (0, fixtures_1.test)("accordionView positions active tab content above next tab header", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="true" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tab1Content = page.getByText("Content 1");
-            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
-            const { bottom: contentBottom } = yield (0, component_test_helpers_1.getBounds)(tab1Content);
-            const { top: nextHeaderTop } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
-            // Content should be above next header (content bottom should be less than or near next header top)
-            (0, fixtures_1.expect)(contentBottom).toBeLessThanOrEqual(nextHeaderTop + 5);
-        }));
-        (0, fixtures_1.test)("accordionView maintains order: header1 -> content1 -> header2 -> content2 (when tab2 active)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="true" activeTab="1" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
-            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
-            const tab2Content = page.getByText("Content 2");
-            const tab3Header = page.getByRole("tab", { name: "Tab 3" });
-            const { top: tab1Top } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
-            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
-            const { top: content2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Content);
-            const { top: tab3Top } = yield (0, component_test_helpers_1.getBounds)(tab3Header);
-            // Verify vertical ordering
-            (0, fixtures_1.expect)(tab1Top).toBeLessThan(tab2Top);
-            (0, fixtures_1.expect)(tab2Top).toBeLessThan(content2Top);
-            (0, fixtures_1.expect)(content2Top).toBeLessThan(tab3Top);
-        }));
-        (0, fixtures_1.test)("accordionView switches content when different tab is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="true" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            // Initially Tab 1 is active
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            // Click Tab 2
-            yield page.getByRole("tab", { name: "Tab 2" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            // Verify Tab 2 content is below Tab 2 header
-            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
-            const tab2Content = page.getByText("Content 2");
-            const { bottom: headerBottom } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
-            const { top: contentTop } = yield (0, component_test_helpers_1.getBounds)(tab2Content);
-            (0, fixtures_1.expect)(headerBottom).toBeLessThanOrEqual(contentTop + 5);
-        }));
-        (0, fixtures_1.test)("accordionView works with dynamic activeTab changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <Tabs accordionView="true" activeTab="{testState ?? 0}" testId="tabs">
-            <TabItem label="Tab 1">Content 1</TabItem>
-            <TabItem label="Tab 2">Content 2</TabItem>
-            <TabItem label="Tab 3">Content 3</TabItem>
-          </Tabs>
-          <Button testId="tab2Btn" onClick="testState = 1" />
-          <Button testId="tab3Btn" onClick="testState = 2" />
-        </Fragment>
-      `);
-            // Initially Content 1 is visible
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-            // Switch to Tab 2
-            yield page.getByTestId("tab2Btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-            // Verify ordering for Tab 2
-            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
-            const tab2Content = page.getByText("Content 2");
-            const tab3Header = page.getByRole("tab", { name: "Tab 3" });
-            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
-            const { top: content2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Content);
-            const { top: tab3Top } = yield (0, component_test_helpers_1.getBounds)(tab3Header);
-            (0, fixtures_1.expect)(tab2Top).toBeLessThan(content2Top);
-            (0, fixtures_1.expect)(content2Top).toBeLessThan(tab3Top);
-            // Switch to Tab 3
-            yield page.getByTestId("tab3Btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("accordionView=false renders standard tabs (non-accordion)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="false" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-      `);
-            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
-            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
-            const tab1Content = page.getByText("Content 1");
-            // In standard mode (non-accordion), all headers should be visible
-            yield (0, fixtures_1.expect)(tab1Header).toBeVisible();
-            yield (0, fixtures_1.expect)(tab2Header).toBeVisible();
-            // Only active tab content should be visible
-            yield (0, fixtures_1.expect)(tab1Content).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            // Tab content should NOT be interleaved between headers
-            // (unlike accordion view where content appears between headers)
-            const { bottom: tab1Bottom } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
-            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
-            const { top: contentTop } = yield (0, component_test_helpers_1.getBounds)(tab1Content);
-            // Content should NOT be between the two headers
-            // Either tab2 is next to tab1 (horizontal) or below tab1 but before content (vertical)
-            const isContentBetweenHeaders = contentTop > tab1Bottom && contentTop < tab2Top;
-            (0, fixtures_1.expect)(isContentBetweenHeaders).toBe(false);
-        }));
-        (0, fixtures_1.test)("accordionView handles null value gracefully (defaults to false)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs accordionView="{null}" testId="tabs">
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-        </Tabs>
-      `);
-            // Should render as standard horizontal tabs
-            const tab1Header = page.getByRole("tab", { name: "Tab 1" });
-            const tab2Header = page.getByRole("tab", { name: "Tab 2" });
-            yield (0, fixtures_1.expect)(tab1Header).toBeVisible();
-            yield (0, fixtures_1.expect)(tab2Header).toBeVisible();
-            // Headers should be horizontally aligned
-            const { top: tab1Top } = yield (0, component_test_helpers_1.getBounds)(tab1Header);
-            const { top: tab2Top } = yield (0, component_test_helpers_1.getBounds)(tab2Header);
-            (0, fixtures_1.expect)(Math.abs(tab1Top - tab2Top)).toBeLessThan(10);
-        }));
-    });
-});
-// =============================================================================
-// HEADER TEMPLATE TESTS
-// =============================================================================
-fixtures_1.test.describe("headerTemplate functionality", () => {
-    (0, fixtures_1.test)("renders custom headerTemplate instead of label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Simple Label">
-          <property name="headerTemplate">
-            <VStack gap="$space-1">
-              <Text>Custom</Text>
-              <Text>Header</Text>
-            </VStack>
-          </property>
-          Content 1
-        </TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        // Custom header content should be visible
-        yield (0, fixtures_1.expect)(page.getByText("Custom")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Header")).toBeVisible();
-        // Simple label should be visible for second tab
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("headerTemplate takes priority over global headerTemplate", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <property name="headerTemplate">
-          <Text>Global: {$header.label}</Text>
-        </property>
-        <TabItem label="Tab 1">
-          <property name="headerTemplate">
-            <Text>Custom Content</Text>
-          </property>
-          Content 1
-        </TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        // First tab should use individual headerTemplate
-        yield (0, fixtures_1.expect)(page.getByText("Custom Content")).toBeVisible();
-        // Second tab should use global headerTemplate
-        yield (0, fixtures_1.expect)(page.getByText("Global: Tab 2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("complex headerTemplate with icons and badges", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">
-          <property name="headerTemplate">
-            <HStack gap="$space-2" alignItems="center">
-              <Text>Custom: {$header.label}</Text>
-              <Badge>{$header.isActive ? 'Active' : ''}</Badge>
-            </HStack>
-          </property>
-          Content 1
-        </TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Active")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("headerTemplate receives correct context props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="First Tab">
-          <property name="headerTemplate">
-            <VStack gap="$space-1">
-              <Text>Index: {$header.index}</Text>
-              <Text>Label: {$header.label}</Text>
-              <Text>Active: {$header.isActive ? 'Yes' : 'No'}</Text>
-            </VStack>
-          </property>
-          Content 1
-        </TabItem>
-        <TabItem label="Second Tab">Content 2</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Index: 0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Label: First Tab")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Active: Yes")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("headerTemplate receives external id when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="First Tab" id="custom-tab-1">
-          <property name="headerTemplate">
-            <VStack gap="$space-1">
-              <Text>ID: {$header.id}</Text>
-              <Text>Label: {$header.label}</Text>
-              <Text>Has ID: {$header.id ? 'Yes' : 'No'}</Text>
-            </VStack>
-          </property>
-          Content 1
-        </TabItem>
-        <TabItem label="Second Tab">
-          <property name="headerTemplate">
-            <VStack gap="$space-1">
-              <Text>Label: {$header.label}</Text>
-              <Text>Has ID: {$header.id ? 'Yes' : 'No'}</Text>
-            </VStack>
-          </property>
-          Content 2
-        </TabItem>
-      </Tabs>
-    `);
-        // First tab should show the external id
-        yield (0, fixtures_1.expect)(page.getByText("ID: custom-tab-1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Label: First Tab")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Has ID: Yes")).toBeVisible();
-        // Click second tab
-        yield page.getByRole("tab", { name: "Second Tab" }).click();
-        // Second tab should not have id in context
-        yield (0, fixtures_1.expect)(page.getByText("Label: Second Tab")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Has ID: No")).toBeVisible();
-    }));
-});
-// =============================================================================
-// GLOBAL HEADER TEMPLATE TESTS
-// =============================================================================
-fixtures_1.test.describe("global headerTemplate functionality", () => {
-    (0, fixtures_1.test)("global headerTemplate customizes all tab headers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <property name="headerTemplate">
-          <Text>Custom: {$header.label}</Text>
-        </property>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>  
-        <TabItem label="Tab 3">Content 3</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 2")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Custom: Tab 3")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("global headerTemplate receives isActive state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <property name="headerTemplate">
-          <Text>{$header.isActive ? 'Active: ' : ''}{$header.label}</Text>
-        </property>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        // First tab should be active initially
-        yield (0, fixtures_1.expect)(page.getByText("Active: Tab 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Tab 2")).toBeVisible();
-        // Click second tab
-        yield page.getByText("Tab 2").click();
-        yield (0, fixtures_1.expect)(page.getByText("Tab 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Active: Tab 2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("global headerTemplate with complex content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <property name="headerTemplate">
-          <HStack>
-            <Text>{$header.label} {$header.isActive ? 'active' : ''}</Text>
-          </HStack>
-        </property>
-        <TabItem label="Home">Home content</TabItem>
-        <TabItem label="Settings">Settings content</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Home active")).toBeVisible();
-        yield page.getByText("Settings").click();
-        yield (0, fixtures_1.expect)(page.getByText("Settings active")).toBeVisible();
-    }));
-});
-// =============================================================================
-// FILLER ELEMENT TESTS
-// =============================================================================
-fixtures_1.test.describe("filler element", () => {
-    (0, fixtures_1.test)("filler is hidden when distributeEvenly is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs distributeEvenly>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        const filler = page.locator('.filler');
-        yield (0, fixtures_1.expect)(filler).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("filler is hidden when headerRenderer is used", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs headerRenderer="{(item) => item.label}">
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        const filler = page.locator('.filler');
-        yield (0, fixtures_1.expect)(filler).not.toBeVisible();
-    }));
-});
-// =============================================================================
-// EDGE CASES AND ERROR HANDLING
-// =============================================================================
-fixtures_1.test.describe("edge cases", () => {
-    (0, fixtures_1.test)("handles empty tabs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Tabs></Tabs>`);
-        // Check that empty tabs component is rendered
-        yield (0, fixtures_1.expect)(page.getByRole('tablist')).toBeAttached();
-    }));
-    (0, fixtures_1.test)("handles single tab", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Only Tab">Only content</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Only Tab" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Only content")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles tabs with empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Empty Tab"></TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Empty Tab" })).toBeVisible();
-        yield page.getByRole("tab", { name: "Tab 2" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles very long tab labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const longLabel = "This is a very long tab label that might cause layout issues";
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="${longLabel}">Content 1</TabItem>
-        <TabItem label="Short">Content 2</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: longLabel })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Short" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles activeTab out of bounds", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs activeTab="{5}">
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        // Should default to first tab when activeTab is out of bounds
-        yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("accessibility", () => {
-    (0, fixtures_1.test)("tabs have correct ARIA roles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tablist")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tabpanel")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("active tab has correct aria-selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "true");
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "false");
-        yield page.getByRole("tab", { name: "Tab 2" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 1" })).toHaveAttribute("aria-selected", "false");
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toHaveAttribute("aria-selected", "true");
-    }));
-    (0, fixtures_1.test)("keyboard navigation works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-        <TabItem label="Tab 3">Content 3</TabItem>
-      </Tabs>
-    `);
-        // Focus first tab
-        yield page.getByRole("tab", { name: "Tab 1" }).focus();
-        // Arrow right to second tab
-        yield page.keyboard.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeFocused();
-        // Arrow right to third tab
-        yield page.keyboard.press("ArrowRight");
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 3" })).toBeFocused();
-        // Arrow left back to second tab
-        yield page.keyboard.press("ArrowLeft");
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Tab 2" })).toBeFocused();
-    }));
-    // =============================================================================
-    fixtures_1.test.describe("API functionality verification", () => {
-        (0, fixtures_1.test)("next() method cycles through all tabs correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Fragment>
-        <Tabs id="tabs">
-          <TabItem label="Account">
-            <Text>Account Content</Text>
-          </TabItem>
-          <TabItem label="Stream">
-            <Text>Stream Content</Text>
-          </TabItem>
-          <TabItem label="Support">
-            <Text>Support Content</Text>
-          </TabItem>
-        </Tabs>
-        <Button onClick="tabs.next()" testId="next-btn">
-          Next Tab
-        </Button>
-      </Fragment>
-    `);
-            // Initially Account tab should be active (first tab)
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            // Call next() - should move to Stream tab
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            // Call next() again - should move to Support tab
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            // Call next() from last tab - should cycle back to Account tab
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-        }));
-        (0, fixtures_1.test)("prev() method cycles through all tabs correctly in reverse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Fragment>
-        <Tabs id="tabs">
-          <TabItem label="Account">
-            <Text>Account Content</Text>
-          </TabItem>
-          <TabItem label="Stream">
-            <Text>Stream Content</Text>
-          </TabItem>
-          <TabItem label="Support">
-            <Text>Support Content</Text>
-          </TabItem>
-        </Tabs>
-        <Button onClick="tabs.prev()" testId="prev-btn">
-          Previous Tab
-        </Button>
-      </Fragment>
-    `);
-            // Initially Account tab should be active (first tab)
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            // Call prev() from first tab - should cycle to Support tab (last tab)
-            yield page.getByTestId("prev-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            // Call prev() again - should move to Stream tab
-            yield page.getByTestId("prev-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            // Call prev() again - should move to Account tab
-            yield page.getByTestId("prev-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-        }));
-        (0, fixtures_1.test)("next() and prev() methods work together for full navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Fragment>
-        <Tabs id="tabs">
-          <TabItem label="Account">
-            <Text>Account Content</Text>
-          </TabItem>
-          <TabItem label="Stream">
-            <Text>Stream Content</Text>
-          </TabItem>
-          <TabItem label="Support">
-            <Text>Support Content</Text>
-          </TabItem>
-        </Tabs>
-        <Button onClick="tabs.next()" testId="next-btn">
-          Next Tab
-        </Button>
-        <Button onClick="tabs.prev()" testId="prev-btn">
-          Previous Tab
-        </Button>
-      </Fragment>
-    `);
-            // Start at Account tab
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            // Go forward twice: Account -> Stream -> Support
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            // Go back once: Support -> Stream
-            yield page.getByTestId("prev-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            // Go forward to cycle: Stream -> Support -> Account
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            yield page.getByTestId("next-btn").click();
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-        }));
-        (0, fixtures_1.test)("tabs can be navigated programmatically (simulating next() behavior)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-        <TabItem label="Tab 3">Content 3</TabItem>
-      </Tabs>
-    `);
-            // Initially first tab is active
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-            // Simulate next() - move to second tab
-            yield page.getByRole("tab", { name: "Tab 2" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-            // Simulate next() - move to third tab
-            yield page.getByRole("tab", { name: "Tab 3" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
-            // Simulate next() - should cycle back to first tab
-            yield page.getByRole("tab", { name: "Tab 1" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("tabs can be navigated backwards programmatically (simulating prev() behavior)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Tabs>
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-        <TabItem label="Tab 3">Content 3</TabItem>
-      </Tabs>
-    `);
-            // Initially first tab is active
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            // Simulate prev() from first tab - should cycle to last tab
-            yield page.getByRole("tab", { name: "Tab 3" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
-            // Simulate prev() - move to second tab
-            yield page.getByRole("tab", { name: "Tab 2" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-            // Simulate prev() - move to first tab
-            yield page.getByRole("tab", { name: "Tab 1" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("activeTab prop sets initial tab correctly (simulating setActiveTabIndex())", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Tabs activeTab="{2}">
-        <TabItem label="Tab 1">Content 1</TabItem>
-        <TabItem label="Tab 2">Content 2</TabItem>
-        <TabItem label="Tab 3">Content 3</TabItem>
-      </Tabs>
-    `);
-            // Third tab should be active initially (index 2)
-            yield (0, fixtures_1.expect)(page.getByText("Content 3")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Content 2")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("ArrowRight key cycles through all tabs correctly (keyboard navigation)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs>
-          <TabItem label="Account">
-            <Text>Account Content</Text>
-          </TabItem>
-          <TabItem label="Stream">
-            <Text>Stream Content</Text>
-          </TabItem>
-          <TabItem label="Support">
-            <Text>Support Content</Text>
-          </TabItem>
-        </Tabs>
-      `);
-            // Initially Account tab should be active and focused
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            // Focus the first tab
-            yield page.getByRole("tab", { name: "Account" }).focus();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
-            // Press ArrowRight - should move to Stream tab
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
-            // Press ArrowRight again - should move to Support tab
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
-            // Press ArrowRight from last tab - should cycle back to Account tab
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
-        }));
-        (0, fixtures_1.test)("ArrowLeft key cycles through all tabs correctly in reverse (keyboard navigation)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs>
-          <TabItem label="Account">
-            <Text>Account Content</Text>
-          </TabItem>
-          <TabItem label="Stream">
-            <Text>Stream Content</Text>
-          </TabItem>
-          <TabItem label="Support">
-            <Text>Support Content</Text>
-          </TabItem>
-        </Tabs>
-      `);
-            // Initially Account tab should be active
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            // Focus the first tab
-            yield page.getByRole("tab", { name: "Account" }).focus();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
-            // Press ArrowLeft from first tab - should cycle to Support tab (last tab)
-            yield page.keyboard.press("ArrowLeft");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
-            // Press ArrowLeft again - should move to Stream tab
-            yield page.keyboard.press("ArrowLeft");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
-            // Press ArrowLeft again - should move to Account tab
-            yield page.keyboard.press("ArrowLeft");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
-        }));
-        (0, fixtures_1.test)("ArrowRight and ArrowLeft keys work together for full keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Tabs>
-          <TabItem label="Account">
-            <Text>Account Content</Text>
-          </TabItem>
-          <TabItem label="Stream">
-            <Text>Stream Content</Text>
-          </TabItem>
-          <TabItem label="Support">
-            <Text>Support Content</Text>
-          </TabItem>
-        </Tabs>
-      `);
-            // Start at Account tab and focus it
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            yield page.getByRole("tab", { name: "Account" }).focus();
-            // Go forward twice: Account -> Stream -> Support
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
-            // Go back once: Support -> Stream
-            yield page.keyboard.press("ArrowLeft");
-            yield (0, fixtures_1.expect)(page.getByText("Stream Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Stream" })).toBeFocused();
-            // Go forward to cycle: Stream -> Support -> Account
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Support Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Support" })).toBeFocused();
-            yield page.keyboard.press("ArrowRight");
-            yield (0, fixtures_1.expect)(page.getByText("Account Content")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
-            yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Account" })).toBeFocused();
-        }));
-        (0, fixtures_1.test)("API methods work with headerTemplate (visual verification)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-      <Fragment>
-        <Tabs id="tabs">
-          <property name="headerTemplate">
-            <Text>{$header.isActive ? 'Active: ' : ''}{$header.label}</Text>
-          </property>
-          <TabItem label="Tab 1">Content 1</TabItem>
-          <TabItem label="Tab 2">Content 2</TabItem>
-          <TabItem label="Tab 3">Content 3</TabItem>
-        </Tabs>
-        <Button onClick="tabs.prev()">Prev</Button>
-        <Button onClick="tabs.next()">Next</Button>
-      </Fragment>
-    `);
-            // Initially first tab is active
-            yield (0, fixtures_1.expect)(page.getByText("Active: Tab 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Tab 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Tab 3")).toBeVisible();
-            // Simulate next() behavior by clicking second tab
-            yield page.getByRole("button", { name: "Next" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Active: Tab 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Tab 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Tab 3")).toBeVisible();
-            // Simulate prev() behavior by clicking first tab
-            yield page.getByRole("button", { name: "Prev" }).click();
-            yield (0, fixtures_1.expect)(page.getByText("Active: Tab 1")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Tab 2")).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByText("Tab 3")).toBeVisible();
-        }));
-    });
-});
-// =============================================================================
-// DYNAMIC CONTENT TESTS
-// =============================================================================
-fixtures_1.test.describe("dynamic content", () => {
-    (0, fixtures_1.test)("works with Items component for dynamic tabs", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <Items data="{['First', 'Second', 'Third']}">
-          <TabItem label="{$item}">Content for {$item}</TabItem>
-        </Items>
-      </Tabs>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "First" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Second" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("tab", { name: "Third" })).toBeVisible();
-        yield page.getByRole("tab", { name: "Second" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Content for Second")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("headerTemplate works with dynamic content from Items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Tabs>
-        <property name="headerTemplate">
-          <Text color="red">Account {$header.label}</Text>
-        </property>
-        <Items data="{[1, 2, 3, 4, 5]}">
-          <TabItem label="Account {$item}">
-            <property name="headerTemplate">
-              <Text when="true" color="blue">{$header.label} | {$item}</Text>
-            </property>
-            Content for account {$item}
-          </TabItem>
-        </Items>
-      </Tabs>
-    `);
-        // Check that individual headerTemplate takes priority and has access to both $header and $item
-        yield (0, fixtures_1.expect)(page.getByText("Account 1 | 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Account 2 | 2")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Account 3 | 3")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Account 4 | 4")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Account 5 | 5")).toBeVisible();
-        // Test clicking on different tabs
-        yield page.getByText("Account 3 | 3").click();
-        yield (0, fixtures_1.expect)(page.getByText("Content for account 3")).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("onDidChange callback functionality", () => {
-    (0, fixtures_1.test)("onDidChange callback is called when tab changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment var.tabChangeInfo="No change yet">
-      <Tabs onDidChange="(index, id, label) => {
-        tabChangeInfo = 'Tab: ' + index + ' - ' + label;
-      }">
-        <TabItem label="First Tab">
-          <Text>First tab content</Text>
-        </TabItem>
-        <TabItem label="Second Tab">
-          <Text>Second tab content</Text>
-        </TabItem>
-        <TabItem label="Third Tab">
-          <Text>Third tab content</Text>
-        </TabItem>
-      </Tabs>
-      <Text>{tabChangeInfo}</Text>
-      </Fragment>
-    `);
-        // Initially should show no change
-        yield (0, fixtures_1.expect)(page.getByText("No change yet")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("First tab content")).toBeVisible();
-        // Click on second tab
-        yield page.getByRole("tab", { name: "Second Tab" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Second tab content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Tab: 1 - Second Tab")).toBeVisible();
-        // Click on third tab
-        yield page.getByRole("tab", { name: "Third Tab" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Third tab content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Tab: 2 - Third Tab")).toBeVisible();
-        // Click back to first tab
-        yield page.getByRole("tab", { name: "First Tab" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("First tab content")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Tab: 0 - First Tab")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("onDidChange callback is not called when same tab is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment var.changeCount="{0}">
-      <Tabs onDidChange="(index, id, label) => {
-        changeCount = changeCount + 1;
-      }">
-        <TabItem label="Tab One">
-          <Text>Content one</Text>
-        </TabItem>
-        <TabItem label="Tab Two">
-          <Text>Content two</Text>
-        </TabItem>
-      </Tabs>
-      <Text>Changes: {changeCount}</Text>
-      </Fragment>
-    `);
-        // Initially should show 0 changes
-        yield (0, fixtures_1.expect)(page.getByText("Changes: 0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Content one")).toBeVisible();
-        // Click on second tab - should trigger onDidChange
-        yield page.getByRole("tab", { name: "Tab Two" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Content two")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Changes: 1")).toBeVisible();
-        // Click on second tab again - should NOT trigger onDidChange
-        yield page.getByRole("tab", { name: "Tab Two" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Changes: 1")).toBeVisible(); // Should still be 1
-    }));
-});