xmlui 0.11.4 → 0.11.6

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

@@ -1,979 +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(`<NumberBox />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Amount" />`);
-        yield (0, fixtures_1.expect)(page.getByText("Amount")).toBeVisible();
-    }));
-    // --- initialValue prop
-    (0, fixtures_1.test)("initialValue sets field value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox initialValue="123" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("123");
-    }));
-    (0, fixtures_1.test)("initialValue ignores non-numeric string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-        <NumberBox initialValue="can't be this" />
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("initialValue accepts various types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Stack>
-        <NumberBox testId="integer" initialValue="{1}" />
-        <NumberBox testId="float" initialValue="{1.2}" />
-        <NumberBox testId="undefined" initialValue="{undefined}" />
-        <NumberBox testId="null" initialValue="{null}" />
-        <NumberBox testId="empty-string" initialValue="" />
-        <NumberBox testId="string-integer" initialValue="1" />
-        <NumberBox testId="string-float" initialValue="1.2" />
-      </Stack>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("integer").getByRole("textbox")).toHaveValue("1");
-        yield (0, fixtures_1.expect)(page.getByTestId("float").getByRole("textbox")).toHaveValue("1.2");
-        yield (0, fixtures_1.expect)(page.getByTestId("undefined").getByRole("textbox")).toHaveValue("");
-        yield (0, fixtures_1.expect)(page.getByTestId("null").getByRole("textbox")).toHaveValue("");
-        yield (0, fixtures_1.expect)(page.getByTestId("empty-string").getByRole("textbox")).toHaveValue("");
-        yield (0, fixtures_1.expect)(page.getByTestId("string-integer").getByRole("textbox")).toHaveValue("1");
-        yield (0, fixtures_1.expect)(page.getByTestId("string-float").getByRole("textbox")).toHaveValue("1.2");
-    }));
-    // --- enabled prop
-    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeDisabled();
-    }));
-    (0, fixtures_1.test)("enabled=true enables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox enabled="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeDisabled();
-    }));
-    (0, fixtures_1.test)("disabled input field stops user interaction for spinbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {
-        yield initTestBed(`<NumberBox enabled="false" initialValue="5" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.increment();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("5");
-        yield (0, fixtures_1.expect)(driver.spinnerUp).toBeDisabled();
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("5");
-        yield (0, fixtures_1.expect)(driver.spinnerDown).toBeDisabled();
-    }));
-    // --- readOnly prop
-    (0, fixtures_1.test)("readOnly adds readonly attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox readOnly="true" initialValue="123" />`);
-        const input = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(input).toHaveAttribute("readonly");
-    }));
-    (0, fixtures_1.test)("readOnly input is not editable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox readOnly="true" initialValue="123" />`);
-        const input = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(input).not.toBeEditable();
-    }));
-    (0, fixtures_1.test)("readOnly input has value and can be focused", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox readOnly="true" initialValue="123" />`);
-        const input = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(input).toHaveValue("123");
-        yield input.focus();
-        yield (0, fixtures_1.expect)(input).toBeFocused();
-    }));
-    // --- required prop
-    (0, fixtures_1.test)("required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox required="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
-    }));
-    (0, fixtures_1.test)("empty required NumberBox shows visual indicator", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="test" required="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByText("test")).toContainText("*");
-    }));
-    // --- autoFocus prop
-    (0, fixtures_1.test)("autoFocus focuses input on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver }) {
-        yield initTestBed(`<NumberBox autoFocus="true" />`);
-        const driver = yield createNumberBoxDriver();
-        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
-    }));
-    // --- placeholder prop
-    (0, fixtures_1.test)("placeholder shows when input is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox placeholder="Enter number..." />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("placeholder", "Enter number...");
-    }));
-    (0, fixtures_1.test)("placeholder does not appear if input is filled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox placeholder="placeholder text" initialValue="123" />`);
-        yield (0, fixtures_1.expect)(page.getByText("placeholder text")).not.toBeVisible();
-    }));
-    // --- maxLength prop
-    (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox maxLength="3" />`);
-        yield page.getByRole("textbox").fill("12345");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("123");
-    }));
-    // --- User input testing
-    (0, fixtures_1.test)("component accepts user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        yield page.getByRole("textbox").fill("456");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("456");
-    }));
-    (0, fixtures_1.test)("component clears input correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox initialValue="123" />`);
-        const input = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(input).toHaveValue("123");
-        yield input.clear();
-        yield (0, fixtures_1.expect)(input).toHaveValue("");
-    }));
-    // --- hasSpinBox prop
-    (0, fixtures_1.test)("hasSpinBox=true renders spinbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox hasSpinBox="true" />`);
-        // Look for spinner container or buttons
-        const spinnerContainer = page.locator(".spinnerBox, .spinner, [class*='spin']").first();
-        const spinButtons = page.locator("button");
-        const hasSpinnerContainer = yield spinnerContainer.isVisible().catch(() => false);
-        const hasSpinButtons = (yield spinButtons.count()) > 0;
-        (0, fixtures_1.expect)(hasSpinnerContainer || hasSpinButtons).toBe(true);
-    }));
-    (0, fixtures_1.test)("hasSpinBox=false hides spinbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox hasSpinBox="false" />`);
-        // When hasSpinBox is false, spinner should not be visible
-        const spinnerContainer = page.locator(".spinnerBox, .spinner, [class*='spin']").first();
-        const spinButtons = page.locator("button");
-        const hasSpinnerContainer = yield spinnerContainer.isVisible().catch(() => false);
-        const spinButtonCount = yield spinButtons.count();
-        (0, fixtures_1.expect)(hasSpinnerContainer).toBe(false);
-        (0, fixtures_1.expect)(spinButtonCount).toBe(0);
-    }));
-    // --- step prop with spinbox
-    (0, fixtures_1.test)("clicking spinbox up-arrow adds step value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {
-        yield initTestBed(`<NumberBox initialValue="5" step="2" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.increment();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("7");
-    }));
-    (0, fixtures_1.test)("clicking spinbox down-arrow subtracts step value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {
-        yield initTestBed(`<NumberBox initialValue="5" step="2" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("3");
-    }));
-    (0, fixtures_1.test)("invalid step values use default step", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver }) {
-        yield initTestBed(`<NumberBox initialValue="10" step="3.5" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.increment();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("11");
-    }));
-    // --- Arrow key navigation
-    (0, fixtures_1.test)("pressing up arrow adds step value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox initialValue="5" />`);
-        const input = page.getByRole("textbox");
-        yield input.focus();
-        yield page.keyboard.press("ArrowUp");
-        yield (0, fixtures_1.expect)(input).toHaveValue("6");
-    }));
-    (0, fixtures_1.test)("pressing down arrow subtracts step value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox initialValue="5" />`);
-        const input = page.getByRole("textbox");
-        yield input.focus();
-        yield page.keyboard.press("ArrowDown");
-        yield (0, fixtures_1.expect)(input).toHaveValue("4");
-    }));
-    // --- integersOnly prop
-    (0, fixtures_1.test)("integersOnly=true prevents decimal input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox integersOnly="true" />`);
-        const input = page.getByRole("textbox");
-        yield input.fill("123.45");
-        // Should not allow decimal point
-        yield (0, fixtures_1.expect)(input).not.toHaveValue("123.45");
-    }));
-    // --- zeroOrPositive prop
-    (0, fixtures_1.test)("zeroOrPositive=true prevents negative values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {
-        yield initTestBed(`<NumberBox zeroOrPositive="true" initialValue="1" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("0");
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("0");
-    }));
-    // --- Range validation (min/max)
-    (0, fixtures_1.test)("minValue prevents values below minimum spinner button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {
-        yield initTestBed(`<NumberBox minValue="10" initialValue="11" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("10");
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("10");
-    }));
-    (0, fixtures_1.test)("minValue prevents typing values below minimum", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox minValue="10" initialValue="11" />`);
-        const textbox = page.getByRole("textbox");
-        yield textbox.fill("2");
-        yield textbox.blur();
-        yield (0, fixtures_1.expect)(textbox).toHaveValue("10");
-    }));
-    (0, fixtures_1.test)("maxValue prevents values above maximum spinner button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, }) {
-        yield initTestBed(`<NumberBox maxValue="11" initialValue="10" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.increment();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("11");
-        yield driver.increment();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("11");
-    }));
-    (0, fixtures_1.test)("maxValue prevents typing values above maximum", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox maxValue="11" initialValue="10" />`);
-        const textbox = page.getByRole("textbox");
-        yield textbox.fill("200");
-        yield textbox.blur();
-        yield (0, fixtures_1.expect)(textbox).toHaveValue("11");
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has correct role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" hasSpinBox="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("spinbutton")).toHaveCount(2);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Amount" />`);
-        yield page.keyboard.press("Tab");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox required="true" label="Required field" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
-    }));
-});
-// =============================================================================
-// LABEL POSITIONING TESTS
-// =============================================================================
-fixtures_1.test.describe("Label", () => {
-    (0, fixtures_1.test)("component handles invalid labelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Label" labelPosition="invalid" />`);
-        yield (0, fixtures_1.expect)(page.getByText("Label")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("empty string label is not rendered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="" initialValue="" />`);
-        // No specific label should be visible, just the input
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("clicking on the label focuses input field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Input Field Label" />`);
-        yield page.getByText("Input Field Label").click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("labelPosition=start positions label before input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox direction="ltr" label="Label" labelPosition="start" />`);
-        const labelBox = yield (0, component_test_helpers_1.getBounds)(page.getByText("Label"));
-        const inputBox = yield (0, component_test_helpers_1.getBounds)(page.getByRole("textbox"));
-        (0, fixtures_1.expect)(labelBox.right).toBeLessThan(inputBox.left);
-    }));
-    (0, fixtures_1.test)("labelPosition=end positions label after input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox direction="ltr" label="Label" labelPosition="end" />`);
-        const labelBox = yield (0, component_test_helpers_1.getBounds)(page.getByText("Label"));
-        const inputBox = yield (0, component_test_helpers_1.getBounds)(page.getByRole("textbox"));
-        (0, fixtures_1.expect)(labelBox.left).toBeGreaterThan(inputBox.right);
-    }));
-    (0, fixtures_1.test)("labelPosition=start positions label before input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox direction="rtl" label="Label" labelPosition="start" />`);
-        const labelBox = yield (0, component_test_helpers_1.getBounds)(page.getByText("Label"));
-        const inputBox = yield (0, component_test_helpers_1.getBounds)(page.getByRole("textbox"));
-        (0, fixtures_1.expect)(labelBox.left).toBeGreaterThan(inputBox.right);
-    }));
-    (0, fixtures_1.test)("labelPosition=end positions label after input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox direction="rtl" label="Label" labelPosition="end" />`);
-        const labelBox = yield (0, component_test_helpers_1.getBounds)(page.getByText("Label"));
-        const inputBox = yield (0, component_test_helpers_1.getBounds)(page.getByRole("textbox"));
-        (0, fixtures_1.expect)(labelBox.right).toBeLessThan(inputBox.left);
-    }));
-    (0, fixtures_1.test)("labelPosition=top positions label above input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Label" labelPosition="top" />`);
-        const labelBox = yield (0, component_test_helpers_1.getBounds)(page.getByText("Label"));
-        const inputBox = yield (0, component_test_helpers_1.getBounds)(page.getByRole("textbox"));
-        (0, fixtures_1.expect)(labelBox.bottom).toBeLessThan(inputBox.top);
-    }));
-    (0, fixtures_1.test)("labelPosition=bottom positions label below input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Label" labelPosition="bottom" />`);
-        const labelBox = yield (0, component_test_helpers_1.getBounds)(page.getByText("Label"));
-        const inputBox = yield (0, component_test_helpers_1.getBounds)(page.getByRole("textbox"));
-        (0, fixtures_1.expect)(labelBox.top).toBeGreaterThan(inputBox.bottom);
-    }));
-    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Label" labelWidth="200px" />`);
-        const label = page.getByText("Label");
-        yield (0, fixtures_1.expect)(label).toBeVisible();
-        yield (0, fixtures_1.expect)(label).toHaveCSS("width", "200px");
-    }));
-    (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox label="Very long label text" labelBreak="true" labelWidth="50px" />`);
-        const label = page.getByText("Very long label text");
-        yield (0, fixtures_1.expect)(label).toBeVisible();
-    }));
-});
-// =============================================================================
-// EVENT HANDLING TESTS
-// =============================================================================
-fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("didChange event fires on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<NumberBox onDidChange="testState = 'changed'" />`);
-        yield page.getByRole("textbox").fill("123");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("changed");
-    }));
-    (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<NumberBox onDidChange="arg => testState = arg" />`);
-        yield page.getByRole("textbox").fill("123");
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("123");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<NumberBox onGotFocus="testState = 'focused'" />`);
-        yield page.getByRole("textbox").focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<NumberBox onGotFocus="testState = 'focused'" label="test" />`);
-        yield page.getByText("test").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-    }));
-    (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`<NumberBox onLostFocus="testState = 'blurred'" />`);
-        const input = page.getByRole("textbox");
-        yield input.focus();
-        yield input.blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
-    }));
-    (0, fixtures_1.test)("events do not fire when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <NumberBox enabled="false" onDidChange="testState = 'changed'" onGotFocus="testState = 'focused'" />
-    `);
-        const input = page.getByRole("textbox");
-        yield input.focus();
-        yield input.fill("123", { force: true }); // Should not allow input
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
-    }));
-});
-// =============================================================================
-// API TESTS
-// =============================================================================
-fixtures_1.test.describe("API", () => {
-    (0, fixtures_1.test)("value API returns current state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <NumberBox id="numberbox" initialValue="123" />
-        <Button label="test" onClick="testState = numberbox.value" />
-      </Fragment>
-    `);
-        yield page.getByRole("button", { name: "test" }).click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(123);
-    }));
-    (0, fixtures_1.test)("value API returns state after change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <NumberBox id="numberbox" />
-        <Button label="test" onClick="testState = numberbox.value" />
-      </Fragment>
-    `);
-        yield page.getByRole("textbox").fill("456");
-        yield page.getByRole("button", { name: "test" }).click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("456");
-    }));
-    (0, fixtures_1.test)("setValue API updates state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <NumberBox id="numberbox" />
-        <Button label="test" onClick="numberbox.setValue(789)" />
-      </Fragment>
-    `);
-        yield page.getByRole("button", { name: "test" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("789");
-    }));
-    (0, fixtures_1.test)("setValue API triggers events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <NumberBox id="numberbox" onDidChange="testState = 'changed'" />
-        <Button label="test" onClick="numberbox.setValue(123)" />
-      </Fragment>
-    `);
-        yield page.getByRole("button", { name: "test" }).click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("changed");
-    }));
-    (0, fixtures_1.test)("focus API focuses the input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <NumberBox id="numberbox" />
-        <Button label="test" onClick="numberbox.focus()" />
-      </Fragment>
-    `);
-        yield page.getByRole("button", { name: "test" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("focus API does nothing when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <NumberBox id="numberbox" enabled="false" />
-        <Button label="test" onClick="numberbox.focus()" />
-      </Fragment>
-    `);
-        yield page.getByRole("button", { name: "test" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeFocused();
-    }));
-});
-// =============================================================================
-// INPUT ADORNMENTS TESTS (From TextBox pattern)
-// =============================================================================
-fixtures_1.test.describe("Input Adornments", () => {
-    (0, fixtures_1.test)("startText displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="ltr" startText="$" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("startText displays at beginning of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="rtl" startText="$" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("endText displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="ltr" endText="USD" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("endText displays at end of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="rtl" endText="USD" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("startIcon displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="ltr" startIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("startIcon displays at beginning of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="rtl" startIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("endIcon displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" endIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("endIcon displays at end of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" direction="rtl" endIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("multiple adornments can be combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <NumberBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" />
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
-        yield (0, fixtures_1.expect)(page.getByRole("img").first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("img").nth(1)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("all adornments appear in the right place", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <NumberBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" direction="ltr" />
-    `);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: startTextLeft, right: startTextRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
-        const { left: endTextLeft, right: endTextRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
-        const { left: startIconLeft, right: startIconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        const { left: endIconLeft, right: endIconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").nth(1));
-        // Check order of adornments
-        (0, fixtures_1.expect)(startTextRight - compLeft).toBeLessThanOrEqual(compRight - startTextLeft);
-        (0, fixtures_1.expect)(startIconRight - compLeft).toBeLessThanOrEqual(compRight - startIconLeft);
-        (0, fixtures_1.expect)(endTextRight - compLeft).toBeGreaterThanOrEqual(compRight - endTextLeft);
-        (0, fixtures_1.expect)(endIconRight - compLeft).toBeGreaterThanOrEqual(compRight - endIconLeft);
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "backgroundColor-NumberBox--default": "rgb(255, 0, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderColor-NumberBox--default": "rgb(0, 255, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "textColor-NumberBox--default": "rgb(0, 0, 255)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(0, 0, 255)");
-    }));
-    (0, fixtures_1.test)("focus borderColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderColor-NumberBox--default--focus": "rgb(255, 255, 0)" },
-        });
-        yield page.getByRole("textbox").focus();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 255, 0)");
-    }));
-    (0, fixtures_1.test)("disabled backgroundColor applies when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" enabled="false" />`, {
-            testThemeVars: { "backgroundColor-NumberBox--disabled": "rgb(128, 128, 128)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(128, 128, 128)");
-    }));
-    (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderRadius-NumberBox--default": "10px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-radius", "10px");
-    }));
-    (0, fixtures_1.test)("padding applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "padding-NumberBox": "15px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("padding", "15px");
-    }));
-    // Additional variant mixin theme variable tests
-    (0, fixtures_1.test)("borderWidth applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderWidth-NumberBox--default": "3px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-width", "3px");
-    }));
-    (0, fixtures_1.test)("borderStyle applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderStyle-NumberBox--default": "dashed" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-style", "dashed");
-    }));
-    (0, fixtures_1.test)("fontSize applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "fontSize-NumberBox--default": "18px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("font-size", "18px");
-    }));
-    (0, fixtures_1.test)("boxShadow applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "boxShadow-NumberBox--default": "rgba(0, 0, 0, 0.2) 0px 2px 4px 0px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.2) 0px 2px 4px 0px");
-    }));
-    (0, fixtures_1.test)("hover borderColor applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderColor-NumberBox--default--hover": "rgb(255, 100, 100)" },
-        });
-        yield page.getByTestId("input").hover();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 100, 100)");
-    }));
-    (0, fixtures_1.test)("hover backgroundColor applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "backgroundColor-NumberBox--default--hover": "rgb(240, 240, 240)" },
-        });
-        yield page.getByTestId("input").hover();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(240, 240, 240)");
-    }));
-    (0, fixtures_1.test)("hover boxShadow applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "boxShadow-NumberBox--default--hover": "rgba(0, 0, 0, 0.3) 0px 4px 8px 0px" },
-        });
-        yield page.getByTestId("input").hover();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.3) 0px 4px 8px 0px");
-    }));
-    (0, fixtures_1.test)("hover textColor applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "textColor-NumberBox--default--hover": "rgb(50, 50, 50)" },
-        });
-        yield page.getByTestId("input").hover();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(50, 50, 50)");
-    }));
-    (0, fixtures_1.test)("focus backgroundColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "backgroundColor-NumberBox--default--focus": "rgb(250, 250, 250)" },
-        });
-        yield page.getByRole("textbox").focus();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(250, 250, 250)");
-    }));
-    (0, fixtures_1.test)("focus boxShadow applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: {
-                "boxShadow-NumberBox--default--focus": "rgba(0, 100, 255, 0.4) 0px 0px 0px 3px",
-            },
-        });
-        yield page.getByRole("textbox").focus();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("box-shadow", "rgba(0, 100, 255, 0.4) 0px 0px 0px 3px");
-    }));
-    (0, fixtures_1.test)("focus textColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "textColor-NumberBox--default--focus": "rgb(20, 20, 20)" },
-        });
-        yield page.getByRole("textbox").focus();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(20, 20, 20)");
-    }));
-    (0, fixtures_1.test)("focus outline properties apply on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: {
-                "outlineWidth-NumberBox--default--focus": "2px",
-                "outlineColor-NumberBox--default--focus": "rgb(0, 123, 255)",
-                "outlineStyle-NumberBox--default--focus": "solid",
-                "outlineOffset-NumberBox--default--focus": "2px",
-            },
-        });
-        yield page.getByRole("textbox").focus();
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("outline-width", "2px");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("outline-color", "rgb(0, 123, 255)");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("outline-style", "solid");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("outline-offset", "2px");
-    }));
-    (0, fixtures_1.test)("placeholder textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" placeholder="Enter number" />`, {
-            testThemeVars: { "textColor-placeholder-NumberBox--default": "rgb(150, 150, 150)" },
-        });
-        const input = page.getByRole("textbox");
-        const placeholderColor = yield input.evaluate((el) => {
-            return window.getComputedStyle(el, "::placeholder").color;
-        });
-        (0, fixtures_1.expect)(placeholderColor).toBe("rgb(150, 150, 150)");
-    }));
-    (0, fixtures_1.test)("placeholder fontSize applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" placeholder="Enter number" />`, {
-            testThemeVars: { "fontSize-placeholder-NumberBox--default": "14px" },
-        });
-        const input = page.getByRole("textbox");
-        const placeholderFontSize = yield input.evaluate((el) => {
-            return window.getComputedStyle(el, "::placeholder").fontSize;
-        });
-        (0, fixtures_1.expect)(placeholderFontSize).toBe("14px");
-    }));
-    (0, fixtures_1.test)("gap between adornments applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" startText="$" endText="USD" />`, {
-            testThemeVars: { "gap-adornment-NumberBox": "8px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("gap", "8px");
-    }));
-    (0, fixtures_1.test)("disabled textColor applies when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" enabled="false" />`, {
-            testThemeVars: { "textColor-NumberBox--disabled": "rgb(160, 160, 160)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(160, 160, 160)");
-    }));
-    (0, fixtures_1.test)("disabled borderColor applies when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" enabled="false" />`, {
-            testThemeVars: { "borderColor-NumberBox--disabled": "rgb(200, 200, 200)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(200, 200, 200)");
-    }));
-    (0, fixtures_1.test)("input text adornment colors apply correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" startText="$" endText="€" />`, {
-            testThemeVars: { "color-adornment-NumberBox--default": "rgb(0, 123, 255)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByText("$")).toHaveCSS("color", "rgb(0, 123, 255)");
-        yield (0, fixtures_1.expect)(page.getByText("€")).toHaveCSS("color", "rgb(0, 123, 255)");
-    }));
-    (0, fixtures_1.test)("input icon adornment colors apply correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" startIcon="search" endIcon="search" />`, {
-            testThemeVars: { "color-adornment-NumberBox--default": "rgb(0, 123, 255)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("img").first()).toHaveCSS("color", "rgb(0, 123, 255)");
-        yield (0, fixtures_1.expect)(page.getByRole("img").nth(1)).toHaveCSS("color", "rgb(0, 123, 255)");
-    }));
-    [
-        { value: "--default", prop: "" },
-        { value: "--warning", prop: 'validationStatus="warning"' },
-        { value: "--error", prop: 'validationStatus="error"' },
-        { value: "--success", prop: 'validationStatus="valid"' },
-    ].forEach((variant) => {
-        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderRadius-NumberBox${variant.value}`]: "12px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-NumberBox${variant.value}`]: "rgb(255, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderWidth-NumberBox${variant.value}`]: "1px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderStyle-NumberBox${variant.value}`]: "dashed" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
-        }));
-        (0, fixtures_1.test)(`applies correct fontSize ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`fontSize-NumberBox${variant.value}`]: "14px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("font-size", "14px");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-NumberBox${variant.value}`]: "rgb(240, 240, 240)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-NumberBox${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-NumberBox${variant.value}`]: "rgb(0, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-NumberBox${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-NumberBox${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-NumberBox${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-NumberBox${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-    });
-});
-// =============================================================================
-// OTHER EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Other Edge Cases", () => {
-    (0, fixtures_1.test)("placeholder is hidden if input field is filled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox placeholder="123" />`);
-        const input = page.getByRole("textbox");
-        yield input.fill("456");
-        yield (0, fixtures_1.expect)(input).toHaveValue("456");
-        yield (0, fixtures_1.expect)(input).toHaveAttribute("placeholder", "123");
-    }));
-    (0, fixtures_1.test)("invalid initialValue types are handled gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        // Test various invalid types
-        yield initTestBed(`<NumberBox initialValue="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-    }));
-    // Complex edge cases
-    (0, fixtures_1.test)("handle special characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        // Should filter out special characters
-        yield input.fill("!@#$123%^&");
-        yield (0, fixtures_1.expect)(input).not.toHaveValue("!@#$123%^&");
-    }));
-    (0, fixtures_1.test)("handle Unicode characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        // Should filter out Unicode characters
-        yield input.fill("👨‍👩‍👧‍👦123");
-        yield (0, fixtures_1.expect)(input).not.toHaveValue("👨‍👩‍👧‍👦123");
-    }));
-    (0, fixtures_1.test)("component handles very long input text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        const longNumber = "1".repeat(100);
-        yield input.fill(longNumber);
-        // Should handle or truncate appropriately
-        yield (0, fixtures_1.expect)(input).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles rapid input changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        yield input.pressSequentially("123", { delay: 50 });
-        yield (0, fixtures_1.expect)(input).toHaveValue("123");
-        yield input.clear();
-        yield input.pressSequentially("456", { delay: 25 });
-        yield (0, fixtures_1.expect)(input).toHaveValue("456");
-    }));
-    (0, fixtures_1.test)("component works with conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <NumberBox when="{testState}" />
-        <Button label="test" onClick="testState = true" />
-      </Fragment>
-    `);
-        // Initially not visible
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeVisible();
-        // Click to show
-        yield page.getByRole("button", { name: "test" }).click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("spinner buttons work with long press", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, page, }) {
-        yield initTestBed(`<NumberBox initialValue="0" />`);
-        const driver = yield createNumberBoxDriver();
-        // Hold down the button (simulate long press)
-        yield driver.spinnerUp.hover();
-        yield page.mouse.down();
-        yield page.waitForTimeout(600); // Wait longer than initial delay
-        yield page.mouse.up();
-        // Should have incremented multiple times
-        yield (0, fixtures_1.expect)(driver.input).not.toHaveValue("0");
-    }));
-    (0, fixtures_1.test)("integersOnly with zeroOrPositive combination works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver, page, }) {
-        yield initTestBed(`<NumberBox integersOnly="true" zeroOrPositive="true" initialValue="1" />`);
-        const driver = yield createNumberBoxDriver();
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("0");
-        yield driver.decrement();
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("0");
-        yield driver.input.type(".5");
-        yield (0, fixtures_1.expect)(driver.input).toHaveValue("5");
-    }));
-    // Special numeric formats
-    (0, fixtures_1.test)("handle special numeric input formats", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        // Test scientific notation
-        yield input.fill("1e5");
-        yield (0, fixtures_1.expect)(input).toHaveValue("1e5");
-        // Test negative numbers
-        yield input.clear();
-        yield input.fill("-123");
-        yield (0, fixtures_1.expect)(input).toHaveValue("-123");
-    }));
-    (0, fixtures_1.test)("entering multiple 0s only results in one 0", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        yield page.getByRole("textbox").pressSequentially("0000000000000000");
-        yield page.getByRole("textbox").blur();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("0");
-    }));
-    (0, fixtures_1.test)("copying multiple 0s only results in one 0", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { clipboard } = yield initTestBed(`<NumberBox />`);
-        yield clipboard.write("0000000000000000");
-        yield clipboard.paste(page.getByRole("textbox"));
-        yield page.getByRole("textbox").blur();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("0");
-    }));
-    (0, fixtures_1.test)("standalone minus sign is permitted if field is not blurred yet", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<NumberBox />`);
-        yield page.getByRole("textbox").fill("-");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("-");
-    }));
-    (0, fixtures_1.test)("minus sign is applied correctly if it comes after number", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<NumberBox />`);
-        yield page.getByRole("textbox").pressSequentially("123-");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("-123");
-    }));
-    (0, fixtures_1.test)("placing decimal separator between the numbers of an integer results in a float", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        yield input.fill("123456");
-        yield input.press("ArrowLeft");
-        yield input.press("ArrowLeft");
-        yield input.press("ArrowLeft");
-        yield input.press(".");
-        yield (0, fixtures_1.expect)(input).toHaveValue("123.456");
-    }));
-    (0, fixtures_1.test)("placing second decimal separator is not permitted", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        yield input.fill("1.23456");
-        yield input.press("ArrowLeft");
-        yield input.press(".");
-        yield (0, fixtures_1.expect)(input).toHaveValue("1.23456");
-    }));
-    (0, fixtures_1.test)("placing decimal separator before an integer adds a leading 0 (#1)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        yield input.fill("12");
-        yield input.press("ArrowLeft");
-        yield input.press("ArrowLeft");
-        yield input.press(".");
-        yield (0, fixtures_1.expect)(input).toHaveValue("0.12");
-    }));
-    (0, fixtures_1.test)("placing decimal separator before an integer adds a leading 0 (#2)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        yield input.fill("");
-        yield input.press(".");
-        yield (0, fixtures_1.expect)(input).toHaveValue("0.");
-    }));
-    (0, fixtures_1.test)("adding floating point to the end adds a trailing 0 when blurred", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`<NumberBox />`);
-        const input = page.getByRole("textbox");
-        yield input.pressSequentially("123.");
-        yield input.blur();
-        yield (0, fixtures_1.expect)(input).toHaveValue("123.0");
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<NumberBox width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<NumberBox width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<NumberBox width="50%" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<NumberBox width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));