@godxjp/ui 19.1.0 → 19.2.0

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

@@ -1,24 +1,78 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, dateMatchModifiers } from "react-day-picker";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconSmClass } from "../../lib/control-styles.js";
-import { buttonVariants } from "../general/button.js";
+import { Button, buttonVariants } from "../general/button.js";
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const endOfMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+const sameDay = (a, b) => startOfDay(a).getTime() === startOfDay(b).getTime();
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   "aria-label": ariaLabel,
   labels,
+  showToday = false,
+  showClose = false,
+  onClose,
+  footer,
+  month: monthProp,
+  onMonthChange,
   ...props
 }) {
+  const { t } = useTranslation();
+  const [month, setMonth] = React.useState(monthProp ?? props.defaultMonth);
+  const today = startOfDay(props.today ?? /* @__PURE__ */ new Date());
+  const todayDisabled = props.startMonth != null && today < startOfMonth(props.startMonth) || props.endMonth != null && today > endOfMonth(props.endMonth) || props.disabled != null && dateMatchModifiers(today, props.disabled);
+  const modifiers = { today: true };
+  const selectToday = (event) => {
+    setMonth(startOfMonth(today));
+    onMonthChange?.(startOfMonth(today));
+    if (props.mode === "single") {
+      props.onSelect?.(today, today, modifiers, event);
+    } else if (props.mode === "multiple") {
+      const current = props.selected ?? [];
+      const next = current.some((day) => sameDay(day, today)) ? current : [...current, today];
+      props.onSelect?.(next, today, modifiers, event);
+    } else if (props.mode === "range") {
+      const from = props.selected?.from;
+      const to = props.selected?.to;
+      const next = from && !to ? today < from ? { from: today, to: from } : { from, to: today } : { from: today, to: void 0 };
+      props.onSelect?.(next, today, modifiers, event);
+    }
+  };
+  const actions = showToday || showClose ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    showToday ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "ui-calendar-footer-today",
+        disabled: todayDisabled,
+        onClick: selectToday,
+        children: t("dataEntry.calendar.today") ?? "Today"
+      }
+    ) : null,
+    showClose ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClose, children: t("dataEntry.calendar.close") ?? "Close" }) : null
+  ] }) : void 0;
   const rangeDefaults = props.mode === "range" ? { resetOnSelect: props.resetOnSelect ?? true } : null;
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
       "aria-label": ariaLabel,
