@godxjp/ui 18.15.3 → 19.0.0

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarIcon } from "lucide-react";
+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";
@@ -48,6 +48,7 @@ function DatePicker({
     emit(void 0);
     setText("");
   };
+  const showClear = allowClear && text !== "" && !disabled;
   const commit = (raw) => {
     const trimmed = raw.trim();
     if (trimmed === "") {
@@ -76,19 +77,31 @@ function DatePicker({
         "aria-haspopup": "dialog",
         "aria-controls": open ? dialogId : void 0,
         ...fieldA11y,
-        allowClear,
-        onClear: clear,
-        trailingIcon: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            tabIndex: -1,
-            "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
-            className: "text-muted-foreground hover:text-foreground inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" })
-          }
-        ) }),
+        className: showClear ? "ui-control-inline-affix-pair-affixed" : void 0,
+        trailingIcon: /* @__PURE__ */ jsxs("span", { className: "ui-time-picker-affix", children: [
+          showClear ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": t("common.clear") ?? "Clear",
+              onClick: clear,
+              className: "ui-control-inline-affix-action",
+              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              tabIndex: -1,
+              "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
+              className: "ui-control-inline-affix-action",
+              children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
         onClick: () => {
           if (!disabled) setOpen(true);
         },
@@ -116,7 +129,7 @@ function DatePicker({
         id: dialogId,
         role: "dialog",
         "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Calendar",
-        className: "w-auto p-0",
+        className: "ui-control-panel-flush",
         align: "start",
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: /* @__PURE__ */ jsx(

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

@@ -70,7 +70,7 @@ function DateRangePicker({
       }
     }
   };
-  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";
   return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -79,12 +79,11 @@ function DateRangePicker({
       ...groupA11y,
       "aria-disabled": disabled ? true : void 0,
       className: cn(
-        // One input-styled shell for the whole range — mirrors Input's control
-        // tokens (border/radius/ring) so it reads as a single form field.
-        "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",
+        // One input-styled shell for the whole range — the shared composite-field box, so
+        // this and the month range picker cannot drift into two slightly different fields.
+        "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: () => {
@@ -114,7 +113,7 @@ function DateRangePicker({
             }
           }
         ),
-        /* @__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",
           {
@@ -149,9 +148,10 @@ function DateRangePicker({
               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",
@@ -159,13 +159,13 @@ function DateRangePicker({
             tabIndex: -1,
             "aria-label": t("dataEntry.dateRangePicker.openCalendar") ?? "Open calendar",
             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__ */ jsx(
           PopoverContent,
           {
-            className: "w-auto p-0",
+            className: "ui-control-panel-flush",
             align: "start",
             onOpenAutoFocus: (event) => event.preventDefault(),
             children: /* @__PURE__ */ jsx(

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

@@ -52,8 +52,12 @@ function FormField({
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
     // Byte-for-byte the same value typography as `Descriptions.Item`'s `dd` (gh#294), so a
-    // read-only FormField row and a Descriptions value are indistinguishable when mixed.
-    /* @__PURE__ */ jsx("span", { className: "text-sm break-all", children: staticText })
+    // read-only FormField row and a Descriptions value are indistinguishable when mixed. That
+    // used to be two copies of the literal `text-sm` kept in sync by this comment; both call sites
+    // now read the SAME token pair (#319), so a service retunes both from one place and they
+    // cannot drift. --descriptions-value-line-height is the mandatory companion: `text-sm` also
+    // set Tailwind's `--text-sm--line-height`, which the theme never remaps (the gh#260 bug).
+    /* @__PURE__ */ jsx("span", { className: "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] break-all", children: staticText })
   ) : React.isValidElement(children) ? React.cloneElement(children, {
     // The label is associated via aria-labelledby (not <label for>): composite
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,
@@ -83,7 +87,7 @@ function FormField({
     style["--form-label-width"] = toCssLength(labelWidth);
   if (controlWidth != null)
     style["--form-control-width"] = toCssLength(controlWidth);
-  if (colSpan != null) style.gridColumn = `span ${colSpan}`;
+  if (colSpan != null) style["--form-field-col-span"] = String(colSpan);
   return /* @__PURE__ */ jsxs(
     "div",
     {

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

@@ -21,8 +21,9 @@ export { SearchInput } from "./search-input.js";
 export { Switch } from "./switch.js";
 export type { SwitchProps } from "./switch.js";
 export { Toggle } from "./toggle.js";
-export type { ToggleProps } from "./toggle.js";
+export type { ToggleProp, ToggleProps } from "./toggle.js";
 export { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+export type { ToggleGroupItemProp, ToggleGroupItemProps } from "./toggle-group.js";
 export { Slider } from "./slider.js";
 export type { SliderProps } from "./slider.js";
 export { Calendar } from "./calendar.js";

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

@@ -6,12 +6,9 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 const inputBaseClass = [
-  "ui-control border-input bg-background w-full min-w-0 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+  "ui-control ui-input border-input bg-background w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
   "selection:bg-primary selection:text-primary-foreground",
-  "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
   "placeholder:text-muted-foreground",
-  "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   "aria-invalid:border-destructive aria-invalid:ring-destructive/20"
 ];
 const Input = React.forwardRef(
@@ -89,20 +86,12 @@ const Input = React.forwardRef(
         tabIndex: -1,
         "aria-label": t("common.clear") ?? "Clear",
         onClick: clear,
-        className: "text-muted-foreground hover:text-foreground inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100",
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        className: "ui-control-inline-affix-action",
+        children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
       }
     ) : trailingIcon;
-    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
-      leadingIcon != null ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "input-leading",
-          "aria-hidden": "true",
-          className: "text-muted-foreground pointer-events-none absolute inset-y-0 start-2 inline-flex items-center",
-          children: leadingIcon
-        }
-      ) : null,
+    return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "ui-input-affix-wrapper", children: [
+      leadingIcon != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-leading", "aria-hidden": "true", className: "ui-input-leading", children: leadingIcon }) : null,
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -114,15 +103,15 @@ const Input = React.forwardRef(
           onChange: handleChange,
           className: cn(
             inputBaseClass,
-            leadingIcon != null && "ps-9",
-            (showClear || trailingIcon != null) && "pe-9",
+            leadingIcon != null && "ui-input--leading-affix",
+            (showClear || trailingIcon != null) && "ui-input--trailing-affix",
             className
           ),
           ...props,
           ...nameFallback
         }
       ),
-      trailing != null ? /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 end-2 inline-flex items-center", children: trailing }) : null
+      trailing != null ? /* @__PURE__ */ jsx("span", { className: "ui-input-trailing", children: trailing }) : null
     ] });
   }
 );

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

@@ -5,7 +5,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "font-medium leading-[var(--control-label-line-height)] peer-disabled:cursor-not-allowed peer-disabled:opacity-[var(--control-label-disabled-alpha)]"
 );
 const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
@@ -13,7 +13,9 @@ const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ref,
     "data-slot": "label",
     className: cn(
-      "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+      // A label inside a disabled group reads at the SYSTEM disabled alpha (--disabled-opacity),
+      // the same one .ui-checkbox/.ui-radio/.ui-switch:disabled use — one knob, not a second one.
+      "ui-label group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-[var(--disabled-opacity)]",
       labelVariants(),
       className
     ),

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

@@ -61,11 +61,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: () => {
@@ -87,7 +87,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 +117,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 +128,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 +137,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 +151,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 +165,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 +180,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

@@ -99,7 +99,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",
@@ -108,11 +108,11 @@ function MonthRangePicker({
       id: groupId,
       ...groupA11y,
       "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: () => {
@@ -139,7 +139,7 @@ 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",
           {
@@ -171,9 +171,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 +182,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 +202,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 +216,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 +236,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

@@ -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,

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

@@ -258,13 +258,13 @@ function SearchSelect({
                 "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: [
@@ -284,9 +284,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 +298,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 +307,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 +331,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 +343,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 +357,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 +367,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 +377,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 +394,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 {