xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,1231 @@
+"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");
+    }));
+    [
+        { label: "integer", value: "'{1}'", toExpect: "1" },
+        { label: "float", value: "'{1.2}'", toExpect: "1.2" },
+        { label: "undefined", value: "'{undefined}'", toExpect: "" },
+        { label: "null", value: "'{null}'", toExpect: "" },
+        { label: "empty string", value: "''", toExpect: "" },
+        { label: "string that resolves to integer", value: "'1'", toExpect: "1" },
+        { label: "string that resolves to float", value: "'1.2'", toExpect: "1.2" },
+    ].forEach(({ label, value, toExpect }) => {
+        (0, fixtures_1.test)(`initialValue accepts ${label} type with ${value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox initialValue=${value} />`);
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(toExpect);
+        }));
+    });
+    // --- 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=false prevents user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox enabled="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeEditable();
+    }));
+    (0, fixtures_1.test)("enabled=true disables 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)("enabled=true prevents user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox enabled="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeEditable();
+    }));
+    (0, fixtures_1.test)("disabled input field stops user interaction for spinbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox enabled="false" initialValue="5" />`);
+        // Try to find spinbox buttons (implementation may vary)
+        const spinButtons = page.locator("button");
+        const firstSpinButton = spinButtons.first();
+        if (yield firstSpinButton.isEnabled()) {
+            yield firstSpinButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("5"); // Should not change
+        }
+    }));
+    // --- 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();
+    }));
+    (0, fixtures_1.test)("readOnly disables the spinbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox readOnly="true" initialValue="5" />`);
+        // Try to find and click spinbox buttons
+        const spinButtons = page.locator("button");
+        const firstSpinButton = spinButtons.first();
+        if (yield firstSpinButton.isEnabled()) {
+            yield firstSpinButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("5"); // Should not change
+        }
+    }));
+    // --- 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, page }) {
+        yield initTestBed(`<NumberBox autoFocus="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox autoFocus="true" label="Auto-focused input" />`);
+        yield (0, fixtures_1.expect)(page.getByLabel("Auto-focused 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.getByRole("textbox")).toHaveAttribute("placeholder", "placeholder text");
+        yield (0, fixtures_1.expect)(page.getByRole("textbox", { name: "placeholder text" })).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, page }) {
+        yield initTestBed(`<NumberBox initialValue="5" step="1" />`);
+        const incrementButton = page.locator("button").first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("6");
+        }
+    }));
+    (0, fixtures_1.test)("clicking spinbox down-arrow subtracts step value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="5" step="1" />`);
+        const decrementButton = page.locator("button").nth(1);
+        if (yield decrementButton.isVisible()) {
+            yield decrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("4");
+        }
+    }));
+    (0, fixtures_1.test)("custom step value applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="10" step="5" />`);
+        const incrementButton = page.locator("button").first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("15");
+        }
+    }));
+    (0, fixtures_1.test)("float type step value is ignored", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="10" step="3.5" />`);
+        const incrementButton = page.locator("button").first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).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, page }) {
+        yield initTestBed(`<NumberBox zeroOrPositive="true" initialValue="5" />`);
+        const input = page.getByRole("textbox");
+        const decrementButton = page.locator("button").nth(1);
+        if (yield decrementButton.isVisible()) {
+            // Click multiple times to try to go negative
+            for (let i = 0; i < 10; i++) {
+                yield decrementButton.click();
+            }
+            // Should not go below 0
+            const value = yield input.inputValue();
+            (0, fixtures_1.expect)(parseInt(value) || 0).toBeGreaterThanOrEqual(0);
+        }
+    }));
+    // --- Range validation (min/max)
+    (0, fixtures_1.test)("minValue prevents values below minimum", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox minValue="10" initialValue="15" />`);
+        const decrementButton = page
+            .locator("button")
+            .filter({ hasText: /decrement|down|\-/ })
+            .first();
+        if (yield decrementButton.isVisible()) {
+            // Click multiple times to try to go below minimum
+            for (let i = 0; i < 10; i++) {
+                yield decrementButton.click();
+            }
+            const value = yield page.getByRole("textbox").inputValue();
+            (0, fixtures_1.expect)(parseInt(value) || 0).toBeGreaterThanOrEqual(10);
+        }
+    }));
+    (0, fixtures_1.test)("maxValue prevents values above maximum", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox maxValue="20" initialValue="15" />`);
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            // Click multiple times to try to go above maximum
+            for (let i = 0; i < 10; i++) {
+                yield incrementButton.click();
+            }
+            const value = yield page.getByRole("textbox").inputValue();
+            (0, fixtures_1.expect)(parseInt(value) || 0).toBeLessThanOrEqual(20);
+        }
+    }));
+});
+// =============================================================================
+// 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" />`);
+        const spinButtons = page.getByTestId("input").locator("button");
+        for (let i = 0; i < (yield spinButtons.count()); i++) {
+            const button = spinButtons.nth(i);
+            yield (0, fixtures_1.expect)(button).toHaveAttribute("role", "spinbutton");
+        }
+    }));
+    (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");
+    }));
+    (0, fixtures_1.test)("disabled component has proper attribute", (_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)("readOnly has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox readOnly="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("readonly");
+    }));
+    (0, fixtures_1.test)("spinbox buttons are accessible when present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox />`);
+        const spinButtons = page.locator("button");
+        for (let i = 0; i < (yield spinButtons.count()); i++) {
+            const button = spinButtons.nth(i);
+            yield (0, fixtures_1.expect)(button).toHaveAttribute("role", "spinbutton");
+        }
+    }));
+});
+// =============================================================================
+// 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)("onDidChange is called on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`<NumberBox onDidChange="testState = 'test'" />`);
+        yield page.getByRole("textbox").fill("1");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("test");
+    }));
+    (0, fixtures_1.test)("onDidChange function changes are properly reflected", (_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 focusing the field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`<NumberBox onGotFocus="testState = true" />`);
+        yield page.getByRole("textbox").focus();
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    }));
+    (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)("lostFocus event fires when field is blurred", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`<NumberBox onLostFocus="testState = true" />`);
+        const input = page.getByRole("textbox");
+        yield input.focus();
+        yield input.blur();
+        yield (0, fixtures_1.expect)(input).not.toBeFocused();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
+    }));
+    (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)("value returns current input value", (_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)("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 updates input value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <NumberBox id="numberbox" />
+        <Button label="test" onClick="numberbox.setValue(456)" />
+      </Fragment>`);
+        yield page.getByRole("button", { name: "test" }).click();
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("456");
+    }));
+    (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() focuses the field", (_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).toBeGreaterThanOrEqual(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).toBeLessThanOrEqual(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).toBeGreaterThanOrEqual(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).toBeLessThanOrEqual(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)");
+    }));
+    // Error variant theme variables
+    (0, fixtures_1.test)("error variant borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
+            testThemeVars: { "borderRadius-NumberBox-error": "8px" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-radius", "8px");
+    }));
+    (0, fixtures_1.test)("error variant fontSize applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
+            testThemeVars: { "fontSize-NumberBox-error": "16px" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("font-size", "16px");
+    }));
+    (0, fixtures_1.test)("error variant backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
+            testThemeVars: { "backgroundColor-NumberBox-error": "rgb(255, 240, 240)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 240, 240)");
+    }));
+    // Warning variant theme variables
+    (0, fixtures_1.test)("warning variant borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="warning" />`, {
+            testThemeVars: { "borderColor-NumberBox-warning": "rgb(255, 193, 7)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 193, 7)");
+    }));
+    (0, fixtures_1.test)("warning variant textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="warning" />`, {
+            testThemeVars: { "textColor-NumberBox-warning": "rgb(133, 100, 4)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(133, 100, 4)");
+    }));
+    // Success variant theme variables
+    (0, fixtures_1.test)("success variant borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="valid" />`, {
+            testThemeVars: { "borderColor-NumberBox-success": "rgb(40, 167, 69)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(40, 167, 69)");
+    }));
+    (0, fixtures_1.test)("success variant backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="valid" />`, {
+            testThemeVars: { "backgroundColor-NumberBox-success": "rgb(240, 255, 240)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(240, 255, 240)");
+    }));
+    (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)");
+    }));
+});
+// =============================================================================
+// VALIDATION STATUS TESTS
+// =============================================================================
+fixtures_1.test.describe("Validation", () => {
+    (0, fixtures_1.test)("error borderColor applies with error validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
+            testThemeVars: { "borderColor-NumberBox-error": "rgb(255, 0, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("warning borderColor applies with warning validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="warning" />`, {
+            testThemeVars: { "borderColor-NumberBox-warning": "rgb(255, 165, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 165, 0)");
+    }));
+    (0, fixtures_1.test)("success borderColor applies with valid validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="valid" />`, {
+            testThemeVars: { "borderColor-NumberBox-success": "rgb(0, 128, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 128, 0)");
+    }));
+    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox testId="input" validationStatus="invalid-status" />`, {
+            testThemeVars: {
+                "borderColor-NumberBox": "rgb(0, 0, 0)",
+                "borderColor-NumberBox-error": "rgb(255, 0, 0)",
+                "borderColor-NumberBox-warning": "rgb(255, 165, 0)",
+                "borderColor-NumberBox-success": "rgb(0, 255, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(255, 0, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(255, 165, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(0, 255, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-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("");
+    }));
+    (0, fixtures_1.test)("handles if initialValue is a string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="asdasd" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("asdasd");
+    }));
+    (0, fixtures_1.test)("if initialValue is too large, handles gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="100000000000000000000000000000000000" />`);
+        const input = page.getByRole("textbox");
+        // Should either clamp to max value or handle the large number appropriately
+        yield (0, fixtures_1.expect)(input).toBeVisible();
+    }));
+    (0, fixtures_1.test)("if initialValue is too small, handles gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="-100000000000000000000000000000000000" />`);
+        const input = page.getByRole("textbox");
+        // Should either clamp to min value or handle the small number appropriately
+        yield (0, fixtures_1.expect)(input).toBeVisible();
+    }));
+    (0, fixtures_1.test)("focuses component if autoFocus is set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox autoFocus="{true}" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("readOnly lets user copy from input field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox initialValue="123" readOnly="{true}" />`);
+        const input = page.getByRole("textbox");
+        yield (0, fixtures_1.expect)(input).toHaveValue("123");
+        yield input.focus();
+        yield (0, fixtures_1.expect)(input).toBeFocused();
+    }));
+    // Range and constraint tests with edge cases
+    (0, fixtures_1.test)("maxLength caps the length of the input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox maxLength="3" />`);
+        const input = page.getByRole("textbox");
+        yield input.fill("12345");
+        yield (0, fixtures_1.expect)(input).toHaveValue("123");
+    }));
+    (0, fixtures_1.test)("integersOnly limits input to integers", (_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 contain decimal
+        yield (0, fixtures_1.expect)(input).not.toHaveValue("123.45");
+    }));
+    (0, fixtures_1.test)("zeroOrPositive limits input to non-negative numbers and zero", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox zeroOrPositive="true" initialValue="" />`);
+        yield page.getByRole("textbox").pressSequentially("-5");
+        const value = yield page.getByRole("textbox").inputValue();
+        (0, fixtures_1.expect)(parseInt(value) || 0).toBe(5);
+    }));
+    (0, fixtures_1.test)("using spinbox with zeroOrPositive limits input to non-negative numbers and zero", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox zeroOrPositive="true" initialValue="5" />`);
+        // Try to decrement below zero using spinbox
+        const decrementButton = page
+            .locator("button")
+            .filter({ hasText: /decrement|down|\-/ })
+            .first();
+        if (yield decrementButton.isVisible()) {
+            for (let i = 0; i < 10; i++) {
+                yield decrementButton.click();
+            }
+        }
+        const value = yield page.getByRole("textbox").inputValue();
+        (0, fixtures_1.expect)(parseInt(value) || 0).toBeGreaterThanOrEqual(0);
+    }));
+    (0, fixtures_1.test)("minValue limits input to numbers greater than or equal to minValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox minValue="10" initialValue="15" />`);
+        // Try to decrement below minimum
+        const decrementButton = page
+            .locator("button")
+            .filter({ hasText: /decrement|down|\-/ })
+            .first();
+        if (yield decrementButton.isVisible()) {
+            for (let i = 0; i < 10; i++) {
+                yield decrementButton.click();
+            }
+        }
+        const value = yield page.getByRole("textbox").inputValue();
+        (0, fixtures_1.expect)(parseInt(value) || 0).toBeGreaterThanOrEqual(10);
+    }));
+    (0, fixtures_1.test)("maxValue limits input to numbers less than or equal to maxValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox maxValue="20" initialValue="15" />`);
+        // Try to increment above maximum
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            for (let i = 0; i < 10; i++) {
+                yield incrementButton.click();
+            }
+        }
+        const value = yield page.getByRole("textbox").inputValue();
+        (0, fixtures_1.expect)(parseInt(value) || 0).toBeLessThanOrEqual(20);
+    }));
+    (0, fixtures_1.test)("setting valid integer step adds that value to input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox step="5" initialValue="10" />`);
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("15");
+        }
+    }));
+    (0, fixtures_1.test)("invalid step values use default step", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox step="invalid" initialValue="10" />`);
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("11"); // Default step is 1
+        }
+    }));
+    (0, fixtures_1.test)("clicking spinbox up-arrow that would overflow max value does not add value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox maxValue="10" initialValue="10" />`);
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("10");
+        }
+    }));
+    (0, fixtures_1.test)("pressing the up arrow that would overflow max value does not add value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox maxValue="10" initialValue="10" />`);
+        const input = page.getByRole("textbox");
+        yield input.focus();
+        yield page.keyboard.press("ArrowUp");
+        yield (0, fixtures_1.expect)(input).toHaveValue("10");
+    }));
+    (0, fixtures_1.test)("clicking spinbox down-arrow that would underflow min value does not subtract value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox minValue="5" initialValue="5" />`);
+        const decrementButton = page
+            .locator("button")
+            .filter({ hasText: /decrement|down|\-/ })
+            .first();
+        if (yield decrementButton.isVisible()) {
+            yield decrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("5");
+        }
+    }));
+    (0, fixtures_1.test)("pressing the down arrow that would underflow min value does not subtract value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<NumberBox minValue="5" initialValue="5" />`);
+        const input = page.getByRole("textbox");
+        yield input.focus();
+        yield page.keyboard.press("ArrowDown");
+        yield (0, fixtures_1.expect)(input).toHaveValue("5");
+    }));
+    // 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 correctly in layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Stack>
+        <NumberBox label="First" />
+        <NumberBox label="Second" />
+      </Stack>
+    `);
+        yield (0, fixtures_1.expect)(page.getByLabel("First")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Second")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component integrates with forms correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox name="amount" required="true" />`);
+        const input = page.getByRole("textbox");
+        yield (0, fixtures_1.expect)(input).toHaveAttribute("required");
+    }));
+    (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, page }) {
+        yield initTestBed(`<NumberBox initialValue="0" />`);
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            // Hold down the button (simulate long press)
+            yield incrementButton.hover();
+            yield page.mouse.down();
+            yield page.waitForTimeout(600); // Wait longer than initial delay
+            yield page.mouse.up();
+            // Should have incremented multiple times
+            const value = yield page.getByRole("textbox").inputValue();
+            (0, fixtures_1.expect)(parseInt(value) || 0).toBeGreaterThan(1);
+        }
+    }));
+    (0, fixtures_1.test)("readOnly disables spinner buttons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox readOnly="true" initialValue="5" />`);
+        const incrementButton = page
+            .locator("button")
+            .filter({ hasText: /increment|up|\+/ })
+            .first();
+        if (yield incrementButton.isVisible()) {
+            yield incrementButton.click();
+            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("5"); // Should not change
+        }
+    }));
+    (0, fixtures_1.test)("integersOnly with zeroOrPositive combination works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NumberBox integersOnly="true" zeroOrPositive="true" initialValue="5" />`);
+        const input = page.getByRole("textbox");
+        // Try to go negative
+        const decrementButton = page
+            .locator("button")
+            .filter({ hasText: /decrement|down|\-/ })
+            .first();
+        if (yield decrementButton.isVisible()) {
+            for (let i = 0; i < 10; i++) {
+                yield decrementButton.click();
+            }
+            yield (0, fixtures_1.expect)(input).toHaveValue("0"); // Should stop at 0
+        }
+        // Try to add decimal
+        yield input.focus();
+        yield page.keyboard.type(".5");
+        yield (0, fixtures_1.expect)(input).not.toHaveValue("0.5"); // Should not allow decimal
+    }));
+    // 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");
+    }));
+});