@godxjp/ui 27.0.0 → 27.3.1

package/dist/components/feedback/dialog.js

@@ -6,9 +6,11 @@ import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
 import { AlertCircle, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../../lib/dev.js";
 import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
 import { useOverlayCloseFocus } from "./overlay-close-focus.js";
+import { closeOnEscape, NonModalPortal, useNonModalPortal } from "./non-modal-layer.js";
 import { buttonVariants } from "../general/button.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
@@ -41,6 +43,7 @@ function useDialogOpenState(component) {
 }
 const DialogLabelContext = React.createContext(null);
 const DialogVariantContext = React.createContext("default");
+const DialogModalContext = React.createContext(true);
 const OVERLAY_CLASS = "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0";
 const CONTENT_CLASS = "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none";
 function DialogShell({
@@ -59,8 +62,47 @@ function DialogShell({
   const descriptionId = React.useId();
   const labels = React.useMemo(() => ({ titleId, descriptionId }), [titleId, descriptionId]);
   const dataState = state.isOpen ? "open" : "closed";
-  useOverlayCloseFocus(state.isOpen, onCloseAutoFocus);
+  const requestedModal = React.useContext(DialogModalContext);
+  const modal = requestedModal || role === "alertdialog";
+  const ignoresNonModal = !requestedModal && role === "alertdialog";
+  React.useEffect(() => {
+    if (ignoresNonModal && isDevelopment()) {
+      console.warn(
+        '[godxjp-ui] Dialog: `modal={false}` is ignored for `variant="destructive"` \u2014 an alertdialog is always modal (WAI-ARIA APG).'
+      );
+    }
+  }, [ignoresNonModal]);
+  const { contentRef, isMounted } = useNonModalPortal(state.isOpen, !modal);
+  useOverlayCloseFocus(state.isOpen, onCloseAutoFocus, modal ? void 0 : contentRef);
   const overlayPortalContainer = useOverlayPortalContainer();
+  const dialog = /* @__PURE__ */ jsx(
+    RacDialog,
+    {
+      role,
+      "aria-labelledby": props["aria-labelledby"] ?? titleId,
+      "aria-describedby": props["aria-describedby"] ?? descriptionId,
+      "data-slot": "dialog-content",
+      "data-state": dataState,
+      className: cn(CONTENT_CLASS, className),
+      render: (racProps) => {
+        const { "data-rac": _rac, ref: racRef, ...rest } = racProps;
+        return modal ? /* @__PURE__ */ jsx("section", { ...rest, ...props, style, ref: mergeRefs(ref, racRef) }) : /* @__PURE__ */ jsx(
+          "section",
+          {
+            ...rest,
+            ...props,
+            style,
+            ref: mergeRefs(ref, racRef, contentRef),
+            onKeyDown: chain(props.onKeyDown, closeOnEscape(() => state.setOpen(false)))
+          }
+        );
+      },
+      children: /* @__PURE__ */ jsx(DialogLabelContext.Provider, { value: labels, children })
+    }
+  );
+  if (!modal) {
+    return isMounted ? /* @__PURE__ */ jsx(NonModalPortal, { container: overlayPortalContainer, children: dialog }) : null;
+  }
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
@@ -71,33 +113,18 @@ function DialogShell({
       "data-slot": "dialog-overlay",
       "data-state": dataState,
       className: cn(OVERLAY_CLASS, overlayClassName),
-      children: /* @__PURE__ */ jsx(Modal, { className: "contents", children: /* @__PURE__ */ jsx(
-        RacDialog,
-        {
-          role,
-          "aria-labelledby": props["aria-labelledby"] ?? titleId,
-          "aria-describedby": props["aria-describedby"] ?? descriptionId,
-          "data-slot": "dialog-content",
-          "data-state": dataState,
-          className: cn(CONTENT_CLASS, className),
-          render: (racProps) => {
-            const { "data-rac": _rac, ref: racRef, ...rest } = racProps;
-            return /* @__PURE__ */ jsx("section", { ...rest, ...props, style, ref: mergeRefs(ref, racRef) });
-          },
-          children: /* @__PURE__ */ jsx(DialogLabelContext.Provider, { value: labels, children })
-        }
-      ) })
+      children: /* @__PURE__ */ jsx(Modal, { className: "contents", children: dialog })
     }
   );
 }
 function DialogRoot({
   children,
-  modal: _modal,
+  modal = true,
   variant = "default",
   ...openProps
 }) {
   const state = useOverlayOpenState(openProps);
-  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DialogVariantContext.Provider, { value: variant, children }) });
+  return /* @__PURE__ */ jsx(DialogOpenContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DialogModalContext.Provider, { value: modal, children: /* @__PURE__ */ jsx(DialogVariantContext.Provider, { value: variant, children }) }) });
 }
 function DialogTrigger({ asChild, onClick, ...props }) {
   const state = useDialogOpenState("DialogTrigger");

package/dist/components/feedback/non-modal-layer.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * Trạng thái dựng của nhánh non-modal. `enabled=false` (nhánh modal) thì không làm gì: `contentRef`
+ * không được gắn, và `ModalOverlay` tự lo hoạt ảnh thoát.
+ */
+export declare function useNonModalPortal(isOpen: boolean, enabled: boolean): {
+    contentRef: React.RefObject<HTMLElement | null>;
+    isMounted: boolean;
+};
+/** `onKeyDown` cho thẻ dialog non-modal: Esc (tiêu điểm ở trong) đóng. */
+export declare function closeOnEscape(close: () => void): (event: React.KeyboardEvent<HTMLElement>) => void;
+/** Portal + `FocusScope autoFocus restoreFocus` (không `contain`) quanh bề mặt non-modal. */
+export declare function NonModalPortal({ container, children, }: {
+    container: Element | undefined;
+    children: React.ReactNode;
+}): React.ReactPortal | null;

package/dist/components/feedback/non-modal-layer.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useExitAnimation } from "@react-aria/utils";
+import { FocusScope } from "react-aria";
+function useNonModalPortal(isOpen, enabled) {
+  const contentRef = React.useRef(null);
+  const isExiting = useExitAnimation(contentRef, enabled && isOpen);
+  return { contentRef, isMounted: isOpen || isExiting };
+}
+function closeOnEscape(close) {
+  return (event) => {
+    if (event.key === "Escape" && !event.defaultPrevented && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    }
+  };
+}
+function NonModalPortal({
+  container,
+  children
+}) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(FocusScope, { autoFocus: true, restoreFocus: true, children }),
+    container ?? document.body
+  );
+}
+export {
+  NonModalPortal,
+  closeOnEscape,
+  useNonModalPortal
+};

