xmlui 0.10.19 → 0.10.20

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

@@ -154,6 +154,199 @@ fixtures_1.test.describe("Visual States & Themes", () => {
     }));
 });
 // =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies basic theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "backgroundColor-ContentSeparator": "rgb(255, 0, 0)",
+                "size-ContentSeparator": "5px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("background-color", "rgb(255, 0, 0)");
+        const height = yield driver.getComputedHeight();
+        (0, fixtures_1.expect)(height).toBe('5px');
+    }));
+    (0, fixtures_1.test)("applies vertical margin theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "10px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "10px");
+    }));
+    (0, fixtures_1.test)("applies horizontal margin theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "15px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "15px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "15px");
+    }));
+    (0, fixtures_1.test)("specific margin-top overrides vertical margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+                "marginTop-ContentSeparator": "20px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Specific margin-top should override vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "20px");
+        // Bottom should still use vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "10px");
+    }));
+    (0, fixtures_1.test)("specific margin-bottom overrides vertical margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+                "marginBottom-ContentSeparator": "25px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Top should use vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "10px");
+        // Specific margin-bottom should override vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "25px");
+    }));
+    (0, fixtures_1.test)("specific margin-left overrides horizontal margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "15px",
+                "marginLeft-ContentSeparator": "30px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Specific margin-left should override horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "30px");
+        // Right should still use horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "15px");
+    }));
+    (0, fixtures_1.test)("specific margin-right overrides horizontal margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "15px",
+                "marginRight-ContentSeparator": "35px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Left should use horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "15px");
+        // Specific margin-right should override horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "35px");
+    }));
+    (0, fixtures_1.test)("all specific margins override general margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+                "marginHorizontal-ContentSeparator": "15px",
+                "marginTop-ContentSeparator": "5px",
+                "marginBottom-ContentSeparator": "8px",
+                "marginLeft-ContentSeparator": "12px",
+                "marginRight-ContentSeparator": "18px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // All specific margins should be used instead of general ones
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "5px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "8px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "12px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "18px");
+    }));
+    (0, fixtures_1.test)("fallback to vertical margin when specific margins not defined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "20px",
+                // No specific marginTop or marginBottom defined
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Should fall back to vertical margin values
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "20px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "20px");
+    }));
+    (0, fixtures_1.test)("fallback to horizontal margin when specific margins not defined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "25px",
+                // No specific marginLeft or marginRight defined
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Should fall back to horizontal margin values
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "25px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "25px");
+    }));
+    (0, fixtures_1.test)("handles zero margin values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginTop-ContentSeparator": "0px",
+                "marginBottom-ContentSeparator": "0px",
+                "marginLeft-ContentSeparator": "0px",
+                "marginRight-ContentSeparator": "0px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "0px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "0px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "0px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "0px");
+    }));
+    (0, fixtures_1.test)("handles negative margin values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginTop-ContentSeparator": "-5px",
+                "marginLeft-ContentSeparator": "-10px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "-5px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "-10px");
+    }));
+    (0, fixtures_1.test)("handles different unit types for margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginTop-ContentSeparator": "1rem",
+                "marginBottom-ContentSeparator": "2em",
+                "marginLeft-ContentSeparator": "10px",
+                "marginRight-ContentSeparator": "10px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Browser computes rem/em to px values, so we check that margins are applied (not zero)
+        const marginTop = yield driver.separator.evaluate((el) => window.getComputedStyle(el).marginTop);
+        const marginBottom = yield driver.separator.evaluate((el) => window.getComputedStyle(el).marginBottom);
+        // rem and em should resolve to non-zero pixel values
+        (0, fixtures_1.expect)(parseFloat(marginTop)).toBeGreaterThan(0);
+        (0, fixtures_1.expect)(parseFloat(marginBottom)).toBeGreaterThan(0);
+        // px values should be exact
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "10px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "10px");
+    }));
+    (0, fixtures_1.test)("mixed general and specific margins work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "8px",
+                "marginHorizontal-ContentSeparator": "12px",
+                "marginTop-ContentSeparator": "16px", // Override top
+                "marginRight-ContentSeparator": "20px", // Override right
+                // marginBottom and marginLeft should use general values
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "16px"); // Specific
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "8px"); // Fallback to vertical
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "12px"); // Fallback to horizontal
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "20px"); // Specific
+    }));
+});
+// =============================================================================
 // EDGE CASE TESTS
 // =============================================================================
 fixtures_1.test.describe("Edge Cases", () => {

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

@@ -492,7 +492,7 @@ fixtures_1.test.describe("User Interactions", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
-        driver.dayInput.fill("18");
+        yield driver.dayInput.fill("18");
         yield driver.clearButton.click();
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
@@ -504,7 +504,7 @@ fixtures_1.test.describe("User Interactions", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
-        driver.dayInput.fill("18");
+        yield driver.dayInput.fill("18");
         yield driver.clearButton.click();
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
@@ -805,8 +805,8 @@ fixtures_1.test.describe("Accessibility", () => {
 fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("component renders with theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
         yield initTestBed(`
-      <DateInput 
-        testId="dateInput" 
+      <DateInput
+        testId="dateInput"
         style="--color-divider: red; --width-input: 100px; --backgroundColor-input-invalid: rgb(255, 200, 200);"
       />
     `);
@@ -818,8 +818,8 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
     (0, fixtures_1.test)("component renders with clearable and theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`
-      <DateInput 
-        testId="dateInput" 
+      <DateInput
+        testId="dateInput"
         clearable="{true}"
         style="--padding-button: 15px; --outlineColor-button--focused: green;"
       />

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

@@ -141,7 +141,7 @@ const fixtures_1 = require("../../testing/fixtures");
     yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-haspopup", "menu");
     yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-expanded", "false");
     yield driver.open();
-    page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
+    yield page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
     yield page.getByRole("menu").waitFor();
 }));
 (0, fixtures_1.test)("is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
@@ -151,10 +151,10 @@ const fixtures_1 = require("../../testing/fixtures");
     </DropdownMenu>
   `);
     const btn = page.getByRole("button");
-    page.keyboard.press("Tab");
+    yield page.keyboard.press("Tab");
     yield (0, fixtures_1.expect)(btn).toBeFocused();
     // Open with Enter
-    page.keyboard.press("Enter");
+    yield page.keyboard.press("Enter");
     yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
     // Navigate and select with keyboard
     yield page.keyboard.press("ArrowDown");

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZoneNative.js

@@ -32,15 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-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());
-    });
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -81,7 +72,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     const accept = acceptedFileTypes
         ? acceptedFileTypes.split(",").reduce((acc, type) => (Object.assign(Object.assign({}, acc), { [type.trim()]: [] })), {})
         : undefined;
-    const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         if (!acceptedFiles.length) {
             return;
         }
@@ -89,7 +80,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
             value: acceptedFiles,
         });
         onUpload === null || onUpload === void 0 ? void 0 : onUpload(acceptedFiles);
-    }), [onUpload, updateState]);
+    }, [onUpload, updateState]);
     const { getRootProps, getInputProps, isDragActive, open, inputRef, isDragAccept } = useDropzone({
         onDrop,
         noClick: true,
@@ -97,7 +88,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
         noDragEventsBubbling: true,
         disabled,
         accept,
-        maxFiles
+        maxFiles,
     });
     const doOpen = (0, misc_1.useEvent)(() => {
         open();
@@ -139,5 +130,5 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     }, [doOpen, registerComponentApi, uid]);
     const _b = getRootProps(Object.assign(Object.assign({}, rest), { style, className: (0, classnames_1.default)(FileUploadDropZone_module_scss_1.default.wrapper, className), onPaste: handleOnPaste })), { ref } = _b, rootProps = __rest(_b, ["ref"]);
     const rootRef = (0, component_utils_1.getComposedRef)(ref, forwardedRef);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { "data-drop-enabled": !disabled, ref: rootRef, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, (isDragActive && isDragAccept) && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "upload" }), text] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { "data-drop-enabled": !disabled, ref: rootRef, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, isDragActive && isDragAccept && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "upload" }), text] }))] })));
 });

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

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const abstractions_1 = require("../abstractions");
 const fixtures_1 = require("../../testing/fixtures");
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
 // Test data constants
 const errorDisplayInterceptor = {
     initialize: `
@@ -177,6 +178,21 @@ fixtures_1.test.describe("Basic Functionality", () => {
             const driver = yield createFormDriver("form");
             yield (0, fixtures_1.expect)(driver.component).toBeVisible();
         }));
+        (0, fixtures_1.test)("handles theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
+            const spaceBase = 0.25; //rem
+            const labelSize = 10;
+            const widthInPx = labelSize * spaceBase * 16; //px
+            yield initTestBed(`
+        <Theme space-base="${spaceBase}rem">
+          <Form itemLabelWidth="$space-${labelSize}">
+            <FormItem label="Test Label" bindTo="test" testId="testField" />
+          </Form>
+        </Theme>
+      `);
+            const driver = yield createFormItemDriver("testField");
+            const labelWidth = yield (0, component_test_helpers_1.getElementStyle)(driver.label, "width");
+            (0, fixtures_1.expect)(labelWidth).toBe(`${widthInPx}px`);
+        }));
     });
     // =============================================================================
     // ITEM LABEL BREAK TESTS
@@ -272,7 +288,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         }));
         (0, fixtures_1.test)("onSuccess event fires on successful submission", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormDriver, }) {
             const { testStateDriver } = yield initTestBed(`
-        <Form 
+        <Form
           testId="form"
           submitUrl="/test-success"
           onSuccess="testState = 'success'; console.log('Submitted successfully')"
@@ -296,7 +312,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         }));
         (0, fixtures_1.test)("onReset event fires when form is reset", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
             const { testStateDriver } = yield initTestBed(`
-        <Form 
+        <Form
           id="testForm"
           onReset="testState = 'reset'"
           data="{{ name: 'Test' }}">
@@ -314,7 +330,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
     fixtures_1.test.describe("APIs", () => {
         (0, fixtures_1.test)("update method updates form data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
             yield initTestBed(`
-        <Form 
+        <Form
           id="testForm"
           data="{{ name: 'Original', age: 25 }}">
           <FormItem label="Name" bindTo="name" testId="nameField" />
@@ -334,7 +350,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         }));
         (0, fixtures_1.test)("reset method resets form to initial state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
             yield initTestBed(`
-        <Form 
+        <Form
           id="testForm"
           data="{{ name: 'Initial' }}">
           <FormItem label="Name" bindTo="name" testId="nameField" />
@@ -603,7 +619,7 @@ fixtures_1.test.describe("Edge Cases", () => {
     }));
     (0, fixtures_1.test)("handles form with empty string properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
-      <Form 
+      <Form
         cancelLabel=""
         saveLabel=""
         data="{{ name: '' }}">
@@ -829,8 +845,8 @@ fixtures_1.test.describe("Edge Cases", () => {
       </property>
     </Form>`);
     const driver = yield createFormDriver("form");
-    (0, fixtures_1.expect)(driver.submitButton).not.toBeVisible();
-    (0, fixtures_1.expect)(driver.cancelButton).not.toBeVisible();
+    yield (0, fixtures_1.expect)(driver.submitButton).not.toBeVisible();
+    yield (0, fixtures_1.expect)(driver.cancelButton).not.toBeVisible();
 }));
 (0, fixtures_1.test)("setting buttonRowTemplate without buttons still runs submit on Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, }) {
     const { testStateDriver } = yield initTestBed(`
@@ -1105,7 +1121,7 @@ fixtures_1.test.describe("Edge Cases", () => {
     yield formDriver.submitForm();
     yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
 }));
-fixtures_1.test.skip("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver }) {
+fixtures_1.test.skip("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
     yield initTestBed(`
       <Form testId="form">
         <FormItem testId="testField" bindTo="test" label="test" required />
@@ -1196,7 +1212,7 @@ const smartCrudInterceptor = {
     const formDriver = yield createFormDriver("modalForm");
     const inputElement = (yield createFormItemDriver("nameInput")).input;
     const inputDriver = yield createTextBoxDriver(inputElement);
-    (yield createButtonDriver("openModalButton")).click();
+    yield (yield createButtonDriver("openModalButton")).click();
     yield (0, fixtures_1.expect)(inputDriver.field).toHaveValue("Smith");
     yield inputDriver.field.fill("EDITED-Smith");
     yield formDriver.submitForm("click");

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

@@ -45,6 +45,7 @@ const FormContext_1 = require("./FormContext");
 const lodash_es_1 = require("lodash-es");
 const classnames_1 = __importDefault(require("classnames"));
 const react_slot_1 = require("@radix-ui/react-slot");
+const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
 const PART_CANCEL_BUTTON = "cancelButton";
 const PART_SUBMIT_BUTTON = "submitButton";
 const getByPath = (obj, path) => {
@@ -241,7 +242,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
     ]);
     const doCancel = (0, misc_1.useEvent)(() => {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-        requestModalFormClose();
+        void requestModalFormClose();
     });
     const doSubmit = (0, misc_1.useEvent)((event) => __awaiter(this, void 0, void 0, function* () {
         var _a;
@@ -277,7 +278,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             dispatch((0, formActions_1.formSubmitted)());
             yield (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(result));
             if (!keepModalOpenOnSubmit) {
-                requestModalFormClose();
+                void requestModalFormClose();
             }
             // we only reset the form automatically if the initial value is empty ()
             if (initialValue === constants_1.EMPTY_OBJECT) {
@@ -353,7 +354,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             update: updateData,
         });
     }, [doReset, updateData, registerComponentApi]);
-    let safeButtonRow = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] })) });
+    let safeButtonRow = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] })) }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.createElement)("form", Object.assign({}, rest, { style: style, className: (0, classnames_1.default)(Form_module_scss_1.default.wrapper, className), onSubmit: doSubmit, onReset: doReset, id: id, key: formState.resetVersion, ref: formRef }),
                 (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }),
                 (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }),
@@ -395,7 +396,9 @@ exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChi
     const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
         extractValue.asOptionalString(node.props._data_url);
-    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
+    const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
+    const { cssProps: itemLabelWidthCssProps } = (0, layout_resolver_1.resolveLayoutProps)({ width: itemLabelWidth });
+    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: itemLabelWidthCssProps.width, hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
                 defaultHandler: submitUrl
                     ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs, inProgressNotificationMessage: "${inProgressNotificationMessage}", completedNotificationMessage: "${completedNotificationMessage}", errorNotificationMessage: "${errorNotificationMessage}" })`
                     : undefined,

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

@@ -33,7 +33,9 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
     description: "`FormItem` wraps individual input controls within a `Form`, providing data " +
         "binding, validation, labeling, and layout functionality. It connects form " +
         "controls to the parent form's data model and handles validation feedback " +
-        "automatically.",
+        "automatically." +
+        "\n\n" +
+        "> **Note:** `FormItem` must be used inside a `Form` component.",
     props: {
         bindTo: {
             description: "This property binds a particular input field to one of the attributes of the \`Form\` data. " +

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

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // BASIC FUNCTIONALITY TESTS
@@ -855,18 +854,10 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield input.field.blur();
         yield (0, fixtures_1.expect)(driver.validationStatusIndicator).toBeVisible();
     }));
-    fixtures_1.test.fixme("handles FormItem with no Form parent gracefully", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("If not inside a Form, FormItem renders error component - test should also account for this"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormItemDriver }) {
-        yield initTestBed(`
-      <FormItem testId="formItem" label="Standalone FormItem" />
-    `);
-        const driver = yield createFormItemDriver("formItem");
-        // Component should either render with fallback behavior or be gracefully hidden
-        const isVisible = yield driver.component.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }
-        else {
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
+    (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();
     }));
 });

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

@@ -112,15 +112,15 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             return safeBindTo;
         }
     }, [bindTo, defaultId, itemIndex, parentFormItemId]);
-    const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
-    const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
-    const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
-    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
+    const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || (value === null || value === void 0 ? void 0 : value.itemLabelWidth));
+    const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value === null || value === void 0 ? void 0 : value.itemLabelBreak);
+    const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || (value === null || value === void 0 ? void 0 : value.itemLabelPosition) || DEFAULT_LABEL_POSITIONS[type]);
+    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value === null || value === void 0 ? void 0 : value.originalSubject, formItemId));
     const initialValue = initialValueFromSubject === undefined ? initialValueFromProps : initialValueFromSubject;
