xmlui 0.11.3 → 0.11.6

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

@@ -1,838 +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)("renders table of contents links with headings", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Heading value="First Heading" />
-            <Heading value="Second Heading" />
-            <Heading value="Third Heading" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>`);
-        const tocLinks = page.getByRole("link", { name: /Heading/ });
-        yield (0, fixtures_1.expect)(tocLinks).toHaveCount(3);
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "First Heading" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Second Heading" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Third Heading" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders table of contents with bookmarks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark id="section1" title="Section One" level="{2}">
-              section one content
-            </Bookmark>
-            <Bookmark id="section2" title="Section Two" level="{3}">
-              section two content
-            </Bookmark>
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const tocLinks = page.getByRole("link");
-        yield (0, fixtures_1.expect)(tocLinks).toHaveCount(2);
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Section One" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Section Two" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders table of contents with mixed headings and bookmarks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Heading level="h1" value="Main Title" />
-            <Bookmark id="intro" title="Introduction" level="{2}">
-              introduction content
-            </Bookmark>
-            <Heading level="h2" value="Chapter One" />
-            <Bookmark id="summary" title="Summary" level="{3}">
-              summary content
-            </Bookmark>
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const tocLinks = page.getByRole("link");
-        yield (0, fixtures_1.expect)(tocLinks).toHaveCount(4);
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Main Title" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Introduction" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Chapter One" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Summary" })).toBeVisible();
-    }));
-    // =============================================================================
-    // DOCUMENTATION USAGE PATTERNS
-    // =============================================================================
-    fixtures_1.test.describe("Documentation Usage Patterns", () => {
-        (0, fixtures_1.test)("navigates to headings when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h2" value="Section A" />
-              <Heading level="h2" value="Section B" />
-              <Heading level="h2" value="Section C" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents />
-          </HStack>
-        </Page>
-      `);
-            const sectionA = page.getByRole("heading", { name: "Section A" });
-            const sectionB = page.getByRole("heading", { name: "Section B" });
-            const sectionC = page.getByRole("heading", { name: "Section C" });
-            // Initially, Section A should be visible
-            yield (0, fixtures_1.expect)(sectionA).toBeInViewport();
-            yield (0, fixtures_1.expect)(sectionB).not.toBeInViewport();
-            yield (0, fixtures_1.expect)(sectionC).not.toBeInViewport();
-            // Click on Section B in TOC
-            const sectionBLink = page.getByRole("link", { name: "Section B" });
-            yield sectionBLink.click();
-            yield (0, fixtures_1.expect)(sectionB).toBeInViewport();
-            // Click on Section C in TOC
-            const sectionCLink = page.getByRole("link", { name: "Section C" });
-            yield sectionCLink.click();
-            yield (0, fixtures_1.expect)(sectionB).not.toBeInViewport();
-            yield (0, fixtures_1.expect)(sectionC).toBeInViewport();
-        }));
-        (0, fixtures_1.test)("navigates to bookmarks when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Bookmark id="bookmark-a" title="Bookmark A" level="{2}">
-                bookmark a content
-              </Bookmark>
-              <Bookmark id="bookmark-b" title="Bookmark B" level="{2}">
-                bookmark b content
-              </Bookmark>
-              <Bookmark id="bookmark-c" title="Bookmark C" level="{2}">
-                bookmark c content
-              </Bookmark>
-              bottom of the page text
-            </VStack>
-              <TableOfContents />
-          </HStack>
-        </Page>
-      `);
-            const contentA = page.getByText("bookmark a content");
-            const contentB = page.getByText("bookmark b content");
-            const contentC = page.getByText("bookmark c content");
-            // Initially, Bookmark A should be visible
-            yield (0, fixtures_1.expect)(contentA).toBeInViewport();
-            yield (0, fixtures_1.expect)(contentB).not.toBeInViewport();
-            yield (0, fixtures_1.expect)(contentC).not.toBeInViewport();
-            // Click on Bookmark B in TOC
-            const bookmarkBLink = page.getByRole("link", { name: "Bookmark B" });
-            yield bookmarkBLink.click();
-            yield (0, fixtures_1.expect)(contentB).toBeInViewport();
-            // Click on Bookmark C in TOC
-            const bookmarkCLink = page.getByRole("link", { name: "Bookmark C" });
-            yield bookmarkCLink.click();
-            yield (0, fixtures_1.expect)(contentC).toBeInViewport();
-        }));
-        (0, fixtures_1.test)("shows active item in table of contents", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h2" value="First Section" />
-              <Heading level="h2" value="Second Section" />
-              <Heading level="h2" value="Thirsd Section" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents />
-          </HStack>
-        </Page>
-      `);
-            const secondHeading = page.getByRole("heading", { name: "Second Section" });
-            // Click on second section
-            const secondLink = page.getByRole("link", { name: "Second Section" });
-            yield secondLink.click();
-            yield (0, fixtures_1.expect)(secondHeading).toBeInViewport();
-            // Check if the active item has the correct class or styling
-            const activeItem = page.locator("[aria-current='page']");
-            yield (0, fixtures_1.expect)(activeItem).toHaveText("Second Section");
-        }));
-    });
-    // =============================================================================
-    // PROPERTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("maxHeadingLevel property", () => {
-        (0, fixtures_1.test)("limits headings to specified level", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h1" value="H1 Title" />
-              <Heading level="h2" value="H2 Title" />
-              <Heading level="h3" value="H3 Title" />
-              <Heading level="h4" value="H4 Title" />
-              <Heading level="h5" value="H5 Title" />
-              <Heading level="h6" value="H6 Title" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents maxHeadingLevel="{3}" />
-          </HStack>
-        </Page>
-      `);
-            // Should show H1, H2, H3 but not H4, H5, H6
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H1 Title" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H2 Title" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H3 Title" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H4 Title" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H5 Title" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H6 Title" })).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("shows only H1 when maxHeadingLevel is 1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h1" value="Only H1" />
-              <Heading level="h2" value="Hidden H2" />
-              <Heading level="h3" value="Hidden H3" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents maxHeadingLevel="{1}" />
-          </HStack>
-        </Page>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Only H1" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Hidden H2" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Hidden H3" })).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("limits bookmarks to specified level", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Bookmark id="levelNone" title="Bookmark level none">
-                content no level
-              </Bookmark>
-              <Bookmark id="level1" title="Level 1 Bookmark" level="{1}">
-                level 1 content
-              </Bookmark>
-              <Bookmark id="level2" title="Level 2 Bookmark" level="{2}">
-                level 2 content
-              </Bookmark>
-              <Bookmark id="level3" title="Level 3 Bookmark" level="{3}">
-                level 3 content
-              </Bookmark>
-              <Bookmark id="level4" title="Level 4 Bookmark" level="{4}">
-                level 4 content
-              </Bookmark>
-              bottom of the page text
-            </VStack>
-              <TableOfContents maxHeadingLevel="{2}" />
-          </HStack>
-        </Page>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Bookmark level none" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Level 1 Bookmark" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Level 2 Bookmark" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Level 3 Bookmark" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Level 4 Bookmark" })).not.toBeVisible();
-        }));
-    });
-    fixtures_1.test.describe("omitH1 property", () => {
-        (0, fixtures_1.test)("excludes H1 headings when omitH1 is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h1" value="H1 Title" />
-              <Heading level="h2" value="H2 Title" />
-              <Heading level="h3" value="H3 Title" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents omitH1="{true}" />
-          </HStack>
-        </Page>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H1 Title" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H2 Title" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "H3 Title" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("includes H1 headings when omitH1 is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h1" value="Page Title" />
-              <Heading level="h2" value="Section Title" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents omitH1="{false}" />
-          </HStack>
-        </Page>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Page Title" })).toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Section Title" })).toBeVisible();
-        }));
-        (0, fixtures_1.test)("excludes level 1 bookmarks when omitH1 is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Bookmark id="no-lvl" title="No level section">
-                no level section content
-              </Bookmark>
-              <Bookmark id="main" title="Main Section" level="{1}">
-                main section content
-              </Bookmark>
-              <Bookmark id="sub" title="Subsection" level="{2}">
-                subsection content
-              </Bookmark>
-              bottom of the page text
-            </VStack>
-              <TableOfContents omitH1="{true}" />
-          </HStack>
-        </Page>
-      `);
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "No level section" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Main Section" })).not.toBeVisible();
-            yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Subsection" })).toBeVisible();
-        }));
-    });
-    fixtures_1.test.describe("smoothScrolling property", () => {
-        (0, fixtures_1.test)("applies smooth scrolling when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h2" value="Smooth Section" />
-              <Heading level="h2" value="Another Section" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents smoothScrolling="{true}" />
-          </HStack>
-        </Page>
-      `);
-            const secondHeading = page.getByRole("heading", { name: "Another Section" });
-            const link = page.getByRole("link", { name: "Another Section" });
-            yield link.click();
-            yield (0, fixtures_1.expect)(secondHeading).toBeInViewport();
-        }));
-        (0, fixtures_1.test)("works without smooth scrolling when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              <Heading level="h2" value="Regular Section" />
-              <Heading level="h2" value="Another Section" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents smoothScrolling="{false}" />
-          </HStack>
-        </Page>
-      `);
-            const secondHeading = page.getByRole("heading", { name: "Another Section" });
-            const link = page.getByRole("link", { name: "Another Section" });
-            yield link.click();
-            yield (0, fixtures_1.expect)(secondHeading).toBeInViewport();
-        }));
-    });
-    // =============================================================================
-    // ID PROPERTY TESTS
-    // =============================================================================
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Heading level="h2" value="First Section" />
-            <Heading level="h2" value="Second Section" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const nav = page.getByRole("navigation");
-        yield nav.focus();
-        // Tab to first link
-        yield page.keyboard.press("Tab");
-        const firstLink = page.getByRole("link", { name: "First Section" });
-        yield (0, fixtures_1.expect)(firstLink).toBeFocused();
-        // Tab to second link
-        yield page.keyboard.press("Tab");
-        const secondLink = page.getByRole("link", { name: "Second Section" });
-        yield (0, fixtures_1.expect)(secondLink).toBeFocused();
-        // Enter should activate the link
-        const secondHeading = page.getByRole("heading", { name: "Second Section" });
-        yield page.keyboard.press("Enter");
-        yield (0, fixtures_1.expect)(secondHeading).toBeInViewport();
-    }));
-});
-// =============================================================================
-// THEME VARIABLES TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies container theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h1" value="Test Heading" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "backgroundColor-TableOfContents": "rgb(255, 0, 0)",
-                "width-TableOfContents": "300px",
-                "height-TableOfContents": "400px",
-                "padding-TableOfContents": "20px",
-                "borderWidth-TableOfContents": "2px",
-                "borderColor-TableOfContents": "rgb(0, 255, 0)",
-                "borderStyle-TableOfContents": "solid",
-            },
-        });
-        const tocContainer = page.getByRole("navigation");
-        yield Promise.all([
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("background-color", "rgb(255, 0, 0)"),
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("width", "300px"),
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("height", "400px"),
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("padding", "20px"),
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("border-width", "2px"),
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("border-color", "rgb(0, 255, 0)"),
-            (0, fixtures_1.expect)(tocContainer).toHaveCSS("border-style", "solid"),
-        ]);
-    }));
-    (0, fixtures_1.test)("applies item base theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h2" value="Test Heading" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "textColor-TableOfContentsItem": "rgb(255, 0, 0)",
-                "fontSize-TableOfContentsItem": "18px",
-                "fontWeight-TableOfContentsItem": "700",
-                "padding-TableOfContentsItem": "25px",
-                //This theme var below should not be needed, but currently is
-                "padding-TableOfContentsItem-level-2": "25px",
-            },
-        });
-        const tocLink = page.getByRole("link", { name: "Test Heading" });
-        yield Promise.all([
-            (0, fixtures_1.expect)(tocLink).toHaveCSS("color", "rgb(255, 0, 0)"),
-            (0, fixtures_1.expect)(tocLink).toHaveCSS("font-size", "18px"),
-            (0, fixtures_1.expect)(tocLink).toHaveCSS("font-weight", "700"),
-            (0, fixtures_1.expect)(tocLink).toHaveCSS("padding", "25px"),
-        ]);
-    }));
-    (0, fixtures_1.test)("applies level-specific theme variables for H1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h1" value="Level 1 Heading" />
-            <Heading level="h1" value="Active Heading " />
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "padding-TableOfContentsItem-level-1": "25px",
-                "fontSize-TableOfContentsItem-level-1": "22px",
-                "fontWeight-TableOfContentsItem-level-1": "800",
-                "textColor-TableOfContentsItem-level-1": "rgb(0, 0, 255)",
-            },
-        });
-        const h1Link = page.getByRole("link", { name: "Level 1 Heading" });
-        yield Promise.all([
-            (0, fixtures_1.expect)(h1Link).toHaveCSS("padding", "25px"),
-            (0, fixtures_1.expect)(h1Link).toHaveCSS("font-size", "22px"),
-            (0, fixtures_1.expect)(h1Link).toHaveCSS("font-weight", "800"),
-            (0, fixtures_1.expect)(h1Link).toHaveCSS("color", "rgb(0, 0, 255)"),
-        ]);
-    }));
-    (0, fixtures_1.test)("applies level-specific theme variables for H2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h2" value="Level 2 Heading" />
-            <Heading level="h2" value="Active heading" />
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "padding-TableOfContentsItem-level-2": "20px",
-                "fontSize-TableOfContentsItem-level-2": "20px",
-                "fontWeight-TableOfContentsItem-level-2": "600",
-                "textColor-TableOfContentsItem-level-2": "rgb(255, 255, 0)",
-            },
-        });
-        const h2Link = page.getByRole("link", { name: "Level 2 Heading" });
-        yield Promise.all([
-            (0, fixtures_1.expect)(h2Link).toHaveCSS("padding", "20px"),
-            (0, fixtures_1.expect)(h2Link).toHaveCSS("font-size", "20px"),
-            (0, fixtures_1.expect)(h2Link).toHaveCSS("font-weight", "600"),
-            (0, fixtures_1.expect)(h2Link).toHaveCSS("color", "rgb(255, 255, 0)"),
-        ]);
-    }));
-    (0, fixtures_1.test)("applies level-specific theme variables for H6", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h6" value="Level 6 Heading" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "padding-TableOfContentsItem-level-6": "8px",
-                "fontSize-TableOfContentsItem-level-6": "12px",
-                "fontWeight-TableOfContentsItem-level-6": "400",
-                "fontStyle-TableOfContentsItem-level-6": "italic",
-            },
-        });
-        const h6Link = page.getByRole("link", { name: "Level 6 Heading" });
-        yield Promise.all([
-            (0, fixtures_1.expect)(h6Link).toHaveCSS("padding", "8px"),
-            (0, fixtures_1.expect)(h6Link).toHaveCSS("font-size", "12px"),
-            (0, fixtures_1.expect)(h6Link).toHaveCSS("font-weight", "400"),
-            (0, fixtures_1.expect)(h6Link).toHaveCSS("font-style", "italic"),
-        ]);
-    }));
-    (0, fixtures_1.test)("applies hover state theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h2" value="First Heading" />
-            <Heading level="h2" value="Hover Test" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "backgroundColor-TableOfContentsItem--hover": "rgb(200, 200, 200)",
-                "textColor-TableOfContentsItem--hover": "rgb(100, 100, 100)",
-                "fontWeight-TableOfContentsItem--hover": "900",
-            },
-        });
-        // First click on the second heading to make it active
-        const secondHeading = page.getByRole("link", { name: "Hover Test" });
-        yield secondHeading.click();
-        // Now hover over the first heading (which should not be active)
-        const firstHeading = page.getByRole("link", { name: "First Heading" });
-        const listItem = firstHeading.locator("..");
-        yield firstHeading.hover();
-        yield Promise.all([
-            (0, fixtures_1.expect)(listItem).toHaveCSS("background-color", "rgb(200, 200, 200)"),
-            (0, fixtures_1.expect)(firstHeading).toHaveCSS("color", "rgb(100, 100, 100)"),
-            (0, fixtures_1.expect)(firstHeading).toHaveCSS("font-weight", "900"),
-        ]);
-    }));
-    (0, fixtures_1.test)("applies active state theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack>
-            <Heading level="h2" value="Active Test" />
-            <Heading level="h3" value="Another Section" />
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `, {
-            testThemeVars: {
-                "backgroundColor-TableOfContentsItem--active": "rgb(150, 150, 255)",
-                "textColor-TableOfContentsItem--active": "rgb(50, 50, 150)",
-                "fontWeight-TableOfContentsItem--active": "bold",
-            },
-        });
-        const activeLink = page.getByRole("link", { name: "Another Section" });
-        yield activeLink.click();
-        const activeListItem = page.locator("[class*='active']").first();
-        const activeLinkElement = activeListItem.getByRole("link");
-        yield Promise.all([
-            (0, fixtures_1.expect)(activeListItem).toHaveCSS("background-color", "rgb(150, 150, 255)"),
-            (0, fixtures_1.expect)(activeLinkElement).toHaveCSS("color", "rgb(50, 50, 150)"),
-            (0, fixtures_1.expect)(activeLinkElement).toHaveCSS("font-weight", "700"), // 'bold' maps to 700
-        ]);
-    }));
-});
-// =============================================================================
-// OTHER EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Other Edge Cases", () => {
-    fixtures_1.test.describe("id property handling", () => {
-        (0, fixtures_1.test)("handles unicode characters in heading titles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              top of the page text
-              <Heading level="h2" value="测试标题-émojis🚀" />
-              bottom of the page text
-            </VStack>
-              <TableOfContents />
-          </HStack>
-        </Page>
-      `);
-            const unicodeHeading = page.getByRole("heading", { name: "测试标题-émojis🚀" });
-            const unicodeLink = page.getByRole("link", { name: "测试标题-émojis🚀" });
-            yield (0, fixtures_1.expect)(unicodeLink).toBeVisible();
-            yield unicodeLink.click();
-            yield (0, fixtures_1.expect)(unicodeHeading).toBeInViewport();
-        }));
-        (0, fixtures_1.test)("handles bookmarks with special characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield page.setViewportSize({ height: 600, width: 800 });
-            yield initTestBed(`
-        <Page>
-          <HStack>
-            <VStack gap="800px">
-              top of the page text
-              <Bookmark id="special-bookmark_test section" title="Special Bookmark" level="{2}">
-                special bookmark content
-              </Bookmark>
-              bottom of the page text
-            </VStack>
-              <TableOfContents />
-          </HStack>
-        </Page>
-      `);
-            const bookmarkContent = page.getByText("special bookmark content");
-            const bookmarkLink = page.getByRole("link", { name: "Special Bookmark" });
-            yield (0, fixtures_1.expect)(bookmarkLink).toBeVisible();
-            yield bookmarkLink.click();
-            yield (0, fixtures_1.expect)(bookmarkContent).toBeInViewport();
-            yield page.waitForURL(/#special-bookmark_test(%20| )section$/);
-        }));
-    });
-    (0, fixtures_1.test)("handles no headings or bookmarks gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Text>Just some text content</Text>
-            bottom of the page text
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const tocContainer = page.getByRole("link");
-        yield (0, fixtures_1.expect)(tocContainer).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles null props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            top of the page text
-            <Heading level="h2" value="Test Heading" />
-            bottom of the page text
-          </VStack>
-            <TableOfContents maxHeadingLevel="{null}" omitH1="{null}" smoothScrolling="{null}" />
-        </HStack>
-      </Page>
-    `);
-        const testHeading = page.getByRole("heading", { name: "Test Heading" });
-        const testLink = page.getByRole("link", { name: "Test Heading" });
-        yield (0, fixtures_1.expect)(testLink).toBeVisible();
-        yield testLink.click();
-        yield (0, fixtures_1.expect)(testHeading).toBeInViewport();
-    }));
-    (0, fixtures_1.test)("handles undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ height: 600, width: 800 });
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Heading level="h1" value="Test H1" />
-            <Heading level="h2" value="Test H2" />
-            bottom of the page text
-          </VStack>
-            <TableOfContents maxHeadingLevel="{undefined}" omitH1="{undefined}" smoothScrolling="{undefined}" />
-        </HStack>
-      </Page>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Test H1" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("link", { name: "Test H2" })).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Interactions with Bookmark props", () => {
-    (0, fixtures_1.test)("uses bookmark title fallback when title and content is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark id="fallback-test" title=""/>
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const tocItem = page.getByRole("link", { name: "fallback-test" });
-        yield (0, fixtures_1.expect)(tocItem).toBeVisible();
-    }));
-    (0, fixtures_1.test)("uses bookmark id as fallback when both title and content are empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark id="id-fallback" title="" />
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const tocItem = page.getByRole("link", { name: "id-fallback" });
-        yield (0, fixtures_1.expect)(tocItem).toBeVisible();
-    }));
-    (0, fixtures_1.test)("excludes bookmarks with omitFromToc=true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark id="visible" title="Visible Bookmark">
-              visible content
-            </Bookmark>
-            <Bookmark id="hidden" title="Hidden Bookmark" omitFromToc="{true}">
-              hidden content
-            </Bookmark>
-            <Bookmark id="also-visible" title="Also Visible">
-              also visible content
-            </Bookmark>
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const visibleItem = page.getByRole("link", { name: "Visible Bookmark" });
-        const hiddenItem = page.getByRole("link", { name: "Hidden Bookmark" });
-        const alsoVisibleItem = page.getByRole("link", { name: "Also Visible" });
-        yield (0, fixtures_1.expect)(visibleItem).toBeVisible();
-        yield (0, fixtures_1.expect)(hiddenItem).not.toBeVisible();
-        yield (0, fixtures_1.expect)(alsoVisibleItem).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles bookmarks without id gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark title="No ID Bookmark">
-              content without id
-            </Bookmark>
-            <Bookmark id="with-id" title="With ID">
-              content with id
-            </Bookmark>
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const noIdItem = page.getByRole("link", { name: "No ID Bookmark" });
-        const withIdItem = page.getByRole("link", { name: "With ID" });
-        yield (0, fixtures_1.expect)(noIdItem).not.toBeVisible();
-        yield (0, fixtures_1.expect)(withIdItem).toBeVisible();
-    }));
-    (0, fixtures_1.test)("respects bookmark level in omitH1 filtering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark id="level1" title="Level 1 Bookmark" level="{1}">
-              level 1 content
-            </Bookmark>
-            <Bookmark id="level2" title="Level 2 Bookmark" level="{2}">
-              level 2 content
-            </Bookmark>
-          </VStack>
-          <TableOfContents omitH1="{true}" />
-        </HStack>
-      </Page>
-    `);
-        const level1Item = page.getByRole("link", { name: "Level 1 Bookmark" });
-        const level2Item = page.getByRole("link", { name: "Level 2 Bookmark" });
-        yield (0, fixtures_1.expect)(level1Item).not.toBeVisible();
-        yield (0, fixtures_1.expect)(level2Item).toBeVisible();
-    }));
-    (0, fixtures_1.test)("uses content text as title over id when title is undefined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Page>
-        <HStack>
-          <VStack gap="800px">
-            <Bookmark id="content-text">
-              Content as title text
-            </Bookmark>
-          </VStack>
-          <TableOfContents />
-        </HStack>
-      </Page>
-    `);
-        const tocItem = page.getByRole("link", { name: "Content as title text" });
-        yield (0, fixtures_1.expect)(tocItem).toBeVisible();
-    }));
-});