xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,838 @@
+"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();
+    }));
+});