@astryxdesign/lab 0.5.0-canary.7b60efa → 0.5.0-canary.7bd80db

package/dist/TransferList/TransferList.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file TransferList.tsx
- * @input Controlled option data, React DOM portals, local action glyphs, and shared Lab reorder styles
+ * @input Controlled option data, React DOM portals, local action glyphs, shared Lab reorder styles, and the core i18n catalog
  * @output Exports TransferList with immediate transfers, vertical reordering, and responsive scroll ownership
  * @position Lab collection input; consumed by index.ts, TransferListSelector, docs, and tests
  *
@@ -83,7 +83,7 @@ export interface TransferListProps<T extends string = string> extends Omit<BaseP
  * />
  * ```
  */
-export declare function TransferList<T extends string = string>({ label, isLabelHidden, description, options, value, onChange, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, xstyle, className, style, ref, role, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...restProps }: TransferListProps<T>): ReactNode;
+export declare function TransferList<T extends string = string>({ label, isLabelHidden, description, options, value, onChange, selectedLabel: selectedLabelFromProps, availableLabel: availableLabelFromProps, hasSearch, searchLabel, searchPlaceholder: searchPlaceholderFromProps, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText: selectedEmptyTextFromProps, availableEmptyText: availableEmptyTextFromProps, noResultsText: noResultsTextFromProps, xstyle, className, style, ref, role, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...restProps }: TransferListProps<T>): ReactNode;
 export declare namespace TransferList {
     var displayName: string;
 }

package/dist/TransferList/TransferList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferList.tsx"],"names":[],"mappings":"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"}

package/dist/TransferList/TransferList.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TransferList.tsx
- * @input Controlled option data, React DOM portals, local action glyphs, and shared Lab reorder styles
+ * @input Controlled option data, React DOM portals, local action glyphs, shared Lab reorder styles, and the core i18n catalog
  * @output Exports TransferList with immediate transfers, vertical reordering, and responsive scroll ownership
  * @position Lab collection input; consumed by index.ts, TransferListSelector, docs, and tests
  *
@@ -26,25 +26,28 @@ import { Text } from '@astryxdesign/core/Text';
 import { TextInput } from '@astryxdesign/core/TextInput';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { useAnnounce } from '@astryxdesign/core/hooks';
+import { useTranslator } from '@astryxdesign/core/i18n';
 import '@astryxdesign/core/theme/tokens.stylex';
-import { borderVars, colorVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { borderVars, colorVars, sizeVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { focusOutlineStyles, mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { reorderStyles } from "../reorderStyles.js";
 import "./tokens.stylex.js";
 import { transferListVars } from "./tokens.stylex.js";
+
+// Lucide glyphs the shared icon registry does not carry (there is no `add` or
+// `grip` semantic name). Typed as icon components and rendered through `Icon`
+// so sizing, colour and a11y come from the icon pipeline rather than a raw
+// inline `<svg>`. Removal reuses the registry `close` glyph instead.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function PlusIcon() {
+function PlusIcon(props) {
   return /*#__PURE__*/_jsxs("svg", {
-    className: "lucide lucide-plus",
-    width: 16,
-    height: 16,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    "aria-hidden": true,
+    ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M5 12h14"
     }), /*#__PURE__*/_jsx("path", {
@@ -52,37 +55,15 @@ function PlusIcon() {
     })]
   });
 }
-function RemoveIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    className: "lucide lucide-x",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M18 6 6 18"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m6 6 12 12"
-    })]
-  });
-}
-function GripVerticalIcon() {
+function GripVerticalIcon(props) {
   return /*#__PURE__*/_jsxs("svg", {
-    className: "lucide lucide-grip-vertical",
-    width: 16,
-    height: 16,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    "aria-hidden": true,
+    ...props,
     children: [/*#__PURE__*/_jsx("circle", {
       cx: "9",
       cy: "5",
@@ -143,6 +124,7 @@ const styles = {
   },
   headerAction: {
     kZKoxP: "xt7dq6l",
+    kAzted: "x1gdqauq",
     k8WAf4: "xt970qd",
     kg3NbH: "xnjsko4",
     kaIpWk: "x2u8bby",
@@ -186,15 +168,16 @@ function moveItem(value, fromIndex, toIndex) {
   nextValue.splice(toIndex, 0, item);
   return nextValue;
 }
+
+// Case folding is locale-independent here, matching Selector, MultiSelector,
+// and CommandPalette. Locale-sensitive folding would mean raw Intl access,
+// which the shipped packages route through the provider instead.
 function matchesQuery(option, query) {
   if (query === '') {
     return true;
   }
   const description = typeof option.description === 'string' ? option.description : '';
-  return [option.label, description, option.group ?? ''].some(part => part.toLocaleLowerCase().includes(query));
-}
-function itemCount(count) {
-  return `${count} ${count === 1 ? 'item' : 'items'}`;
+  return [option.label, description, option.group ?? ''].some(part => part.toLowerCase().includes(query));
 }
 
 /**
@@ -220,18 +203,18 @@ export function TransferList({
   options,
   value,
   onChange,
-  selectedLabel = 'Selected',
-  availableLabel = 'Available',
+  selectedLabel: selectedLabelFromProps,
+  availableLabel: availableLabelFromProps,
   hasSearch = false,
   searchLabel,
-  searchPlaceholder = 'Search…',
+  searchPlaceholder: searchPlaceholderFromProps,
   isReorderable = true,
   hasSelectAll = false,
   hasClear = false,
   renderOption,
-  selectedEmptyText = 'No selected options',
-  availableEmptyText = 'No available options',
-  noResultsText = 'No results',
+  selectedEmptyText: selectedEmptyTextFromProps,
+  availableEmptyText: availableEmptyTextFromProps,
+  noResultsText: noResultsTextFromProps,
   xstyle,
   className,
   style,
@@ -241,6 +224,13 @@ export function TransferList({
   'aria-describedby': ariaDescribedBy,
   ...restProps
 }) {
+  const t = useTranslator();
+  const selectedLabel = selectedLabelFromProps ?? t('@astryx.transferList.selectedLabel');
+  const availableLabel = availableLabelFromProps ?? t('@astryx.transferList.availableLabel');
+  const searchPlaceholder = searchPlaceholderFromProps ?? t('@astryx.transferList.searchPlaceholder');
+  const selectedEmptyText = selectedEmptyTextFromProps ?? t('@astryx.transferList.selectedEmpty');
+  const availableEmptyText = availableEmptyTextFromProps ?? t('@astryx.transferList.availableEmpty');
+  const noResultsText = noResultsTextFromProps ?? t('@astryx.transferList.noResults');
   const labelId = useId();
   const descriptionId = useId();
   const selectedHeadingId = useId();
@@ -276,7 +266,7 @@ export function TransferList({
     return map;
   }, [options]);
   const selectedValues = useMemo(() => new Set(value), [value]);
-  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const normalizedQuery = query.trim().toLowerCase();
   const selectedOptions = useMemo(() => value.map(optionValue => optionByValue.get(optionValue)).filter(option => option != null && matchesQuery(option, normalizedQuery)), [normalizedQuery, optionByValue, value]);
   const availableOptions = useMemo(() => options.filter(option => !selectedValues.has(option.value) && matchesQuery(option, normalizedQuery)), [normalizedQuery, options, selectedValues]);
   const groupedAvailable = useMemo(() => {
@@ -371,25 +361,33 @@ export function TransferList({
     }
     const nextValue = [...currentValueRef.current, option.value];
     commit(nextValue);
-    announce(`${option.label} added. ${itemCount(nextValue.length)} selected.`);
+    announce(t('@astryx.transferList.announceAdded', {
+      label: option.label,
+      count: nextValue.length
+    }));
     focusAfterTransfer('available', index);
-  }, [announce, commit, focusAfterTransfer]);
+  }, [announce, commit, focusAfterTransfer, t]);
   const removeOption = useCallback((option, index) => {
     if (option.isTransferDisabled) {
       return;
     }
     const nextValue = currentValueRef.current.filter(item => item !== option.value);
     commit(nextValue);
-    announce(`${option.label} removed. ${itemCount(nextValue.length)} selected.`);
+    announce(t('@astryx.transferList.announceRemoved', {
+      label: option.label,
+      count: nextValue.length
+    }));
     focusAfterTransfer('selected', index);
-  }, [announce, commit, focusAfterTransfer]);
+  }, [announce, commit, focusAfterTransfer, t]);
   const addAll = useCallback(() => {
     const additions = options.filter(option => !option.isTransferDisabled && !currentValueRef.current.includes(option.value)).map(option => option.value);
     if (additions.length > 0) {
       commit([...currentValueRef.current, ...additions]);
-      announce(`${itemCount(additions.length)} added.`);
+      announce(t('@astryx.transferList.announceBulkAdded', {
+        count: additions.length
+      }));
     }
-  }, [announce, commit, options]);
+  }, [announce, commit, options, t]);
   const clearSelected = useCallback(() => {
     const nextValue = currentValueRef.current.filter(optionValue => {
       const option = optionByValue.get(optionValue);
@@ -398,9 +396,11 @@ export function TransferList({
     const removed = currentValueRef.current.length - nextValue.length;
     if (removed > 0) {
       commit(nextValue);
-      announce(`${itemCount(removed)} removed.`);
+      announce(t('@astryx.transferList.announceBulkRemoved', {
+        count: removed
+      }));
     }
-  }, [announce, commit, optionByValue]);
+  }, [announce, commit, optionByValue, t]);
   const movableRange = useCallback((optionValue, orderedValue) => {
     const index = orderedValue.indexOf(optionValue);
     let start = 0;
@@ -463,9 +463,13 @@ export function TransferList({
       hasPointerMoved: false
     });
     if (mode === 'keyboard') {
-      announce(`${option.label} picked up, position ${index + 1} of ${currentValueRef.current.length}. Use arrow keys to move, Space or Enter to drop, or Escape to cancel.`);
+      announce(t('@astryx.transferList.announceGrabbed', {
+        label: option.label,
+        position: index + 1,
+        total: currentValueRef.current.length
+      }));
     }
-  }, [announce, isReorderable, setReorderSession]);
+  }, [announce, isReorderable, setReorderSession, t]);
   const finishReorder = useCallback(cancelled => {
     const session = reorderSessionRef.current;
     if (!session) {
@@ -475,7 +479,9 @@ export function TransferList({
       if (cancelled || !session.hasPointerMoved) {
         setReorderSession(null);
         if (cancelled) {
-          announce(`${session.label} move cancelled.`);
+          announce(t('@astryx.transferList.announceMoveCancelled', {
+            label: session.label
+          }));
         }
         return;
       }
@@ -484,21 +490,34 @@ export function TransferList({
       flushSync(() => setReorderSession(null));
       if (hasChanged) {
         commit(nextValue);
-        announce(`${session.label} dropped at position ${session.toIndex + 1} of ${session.originalValue.length}.`);
+        announce(t('@astryx.transferList.announceDropped', {
+          label: session.label,
+          position: session.toIndex + 1,
+          total: session.originalValue.length
+        }));
       } else {
-        announce(`${session.label} returned to position ${session.fromIndex + 1}.`);
+        announce(t('@astryx.transferList.announceReturned', {
+          label: session.label,
+          position: session.fromIndex + 1
+        }));
       }
       return;
     }
     if (cancelled) {
       commit(session.originalValue);
-      announce(`${session.label} move cancelled.`);
+      announce(t('@astryx.transferList.announceMoveCancelled', {
+        label: session.label
+      }));
     } else {
       const index = currentValueRef.current.indexOf(session.value);
-      announce(`${session.label} dropped at position ${index + 1} of ${currentValueRef.current.length}.`);
+      announce(t('@astryx.transferList.announceDropped', {
+        label: session.label,
+        position: index + 1,
+        total: currentValueRef.current.length
+      }));
     }
     setReorderSession(null);
-  }, [announce, commit, setReorderSession]);
+  }, [announce, commit, setReorderSession, t]);
   const handleReorderClick = useCallback(option => {
     if (suppressClickRef.current) {
       suppressClickRef.current = false;
@@ -543,9 +562,13 @@ export function TransferList({
     event.preventDefault();
     if (moveOption(option.value, target)) {
       const nextIndex = currentValueRef.current.indexOf(option.value);
-      announce(`${option.label}, position ${nextIndex + 1} of ${currentValueRef.current.length}.`);
+      announce(t('@astryx.transferList.announceMovedToPosition', {
+        label: option.label,
+        position: nextIndex + 1,
+        total: currentValueRef.current.length
+      }));
     }
-  }, [announce, finishReorder, movableRange, moveOption]);
+  }, [announce, finishReorder, movableRange, moveOption, t]);
   const handlePointerDown = useCallback((event, option) => {
     if (event.button !== 0 || option.isReorderDisabled) {
       return;
@@ -608,9 +631,13 @@ export function TransferList({
     };
     setReorderSession(nextSession);
     if (hasCrossedThreshold && session.toIndex !== targetIndex) {
-      announce(`${option.label}, position ${targetIndex + 1} of ${session.originalValue.length}.`);
+      announce(t('@astryx.transferList.announceMovedToPosition', {
+        label: option.label,
+        position: targetIndex + 1,
+        total: session.originalValue.length
+      }));
     }
-  }, [announce, movableRange, setReorderSession]);
+  }, [announce, movableRange, setReorderSession, t]);
   const handlePointerEnd = useCallback((event, cancelled) => {
     const session = reorderSessionRef.current;
     if (session?.mode !== 'pointer' || session.pointerId !== event.pointerId) {
@@ -630,21 +657,30 @@ export function TransferList({
   }, [finishReorder]);
   const handleSearch = useCallback(nextQuery => {
     setQuery(nextQuery);
-    const normalized = nextQuery.trim().toLocaleLowerCase();
+    const normalized = nextQuery.trim().toLowerCase();
     if (normalized === '') {
       announce('');
     } else {
       const count = options.filter(option => matchesQuery(option, normalized)).length;
-      announce(`${itemCount(count)} found.`);
+      announce(t('@astryx.transferList.announceSearchResults', {
+        count
+      }));
     }
-  }, [announce, options]);
+  }, [announce, options, t]);
   const optionActions = (option, side, index) => {
     const isTransferDisabled = option.isTransferDisabled === true;
-    const disabledReason = option.disabledMessage ?? `${option.label} cannot be moved`;
+    const disabledReason = option.disabledMessage ?? t('@astryx.transferList.transferDisabled', {
+      label: option.label
+    });
     if (side === 'available') {
       return /*#__PURE__*/_jsx(IconButton, {
-        label: `Add ${option.label}`,
-        icon: /*#__PURE__*/_jsx(PlusIcon, {}),
+        label: t('@astryx.transferList.addOption', {
+          label: option.label
+        }),
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: PlusIcon,
+          size: "sm"
+        }),
         size: "sm",
         variant: "ghost",
         isDisabled: isTransferDisabled,
@@ -654,8 +690,13 @@ export function TransferList({
       });
     }
     return /*#__PURE__*/_jsx(IconButton, {
-      label: `Remove ${option.label}`,
-      icon: /*#__PURE__*/_jsx(RemoveIcon, {}),
+      label: t('@astryx.transferList.removeOption', {
+        label: option.label
+      }),
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "close",
+        size: "sm"
+      }),
       size: "sm",
       variant: "ghost",
       isDisabled: isTransferDisabled,
@@ -687,12 +728,19 @@ export function TransferList({
     }
     const active = reorderSession?.value === option.value;
     const isReorderDisabled = option.isReorderDisabled === true;
-    const disabledReason = option.disabledMessage ?? `${option.label} cannot be reordered`;
+    const disabledReason = option.disabledMessage ?? t('@astryx.transferList.reorderDisabled', {
+      label: option.label
+    });
     return /*#__PURE__*/_jsx(IconButton, {
-      label: `Reorder ${option.label}`,
+      label: t('@astryx.transferList.reorderOption', {
+        label: option.label
+      }),
       "aria-describedby": reorderInstructionsId,
       "aria-pressed": active,
-      icon: /*#__PURE__*/_jsx(GripVerticalIcon, {}),
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: GripVerticalIcon,
+        size: "sm"
+      }),
       size: "sm",
       variant: "ghost",
       isDisabled: isReorderDisabled,
@@ -778,7 +826,9 @@ export function TransferList({
       children: /*#__PURE__*/_jsx(TextInput, {
         ref: searchRef,
         role: "searchbox",
-        label: searchLabel ?? `Search ${label}`,
+        label: searchLabel ?? t('@astryx.transferList.searchLabel', {
+          label
+        }),
         isLabelHidden: true,
         value: query,
         placeholder: searchPlaceholder,
@@ -794,7 +844,7 @@ export function TransferList({
       })
     }), /*#__PURE__*/_jsx(VisuallyHidden, {
       id: reorderInstructionsId,
-      children: "Press Space or Enter to pick up an item. Use Arrow Up, Arrow Down, Home, or End to move it. Press Space or Enter to drop, or Escape to cancel."
+      children: t('@astryx.transferList.reorderInstructions')
     }), /*#__PURE__*/_jsxs("div", {
       ...mergeProps(themeProps('transfer-list-collection'), {
         className: "xrvj5dj xcjjqqt x1sp3fdr xxhr3t xeuugli"
@@ -817,7 +867,7 @@ export function TransferList({
             color: "secondary",
             children: selectedLabel
           }), hasClear && /*#__PURE__*/_jsx(Button, {
-            label: "Clear",
+            label: t('@astryx.transferList.clear'),
             size: "sm",
             variant: "ghost",
             xstyle: styles.headerAction,
@@ -866,7 +916,7 @@ export function TransferList({
             color: "secondary",
             children: availableLabel
           }), hasSelectAll && /*#__PURE__*/_jsx(Button, {
-            label: "Add all",
+            label: t('@astryx.transferList.addAll'),
             size: "sm",
             variant: "ghost",
             xstyle: styles.headerAction,
@@ -894,7 +944,7 @@ export function TransferList({
                   type: "body",
                   weight: "bold",
                   color: "primary",
-                  children: group || 'Other'
+                  children: group || t('@astryx.transferList.ungroupedLabel')
                 })
               }), groupOptions.map(option => transferItem(option, 'available', availableOptions.indexOf(option)))]
             }, group || 'ungrouped'))

package/dist/TransferList/TransferListSelector.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file TransferListSelector.tsx
- * @input Controlled option data, uncontrolled ComplexSelector state, TransferList, and action controls
+ * @input Controlled option data, uncontrolled ComplexSelector state, TransferList, action controls, and the core i18n catalog
  * @output Exports the immediate-or-staged TransferListSelector composition with draft cleanup after dismissal
  * @position Lab collection input shell; consumed by the TransferList entry point, docs, and tests
  *
@@ -49,7 +49,7 @@ export type TransferListSelectorProps<T extends string = string> = Pick<ComplexS
  * />
  * ```
  */
