hs-uix 1.6.3 → 1.6.5

package/dist/datatable.js

@@ -186,6 +186,8 @@ var DataTable = ({
   showFirstLastButtons,
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
+  title,
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -655,6 +657,8 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = (0, import_react.useCallback)((nextSet) => {
     if (externalSelectedIds == null) {
@@ -1004,7 +1008,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
@@ -1030,7 +1034,7 @@ var DataTable = ({
       onClick: () => handleFilterRemove("all")
     },
     resolvedClearAllLabel
-  )))), showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+  )))), showToolbarCount && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
     selectedIds,
     selectedCount: selectedIds.size,
     displayCount,

package/dist/datatable.mjs

@@ -182,6 +182,8 @@ var DataTable = ({
   showFirstLastButtons,
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
+  title,
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -651,6 +653,8 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = useCallback((nextSet) => {
     if (externalSelectedIds == null) {
@@ -1000,7 +1004,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
@@ -1026,7 +1030,7 @@ var DataTable = ({
       onClick: () => handleFilterRemove("all")
     },
     resolvedClearAllLabel
-  )))), showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0) && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+  )))), showToolbarCount && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
     selectedIds,
     selectedCount: selectedIds.size,
     displayCount,

package/dist/form.js

@@ -378,8 +378,12 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -404,6 +408,8 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // () => void
     submitPosition = "bottom",
     // "bottom" | "none"
+    submitAlign,
+    // default single-step action row alignment
     loading: controlledLoading,
     // controlled loading state
     disabled = false,
@@ -526,6 +532,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -698,6 +705,17 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = (0, import_react.useState)(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const warnConfig = (0, import_react.useCallback)((message) => {
@@ -708,6 +726,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       console.warn(`[FormBuilder] ${message}`);
     }
   }, [isDev]);