+      month: showToday ? monthProp ?? month : monthProp,
+      onMonthChange: (next) => {
+        setMonth(next);
+        onMonthChange?.(next);
+      },
+      footer: footer ?? actions,
       labels: {
         ...labels,
         labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
@@ -81,6 +135,7 @@ function Calendar({
         ),
         disabled: cn("ui-calendar-day-disabled", classNames?.disabled),
         hidden: cn("invisible", classNames?.hidden),
+        footer: cn("ui-calendar-footer", classNames?.footer),
         ...classNames
       },
       components: {

package/dist/components/data-entry/command-palette.d.ts

@@ -31,7 +31,7 @@ export type CommandPaletteProps = {
     onOpenChange?: (open: boolean) => void;
     /**
      * Controlled search-box query. Pairs with `onSearchChange`; leave it out for the uncontrolled
-     * palette (seeded by `defaultSearch`). Same idiom as `SearchSelect`'s `search`.
+     * palette (seeded by `defaultSearch`).
      */
     search?: string;
     /** Initial uncontrolled query, and the value the palette resets to when it closes. Default `""`. */
@@ -45,8 +45,6 @@ export type CommandPaletteProps = {
      * Whether the palette filters `groups` itself (cmdk's client-side fuzzy match). Set `false` when
      * the QUERY is answered by a server and `groups` already holds the matches — otherwise every row
      * is scored a second time against the same string and late-arriving matches are dropped.
-     *
-     * It also decides who owns the empty node; see the component doc block. Default `true`.
      */
     shouldFilter?: boolean;
     loading?: boolean;
@@ -55,24 +53,12 @@ export type CommandPaletteProps = {
     shortcut?: boolean;
 };
 /**
- * CommandPalette — the ⌘K search dialog.
- *
- * ## The empty-state contract (gh#412)
- *
- * `labels.empty` renders under exactly one rule, and which mechanism decides follows `shouldFilter`:
- *
- * - **`shouldFilter` (default, client-side)** — cmdk owns it: the palette holds items, the query
- *   matches none of them. Unchanged.
- * - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived synchronously from
- *   props: the empty node renders when `groups` carries no items, and never while `loading` or
- *   `error` is set. cmdk's own empty node cannot be trusted here, because it is driven by a
- *   scheduled count of the items that have REGISTERED in the DOM, not by what the consumer knows —
- *   so an async group that populates a frame late flips it on and off and any assertion over it
- *   races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
- *   props at that render, which is what a contract test can assert.
- *
- * The practical consequence for search-as-you-type: hold `loading` true for the whole in-flight
- * window. While it is true the palette shows `labels.loading` and never claims "no results" —
- * a request that has not answered yet is not an empty result.
+ * Unchanged. - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived
+ * synchronously from props: the empty node renders when `groups` carries no items, and never while
+ * `loading` or `error` is set. cmdk's own empty node cannot be trusted here, because it is driven
+ * by a scheduled count of the items that have REGISTERED in the DOM, not by what the consumer
+ * knows — so an async group that populates a frame late flips it on and off and any assertion over
+ * it races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
+ * props at that render, which is what a contract test can assert.
  */
 export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

package/dist/components/data-entry/date-picker.d.ts

@@ -2,9 +2,8 @@ import * as React from "react";
 import type { DatePickerProp } from "../../props/components/data-entry.prop.js";
 export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
- * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an
- * ISO-8601 `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a
- * `name`), screen-reader friendly, and e2e-testable by simply filling the input. The calendar
- * popover is the visual affordance; typing and the calendar stay in sync.
+ * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an ISO-8601
+ * `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a `name`),
+ * screen-reader friendly, and e2e-testable by simply filling the input.
  */
-export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, ...ariaProps }: DatePickerProp): React.JSX.Element;
+export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DatePickerProp): React.JSX.Element;

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

@@ -21,6 +21,8 @@ function DatePicker({
   id,
   name,
   locale: localeProp,
+  showToday,
+  showClose,
   fromDate,
   toDate,
   allowClear = true,
@@ -153,7 +155,10 @@ function DatePicker({
               ...toDate ? [{ after: toDate }] : []
             ],
             startMonth: fromDate,
-            endMonth: toDate
+            endMonth: toDate,
+            showToday,
+            showClose,
+            onClose: () => setOpen(false)
           }
         )
       }

package/dist/components/data-entry/date-range-picker.d.ts

@@ -8,4 +8,4 @@ export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps,
  * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
  * range calendar is the visual affordance.
  */
-export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, ...ariaProps }: DateRangePickerProp): React.JSX.Element;
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DateRangePickerProp): React.JSX.Element;

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

