@godxjp/ui 17.0.0 → 18.0.0

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import type { NumberInputProp } from "../../props/components/data-entry.prop.js";
 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.
@@ -9,4 +8,22 @@ export type { NumberInputProp, NumberInputProp as NumberInputProps, } from "../.
  * (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.
  */
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProp & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberInput: React.ForwardRefExoticComponent<import("../../lib/field-a11y.js").FieldA11yProps & {
+    value?: import("../../props/index.js").ValueProp<number | null>;
+    defaultValue?: import("../../props/index.js").DefaultValueProp<number | null>;
+    onValueChange?: import("../../props/index.js").OnValueChangeProp<number | null>;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    disabled?: import("../../props/index.js").DisabledProp;
+    readOnly?: boolean;
+    size?: import("../../props/index.js").SizeProp;
+    placeholder?: import("../../props/index.js").PlaceholderProp;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    name?: import("../../props/index.js").NameProp;
+    id?: import("../../props/index.js").IdProp;
+    className?: import("../../props/index.js").ClassNameProp;
+    "data-testid"?: string;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { Input } from "./input.js";
 function decimalsOf(n) {
@@ -41,12 +42,11 @@ const NumberInput = React.forwardRef(
     name,
     id,
     className,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-describedby": ariaDescribedby,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    ...ariaProps
   }, ref) => {
     const { t, locale } = useTranslation();
+    const fieldA11y = pickFieldA11y(ariaProps);
     const isControlled = controlledValue !== void 0;
     const [internal, setInternal] = React.useState(defaultValue);
     const numericValue = isControlled ? controlledValue ?? null : internal;
@@ -159,9 +159,7 @@ const NumberInput = React.forwardRef(
           placeholder,
           disabled,
           readOnly,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledby,
-          "aria-describedby": ariaDescribedby,
+          ...fieldA11y,
           "aria-valuenow": numericValue ?? void 0,
           "aria-valuemin": min,
           "aria-valuemax": max,

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

@@ -4,7 +4,7 @@ import type { RadioGroupProp } from "../../props/components/data-entry.prop.js";
 export type { RadioGroupProp, RadioGroupProp as RadioGroupProps, } from "../../props/components/data-entry.prop.js";
 declare const RadioGroupRoot: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: RadioGroupProp): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, disabled, name, id, className, children, ...ariaProps }: RadioGroupProp): import("react/jsx-runtime").JSX.Element;
 /** Single radio — use inside `Radio.Group` / `RadioGroupRoot`, or via `options` API. */
 export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
     Root: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -4,6 +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 { Field } from "./field.js";
 import { choiceGroupClassName } from "./choice-option.js";
 const RadioGroupRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -45,10 +46,13 @@ function RadioGroupOptions({
   orientation = "vertical",
   disabled,
   name,
+  id,
   className,
-  children
+  children,
+  ...ariaProps
 }) {
   const reactId = React.useId();
+  const groupA11y = pickFieldA11y(ariaProps);
   if (options && options.length > 0) {
     return /* @__PURE__ */ jsx(
       RadioGroupRoot,
@@ -58,11 +62,13 @@ function RadioGroupOptions({
         onValueChange,
         disabled,
         name,
+        id,
+        ...groupA11y,
         "data-orientation": orientation,
         className: choiceGroupClassName(orientation, className),
         children: options.map((opt, index) => {
-          const id = `${reactId}-${opt.value}-${index}`;
-          return /* @__PURE__ */ jsx(Field, { id, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(RadioItem, { id, value: opt.value, disabled: opt.disabled }) }, opt.value);
+          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);
         })
       }
     );
@@ -75,6 +81,8 @@ function RadioGroupOptions({
       onValueChange,
       disabled,
       name,
+      id,
+      ...groupA11y,
       "data-orientation": orientation,
       className: choiceGroupClassName(orientation, className),
       children

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-interface SearchInputProps {
+import { type FieldA11yProps } from "../../lib/field-a11y.js";
+interface SearchInputProps extends FieldA11yProps {
     value?: string;
     defaultValue?: string;
     placeholder?: string;
@@ -15,5 +16,5 @@ interface SearchInputProps {
     id?: string;
     disabled?: boolean;
 }
-export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, ...ariaProps }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,6 +6,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { Input } from "../data-entry/input.js";
 import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
+import { resolveFieldA11y } from "../../lib/field-a11y.js";
 import { useDebouncedValue } from "../../lib/hooks.js";
 function SearchInput({
   value: controlledValue,
@@ -19,7 +20,8 @@ function SearchInput({
   className,
   inputClassName,
   id,
-  disabled = false
+  disabled = false,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
   const isControlled = controlledValue !== void 0;
@@ -30,6 +32,7 @@ function SearchInput({
   const inputId = id ?? `search-${reactId}`;
   const resolvedPlaceholder = placeholder ?? t("dataEntry.searchInput.placeholder");
   const resolvedAriaLabel = ariaLabel ?? t("common.search");
+  const fieldA11y = resolveFieldA11y(ariaProps, resolvedAriaLabel);
   const onSearchRef = React.useRef(onSearch);
   React.useEffect(() => {
     onSearchRef.current = onSearch;
@@ -56,7 +59,7 @@ function SearchInput({
             setValue(e.target.value);
           },
           placeholder: resolvedPlaceholder,
-          "aria-label": resolvedAriaLabel,
+          ...fieldA11y,
           className: cn(
             "ui-search-input-control !pr-[var(--search-input-end-padding)] !pl-[var(--search-input-start-padding)]",
             inputClassName

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

@@ -8,4 +8,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, 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): import("react/jsx-runtime").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, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, }: SearchSelectProp): import("react/jsx-runtime").JSX.Element;

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

@@ -28,6 +28,15 @@ function SearchSelect({
   clearLabel,
   clearable = true,
   disabled = false,
+  readOnly = false,
+  size,
+  open: openProp,
+  onOpenChange,
+  search: searchProp,
+  onSearchChange,
+  filterOption,
+  renderError,
+  renderLoadMore,
   name,
   id,
   className,
@@ -43,8 +52,26 @@ function SearchSelect({
   const reactId = React.useId();
   const listId = `${reactId}-listbox`;
   const optionDomId = (optionValue) => `${reactId}-opt-${optionValue}`;
-  const [open, setOpen] = React.useState(false);
-  const [query, setQuery] = React.useState("");
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const isOpenControlled = openProp !== void 0;
+  const open = isOpenControlled ? openProp : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+  const [internalQuery, setInternalQuery] = React.useState("");
+  const isSearchControlled = searchProp !== void 0;
+  const query = isSearchControlled ? searchProp : internalQuery;
+  const setQuery = React.useCallback(
+    (next) => {
+      if (!isSearchControlled) setInternalQuery(next);
+      onSearchChange?.(next);
+    },
+    [isSearchControlled, onSearchChange]
+  );
   const [debouncedQuery, setDebouncedQuery] = React.useState("");
   const [loaded, setLoaded] = React.useState([]);
   const [page, setPage] = React.useState(1);
@@ -59,16 +86,15 @@ function SearchSelect({
   const reqId = React.useRef(0);
   const resolvedLoad = React.useMemo(
     () => loadOptions ?? (async ({ query: search }) => {
-      const needle = search.trim().toLowerCase();
+      const needle = search.trim();
       const list = staticOptions ?? [];
+      const matches = (option) => filterOption ? filterOption(option, needle) : option.label.toLowerCase().includes(needle.toLowerCase()) || option.value.toLowerCase().includes(needle.toLowerCase());
       return {
-        options: needle ? list.filter(
-          (option) => option.label.toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle)
-        ) : list,
+        options: needle ? list.filter(matches) : list,
         hasMore: false
       };
     }),
-    [loadOptions, staticOptions]
+    [loadOptions, staticOptions, filterOption]
   );
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
@@ -190,13 +216,14 @@ function SearchSelect({
   const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
   const activeOption = flatOrdered[activeIndex];
   const activeOptionId = activeOption ? optionDomId(activeOption.value) : void 0;
-  const showClear = clearable && Boolean(value) && !disabled;
+  const showClear = clearable && Boolean(value) && !disabled && !readOnly;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(
       Popover,
       {
         open,
         onOpenChange: (next) => {
+          if (readOnly && next) return;
           setOpen(next);
           if (!next) setQuery("");
         },
@@ -208,6 +235,7 @@ function SearchSelect({
               type: "button",
               variant: "outline",
               role: "combobox",
+              size,
               "aria-expanded": open,
               "aria-controls": open ? listId : void 0,
               "aria-label": ariaLabel,
@@ -216,6 +244,7 @@ function SearchSelect({
               "aria-errormessage": ariaErrorMessage,
               "aria-invalid": ariaInvalid,
               "aria-required": ariaRequired,
+              "aria-readonly": readOnly || void 0,
               disabled,
               "data-testid": dataTestId,
               className: cn(
@@ -317,7 +346,12 @@ function SearchSelect({
                             loadingMessage ?? t("dataEntry.searchSelect.loading")
                           ]
                         }
-                      ) : error ? /* @__PURE__ */ jsx(
+                      ) : 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).
+                        retry: () => void fetchPage(1, debouncedQuery, false)
+                      }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           role: "option",
@@ -338,7 +372,14 @@ function SearchSelect({
                       ) : null
                     ]
                   }
-                )
+                ),
+                renderLoadMore && hasMore ? /* @__PURE__ */ jsx("div", { className: "border-border shrink-0 border-t p-1", children: renderLoadMore({
+                  hasMore,
+                  loading,
+                  loadMore: () => {
+                    if (!loading) void fetchPage(page + 1, debouncedQuery, true);
+                  }
+                }) }) : null
               ] })
             }
           )

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

@@ -14,6 +14,13 @@ export declare function SelectGroup(props: React.ComponentProps<typeof SelectPri
 export declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     size?: "sm" | "md";
+    /**
+     * 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.
+     */
+    showIndicator?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
 export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -21,7 +21,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", ...props }, ref) => /* @__PURE__ */ jsxs(
+const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -35,14 +35,14 @@ const SelectTrigger = React.forwardRef(({ className, children, size = "md", ...p
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+      showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
         ChevronDown,
         {
           "data-slot": "select-chevron",
           className: "size-4 shrink-0 opacity-50",
           "aria-hidden": "true"
         }
-      ) })
+      ) }) : null
     ]
   }
 ));
@@ -165,6 +165,15 @@ function DataSelect({
   clearLabel,
   clearable,
   disabled,
+  readOnly,
+  size,
+  open,
+  onOpenChange,
+  search,
+  onSearchChange,
+  filterOption,
+  renderError,
+  renderLoadMore,
   name,
   id,
   className,
@@ -197,6 +206,15 @@ function DataSelect({
         clearLabel,
         clearable,
         disabled: disabled || !loadOptions && !hasOptions,
+        readOnly,
+        size,
+        open,
+        onOpenChange,
+        search,
+        onSearchChange,
+        filterOption,
+        renderError,
+        renderLoadMore,
         name,
         id,
         className,

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

@@ -7,4 +7,4 @@ export type { TimePickerProp, TimePickerProp as TimePickerProps, } from "../../p
  * The column display honours the active `timeFormat` (12h shows 1-12 + AM/PM) while the canonical
  * value remains 24h `HH:mm`.
  */
-export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, allowClear, }: TimePickerProp): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, allowClear, ...ariaProps }: TimePickerProp): import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Clock } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
 import { isValidHhmm, normalizeHhmm } from "../../lib/datetime/index.js";
+import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Input } from "./input.js";
@@ -210,12 +211,16 @@ function TimePicker({
   id,
   name,
   minuteStep = 5,
-  allowClear = true
+  allowClear = true,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
   const { timeFormat } = usePickerLocales();
   const use12h = timeFormat === "12h";
   const [open, setOpen] = React.useState(false);
+  const fieldA11y = pickFieldA11y(ariaProps);
+  const reactId = React.useId();
+  const dialogId = `${id ?? reactId}-dialog`;
   const [internal, setInternal] = React.useState(defaultValue ?? "");
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internal;
@@ -246,6 +251,8 @@ function TimePicker({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "dialog",
+        "aria-controls": open ? dialogId : void 0,
+        ...fieldA11y,
         className: "tabular-nums",
         allowClear,
         onClear: clear,
@@ -285,6 +292,9 @@ function TimePicker({
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
+        id: dialogId,
+        role: "dialog",
+        "aria-label": t("dataEntry.timePicker.openPicker") ?? "Time picker",
         className: "w-auto p-0",
         align: "end",
         onOpenAutoFocus: (event) => event.preventDefault(),

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

@@ -1,3 +1,3 @@
 import type { TransferProp } from "../../props/components/data-entry.prop.js";
 export type { TransferProp, TransferProp as TransferProps, TransferItemProp, } from "../../props/components/data-entry.prop.js";
-export declare function Transfer({ dataSource, targetKeys, onValueChange, titles, showSearch, oneWay, disabled, className, selectedKeys: selectedKeysProp, onSelectChange, }: TransferProp): import("react/jsx-runtime").JSX.Element;
+export declare function Transfer({ dataSource, targetKeys, onValueChange, titles, showSearch, oneWay, disabled, id, className, selectedKeys: selectedKeysProp, onSelectChange, ...ariaProps }: TransferProp): import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
 import { ScrollArea } from "../data-display/scroll-area.js";
 import { Checkbox } from "./checkbox.js";
@@ -104,11 +105,14 @@ function Transfer({
   showSearch,
   oneWay,
   disabled,
+  id,
   className,
   selectedKeys: selectedKeysProp,
-  onSelectChange
+  onSelectChange,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
+  const groupA11y = pickGroupFieldA11y(ariaProps);
   const [internalSelected, setInternalSelected] = React.useState([[], []]);
   const selected = selectedKeysProp ?? internalSelected;
   const sourceItems = dataSource.filter((item) => !targetKeys.includes(item.key));
@@ -130,64 +134,74 @@ function Transfer({
   };
   const leftTitle = titles?.[0] ?? t("dataEntry.transfer.source");
   const rightTitle = titles?.[1] ?? t("dataEntry.transfer.target");
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-stretch gap-3", className), children: [
-    /* @__PURE__ */ jsx(
-      TransferPanel,
-      {
-        direction: "left",
-        title: leftTitle,
-        items: sourceItems,
-        selectedKeys: selected[0],
-        onSelectChange: (keys) => setSelected(0, keys),
-        onSelectAll: (checked) => setSelected(0, checked ? sourceItems.filter((i) => !i.disabled).map((i) => i.key) : []),
-        showSearch,
-        disabled,
-        searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
-        emptyText: t("dataEntry.transfer.empty")
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "icon",
-          variant: "outline",
-          disabled: Boolean(disabled) || selected[0].length === 0,
-          "aria-label": t("dataEntry.transfer.moveRight"),
-          onClick: () => move("right"),
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
-        }
-      ),
-      !oneWay && /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "icon",
-          variant: "outline",
-          disabled: Boolean(disabled) || selected[1].length === 0,
-          "aria-label": t("dataEntry.transfer.moveLeft"),
-          onClick: () => move("left"),
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      TransferPanel,
-      {
-        direction: "right",
-        title: rightTitle,
-        items: targetItems,
-        selectedKeys: selected[1],
-        onSelectChange: (keys) => setSelected(1, keys),
-        onSelectAll: (checked) => setSelected(1, checked ? targetItems.filter((i) => !i.disabled).map((i) => i.key) : []),
-        showSearch,
-        disabled,
-        searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
-        emptyText: t("dataEntry.transfer.empty")
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      id,
+      ...groupA11y,
+      "aria-disabled": disabled ? true : void 0,
+      className: cn("flex flex-wrap items-stretch gap-3", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          TransferPanel,
+          {
+            direction: "left",
+            title: leftTitle,
+            items: sourceItems,
+            selectedKeys: selected[0],
+            onSelectChange: (keys) => setSelected(0, keys),
+            onSelectAll: (checked) => setSelected(0, checked ? sourceItems.filter((i) => !i.disabled).map((i) => i.key) : []),
+            showSearch,
+            disabled,
+            searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
+            emptyText: t("dataEntry.transfer.empty")
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon",
+              variant: "outline",
+              disabled: Boolean(disabled) || selected[0].length === 0,
+              "aria-label": t("dataEntry.transfer.moveRight"),
+              onClick: () => move("right"),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          !oneWay && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon",
+              variant: "outline",
+              disabled: Boolean(disabled) || selected[1].length === 0,
+              "aria-label": t("dataEntry.transfer.moveLeft"),
+              onClick: () => move("left"),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          TransferPanel,
+          {
+            direction: "right",
+            title: rightTitle,
+            items: targetItems,
+            selectedKeys: selected[1],
+            onSelectChange: (keys) => setSelected(1, keys),
+            onSelectAll: (checked) => setSelected(1, checked ? targetItems.filter((i) => !i.disabled).map((i) => i.key) : []),
+            showSearch,
+            disabled,
+            searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
+            emptyText: t("dataEntry.transfer.empty")
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   Transfer

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

@@ -1,7 +1,7 @@
 import type { TreeSelectProp } from "../../props/components/data-entry.prop.js";
 export type { TreeSelectProp, TreeSelectProp as TreeSelectProps, } from "../../props/components/data-entry.prop.js";
 export { SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select-strategy.js";
-declare function TreeSelectRoot({ treeData: treeDataProp, value, defaultValue, onValueChange, multiple, treeCheckable, treeCheckStrictly, showSearch, showCheckedStrategy, treeDefaultExpandAll, placeholder, disabled, allowClear, className, id, fieldNames, }: TreeSelectProp): import("react/jsx-runtime").JSX.Element;
+declare function TreeSelectRoot({ treeData: treeDataProp, value, defaultValue, onValueChange, multiple, treeCheckable, treeCheckStrictly, showSearch, showCheckedStrategy, treeDefaultExpandAll, placeholder, disabled, allowClear, className, id, fieldNames, ...ariaProps }: TreeSelectProp): import("react/jsx-runtime").JSX.Element;
 export declare const TreeSelect: typeof TreeSelectRoot & {
     SHOW_CHILD: "SHOW_CHILD";
     SHOW_PARENT: "SHOW_PARENT";

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronDown, ChevronRight, ChevronsUpDown, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -57,9 +58,13 @@ function TreeSelectRoot({
   allowClear = true,
   className,
   id,
-  fieldNames
+  fieldNames,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
+  const fieldA11y = pickFieldA11y(ariaProps);
+  const reactId = React.useId();
+  const treeId = `${id ?? reactId}-tree`;
   const options = React.useMemo(
     () => normalizeTreeOptions(treeDataProp, fieldNames),
     [treeDataProp, fieldNames]
@@ -177,6 +182,9 @@ function TreeSelectRoot({
         variant: "outline",
         role: "combobox",
         "aria-expanded": open,
+        "aria-haspopup": "tree",
+        "aria-controls": open ? treeId : void 0,
+        ...fieldA11y,
         disabled,
         className: cn(
           "w-full justify-between font-normal",
@@ -211,6 +219,7 @@ function TreeSelectRoot({
       /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx(
         "div",
         {
+          id: treeId,
           role: "tree",
           "aria-multiselectable": Boolean(checkable) || Boolean(multiple),
           className: "p-1",