xmlui 0.10.15 → 0.10.18

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

@@ -28,46 +28,50 @@ fixtures_1.test.describe("Basic Functionality", () => {
         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);
-        }));
-    });
+    (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=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 }) {
+    (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)("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 }) {
+    (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" />`);
-        // 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
-        }
+        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 }) {
@@ -87,16 +91,6 @@ fixtures_1.test.describe("Basic Functionality", () => {
         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" />`);
@@ -112,11 +106,6 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const driver = yield createNumberBoxDriver();
         yield (0, fixtures_1.expect)(driver.input).toBeFocused();
     }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createNumberBoxDriver }) {
-        yield initTestBed(`<NumberBox autoFocus="true" label="Auto-focused input" />`);
-        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..." />`);
@@ -124,8 +113,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
     }));
     (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();
+        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 }) {
@@ -167,37 +155,23 @@ fixtures_1.test.describe("Basic Functionality", () => {
         (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 }) {
+    (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 incrementButton = page.locator("button").first();
-        if (yield incrementButton.isVisible()) {
-            yield incrementButton.click();
-            yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("11");
-        }
+        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 }) {
@@ -223,50 +197,44 @@ fixtures_1.test.describe("Basic Functionality", () => {
         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);
-        }
+    (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();
+        (0, fixtures_1.expect)(driver.input).toHaveValue("0");
+        yield driver.decrement();
+        (0, fixtures_1.expect)(driver.input).toHaveValue("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);
-        }
+    (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");
     }));
 });
 // =============================================================================
@@ -275,11 +243,8 @@ fixtures_1.test.describe("Basic Functionality", () => {
 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");
-        }
+        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" />`);
@@ -290,22 +255,6 @@ fixtures_1.test.describe("Accessibility", () => {
         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
@@ -388,27 +337,11 @@ fixtures_1.test.describe("Event Handling", () => {
         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");
@@ -416,14 +349,6 @@ fixtures_1.test.describe("Event Handling", () => {
         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'" />
@@ -459,15 +384,6 @@ fixtures_1.test.describe("API", () => {
         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>
@@ -478,15 +394,6 @@ fixtures_1.test.describe("API", () => {
         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>
@@ -507,15 +414,6 @@ fixtures_1.test.describe("API", () => {
         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>
@@ -543,7 +441,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         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.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" />`);
@@ -557,7 +455,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         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.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" />`);
@@ -569,7 +467,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         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.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" />`);
@@ -581,7 +479,7 @@ fixtures_1.test.describe("Input Adornments", () => {
         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.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(`
@@ -803,26 +701,12 @@ fixtures_1.test.describe("Theme Variables", () => {
         });
         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)" },
@@ -870,14 +754,8 @@ fixtures_1.test.describe("Validation", () => {
         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)");
     }));
 });
@@ -897,156 +775,6 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         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 />`);
@@ -1079,25 +807,6 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         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, createNumberBoxDriver }) {
-        yield initTestBed(`
-      <Stack>
-        <NumberBox label="First" testId="first"/>
-        <NumberBox label="Second" testId="second" />
-      </Stack>
-    `);
-        const driver1 = yield createNumberBoxDriver("first");
-        const driver2 = yield createNumberBoxDriver("second");
-        yield (0, fixtures_1.expect)(driver1.input).toBeVisible();
-        yield (0, fixtures_1.expect)(driver1.label).toBeVisible();
-        yield (0, fixtures_1.expect)(driver2.input).toBeVisible();
-        yield (0, fixtures_1.expect)(driver2.label).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>
@@ -1111,52 +820,26 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         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 }) {
+    (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 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
+        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 }) {
@@ -1235,3 +918,32 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         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);
+}));