xmlui 0.10.25 → 0.11.1

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -260,6 +260,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             height: miniMode || hideX ? 0 : xAxisHeight,
             tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
             tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
+            domain: [0, (dataMax) => dataMax * 1.05],
         }
         : {
             type: "category",
@@ -292,6 +293,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             tickCount: yTickCount,
             tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
             width: miniMode || hideY ? 0 : yAxisWidth,
+            domain: [0, (dataMax) => dataMax * 1.1],
         };
     return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: validData
                     .map((d) => d[nameKey])

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -123,7 +123,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
                     payloadArray.push({
                         label: dataKey,
                         value: originalPayload[dataKey],
-                        color: colorValues[index] || colorValues[0]
+                        color: colorValues[index] || colorValues[0],
                     });
                 }
             });
@@ -181,7 +181,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
                     ? safeData
                         .map((d) => d === null || d === void 0 ? void 0 : d[nameKey])
                         .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx)))
-                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize } }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [(dataMin) => dataMin * 0.95, (dataMax) => dataMax * 1.05] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                     bottom: 0,
                                     left: 0,
                                     right: 0,

package/dist/scripts/src/components/Charts/Tooltip/TooltipContent.spec.js

@@ -266,10 +266,10 @@ fixtures_1.test.describe("Basic Functionality", () => {
             const indicator = page.locator(tooltipIndicatorSelector);
             yield (0, fixtures_1.expect)(indicator).toBeVisible();
             // Indicator should have background color
-            const backgroundColor = yield indicator.evaluate(el => window.getComputedStyle(el).backgroundColor);
+            const backgroundColor = yield indicator.evaluate((el) => window.getComputedStyle(el).backgroundColor);
             (0, fixtures_1.expect)(backgroundColor).not.toBe("rgba(0, 0, 0, 0)"); // Not transparent
         }));
