xmlui 0.11.4 → 0.11.7

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

@@ -1,1676 +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");
-const abstractions_1 = require("../abstractions");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeAttached();
-        yield (0, fixtures_1.expect)(driver.component).toBeEmpty();
-    }));
-    (0, fixtures_1.test)("component renders with value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text value="test content" />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("test content");
-    }));
-    (0, fixtures_1.test)("component renders with text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text>test content</Text>`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("test content");
-    }));
-    (0, fixtures_1.test)("text content overrides value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "this test text is the value of the heading";
-        yield initTestBed(`
-      <Text value="${EXPECTED}">
-        This is a child
-      </Text>
-    `);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(EXPECTED);
-    }));
-    Object.entries(abstractions_1.TextVariantElement).forEach(([variant, htmlElement]) => {
-        (0, fixtures_1.test)(`variant=${variant} renders correct HTML element: ${htmlElement}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-            yield initTestBed(`<Text variant="${variant}" />`);
-            const driver = yield createTextDriver();
-            const tagName = yield driver.getComponentTagName();
-            (0, fixtures_1.expect)(tagName).toEqual(htmlElement);
-        }));
-    });
-    Array.from(new Set(Object.values(abstractions_1.TextVariantElement)))
-        .filter((variant) => !["h6", "span"].includes(variant))
-        .forEach((htmlElement) => {
-        (0, fixtures_1.test)(`HtmlTag component '${htmlElement}' renders correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-            yield initTestBed(`<${htmlElement} />`);
-            const driver = yield createTextDriver();
-            yield (0, fixtures_1.expect)(driver.component).toBeAttached();
-        }));
-    });
-    [
-        { label: "undefined", value: "'{undefined}'", toExpected: "" },
-        { label: "undefined with string", value: "'abc{undefined}def'", toExpected: "abcdef" },
-        { label: "null", value: "'{null}'", toExpected: "" },
-        { label: "null with string", value: "'abc{null}def'", toExpected: "abcdef" },
-        { label: "empty string", value: "''", toExpected: "" },
-        { label: "string", value: "'test'", toExpected: "test" },
-        { label: "integer", value: "'{1}'", toExpected: "1" },
-        { label: "float", value: "'{1.2}'", toExpected: "1.2" },
-        { label: "boolean", value: "'{true}'", toExpected: "true" },
-        { label: "empty object", value: "'{{}}'", toExpected: {}.toString() },
-        { label: "object", value: "\"{{ a: 1, b: 'hi' }}\"", toExpected: { a: 1, b: "hi" }.toString() },
-        { label: "empty array", value: "'{[]}'", toExpected: "" },
-        { label: "array", value: "'{[1, 2, 3]}'", toExpected: [1, 2, 3].toString() },
-    ].forEach(({ label, value, toExpected }) => {
-        (0, fixtures_1.test)(`handles ${label} value prop correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-            yield initTestBed(`<Text value=${value} />`);
-            const driver = yield createTextDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveText(toExpected);
-        }));
-    });
-    (0, fixtures_1.test)("removes leading whitespace", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Text testId="text">   {123}</Text>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("123");
-    }));
-    (0, fixtures_1.test)("removes trailing whitespace", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Text testId="text">{123}  </Text>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("123");
-    }));
-    (0, fixtures_1.test)("preserves whitespace when using value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const expected = "test        content";
-        yield initTestBed(`<Text value="${expected}" />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(expected);
-    }));
-    (0, fixtures_1.test)("supports preserveLinebreaks prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-    <VStack>
-      <Text testId="textShort">Short</Text>
-      <Text testId="textLong" preserveLinebreaks="true"
-        value="Though this long
-text does not fit into a single line,
-please do not break it!"
-      />
-    </VStack>
-    `);
-        const { height: heightTextShort } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("textShort"));
-        const { height: heightTextLong } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("textLong"));
-        (0, fixtures_1.expect)(heightTextLong).toEqualWithTolerance(heightTextShort * 3, 0.01);
-    }));
-});
-// =============================================================================
-// API TESTS
-// =============================================================================
-fixtures_1.test.describe("API", () => {
-    (0, fixtures_1.test)("hasOverflow returns true when text overflows horizontally", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="200px">
-          <Text id="overflowText" maxLines="{1}" 
-            value="This is a very long text that should definitely overflow when constrained to a small width" 
-          />
-          <Button onClick="testState = overflowText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns true when text overflows with maxLines constraint", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="200px">
-          <Text id="overflowText" maxLines="{2}" value="This is a very long text that will wrap to multiple lines and should overflow beyond the maxLines constraint when the container is wide enough to allow wrapping" />
-          <Button onClick="testState = overflowText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns false when text fits within container", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="300px" height="100px">
-          <Text id="normalText" value="Short text" />
-          <Button onClick="testState = normalText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns false for empty text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px" height="50px">
-          <Text id="emptyText" value="" />
-          <Button onClick="testState = emptyText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns false for text with no size constraints", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Text id="unconstrainedText" value="This text has no width or height constraints so it should not overflow" />
-        <Button onClick="testState = unconstrainedText.hasOverflow()" />
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with different overflow modes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <Text id="ellipsisText" overflowMode="ellipsis" maxLines="{1}" value="This is a very long text that should overflow" />
-          <Button onClick="testState = { ellipsis: ellipsisText.hasOverflow() }" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        const result = yield testStateDriver.testState();
-        (0, fixtures_1.expect)(result.ellipsis).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with scroll overflow mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <Text id="scrollText" overflowMode="scroll" value="This is a very long text that should create horizontal scroll" />
-          <Button onClick="testState = scrollText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow returns correct result after content changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment var.text="short">
-        <Stack width="100px">
-          <Text id="dynamicText" value="{text}" maxLines="{1}" />
-          <Button testId="checkBtn" onClick="testState = dynamicText.hasOverflow()" />
-          <Button testId="changeBtn" onClick="text = 'This is a very long text that will definitely overflow the container'" />
-        </Stack>
-      </Fragment>
-    `);
-        // Check initial state (should not overflow)
-        yield page.getByTestId("checkBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-        // Change content to overflow
-        yield page.getByTestId("changeBtn").click();
-        yield page.getByTestId("checkBtn").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow handles null/undefined values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <Text id="nullText" value="{null}" />
-          <Button onClick="testState = nullText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with unicode characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <Text id="unicodeText" maxLines="{1}" value="👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦" />
-          <Button onClick="testState = unicodeText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow works with Chinese characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="100px">
-          <Text id="chineseText" maxLines="{1}" value="这是一个非常长的中文文本，应该会在小容器中溢出显示区域超出边界限制" />
-          <Button onClick="testState = chineseText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasOverflow API can be called multiple times", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Stack width="200px">
-          <Text id="multiCallText" value="Test content" />
-          <Button onClick="testState = testState == null ? 1 : testState + 1; multiCallText.hasOverflow()" />
-        </Stack>
-      </Fragment>
-    `);
-        // Call API multiple times
-        yield page.getByRole("button").click();
-        yield page.getByRole("button").click();
-        yield page.getByRole("button").click();
-        // Should have been called 3 times without errors
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(3);
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("non-breaking space entities are rendered correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        const content = "4 spaces here [&nbsp;&nbsp;&nbsp;&nbsp;], &amp;nbsp; written out.";
-        const expected = "4 spaces here [    ], &nbsp; written out.";
-        yield initTestBed(`<Text>${content}</Text>`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(expected);
-    }));
-    (0, fixtures_1.test)("supports proper semantic HTML variants", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text variant="strong">Important text</Text>`);
-        const driver = yield createTextDriver();
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName).toEqual("strong");
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Important text");
-    }));
-    (0, fixtures_1.test)("maintains text content readability", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text>This is readable text content</Text>`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("This is readable text content");
-    }));
-});
-// =============================================================================
-// VISUAL STATES TESTS
-// =============================================================================
-fixtures_1.test.describe("Visual States", () => {
-    (0, fixtures_1.test)("handles text overflow with ellipses", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Text testId="textShort" width="200">Short</Text>
-        <Text testId="textLong" width="200" maxLines="1">
-          Though this long text does not fit into a single line, please do not break it!
-        </Text>
-      </Fragment>
-    `);
-        const shortTextDriver = yield createTextDriver("textShort");
-        const longTextDriver = yield createTextDriver("textLong");
-        const { height: heightTextShort } = yield (0, component_test_helpers_1.getBounds)(shortTextDriver);
-        const { height: heightTextLong } = yield (0, component_test_helpers_1.getBounds)(longTextDriver);
-        (0, fixtures_1.expect)(heightTextShort).toEqual(heightTextLong);
-        yield (0, fixtures_1.expect)(longTextDriver.component).toHaveCSS("text-overflow", "ellipsis");
-    }));
-    (0, fixtures_1.test)("disables ellipses when specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Text testId="textShort" width="200">Short</Text>
-        <Text testId="textLong" width="200" maxLines="1" ellipses="false">
-          Though this long text does not fit into a single line, please do not break it!
-        </Text>
-      </Fragment>
-    `);
-        const shortTextDriver = yield createTextDriver("textShort");
-        const longTextDriver = yield createTextDriver("textLong");
-        const { height: heightTextShort } = yield (0, component_test_helpers_1.getBounds)(shortTextDriver);
-        const { height: heightTextLong } = yield (0, component_test_helpers_1.getBounds)(longTextDriver);
-        (0, fixtures_1.expect)(heightTextShort).toEqual(heightTextLong);
-        yield (0, fixtures_1.expect)(longTextDriver.component).not.toHaveCSS("text-overflow", "ellipsis");
-    }));
-    (0, fixtures_1.test)("constrains text to maxLines", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="textShort" width="200px">Short</Text>
-        <Text testId="textLong" width="200px" maxLines="2">
-          Though this long text does not fit into a single line, please do not break it!
-        </Text>
-      </VStack>
-    `);
-        const shortText = yield createTextDriver("textShort");
-        const longText = yield createTextDriver("textLong");
-        const { height: heightTextShort } = yield (0, component_test_helpers_1.getBounds)(shortText);
-        const { height: heightTextLong } = yield (0, component_test_helpers_1.getBounds)(longText);
-        (0, fixtures_1.expect)(heightTextLong).toEqual(heightTextShort * 2);
-    }));
-    (0, fixtures_1.test)("breaks long text when constrained by width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="textShort" width="200px">Short</Text>
-        <Text testId="textLong" width="200px">
-          This long text does not fit into a viewport with a 200-pixel width.
-        </Text>
-      </VStack>
-    `);
-        const shortText = yield createTextDriver("textShort");
-        const longText = yield createTextDriver("textLong");
-        yield (0, fixtures_1.expect)(longText.component).toBeVisible();
-        const { height: heightTextShort } = yield (0, component_test_helpers_1.getBounds)(shortText);
-        const { height: heightTextLong } = yield (0, component_test_helpers_1.getBounds)(longText);
-        (0, fixtures_1.expect)(heightTextShort).toBeLessThan(heightTextLong);
-    }));
-    (0, fixtures_1.test)("text overflows container when explicitly sized larger", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createVStackDriver, createTextDriver, }) {
-        const widthLayoutExpected = 300;
-        const widthTextExpected = 400;
-        yield initTestBed(`
-      <VStack height="40px" width="${widthLayoutExpected}px" border="1px solid red">
-        <Text testId="text" width="${widthTextExpected}px">
-          This text sets its size explicitly bigger than its container.
-          As it does not fit into the container's viewport, it overflows.
-        </Text>
-      </VStack>
-    `);
-        const { width: widthLayout } = yield (0, component_test_helpers_1.getBounds)(yield createVStackDriver());
-        const { width: widthText } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("text"));
-        (0, fixtures_1.expect)(widthText).toEqual(widthTextExpected);
-        (0, fixtures_1.expect)(widthLayout).toEqual(widthLayoutExpected);
-    }));
-    (0, fixtures_1.test)("collapses nested text whitespace correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <Text>
-      test      content
-          here
-      </Text>
-    `);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("test content here");
-    }));
-});
-// =============================================================================
-// OVERFLOW MODE TESTS
-// =============================================================================
-fixtures_1.test.describe("Overflow Mode", () => {
-    (0, fixtures_1.test)('overflowMode="none" allows wrapping with no overflow indicator', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px" overflowMode="none">
-        This is a very long text that should wrap naturally and show no ellipsis.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("white-space", "nowrap");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("text-overflow", "clip");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow", "hidden");
-    }));
-    (0, fixtures_1.test)('overflowMode="none" ignores maxLines and clips text cleanly', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px" overflowMode="none" maxLines="2">
-        This is a long-long-long text that should be simply cut at the end without any ellipsis or other overflow indicator.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("white-space", "nowrap");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("text-overflow", "clip");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow", "hidden");
-        // Should NOT use webkit-line-clamp for "none" behavior - it ignores maxLines
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("-webkit-line-clamp", "none");
-        // Should not apply maxLines styles since none mode ignores maxLines
-        const maxHeight = yield driver.component.evaluate((el) => getComputedStyle(el).maxHeight);
-        (0, fixtures_1.expect)(maxHeight).toBe("none"); // Should be "none" since maxLines is ignored
-        // Verify the element is visible and has content
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("This is a long-long-long text");
-    }));
-    (0, fixtures_1.test)('overflowMode="ellipsis" shows ellipsis when text overflows (default)', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px" overflowMode="ellipsis" maxLines="1">
-        This is a very long text that should show ellipsis when it overflows.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("text-overflow", "ellipsis");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow", "hidden");
-    }));
-    (0, fixtures_1.test)('overflowMode="scroll" enables horizontal scrolling', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px" overflowMode="scroll">
-        This is a very long text that should enable horizontal scrolling when it overflows the container width.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("white-space", "nowrap");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-x", "auto");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-y", "hidden");
-    }));
-    (0, fixtures_1.test)('overflowMode="flow" allows multi-line wrapping with vertical scrolling', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px" height="60px" overflowMode="flow">
-        This is a very long text that should wrap to multiple lines and show a vertical scrollbar when the content exceeds the container height.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("white-space", "normal");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-x", "hidden");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-y", "auto");
-    }));
-    (0, fixtures_1.test)('overflowMode="flow" ignores maxLines property', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px" overflowMode="flow" maxLines="3">
-        This is a very long text that should wrap to multiple lines and completely ignore the maxLines property when using flow mode.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("white-space", "normal");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-y", "auto");
-        // Check that line-clamp is NOT applied when flow mode ignores maxLines
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("-webkit-line-clamp", "none");
-        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("display", "-webkit-box");
-    }));
-    (0, fixtures_1.test)("overflowMode works with maxLines", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="ellipsisText" width="200px" overflowMode="ellipsis" maxLines="2">
-          This is a very long text that should be limited to 2 lines with line-clamp and show ellipsis.
-        </Text>
-      </VStack>
-    `);
-        const ellipsisDriver = yield createTextDriver("ellipsisText");
-        // Ellipsis should respect maxLines with line-clamp
-        yield (0, fixtures_1.expect)(ellipsisDriver.component).toHaveCSS("-webkit-line-clamp", "2");
-        // Should show ellipsis behavior
-        yield (0, fixtures_1.expect)(ellipsisDriver.component).toHaveCSS("text-overflow", "ellipsis");
-    }));
-    (0, fixtures_1.test)("overflowMode='scroll' ignores maxLines", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="scrollWithMaxLines" width="150px" overflowMode="scroll" maxLines="2">
-          This is a very long text that should scroll horizontally and completely ignore the maxLines property.
-        </Text>
-        <Text testId="scrollWithoutMaxLines" width="150px" overflowMode="scroll">
-          This is a very long text that should scroll horizontally without any maxLines property.
-        </Text>
-      </VStack>
-    `);
-        const scrollWithMaxLinesDriver = yield createTextDriver("scrollWithMaxLines");
-        const scrollWithoutMaxLinesDriver = yield createTextDriver("scrollWithoutMaxLines");
-        // Both should have the same behavior - no line-clamp applied
-        yield (0, fixtures_1.expect)(scrollWithMaxLinesDriver.component).toHaveCSS("-webkit-line-clamp", "none");
-        yield (0, fixtures_1.expect)(scrollWithoutMaxLinesDriver.component).toHaveCSS("-webkit-line-clamp", "none");
-        // Both should have scroll behavior
-        yield (0, fixtures_1.expect)(scrollWithMaxLinesDriver.component).toHaveCSS("overflow-x", "auto");
-        yield (0, fixtures_1.expect)(scrollWithoutMaxLinesDriver.component).toHaveCSS("overflow-x", "auto");
-        yield (0, fixtures_1.expect)(scrollWithMaxLinesDriver.component).toHaveCSS("white-space", "nowrap");
-        yield (0, fixtures_1.expect)(scrollWithoutMaxLinesDriver.component).toHaveCSS("white-space", "nowrap");
-        // Neither should use text-overflow ellipsis
-        yield (0, fixtures_1.expect)(scrollWithMaxLinesDriver.component).toHaveCSS("text-overflow", "clip");
-        yield (0, fixtures_1.expect)(scrollWithoutMaxLinesDriver.component).toHaveCSS("text-overflow", "clip");
-    }));
-    (0, fixtures_1.test)("overflowMode='flow' ignores maxLines for unrestricted wrapping", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="flowWithMaxLines" width="150px" overflowMode="flow" maxLines="2">
-          This is a very long text that should wrap to multiple lines and completely ignore the maxLines property when using flow mode.
-        </Text>
-        <Text testId="flowWithoutMaxLines" width="150px" overflowMode="flow">
-          This is a very long text that should wrap to multiple lines without any line limit when using flow mode.
-        </Text>
-      </VStack>
-    `);
-        const flowWithMaxLinesDriver = yield createTextDriver("flowWithMaxLines");
-        const flowWithoutMaxLinesDriver = yield createTextDriver("flowWithoutMaxLines");
-        // Both should behave identically - flow mode ignores maxLines
-        yield (0, fixtures_1.expect)(flowWithMaxLinesDriver.component).toHaveCSS("-webkit-line-clamp", "none");
-        yield (0, fixtures_1.expect)(flowWithoutMaxLinesDriver.component).toHaveCSS("-webkit-line-clamp", "none");
-        // Both should have flow behavior
-        yield (0, fixtures_1.expect)(flowWithMaxLinesDriver.component).toHaveCSS("overflow-y", "auto");
-        yield (0, fixtures_1.expect)(flowWithoutMaxLinesDriver.component).toHaveCSS("overflow-y", "auto");
-        yield (0, fixtures_1.expect)(flowWithMaxLinesDriver.component).toHaveCSS("overflow-x", "hidden");
-        yield (0, fixtures_1.expect)(flowWithoutMaxLinesDriver.component).toHaveCSS("overflow-x", "hidden");
-        yield (0, fixtures_1.expect)(flowWithMaxLinesDriver.component).toHaveCSS("white-space", "normal");
-        yield (0, fixtures_1.expect)(flowWithoutMaxLinesDriver.component).toHaveCSS("white-space", "normal");
-        // Neither should use webkit-box display
-        yield (0, fixtures_1.expect)(flowWithMaxLinesDriver.component).not.toHaveCSS("display", "-webkit-box");
-        yield (0, fixtures_1.expect)(flowWithoutMaxLinesDriver.component).not.toHaveCSS("display", "-webkit-box");
-    }));
-    (0, fixtures_1.test)("overflowMode respects ellipses property for ellipsis behavior", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="withEllipses" width="200px" overflowMode="ellipsis" ellipses="true" maxLines="1">
-          This text should show ellipses.
-        </Text>
-        <Text testId="withoutEllipses" width="200px" overflowMode="ellipsis" ellipses="false" maxLines="1">
-          This text should not show ellipses.
-        </Text>
-      </VStack>
-    `);
-        const withEllipsesDriver = yield createTextDriver("withEllipses");
-        const withoutEllipsesDriver = yield createTextDriver("withoutEllipses");
-        yield (0, fixtures_1.expect)(withEllipsesDriver.component).toHaveCSS("text-overflow", "ellipsis");
-        yield (0, fixtures_1.expect)(withoutEllipsesDriver.component).toHaveCSS("text-overflow", "clip");
-    }));
-    (0, fixtures_1.test)('overflowMode="ellipsis" works with multi-line text (maxLines > 1)', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="singleLine" width="150px" overflowMode="ellipsis" maxLines="1">
-          This is a very long text that should be truncated to a single line with ellipsis.
-        </Text>
-        <Text testId="multiLine" width="150px" overflowMode="ellipsis" maxLines="2">
-          This is a very long text that should wrap to exactly two lines and then be truncated with ellipsis if there's more content that doesn't fit.
-        </Text>
-      </VStack>
-    `);
-        const singleLineDriver = yield createTextDriver("singleLine");
-        const multiLineDriver = yield createTextDriver("multiLine");
-        // Both should have ellipsis behavior
-        yield (0, fixtures_1.expect)(singleLineDriver.component).toHaveCSS("text-overflow", "ellipsis");
-        yield (0, fixtures_1.expect)(multiLineDriver.component).toHaveCSS("text-overflow", "ellipsis");
-        // Single line should use nowrap
-        yield (0, fixtures_1.expect)(singleLineDriver.component).toHaveCSS("white-space", "nowrap");
-        // Multi-line should have line-clamp applied
-        yield (0, fixtures_1.expect)(multiLineDriver.component).toHaveCSS("-webkit-line-clamp", "2");
-        // Verify heights: multi-line should be approximately 2x single line height
-        const { height: heightSingle } = yield (0, component_test_helpers_1.getBounds)(singleLineDriver);
-        const { height: heightMulti } = yield (0, component_test_helpers_1.getBounds)(multiLineDriver);
-        // Multi-line should be taller than single line
-        (0, fixtures_1.expect)(heightMulti).toBeGreaterThan(heightSingle);
-        // And should be roughly 2x the height (allowing for some tolerance)
-        (0, fixtures_1.expect)(heightMulti).toBeGreaterThan(heightSingle * 1.5);
-        (0, fixtures_1.expect)(heightMulti).toBeLessThan(heightSingle * 2.5);
-    }));
-});
-// =============================================================================
-// BREAK MODE TESTS
-// =============================================================================
-fixtures_1.test.describe("Break Mode", () => {
-    (0, fixtures_1.test)('breakMode="normal" uses standard word boundaries', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="150px" breakMode="normal">
-        This is a verylongwordthatshouldbreakatwordboundaries normally.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("word-break", "normal");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-wrap", "normal");
-    }));
-    (0, fixtures_1.test)('breakMode="word" breaks long words to prevent overflow', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="150px" breakMode="word">
-        This is a verylongwordthatexceedsthecontainerwidthandshouldbreak.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-wrap", "break-word");
-    }));
-    (0, fixtures_1.test)('breakMode="anywhere" breaks at any character', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="100px" breakMode="anywhere">
-        Verylongwordwithnobreaks
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        // Should have word-break: break-all or overflow-wrap: anywhere
-        const wordBreak = yield driver.component.evaluate((el) => getComputedStyle(el).wordBreak);
-        const overflowWrap = yield driver.component.evaluate((el) => getComputedStyle(el).overflowWrap);
-        (0, fixtures_1.expect)(wordBreak === "break-all" || overflowWrap === "anywhere").toBe(true);
-    }));
-    (0, fixtures_1.test)('breakMode="keep" prevents breaking within words', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="100px" breakMode="keep">
-        This text should keep words intact
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("word-break", "keep-all");
-    }));
-    (0, fixtures_1.test)('breakMode="hyphenate" uses automatic hyphenation', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="150px" breakMode="hyphenate" lang="en">
-        This is a supercalifragilisticexpialidocious word that should be hyphenated.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("hyphens", "auto");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("overflow-wrap", "break-word");
-    }));
-    (0, fixtures_1.test)("breakMode works with different overflow modes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="ellipsisWord" width="150px" overflowMode="ellipsis" breakMode="word" maxLines="1">
-          This superlongwordwithoutbreaks should be handled properly.
-        </Text>
-        <Text testId="scrollAnywhere" width="150px" overflowMode="scroll" breakMode="anywhere">
-          This verylongwordwithoutanybreaks should break anywhere and scroll.
-        </Text>
-      </VStack>
-    `);
-        const ellipsisDriver = yield createTextDriver("ellipsisWord");
-        const scrollDriver = yield createTextDriver("scrollAnywhere");
-        // Check overflow mode styles
-        yield (0, fixtures_1.expect)(ellipsisDriver.component).toHaveCSS("text-overflow", "ellipsis");
-        yield (0, fixtures_1.expect)(scrollDriver.component).toHaveCSS("overflow-x", "auto");
-        // Check break mode styles
-        yield (0, fixtures_1.expect)(ellipsisDriver.component).toHaveCSS("overflow-wrap", "break-word");
-        const scrollWordBreak = yield scrollDriver.component.evaluate((el) => getComputedStyle(el).wordBreak);
-        const scrollOverflowWrap = yield scrollDriver.component.evaluate((el) => getComputedStyle(el).overflowWrap);
-        (0, fixtures_1.expect)(scrollWordBreak === "break-all" || scrollOverflowWrap === "anywhere").toBe(true);
-    }));
-    (0, fixtures_1.test)("default breakMode allows theme variables to work", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Text testId="text" width="200px">
-        This text should use the default browser behavior and allow theme variables to override.
-      </Text>
-    `);
-        const driver = yield createTextDriver("text");
-        // Should not have any break mode classes when no breakMode is specified
-        const className = yield driver.component.getAttribute("class");
-        (0, fixtures_1.expect)(className).not.toContain("breakWord");
-        (0, fixtures_1.expect)(className).not.toContain("breakAnywhere");
-        (0, fixtures_1.expect)(className).not.toContain("breakKeep");
-        (0, fixtures_1.expect)(className).not.toContain("breakHyphenate");
-    }));
-});
-// =============================================================================
-// EDGE CASES TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    [
-        { label: "empty object", value: "'{{}}'", toExpected: {}.toString() },
-        { label: "object", value: "\"{{ a: 1, b: 'hi' }}\"", toExpected: { a: 1, b: "hi" }.toString() },
-        { label: "empty array", value: "'{[]}'", toExpected: "" },
-        { label: "array", value: "'{[1, 2, 3]}'", toExpected: [1, 2, 3].toString() },
-    ].forEach(({ label, value, toExpected }) => {
-        (0, fixtures_1.test)(`handles ${label} value prop gracefully`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-            yield initTestBed(`<Text value=${value} />`);
-            const driver = yield createTextDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveText(toExpected);
-        }));
-    });
-    (0, fixtures_1.test)("handles extremely long text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const longText = "Very long text content ".repeat(1000);
-        yield initTestBed(`<Text value="${longText}" />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Very long text content");
-    }));
-    (0, fixtures_1.test)("handles special characters and symbols", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const specialText = "Special chars: !@#$%^&*()[]|\\:;'<>?,./ αβγδε 中文 🚀✨";
-        yield initTestBed(`<Text value="${specialText}" />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(specialText);
-    }));
-    (0, fixtures_1.test)("handles mixed content types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text>Mixed content: {123} {"string"} {true}</Text>`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Mixed content:");
-    }));
-    (0, fixtures_1.test)("nested Texts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Text>abc<Text>def</Text>ghi</Text>`);
-        // Check if the page displays the combined text "abcdefghi"
-        yield (0, fixtures_1.expect)(page.locator("body")).toContainText("abcdefghi");
-    }));
-});
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-fixtures_1.test.describe("Performance", () => {
-    (0, fixtures_1.test)("renders multiple text components efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        const textElements = Array.from({ length: 100 }, (_, i) => `<Text testId="text-${i}">Text content ${i}</Text>`).join("");
-        yield initTestBed(`<VStack>${textElements}</VStack>`);
-        // Test a few random elements to ensure they render correctly
-        const driver1 = yield createTextDriver("text-0");
-        const driver50 = yield createTextDriver("text-49");
-        const driver100 = yield createTextDriver("text-99");
-        yield (0, fixtures_1.expect)(driver1.component).toHaveText("Text content 0");
-        yield (0, fixtures_1.expect)(driver50.component).toHaveText("Text content 49");
-        yield (0, fixtures_1.expect)(driver100.component).toHaveText("Text content 99");
-    }));
-    (0, fixtures_1.test)("handles rapid text content changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text value="Initial content" />`);
-        const driver = yield createTextDriver();
-        const textValues = ["Content 1", "Content 2", "Content 3", "Content 4", "Content 5"];
-        for (const value of textValues) {
-            yield initTestBed(`<Text value="${value}" />`);
-            yield (0, fixtures_1.expect)(driver.component).toHaveText(value);
-        }
-    }));
-    (0, fixtures_1.test)("maintains performance with complex theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed('<Text value="Performance test" />', {
-            testThemeVars: {
-                "textColor-Text": "rgb(255, 0, 0)",
-                "fontSize-Text": "16px",
-                "fontWeight-Text": "bold",
-                "lineHeight-Text": "1.5",
-                "textShadow-Text": "1px 1px 2px rgba(0,0,0,0.5)",
-            },
-        });
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Performance test");
-    }));
-});
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("renders implicit text in other components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createStackDriver }) {
-        const expected = "test content";
-        yield initTestBed(`<Stack>${expected}</Stack>`);
-        const driver = yield createStackDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText(expected);
-    }));
-    (0, fixtures_1.test)("maintains inline behavior in HStack layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, createIconDriver, }) {
-        yield initTestBed(`
-      <HStack>
-        <Text testId="text0" >Show me a trash</Text>
-        <Icon testId="icon0"  name="trash"/>
-        <Text testId="text1" >icon!</Text>
-      </HStack>
-    `);
-        const { top: topText0 } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("text0"));
-        const { top: topIcon0 } = yield (0, component_test_helpers_1.getBounds)(yield createIconDriver("icon0"));
-        const { top: topText1 } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("text1"));
-        (0, fixtures_1.expect)(topText0).toEqual(topIcon0);
-        (0, fixtures_1.expect)(topIcon0).toEqual(topText1);
-    }));
-    (0, fixtures_1.test)("maintains block behavior in VStack layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, createIconDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <Text testId="text0" >Show me a trash</Text>
-        <Icon testId="icon0"  name="trash"/>
-        <Text testId="text1" >icon!</Text>
-      </VStack>
-    `);
-        const { top: topText0 } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("text0"));
-        const { top: topIcon0 } = yield (0, component_test_helpers_1.getBounds)((yield createIconDriver("icon0")).svgIcon);
-        const { top: topText1 } = yield (0, component_test_helpers_1.getBounds)(yield createTextDriver("text1"));
-        (0, fixtures_1.expect)(topText0).toBeLessThan(topIcon0);
-        (0, fixtures_1.expect)(topIcon0).toBeLessThan(topText1);
-    }));
-    (0, fixtures_1.test)("integrates with complex component hierarchies", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <VStack>
-        <HStack>
-          <Text testId="header">Header Text</Text>
-        </HStack>
-        <Text testId="content">Main content text with longer description</Text>
-        <HStack>
-          <Text testId="footer1">Footer</Text>
-          <Text testId="footer2">Text</Text>
-        </HStack>
-      </VStack>
-    `);
-        const headerDriver = yield createTextDriver("header");
-        const contentDriver = yield createTextDriver("content");
-        const footer1Driver = yield createTextDriver("footer1");
-        const footer2Driver = yield createTextDriver("footer2");
-        yield (0, fixtures_1.expect)(headerDriver.component).toHaveText("Header Text");
-        yield (0, fixtures_1.expect)(contentDriver.component).toHaveText("Main content text with longer description");
-        yield (0, fixtures_1.expect)(footer1Driver.component).toHaveText("Footer");
-        yield (0, fixtures_1.expect)(footer2Driver.component).toHaveText("Text");
-    }));
-    (0, fixtures_1.test)("works correctly with dynamic content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text value="{123 + 456}" />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("579");
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("textColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "rgb(255, 0, 0)";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textColor-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("color", EXPECTED);
-    }));
-    (0, fixtures_1.test)("fontFamily theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "sans-serif";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "fontFamily-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", EXPECTED);
-    }));
-    (0, fixtures_1.test)("fontSize theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "48px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "fontSize-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", EXPECTED);
-    }));
-    (0, fixtures_1.test)("fontStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "italic";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "fontStyle-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", EXPECTED);
-    }));
-    (0, fixtures_1.test)("fontWeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "900";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "fontWeight-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", EXPECTED);
-    }));
-    (0, fixtures_1.test)("fontStretch theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "125%";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "fontStretch-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-stretch", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textDecorationLine theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "underline";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textDecorationLine-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-line", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textDecorationColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "rgb(255, 0, 0)";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textDecorationColor-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-color", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textDecorationStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "dotted";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textDecorationStyle-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-style", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textDecorationThickness theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "12px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textDecorationThickness-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-thickness", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textUnderlineOffset theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "12px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textUnderlineOffset-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-underline-offset", EXPECTED);
-    }));
-    (0, fixtures_1.test)("lineHeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "24px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "lineHeight-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("line-height", EXPECTED);
-    }));
-    (0, fixtures_1.test)("backgroundColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "rgb(255, 0, 0)";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "backgroundColor-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textTransform theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "uppercase";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textTransform-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-transform", EXPECTED);
-    }));
-    (0, fixtures_1.test)("letterSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "12px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "letterSpacing-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("letter-spacing", EXPECTED);
-    }));
-    (0, fixtures_1.test)("wordSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "12px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "wordSpacing-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("word-spacing", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textShadow theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "rgba(0, 0, 0, 0.5) 2px 2px 2px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textShadow-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-shadow", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textIndent theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "12px";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textIndent-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-indent", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textAlign theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "center";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textAlign-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-align", EXPECTED);
-    }));
-    (0, fixtures_1.test)("textAlignLast theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "center";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "textAlignLast-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-align-last", EXPECTED);
-    }));
-    (0, fixtures_1.test)("wordBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "normal";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "wordBreak-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("word-break", EXPECTED);
-    }));
-    (0, fixtures_1.test)("direction theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "rtl";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "direction-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("direction", EXPECTED);
-    }));
-    (0, fixtures_1.test)("writingMode theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "vertical-rl";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "writingMode-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("writing-mode", EXPECTED);
-    }));
-    (0, fixtures_1.test)("lineBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        const EXPECTED = "normal";
-        yield initTestBed('<Text value="Hello, World" />', {
-            testThemeVars: {
-                "lineBreak-Text": EXPECTED,
-            },
-        });
-        const component = (yield createTextDriver()).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("line-break", EXPECTED);
-    }));
-    // =============================================================================
-    // PREDEFINED VARIANT TESTS
-    // =============================================================================
-    (0, fixtures_1.test)("variant='secondary' applies secondary theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
-        yield initTestBed(`
-      <Theme fontSize-Text-secondary="14px" textColor-Text-secondary="rgb(100, 100, 100)">
-        <Text variant="secondary" testId="text">Secondary text</Text>
-      </Theme>
-    `);
-        const component = (yield createTextDriver("text")).component;
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("color", "rgb(100, 100, 100)");
-    }));
-    (0, fixtures_1.test)("variant='abbr' applies abbreviation theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontWeight-Text-abbr="700" textTransform-Text-abbr="uppercase">
-        <Text variant="abbr" testId="text">HTML</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-transform", "uppercase");
-    }));
-    (0, fixtures_1.test)("variant='cite' applies citation theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontStyle-Text-cite="italic">
-        <Text variant="cite" testId="text">Citation</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", "italic");
-    }));
-    (0, fixtures_1.test)("variant='code' applies inline code theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme 
-        fontFamily-Text-code="monospace"
-        fontSize-Text-code="14px"
-        borderWidth-Text-code="1px"
-        borderStyle-Text-code="solid"
-        borderRadius-Text-code="4px"
-        paddingHorizontal-Text-code="4px"
-        paddingBottom-Text-code="2px"
-        backgroundColor-Text-code="rgb(240, 240, 240)"
-        borderColor-Text-code="rgb(200, 200, 200)"
-      >
-        <Text variant="code" testId="text">code</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-width", "1px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-style", "solid");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-radius", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", "2px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", "rgb(240, 240, 240)");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-color", "rgb(200, 200, 200)");
-    }));
-    (0, fixtures_1.test)("variant='deleted' applies deleted text theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme textDecorationLine-Text-deleted="line-through">
-        <Text variant="deleted" testId="text">Deleted text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-line", "line-through");
-    }));
-    (0, fixtures_1.test)("variant='inserted' applies inserted text theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Theme textDecorationLine-Text-inserted="underline">
-        <Text variant="inserted" testId="text">Inserted text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-line", "underline");
-    }));
-    (0, fixtures_1.test)("variant='keyboard' applies keyboard theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme 
-        fontFamily-Text-keyboard="monospace"
-        fontSize-Text-keyboard="14px"
-        fontWeight-Text-keyboard="700"
-        borderWidth-Text-keyboard="1px"
-        paddingHorizontal-Text-keyboard="4px"
-        backgroundColor-Text-keyboard="rgb(245, 245, 245)"
-        borderColor-Text-keyboard="rgb(180, 180, 180)"
-      >
-        <Text variant="keyboard" testId="text">Ctrl+C</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-width", "1px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", "rgb(245, 245, 245)");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("border-color", "rgb(180, 180, 180)");
-    }));
-    (0, fixtures_1.test)("variant='sample' applies sample theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme 
-        fontFamily-Text-sample="monospace"
-        fontSize-Text-sample="14px"
-      >
-        <Text variant="sample" testId="text">Sample output</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
-    }));
-    (0, fixtures_1.test)("variant='sup' applies superscript theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme 
-        fontSize-Text-sup="12px"
-        verticalAlignment-Text-sup="super"
-      >
-        <Text variant="sup" testId="text">2</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "12px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("vertical-align", "super");
-    }));
-    (0, fixtures_1.test)("variant='sub' applies subscript theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme 
-        fontSize-Text-sub="12px"
-        verticalAlignment-Text-sub="sub"
-      >
-        <Text variant="sub" testId="text">2</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "12px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("vertical-align", "sub");
-    }));
-    (0, fixtures_1.test)("variant='var' applies variable theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontStyle-Text-var="italic">
-        <Text variant="var" testId="text">variable</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", "italic");
-    }));
-    (0, fixtures_1.test)("variant='em' applies emphasis theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontStyle-Text-em="italic">
-        <Text variant="em" testId="text">Emphasized</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", "italic");
-    }));
-    (0, fixtures_1.test)("variant='mono' applies monospace theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontFamily-Text-mono="monospace">
-        <Text variant="mono" testId="text">Monospace text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
-    }));
-    (0, fixtures_1.test)("variant='title' applies title theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontSize-Text-title="32px">
-        <Text variant="title" testId="text">Main Title</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "32px");
-    }));
-    (0, fixtures_1.test)("variant='subtitle' applies subtitle theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontSize-Text-subtitle="24px">
-        <Text variant="subtitle" testId="text">Subtitle</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "24px");
-    }));
-    (0, fixtures_1.test)("variant='small' applies small text theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontSize-Text-small="14px">
-        <Text variant="small" testId="text">Small text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
-    }));
-    (0, fixtures_1.test)("variant='caption' applies caption theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme letterSpacing-Text-caption="0.8px">
-        <Text variant="caption" testId="text">Caption text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("letter-spacing", "0.8px");
-    }));
-    (0, fixtures_1.test)("variant='placeholder' applies placeholder theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Theme 
-        fontSize-Text-placeholder="12px"
-        textColor-Text-placeholder="rgb(150, 150, 150)"
-      >
-        <Text variant="placeholder" testId="text">Placeholder text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "12px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("color", "rgb(150, 150, 150)");
-    }));
-    (0, fixtures_1.test)("variant='paragraph' applies paragraph theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme paddingVertical-Text-paragraph="4px">
-        <Text variant="paragraph" testId="text">Paragraph text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", "4px");
-    }));
-    (0, fixtures_1.test)("variant='subheading' applies subheading theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme 
-        fontSize-Text-subheading="18px"
-        fontWeight-Text-subheading="700"
-        letterSpacing-Text-subheading="0.8px"
-        textTransform-Text-subheading="uppercase"
-        textColor-Text-subheading="rgb(80, 80, 80)"
-      >
-        <Text variant="subheading" testId="text">Subheading</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "18px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("letter-spacing", "0.8px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("text-transform", "uppercase");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("color", "rgb(80, 80, 80)");
-    }));
-    (0, fixtures_1.test)("variant='tableheading' applies table heading theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <Theme 
-        marginTop-Text-tableheading="4px"
-        marginBottom-Text-tableheading="16px"
-        paddingHorizontal-Text-tableheading="4px"
-        fontSize-Text-tableheading="18px"
-        fontWeight-Text-tableheading="700"
-      >
-        <Text variant="tableheading" testId="text">Table Header</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("margin-top", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("margin-bottom", "16px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", "4px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "18px");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
-    }));
-    (0, fixtures_1.test)("variant='strong' applies strong theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme fontWeight-Text-strong="700">
-        <Text variant="strong" testId="text">Strong text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
-    }));
-    (0, fixtures_1.test)("variant='marked' applies marked theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Theme backgroundColor-Text-marked="rgb(255, 255, 0)">
-        <Text variant="marked" testId="text">Highlighted text</Text>
-      </Theme>
-    `);
-        const component = page.getByTestId("text");
-        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", "rgb(255, 255, 0)");
-    }));
-});
-// =============================================================================
-// CUSTOM VARIANT TESTS
-// =============================================================================
-fixtures_1.test.describe("Custom Variants", () => {
-    (0, fixtures_1.test)("custom variant textColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "rgb(255, 0, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme textColor-Text-customRed="${EXPECTED}">
-          <Text variant="customRed" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("color", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant fontFamily theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "monospace";
-        yield initTestBed(`
-      <App>
-        <Theme fontFamily-Text-customMono="${EXPECTED}">
-          <Text variant="customMono" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-family", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant fontSize theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "24px";
-        yield initTestBed(`
-      <App>
-        <Theme fontSize-Text-customLarge="${EXPECTED}">
-          <Text variant="customLarge" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-size", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant fontStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "italic";
-        yield initTestBed(`
-      <App>
-        <Theme fontStyle-Text-customItalic="${EXPECTED}">
-          <Text variant="customItalic" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-style", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant fontWeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "700";
-        yield initTestBed(`
-      <App>
-        <Theme fontWeight-Text-customBold="bold">
-          <Text variant="customBold" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-weight", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant fontStretch theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "125%";
-        yield initTestBed(`
-      <App>
-        <Theme fontStretch-Text-customExpanded="expanded">
-          <Text variant="customExpanded" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-stretch", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textDecorationLine theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "underline";
-        yield initTestBed(`
-      <App>
-        <Theme textDecorationLine-Text-customUnderline="${EXPECTED}">
-          <Text variant="customUnderline" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-line", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textDecorationColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "rgb(255, 0, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme 
-          textDecorationLine-Text-customDeco="underline"
-          textDecorationColor-Text-customDeco="${EXPECTED}"
-        >
-          <Text variant="customDeco" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-color", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textDecorationStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "wavy";
-        yield initTestBed(`
-      <App>
-        <Theme 
-          textDecorationLine-Text-customWavy="underline"
-          textDecorationStyle-Text-customWavy="${EXPECTED}"
-        >
-          <Text variant="customWavy" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-style", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textDecorationThickness theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "3px";
-        yield initTestBed(`
-      <App>
-        <Theme 
-          textDecorationLine-Text-customThick="underline"
-          textDecorationThickness-Text-customThick="${EXPECTED}"
-        >
-          <Text variant="customThick" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-thickness", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textUnderlineOffset theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "5px";
-        yield initTestBed(`
-      <App>
-        <Theme 
-          textDecorationLine-Text-customOffset="underline"
-          textUnderlineOffset-Text-customOffset="${EXPECTED}"
-        >
-          <Text variant="customOffset" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-underline-offset", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant lineHeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "32px";
-        yield initTestBed(`
-      <App>
-        <Theme lineHeight-Text-customLineHeight="${EXPECTED}">
-          <Text variant="customLineHeight" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("line-height", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant backgroundColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "rgb(255, 255, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Text-customBg="${EXPECTED}">
-          <Text variant="customBg" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("background-color", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textTransform theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "uppercase";
-        yield initTestBed(`
-      <App>
-        <Theme textTransform-Text-customUpper="${EXPECTED}">
-          <Text variant="customUpper" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-transform", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant letterSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "5px";
-        yield initTestBed(`
-      <App>
-        <Theme letterSpacing-Text-customSpaced="${EXPECTED}">
-          <Text variant="customSpaced" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("letter-spacing", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant wordSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "10px";
-        yield initTestBed(`
-      <App>
-        <Theme wordSpacing-Text-customWordSpace="${EXPECTED}">
-          <Text variant="customWordSpace" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-spacing", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textShadow theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "rgb(255, 0, 0) 2px 2px 4px";
-        yield initTestBed(`
-      <App>
-        <Theme textShadow-Text-customShadow="${EXPECTED}">
-          <Text variant="customShadow" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-shadow", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textIndent theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "20px";
-        yield initTestBed(`
-      <App>
-        <Theme textIndent-Text-customIndent="${EXPECTED}">
-          <Text variant="customIndent" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-indent", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textAlign theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "center";
-        yield initTestBed(`
-      <App>
-        <Theme textAlign-Text-customCenter="${EXPECTED}">
-          <Text variant="customCenter" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-align", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant textAlignLast theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "right";
-        yield initTestBed(`
-      <App>
-        <Theme textAlignLast-Text-customAlignLast="${EXPECTED}">
-          <Text variant="customAlignLast" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-align-last", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant wordBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "break-all";
-        yield initTestBed(`
-      <App>
-        <Theme wordBreak-Text-customBreak="${EXPECTED}">
-          <Text variant="customBreak" breakMode="'{undefined}'" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-break", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant wordWrap theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "break-word";
-        yield initTestBed(`
-      <App>
-        <Theme wordWrap-Text-customWrap="${EXPECTED}">
-          <Text variant="customWrap" breakMode="'{undefined}'" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-wrap", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant direction theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "rtl";
-        yield initTestBed(`
-      <App>
-        <Theme direction-Text-customRtl="${EXPECTED}">
-          <Text variant="customRtl" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("direction", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant writingMode theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "vertical-rl";
-        yield initTestBed(`
-      <App>
-        <Theme writingMode-Text-customVertical="${EXPECTED}">
-          <Text variant="customVertical" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("writing-mode", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant lineBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED = "strict";
-        yield initTestBed(`
-      <App>
-        <Theme lineBreak-Text-customLineBreak="${EXPECTED}">
-          <Text variant="customLineBreak" testId="text">Hello Custom!</Text>
-        </Theme>
-      </App>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("line-break", EXPECTED);
-    }));
-    (0, fixtures_1.test)("custom variant with multiple theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <Theme 
-          textColor-Text-pinkElephant="rgb(255, 192, 203)" 
-          fontWeight-Text-pinkElephant="bold"
-          textColor-Text-greenDog="rgb(0, 128, 0)" 
-          fontStyle-Text-greenDog="italic"
-        >
-          <Text variant="pinkElephant" testId="pink">
-            Hello Pink Elephant!
-          </Text>
-          <Text variant="greenDog" testId="green">
-            Hello Green Dog!
-          </Text>
-        </Theme>
-      </App>
-    `);
-        const pinkText = page.getByTestId("pink");
-        const greenText = page.getByTestId("green");
-        yield (0, fixtures_1.expect)(pinkText).toHaveCSS("color", "rgb(255, 192, 203)");
-        yield (0, fixtures_1.expect)(pinkText).toHaveCSS("font-weight", "700");
-        yield (0, fixtures_1.expect)(greenText).toHaveCSS("color", "rgb(0, 128, 0)");
-        yield (0, fixtures_1.expect)(greenText).toHaveCSS("font-style", "italic");
-    }));
-});
-// =============================================================================
-// SMOKE TESTS (kept for compatibility)
-// =============================================================================
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("basic smoke test", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver }) {
-        yield initTestBed(`<Text value="Smoke test" />`);
-        const driver = yield createTextDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("Smoke test");
-    }));
-});