package/dist/components/feedback/sheet.d.ts

@@ -19,13 +19,16 @@ export interface SheetProps {
     /** Gọi khi trạng thái mở đổi. */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Giữ tên prop của Radix. RAC không có kiểu overlay không-modal: `Modal` LUÔN khoá cuộn và ẩn
-     * nền khỏi trình đọc màn hình, nên `modal={false}` không còn tắt được điều đó.
+     * `false` renders a NON-MODAL sheet (WAI-ARIA APG allows non-modal dialogs): the page behind
+     * stays interactive and in the accessibility tree, no scroll lock, no scrim, an outside press
+     * does not close it, no `aria-modal`. Focus moves in on open, Tab can leave, Escape closes while
+     * focus is inside, focus returns to the trigger. Side, size and tokens are unchanged. Default
+     * `true`. gh#701.
      */
     modal?: boolean;
     children?: React.ReactNode;
 }
-export declare function Sheet({ open, defaultOpen, onOpenChange, modal: _modal, children }: SheetProps): React.JSX.Element;
+export declare function Sheet({ open, defaultOpen, onOpenChange, modal, children, }: SheetProps): React.JSX.Element;
 export interface SheetTriggerProps extends React.ComponentPropsWithRef<"button"> {
     /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
     asChild?: boolean;
@@ -74,7 +77,7 @@ export interface SheetContentProps extends React.ComponentPropsWithRef<"section"
      */
     responsive?: SheetResponsiveProp;
 }
-export declare function SheetContent({ side, className, children, showCloseButton, overlayClassName, forceMount: _forceMount, width, responsive, style, ref, ...props }: SheetContentProps): React.JSX.Element;
+export declare function SheetContent({ side, className, children, showCloseButton, overlayClassName, forceMount: _forceMount, width, responsive, style, ref, ...props }: SheetContentProps): React.JSX.Element | null;
 export declare namespace SheetContent {
     var displayName: string;
 }