-    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
-    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[formItemId]);
-    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
-    const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value === null || value === void 0 ? void 0 : value.subject, formItemId));
+    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.validationResults[formItemId]);
+    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.dispatch);
+    const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -217,6 +217,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
     }
     const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    const isInsideForm = (0, FormContext_1.useIsInsideForm)();
+    if (!isInsideForm) {
+        throw new Error("FormItem must be used inside a Form");
+    }
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, className: className, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, children: isHelperTextShown &&
                 (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations.map((singleValidation, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [singleValidation.isValid && !!singleValidation.validMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.validMessage, status: "valid", style: { opacity: singleValidation.stale ? 0.5 : undefined } })), !singleValidation.isValid && !!singleValidation.invalidMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.invalidMessage, status: singleValidation.severity, style: { opacity: singleValidation.stale ? 0.5 : undefined } }))] }, i)))) }), children: formControl }));
 });

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

@@ -273,7 +273,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
         if (!ignore) {
             dispatch((0, formActions_1.fieldValidated)(bindTo, partialResult));
             if (partialResult.partial) {
-                (() => __awaiter(this, void 0, void 0, function* () {
+                void (() => __awaiter(this, void 0, void 0, function* () {
                     const result = yield throttledAsyncValidate(validations, onValidate, deferredValue);
                     if (!ignore) {
                         // console.log(`async validation result for ${bindTo}`, result);
@@ -288,7 +288,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
     }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
 }
 function useValidationDisplay(bindTo, value, validationResult, validationMode = FormContext_1.defaultValidationMode) {
-    const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
+    const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
     const forceShowValidationResult = interactionFlags.forceShowValidationResult;
     const focused = interactionFlags.focused;
     const afterFirstDirtyBlur = interactionFlags.afterFirstDirtyBlur;

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

@@ -293,7 +293,7 @@ function useCustomSvgIconRenderer(resourceUrl) {
         if (!resourceUrl) {
             return;
         }
-        ensureCustomSvgIcon(resourceUrl);
+        void ensureCustomSvgIcon(resourceUrl);
     }, [ensureCustomSvgIcon, resourceUrl]);
     const customSvg = resourceUrl ? customSvgs[resourceUrl] : null;
     const iconRenderer = (0, react_1.useCallback)(({ style, className }) => {

package/dist/scripts/src/components/List/ListNative.js

@@ -293,7 +293,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref)
             !pageInfo.isFetchingPrevPage &&
             !isFetchingPrevPage.current) {
             isFetchingPrevPage.current = true;
-            (function doFetch() {
+            void (function doFetch() {
                 return __awaiter(this, void 0, void 0, function* () {
                     try {
                         yield requestFetchPrevPage();
@@ -314,7 +314,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList(_a, ref)
             !pageInfo.isFetchingNextPage &&
             !isFetchingNextPage.current) {
             isFetchingNextPage.current = true;
-            (function doFetch() {
+            void (function doFetch() {
                 return __awaiter(this, void 0, void 0, function* () {
                     try {
                         yield requestFetchNextPage();