-        (0, fixtures_1.test)("applies consistent styling across different chart types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        (0, fixtures_1.test)("applies consistent styling across different chart types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
             // Test in LineChart context
             yield initTestBed(`
         <LineChart
@@ -281,9 +281,11 @@ fixtures_1.test.describe("Basic Functionality", () => {
         />
       `);
             yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            // Hover over line to trigger tooltip
-            const line = page.locator(".recharts-line-curve");
-            yield line.hover();
+            // Hover over chart area to trigger tooltip (Recharts tooltip activates on chart area, not just line)
+            const chartSvg = page.locator(".recharts-surface").first();
+            yield chartSvg.hover({ position: { x: 200, y: 200 } });
+            // Wait for tooltip to appear
+            yield page.waitForTimeout(500);
             yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
             // Should have consistent styling
             const indicator = page.locator(tooltipIndicatorSelector);
@@ -337,7 +339,7 @@ fixtures_1.test.describe("Accessibility", () => {
         yield (0, fixtures_1.expect)(valueText).toHaveCSS("font-size", /\d+px/);
         // Should have proper contrast (background vs text)
         const tooltipContainer = page.locator(tooltipContentSelector);
-        const backgroundColor = yield tooltipContainer.evaluate(el => window.getComputedStyle(el).backgroundColor);
+        const backgroundColor = yield tooltipContainer.evaluate((el) => window.getComputedStyle(el).backgroundColor);
         (0, fixtures_1.expect)(backgroundColor).not.toBe("transparent");
     }));
     (0, fixtures_1.test)("tooltip appears on keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {

package/dist/scripts/src/components/Form/Form.js

@@ -78,6 +78,17 @@ exports.FormMd = (0, metadata_helpers_1.createMetadata)({
             type: "boolean",
             defaultValue: FormNative_1.defaultProps.hideButtonRowUntilDirty,
         },
+        hideButtonRow: {
+            description: `This property hides the button row entirely when set to true.`,
+            type: "boolean",
+            defaultValue: FormNative_1.defaultProps.hideButtonRow,
+        },
+        enableSubmit: {
+            description: `This property controls whether the submit button is enabled. When set to false, ` +
+                `the submit button is disabled and the form cannot be submitted.`,
+            type: "boolean",
+            defaultValue: FormNative_1.defaultProps.enableSubmit,
+        },
         submitUrl: (0, metadata_helpers_1.d)(`URL to submit the form data.`),
         submitMethod: {
             description: "This property sets the HTTP method to use when submitting the form data. If not " +
@@ -117,6 +128,14 @@ exports.FormMd = (0, metadata_helpers_1.createMetadata)({
                 data: "An object containing the form data to update.",
             },
         },
+        validate: {
+            description: "This method triggers validation on all form fields without submitting the form. " +
+                "It displays validation errors and returns the validation result along with the cleaned form data. " +
+                "This is useful for implementing custom submit buttons or performing operations that require " +
+                "validated data without actually submitting the form.",
+            signature: "validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>",
+            returns: "A promise that resolves to an object containing validation status, cleaned data, and detailed validation results.",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Form_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -97,6 +97,334 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield (0, fixtures_1.expect)(buttons.last()).toHaveText("Cancel");
     }));
     // =============================================================================
+    // HIDE BUTTON ROW TESTS
+    // =============================================================================
+    fixtures_1.test.describe("hideButtonRow property", () => {
+        (0, fixtures_1.test)("hides button row when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="true"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="false"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("hides custom button row template when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRow="true">
+          <property name="buttonRowTemplate">
+            <Button label="Custom Save" type="submit" testId="customSave" />
+            <Button label="Custom Cancel" type="button" testId="customCancel" />
+          </property>
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("customCancel")).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("overrides hideButtonRowUntilDirty when both are set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRow="true" hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Button row should be hidden even before making changes
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            // Make the form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John");
+            // Button row should still be hidden even after making changes
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="{null}"/>`);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="{undefined}"/>`);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles string 'true' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="true"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles string 'false' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form hideButtonRow="false"/>`);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("form submission still works with hidden button row via external submit", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment>
+          <Form id="testForm" hideButtonRow="true" onSubmit="arg => testState = arg">
+            <FormItem label="Name" bindTo="name" testId="nameField" />
+            <Button type="submit" label="External Submit" testId="externalSubmit" />
+          </Form>
+        </Fragment>
+      `);
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John Doe");
+            yield page.getByTestId("externalSubmit").click();
+            const submittedData = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(submittedData).toEqual({ name: "John Doe" });
+        }));
+    });
+    // =============================================================================
+    // HIDE BUTTON ROW UNTIL DIRTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("hideButtonRowUntilDirty property", () => {
+        (0, fixtures_1.test)("hides button row initially when form is not dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row when form becomes dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Make form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("keeps button row visible after form becomes dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            // Make form dirty
+            yield input.field.fill("John");
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+            // Clear the input (form is still dirty)
+            yield input.field.clear();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row by default when property set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="false">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows button row by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form>
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("works with multiple form items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <FormItem label="Email" bindTo="email" testId="emailField" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Modify second field
+            const emailDriver = yield createFormItemDriver("emailField");
+            const emailInput = yield createTextBoxDriver(emailDriver.input);
+            yield emailInput.field.fill("test@example.com");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("hides custom button row template until dirty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <property name="buttonRowTemplate">
+            <Button label="Custom Save" type="submit" testId="customSave" />
+          </property>
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).not.toBeVisible();
+            // Make form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByTestId("customSave")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles null value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="{null}">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles undefined value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="{undefined}">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Should show button row (default behavior)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Cancel" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("works with form initialized with data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true" data="{{ name: 'Initial' }}">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            // Initially hidden (form has data but is not dirty)
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Make form dirty
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("Modified");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("button row appears when checkbox is checked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Accept Terms" bindTo="terms" type="checkbox" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Check the checkbox
+            const checkbox = page.getByRole("checkbox");
+            yield checkbox.check();
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("button row appears when slider value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Form hideButtonRowUntilDirty="true">
+          <FormItem label="Volume" bindTo="volume" type="slider" testId="volumeField" />
+        </Form>
+      `);
+            // Initially hidden
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).not.toBeVisible();
+            // Move the slider using keyboard
+            const slider = page.getByRole("slider");
+            yield slider.press("ArrowRight");
+            // Now visible
+            yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Save" })).toBeVisible();
+        }));
+    });
+    // =============================================================================
+    // ENABLE SUBMIT PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("enableSubmit property", () => {
+        (0, fixtures_1.test)("disables submit button when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeVisible();
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+        }));
+        (0, fixtures_1.test)("enables submit button when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="true"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeVisible();
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("submit button is enabled by default when property not set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`<Form/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("prevents form submission when set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form enableSubmit="false" onSubmit="arg => testState = arg">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+            // Verify form does not submit (button is disabled, so click won't work)
+            yield saveButton.click({ force: true }); // Force click on disabled button
+            // testState should remain null since submit was prevented
+            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+        }));
+        (0, fixtures_1.test)("allows form submission when set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form enableSubmit="true" onSubmit="arg => testState = arg">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+        </Form>
+      `);
+            const driver = yield createFormItemDriver("nameField");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("John Doe");
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+            yield saveButton.click();
+            const submittedData = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(submittedData).toEqual({ name: "John Doe" });
+        }));
+        (0, fixtures_1.test)("handles null value gracefully (defaults to enabled)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="{null}"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("handles string 'true' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="true"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("handles string 'false' value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+        }));
+        (0, fixtures_1.test)("does not affect cancel button", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false"/>`);
+            const cancelButton = page.getByRole("button", { name: "Cancel" });
+            yield (0, fixtures_1.expect)(cancelButton).toBeEnabled();
+        }));
+        (0, fixtures_1.test)("works with custom submit button label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enableSubmit="false" saveLabel="Submit Now"/>`);
+            const submitButton = page.getByRole("button", { name: "Submit Now" });
+            yield (0, fixtures_1.expect)(submitButton).toBeDisabled();
+        }));
+        (0, fixtures_1.test)("works together with form disabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Form enabled="false" enableSubmit="true"/>`);
+            const saveButton = page.getByRole("button", { name: "Save" });
+            // Form disabled takes precedence
+            yield (0, fixtures_1.expect)(saveButton).toBeDisabled();
+        }));
+    });
+    // =============================================================================
     // DATA PROPERTY TESTS
     // =============================================================================
     fixtures_1.test.describe("data property", () => {
@@ -366,6 +694,122 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield page.getByRole("button", { name: "Reset" }).click();
             yield (0, fixtures_1.expect)(nameInput.field).toHaveValue("Initial");
         }));
