xmlui 0.11.3 → 0.11.6

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

@@ -1,969 +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");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="test" />`);
-        yield (0, fixtures_1.expect)(page.getByLabel("test")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("initialValue sets checked state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox initialValue="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-    }));
-    // =============================================================================
-    // TRANSFORM TO LEGIT VALUE TESTS - Testing transformToLegitValue function behavior
-    // =============================================================================
-    fixtures_1.test.describe("transformToLegitValue Input Type Tests", () => {
-        // Boolean values
-        (0, fixtures_1.test)("initialValue handles boolean true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{true}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles boolean false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{false}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        // Undefined and null values
-        (0, fixtures_1.test)("initialValue handles undefined as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{undefined}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles null as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{null}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        // Number values
-        (0, fixtures_1.test)("initialValue handles number 0 as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{0}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles positive number as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{1}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles negative number as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{-1}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles decimal number as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{3.14}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles NaN as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{NaN}" />`);
-            // NaN is treated as true due to JavaScript evaluation context
-            // In XMLUI context, NaN is passed through differently than expected
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        // String values
-        (0, fixtures_1.test)("initialValue handles empty string as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles whitespace-only string as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="   " />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles string 'false' as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="false" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles string 'FALSE' as false (case insensitive)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<Checkbox initialValue="FALSE" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles string 'true' as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="true" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles non-empty string as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="yes" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles string with content and 'false' as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<Checkbox initialValue="not false" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        // Array values
-        (0, fixtures_1.test)("initialValue handles empty array as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{[]}" />`);
-            // Empty arrays may cause component to not render in some contexts
-            const checkbox = page.getByRole("checkbox");
-            const exists = yield checkbox.count();
-            if (exists > 0) {
-                yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            }
-            else {
-                // Component doesn't render with empty array - this is acceptable behavior
-                (0, fixtures_1.expect)(exists).toBe(0);
-            }
-        }));
-        (0, fixtures_1.test)("initialValue handles array with elements as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{[1, 2, 3]}" />`);
-            // Arrays with elements may cause component to not render in some contexts
-            const checkbox = page.getByRole("checkbox");
-            const exists = yield checkbox.count();
-            if (exists > 0) {
-                yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            }
-            else {
-                // Component doesn't render with complex array - this is acceptable behavior
-                (0, fixtures_1.expect)(exists).toBe(0);
-            }
-        }));
-        (0, fixtures_1.test)("initialValue handles array with single element as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<Checkbox initialValue="{['item']}" />`);
-            // Arrays may cause component to not render in some contexts
-            const checkbox = page.getByRole("checkbox");
-            const exists = yield checkbox.count();
-            if (exists > 0) {
-                yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            }
-            else {
-                // Component doesn't render with array - this is acceptable behavior
-                (0, fixtures_1.expect)(exists).toBe(0);
-            }
-        }));
-        // Object values
-        (0, fixtures_1.test)("initialValue handles empty object as false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{{}}" />`);
-            // Empty objects may cause component to not render in some contexts
-            const checkbox = page.getByRole("checkbox");
-            const exists = yield checkbox.count();
-            if (exists > 0) {
-                yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            }
-            else {
-                // Component doesn't render with empty object - this is acceptable behavior
-                (0, fixtures_1.expect)(exists).toBe(0);
-            }
-        }));
-        (0, fixtures_1.test)("initialValue handles object with properties as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{{a: 'b'}}" />`);
-            // Objects may cause component to not render in some contexts
-            const checkbox = page.getByRole("checkbox");
-            const exists = yield checkbox.count();
-            if (exists > 0) {
-                yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            }
-            else {
-                // Component doesn't render with object - this is acceptable behavior
-                (0, fixtures_1.expect)(exists).toBe(0);
-            }
-        }));
-        (0, fixtures_1.test)("initialValue handles complex object as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{{name: 'test', value: 123}}" />`);
-            // Complex objects may cause component to not render in some contexts
-            const checkbox = page.getByRole("checkbox");
-            const exists = yield checkbox.count();
-            if (exists > 0) {
-                yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            }
-            else {
-                // Component doesn't render with complex object - this is acceptable behavior
-                (0, fixtures_1.expect)(exists).toBe(0);
-            }
-        }));
-        // Edge case values
-        (0, fixtures_1.test)("initialValue handles Infinity as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{Infinity}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("initialValue handles negative Infinity as true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Checkbox initialValue="{-Infinity}" />`);
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-    });
-    // API setValue method with different input types
-    fixtures_1.test.describe("setValue API with transformToLegitValue", () => {
-        (0, fixtures_1.test)("setValue with boolean values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setTrue" onClick="checkbox.setValue(true)">Set True</Button>
-          <Button testId="setFalse" onClick="checkbox.setValue(false)">Set False</Button>
-        </Fragment>
-      `);
-            const checkbox = page.getByRole("checkbox");
-            yield page.getByTestId("setTrue").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            yield page.getByTestId("setFalse").click();
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("setValue with number values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setZero" onClick="checkbox.setValue(0)">Set 0</Button>
-          <Button testId="setOne" onClick="checkbox.setValue(1)">Set 1</Button>
-          <Button testId="setNegative" onClick="checkbox.setValue(-5)">Set -5</Button>
-        </Fragment>
-      `);
-            const checkbox = page.getByRole("checkbox");
-            yield page.getByTestId("setZero").click();
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            yield page.getByTestId("setOne").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            yield page.getByTestId("setNegative").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        }));
-        (0, fixtures_1.test)("setValue with string values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setEmpty" onClick="checkbox.setValue('')">Set Empty</Button>
-          <Button testId="setFalseStr" onClick="checkbox.setValue('false')">Set 'false'</Button>
-          <Button testId="setTrueStr" onClick="checkbox.setValue('true')">Set 'true'</Button>
-          <Button testId="setYes" onClick="checkbox.setValue('yes')">Set 'yes'</Button>
-        </Fragment>
-      `);
-            const checkbox = page.getByRole("checkbox");
-            yield page.getByTestId("setEmpty").click();
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            yield page.getByTestId("setFalseStr").click();
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            yield page.getByTestId("setTrueStr").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            yield page.getByTestId("setYes").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        }));
-        (0, fixtures_1.test)("setValue with array and object values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // Note: Complex data types like arrays and objects may cause UI rendering issues
-            // This test focuses on the core boolean, number, and string transformations
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setBoolTrue" onClick="checkbox.setValue(true)">Set true</Button>
-          <Button testId="setBoolFalse" onClick="checkbox.setValue(false)">Set false</Button>
-          <Button testId="setNumZero" onClick="checkbox.setValue(0)">Set 0</Button>
-          <Button testId="setNumOne" onClick="checkbox.setValue(1)">Set 1</Button>
-        </Fragment>
-      `);
-            const checkbox = page.getByRole("checkbox");
-            yield page.getByTestId("setBoolFalse").click();
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            yield page.getByTestId("setBoolTrue").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            yield page.getByTestId("setNumZero").click();
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            yield page.getByTestId("setNumOne").click();
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        }));
-        (0, fixtures_1.test)("setValue with simplified array and object test", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // Test arrays and objects through setValue API - focuses on core behavior
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="testComplexTypes" onClick="checkbox.setValue([1,2]); checkbox.setValue({a:1});">Test Complex</Button>
-          <Text testId="currentValue">{checkbox.value}</Text>
-        </Fragment>
-      `);
-            const checkbox = page.getByRole("checkbox");
-            const valueDisplay = page.getByTestId("currentValue");
-            // Complex types should eventually resolve through transformToLegitValue
-            yield page.getByTestId("testComplexTypes").click();
-            // After setValue operations, checkbox should reflect the final transformed value
-            yield (0, fixtures_1.expect)(valueDisplay).toContainText("true");
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        }));
-    });
-    (0, fixtures_1.test)("initialValue=false sets unchecked state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox initialValue="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("indeterminate state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox indeterminate="true" />`);
-        const indeterminate = yield (0, component_test_helpers_1.isIndeterminate)(page.getByRole("checkbox"));
-        (0, fixtures_1.expect)(indeterminate).toBe(true);
-    }));
-    (0, fixtures_1.test)("indeterminate state with initialValue=true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox indeterminate="true" initialValue="true" />`);
-        const checkbox = page.getByRole("checkbox");
-        const indeterminate = yield (0, component_test_helpers_1.isIndeterminate)(checkbox);
-        (0, fixtures_1.expect)(indeterminate).toBe(true);
-        yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-    }));
-    (0, fixtures_1.test)("indeterminate state with initialValue=false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox indeterminate="true" initialValue="false" />`);
-        const checkbox = page.getByRole("checkbox");
-        const indeterminate = yield (0, component_test_helpers_1.isIndeterminate)(checkbox);
-        (0, fixtures_1.expect)(indeterminate).toBe(true);
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("component click toggles checked state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox />`);
-        const checkbox = page.getByRole("checkbox");
-        // Initially unchecked
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-        // Click to check
-        yield checkbox.click();
-        yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        // Click again to uncheck
-        yield checkbox.click();
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("component required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox required="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("required");
-    }));
-    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeDisabled();
-    }));
-    (0, fixtures_1.test)("enabled=false disables interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox enabled="false" initialValue="false" />`);
-        const checkbox = page.getByRole("checkbox");
-        yield checkbox.click({ force: true });
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("readOnly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox readOnly="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("readonly");
-    }));
-    (0, fixtures_1.test)("readOnly prevents state changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox readOnly="true" initialValue="false" />`);
-        const checkbox = page.getByRole("checkbox");
-        yield checkbox.click({ force: true });
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("readOnly is not the same as disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox readOnly="true" enabled="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("readonly");
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeDisabled();
-    }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox autoFocus="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox autoFocus="{true}" label="test" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("handle special characters in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="Accept terms &amp; conditions &lt;&gt;&amp;" />`);
-        yield (0, fixtures_1.expect)(page.locator("label")).toContainText("Accept terms & conditions <>&");
-    }));
-    (0, fixtures_1.test)("handle Unicode characters in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="同意条款 ✓" />`);
-        yield (0, fixtures_1.expect)(page.locator("label")).toContainText("同意条款 ✓");
-    }));
-    (0, fixtures_1.test)("component handles very long label text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const longLabel = "This is a very long label that might cause layout issues or overflow problems " +
-            "in the component rendering and should be handled gracefully by the component implementation";
-        yield initTestBed(`<Checkbox label="${longLabel}" />`);
-        yield (0, fixtures_1.expect)(page.locator("label")).toContainText(longLabel);
-    }));
-    (0, fixtures_1.test)("component handles rapid state changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox initialValue="false" />`);
-        const checkbox = page.getByRole("checkbox");
-        yield checkbox.click({ clickCount: 10 });
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("label is associated with input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const label = "test";
-        yield initTestBed(`<Checkbox label="${label}" />`);
-        const component = page.getByLabel(label);
-        yield (0, fixtures_1.expect)(component).toHaveRole("checkbox");
-    }));
-    (0, fixtures_1.test)("pressing Space after focus checks the control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox initialValue="false" />`);
-        const checkbox = page.getByRole("checkbox");
-        yield checkbox.focus();
-        yield (0, fixtures_1.expect)(checkbox).toBeFocused();
-        yield checkbox.press("Space");
-        yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-    }));
-    (0, fixtures_1.test)("component supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox />`);
-        yield page.keyboard.press("Tab", { delay: 100 });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("aria-checked=false applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="Accept terms" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("aria-checked", "false");
-    }));
-    (0, fixtures_1.test)("aria-checked=true applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="Accept terms" />`);
-        const checkbox = page.getByRole("checkbox");
-        yield (0, fixtures_1.expect)(checkbox).toHaveAttribute("aria-checked", "false");
-        yield checkbox.click();
-        yield (0, fixtures_1.expect)(checkbox).toHaveAttribute("aria-checked", "true");
-    }));
-    (0, fixtures_1.test)("indeterminate has correct ARIA state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox indeterminate="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
-    }));
-    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox required="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("aria-required", "true");
-    }));
-    (0, fixtures_1.test)("required state has visual representation next to label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
-        yield initTestBed(`<Checkbox required="{true}" label="test" />`);
-        yield (0, fixtures_1.expect)((yield createCheckboxDriver()).requiredIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component disabled has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox enabled="{false}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveAttribute("aria-disabled", "true");
-    }));
-});
-// =============================================================================
-// LABEL POSITIONING TESTS
-// =============================================================================
-fixtures_1.test.describe("Label", () => {
-    (0, fixtures_1.test)("labelPosition=start positions label before input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox direction="ltr" label="test" labelPosition="start" />`);
-        const { left: checkboxLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
-        (0, fixtures_1.expect)(labelRight).toBeLessThan(checkboxLeft);
-    }));
-    (0, fixtures_1.test)("labelPosition=end positions label after input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox direction="ltr" label="test" labelPosition="end" />`);
-        const { right: checkboxRight } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { left: labelLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
-        (0, fixtures_1.expect)(labelLeft).toBeGreaterThan(checkboxRight);
-    }));
-    (0, fixtures_1.test)("labelPosition=top positions label above input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="test" labelPosition="top" />`);
-        const { top: checkboxTop } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { bottom: labelBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
-        (0, fixtures_1.expect)(labelBottom).toBeLessThan(checkboxTop);
-    }));
-    (0, fixtures_1.test)("labelPosition=bottom positions label below input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox label="test" labelPosition="bottom" />`);
-        const { bottom: checkboxBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { top: labelTop } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
-        (0, fixtures_1.expect)(labelTop).toBeGreaterThan(checkboxBottom);
-    }));
-    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const expected = 200;
-        yield initTestBed(`<Checkbox label="test test" labelWidth="${expected}px" />`);
-        const { width } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test test"));
-        (0, fixtures_1.expect)(width).toEqual(expected);
-    }));
-    (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const labelText = "Very long label text that should break";
-        const commonProps = `label="${labelText}" labelWidth="100px"`;
-        yield initTestBed(`<Fragment>
-        <Checkbox ${commonProps} testId="break" labelBreak="{true}" />
-        <Checkbox ${commonProps} testId="oneLine" labelBreak="{false}" />
-      </Fragment>`);
-        const labelBreak = page.getByTestId("break").getByText(labelText);
-        const labelOneLine = page.getByTestId("oneLine").getByText(labelText);
-        const { height: heightBreak } = yield (0, component_test_helpers_1.getBounds)(labelBreak);
-        const { height: heightOneLine } = yield (0, component_test_helpers_1.getBounds)(labelOneLine);
-        (0, fixtures_1.expect)(heightBreak).toBeGreaterThan(heightOneLine);
-    }));
-    (0, fixtures_1.test)("component handles invalid labelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Checkbox labelPosition="invalid" label="test" />`);
-        yield (0, fixtures_1.expect)(page.getByLabel("test")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("test")).toBeVisible();
-    }));
-});
-// =============================================================================
-// EVENT HANDLING TESTS
-// =============================================================================
-fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("didChange event fires on state change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<Checkbox initialValue="false" onDidChange="testState = 'changed'" />`);
-        yield page.getByRole("checkbox").check();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
-    }));
-    (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<Checkbox initialValue="false" onDidChange="(value) => testState = value" />`);
-        const checkbox = page.getByRole("checkbox");
-        yield checkbox.check();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-        yield checkbox.uncheck();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<Checkbox onGotFocus="testState = 'focused'" />`);
-        yield page.getByRole("checkbox").focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<Checkbox onGotFocus="testState = 'focused'" label="test" />`);
-        yield page.getByText("test").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-    }));
-    (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<Checkbox onLostFocus="testState = 'blurred'" />`);
-        yield page.getByRole("checkbox").focus();
-        yield page.getByRole("checkbox").blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
-    }));
-});
-// =============================================================================
-// API TESTS
-// =============================================================================
-fixtures_1.test.describe("Api", () => {
-    (0, fixtures_1.test)("component value API returns current state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Checkbox id="checkbox" initialValue="true" />
-        <Text testId="value">{checkbox.value}</Text>
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toContainText("true");
-    }));
-    (0, fixtures_1.test)("component value API returns state after change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Checkbox id="checkbox" initialValue="false" />
-        <Text testId="value">{checkbox.value}</Text>
-      </Fragment>
-    `);
-        yield page.getByRole("checkbox").check();
-        yield (0, fixtures_1.expect)(page.getByTestId("value")).toContainText("true");
-    }));
-    (0, fixtures_1.test)("component setValue API updates state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Checkbox id="checkbox" initialValue="false" />
-        <Button onClick="checkbox.setValue(true)" testId="button">Check</Button>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield (0, fixtures_1.expect)(page.getByTestId("checkbox")).toBeChecked();
-    }));
-    (0, fixtures_1.test)("component setValue API triggers events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Checkbox id="checkbox" initialValue="false" onDidChange="testState = 'changed'" />
-        <Button onClick="checkbox.setValue(true)" testId="button">Check</Button>
-      </Fragment>
-    `);
-        yield page.getByRole("button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
-    }));
-    // =============================================================================
-    // VALUE PROPERTY TESTS - Testing transformToLegitValue with dynamic value updates
-    // =============================================================================
-    fixtures_1.test.describe("value property with transformToLegitValue", () => {
-        (0, fixtures_1.test)("checkbox reflects state changes with different value types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="updateValue" onClick="checkbox.setValue('any non-empty string')">Update Value</Button>
-          <Text testId="currentValue">{checkbox.value}</Text>
-        </Fragment>
-      `);
-            // Initially false
-            yield (0, fixtures_1.expect)(page.getByTestId("currentValue")).toContainText("false");
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-            // Update to truthy string value
-            yield page.getByTestId("updateValue").click();
-            yield (0, fixtures_1.expect)(page.getByTestId("currentValue")).toContainText("true");
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("checkbox state updates properly with numeric values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setZero" onClick="checkbox.setValue(0)">Set 0</Button>
-          <Button testId="setPositive" onClick="checkbox.setValue(42)">Set 42</Button>
-          <Text testId="currentValue">Current: {checkbox.value}</Text>
-        </Fragment>
-      `);
-            // Set to 0 (falsy number)
-            yield page.getByTestId("setZero").click();
-            yield (0, fixtures_1.expect)(page.getByTestId("currentValue")).toContainText("false");
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-            // Set to positive number (truthy)
-            yield page.getByTestId("setPositive").click();
-            yield (0, fixtures_1.expect)(page.getByTestId("currentValue")).toContainText("true");
-            yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        }));
-        (0, fixtures_1.test)("checkbox handles array and object value updates", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // Simplified test focusing on core transformToLegitValue behavior
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setString" onClick="checkbox.setValue('test')">Set 'test'</Button>
-          <Button testId="setEmptyString" onClick="checkbox.setValue('')">Set ''</Button>
-          <Button testId="setFalseString" onClick="checkbox.setValue('false')">Set 'false'</Button>
-          <Text testId="valueDisplay">Value: {checkbox.value}</Text>
-        </Fragment>
-      `);
-            const valueDisplay = page.getByTestId("valueDisplay");
-            const checkbox = page.getByRole("checkbox");
-            // Non-empty string should be true
-            yield page.getByTestId("setString").click();
-            yield (0, fixtures_1.expect)(valueDisplay).toContainText("true");
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-            // Empty string should be false
-            yield page.getByTestId("setEmptyString").click();
-            yield (0, fixtures_1.expect)(valueDisplay).toContainText("false");
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            // String 'false' should be false
-            yield page.getByTestId("setFalseString").click();
-            yield (0, fixtures_1.expect)(valueDisplay).toContainText("false");
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-        }));
-        (0, fixtures_1.test)("checkbox handles special string values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <Fragment>
-          <Checkbox id="checkbox" initialValue="false" />
-          <Button testId="setFalseString" onClick="checkbox.setValue('false')">Set 'false'</Button>
-          <Button testId="setFalseUpper" onClick="checkbox.setValue('FALSE')">Set 'FALSE'</Button>
-          <Button testId="setEmptyString" onClick="checkbox.setValue('')">Set ''</Button>
-          <Button testId="setWhitespace" onClick="checkbox.setValue('   ')">Set '   '</Button>
-          <Button testId="setTruthyString" onClick="checkbox.setValue('anything else')">Set 'anything else'</Button>
-          <Text testId="status">Status: {checkbox.value}</Text>
-        </Fragment>
-      `);
-            const status = page.getByTestId("status");
-            const checkbox = page.getByRole("checkbox");
-            // String 'false' should be false
-            yield page.getByTestId("setFalseString").click();
-            yield (0, fixtures_1.expect)(status).toContainText("false");
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            // String 'FALSE' should be false (case insensitive)
-            yield page.getByTestId("setFalseUpper").click();
-            yield (0, fixtures_1.expect)(status).toContainText("false");
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            // Empty string should be false
-            yield page.getByTestId("setEmptyString").click();
-            yield (0, fixtures_1.expect)(status).toContainText("false");
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            // Whitespace-only string should be false
-            yield page.getByTestId("setWhitespace").click();
-            yield (0, fixtures_1.expect)(status).toContainText("false");
-            yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-            // Any other string should be true
-            yield page.getByTestId("setTruthyString").click();
-            yield (0, fixtures_1.expect)(status).toContainText("true");
-            yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        }));
-    });
-});
-// =============================================================================
-// CUSTOM INPUT TEMPLATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Custom inputTemplate", () => {
-    (0, fixtures_1.test)("inputTemplate renders custom input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Checkbox>
-        <property name="inputTemplate">
-          <Button/>
-        </property>
-      </Checkbox>`);
-        yield (0, fixtures_1.expect)(page.getByRole("button")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("inputTemplate without <property>", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Checkbox>
-        <Button/>
-      </Checkbox>`);
-        yield (0, fixtures_1.expect)(page.getByRole("button")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("inputTemplate fires didChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Checkbox onDidChange="testState = 'custom-changed'">
-        <property name="inputTemplate">
-          <Text testId="inner" value="asd" />
-        </property>
-      </Checkbox>
-    `);
-        yield page.getByTestId("inner").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("custom-changed");
-    }));
-    (0, fixtures_1.test)("inputTemplate child can access $checked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Checkbox initialValue="true">
-        <property name="inputTemplate">
-          <Button testId="inner" label="{$checked}" />
-        </property>
-      </Checkbox>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("inner")).toContainText("true");
-    }));
-    (0, fixtures_1.test)("inputTemplate child can access $setChecked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Checkbox initialValue="true">
-        <property name="inputTemplate">
-          <Button testId="inner" onClick="() => $setChecked(false)" />
-        </property>
-      </Checkbox>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        yield page.getByTestId("inner").click();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("inputTemplate child can access $setChecked & $checked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Checkbox initialValue="true">
-        <property name="inputTemplate">
-          <Button testId="inner" label="{$checked}" onClick="() => $setChecked(!$checked)" />
-        </property>
-      </Checkbox>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeChecked();
-        yield (0, fixtures_1.expect)(page.getByTestId("inner")).toContainText("true");
-        yield page.getByTestId("inner").click();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toBeChecked();
-        yield (0, fixtures_1.expect)(page.getByTestId("inner")).toContainText("false");
-    }));
-    (0, fixtures_1.test)("$checked has no meaning outside component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Checkbox initialValue="true">
-          <property name="inputTemplate">
-            <Button testId="inner" label="{$checked}" />
-          </property>
-        </Checkbox>
-        <Button testId="outer" label="{$checked}" />
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("inner")).toContainText("true");
-        yield (0, fixtures_1.expect)(page.getByTestId("outer")).toContainText("");
-    }));
-    (0, fixtures_1.test)("$setChecked has no meaning outside component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <Checkbox initialValue="true">
-          <property name="inputTemplate">
-            <Button testId="inner" label="{$checked}" />
-          </property>
-        </Checkbox>
-        <Button testId="outer" onClick="() => $setChecked(!$checked)" />
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("inner")).toContainText("true");
-        yield (0, fixtures_1.expect)(page.getByTestId("outer")).toContainText("");
-        yield page.getByTestId("outer").click();
-        yield (0, fixtures_1.expect)(page.getByTestId("inner")).toContainText("true");
-        yield (0, fixtures_1.expect)(page.getByTestId("outer")).toContainText("");
-    }));
-    (0, fixtures_1.test)("inputTemplate didChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Checkbox initialValue="false" onDidChange="testState = 'custom-changed'">
-        <property name="inputTemplate">
-          <Button testId="inner" label="{$checked}" onClick="() => $setChecked(!$checked)" />
-        </property>
-      </Checkbox>
-    `);
-        yield page.getByTestId("inner").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("custom-changed");
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Vars", () => {
-    (0, fixtures_1.test)("checked borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox initialValue="true" />`, {
-            testThemeVars: {
-                "borderColor-checked-Checkbox": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("checked backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox initialValue="true" />`, {
-            testThemeVars: {
-                "backgroundColor-checked-Checkbox": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("indicator backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox initialValue="true" />`, {
-            testThemeVars: {
-                "backgroundColor-indicator-Checkbox": EXPECTED_COLOR,
-            },
-        });
-        const driver = yield createCheckboxDriver();
-        const indicatorColor = yield driver.getIndicatorColor();
-        (0, fixtures_1.expect)(indicatorColor).toEqual(EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("disabled backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox enabled="false" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox--disabled": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("valid borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-Checkbox-success": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("valid backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="valid" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox-success": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("warning borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-Checkbox-warning": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("warning backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="warning" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox-warning": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("error borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-Checkbox-error": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("error backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="error" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox-error": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("borderRadius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const CUSTOM_BORDER_RADIUS = "10px";
-        yield initTestBed(`<Checkbox />`, {
-            testThemeVars: {
-                "borderRadius-Checkbox": CUSTOM_BORDER_RADIUS,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-radius", CUSTOM_BORDER_RADIUS);
-    }));
-    (0, fixtures_1.test)("outlineWidth on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const CUSTOM_OUTLINE_WIDTH = "10px";
-        yield initTestBed(`<Checkbox />`, {
-            testThemeVars: {
-                "outlineWidth-Checkbox": CUSTOM_OUTLINE_WIDTH,
-            },
-        });
-        yield page.getByRole("checkbox").focus();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("outline-width", CUSTOM_OUTLINE_WIDTH);
-    }));
-    (0, fixtures_1.test)("outlineColor on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const CUSTOM_OUTLINE_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox />`, {
-            testThemeVars: {
-                "outlineColor-Checkbox": CUSTOM_OUTLINE_COLOR,
-            },
-        });
-        yield page.getByRole("checkbox").focus();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("outline-color", CUSTOM_OUTLINE_COLOR);
-    }));
-    (0, fixtures_1.test)("outlineOffset on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const CUSTOM_OUTLINE_OFFSET = "10px";
-        yield initTestBed(`<Checkbox />`, {
-            testThemeVars: {
-                "outlineOffset-Checkbox": CUSTOM_OUTLINE_OFFSET,
-            },
-        });
-        yield page.getByRole("checkbox").focus();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("outline-offset", CUSTOM_OUTLINE_OFFSET);
-    }));
-    (0, fixtures_1.test)("outlineStyle on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const CUSTOM_OUTLINE_STYLE = "dotted";
-        yield initTestBed(`<Checkbox />`, {
-            testThemeVars: {
-                "outlineStyle-Checkbox": CUSTOM_OUTLINE_STYLE,
-            },
-        });
-        yield page.getByRole("checkbox").focus();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("outline-style", CUSTOM_OUTLINE_STYLE);
-    }));
-});
-// =============================================================================
-// VALIDATION STATUS TESTS
-// =============================================================================
-fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)(`validationStatus=error correctly displayed`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const validationLevel = "error";
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="${validationLevel}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-                [`borderColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)(`validationStatus=warning correctly displayed`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const validationLevel = "warning";
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="${validationLevel}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-                [`borderColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)(`validationStatus=valid correctly displayed`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="valid" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-success`]: EXPECTED_COLOR,
-                [`borderColor-Checkbox-success`]: EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const validationLevel = "invalid";
-        const NOT_EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="${validationLevel}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-${validationLevel}`]: NOT_EXPECTED_COLOR,
-                [`borderColor-Checkbox-${validationLevel}`]: NOT_EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toHaveCSS("background-color", NOT_EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toHaveCSS("border-color", NOT_EXPECTED_COLOR);
-    }));
-});