xmlui 0.11.3 → 0.11.6

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

@@ -1,1022 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders with default properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with label property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("Test Label");
-    }));
-    (0, fixtures_1.test)("renders with enabled property set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" enabled="true" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeEnabled();
-    }));
-    (0, fixtures_1.test)("renders with enabled property set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" enabled="false" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeDisabled();
-    }));
-    (0, fixtures_1.test)("renders with required property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Required Field" required="true" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toContainText("Required Field");
-    }));
-    (0, fixtures_1.test)("renders with autoFocus property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" autoFocus="true" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeFocused();
-    }));
-    (0, fixtures_1.test)("renders with bindTo property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form data="{{ testField: 'initial value' }}">
-        <FormItem testId="formItem" type="text" bindTo="testField" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toHaveValue("initial value");
-    }));
-    (0, fixtures_1.test)("renders with initialValue property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" initialValue="default text" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toHaveValue("default text");
-    }));
-    (0, fixtures_1.test)("renders with labelPosition property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Positioned Label" labelPosition="top" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("Positioned Label");
-    }));
-    (0, fixtures_1.test)("renders with labelWidth property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Wide Label" labelWidth="200px" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("Wide Label");
-    }));
-    (0, fixtures_1.test)("renders with labelBreak property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Very Long Label That Should Break" labelBreak="true" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("Very Long Label That Should Break");
-    }));
-    (0, fixtures_1.test)("renders with gap property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Gapped Item" gap="20px" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Type Property", () => {
-    (0, fixtures_1.test)("renders with type 'text'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeVisible();
-        yield (0, fixtures_1.expect)(inputDriver.field).toHaveAttribute("type", "text");
-    }));
-    (0, fixtures_1.test)("renders with type 'password'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="password" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeVisible();
-        yield (0, fixtures_1.expect)(inputDriver.field).toHaveAttribute("type", "password");
-    }));
-    (0, fixtures_1.test)("renders with type 'number'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createNumberBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="number" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createNumberBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeVisible();
-        // XMLUI number inputs use type="text" with inputmode="numeric"
-        yield (0, fixtures_1.expect)(inputDriver.field).toHaveAttribute("type", "text");
-        yield (0, fixtures_1.expect)(inputDriver.field).toHaveAttribute("inputmode", "numeric");
-    }));
-    (0, fixtures_1.test)("renders with type 'integer'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createNumberBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="integer" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createNumberBoxDriver(formItemDriver.input);
-        yield (0, fixtures_1.expect)(inputDriver.field).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with type 'textarea'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="textarea" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(formItemDriver.input.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with type 'checkbox'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="checkbox" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(formItemDriver.checkbox).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with type 'select'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="select" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(formItemDriver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with type 'radio'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="radio" />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        // Radio FormItems may render as hidden without radio options
-        const isVisible = yield formItemDriver.component.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(formItemDriver.component).toBeVisible();
-        }
-        else {
-            // It's acceptable for radio FormItem to be hidden without options
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-});
-fixtures_1.test.describe("Validation Properties", () => {
-    (0, fixtures_1.test)("renders with minLength property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" minLength="5" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with maxLength property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" maxLength="10" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with minValue property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="number" minValue="0" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with maxValue property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="number" maxValue="100" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with pattern property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" pattern="email" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with regex property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" regex="^[a-zA-Z]+$" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with custom validation messages", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem" 
-          type="text" 
-          required="true"
-          requiredInvalidMessage="This field is mandatory"
-          lengthInvalidMessage="Invalid length"
-          rangeInvalidMessage="Out of range"
-          patternInvalidMessage="Invalid format"
-          regexInvalidMessage="Does not match pattern"
-        />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with validation severity settings", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem" 
-          type="text"
-          lengthInvalidSeverity="warning"
-          rangeInvalidSeverity="error"
-          patternInvalidSeverity="warning"
-          regexInvalidSeverity="error"
-        />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with validationMode property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" validationMode="onChanged" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with customValidationsDebounce property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="text" customValidationsDebounce="500" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Template Properties", () => {
-    (0, fixtures_1.test)("renders with custom inputTemplate", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem">
-          <property name="inputTemplate">
-            <TextBox placeholder="Custom input" />
-          </property>
-        </FormItem>
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("fires onValidate event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem" 
-          type="text" 
-          required="true"
-          onValidate="result => testState = result ? 'valid' : 'invalid'"
-        />
-      </Form>
-    `);
-        const formItemDriver = yield createFormItemDriver("formItem");
-        const inputDriver = yield createTextBoxDriver(formItemDriver.input);
-        // Type some text to trigger validation
-        yield inputDriver.field.fill("test value");
-        yield inputDriver.field.blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("valid");
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("associates label with input using proper labeling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Email Address" type="text" />
-      </Form>
-    `);
-        const input = page.getByRole("textbox");
-        const label = page.getByText("Email Address");
-        yield (0, fixtures_1.expect)(input).toBeVisible();
-        yield (0, fixtures_1.expect)(label).toBeVisible();
-    }));
-    (0, fixtures_1.test)("associates label with checkbox input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Accept Terms" type="checkbox" />
-      </Form>
-    `);
-        const checkbox = page.getByRole("checkbox");
-        const label = page.getByText("Accept Terms");
-        yield (0, fixtures_1.expect)(checkbox).toBeVisible();
-        yield (0, fixtures_1.expect)(label).toBeVisible();
-    }));
-    (0, fixtures_1.test)("indicates required fields with aria-required", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Required Field" type="text" required="true" />
-      </Form>
-    `);
-        const input = page.getByRole("textbox");
-        const label = page.getByText("Required Field");
-        yield (0, fixtures_1.expect)(input).toBeVisible();
-        yield (0, fixtures_1.expect)(label).toBeVisible();
-        // FormItem's required functionality may be implemented differently
-        // Just verify the component renders properly with required=true
-    }));
-    (0, fixtures_1.test)("associates validation messages with input using aria-describedby", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem"
-          label="Test Field" 
-          type="text" 
-          required="true" 
-          requiredInvalidMessage="This field is required"
-        />
-      </Form>
-    `);
-        const formDriver = yield createFormDriver();
-        const formItemDriver = yield createFormItemDriver("formItem");
-        // Submit form to trigger validation
-        yield formDriver.submitForm();
-        // Check that validation message appears in the component
-        yield (0, fixtures_1.expect)(formItemDriver.component).toContainText("This field is required");
-    }));
-    (0, fixtures_1.test)("supports keyboard navigation for text input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Text Field" type="text" />
-      </Form>
-    `);
-        const input = page.getByRole("textbox");
-        yield input.focus();
-        yield (0, fixtures_1.expect)(input).toBeFocused();
-        yield input.press("Tab");
-        yield (0, fixtures_1.expect)(input).not.toBeFocused();
-    }));
-    (0, fixtures_1.test)("supports keyboard navigation for checkbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Checkbox Field" type="checkbox" />
-      </Form>
-    `);
-        const checkbox = page.getByRole("checkbox");
-        yield checkbox.focus();
-        yield (0, fixtures_1.expect)(checkbox).toBeFocused();
-        yield checkbox.press("Space");
-        yield (0, fixtures_1.expect)(checkbox).toBeChecked();
-        yield checkbox.press("Space");
-        yield (0, fixtures_1.expect)(checkbox).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("provides accessible validation state announcements", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, page, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          label="Required Field" 
-          type="text" 
-          required="true" 
-          requiredInvalidMessage="This field is required"
-        />
-      </Form>
-    `);
-        const formDriver = yield createFormDriver();
-        // Submit form to trigger validation
-        yield formDriver.submitForm();
-        // Check that validation message appears somewhere on the page
-        yield (0, fixtures_1.expect)(page.getByText("This field is required")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("maintains correct role for different input types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem label="Text Field" type="text" />
-        <FormItem label="Checkbox Field" type="checkbox" />
-        <FormItem label="Number Field" type="number" />
-      </Form>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox").first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toBeVisible();
-        // Number inputs in XMLUI appear as textbox with inputmode="numeric"
-        const numberInputs = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(numberInputs).toHaveCount(2); // text and number both use textbox role
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies textColor-FormItemLabel theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Themed Label" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "textColor-FormItemLabel": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveCSS("color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("applies fontSize-FormItemLabel theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Sized Label" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "fontSize-FormItemLabel": "18px",
-            },
-        });
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveCSS("font-size", "18px");
-    }));
-    (0, fixtures_1.test)("applies fontWeight-FormItemLabel theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Bold Label" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "fontWeight-FormItemLabel": "700",
-            },
-        });
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveCSS("font-weight", "700");
-    }));
-    (0, fixtures_1.test)("applies fontStyle-FormItemLabel theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Italic Label" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "fontStyle-FormItemLabel": "italic",
-            },
-        });
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveCSS("font-style", "italic");
-    }));
-    (0, fixtures_1.test)("applies textTransform-FormItemLabel theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="uppercase label" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "textTransform-FormItemLabel": "uppercase",
-            },
-        });
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveCSS("text-transform", "uppercase");
-    }));
-    (0, fixtures_1.test)("applies textColor-FormItemLabel-requiredMark theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Required Field" required="true" />
-      </Form>
-    `, {
-            testThemeVars: {
-                "textColor-FormItemLabel-requiredMark": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createFormItemDriver("formItem");
-        // The required mark styling should be applied
-        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
-    }));
-});
-// =============================================================================
-// OTHER EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Other Edge Cases", () => {
-    (0, fixtures_1.test)("handles null and undefined properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="{null}" type="{undefined}" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles empty string properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="" bindTo="" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles special characters in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test with émojis 🚀 & quotes and unicode 👨‍👩‍👧‍👦" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("Test with émojis 🚀 & quotes and unicode 👨‍👩‍👧‍👦");
-    }));
-    (0, fixtures_1.test)("handles Chinese characters in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="测试中文标签" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText("测试中文标签");
-    }));
-    (0, fixtures_1.test)("handles invalid type gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" type="invalidType" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        // Component may be hidden with invalid type - test for graceful handling
-        const isVisible = yield driver.component.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }
-        else {
-            // It's acceptable for component to be hidden with invalid type
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-    (0, fixtures_1.test)("handles negative values for numeric properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem" 
-          type="text" 
-          minLength="-5" 
-          maxLength="-1" 
-          minValue="-100" 
-          maxValue="-10"
-        />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles very large numbers for properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem" 
-          type="number" 
-          minValue="999999999" 
-          maxValue="9999999999"
-          customValidationsDebounce="999999"
-        />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles object values for string properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Object Label" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        // Component should handle this gracefully
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles extremely long label text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        const longLabel = "This is an extremely long label that contains a lot of text and should test how the component handles very long strings that might cause layout issues or performance problems in the user interface";
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="${longLabel}" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.label).toHaveText(longLabel);
-    }));
-    (0, fixtures_1.test)("handles validation with conflicting min/max values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem 
-          testId="formItem" 
-          type="number" 
-          minValue="100" 
-          maxValue="50"
-          minLength="10"
-          maxLength="5"
-        />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles multiple FormItems without bindTo independently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem1" type="text" initialValue="First" />
-        <FormItem testId="formItem2" type="text" initialValue="Second" />
-      </Form>
-    `);
-        const driver1 = yield createFormItemDriver("formItem1");
-        const driver2 = yield createFormItemDriver("formItem2");
-        const input1 = yield createTextBoxDriver(driver1.input);
-        const input2 = yield createTextBoxDriver(driver2.input);
-        yield (0, fixtures_1.expect)(input1.field).toHaveValue("First");
-        yield (0, fixtures_1.expect)(input2.field).toHaveValue("Second");
-        // Modify one and ensure the other is unaffected
-        yield input1.field.fill("Modified First");
-        yield (0, fixtures_1.expect)(input1.field).toHaveValue("Modified First");
-        yield (0, fixtures_1.expect)(input2.field).toHaveValue("Second");
-    }));
-    ["onChange", "onLostFocus", "errorLate"].forEach((mode) => (0, fixtures_1.test)(`validationMode=${mode}: handle empty input & focus`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="${mode}" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.focus({ timeout: 500 });
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-    })));
-    (0, fixtures_1.test)("validationMode=onChanged: validates input on change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="onChanged" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.fill("v");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-        yield input.field.fill("va");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-        yield input.field.fill("val");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.fill("va");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=onChanged: error still displayed on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="onChanged" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.fill("v");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=onLostFocus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, page, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="onLostFocus" minLength="2" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.focus({ timeout: 500 });
-        yield page.keyboard.type("v");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-        yield input.field.focus({ timeout: 500 });
-        yield page.keyboard.type("a");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=errorLate: handle multiple focus & blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="errorLate" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.focus({ timeout: 500 });
-        yield input.field.blur({ timeout: 500 });
-        yield input.field.focus({ timeout: 500 });
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=errorLate: does not display error for first input until blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, page, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="errorLate" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.focus({ timeout: 500 });
-        yield page.keyboard.type("v");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=errorLate: no error displayed on invalid -> valid -> invalid until first blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="errorLate" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.fill("value");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.fill("va");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=errorLate: still display error on refocus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="errorLate" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.fill("va");
-        yield input.field.blur({ timeout: 500 });
-        yield input.field.focus();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=errorLate: invalid -> valid removes error", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="errorLate" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.fill("va");
-        yield input.field.blur({ timeout: 500 });
-        yield input.field.focus({ timeout: 500 });
-        yield input.field.fill("val");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("validationMode=errorLate: after invalid -> valid, show error on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver, createTextBoxDriver, }) {
-        yield initTestBed(`
-      <Form>
-        <FormItem testId="formItem" label="Test Label" validationMode="errorLate" minLength="3" />
-      </Form>
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        const input = yield createTextBoxDriver(driver.input);
-        yield input.field.fill("va");
-        yield input.field.blur({ timeout: 500 });
-        yield input.field.focus({ timeout: 500 });
-        yield input.field.fill("val", { timeout: 500 });
-        yield input.field.fill("va");
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).not.toBeVisible();
-        yield input.field.blur();
-        yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles FormItem with no Form parent gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<FormItem label="Standalone FormItem" type="text" />`);
-        const field = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(field).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.locator("[data-error-boundary]")).toBeVisible();
-    }));
-    // =============================================================================
-    // NOSUBMIT PROPERTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("noSubmit property", () => {
-        (0, fixtures_1.test)("excludes field from submission when noSubmit is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="field1" label="Included Field" bindTo="included" initialValue="visible" />
-          <FormItem testId="field2" label="Excluded Field" bindTo="excluded" initialValue="hidden" noSubmit="true" />
-        </Form>
-      `);
-            const driver1 = yield createFormItemDriver("field1");
-            const input1 = yield createTextBoxDriver(driver1.input);
-            yield input1.field.fill("submitted value");
-            const driver2 = yield createFormItemDriver("field2");
-            const input2 = yield createTextBoxDriver(driver2.input);
-            yield input2.field.fill("not submitted");
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                included: "submitted value",
-            });
-        }));
-        (0, fixtures_1.test)("includes field in submission when noSubmit is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="field1" label="Field 1" bindTo="field1" initialValue="value1" noSubmit="false" />
-          <FormItem testId="field2" label="Field 2" bindTo="field2" initialValue="value2" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                field1: "value1",
-                field2: "value2",
-            });
-        }));
-        (0, fixtures_1.test)("includes field by default when noSubmit is not specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="field1" label="Field 1" bindTo="field1" initialValue="value1" />
-          <FormItem testId="field2" label="Field 2" bindTo="field2" initialValue="value2" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                field1: "value1",
-                field2: "value2",
-            });
-        }));
-        (0, fixtures_1.test)("excludes field when multiple FormItems with same bindTo all have noSubmit true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="field1" label="FormItem 1" bindTo="shared" initialValue="first" noSubmit="true" />
-          <FormItem testId="field2" label="FormItem 2" bindTo="shared" initialValue="second" noSubmit="true" />
-          <FormItem testId="field3" label="Other Field" bindTo="other" initialValue="included" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                other: "included",
-            });
-        }));
-        (0, fixtures_1.test)("excludes field when any FormItem with same bindTo has noSubmit true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="field1" label="FormItem 1" bindTo="shared" initialValue="first" noSubmit="true" />
-          <FormItem testId="field2" label="FormItem 2" bindTo="shared" initialValue="second" noSubmit="false" />
-          <FormItem testId="field3" label="Other Field" bindTo="other" initialValue="included" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                other: "included",
-            });
-        }));
-        (0, fixtures_1.test)("excludes field when any FormItem with same bindTo has noSubmit true (mixed order)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="field1" label="FormItem 1" bindTo="shared" initialValue="first" noSubmit="false" />
-          <FormItem testId="field2" label="FormItem 2" bindTo="shared" initialValue="second" noSubmit="true" />
-          <FormItem testId="field3" label="Other Field" bindTo="other" initialValue="included" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                other: "included",
-            });
-        }));
-        (0, fixtures_1.test)("field still participates in validation when noSubmit is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem 
-            testId="field1" 
-            label="Required No Submit" 
-            bindTo="excluded" 
-            required="true"
-            noSubmit="true" 
-          />
-        </Form>
-      `);
-            // Try to submit with empty required field
-            yield page.getByRole("button", { name: "Save" }).click();
-            // Form should not submit due to validation error
-            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
-            // Fill the required field
-            const driver = yield createFormItemDriver("field1");
-            const input = yield createTextBoxDriver(driver.input);
-            yield input.field.fill("value");
-            // Now submit should succeed but field should not be in data
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({});
-        }));
-        (0, fixtures_1.test)("noSubmit works with different input types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="text" label="Text" type="text" bindTo="text" initialValue="text" noSubmit="true" />
-          <FormItem testId="number" label="Number" type="number" bindTo="number" initialValue="42" noSubmit="true" />
-          <FormItem testId="checkbox" label="Checkbox" type="checkbox" bindTo="checkbox" initialValue="true" noSubmit="true" />
-          <FormItem testId="included" label="Included" bindTo="included" initialValue="visible" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                included: "visible",
-            });
-        }));
-        (0, fixtures_1.test)("noSubmit works with select type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="select" label="Select" type="select" bindTo="select" initialValue="opt1" noSubmit="true">
-            <Option value="opt1" label="Option 1" />
-            <Option value="opt2" label="Option 2" />
-          </FormItem>
-          <FormItem testId="included" label="Included" bindTo="included" initialValue="visible" />
-        </Form>
-      `);
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                included: "visible",
-            });
-        }));
-        (0, fixtures_1.test)("noSubmit field value changes do not affect submission data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <Form onSubmit="data => testState = data">
-          <FormItem testId="excluded" label="Excluded" bindTo="excluded" initialValue="initial" noSubmit="true" />
-          <FormItem testId="included" label="Included" bindTo="included" initialValue="value" />
-        </Form>
-      `);
-            const excludedDriver = yield createFormItemDriver("excluded");
-            const excludedInput = yield createTextBoxDriver(excludedDriver.input);
-            yield excludedInput.field.fill("changed value");
-            const includedDriver = yield createFormItemDriver("included");
-            const includedInput = yield createTextBoxDriver(includedDriver.input);
-            yield includedInput.field.fill("modified");
-            yield page.getByRole("button", { name: "Save" }).click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-                included: "modified",
-            });
-        }));
-    });
-});