-export declare function TransferListSelector<T extends string = string>({ label, description, options, value, onChange, changeAction, commitBehavior, triggerLabel, isDisabled, isLoading, width, applyLabel, cancelLabel, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, ...selectorProps }: TransferListSelectorProps<T>): ReactNode;
+export declare function TransferListSelector<T extends string = string>({ label, description, options, value, onChange, changeAction, commitBehavior, triggerLabel, isDisabled, isLoading, width, applyLabel: applyLabelFromProps, cancelLabel: cancelLabelFromProps, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, ...selectorProps }: TransferListSelectorProps<T>): ReactNode;
 export declare namespace TransferListSelector {
     var displayName: string;
 }

package/dist/TransferList/TransferListSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransferListSelector.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferListSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AA4CpE,KAAK,6BAA6B,GAC9B,OAAO,GACP,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,eAAe,GACf,cAAc,GACd,MAAM,GACN,OAAO,GACP,WAAW,GACX,QAAQ,GACR,WAAW,GACX,OAAO,GACP,aAAa,CAAC;AAElB,KAAK,uBAAuB,GACxB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,UAAU,GACV,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,CAAC;AAEpB,MAAM,MAAM,kCAAkC,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,EAClC,6BAA6B,CAC9B,GACC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IACpD,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAC;IACpD,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+BJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9D,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAA4B,EAC5B,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAoB,EACpB,WAAsB,EACtB,aAAa,EACb,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,CAoH1C;yBA/Ie,oBAAoB"}
+{"version":3,"file":"TransferListSelector.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferListSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAC;AAI5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAsDpE,KAAK,6BAA6B,GAC9B,OAAO,GACP,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,eAAe,GACf,cAAc,GACd,MAAM,GACN,OAAO,GACP,WAAW,GACX,QAAQ,GACR,WAAW,GACX,OAAO,GACP,aAAa,CAAC;AAElB,KAAK,uBAAuB,GACxB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,UAAU,GACV,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,CAAC;AAEpB,MAAM,MAAM,kCAAkC,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,EAClC,6BAA6B,CAC9B,GACC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IACpD,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAC;IACpD,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+BJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9D,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAA4B,EAC5B,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,oBAAoB,EACjC,aAAa,EACb,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,CAqI1C;yBAhKe,oBAAoB"}