@@ -20,6 +20,8 @@ function DateRangePicker({
   id,
   name,
   locale: localeProp,
+  showToday,
+  showClose,
   fromDate,
   toDate,
   allowClear = true,
@@ -82,12 +84,12 @@ function DateRangePicker({
       ...groupA11y,
       "data-field": rangeField,
       "aria-disabled": disabled ? true : void 0,
+      "data-state": open ? "open" : "closed",
       className: cn(
         // 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]",
+        "aria-invalid:border-destructive",
         className
       ),
       onClick: () => {
@@ -192,7 +194,10 @@ function DateRangePicker({
                   ...toDate ? [{ after: toDate }] : []
                 ],
                 startMonth: fromDate,
-                endMonth: toDate
+                endMonth: toDate,
+                showToday,
+                showClose,
+                onClose: () => setOpen(false)
               }
             )
           }

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

@@ -3,10 +3,9 @@ import type { FormErrorsProp, FormErrorsProviderProp } from "../../props/compone
 import type { ErrorBagProp } from "../../props/vocabulary/index.js";
 export type { FormErrorsProp, FormErrorsProp as FormErrorsProps, FormErrorsProviderProp, FormErrorsProviderProp as FormErrorsProviderProps, } from "../../props/components/data-entry.prop.js";
 /**
- * Registry shared by a `Form` with its FormFields and `<FormErrors />`. Each mounted
- * `FormField name="…"` CLAIMS its error-bag key (it is the visible owner of that message);
- * `<FormErrors />` renders only the unclaimed remainder. Claims are reference-counted so
- * duplicate names and unmount order stay correct.
+ * Registry shared by a `Form` with its FormFields and `<FormErrors />`. Each mounted `FormField
+ * name="…"` CLAIMS its error-bag key (it is the visible owner of that message); `<FormErrors />`
+ * renders only the unclaimed remainder.
  */
 interface FormErrorsRegistryValue {
     errors: ErrorBagProp;
@@ -19,18 +18,9 @@ export declare function useFormErrorsRegistry(): FormErrorsRegistryValue | null;
 /** First message of a bag entry — Laravel arrays surface their first message on the field. */
 export declare function firstBagMessage(entry: string | string[] | undefined): string | undefined;
 /**
- * FormErrorsProvider — one shared error registry (error bag + claim set) over a region.
- * 兄弟 Form 群で 1 つのエラーバッグを共有するための公開プロバイダ。Two ways to get one:
- *
- * 1. `Form errors={…}` renders this provider itself (both `<form>` and `asChild` modes) —
- *    the single-form case needs nothing else.
- * 2. An edit screen split into several sibling Card+Form sections (the standard exseli shape)
- *    wraps the REGION in `<FormErrorsProvider errors={…}>` instead: Forms **without** their own
- *    `errors` join the surrounding registry, every `FormField name="…"` inside claims into it,
- *    and one `<FormErrors />` anywhere in the region renders the unclaimed remainder.
- *
- * A nested Form WITH its own `errors` starts a new registry that shadows this one — its claims
- * and messages stay inside it.
+ * FormErrorsProvider — one shared error registry (error bag + claim set) over a region. 兄弟 Form 群で
+ * 1 つのエラーバッグを共有するための公開プロバイダ。Two ways to get one: 1. `Form errors={…}` renders this provider itself
+ * (both `<form>` and `asChild` modes) — the single-form case needs nothing else. 2.
  */
 export declare function FormErrorsProvider({ errors, children }: FormErrorsProviderProp): React.JSX.Element;
 /** FormField calls this to claim its error-bag key while mounted (no-op outside a Form). */
@@ -39,7 +29,6 @@ export declare function useClaimErrorKey(name: string | undefined): void;
  * FormErrors — renders the error-bag entries no mounted `FormField name="…"` displays: server
  * validation errors attached to hidden/derived fields (an `action_mode`, a `page`, a source-record
  * id) that would otherwise fail silently. Place it inside a `Form errors={…}` — typically above
- * the fields; it renders nothing while every entry is claimed or the bag is empty. Composed on
- * `Alert tone="destructive"` (role="alert"), so appearing messages are announced assertively.
+ * the fields; it renders nothing while every entry is claimed or the bag is empty.
  */
 export declare function FormErrors({ errors: errorsProp, title, className }: FormErrorsProp): React.JSX.Element | null;

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

@@ -59,19 +59,15 @@ function FormField({
   const childProps = React.isValidElement(children) ? children.props : void 0;
   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. 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,
     // and a dangling `for` triggers Chrome's "Incorrect use of <label>" issue.
     id: childProps?.id ?? resolvedId,
-    // gh#337 — the machine key. Read the child's own value first in BOTH cases: cloneElement
+    // Read the child's own value first in BOTH cases: cloneElement
     // overwrites every key present in the config bag, `undefined` included, so a bare
     // `"data-field": fieldKey` would erase a value the control set for itself.
     "data-field": childProps?.["data-field"] ?? fieldKey,

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

@@ -14,15 +14,7 @@ export declare function useFormLayout(): FormLayoutContextValue | null;
 /**
  * Form — Ant-style layout container. Renders a `<form>` and provides layout (vertical/horizontal),
  * label/control width, label alignment, and a responsive collapse breakpoint to every FormField
- * inside it. A FormField may override any of these per-field. Optionally lays fields out in a
- * responsive multi-column grid via `columns` (reuses ResponsiveGrid — mobile-first, 1 col on small).
- *
- * `asChild` renders the caller's own element instead of a `<form>`, keeping only the layout
- * context. Routing libraries own the form element — Inertia's `<Form action method>` and
- * TanStack Form both render their own — so without this every such consumer has to choose
- * between the router's submission handling and the design system's field layout, and ends up
- * hand-rolling label columns per field. Two `<form>` elements cannot nest, so wrapping is not
- * an option: `<Form asChild layout="horizontal" labelWidth={174}><InertiaForm …/></Form>`.
+ * inside it.
  */
 export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
     layout?: FormLayoutProp;

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

@@ -1,37 +1,39 @@
 import * as React from "react";
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Control height tier: `md` (default) or `sm`, the same tiers as SelectTrigger and NumberInput. */
+    size?: "sm" | "md";
     /** Show an inline ✕ that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
     /**
-     * A leading affordance pinned inside the start of the field — e.g. a mail or
-     * search icon (the common auth/search pattern). Decorative by default; the
-     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     * A leading affordance pinned inside the start of the field — e.g. a mail or search icon (the
+     * common auth/search pattern). Decorative by default; the input keeps the keyboard focus.
      */
     leadingIcon?: React.ReactNode;
     /**
-     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
-     * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
-     * holds a value the clear ✕ REPLACES this icon; otherwise this icon shows. Never both.
+     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover trigger
+     * button. ONE trailing icon shows at a time: when `allowClear` and the field holds a value the
+     * clear ✕ REPLACES this icon; otherwise this icon shows.
      */
     trailingIcon?: React.ReactNode;
 };
-export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Control height tier: `md` (default) or `sm`, the same tiers as SelectTrigger and NumberInput. */
+    size?: "sm" | "md";
     /** Show an inline ✕ that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
     /**
-     * A leading affordance pinned inside the start of the field — e.g. a mail or
-     * search icon (the common auth/search pattern). Decorative by default; the
-     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     * A leading affordance pinned inside the start of the field — e.g. a mail or search icon (the
+     * common auth/search pattern). Decorative by default; the input keeps the keyboard focus.
      */
     leadingIcon?: React.ReactNode;
     /**
-     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
-     * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
-     * holds a value the clear ✕ REPLACES this icon; otherwise this icon shows. Never both.
+     * A trailing affordance pinned inside the field — e.g. a calendar / clock popover trigger
+     * button. ONE trailing icon shows at a time: when `allowClear` and the field holds a value the
+     * clear ✕ REPLACES this icon; otherwise this icon shows.
      */
     trailingIcon?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -13,6 +13,7 @@ const inputBaseClass = [
 ];
 const Input = React.forwardRef(
   ({
+    size,
     className,
     type,
     allowClear = false,
@@ -73,6 +74,7 @@ const Input = React.forwardRef(
         {
           type,
           "data-slot": "input",
+          "data-size": size,
           ref: setRefs,
           value,
           defaultValue,
@@ -103,6 +105,7 @@ const Input = React.forwardRef(
         {
           type,
           "data-slot": "input",
+          "data-size": size,
           ref: setRefs,
           value,
           defaultValue,

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

@@ -63,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: () => {

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

@@ -113,10 +113,10 @@ function MonthRangePicker({
       "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: () => {

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

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

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, "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/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,19 +21,23 @@ 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;
-    /** 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>`.
+     * 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>>;

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

@@ -64,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;
@@ -94,9 +94,11 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", show
       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,

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

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

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