+        (0, fixtures_1.test)("validate method returns validation results without submitting", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <FormItem label="Email" bindTo="email" testId="emailField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Click validate button without filling required field
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.isValid).toBe(false);
+            (0, fixtures_1.expect)(result.errors).toBeDefined();
+            (0, fixtures_1.expect)(result.errors.length).toBeGreaterThan(0);
+        }));
+        (0, fixtures_1.test)("validate method returns isValid true when all validations pass", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill the required field
+            const nameDriver = yield createFormItemDriver("nameField");
+            const nameInput = yield createTextBoxDriver(nameDriver.input);
+            yield nameInput.field.fill("John Doe");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.isValid).toBe(true);
+            (0, fixtures_1.expect)(result.errors.length).toBe(0);
+        }));
+        (0, fixtures_1.test)("validate method returns cleaned form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <FormItem label="Age" bindTo="age" type="integer" testId="ageField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill form fields
+            const nameDriver = yield createFormItemDriver("nameField");
+            const nameInput = yield createTextBoxDriver(nameDriver.input);
+            yield nameInput.field.fill("John Doe");
+            const ageDriver = yield createFormItemDriver("ageField");
+            const ageInput = yield createTextBoxDriver(ageDriver.input);
+            yield ageInput.field.fill("30");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.data).toEqual({ name: "John Doe", age: "30" });
+        }));
+        (0, fixtures_1.test)("validate method displays validation errors on form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
+            yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <Button onClick="testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Click validate without filling required field
+            yield page.getByTestId("validateBtn").click();
+            // Validation error should be displayed
+            const nameField = page.getByTestId("nameField");
+            yield (0, fixtures_1.expect)(nameField).toContainText("This field is required");
+        }));
+        (0, fixtures_1.test)("validate method does not trigger form submission", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm" onSubmit="testState = 'submitted'">
+          <FormItem label="Name" bindTo="name" testId="nameField" />
+          <Button onClick="testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill form
+            const nameDriver = yield createFormItemDriver("nameField");
+            const nameInput = yield createTextBoxDriver(nameDriver.input);
+            yield nameInput.field.fill("John");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait a bit
+            yield page.waitForTimeout(200);
+            // testState should remain null (not 'submitted')
+            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+        }));
+        (0, fixtures_1.test)("validate method returns complete validation results object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form id="testForm">
+          <FormItem label="Name" bindTo="name" required="true" testId="nameField" />
+          <FormItem label="Email" bindTo="email" testId="emailField" />
+          <Button onClick="testState = testForm.validate()" label="Validate" testId="validateBtn" />
+        </Form>
+      `);
+            // Fill only email (name is required)
+            const emailDriver = yield createFormItemDriver("emailField");
+            const emailInput = yield createTextBoxDriver(emailDriver.input);
+            yield emailInput.field.fill("test@example.com");
+            // Click validate button
+            yield page.getByTestId("validateBtn").click();
+            // Wait for validation to complete
+            yield page.waitForTimeout(100);
+            const result = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(result).toBeTruthy();
+            (0, fixtures_1.expect)(result.isValid).toBeDefined();
+            (0, fixtures_1.expect)(result.data).toBeDefined();
+            (0, fixtures_1.expect)(result.errors).toBeDefined();
+            (0, fixtures_1.expect)(result.warnings).toBeDefined();
+            (0, fixtures_1.expect)(result.validationResults).toBeDefined();
+        }));
     });
     // =============================================================================
     // CONTEXT VARIABLE TESTS