@godxjp/ui 18.15.4 → 19.1.0

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;
@@ -61,11 +62,11 @@ function MonthPicker({
   return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-disabled": disabled ? "" : void 0,
       className: cn(
-        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+        "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]",
-        disabled && "pointer-events-none cursor-not-allowed opacity-50",
         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,
@@ -87,7 +89,7 @@ function MonthPicker({
             "aria-haspopup": "dialog",
             "aria-controls": open ? dialogId : void 0,
             ...fieldA11y,
-            className: "placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent tabular-nums outline-none disabled:cursor-not-allowed",
+            className: "ui-month-picker-input",
             onKeyDown: (event) => {
               if (event.key === "ArrowDown") {
                 event.preventDefault();
@@ -117,9 +119,10 @@ function MonthPicker({
               emit(void 0);
               setText("");
             },
-            children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
-        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : null,
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -127,7 +130,7 @@ function MonthPicker({
             tabIndex: -1,
             "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Open month grid",
             className: "text-muted-foreground hover:text-foreground shrink-0",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
         ) }),
         /* @__PURE__ */ jsxs(
@@ -136,12 +139,12 @@ function MonthPicker({
             id: dialogId,
             role: "dialog",
             "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Month grid",
-            className: "w-auto p-3",
+            className: "ui-month-picker-panel",
             align: "start",
             onOpenAutoFocus: (event) => event.preventDefault(),
             onClick: (event) => event.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-nav", children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -150,12 +153,12 @@ function MonthPicker({
                     size: "icon-sm",
                     disabled: prevDisabled,
                     "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
-                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    className: "ui-month-picker-nav-button",
                     onClick: () => setViewYear((y) => y - 1),
-                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-month-picker-icon", "aria-hidden": "true" })
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", "aria-live": "polite", children: viewYear }),
+                /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: viewYear }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -164,13 +167,13 @@ function MonthPicker({
                     size: "icon-sm",
                     disabled: nextDisabled,
                     "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
-                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    className: "ui-month-picker-nav-button",
                     onClick: () => setViewYear((y) => y + 1),
-                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-month-picker-icon", "aria-hidden": "true" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "mt-3 grid grid-cols-3 gap-1", children: monthLabels.map((label, i) => {
+              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "ui-month-picker-grid", children: monthLabels.map((label, i) => {
                 const selected = value?.getFullYear() === viewYear && value?.getMonth() === i;
                 return /* @__PURE__ */ jsx(
                   Button,
@@ -179,7 +182,7 @@ function MonthPicker({
                     variant: selected ? "default" : "ghost",
                     size: "sm",
                     "aria-pressed": selected,
-                    className: "px-4 font-normal",
+                    className: "ui-month-picker-cell",
                     onClick: () => {
                       emit(new Date(viewYear, i, 1));
                       setOpen(false);

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;
@@ -99,7 +102,7 @@ function MonthRangePicker({
       }
     }
   };
-  const innerInputClass = "min-w-0 flex-1 bg-transparent tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed";
+  const innerInputClass = "ui-month-picker-input";
   const resolvedPlaceholder = placeholder ?? t("dataEntry.monthPicker.placeholder") ?? YM_HINT;
   return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
     "div",
@@ -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,
       className: cn(
-        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+        "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]",
-        disabled && "pointer-events-none cursor-not-allowed opacity-50",
         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,
@@ -139,12 +144,13 @@ function MonthRangePicker({
             onBlur: () => setFromText(toYmText(value?.from))
           }
         ),
-        /* @__PURE__ */ jsx(ArrowRight, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx(
           "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,
@@ -171,9 +177,10 @@ function MonthRangePicker({
               event.stopPropagation();
               clear();
             },
-            children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
-        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        ) : null,
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -181,18 +188,18 @@ function MonthRangePicker({
             tabIndex: -1,
             "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Open month grid",
             className: "text-muted-foreground hover:text-foreground shrink-0",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
           }
         ) }),
         /* @__PURE__ */ jsxs(
           PopoverContent,
           {
-            className: "w-auto p-3",
+            className: "ui-month-picker-panel",
             align: "start",
             onOpenAutoFocus: (event) => event.preventDefault(),
             onClick: (event) => event.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-nav", children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -201,12 +208,12 @@ function MonthRangePicker({
                     size: "icon-sm",
                     disabled: prevDisabled,
                     "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
-                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    className: "ui-month-picker-nav-button",
                     onClick: () => setViewYear((y) => y - 1),
-                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-month-picker-icon", "aria-hidden": "true" })
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", "aria-live": "polite", children: viewYear }),
+                /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: viewYear }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -215,13 +222,13 @@ function MonthRangePicker({
                     size: "icon-sm",
                     disabled: nextDisabled,
                     "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
-                    className: "bg-transparent opacity-70 hover:opacity-100",
+                    className: "ui-month-picker-nav-button",
                     onClick: () => setViewYear((y) => y + 1),
-                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-month-picker-icon", "aria-hidden": "true" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "mt-3 grid grid-cols-3 gap-1", children: monthLabels.map((label, i) => {
+              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "ui-month-picker-grid", children: monthLabels.map((label, i) => {
                 const cell = new Date(viewYear, i, 1);
                 const cellIdx = ymIndex(cell);
                 const fromIdx = value?.from ? ymIndex(value.from) : void 0;
@@ -235,7 +242,7 @@ function MonthRangePicker({
                     variant: isEdge ? "default" : inRange ? "secondary" : "ghost",
                     size: "sm",
                     "aria-pressed": isEdge,
-                    className: "px-4 font-normal",
+                    className: "ui-month-picker-cell",
                     onClick: () => pickMonth(cell),
                     children: label
                   },

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,12 @@ const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ref,
     "data-slot": "radio-group-item",
     className: cn(
-      "ui-radio focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      // `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.
+      // Byte-identical: --disabled-opacity defaults to 0.5.
+      "ui-radio aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none",
       className
     ),
     ...props,
@@ -53,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,
@@ -61,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);
         })
       }
     );
@@ -80,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,17 +258,19 @@ 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,
                 // Reserve trailing room for the single clear-or-chevron overlay rendered below.
-                "pe-9"
+                "ui-control-trigger-affixed"
               ),
               children: /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
-                    "flex min-w-0 items-center gap-2 text-start",
+                    "ui-search-select-option-body text-start",
                     !value && "text-muted-foreground"
                   ),
                   children: value && labelRender ? labelRender({ value, label: currentLabel, option: selectedOption ?? void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -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,
             {
@@ -284,9 +290,9 @@ function SearchSelect({
               align: "start",
               sideOffset: 4,
               collisionPadding: 12,
-              className: "flex max-h-[var(--radix-popover-content-available-height)] w-max max-w-[min(32rem,calc(100vw-1.5rem))] min-w-[var(--radix-popover-trigger-width)] flex-col p-0",
-              children: /* @__PURE__ */ jsxs(Command, { value, shouldFilter: false, className: "flex min-h-0 flex-col", children: [
-                /* @__PURE__ */ jsx("div", { className: "border-border shrink-0 border-b", children: /* @__PURE__ */ jsx(
+              className: "ui-search-select-panel",
+              children: /* @__PURE__ */ jsxs(Command, { value, shouldFilter: false, className: "ui-search-select-command", children: [
+                /* @__PURE__ */ jsx("div", { className: "ui-search-select-search", children: /* @__PURE__ */ jsx(
                   Input,
                   {
                     autoFocus: true,
@@ -298,7 +304,7 @@ function SearchSelect({
                     onChange: (event) => setQuery(event.target.value),
                     onKeyDown,
                     placeholder: searchPlaceholder ?? t("dataEntry.searchSelect.search"),
-                    className: "rounded-none border-0 shadow-none focus-visible:ring-0"
+                    className: "ui-search-select-search-input"
                   }
                 ) }),
                 /* @__PURE__ */ jsxs(
@@ -307,7 +313,7 @@ function SearchSelect({
                     id: listId,
                     role: "listbox",
                     "aria-busy": loading,
-                    className: "max-h-none min-h-0 flex-1 overflow-y-auto p-1",
+                    className: "ui-search-select-list",
                     onScroll,
                     children: [
                       grouped.map((group) => {
@@ -331,11 +337,11 @@ function SearchSelect({
                             onMouseEnter: () => !option.disabled && setActiveIndex(index),
                             onMouseDown: (event) => event.preventDefault(),
                             onClick: () => select(option),
-                            children: renderOption ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                            children: renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
                               option.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: option.icon }) : null,
-                              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                                /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: option.label }),
-                                option.sublabel ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: option.sublabel }) : null
+                              /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-text", children: [
+                                /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: option.label }),
+                                option.sublabel ? /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-sublabel", children: option.sublabel }) : null
                               ] })
                             ] })
                           },
@@ -343,17 +349,10 @@ function SearchSelect({
                         ));
                         return group.heading ? /* @__PURE__ */ jsx(CommandGroup, { heading: group.heading, children: rows }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: rows }, "__ungrouped");
                       }),
-                      loading ? /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          role: "status",
-                          className: "text-muted-foreground flex items-center gap-2 px-2 py-3 text-sm",
-                          children: [
-                            /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
-                            loadingMessage ?? t("dataEntry.searchSelect.loading")
-                          ]
-                        }
-                      ) : error ? renderError ? renderError({
+                      loading ? /* @__PURE__ */ jsxs("div", { role: "status", className: "ui-search-select-status", children: [
+                        /* @__PURE__ */ jsx(Loader2, { className: "ui-search-select-spinner animate-spin", "aria-hidden": "true" }),
+                        loadingMessage ?? t("dataEntry.searchSelect.loading")
+                      ] }) : error ? renderError ? renderError({
                         message: errorMessage ?? t("dataEntry.searchSelect.error"),
                         // Retry always reloads from the first page (a defined, predictable recovery —
                         // NOT a resume of a failed page-N append, which would need to re-derive state).
@@ -364,7 +363,8 @@ function SearchSelect({
                           role: "option",
                           "aria-disabled": "true",
                           "aria-selected": false,
-                          className: "text-destructive px-2 py-6 text-center text-sm",
+                          className: "ui-search-select-placeholder",
+                          "data-tone": "destructive",
                           children: errorMessage ?? t("dataEntry.searchSelect.error")
                         }
                       ) : loaded.length === 0 ? /* @__PURE__ */ jsx(
@@ -373,7 +373,7 @@ function SearchSelect({
                           role: "option",
                           "aria-disabled": "true",
                           "aria-selected": false,
-                          className: "text-muted-foreground px-2 py-6 text-center text-sm",
+                          className: "ui-search-select-placeholder",
                           children: emptyMessage ?? t("dataEntry.searchSelect.empty")
                         }
                       ) : null
@@ -383,7 +383,7 @@ function SearchSelect({
                 renderLoadMore && hasMore ? /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "border-border shrink-0 border-t p-1",
+                    className: "ui-search-select-footer",
                     onKeyDown: (event) => event.stopPropagation(),
                     children: renderLoadMore({
                       hasMore,
@@ -400,17 +400,23 @@ function SearchSelect({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 end-2 flex items-center", children: showClear ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: showClear ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
         "data-testid": optionTestId("clear"),
-        className: "pointer-events-auto flex size-6 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        className: "ui-control-affix-action",
         onClick: clear,
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ jsx(
+      ChevronsUpDown,
+      {
+        className: "ui-control-affix-icon ui-control-affix-indicator",
+        "aria-hidden": "true"
       }
-    ) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" }) })
+    ) })
   ] });
 }
 export {

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>>;