package/dist/components/feedback/sheet.js

@@ -11,6 +11,7 @@ import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
 import { useOverlayCloseFocus } from "./overlay-close-focus.js";
+import { closeOnEscape, NonModalPortal, useNonModalPortal } from "./non-modal-layer.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const SHEET_BREAKPOINT_TOKEN = "--sheet-responsive-breakpoint-width";
@@ -28,8 +29,15 @@ function useSheetOpenState(component) {
   }
   return state;
 }
+const SheetModalContext = React.createContext(true);
 const SheetLabelContext = React.createContext(null);
-function Sheet({ open, defaultOpen, onOpenChange, modal: _modal, children }) {
+function Sheet({
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+  children
+}) {
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
   const isOpen = open ?? uncontrolled;
   const setOpen = React.useCallback(
@@ -45,7 +53,7 @@ function Sheet({ open, defaultOpen, onOpenChange, modal: _modal, children }) {
     [isOpen, open, onOpenChange]
   );
   const state = React.useMemo(() => ({ isOpen, setOpen }), [isOpen, setOpen]);
-  return /* @__PURE__ */ jsx(SheetOpenContext.Provider, { value: state, children });
+  return /* @__PURE__ */ jsx(SheetOpenContext.Provider, { value: state, children: /* @__PURE__ */ jsx(SheetModalContext.Provider, { value: modal, children }) });
 }
 function SheetTrigger({ asChild, onClick, ...props }) {
   const state = useSheetOpenState("SheetTrigger");
@@ -132,8 +140,59 @@ function SheetContent({
   const widthSet = width != null && horizontal;
   const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
   const dataState = state.isOpen ? "open" : "closed";
-  useOverlayCloseFocus(state.isOpen);
+  const modal = React.useContext(SheetModalContext);
+  const { contentRef, isMounted } = useNonModalPortal(state.isOpen, !modal);
+  useOverlayCloseFocus(state.isOpen, void 0, modal ? void 0 : contentRef);
   const overlayPortalContainer = useOverlayPortalContainer();
+  const dialog = /* @__PURE__ */ jsx(
+    RacDialog,
+    {
+      "aria-labelledby": props["aria-labelledby"] ?? titleId,
+      "aria-describedby": props["aria-describedby"] ?? descriptionId,
+      "data-slot": "sheet-content",
+      "data-state": dataState,
+      "data-responsive": responsive,
+      "data-side": resolvedSide,
+      className: cn(
+        sheetVariants({ side: resolvedSide }),
+        // `width` caps at the viewport: full-width panel on a small screen, capped on a large one.
+        widthSet && "w-[min(var(--sheet-width),100%)] max-w-none sm:max-w-none",
+        // Only the RESPONSIVE bottom presentation is capped — a plain `side="bottom"` sheet keeps
+        // its content-sized height so existing usage is untouched.
+        bottomSheet && "max-h-[var(--sheet-bottom-max-height)]",
+        className
+      ),
+      render: (racProps) => {
+        const { "data-rac": _rac, ref: racRef, ...rest } = racProps;
+        return modal ? /* @__PURE__ */ jsx("section", { ...rest, ...props, style: mergedStyle, ref: mergeRefs(ref, racRef) }) : /* @__PURE__ */ jsx(
+          "section",
+          {
+            ...rest,
+            ...props,
+            style: mergedStyle,
+            ref: mergeRefs(ref, racRef, contentRef),
+            onKeyDown: chain(props.onKeyDown, closeOnEscape(() => state.setOpen(false)))
+          }
+        );
+      },
+      children: /* @__PURE__ */ jsxs(SheetLabelContext.Provider, { value: labels, children: [
+        children,
+        showCloseButton ? /* @__PURE__ */ jsxs(
+          SheetClose,
+          {
+            className: "ui-sheet-close ui-focus-ring disabled:pointer-events-none",
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "ui-sheet-close-icon", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
+            ]
+          }
+        ) : null
+      ] })
+    }
+  );
+  if (!modal) {
+    return isMounted ? /* @__PURE__ */ jsx(NonModalPortal, { container: overlayPortalContainer, children: dialog }) : null;
+  }
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
@@ -144,43 +203,7 @@ function SheetContent({
       "data-slot": "sheet-overlay",
       "data-state": dataState,
       className: cn(SHEET_OVERLAY_CLASS, overlayClassName),
-      children: /* @__PURE__ */ jsx(Modal, { className: "contents", children: /* @__PURE__ */ jsx(
-        RacDialog,
-        {
-          "aria-labelledby": props["aria-labelledby"] ?? titleId,
-          "aria-describedby": props["aria-describedby"] ?? descriptionId,
-          "data-slot": "sheet-content",
-          "data-state": dataState,
-          "data-responsive": responsive,
-          "data-side": resolvedSide,
-          className: cn(
-            sheetVariants({ side: resolvedSide }),
-            // `width` caps at the viewport: full-width panel on a small screen, capped on a large one.
-            widthSet && "w-[min(var(--sheet-width),100%)] max-w-none sm:max-w-none",
-            // Only the RESPONSIVE bottom presentation is capped — a plain `side="bottom"` sheet keeps
-            // its content-sized height so existing usage is untouched.
-            bottomSheet && "max-h-[var(--sheet-bottom-max-height)]",
-            className
-          ),
-          render: (racProps) => {
-            const { "data-rac": _rac, ref: racRef, ...rest } = racProps;
-            return /* @__PURE__ */ jsx("section", { ...rest, ...props, style: mergedStyle, ref: mergeRefs(ref, racRef) });
-          },
-          children: /* @__PURE__ */ jsxs(SheetLabelContext.Provider, { value: labels, children: [
-            children,
-            showCloseButton ? /* @__PURE__ */ jsxs(
-              SheetClose,
-              {
-                className: "ui-sheet-close ui-focus-ring disabled:pointer-events-none",
-                children: [
-                  /* @__PURE__ */ jsx(X, { className: "ui-sheet-close-icon", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
-                ]
-              }
-            ) : null
-          ] })
-        }
-      ) })
+      children: /* @__PURE__ */ jsx(Modal, { className: "contents", children: dialog })
     }
   );
 }

package/dist/components/layout/org-switcher.js

@@ -105,7 +105,7 @@ function OrgSwitcherPanel({
       ] }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs(Command, { label: labels.title, className: "ui-org-switcher-command", children: [
+  return /* @__PURE__ */ jsxs(Command, { label: labels.title, className: "ui-org-switcher-command", split: true, children: [
     /* @__PURE__ */ jsx(CommandInput, { placeholder: labels.search, "aria-label": labels.search }),
     /* @__PURE__ */ jsxs(CommandList, { children: [
       /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),

package/dist/components/layout/responsive-grid.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ResponsiveGridColumnsProp, ResponsiveGridFlowProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { ResponsiveGridAlignProp, ResponsiveGridColumnsProp, ResponsiveGridFlowProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
 import type { PadProp, PadRawProp } from "../../props/vocabulary/index.js";
 import type { GapProp } from "../../props/vocabulary/layout.prop.js";
 export type ResponsiveGridProps = {
@@ -12,6 +12,12 @@ export type ResponsiveGridProps = {
     columns?: ResponsiveGridColumnsProp;
     /** Keep collections in a horizontal sequence; pair with ScrollArea orientation="horizontal". */
     flow?: ResponsiveGridFlowProp;
+    /**
+     * Block-axis alignment of the cells (antd `Row align`). `stretch` makes every cell as tall as
+     * the tallest — Kanban lanes, where an empty lane must stay a full-height drop zone. Omitted,
+     * `flow="columns"` aligns to `start` and `flow="rows"` stretches, as before.
+     */
+    align?: ResponsiveGridAlignProp;
     /**
      * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
      * Wins over `columns` when both are set, so a caller migrating to a preset does not also need
@@ -20,7 +26,7 @@ export type ResponsiveGridProps = {
     preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, flow, gap, pad, padRaw, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, flow, align, gap, pad, padRaw, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
 export declare namespace ResponsiveGrid {
     export { ResponsiveGridItem as Item };
 }

package/dist/components/layout/responsive-grid.js

@@ -31,6 +31,7 @@ function toStyle(resolved) {
 function ResponsiveGrid({
   columns = 4,
   flow = "rows",
+  align,
   gap,
   pad,
   padRaw,
@@ -45,6 +46,7 @@ function ResponsiveGrid({
       className: cn("ui-responsive-grid", className),
       "data-gap": gap,
       "data-flow": flow === "columns" ? "columns" : void 0,
+      "data-align": align,
       style: { ...toStyle(resolved), ...padStyle(pad, padRaw) },
       "data-pad-raw": padRaw === void 0 ? void 0 : "",
       children

package/dist/components/query/mutation-feedback.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { AlertQueryError } from "../feedback/alert.js";
-import { useFormErrorsRegistry } from "../data-entry/form-errors.js";
+import { errorBagHasMessage, useFormErrorsRegistry } from "../data-entry/form-errors.js";
 import { classifyQueryError } from "../../lib/query-error.js";
 function AlertMutationFeedback({
   mutation,
@@ -12,9 +12,7 @@ function AlertMutationFeedback({
   className
 }) {
   const registry = useFormErrorsRegistry();
-  const bagShowsErrors = registry !== null && Object.values(registry.errors).some(
-    (entry) => Array.isArray(entry) ? entry.some(Boolean) : Boolean(entry)
-  );
+  const bagShowsErrors = registry !== null && errorBagHasMessage(registry.errors);
   if (mutation.isPending && pending) return /* @__PURE__ */ jsx(Fragment, { children: pending });
   if (!mutation.isError || mutation.error == null) return null;
   if ((ignoreValidationErrors ?? bagShowsErrors) && classifyQueryError(mutation.error).category === "validation") {

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "27.0.0",
+  "version": "27.3.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/form/form-field-control.d.ts

@@ -2,4 +2,4 @@ import * as React from "react";
 import { type FieldValues } from "react-hook-form";
 import type { FormFieldControlProp } from "../props/components/form.prop.js";
 export type { FormFieldControlProp } from "../props/components/form.prop.js";
-export declare function FormFieldControl<TFieldValues extends FieldValues>({ name, id, field: fieldKey, labelAddon, layout, labelWidth, controlWidth, colSpan, label, required, helper, disabled, dependencies, getValueFromEvent, normalize, help, validateStatus, hasFeedback, feedback, preserve, className, children, }: FormFieldControlProp<TFieldValues>): React.JSX.Element;
+export declare function FormFieldControl<TFieldValues extends FieldValues>({ name, id, field: fieldKey, labelAddon, layout, labelWidth, controlWidth, colSpan, label, required, helper, disabled, dependencies, getValueFromEvent, normalize, help, validateStatus, hasFeedback, feedback, preserve, className, valuePropName, children, }: FormFieldControlProp<TFieldValues>): React.JSX.Element;

package/dist/form/form-field-control.js

@@ -51,6 +51,7 @@ function FormFieldControl({
   feedback,
   preserve,
   className,
+  valuePropName,
   children
 }) {
   const autoId = React.useId();
@@ -62,9 +63,23 @@ function FormFieldControl({
   const isDisabled = disabled ?? formDisabled;
   const disabledProp = isDisabled ? { disabled: true } : disabled === false ? { disabled: false } : void 0;
   const readValue = (args, previousValue) => {
-    const raw = getValueFromEvent ? getValueFromEvent(...args) : extractControlValue(args[0]);
+    const extracted = getValueFromEvent ? getValueFromEvent(...args) : extractControlValue(args[0]);
+    const raw = valuePropName === "checked" ? extracted === true : extracted;
     return normalize ? normalize(raw, previousValue) : raw;
   };
+  const renderControl = (bag) => {
+    const render = children;
+    if (valuePropName === "checked") {
+      const { value, onChange, ...rest } = bag;
+      return render({
+        ...rest,
+        checked: value === true,
+        onCheckedChange: (checked) => onChange(checked),
+        ...disabledProp
+      });
+    }
+    return render(bindField({ ...bag, ...disabledProp }));
+  };
   if (adapter) {
     const fieldName = String(name);
     return /* @__PURE__ */ jsx(
@@ -81,17 +96,14 @@ function FormFieldControl({
         hasFeedback,
         feedback,
         className,
-        children: children(
-          bindField({
-            id: resolvedId,
-            name: fieldName,
-            value: adapter.getValue(fieldName),
-            onChange: (...args) => adapter.setValue(fieldName, readValue(args, adapter.getValue(fieldName))),
-            onBlur: () => adapter.onBlur?.(fieldName),
-            ref: noopRef,
-            ...disabledProp
-          })
-        )
+        children: renderControl({
+          id: resolvedId,
+          name: fieldName,
+          value: adapter.getValue(fieldName),
+          onChange: (...args) => adapter.setValue(fieldName, readValue(args, adapter.getValue(fieldName))),
+          onBlur: () => adapter.onBlur?.(fieldName),
+          ref: noopRef
+        })
       }
     );
   }
@@ -125,17 +137,14 @@ function FormFieldControl({
             hasFeedback,
             feedback,
             className,
-            children: children(
-              bindField({
-                id: resolvedId,
-                name: field.name,
-                value: field.value,
-                onChange: (...args) => field.onChange(readValue(args, field.value)),
-                onBlur: field.onBlur,
-                ref: field.ref,
-                ...disabledProp
-              })
-            )
+            children: renderControl({
+              id: resolvedId,
+              name: field.name,
+              value: field.value,
+              onChange: (...args) => field.onChange(readValue(args, field.value)),
+              onBlur: field.onBlur,
+              ref: field.ref
+            })
           }
         )
       }

package/dist/form/form-root.d.ts

@@ -7,4 +7,4 @@ export type { FormRootProp } from "../props/components/form.prop.js";
  * validation) OR `adapter` (a framework-agnostic {@link FormStateAdapter} for a server-driven form
  * library — Inertia's `useForm` via `@godxjp/ui/inertia`, formik, TanStack Form).
  */
-export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, onSubmitFailed, onSubmitError, onReset, scrollToFirstError, disabled, layout, labelWidth, controlWidth, labelAlign, collapseBelow, density, columns, requiredMark, errors, children, className, id, }: FormRootProp<TFieldValues>): React.JSX.Element;
+export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, onSubmitFailed, onSubmitError, submitFailedMessage, onReset, scrollToFirstError, disabled, layout, labelWidth, controlWidth, labelAlign, collapseBelow, density, columns, requiredMark, errors, children, className, id, }: FormRootProp<TFieldValues>): React.JSX.Element;

package/dist/form/form-root.js

@@ -5,8 +5,10 @@ import { FormProvider } from "react-hook-form";
 import { Alert, AlertDescription } from "../components/feedback/alert.js";
 import { ResponsiveGrid } from "../components/layout/responsive-grid.js";
 import { useTranslation } from "../i18n/use-translation.js";
+import { classifyQueryError } from "../lib/query-error.js";
 import { cn } from "../lib/utils.js";
 import { Form } from "../components/data-entry/form.js";
+import { errorBagHasMessage } from "../components/data-entry/form-errors.js";
 import { FormAdapterContext, FormOptionsContext } from "./form-context.js";
 function collectErrorNames(errors, prefix = "", out = []) {
   if (!errors || typeof errors !== "object") return out;
@@ -43,6 +45,7 @@ function FormRoot({
   onSubmit,
   onSubmitFailed,
   onSubmitError,
+  submitFailedMessage,
   onReset,
   scrollToFirstError = true,
   disabled = false,
@@ -63,21 +66,37 @@ function FormRoot({
   const { t } = useTranslation();
   const pending = React.useRef(false);
   const [submitting, setSubmitting] = React.useState(false);
-  const [submitFailed, setSubmitFailed] = React.useState(false);
+  const [submitFailure, setSubmitFailure] = React.useState(null);
   const options = React.useMemo(() => ({ disabled, submitting }), [disabled, submitting]);
+  const fieldsShowFailure = submitFailure?.validation === true && errorBagHasMessage(errors);
+  React.useEffect(() => {
+    if (!fieldsShowFailure) return;
+    setSubmitFailure(
+      (current) => current && !current.shownByFields ? { ...current, shownByFields: true } : current
+    );
+  }, [fieldsShowFailure]);
+  const showSubmitFailed = submitFailure !== null && submitFailure.settled && !submitFailure.shownByFields && !fieldsShowFailure && submitFailedMessage !== false;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    submitFailed && /* @__PURE__ */ jsx(Alert, { tone: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("dataEntry.form.submitFailed") }) }),
+    showSubmitFailed && /* @__PURE__ */ jsx(Alert, { tone: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: submitFailedMessage ?? t("dataEntry.form.submitFailed") }) }),
     columns ? /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children }) : children
   ] });
   const submit = async (work) => {
     if (disabled || pending.current || adapter?.isSubmitting) return;
     pending.current = true;
     setSubmitting(true);
-    setSubmitFailed(false);
+    setSubmitFailure(null);
     try {
       await work();
     } catch (error) {
-      setSubmitFailed(true);
+      const validation = classifyQueryError(error).category === "validation";
+      setSubmitFailure({ error, validation, settled: !validation, shownByFields: false });
+      if (validation) {
+        setTimeout(
+          () => setSubmitFailure(
+            (current) => current && current.error === error ? { ...current, settled: true } : current
+          )
+        );
+      }
       onSubmitError?.(error);
     } finally {
       pending.current = false;
@@ -117,7 +136,7 @@ function FormRoot({
           onReset: (event) => {
             event.preventDefault();
             if (pending.current) return;
-            setSubmitFailed(false);
+            setSubmitFailure(null);
             adapter.reset?.();
             onReset?.();
           },
@@ -151,7 +170,7 @@ function FormRoot({
         onReset: (event) => {
           event.preventDefault();
           if (pending.current) return;
-          setSubmitFailed(false);
+          setSubmitFailure(null);
           form.reset();
           onReset?.();
         },

package/dist/i18n/messages/en.json

@@ -607,7 +607,8 @@
     "trendCurrent": "current"
   },
   "rangeTimeline": {
-    "outsideRange": "Outside the visible range",
+    "outsideAfter": "After the visible range",
+    "outsideBefore": "Before the visible range",
     "schedule": "Schedule"
   },
   "textExamples": {

package/dist/i18n/messages/ja.json

@@ -594,7 +594,8 @@
     "trendCurrent": "現在"
   },
   "rangeTimeline": {
-    "outsideRange": "表示範囲外",
+    "outsideAfter": "表示範囲より後",
+    "outsideBefore": "表示範囲より前",
     "schedule": "スケジュール"
   },
   "textExamples": {

package/dist/i18n/messages/vi.json

@@ -595,7 +595,8 @@
     "trendCurrent": "hiện tại"
   },
   "rangeTimeline": {
-    "outsideRange": "Ngoài khoảng đang xem",
+    "outsideAfter": "Sau khoảng đang xem",
+    "outsideBefore": "Trước khoảng đang xem",
     "schedule": "Lịch công việc"
   },
   "textExamples": {

package/dist/props/components/data-display.prop.d.ts

@@ -294,6 +294,12 @@ export type BadgeProp = {
      * Port name `onRemove` (not `onClose`) — see {@link Badge} JSDoc and `docs/DESIGN-AUTHORITY.md`.
      */
     onRemove?: () => void;
+    /**
+     * The × button's full accessible name, verbatim (antd 5.15+ `closable={{ 'aria-label' }}`, gh#706).
+     * Without it the name quotes the chip's label — a string `children`, or the label's rendered text
+     * when `children` is a link or other node.
+     */
+    removeLabel?: string;
 };
 /** @see CredentialReveal */
 /**
@@ -403,6 +409,12 @@ export type DataTableProp<T> = {
     onRow?: OnRowProp<T>;
     /** Outer frame + vertical rules between columns (antd `bordered`). */
     bordered?: boolean;
+    /**
+     * Zebra rows by logical record (Element Plus `stripe`, Bootstrap `.table-striped`; antd has no
+     * prop). Omit to inherit the theme default `--table-row-striped-alpha`; `true` / `false`
+     * override it for this table.
+     */
+    striped?: boolean;
     /** Explain the next sort step in a tooltip on sortable headers (antd `showSorterTooltip`). */
     showSorterTooltip?: boolean;
     /** Table-wide sort cycle; a column's own `sortDirections` wins (antd `sortDirections`). */