@godxjp/ui 19.0.0 → 19.1.0

package/dist/app/app-provider.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type AppDateFormat, type AppLocale, type AppTimeFormat, type AppTimezone } from "./types.js";
 import type { AppContextValue, AppProviderProp } from "../props/components/app.prop.js";
 export type { AppProviderProp, AppContextValue } from "../props/components/app.prop.js";
-export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProp): React.JSX.Element;
+export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, scaling: initialScaling, emitFieldNames, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, onScalingChange, }: AppProviderProp): React.JSX.Element;
 export declare function useAppContext(): AppContextValue;
 /** Returns null outside AppProvider — used by pickers for optional context. */
 export declare function useOptionalAppContext(): AppContextValue | null;

package/dist/app/app-provider.js

@@ -65,6 +65,7 @@ function AppProvider({
   density: initialDensity = "default",
   fontSize: initialFontSize = "default",
   scaling: initialScaling = null,
+  emitFieldNames = false,
   onLocaleChange,
   onTimezoneChange,
   onTimeFormatChange,
@@ -299,6 +300,7 @@ function AppProvider({
       density,
       fontSize,
       scaling,
+      emitFieldNames,
       setLocale,
       setTimezone,
       setTimeFormat,
@@ -323,6 +325,7 @@ function AppProvider({
       density,
       fontSize,
       scaling,
+      emitFieldNames,
       setLocale,
       setTimezone,
       setTimeFormat,

package/dist/components/data-entry/cascader.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Check, ChevronRight, ChevronsUpDown, Minus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -86,6 +86,7 @@ function Cascader({
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
   const reactId = React.useId();
   const panelId = `${id ?? reactId}-panel`;
   const options = React.useMemo(
@@ -240,6 +241,7 @@ function Cascader({
         Button,
         {
           id,
+          "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
           variant: "outline",
           role: "combobox",

package/dist/components/data-entry/checkbox-group.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
+import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { Checkbox } from "./checkbox.js";
 import { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
@@ -33,6 +33,10 @@ function CheckboxGroup({
   const reactId = React.useId();
   const [value, setValue] = useControllableArray(controlledValue, defaultValue);
   const groupA11y = pickGroupFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, name, "data-field": groupA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = groupA11y["data-field"] ?? identity["data-field"];
+  const optionDomId = (optionValue, index) => id ? `${id}-${optionValue}` : `${reactId}-${optionValue}-${index}`;
   const toggle = (optionValue) => {
     const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
     setValue(next);
@@ -45,17 +49,19 @@ function CheckboxGroup({
         role: "group",
         id,
         ...groupA11y,
+        "data-field": resolvedField,
         "aria-disabled": disabled ? true : void 0,
         "data-orientation": orientation,
         className: choiceGroupClassName(orientation, className),
         children: options.map((opt, index) => {
-          const id2 = `${reactId}-${opt.value}-${index}`;
+          const optionId = optionDomId(opt.value, index);
           const checked = value.includes(opt.value);
-          return /* @__PURE__ */ jsx(Field, { id: id2, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
             Checkbox,
             {
-              id: id2,
-              name,
+              id: optionId,
+              name: resolvedName,
+              "data-field": resolvedField,
               value: opt.value,
               checked,
               disabled: Boolean(disabled) || Boolean(opt.disabled),
@@ -74,6 +80,7 @@ function CheckboxGroup({
       role: "group",
       id,
       ...groupA11y,
+      "data-field": resolvedField,
       "aria-disabled": disabled ? true : void 0,
       "data-orientation": orientation,
       className: cn(choiceGroupClassName(orientation), className),

package/dist/components/data-entry/checkbox.js

@@ -4,28 +4,37 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { useFieldIdentity } from "../../lib/field-a11y.js";
 import { CheckboxGroup } from "./checkbox-group.js";
-const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    "data-slot": "checkbox",
-    className: cn(
-      // `disabled:cursor-not-allowed disabled:opacity-50` and the checked fill are DELETED, not
-      // moved (#319): `.ui-checkbox:disabled, .ui-checkbox[data-disabled]` and
-      // `.ui-checkbox[data-state="checked"]` in styles/control.css already declare both, reading
-      // --disabled-opacity and --checkbox-checked-background. Utilities are layered AFTER
-      // components in Tailwind v4, so these literals were silently OUTRANKING those knobs — a
-      // service overriding --checkbox-checked-background got no fill change at all. Radix sets
-      // `data-state`/`data-disabled` on the root, so the CSS rules match. Rendering is unchanged:
-      // both knobs default to exactly the values these utilities hard-coded.
-      "peer ui-checkbox aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) })
-  }
-));
+const CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => {
+  const identity = useFieldIdentity({
+    id: props.id,
+    name: props.name,
+    "data-field": props["data-field"]
+  });
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      "data-slot": "checkbox",
+      className: cn(
+        // `disabled:cursor-not-allowed disabled:opacity-50` and the checked fill are DELETED, not
+        // moved (#319): `.ui-checkbox:disabled, .ui-checkbox[data-disabled]` and
+        // `.ui-checkbox[data-state="checked"]` in styles/control.css already declare both, reading
+        // --disabled-opacity and --checkbox-checked-background. Utilities are layered AFTER
+        // components in Tailwind v4, so these literals were silently OUTRANKING those knobs — a
+        // service overriding --checkbox-checked-background got no fill change at all. Radix sets
+        // `data-state`/`data-disabled` on the root, so the CSS rules match. Rendering is unchanged:
+        // both knobs default to exactly the values these utilities hard-coded.
+        "peer ui-checkbox aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none",
+        className
+      ),
+      ...props,
+      ...identity,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) })
+    }
+  );
+});
 CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
 const Checkbox = Object.assign(CheckboxRoot, {
   Group: CheckboxGroup

package/dist/components/data-entry/date-picker.js

@@ -5,7 +5,7 @@ import { CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/parse.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -30,6 +30,9 @@ function DatePicker({
   const { dayPickerLocale } = usePickerLocales(localeProp);
   const [open, setOpen] = React.useState(false);
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = fieldA11y["data-field"] ?? identity["data-field"];
   const reactId = React.useId();
   const dialogId = `${id ?? reactId}-dialog`;
   const isControlled = useControlledLatch(valueProp !== void 0);
@@ -66,7 +69,8 @@ function DatePicker({
       Input,
       {
         id,
-        name,
+        name: resolvedName,
+        "data-field": resolvedField,
         value: text,
         disabled,
         placeholder: resolvedPlaceholder,

package/dist/components/data-entry/date-range-picker.js

@@ -5,7 +5,7 @@ import { ArrowRight, CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/index.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
+import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
@@ -33,6 +33,9 @@ function DateRangePicker({
   const groupId = id ?? autoId;
   const fromId = `${groupId}-from`;
   const toId = `${groupId}-to`;
+  const identity = useFieldIdentity({ id: groupId, name, "data-field": groupA11y["data-field"] });
+  const rangeField = groupA11y["data-field"] ?? identity["data-field"];
+  const rangeName = name ?? identity.name;
   const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
@@ -77,6 +80,7 @@ function DateRangePicker({
       role: "group",
       id: groupId,
       ...groupA11y,
+      "data-field": rangeField,
       "aria-disabled": disabled ? true : void 0,
       className: cn(
         // One input-styled shell for the whole range — the shared composite-field box, so
@@ -94,7 +98,8 @@ function DateRangePicker({
           "input",
           {
             id: fromId,
-            name: name ? `${name}_from` : void 0,
+            "data-field": rangeField ? `${rangeField}_from` : void 0,
+            name: rangeName ? `${rangeName}_from` : void 0,
             value: fromText,
             disabled,
             placeholder: resolvedPlaceholder,
@@ -118,7 +123,8 @@ function DateRangePicker({
           "input",
           {
             id: toId,
-            name: name ? `${name}_to` : void 0,
+            "data-field": rangeField ? `${rangeField}_to` : void 0,
+            name: rangeName ? `${rangeName}_to` : void 0,
             value: toText,
             disabled,
             placeholder: resolvedPlaceholder,

package/dist/components/data-entry/form-field.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { FormFieldProp } from "../../props/components/data-entry.prop.js";
 export type { FormFieldProp, FormFieldProp as FormFieldProps, } from "../../props/components/data-entry.prop.js";
-export declare function FormField({ id, name, label, required, helper, error: errorProp, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;
+export declare function FormField({ id, name, field, label, required, helper, error: errorProp, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, staticText, }: FormFieldProp): React.JSX.Element;

package/dist/components/data-entry/form-field.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
-import { FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
+import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
+import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useFormLayout } from "./form.js";
 import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
@@ -11,6 +12,7 @@ const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, button
 function FormField({
   id,
   name,
+  field,
   label,
   required,
   helper,
@@ -38,6 +40,8 @@ function FormField({
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
   const errorId = error ? `${resolvedId}-error` : void 0;
+  const fieldKey = field ?? name ?? id;
+  const emitFieldNames = useOptionalAppContext()?.emitFieldNames ?? false;
   const isStatic = staticText !== void 0;
   if (!isStatic && typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
     console.warn(
@@ -48,6 +52,10 @@ function FormField({
     () => ({ labelId, label: typeof label === "string" ? label : void 0 }),
     [labelId, label]
   );
+  const fieldIdentityContext = React.useMemo(
+    () => fieldKey === void 0 ? null : { emitName: emitFieldNames },
+    [fieldKey, emitFieldNames]
+  );
   const childProps = React.isValidElement(children) ? children.props : void 0;
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
@@ -63,6 +71,11 @@ function FormField({
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
     id: childProps?.id ?? resolvedId,
+    // gh#337 — the machine key. Read the child's own value first in BOTH cases: cloneElement
+    // overwrites every key present in the config bag, `undefined` included, so a bare
+    // `"data-field": fieldKey` would erase a value the control set for itself.
+    "data-field": childProps?.["data-field"] ?? fieldKey,
+    ...emitFieldNames ? { name: childProps?.name ?? fieldKey } : void 0,
     "aria-labelledby": childProps?.["aria-labelledby"] ?? labelId,
     // Redundant `aria-label` fallback (belt-and-suspenders): the accessible name is the
     // SAME string as the visible label, just reachable even if an aria-labelledby lookup
@@ -125,7 +138,7 @@ function FormField({
           labelAddon
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
-          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: childWithA11y }),
+          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: /* @__PURE__ */ jsx(FieldIdentityContext.Provider, { value: fieldIdentityContext, children: childWithA11y }) }),
           helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null,
           error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
         ] })

package/dist/components/data-entry/input.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { useFieldNameFallback } from "../../lib/field-a11y.js";
+import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 const inputBaseClass = [
   "ui-control ui-input border-input bg-background w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
@@ -29,6 +29,11 @@ const Input = React.forwardRef(
       "aria-label": props["aria-label"],
       "aria-labelledby": props["aria-labelledby"]
     });
+    const identity = useFieldIdentity({
+      id: props.id,
+      name: props.name,
+      "data-field": props["data-field"]
+    });
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -74,7 +79,8 @@ const Input = React.forwardRef(
           onChange,
           className: cn(inputBaseClass, className),
           ...props,
-          ...nameFallback
+          ...nameFallback,
+          ...identity
         }
       );
     }
@@ -108,7 +114,8 @@ const Input = React.forwardRef(
             className
           ),
           ...props,
-          ...nameFallback
+          ...nameFallback,
+          ...identity
         }
       ),
       trailing != null ? /* @__PURE__ */ jsx("span", { className: "ui-input-trailing", children: trailing }) : null

package/dist/components/data-entry/month-picker.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -38,6 +38,7 @@ function MonthPicker({
   const inputId = id ?? autoId;
   const dialogId = `${inputId}-dialog`;
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
   const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
@@ -76,7 +77,8 @@ function MonthPicker({
           "input",
           {
             id: inputId,
-            name,
+            name: name ?? identity.name,
+            "data-field": fieldA11y["data-field"] ?? identity["data-field"],
             value: text,
             disabled,
             placeholder: placeholder ?? t("dataEntry.monthPicker.placeholder") ?? YM_HINT,

package/dist/components/data-entry/month-range-picker.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ArrowRight, CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
+import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -40,6 +40,9 @@ function MonthRangePicker({
   const groupId = id ?? autoId;
   const fromId = `${groupId}-from`;
   const toId = `${groupId}-to`;
+  const identity = useFieldIdentity({ id: groupId, name, "data-field": groupA11y["data-field"] });
+  const rangeField = groupA11y["data-field"] ?? identity["data-field"];
+  const rangeName = name ?? identity.name;
   const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
@@ -107,6 +110,7 @@ function MonthRangePicker({
       role: "group",
       id: groupId,
       ...groupA11y,
+      "data-field": rangeField,
       "aria-disabled": disabled ? true : void 0,
       "data-disabled": disabled ? "" : void 0,
       className: cn(
@@ -123,7 +127,8 @@ function MonthRangePicker({
           "input",
           {
             id: fromId,
-            name: name ? `${name}_from` : void 0,
+            "data-field": rangeField ? `${rangeField}_from` : void 0,
+            name: rangeName ? `${rangeName}_from` : void 0,
             value: fromText,
             disabled,
             placeholder: resolvedPlaceholder,
@@ -144,7 +149,8 @@ function MonthRangePicker({
           "input",
           {
             id: toId,
-            name: name ? `${name}_to` : void 0,
+            "data-field": rangeField ? `${rangeField}_to` : void 0,
+            name: rangeName ? `${rangeName}_to` : void 0,
             value: toText,
             disabled,
             placeholder: resolvedPlaceholder,

package/dist/components/data-entry/radio.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
 const RadioGroupRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -58,6 +58,10 @@ function RadioGroupOptions({
 }) {
   const reactId = React.useId();
   const groupA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, name, "data-field": groupA11y["data-field"] });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = groupA11y["data-field"] ?? identity["data-field"];
+  const optionDomId = (optionValue, index) => id ? `${id}-${optionValue}` : `${reactId}-${optionValue}-${index}`;
   if (options && options.length > 0) {
     return /* @__PURE__ */ jsx(
       RadioGroupRoot,
@@ -66,14 +70,23 @@ function RadioGroupOptions({
         defaultValue,
         onValueChange,
         disabled,
-        name,
+        name: resolvedName,
         id,
         ...groupA11y,
+        "data-field": resolvedField,
         "data-orientation": orientation,
         className: choiceGroupClassName(orientation, className),
         children: options.map((opt, index) => {
-          const id2 = `${reactId}-${opt.value}-${index}`;
-          return /* @__PURE__ */ jsx(Field, { id: id2, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(RadioItem, { id: id2, value: opt.value, disabled: opt.disabled }) }, opt.value);
+          const optionId = optionDomId(opt.value, index);
+          return /* @__PURE__ */ jsx(Field, { id: optionId, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
+            RadioItem,
+            {
+              id: optionId,
+              value: opt.value,
+              disabled: opt.disabled,
+              "data-field": resolvedField
+            }
+          ) }, opt.value);
         })
       }
     );
@@ -85,9 +98,10 @@ function RadioGroupOptions({
       defaultValue,
       onValueChange,
       disabled,
-      name,
+      name: resolvedName,
       id,
       ...groupA11y,
+      "data-field": resolvedField,
       "data-orientation": orientation,
       className: choiceGroupClassName(orientation, className),
       children

package/dist/components/data-entry/search-select.d.ts

@@ -9,4 +9,4 @@ export type { SearchSelectProp, SearchSelectProp as SearchSelectProps, SearchSel
  * Custom per-option rendering via `renderOption` (Ant-Design style). Form-submittable via
  * `name`; e2e-testable by the trigger's `data-testid` + each option's `${data-testid}-option-${value}`.
  */
-export declare function SearchSelect({ value: valueProp, defaultValue, onValueChange, options: staticOptions, loadOptions, renderOption, labelRender, selectedLabel, selectedIcon, placeholder, searchPlaceholder, emptyMessage, loadingMessage, errorMessage, clearLabel, clearable, disabled, readOnly, size, open: openProp, onOpenChange, search: searchProp, onSearchChange, filterOption, renderError, renderLoadMore, name, id, className, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, }: SearchSelectProp): React.JSX.Element;
+export declare function SearchSelect({ value: valueProp, defaultValue, onValueChange, options: staticOptions, loadOptions, renderOption, labelRender, selectedLabel, selectedIcon, placeholder, searchPlaceholder, emptyMessage, loadingMessage, errorMessage, clearLabel, clearable, disabled, readOnly, size, open: openProp, onOpenChange, search: searchProp, onSearchChange, filterOption, renderError, renderLoadMore, name, id, className, "data-testid": dataTestId, "data-field": dataField, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, }: SearchSelectProp): React.JSX.Element;

package/dist/components/data-entry/search-select.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { useFieldNameFallback } from "../../lib/field-a11y.js";
+import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
@@ -42,6 +42,7 @@ function SearchSelect({
   id,
   className,
   "data-testid": dataTestId,
+  "data-field": dataField,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
   "aria-describedby": ariaDescribedby,
@@ -54,6 +55,9 @@ function SearchSelect({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby
   });
+  const identity = useFieldIdentity({ id, name, "data-field": dataField });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = dataField ?? identity["data-field"];
   const triggerAriaLabel = ariaLabel ?? nameFallback["aria-label"];
   const triggerAriaLabelledby = ariaLabelledby ?? nameFallback["aria-labelledby"];
   const reactId = React.useId();
@@ -254,6 +258,8 @@ function SearchSelect({
               "aria-readonly": readOnly || void 0,
               disabled,
               "data-testid": dataTestId,
+              "data-field": resolvedField,
+              "data-value": value || void 0,
               className: cn(
                 "w-full justify-start font-normal",
                 controlOpenRingClass,
@@ -275,7 +281,7 @@ function SearchSelect({
               )
             }
           ) }),
-          name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value, readOnly: true }) : null,
+          resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null,
           /* @__PURE__ */ jsx(
             PopoverContent,
             {

package/dist/components/data-entry/select.d.ts

@@ -27,6 +27,14 @@ export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectP
      * descendant CSS is needed to remove it.
      */
     showIndicator?: boolean;
+    /** Stable machine key (gh#337) — normally inherited from `FormField` through the Select. */
+    "data-field"?: string;
+    /**
+     * The selected CODE (gh#337). Normally supplied by `Select` itself — the trigger shows the
+     * option's LABEL, and this is the only place the underlying value is readable from the DOM
+     * without reaching into Radix's aria-hidden native `<select>`.
+     */
+    "data-value"?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-entry/select.js

@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
 import {
   mergeAriaIds,
+  useFieldIdentity,
   omitFieldA11y,
   pickFieldA11y,
   useFieldNameFallback
@@ -26,7 +27,36 @@ function Select(props) {
 function CompoundSelect({ id, ...props }) {
   const fieldA11y = pickFieldA11y(props);
   const rootProps = omitFieldA11y(props);
-  return /* @__PURE__ */ jsx(SelectFieldA11yContext.Provider, { value: { ...fieldA11y, id }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...rootProps }) });
+  const [uncontrolled, setUncontrolled] = React.useState(props.defaultValue);
+  const value = props.value ?? uncontrolled;
+  const identity = useFieldIdentity({
+    id,
+    name: props.name,
+    "data-field": fieldA11y["data-field"]
+  });
+  return /* @__PURE__ */ jsx(
+    SelectFieldA11yContext.Provider,
+    {
+      value: {
+        ...fieldA11y,
+        "data-field": identity["data-field"] ?? fieldA11y["data-field"],
+        id,
+        value
+      },
+      children: /* @__PURE__ */ jsx(
+        SelectPrimitive.Root,
+        {
+          "data-slot": "select",
+          ...rootProps,
+          name: props.name ?? identity.name,
+          onValueChange: (next) => {
+            setUncontrolled(next);
+            props.onValueChange?.(next);
+          }
+        }
+      )
+    }
+  );
 }
 function SelectGroup(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
@@ -54,8 +84,10 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
       field?.["aria-errormessage"]
     ),
     "aria-required": props["aria-required"] ?? field?.["aria-required"],
-    "aria-invalid": props["aria-invalid"] ?? field?.["aria-invalid"]
+    "aria-invalid": props["aria-invalid"] ?? field?.["aria-invalid"],
+    "data-field": props["data-field"] ?? field?.["data-field"]
   } : void 0;
+  const dataValue = (props["data-value"] ?? field?.value) || void 0;
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
@@ -69,6 +101,7 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
       ),
       ...props,
       ...fieldA11y,
+      "data-value": dataValue,
       children: [
         children,
         showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -212,12 +245,18 @@ function DataSelect({
   id,
   className,
   "data-testid": dataTestId,
+  "data-field": dataField,
   ...rest
 }) {
   const ariaProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
   const { t } = useTranslation();
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const currentValue = value ?? uncontrolledValue;
+  const identity = useFieldIdentity({ id, name, "data-field": dataField });
+  const resolvedName = name ?? identity.name;
+  const resolvedField = dataField ?? identity["data-field"];
   const searchable = showSearch ?? Boolean(loadOptions);
   const hasOptions = options.length > 0;
   if (searchable) {
@@ -250,10 +289,11 @@ function DataSelect({
         filterOption,
         renderError,
         renderLoadMore,
-        name,
+        name: resolvedName,
         id,
         className,
         "data-testid": dataTestId,
+        "data-field": resolvedField,
         ...ariaProps
       }
     );
@@ -278,18 +318,23 @@ function DataSelect({
       "data-slot": "select",
       value: isControlled ? value : void 0,
       defaultValue: isControlled ? void 0 : defaultValue || void 0,
-      onValueChange: (next) => onValueChange?.(
-        next,
-        options.find((option) => option.value === next)
-      ),
+      onValueChange: (next) => {
+        setUncontrolledValue(next);
+        onValueChange?.(
+          next,
+          options.find((option) => option.value === next)
+        );
+      },
       disabled: disabled || !hasOptions,
-      name,
+      name: resolvedName,
       children: [
         /* @__PURE__ */ jsx(
           SelectTrigger,
           {
             id,
             "data-testid": dataTestId,
+            "data-field": resolvedField,
+            "data-value": currentValue || void 0,
             className: cn(showClear && "ui-control-trigger-affixed", canClear ? void 0 : className),
             showIndicator: !showClear,
             ...ariaProps,

package/dist/components/data-entry/switch.js

@@ -3,8 +3,15 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "../../lib/utils.js";
+import { useFieldIdentity } from "../../lib/field-a11y.js";
 const Switch = React.forwardRef(
   ({ className, size = "md", name, checked, defaultChecked = false, onCheckedChange, ...props }, ref) => {
+    const identity = useFieldIdentity({
+      id: props.id,
+      name,
+      "data-field": props["data-field"]
+    });
+    const resolvedName = name ?? identity.name;
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
     const isControlled = checked !== void 0;
     const isChecked = isControlled ? checked : internalChecked;
@@ -15,7 +22,7 @@ const Switch = React.forwardRef(
       onCheckedChange?.(next);
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: isChecked ? "1" : "0", readOnly: true }) : null,
+      resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: isChecked ? "1" : "0", readOnly: true }) : null,
       /* @__PURE__ */ jsx(
         SwitchPrimitive.Root,
         {
@@ -35,6 +42,7 @@ const Switch = React.forwardRef(
             className
           ),
           ...props,
+          "data-field": identity["data-field"] ?? props["data-field"],
           children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb" })
         }
       )

package/dist/components/data-entry/textarea.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlMultilineClass, controlMultilineGhostClass } from "../../lib/control-styles.js";
 const UNBOUNDED_ROWS = "infinity";
 const Textarea = React.forwardRef(
@@ -26,6 +27,11 @@ const Textarea = React.forwardRef(
   }, ref) => {
     const { t } = useTranslation();
     const base = variant === "ghost" ? controlMultilineGhostClass : controlMultilineClass;
+    const identity = useFieldIdentity({
+      id: props.id,
+      name: props.name,
+      "data-field": props["data-field"]
+    });
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -110,7 +116,8 @@ const Textarea = React.forwardRef(
         onCompositionEnd: handleCompositionEnd,
         style,
         className: cn(base, showClear && "ui-input--trailing-affix", className),
-        ...props
+        ...props,
+        ...identity
       }
     );
     if (!needsWrapper) return field;

package/dist/components/data-entry/tree-select.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ChevronDown, ChevronRight, ChevronsUpDown, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { pickFieldA11y } from "../../lib/field-a11y.js";
+import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -63,6 +63,7 @@ function TreeSelectRoot({
 }) {
   const { t } = useTranslation();
   const fieldA11y = pickFieldA11y(ariaProps);
+  const identity = useFieldIdentity({ id, "data-field": fieldA11y["data-field"] });
   const reactId = React.useId();
   const treeId = `${id ?? reactId}-tree`;
   const options = React.useMemo(
@@ -179,6 +180,7 @@ function TreeSelectRoot({
         Button,
         {
           id,
+          "data-field": fieldA11y["data-field"] ?? identity["data-field"],
           type: "button",
           variant: "outline",
           role: "combobox",

package/dist/lib/field-a11y.d.ts

@@ -13,6 +13,12 @@ import * as React from "react";
  * - `aria-errormessage` + `aria-invalid` — the validation message, announced when invalid.
  * - `aria-required` — required-field semantics.
  * - `aria-label` — a name supplied directly (used when there is no visible label element).
+ *
+ * `data-field` travels the SAME route (gh#337) and is therefore part of this bag even though it is
+ * not an ARIA attribute. It is the field's stable machine key — the `data-testid` role, standardised
+ * on one attribute so a control never has to be found by a generated id or by its visible Japanese
+ * label. It is inert (read-only metadata) and must land on the same semantic focus target the aria
+ * relationships do; routing it through a second, parallel mechanism is how a control gets missed.
  */
 export interface FieldA11yProps {
     "aria-label"?: string;
@@ -21,6 +27,8 @@ export interface FieldA11yProps {
     "aria-errormessage"?: string;
     "aria-invalid"?: React.AriaAttributes["aria-invalid"];
     "aria-required"?: React.AriaAttributes["aria-required"];
+    /** Stable machine key of the field (gh#337) — see the interface doc above. */
+    "data-field"?: string;
 }
 /**
  * Merge one or more space-separated id-reference lists (`aria-describedby`, `aria-labelledby`,
@@ -81,6 +89,49 @@ export declare const FieldNameContext: React.Context<FieldNameContextValue | nul
  * inside a FormField AND still nameless after its own props and the cloned contract are applied.
  */
 export declare function useFieldNameFallback(name: Pick<FieldA11yProps, "aria-label" | "aria-labelledby">): Pick<FieldA11yProps, "aria-label" | "aria-labelledby">;
+/**
+ * The enclosing `FormField`, made reachable by NESTED controls (gh#337).
+ *
+ * `cloneElement` reaches FormField's single DIRECT child only. In the real screens this library
+ * serves, 322 of 1,410 controls (23%) sit one level deeper — the direct child is a `Flex` holding a
+ * from/to pair, a 年/月 combo, or a value + 「不明」 checkbox — so the machine key stopped on the
+ * wrapper `div` and the controls inside stayed anonymous. The customer's acceptance condition is
+ * 「画面に見えている入力欄の100%に付与されていること」; 77% does not pass.
+ *
+ * The key for such a control is its OWN `id`, and that is a finding, not a convention invented
+ * here: of those 322, **250 already carry a static id** and the ambiguous case the wrapper creates
+ * — two controls under one field — is already distinguished at the call site
+ * (`search_billing_date_from` / `..._to`, `fax` / `fax_unknown`). So a nested control names itself
+ * and no two controls can ever end up sharing a key. The remaining 72 (48 computed ids, 24 with no
+ * id at all) get NOTHING: a fabricated key is worse than a missing one, because automation would
+ * bind to it and break silently on the next render.
+ */
+export interface FieldIdentityContextValue {
+    /** Whether the app opted into a native `name` (@see AppProviderProp.emitFieldNames). */
+    emitName: boolean;
+}
+export declare const FieldIdentityContext: React.Context<FieldIdentityContextValue | null>;
+/**
+ * Resolve `data-field` / `name` for a control nested under a `FormField` (see
+ * {@link FieldIdentityContext}). Returns `{}` — adding nothing — in every case but the one it
+ * exists for, which is what keeps it safe to call from every control:
+ *
+ * - **outside a FormField** → `{}`. A control elsewhere on the page is untouched.
+ * - **`data-field` already present** → `{}`. Either `FormField` cloned it onto its direct child, or
+ *   a composite (DatePicker, Select) already resolved this field and is passing it down. Whoever
+ *   owns the field owns BOTH attributes, so `name` is not second-guessed here either — that is what
+ *   keeps DatePicker's ISO mirror (`name` belongs to the hidden `yyyy-MM-dd` input, not the visible
+ *   `yyyy/MM/dd` one) and Select's native `<select>` intact.
+ * - **no `id` of its own** → `{}`. Nothing to derive a stable key from; see the interface doc.
+ */
+export declare function useFieldIdentity(own: {
+    id?: string;
+    name?: string;
+    "data-field"?: string;
+}): {
+    "data-field"?: string;
+    name?: string;
+};
 /**
  * The field-a11y attributes valid on a **group container** (`role="group"`), used by composite
  * controls that have no single labelable focus target — CheckboxGroup, and the two-input range
@@ -98,4 +149,5 @@ export declare function useFieldNameFallback(name: Pick<FieldA11yProps, "aria-la
 export declare function pickGroupFieldA11y(props: FieldA11yProps): {
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
+    "data-field"?: string;
 };

package/dist/lib/field-a11y.js

@@ -6,7 +6,8 @@ const FIELD_A11Y_KEYS = [
   "aria-describedby",
   "aria-errormessage",
   "aria-invalid",
-  "aria-required"
+  "aria-required",
+  "data-field"
 ];
 function mergeAriaIds(...values) {
   return Array.from(new Set(values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []))).join(
@@ -47,19 +48,33 @@ function useFieldNameFallback(name) {
     ...field.label !== void 0 ? { "aria-label": field.label } : {}
   };
 }
+const FieldIdentityContext = React.createContext(null);
+function useFieldIdentity(own) {
+  const ctx = React.useContext(FieldIdentityContext);
+  if (!ctx || own["data-field"] !== void 0 || own.id === void 0) return {};
+  return {
+    "data-field": own.id,
+    ...ctx.emitName && own.name === void 0 ? { name: own.id } : {}
+  };
+}
 function pickGroupFieldA11y(props) {
   const describedBy = mergeAriaIds(props["aria-describedby"], props["aria-errormessage"]);
   return {
     ...props["aria-labelledby"] !== void 0 ? { "aria-labelledby": props["aria-labelledby"] } : {},
-    ...describedBy !== void 0 ? { "aria-describedby": describedBy } : {}
+    ...describedBy !== void 0 ? { "aria-describedby": describedBy } : {},
+    // Not an ARIA attribute and so not subject to the role="group" restriction above — a group
+    // still has to be findable by its field key (gh#337).
+    ...props["data-field"] !== void 0 ? { "data-field": props["data-field"] } : {}
   };
 }
 export {
+  FieldIdentityContext,
   FieldNameContext,
   mergeAriaIds,
   omitFieldA11y,
   pickFieldA11y,
   pickGroupFieldA11y,
   resolveFieldA11y,
+  useFieldIdentity,
   useFieldNameFallback
 };

package/dist/props/components/app.prop.d.ts

@@ -49,6 +49,19 @@ export type AppProviderProp = {
      * number (e.g. `0.95`) overrides it. Type is a separate axis — not scaled.
      */
     scaling?: number | null;
+    /**
+     * Emit a native `name` on every control a `FormField` wraps, taken from the field's key
+     * (`field` → `name` → `id`). Default `false`, and deliberately opt-in (gh#337).
+     *
+     * `data-field` is inert metadata and is always emitted; `name` is NOT — it changes what a
+     * native `<form>` submit sends. An app whose controls have never carried a `name` would start
+     * posting extra keys to its backend the moment it upgraded the library. That is a behaviour
+     * change no shared package may make by default, so the app that WANTS it (a screen-automation /
+     * RPA contract, native form posts) turns it on here, once, and every FormField in it obeys.
+     *
+     * A `name` written on the control itself always wins over the injected one.
+     */
+    emitFieldNames?: boolean;
     onLocaleChange?: (locale: AppLocale) => void;
     onTimezoneChange?: (timezone: AppTimezone) => void;
     onTimeFormatChange?: (timeFormat: AppTimeFormat) => void;
@@ -117,6 +130,8 @@ export type AppContextValue = {
     density: AppDensity;
     fontSize: AppFontSize;
     scaling: number | null;
+    /** Whether `FormField` injects a native `name` onto its control (gh#337). Default `false`. */
+    emitFieldNames: boolean;
     setLocale: (locale: AppLocale) => void;
     setTimezone: (timezone: AppTimezone) => void;
     setTimeFormat: (timeFormat: AppTimeFormat) => void;

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

@@ -130,10 +130,22 @@ export type FormFieldProp = {
     /**
      * Error-bag key of this field. When the surrounding `Form` carries `errors`, the field
      * resolves its message from `errors[name]` automatically (an explicit `error` prop wins)
-     * and CLAIMS the key so `<FormErrors />` does not repeat it. Not injected into the child —
-     * pass `name` on the control itself for native form submission.
+     * and CLAIMS the key so `<FormErrors />` does not repeat it. Also the default source of
+     * {@link FormFieldProp.field} (below), so a field that already names its error key does not
+     * repeat itself.
      */
     name?: NameProp;
+    /**
+     * Stable MACHINE key of this field — the bare column/parameter name (`project_name`), not a
+     * bracketed legacy path (gh#337). Rendered on the control as `data-field`, and as a native
+     * `name` when the app opted in via `<AppProvider emitFieldNames>`.
+     *
+     * Defaults to `name`, then `id` — which is why an app whose fields already carry a
+     * column-named `id` gets the attribute on every control without editing a single screen.
+     * Set it explicitly only where `id` is a DOM-uniqueness artefact rather than the field key
+     * (`id="source_slip_field"` for `field="source_slip_id"`).
+     */
+    field?: NameProp;
     label: LabelProp;
     required?: RequiredProp;
     helper?: HelperProp;
@@ -160,6 +172,8 @@ export type FormFieldProp = {
      * and CLAIMS the key so `<FormErrors />` does not repeat it.
      */
     name?: NameProp;
+    /** Stable machine key — see the `children` variant above. Unused on a read-only row. */
+    field?: NameProp;
     label: LabelProp;
     required?: RequiredProp;
     helper?: HelperProp;
@@ -490,6 +504,8 @@ export type SearchSelectProp = {
     "aria-invalid"?: boolean | "true" | "false";
     "aria-required"?: boolean | "true" | "false";
     "data-testid"?: string;
+    /** Stable machine key, forwarded to the trigger (gh#337). Normally injected by `FormField`. */
+    "data-field"?: string;
 };
 /**
  * Data-driven (Ant-style) form of {@link Select} — one component covering static `options` or

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.0.0",
-  "godxUiMcp": "19.0.0",
+  "version": "19.1.0",
+  "godxUiMcp": "19.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -333,10 +333,10 @@
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
     "pretest": "pnpm check:frame-coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
     "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:ci": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
     "verify:browser": "pnpm check:contrast && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve && pnpm check:mcp-lockstep",
@@ -357,6 +357,7 @@
     "check:token-scale-bypass": "node scripts/check-token-scale-bypass.mjs",
     "check:dist-tokens-resolve": "node scripts/check-dist-tokens-resolve.mjs",
     "check:no-hardcoded-geometry": "node scripts/check-no-hardcoded-geometry.mjs",
+    "check:no-external-assets": "node scripts/check-no-external-assets.mjs",
     "check:no-hardcoded-css-values": "node scripts/check-no-hardcoded-css-values.mjs",
     "check:no-inline-magic-numbers": "node scripts/check-no-inline-magic-numbers.mjs",
     "check:no-tailwind-class-assertions": "node scripts/check-no-tailwind-class-assertions.mjs",