@godxjp/ui 19.0.0 → 19.2.0

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",
@@ -13,6 +13,7 @@ const inputBaseClass = [
 ];
 const Input = React.forwardRef(
   ({
+    size,
     className,
     type,
     allowClear = false,
@@ -29,6 +30,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) => {
@@ -68,13 +74,15 @@ const Input = React.forwardRef(
         {
           type,
           "data-slot": "input",
+          "data-size": size,
           ref: setRefs,
           value,
           defaultValue,
           onChange,
           className: cn(inputBaseClass, className),
           ...props,
-          ...nameFallback
+          ...nameFallback,
+          ...identity
         }
       );
     }
@@ -97,6 +105,7 @@ const Input = React.forwardRef(
         {
           type,
           "data-slot": "input",
+          "data-size": size,
           ref: setRefs,
           value,
           defaultValue,
@@ -108,7 +117,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;
@@ -62,10 +63,10 @@ function MonthPicker({
     "div",
     {
       "data-disabled": disabled ? "" : void 0,
+      "data-state": open ? "open" : "closed",
       className: cn(
         "ui-control ui-control-composite-field",
-        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
-        open && "border-ring ring-ring/50 ring-[3px]",
+        "aria-invalid:border-destructive",
         className
       ),
       onClick: () => {
@@ -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.d.ts

@@ -2,11 +2,9 @@ import * as React from "react";
 import type { MonthRangePickerProp } from "../../props/components/data-entry.prop.js";
 export type { MonthRangePickerProp, MonthRangePickerProp as MonthRangePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * MonthRangePicker — year/month (`yyyy/MM`) RANGE rendered as ONE input-styled
- * control (Ant Design RangePicker convention): `[ from → to  ✕ 📅 ]`. The two
- * inner fields stay real, typeable `yyyy/MM` inputs (form-submittable via
- * `${name}_from` / `${name}_to`); the Ant-style month grid is the visual
- * affordance. Grid picks are two-step (from, then to — swapped when picked
- * backwards) and a pick on a COMPLETE range starts a new one (reset-on-complete).
+ * MonthRangePicker — year/month (`yyyy/MM`) RANGE rendered as ONE input-styled control (Ant Design
+ * RangePicker convention): `[ from → to ✕ 📅 ]`. The two inner fields stay real, typeable
+ * `yyyy/MM` inputs (form-submittable via `${name}_from` / `${name}_to`); the Ant-style month grid
+ * is the visual affordance.
  */
 export declare function MonthRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, fromYear, toYear, allowClear, ...ariaProps }: MonthRangePickerProp): React.JSX.Element;

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,12 +110,13 @@ function MonthRangePicker({
       role: "group",
       id: groupId,
       ...groupA11y,
+      "data-field": rangeField,
       "aria-disabled": disabled ? true : void 0,
       "data-disabled": disabled ? "" : void 0,
+      "data-state": open ? "open" : "closed",
       className: cn(
         "ui-control ui-control-composite-field",
-        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
-        open && "border-ring ring-ring/50 ring-[3px]",
+        "aria-invalid:border-destructive",
         className
       ),
       onClick: () => {
@@ -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/number-input.d.ts

@@ -2,11 +2,7 @@ import * as React from "react";
 export type { NumberInputProp, NumberInputProp as NumberInputProps, } from "../../props/components/data-entry.prop.js";
 /**
  * NumberInput — WAI-ARIA spinbutton: a localized numeric `<Input>` with increment/decrement steps.
- *
- * Composes the real `Input` primitive (no raw `<input>`) plus two icon `Button`s. The text input is
- * the `role="spinbutton"` element carrying `aria-valuenow/min/max/text`; type freely, ArrowUp/Down
- * (Shift = ×10) step, and the value commits clamped + rounded to `precision` on blur/Enter/step.
- * Display formats via `Intl.NumberFormat` at rest, but stays raw and typeable while focused.
+ * Composes the real `Input` primitive (no raw `<input>`) plus two icon `Button`s.
  */
 export declare const NumberInput: React.ForwardRefExoticComponent<import("../../lib/field-a11y.js").FieldA11yProps & {
     value?: import("../../props/index.js").ValueProp<number | null>;

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

@@ -154,6 +154,7 @@ const NumberInput = React.forwardRef(
           role: "spinbutton",
           "data-slot": "number-input-field",
           "data-testid": dataTestId,
+          "data-field": ariaProps["data-field"],
           className: "ui-number-input-field",
           value: draft,
           placeholder,

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(
@@ -23,7 +23,6 @@ const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ref,
     "data-slot": "radio-group-item",
     className: cn(
-      // `disabled:cursor-not-allowed disabled:opacity-50` DELETED, not moved (#319):
       // `.ui-radio:disabled, .ui-radio[data-disabled]` in styles/control.css already declares both
       // and reads --disabled-opacity. The utility was layered after components, so it silently
       // outranked that token — a service theme's --disabled-opacity never reached a radio.
@@ -58,6 +57,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 +69,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 +97,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

@@ -4,9 +4,7 @@ export type { SearchSelectProp, SearchSelectProp as SearchSelectProps, SearchSel
 /**
  * SearchSelect — a searchable single-select combobox with a debounced search box, optional
  * optgroup-style grouping (`option.group`), and loading/empty states. Drive it EITHER remotely
- * with `loadOptions({ query, page })` (server search + infinite scroll) OR with a static
- * `options` array (client-side filter) — the latter supersedes the legacy `Autocomplete`.
- * 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}`.
+ * with `loadOptions({ query, page })` (server search + infinite scroll) OR with a static `options`
+ * array (client-side filter) — the latter supersedes the legacy `Autocomplete`.
  */
-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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { ControlWidthProp } from "../../props/vocabulary/shared.prop.js";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { SelectDataProp } from "../../props/components/data-entry.prop.js";
@@ -20,13 +21,25 @@ export declare function SelectGroup(props: React.ComponentProps<typeof SelectPri
 export declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     size?: "sm" | "md";
+    /**
+     * `full` (default) fills the field column — right inside a FormField. `auto` sizes to the
+     * selected label — right in a PageContainer `extra` slot, a toolbar or a footer row, where a
+     * full-width trigger swallows the row and starves its siblings (text truncated to "UA…").
+     */
+    width?: ControlWidthProp;
     /**
      * Show the built-in chevron disclosure indicator (default true). Set `false` for specialized
      * triggers — icon-only, or one that already renders its own affordance — so it isn't
-     * duplicated. Omits the icon from the DOM entirely (not a CSS hide), so no consumer
-     * descendant CSS is needed to remove it.
+     * duplicated.
      */
     showIndicator?: boolean;
+    "data-field"?: string;
+    /**
+     * 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 });
@@ -34,7 +64,7 @@ function SelectGroup(props) {
 function SelectValue(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => {
+const SelectTrigger = React.forwardRef(({ className, children, size = "md", width = "full", showIndicator = true, ...props }, ref) => {
   const field = React.useContext(SelectFieldA11yContext);
   const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
   const fieldOwnsName = field?.["aria-label"] !== void 0 || field?.["aria-labelledby"] !== void 0;
@@ -54,21 +84,26 @@ 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,
     {
       ref,
       "data-slot": "select-trigger",
       "data-size": size,
+      "data-width": width,
       className: cn(
         controlTriggerClass,
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
+        width === "auto" ? "w-auto" : "w-full",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] outline-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
         className
       ),
       ...props,
       ...fieldA11y,
+      "data-value": dataValue,
       children: [
         children,
         showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -212,12 +247,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 +291,11 @@ function DataSelect({
         filterOption,
         renderError,
         renderLoadMore,
-        name,
+        name: resolvedName,
         id,
         className,
         "data-testid": dataTestId,
+        "data-field": resolvedField,
         ...ariaProps
       }
     );
@@ -278,18 +320,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,
         {
@@ -25,7 +32,6 @@ const Switch = React.forwardRef(
           checked: isChecked,
           onCheckedChange: handleCheckedChange,
           className: cn(
-            // `disabled:cursor-not-allowed disabled:opacity-50` DELETED, not moved (#319):
             // `.ui-switch:disabled, .ui-switch[data-disabled]` in styles/control.css already
             // declares both and reads --disabled-opacity. The utility was layered after
             // components, so it silently outranked that token. Byte-identical: the token
@@ -35,6 +41,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.d.ts

@@ -5,20 +5,17 @@ export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
     /**
-     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded
-     * in a surface that already draws the box (a chat composer inside a Card). The surface then
-     * owns focus — give it `focus-within`. Default keeps the standalone control chrome.
+     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded in a
+     * surface that already draws the box (a chat composer inside a Card). The surface then owns
+     * focus — give it `focus-within`.
      */
     variant?: "default" | "ghost";
     /**
-     * Grow the control with its content instead of holding a fixed `rows` height (default false —
-     * the inert default, so every existing `<Textarea>` keeps the geometry it has today).
-     *
      * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
      * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
      * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
      * value change, a font swap and a container resize — not just typing — and it never writes
-     * `style.height` or reads `scrollHeight`. Works controlled and uncontrolled.
+     * `style.height` or reads `scrollHeight`.
      */
     autoGrow?: boolean;
     /**
@@ -29,7 +26,7 @@ export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
     /**
      * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
      * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
-     * ceiling — only correct inside an owning scroll container. Ignored when `autoGrow` is false.
+     * ceiling — only correct inside an owning scroll container.
      */
     maxRows?: number;
 };
@@ -39,20 +36,17 @@ export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTM
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
     /**
-     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded
-     * in a surface that already draws the box (a chat composer inside a Card). The surface then
-     * owns focus — give it `focus-within`. Default keeps the standalone control chrome.
+     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded in a
+     * surface that already draws the box (a chat composer inside a Card). The surface then owns
+     * focus — give it `focus-within`.
      */
     variant?: "default" | "ghost";
     /**
-     * Grow the control with its content instead of holding a fixed `rows` height (default false —
-     * the inert default, so every existing `<Textarea>` keeps the geometry it has today).
-     *
      * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
      * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
      * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
      * value change, a font swap and a container resize — not just typing — and it never writes
-     * `style.height` or reads `scrollHeight`. Works controlled and uncontrolled.
+     * `style.height` or reads `scrollHeight`.
      */
     autoGrow?: boolean;
     /**
@@ -63,7 +57,7 @@ export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTM
     /**
      * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
      * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
-     * ceiling — only correct inside an owning scroll container. Ignored when `autoGrow` is false.
+     * ceiling — only correct inside an owning scroll container.
      */
     maxRows?: number;
 } & React.RefAttributes<HTMLTextAreaElement>>;

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;