package/dist/TransferList/TransferListSelector.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TransferListSelector.tsx
- * @input Controlled option data, uncontrolled ComplexSelector state, TransferList, and action controls
+ * @input Controlled option data, uncontrolled ComplexSelector state, TransferList, action controls, and the core i18n catalog
  * @output Exports the immediate-or-staged TransferListSelector composition with draft cleanup after dismissal
  * @position Lab collection input shell; consumed by the TransferList entry point, docs, and tests
  *
@@ -17,6 +17,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Button } from '@astryxdesign/core/Button';
 import { ComplexSelector } from '@astryxdesign/core/ComplexSelector';
+import { useTranslator } from '@astryxdesign/core/i18n';
 import { HStack } from '@astryxdesign/core/Stack';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { borderVars, colorVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -94,8 +95,8 @@ export function TransferListSelector({
   isDisabled,
   isLoading,
   width,
-  applyLabel = 'Apply',
-  cancelLabel = 'Cancel',
+  applyLabel: applyLabelFromProps,
+  cancelLabel: cancelLabelFromProps,
   selectedLabel,
   availableLabel,
   hasSearch,
@@ -110,6 +111,9 @@ export function TransferListSelector({
   noResultsText,
   ...selectorProps
 }) {
+  const t = useTranslator();
+  const applyLabel = applyLabelFromProps ?? t('@astryx.transferListSelector.apply');
+  const cancelLabel = cancelLabelFromProps ?? t('@astryx.transferListSelector.cancel');
   const [draftValue, setDraftValue] = useState(value);
   const previousAppliedValueRef = useRef([...value]);
   const previousCommitBehaviorRef = useRef(commitBehavior);
@@ -137,7 +141,9 @@ export function TransferListSelector({
     value: value,
     onChange: onChange,
     changeAction: changeAction,
-    triggerLabel: triggerLabel ?? `${value.length} selected`,
+    triggerLabel: triggerLabel ?? t('@astryx.transferListSelector.triggerLabel', {
+      count: value.length
+    }),
     isDisabled: isDisabled,
     isLoading: isLoading,
     width: resolvedWidth,
@@ -154,16 +160,27 @@ export function TransferListSelector({
           isOpen: state.isOpen,
           resetDraft: resetDraft
         }), /*#__PURE__*/_jsx("fieldset", {
-          disabled: isDisabled || state.isBusy,
+          disabled: isDisabled,
           ...{
-            className: "x1iyjqo2 xs83m0k xdl72j9 xeuugli x2lwn1j x1ghz6dp x1717udv xc342km xng3xce x1odjw0f xish69e"
-          },
+            0: {
+              className: "x1iyjqo2 xs83m0k xdl72j9 xeuugli x2lwn1j x1ghz6dp x1717udv xc342km xng3xce x1odjw0f xish69e"
+            },
+            1: {
+              className: "x1iyjqo2 xs83m0k xdl72j9 xeuugli x2lwn1j x1ghz6dp x1717udv xc342km xng3xce x1odjw0f xish69e x19v85br x16khyan"
+            }
+          }[!!state.isBusy << 0],
           children: /*#__PURE__*/_jsx(TransferList, {
             label: label,
             isLabelHidden: true,
             options: options,
             value: transferListValue,
             onChange: nextValue => {
+              // Now that busy no longer disables the fieldset, the controls
+              // stay live while a change is in flight; ignore transfers
+              // until it settles so one pending action cannot be stacked.
+              if (state.isBusy) {
+                return;
+              }
               if (isStaged) {
                 setDraftValue(nextValue);
               } else {

package/dist/lab.css

@@ -301,6 +301,7 @@
   .x1jm3nie:not(#\#):not(#\#):not(#\#){cursor:grab}
   .xi9pz9s:not(#\#):not(#\#):not(#\#){cursor:grabbing}
   .x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
+  .x19v85br:not(#\#):not(#\#):not(#\#){cursor:progress}
   .x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
   .xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
   .x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
@@ -534,6 +535,7 @@
   .xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
   .x1cy360x:not(#\#):not(#\#):not(#\#):not(#\#){min-height:3em}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
+  .x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
   .xu95rz8:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--transfer-list-panel-min-block-size)}
   .x82snj4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--x-minHeight)}
   .xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.5.0-canary.7b60efa",
+  "version": "0.5.0-canary.7bd80db",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -23,8 +23,8 @@
     "canaryOnly": true,
     "_comment": "Published ONLY to the @canary dist-tag (see .github/workflows/release.yml). Never published as a stable `latest` release. `private: true` is intentional and must stay — it is npm's hard guarantee against an accidental stable publish."
   },
+  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "files": [
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.5.0-canary.7b60efa",
+    "@astryxdesign/core": "0.5.0-canary.7bd80db",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -55,7 +55,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.0-canary.7b60efa",
+    "@astryxdesign/cli": "0.5.0-canary.7bd80db",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
@@ -63,9 +63,9 @@
   },
   "scripts": {
     "build": "rimraf dist && pnpm build:esm && tsc --project tsconfig.build.json && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",
-    "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.js",
+    "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.json",
     "build:css": "node ../../scripts/build-css.mjs --package lab",
-    "dev": "babel src --watch --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*\" --config-file ./babel.config.js",
+    "dev": "babel src --watch --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*\" --config-file ./babel.config.json",
     "test": "vitest run --root ../..",
     "test:watch": "vitest --root ../..",
     "lint": "eslint src",

package/src/TransferList/TransferList.test.tsx

@@ -187,8 +187,14 @@ describe('TransferList', () => {
       );
       const addButton = screen.getByRole('button', {name: 'Add Owner'});
       const removeButton = screen.getByRole('button', {name: 'Remove Name'});
-      expect(addButton.querySelector('svg')).toHaveClass('lucide-plus');
-      expect(removeButton.querySelector('svg')).toHaveClass('lucide-x');
+      // Glyphs render through the shared Icon primitive rather than a raw
+      // inline <svg>: the add glyph is an icon component (astryx-icon on the
+      // svg) and remove reuses the registry `close` glyph (astryx-icon on its
+      // wrapping span). Assert the icon primitive is present and a glyph drew.
+      expect(addButton.querySelector('.astryx-icon')).toBeInTheDocument();
+      expect(addButton.querySelector('svg')).toBeInTheDocument();
+      expect(removeButton.querySelector('.astryx-icon')).toBeInTheDocument();
+      expect(removeButton.querySelector('svg')).toBeInTheDocument();
 
       const selectedList = screen.getByRole('list', {
         name: 'Selected columns',
@@ -199,9 +205,7 @@ describe('TransferList', () => {
         'button',
       );
       expect(rowButtons[0]).toHaveAccessibleName('Reorder Name');
-      expect(rowButtons[0].querySelector('svg')).toHaveClass(
-        'lucide-grip-vertical',
-      );
+      expect(rowButtons[0].querySelector('.astryx-icon')).toBeInTheDocument();
       expect(rowButtons[1]).toHaveAccessibleName('Remove Name');
     });
 

package/src/TransferList/TransferList.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file TransferList.tsx
- * @input Controlled option data, React DOM portals, local action glyphs, and shared Lab reorder styles
+ * @input Controlled option data, React DOM portals, local action glyphs, shared Lab reorder styles, and the core i18n catalog
  * @output Exports TransferList with immediate transfers, vertical reordering, and responsive scroll ownership
  * @position Lab collection input; consumed by index.ts, TransferListSelector, docs, and tests
  *
@@ -26,6 +26,7 @@ import {
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  type SVGProps,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {flushSync} from 'react-dom';
@@ -40,9 +41,11 @@ import {Text} from '@astryxdesign/core/Text';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {useAnnounce} from '@astryxdesign/core/hooks';
+import {useTranslator} from '@astryxdesign/core/i18n';
 import {
   borderVars,
   colorVars,
+  sizeVars,
   spacingVars,
   typeScaleVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
@@ -55,57 +58,36 @@ import {
 import {reorderStyles} from '../reorderStyles';
 import {transferListVars} from './tokens.stylex';
 
-function PlusIcon() {
+// Lucide glyphs the shared icon registry does not carry (there is no `add` or
+// `grip` semantic name). Typed as icon components and rendered through `Icon`
+// so sizing, colour and a11y come from the icon pipeline rather than a raw
+// inline `<svg>`. Removal reuses the registry `close` glyph instead.
+function PlusIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      className="lucide lucide-plus"
-      width={16}
-      height={16}
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      aria-hidden>
+      {...props}>
       <path d="M5 12h14" />
       <path d="M12 5v14" />
     </svg>
   );
 }
 
-function RemoveIcon() {
+function GripVerticalIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      className="lucide lucide-x"
-      width={16}
-      height={16}
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      aria-hidden>
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
-
-function GripVerticalIcon() {
-  return (
-    <svg
-      className="lucide lucide-grip-vertical"
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden>
+      {...props}>
       <circle cx="9" cy="5" r="1" />
       <circle cx="9" cy="12" r="1" />
       <circle cx="9" cy="19" r="1" />
@@ -275,7 +257,13 @@ const styles = stylex.create({
     borderBlockEndColor: colorVars['--color-border'],
   },
   headerAction: {
+    // A text-link treatment, but the hit target still has to clear the WCAG
+    // 2.5.8 24px floor. The link keeps `height: auto` so its baseline aligns
+    // with the panel heading; `minBlockSize` gives the button a >=24px target
+    // (the sm element height) without changing where the text sits, and the
+    // width already exceeds 24px.
     height: 'auto',
+    minBlockSize: sizeVars['--size-element-sm'],
     paddingBlock: 0,
     paddingInline: 0,
     borderRadius: 0,
@@ -364,6 +352,9 @@ function moveItem<T>(
   return nextValue;
 }
 
+// Case folding is locale-independent here, matching Selector, MultiSelector,
+// and CommandPalette. Locale-sensitive folding would mean raw Intl access,
+// which the shipped packages route through the provider instead.
 function matchesQuery<T extends string>(
   option: TransferListOption<T>,
   query: string,
@@ -374,14 +365,10 @@ function matchesQuery<T extends string>(
   const description =
     typeof option.description === 'string' ? option.description : '';
   return [option.label, description, option.group ?? ''].some(part =>
-    part.toLocaleLowerCase().includes(query),
+    part.toLowerCase().includes(query),
   );
 }
 
-function itemCount(count: number): string {
-  return `${count} ${count === 1 ? 'item' : 'items'}`;
-}
-
 /**
  * A controlled dual-panel collection input for choosing and ordering values.
  * Selection, ordering, drafts, persistence, and saved views stay explicit in
@@ -405,18 +392,18 @@ export function TransferList<T extends string = string>({
   options,
   value,
   onChange,
-  selectedLabel = 'Selected',
-  availableLabel = 'Available',
+  selectedLabel: selectedLabelFromProps,
+  availableLabel: availableLabelFromProps,
   hasSearch = false,
   searchLabel,
-  searchPlaceholder = 'Search…',
+  searchPlaceholder: searchPlaceholderFromProps,
   isReorderable = true,
   hasSelectAll = false,
   hasClear = false,
   renderOption,
-  selectedEmptyText = 'No selected options',
-  availableEmptyText = 'No available options',
-  noResultsText = 'No results',
+  selectedEmptyText: selectedEmptyTextFromProps,
+  availableEmptyText: availableEmptyTextFromProps,
+  noResultsText: noResultsTextFromProps,
   xstyle,
   className,
   style,
@@ -426,6 +413,19 @@ export function TransferList<T extends string = string>({
   'aria-describedby': ariaDescribedBy,
   ...restProps
 }: TransferListProps<T>): ReactNode {
+  const t = useTranslator();
+  const selectedLabel =
+    selectedLabelFromProps ?? t('@astryx.transferList.selectedLabel');
+  const availableLabel =
+    availableLabelFromProps ?? t('@astryx.transferList.availableLabel');
+  const searchPlaceholder =
+    searchPlaceholderFromProps ?? t('@astryx.transferList.searchPlaceholder');
+  const selectedEmptyText =
+    selectedEmptyTextFromProps ?? t('@astryx.transferList.selectedEmpty');
+  const availableEmptyText =
+    availableEmptyTextFromProps ?? t('@astryx.transferList.availableEmpty');
+  const noResultsText =
+    noResultsTextFromProps ?? t('@astryx.transferList.noResults');
   const labelId = useId();
   const descriptionId = useId();
   const selectedHeadingId = useId();
@@ -466,7 +466,7 @@ export function TransferList<T extends string = string>({
     return map;
   }, [options]);
   const selectedValues = useMemo(() => new Set(value), [value]);
-  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const normalizedQuery = query.trim().toLowerCase();
   const selectedOptions = useMemo(
     () =>
       value
@@ -603,11 +603,14 @@ export function TransferList<T extends string = string>({
       const nextValue = [...currentValueRef.current, option.value];
       commit(nextValue);
       announce(
-        `${option.label} added. ${itemCount(nextValue.length)} selected.`,
+        t('@astryx.transferList.announceAdded', {
+          label: option.label,
+          count: nextValue.length,
+        }),
       );
       focusAfterTransfer('available', index);
     },
-    [announce, commit, focusAfterTransfer],
+    [announce, commit, focusAfterTransfer, t],
   );
 
   const removeOption = useCallback(
@@ -620,11 +623,14 @@ export function TransferList<T extends string = string>({
       );
       commit(nextValue);
       announce(
-        `${option.label} removed. ${itemCount(nextValue.length)} selected.`,
+        t('@astryx.transferList.announceRemoved', {
+          label: option.label,
+          count: nextValue.length,
+        }),
       );
       focusAfterTransfer('selected', index);
     },
-    [announce, commit, focusAfterTransfer],
+    [announce, commit, focusAfterTransfer, t],
   );
 
   const addAll = useCallback(() => {
@@ -637,9 +643,13 @@ export function TransferList<T extends string = string>({
       .map(option => option.value);
     if (additions.length > 0) {
       commit([...currentValueRef.current, ...additions]);
-      announce(`${itemCount(additions.length)} added.`);
+      announce(
+        t('@astryx.transferList.announceBulkAdded', {
+          count: additions.length,
+        }),
+      );
     }
-  }, [announce, commit, options]);
+  }, [announce, commit, options, t]);
 
   const clearSelected = useCallback(() => {
     const nextValue = currentValueRef.current.filter(optionValue => {
@@ -649,9 +659,9 @@ export function TransferList<T extends string = string>({
     const removed = currentValueRef.current.length - nextValue.length;
     if (removed > 0) {
       commit(nextValue);
-      announce(`${itemCount(removed)} removed.`);
+      announce(t('@astryx.transferList.announceBulkRemoved', {count: removed}));
     }
-  }, [announce, commit, optionByValue]);
+  }, [announce, commit, optionByValue, t]);
 
   const movableRange = useCallback(
     (optionValue: T, orderedValue: readonly T[]) => {
@@ -721,11 +731,15 @@ export function TransferList<T extends string = string>({
       });
       if (mode === 'keyboard') {
         announce(
-          `${option.label} picked up, position ${index + 1} of ${currentValueRef.current.length}. Use arrow keys to move, Space or Enter to drop, or Escape to cancel.`,
+          t('@astryx.transferList.announceGrabbed', {
+            label: option.label,
+            position: index + 1,
+            total: currentValueRef.current.length,
+          }),
         );
       }
     },
-    [announce, isReorderable, setReorderSession],
+    [announce, isReorderable, setReorderSession, t],
   );
 
   const finishReorder = useCallback(
@@ -738,7 +752,11 @@ export function TransferList<T extends string = string>({
         if (cancelled || !session.hasPointerMoved) {
           setReorderSession(null);
           if (cancelled) {
-            announce(`${session.label} move cancelled.`);
+            announce(
+              t('@astryx.transferList.announceMoveCancelled', {
+                label: session.label,
+              }),
+            );
           }
           return;
         }
@@ -752,27 +770,42 @@ export function TransferList<T extends string = string>({
         if (hasChanged) {
           commit(nextValue);
           announce(
-            `${session.label} dropped at position ${session.toIndex + 1} of ${session.originalValue.length}.`,
+            t('@astryx.transferList.announceDropped', {
+              label: session.label,
+              position: session.toIndex + 1,
+              total: session.originalValue.length,
+            }),
           );
         } else {
           announce(
-            `${session.label} returned to position ${session.fromIndex + 1}.`,
+            t('@astryx.transferList.announceReturned', {
+              label: session.label,
+              position: session.fromIndex + 1,
+            }),
           );
         }
         return;
       }
       if (cancelled) {
         commit(session.originalValue);
-        announce(`${session.label} move cancelled.`);
+        announce(
+          t('@astryx.transferList.announceMoveCancelled', {
+            label: session.label,
+          }),
+        );
       } else {
         const index = currentValueRef.current.indexOf(session.value);
         announce(
-          `${session.label} dropped at position ${index + 1} of ${currentValueRef.current.length}.`,
+          t('@astryx.transferList.announceDropped', {
+            label: session.label,
+            position: index + 1,
+            total: currentValueRef.current.length,
+          }),
         );
       }
       setReorderSession(null);
     },
-    [announce, commit, setReorderSession],
+    [announce, commit, setReorderSession, t],
   );
 
   const handleReorderClick = useCallback(
@@ -827,11 +860,15 @@ export function TransferList<T extends string = string>({
       if (moveOption(option.value, target)) {
         const nextIndex = currentValueRef.current.indexOf(option.value);
         announce(
-          `${option.label}, position ${nextIndex + 1} of ${currentValueRef.current.length}.`,
+          t('@astryx.transferList.announceMovedToPosition', {
+            label: option.label,
+            position: nextIndex + 1,
+            total: currentValueRef.current.length,
+          }),
         );
       }
     },
-    [announce, finishReorder, movableRange, moveOption],
+    [announce, finishReorder, movableRange, moveOption, t],
   );
 
   const handlePointerDown = useCallback(
@@ -922,11 +959,15 @@ export function TransferList<T extends string = string>({
       setReorderSession(nextSession);
       if (hasCrossedThreshold && session.toIndex !== targetIndex) {
         announce(
-          `${option.label}, position ${targetIndex + 1} of ${session.originalValue.length}.`,
+          t('@astryx.transferList.announceMovedToPosition', {
+            label: option.label,
+            position: targetIndex + 1,
+            total: session.originalValue.length,
+          }),
         );
       }
     },
-    [announce, movableRange, setReorderSession],
+    [announce, movableRange, setReorderSession, t],
   );
 
   const handlePointerEnd = useCallback(
@@ -956,17 +997,17 @@ export function TransferList<T extends string = string>({
   const handleSearch = useCallback(
     (nextQuery: string) => {
       setQuery(nextQuery);
-      const normalized = nextQuery.trim().toLocaleLowerCase();
+      const normalized = nextQuery.trim().toLowerCase();
       if (normalized === '') {
         announce('');
       } else {
         const count = options.filter(option =>
           matchesQuery(option, normalized),
         ).length;
-        announce(`${itemCount(count)} found.`);
+        announce(t('@astryx.transferList.announceSearchResults', {count}));
       }
     },
-    [announce, options],
+    [announce, options, t],
   );
 
   const optionActions = (
@@ -976,12 +1017,13 @@ export function TransferList<T extends string = string>({
   ) => {
     const isTransferDisabled = option.isTransferDisabled === true;
     const disabledReason =
-      option.disabledMessage ?? `${option.label} cannot be moved`;
+      option.disabledMessage ??
+      t('@astryx.transferList.transferDisabled', {label: option.label});
     if (side === 'available') {
       return (
         <IconButton
-          label={`Add ${option.label}`}
-          icon={<PlusIcon />}
+          label={t('@astryx.transferList.addOption', {label: option.label})}
+          icon={<Icon icon={PlusIcon} size="sm" />}
           size="sm"
           variant="ghost"
           isDisabled={isTransferDisabled}
@@ -993,8 +1035,8 @@ export function TransferList<T extends string = string>({
     }
     return (
       <IconButton
-        label={`Remove ${option.label}`}
-        icon={<RemoveIcon />}
+        label={t('@astryx.transferList.removeOption', {label: option.label})}
+        icon={<Icon icon="close" size="sm" />}
         size="sm"
         variant="ghost"
         isDisabled={isTransferDisabled}
@@ -1034,13 +1076,14 @@ export function TransferList<T extends string = string>({
     const active = reorderSession?.value === option.value;
     const isReorderDisabled = option.isReorderDisabled === true;
     const disabledReason =
-      option.disabledMessage ?? `${option.label} cannot be reordered`;
+      option.disabledMessage ??
+      t('@astryx.transferList.reorderDisabled', {label: option.label});
     return (
       <IconButton
-        label={`Reorder ${option.label}`}
+        label={t('@astryx.transferList.reorderOption', {label: option.label})}
         aria-describedby={reorderInstructionsId}
         aria-pressed={active}
-        icon={<GripVerticalIcon />}
+        icon={<Icon icon={GripVerticalIcon} size="sm" />}
         size="sm"
         variant="ghost"
         isDisabled={isReorderDisabled}
@@ -1164,7 +1207,9 @@ export function TransferList<T extends string = string>({
           <TextInput
             ref={searchRef}
             role="searchbox"
-            label={searchLabel ?? `Search ${label}`}
+            label={
+              searchLabel ?? t('@astryx.transferList.searchLabel', {label})
+            }
             isLabelHidden
             value={query}
             placeholder={searchPlaceholder}
@@ -1178,8 +1223,7 @@ export function TransferList<T extends string = string>({
       )}
 
       <VisuallyHidden id={reorderInstructionsId}>
-        Press Space or Enter to pick up an item. Use Arrow Up, Arrow Down, Home,
-        or End to move it. Press Space or Enter to drop, or Escape to cancel.
+        {t('@astryx.transferList.reorderInstructions')}
       </VisuallyHidden>
 
       <div
@@ -1202,7 +1246,7 @@ export function TransferList<T extends string = string>({
             </Text>
             {hasClear && (
               <Button
-                label="Clear"
+                label={t('@astryx.transferList.clear')}
                 size="sm"
                 variant="ghost"
                 xstyle={styles.headerAction}
@@ -1259,7 +1303,7 @@ export function TransferList<T extends string = string>({
             </Text>
             {hasSelectAll && (
               <Button
-                label="Add all"
+                label={t('@astryx.transferList.addAll')}
                 size="sm"
                 variant="ghost"
                 xstyle={styles.headerAction}
@@ -1289,7 +1333,7 @@ export function TransferList<T extends string = string>({
                         role="presentation"
                         {...stylex.props(styles.groupHeading)}>
                         <Text type="body" weight="bold" color="primary">
-                          {group || 'Other'}
+                          {group || t('@astryx.transferList.ungroupedLabel')}
                         </Text>
                       </li>
                     )}

package/src/TransferList/TransferListSelector.test.tsx

@@ -420,7 +420,7 @@ describe('TransferListSelector', () => {
     ).toHaveTextContent('3 selected');
   });
 
-  it('disables list controls and Apply while keeping Cancel operable', async () => {
+  it('disables list controls when disabled, but never when merely busy', async () => {
     const view = render(
       <TransferListSelector
         label="Visible fields"
@@ -477,7 +477,10 @@ describe('TransferListSelector', () => {
     await waitFor(() => {
       expect(dialog.querySelector('[aria-busy="true"]')).not.toBeNull();
     });
-    expect(dialog.querySelector('fieldset')).toBeDisabled();
+    // A pending change is announced with aria-busy, never by disabling the
+    // fieldset: `disabled` here would blur the row button the user just
+    // activated and drop focus to <body>.
+    expect(dialog.querySelector('fieldset')).toBeEnabled();
     expect(
       within(dialog).getByRole('button', {name: 'Cancel', hidden: true}),
     ).toBeEnabled();
@@ -486,6 +489,46 @@ describe('TransferListSelector', () => {
     ).toBeDisabled();
   });
 
+  it('keeps focus on the activated row control while a change is pending', async () => {
+    const user = userEvent.setup();
+    const view = render(
+      <TransferListSelector
+        label="Visible fields"
+        options={OPTIONS}
+        value={['name']}
+        onChange={() => {}}
+      />,
+    );
+    await openSelector();
+    const dialog = screen.getByRole('dialog', {
+      name: 'Visible fields',
+      ...hidden,
+    });
+
+    const addStatus = within(dialog).getByRole('button', {
+      name: 'Add Status',
+      hidden: true,
+    });
+    await user.click(addStatus);
+    expect(addStatus).toHaveFocus();
+
+    view.rerender(
+      <TransferListSelector
+        label="Visible fields"
+        options={OPTIONS}
+        value={['name']}
+        onChange={() => {}}
+        isLoading
+      />,
+    );
+
+    await waitFor(() => {
+      expect(dialog.querySelector('[aria-busy="true"]')).not.toBeNull();
+    });
+    expect(addStatus).toHaveFocus();
+    expect(document.body).not.toHaveFocus();
+  });
+
   it('forwards intentional selector shell and transfer-list content props', async () => {
     render(
       <TransferListSelector

package/src/TransferList/TransferListSelector.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file TransferListSelector.tsx
- * @input Controlled option data, uncontrolled ComplexSelector state, TransferList, and action controls
+ * @input Controlled option data, uncontrolled ComplexSelector state, TransferList, action controls, and the core i18n catalog
  * @output Exports the immediate-or-staged TransferListSelector composition with draft cleanup after dismissal
  * @position Lab collection input shell; consumed by the TransferList entry point, docs, and tests
  *
@@ -21,6 +21,7 @@ import {
   ComplexSelector,
   type ComplexSelectorProps,
 } from '@astryxdesign/core/ComplexSelector';
+import {useTranslator} from '@astryxdesign/core/i18n';
 import {HStack} from '@astryxdesign/core/Stack';
 import {borderVars, colorVars} from '@astryxdesign/core/theme/tokens.stylex';
 import {TransferList, type TransferListProps} from './TransferList';
@@ -58,6 +59,16 @@ const styles = stylex.create({
     overflowY: 'auto',
     overscrollBehavior: 'contain',
   },
+  // Busy is not disabled: `disabled` on this fieldset would blur the Add or
+  // Remove button the user just activated, dropping focus to <body>. The
+  // pending state is carried by aria-busy plus the trigger's spinner, so this
+  // only has to read as unavailable to the pointer.
+  fieldsetBusy: {
+    cursor: {
+      default: 'progress',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
   footer: {
     flexShrink: 0,
     borderBlockStartWidth: borderVars['--border-width'],
@@ -184,8 +195,8 @@ export function TransferListSelector<T extends string = string>({
   isDisabled,
   isLoading,
   width,
-  applyLabel = 'Apply',
-  cancelLabel = 'Cancel',
+  applyLabel: applyLabelFromProps,
+  cancelLabel: cancelLabelFromProps,
   selectedLabel,
   availableLabel,
   hasSearch,
@@ -200,6 +211,11 @@ export function TransferListSelector<T extends string = string>({
   noResultsText,
   ...selectorProps
 }: TransferListSelectorProps<T>): ReactNode {
+  const t = useTranslator();
+  const applyLabel =
+    applyLabelFromProps ?? t('@astryx.transferListSelector.apply');
+  const cancelLabel =
+    cancelLabelFromProps ?? t('@astryx.transferListSelector.cancel');
   const [draftValue, setDraftValue] = useState<readonly T[]>(value);
   const previousAppliedValueRef = useRef<readonly T[]>([...value]);
   const previousCommitBehaviorRef = useRef(commitBehavior);
@@ -236,7 +252,10 @@ export function TransferListSelector<T extends string = string>({
       value={value}
       onChange={onChange}
       changeAction={changeAction}
-      triggerLabel={triggerLabel ?? `${value.length} selected`}
+      triggerLabel={
+        triggerLabel ??
+        t('@astryx.transferListSelector.triggerLabel', {count: value.length})
+      }
       isDisabled={isDisabled}
       isLoading={isLoading}
       width={resolvedWidth}
@@ -256,14 +275,23 @@ export function TransferListSelector<T extends string = string>({
               />
             )}
             <fieldset
-              disabled={isDisabled || state.isBusy}
-              {...stylex.props(styles.fieldset)}>
+              disabled={isDisabled}
+              {...stylex.props(
+                styles.fieldset,
+                state.isBusy && styles.fieldsetBusy,
+              )}>
               <TransferList
                 label={label}
                 isLabelHidden
                 options={options}
                 value={transferListValue}
                 onChange={nextValue => {
+                  // Now that busy no longer disables the fieldset, the controls
+                  // stay live while a change is in flight; ignore transfers
+                  // until it settles so one pending action cannot be stacked.
+                  if (state.isBusy) {
+                    return;
+                  }
                   if (isStaged) {
                     setDraftValue(nextValue);
                   } else {