+  (0, import_react.useEffect)(() => {
+    if (!isMultiStep || !submitAlign) return;
+    warnConfig("submitAlign is ignored when steps are provided. Use renderButtons for custom multi-step button layout.");
+  }, [isMultiStep, submitAlign, warnConfig]);
   const replaceErrors = (0, import_react.useCallback)(
     (nextErrors) => {
       if (controlledErrors == null) setInternalErrors(nextErrors);
@@ -1274,10 +1296,35 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const handleSubmit = (0, import_react.useCallback)(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -1289,7 +1336,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -1335,7 +1385,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = (0, import_react.useCallback)(async () => {
     if (!isMultiStep) return;
@@ -1428,8 +1478,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -1472,8 +1523,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           const sfValue = formValues[sf.name];
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
-          const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -2270,13 +2322,16 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ import_react.default.createElement(
         import_ui_extensions.Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );
@@ -2310,6 +2365,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
     const isFirstStep = !isMultiStep || currentStep === 0;
+    const singleStepJustify = submitAlign || (showCancel ? "between" : "start");
     const buttonContext = {
       isMultiStep,
       isFirstStep,
@@ -2344,7 +2400,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         submitButtonLabel
       ) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ import_react.default.createElement(
       import_ui_extensions.LoadingButton,
       {
         variant: submitVariant,

package/dist/form.mjs

@@ -382,8 +382,12 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -408,6 +412,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // () => void
     submitPosition = "bottom",
     // "bottom" | "none"
+    submitAlign,
+    // default single-step action row alignment
     loading: controlledLoading,
     // controlled loading state
     disabled = false,
@@ -530,6 +536,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -702,6 +709,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = useState(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = useRef(/* @__PURE__ */ new Set());
   const warnConfig = useCallback((message) => {
@@ -712,6 +730,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       console.warn(`[FormBuilder] ${message}`);
     }
   }, [isDev]);
+  useEffect(() => {
+    if (!isMultiStep || !submitAlign) return;
+    warnConfig("submitAlign is ignored when steps are provided. Use renderButtons for custom multi-step button layout.");
+  }, [isMultiStep, submitAlign, warnConfig]);
   const replaceErrors = useCallback(
     (nextErrors) => {
       if (controlledErrors == null) setInternalErrors(nextErrors);
@@ -1278,10 +1300,35 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const handleSubmit = useCallback(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -1293,7 +1340,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -1339,7 +1389,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = useCallback(async () => {
     if (!isMultiStep) return;
@@ -1432,8 +1482,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -1476,8 +1527,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const sfValue = formValues[sf.name];
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
-          const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -2274,13 +2326,16 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ React.createElement(
         Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );
@@ -2314,6 +2369,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
     const isFirstStep = !isMultiStep || currentStep === 0;
+    const singleStepJustify = submitAlign || (showCancel ? "between" : "start");
     const buttonContext = {
       isMultiStep,
       isFirstStep,
@@ -2348,7 +2404,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         submitButtonLabel
       ) : /* @__PURE__ */ React.createElement(Button, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ React.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && /* @__PURE__ */ React.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ React.createElement(
       LoadingButton,
       {
         variant: submitVariant,

package/dist/index.js

@@ -217,6 +217,8 @@ var DataTable = ({
   showFirstLastButtons,
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
+  title,
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -686,6 +688,8 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = (0, import_react.useCallback)((nextSet) => {
     if (externalSelectedIds == null) {
@@ -1035,7 +1039,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
@@ -1061,7 +1065,7 @@ var DataTable = ({
       onClick: () => handleFilterRemove("all")
     },
     resolvedClearAllLabel
-  )))), showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+  )))), showToolbarCount && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
     selectedIds,
     selectedCount: selectedIds.size,
     displayCount,
@@ -1514,8 +1518,12 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -1540,6 +1548,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // () => void
     submitPosition = "bottom",
     // "bottom" | "none"
+    submitAlign,
+    // default single-step action row alignment
     loading: controlledLoading,
     // controlled loading state
     disabled = false,
@@ -1662,6 +1672,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -1834,6 +1845,17 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = (0, import_react2.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = (0, import_react2.useState)(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
   const warnConfig = (0, import_react2.useCallback)((message) => {
@@ -1844,6 +1866,10 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       console.warn(`[FormBuilder] ${message}`);
     }
   }, [isDev]);
+  (0, import_react2.useEffect)(() => {
+    if (!isMultiStep || !submitAlign) return;
+    warnConfig("submitAlign is ignored when steps are provided. Use renderButtons for custom multi-step button layout.");
+  }, [isMultiStep, submitAlign, warnConfig]);
   const replaceErrors = (0, import_react2.useCallback)(
     (nextErrors) => {
       if (controlledErrors == null) setInternalErrors(nextErrors);
@@ -2410,10 +2436,35 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const handleSubmit = (0, import_react2.useCallback)(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -2425,7 +2476,10 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -2471,7 +2525,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = (0, import_react2.useCallback)(async () => {
     if (!isMultiStep) return;
@@ -2564,8 +2618,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -2608,8 +2663,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           const sfValue = formValues[sf.name];
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
-          const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -3406,13 +3462,16 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ import_react2.default.createElement(
         import_ui_extensions2.Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );
@@ -3446,6 +3505,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
     const isFirstStep = !isMultiStep || currentStep === 0;
+    const singleStepJustify = submitAlign || (showCancel ? "between" : "start");
     const buttonContext = {
       isMultiStep,
       isFirstStep,
@@ -3480,7 +3540,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         submitButtonLabel
       ) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ import_react2.default.createElement(
       import_ui_extensions2.LoadingButton,
       {
         variant: submitVariant,

package/dist/index.mjs

@@ -182,6 +182,8 @@ var DataTable = ({
   showFirstLastButtons,
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
+  title,
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -651,6 +653,8 @@ var DataTable = ({
     selectionResetRef.current = combinedSelectionResetKey;
   }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
   const applySelection = useCallback((nextSet) => {
     if (externalSelectedIds == null) {
@@ -1000,7 +1004,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
@@ -1026,7 +1030,7 @@ var DataTable = ({
       onClick: () => handleFilterRemove("all")
     },
     resolvedClearAllLabel
-  )))), showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0) && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+  )))), showToolbarCount && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
     selectedIds,
     selectedCount: selectedIds.size,
     displayCount,
@@ -1519,8 +1523,12 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // validate on blur
     validateOnSubmit = true,
     // validate all before onSubmit
-    onValidationChange
+    onValidationChange,
     // (errors) => void
+    onValidationFail,
+    // ({ errors, fields, firstInvalidField }) => void — called when submit-time validation blocks submission
+    openSectionOnValidationFail = false
+    // auto-open accordion section containing first invalid field on submit failure
   } = props;
   const {
     steps,
@@ -1545,6 +1553,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // () => void
     submitPosition = "bottom",
     // "bottom" | "none"
+    submitAlign,
+    // default single-step action row alignment
     loading: controlledLoading,
     // controlled loading state
     disabled = false,
@@ -1667,6 +1677,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "tooltip",
       "required",
       "readOnly",
+      "alwaysEditable",
       "disabled",
       "defaultValue",
       "fieldProps",
@@ -1839,6 +1850,17 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     }
     return map;
   }, [fields]);
+  const sectionIdByFieldName = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (Array.isArray(sections)) {
+      for (const sec of sections) {
+        if (!sec || !Array.isArray(sec.fields)) continue;
+        for (const name of sec.fields) map.set(name, sec.id);
+      }
+    }
+    return map;
+  }, [sections]);
+  const [validationOpenSection, setValidationOpenSection] = useState2(null);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
   const configWarningsRef = useRef2(/* @__PURE__ */ new Set());
   const warnConfig = useCallback2((message) => {
@@ -1849,6 +1871,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       console.warn(`[FormBuilder] ${message}`);
     }
   }, [isDev]);
+  useEffect2(() => {
+    if (!isMultiStep || !submitAlign) return;
+    warnConfig("submitAlign is ignored when steps are provided. Use renderButtons for custom multi-step button layout.");
+  }, [isMultiStep, submitAlign, warnConfig]);
   const replaceErrors = useCallback2(
     (nextErrors) => {
       if (controlledErrors == null) setInternalErrors(nextErrors);
@@ -2415,10 +2441,35 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const handleSubmit = useCallback2(
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
+      const reportValidationFailure = (errors) => {
+        const errorNames = Object.keys(errors).filter((n) => !!errors[n]);
+        if (errorNames.length === 0) return;
+        const orderedNames = allVisibleFields.map((f) => f.name).filter((n) => errorNames.includes(n));
+        for (const n of errorNames) if (!orderedNames.includes(n)) orderedNames.push(n);
+        const fieldInfos = orderedNames.map((name) => {
+          const f = fieldByName.get(name);
+          return {
+            name,
+            label: f == null ? void 0 : f.label,
+            sectionId: sectionIdByFieldName.get(name)
+          };
+        });
+        const firstInvalidField = fieldInfos[0];
+        if (openSectionOnValidationFail && (firstInvalidField == null ? void 0 : firstInvalidField.sectionId)) {
+          setValidationOpenSection({
+            id: firstInvalidField.sectionId,
+            nonce: ((validationOpenSection == null ? void 0 : validationOpenSection.nonce) || 0) + 1
+          });
+        }
+        if (onValidationFail) {
+          onValidationFail({ errors, fields: fieldInfos, firstInvalidField });
+        }
+      };
       if (validateOnSubmit) {
         const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
           replaceErrors(errors);
+          reportValidationFailure(errors);
           return;
         }
         const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
@@ -2430,7 +2481,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             ])
           ];
           await Promise.all(pendingValidations);
-          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) {
+            reportValidationFailure(formErrorsRef.current);
+            return;
+          }
         }
       }
       const reset = () => {
@@ -2476,7 +2530,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget, onValidationFail, openSectionOnValidationFail, sectionIdByFieldName, validationOpenSection]
   );
   const handleNext = useCallback2(async () => {
     if (!isMultiStep) return;
@@ -2569,8 +2623,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || formReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
+    const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
+    const isReadOnly = field.readOnly || fieldFormReadOnly;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -2613,8 +2668,9 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const sfValue = formValues[sf.name];
           const sfError = formErrors[sf.name] || null;
           const sfLabel = itemIdx === 0 ? sf.label : void 0;
-          const sfReadOnly = sf.readOnly || formReadOnly;
-          const sfDisabled = disabled || resolveDisabled(sf, formValues) || formReadOnly;
+          const sfFormReadOnly = sf.alwaysEditable ? false : formReadOnly;
+          const sfReadOnly = sf.readOnly || sfFormReadOnly;
+          const sfDisabled = disabled || resolveDisabled(sf, formValues) || sfFormReadOnly;
           const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
           const sfProps = {
             name: sf.name,
@@ -3411,13 +3467,16 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const sectionContext = { values: formValues, errors: formErrors };
       const sectionOverrides = sec.columns ? { columns: sec.columns } : void 0;
       const accordionContent = /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields, sectionOverrides), sec.renderAfter && sec.renderAfter(sectionContext));
+      const isValidationOverrideTarget = validationOpenSection && validationOpenSection.id === sec.id;
+      const accordionKey = isValidationOverrideTarget ? `${sec.id}::open::${validationOpenSection.nonce}` : sec.id;
+      const accordionDefaultOpen = isValidationOverrideTarget ? true : sec.defaultOpen !== false;
       const accordion = /* @__PURE__ */ React2.createElement(
         Accordion,
         {
-          key: sec.id,
+          key: accordionKey,
           title: sec.label,
           size: "sm",
-          defaultOpen: sec.defaultOpen !== false
+          defaultOpen: accordionDefaultOpen
         },
         accordionContent
       );
@@ -3451,6 +3510,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
     const isFirstStep = !isMultiStep || currentStep === 0;
+    const singleStepJustify = submitAlign || (showCancel ? "between" : "start");
     const buttonContext = {
       isMultiStep,
       isFirstStep,
@@ -3485,7 +3545,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         submitButtonLabel
       ) : /* @__PURE__ */ React2.createElement(Button2, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ React2.createElement(Button2, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React2.createElement(Flex2, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && /* @__PURE__ */ React2.createElement(Button2, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ React2.createElement(
       LoadingButton,
       {
         variant: submitVariant,

package/form.d.ts

@@ -17,6 +17,7 @@ export {
   FormBuilderLabels,
   FormBuilderAlertConfig,
   FormBuilderButtonsRenderContext,
+  FormBuilderSubmitAlign,
   FormBuilderLayout,
   FormBuilderLayoutEntry,
   FormBuilderSection,

package/index.d.ts

@@ -75,6 +75,7 @@ export type {
   FormBuilderLabels,
   FormBuilderAlertConfig,
   FormBuilderButtonsRenderContext,
+  FormBuilderSubmitAlign,
   FormBuilderLayout,
   FormBuilderLayoutEntry,
   FormBuilderSection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hs-uix",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Production-ready UI components for HubSpot UI Extensions — DataTable, FormBuilder, and more",
   "license": "MIT",
   "main": "./dist/index.js",