@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/dist/DropdownMenu/DropdownMenu.js

@@ -35,6 +35,7 @@
  * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
  */
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { readAccessibleName } from "../utils/accessibleName.js";
 import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
 import { Button } from "../Button/index.js";
@@ -69,12 +70,14 @@ import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../t
 import { isRenderable, mergeProps, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
-import { useTranslator } from "../i18n/index.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DropdownMenu/DropdownMenu.generated.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 // The menu's own lower cap on the placement axis; the viewport cap underneath
 // it is the layer runtime's (spec:AST-059 FR3).
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MENU_BLOCK_CAP = '300px';
 const MENU_MAX_BLOCK_SIZE = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSize})`;
 const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`;
@@ -216,7 +219,7 @@ const bottomSheetStyles = {
 // =============================================================================
 
 /**
- * The props a custom `trigger` spreads onto the control that opens the menu.
+ * The props `renderTrigger` spreads onto the control that opens the menu.
  * They carry the press model — a mouse opens on press-down, a held finger
  * opens with the finger down — the keyboard opens (Enter, Space, ArrowDown,
  * ArrowUp), the toggle click, and the ARIA wiring that names the menu after
@@ -276,64 +279,6 @@ function holdInvokerThroughPress(control, popoverId) {
   doc.addEventListener('pointerup', onPressEnd, true);
   doc.addEventListener('pointercancel', onPressEnd, true);
 }
-
-/** Text an assistive technology reads from `element`, `aria-hidden` left out. */
-function visibleText(element) {
-  const copy = element.cloneNode(true);
-  for (const hidden of copy.querySelectorAll('[aria-hidden="true"]')) {
-    hidden.remove();
-  }
-  // An icon-only control is named by its image's alt, an inner aria-label, or
-  // an svg title rather than by text, so those count as its contents too.
-  for (const named of copy.querySelectorAll('img[alt], [aria-label]')) {
-    const name = named.getAttribute(named.tagName === 'IMG' ? 'alt' : 'aria-label') ?? '';
-    named.replaceWith(copy.ownerDocument.createTextNode(` ${name} `));
-  }
-  for (const svg of copy.querySelectorAll('svg')) {
-    const title = svg.querySelector('title')?.textContent ?? '';
-    svg.replaceWith(copy.ownerDocument.createTextNode(` ${title} `));
-  }
-  return (copy.textContent ?? '').replace(/\s+/g, ' ').trim();
-}
-
-/**
- * The name a custom trigger gives the menu it labels (`aria-labelledby` on
- * the menu points at it): its own `aria-labelledby` targets, its
- * `aria-label`, its text, or its `title`, in that order.
- */
-function readAccessibleName(element) {
-  if (element == null) {
-    return undefined;
-  }
-  const labelledBy = element.getAttribute('aria-labelledby');
-  if (labelledBy != null && labelledBy.trim() !== '') {
-    const text = labelledBy.split(/\s+/).map(id => element.ownerDocument.getElementById(id)).filter(node => node != null).map(visibleText).join(' ').trim();
-    if (text !== '') {
-      return text;
-    }
-  }
-  const label = element.getAttribute('aria-label')?.trim();
-  if (label) {
-    return label;
-  }
-  // A form control is named by its own <label>s; an input button by its value.
-  const labels = 'labels' in element ? Array.from(element.labels ?? []) : [];
-  const labelText = labels.map(visibleText).join(' ').trim();
-  if (labelText !== '') {
-    return labelText;
-  }
-  if (element instanceof HTMLInputElement && ['button', 'submit', 'reset'].includes(element.getAttribute('type') ?? '')) {
-    const value = element.value.trim();
-    if (value !== '') {
-      return value;
-    }
-  }
-  const text = visibleText(element);
-  if (text !== '') {
-    return text;
-  }
-  return element.getAttribute('title')?.trim() || undefined;
-}
 function DropdownMenuBottomSheet({
   button: buttonFromProps,
   renderTrigger,
@@ -355,14 +300,17 @@ function DropdownMenuBottomSheet({
   'data-testid': testId,
   ...rest
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const button = buttonFromProps ?? {
     label: t(DEFAULT_BUTTON_I18N_KEY)
   };
   const backLabel = t('@astryx.dropdownMenu.back');
   const buttonRef = useRef(null);
+  // The trigger, where focus returns after the sheet closes, carries the
+  // modality tracking for its document.
+  const modality = useInteractionModalityTracking();
   // The caller's `button.ref` rides along with the sheet's own trigger ref.
-  const triggerRef = useMergedRefs(buttonRef, button.ref);
+  const triggerRef = useMergedRefs(buttonRef, modality.ref, button.ref);
   const triggerId = useId();
   const sheetId = useId();
   const actionListRef = useRef(null);
@@ -372,7 +320,7 @@ function DropdownMenuBottomSheet({
     onFocusReturnTargetFocus,
     prepareFocusReturn,
     resetFocusReturn
-  } = useFocusReturnVisibility();
+  } = useFocusReturnVisibility(modality);
   const viewHeadingRef = useRef(null);
   const previousSubmenuDepthRef = useRef(0);
   const [internalIsOpen, setInternalIsOpen] = useState(false);
@@ -510,9 +458,11 @@ function DropdownMenuBottomSheet({
     children: currentTitle
   });
   // A stable ref: an inline one re-runs on every render (null, then the element).
+  const sheetModalityRef = modality.ref;
   const sheetTriggerRef = useCallback(el => {
     buttonRef.current = el;
-  }, []);
+    sheetModalityRef(el);
+  }, [sheetModalityRef]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [renderTrigger != null ? renderTrigger({
       ref: sheetTriggerRef,
@@ -615,7 +565,7 @@ function DropdownMenuPopover({
   'data-testid': testId,
   ...props
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const button = buttonFromProps ?? {
     label: t(DEFAULT_BUTTON_I18N_KEY)
   };
@@ -645,14 +595,14 @@ function DropdownMenuPopover({
   const notifyClickOnShowRef = useRef(false);
   const pendingControlledOpenRef = useRef(false);
   const suppressControlledRollbackHideRef = useRef(false);
-  useInteractionModalityTracking();
+  const contentRef = useRef(null);
+  const modality = useInteractionModalityTracking();
   const {
     isFocusRingSuppressed,
     onFocusReturnTargetFocus,
     prepareFocusReturn,
     resetFocusReturn
-  } = useFocusReturnVisibility();
-  const contentRef = useRef(null);
+  } = useFocusReturnVisibility(modality);
   const headerRef = useRef(null);
   const footerRef = useRef(null);
   const hasRegions = useMemo(() => isRenderable(header) || isRenderable(footer), [header, footer]);
@@ -1186,10 +1136,16 @@ function DropdownMenuPopover({
   // popover's anchor off the trigger and back: two inline-style writes on the
   // trigger per render of the menu.
   const popoverTriggerRef = popover.triggerRef;
+  // The trigger, where focus returns, also carries the modality tracking for
+  // its document.
+  const modalityRef = modality.ref;
   const triggerRef = useCallback(el => {
     buttonRef.current = el;
     popoverTriggerRef(el);
-  }, [popoverTriggerRef]);
+    // Called with each node and with `null`, so its cleanup isn't returned
+    // (a returned cleanup would stop React's `null` call to the others).
+    modalityRef(el);
+  }, [popoverTriggerRef, modalityRef]);
   const consumerButtonRef = button.ref;
   const buttonTriggerRef = useCallback(el => {
     triggerRef(el);
@@ -1271,11 +1227,13 @@ function DropdownMenuPopover({
       onFocus: event => {
         rest.onFocus?.(event);
         if (event.target === event.currentTarget) {
-          setIsMenuKeyboardFocused(getInteractionModality() === 'keyboard');
+          setIsMenuKeyboardFocused(getInteractionModality(event.currentTarget) === 'keyboard');
         }
       },
       ...menuPress.menuProps,
-      ...mergeProps(themeProps('dropdown-menu'), stylex.props(styles.dropdown, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight), hasOverflow ? menuTouchActionStyles.scrolls : menuTouchActionStyles.fits, hasOverflow && styles.scrollable, hasRegions && styles.menuInFrame,
+      ...mergeProps(themeProps('dropdown-menu', {
+        presentation: 'popover'
+      }), stylex.props(styles.dropdown, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight), hasOverflow ? menuTouchActionStyles.scrolls : menuTouchActionStyles.fits, hasOverflow && styles.scrollable, hasRegions && styles.menuInFrame,
       // Between a header and a footer the menu is a Tab stop, so
       // keyboard focus on it must be visible (the base style removes
       // the ring for the pointer-open focus target).
@@ -1306,7 +1264,7 @@ export function DropdownMenu(props) {
     onOpenChange
   } = props;
   // Both presentations hang the menu off ONE control.
-  useDevWarning('DropdownMenu', '`button` and `trigger` are mutually exclusive: the menu hangs off one ' + 'control. `trigger` wins; drop `button`.', props.button != null && props.renderTrigger != null);
+  useDevWarning('DropdownMenu', '`button` and `renderTrigger` are mutually exclusive: the menu hangs ' + 'off one control. `renderTrigger` wins; drop `button`.', props.button != null && props.renderTrigger != null);
   const requestedPresentation = 'items' in props ? props.presentation ?? 'popover' : 'popover';
   const resolvedPresentation = useAdaptivePresentation(requestedPresentation);
   const isControlled = props.isMenuOpen !== undefined;

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -47,8 +47,9 @@ export interface DropdownMenuCheckboxItemProps extends Omit<BaseProps, 'onChange
      */
     onChange?: (checked: boolean) => void;
     /**
-     * Whether the item is disabled. Disabled items expose `aria-disabled`, block
-     * activation, and are currently skipped by DropdownMenu arrow-key navigation.
+     * Whether the item is disabled. A disabled item stays in the accessibility
+     * tree as disabled (`aria-disabled`) but takes no focus: the arrow keys,
+     * typeahead, and the pointer highlight skip it, and activation is blocked.
      * @default false
      */
     isDisabled?: boolean;

package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4C5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,6BAA6B,+BA+D/B;yBA9Ee,wBAAwB"}
+{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+C5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,6BAA6B,+BAoE/B;yBAnFe,wBAAwB"}

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -31,9 +31,10 @@ import { renderIconSlot } from "../Icon/index.js";
 import { useIndicator } from "../Indicator/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { colorVars, focusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -43,7 +44,7 @@ const styles = {
     kMwMTN: "x1tgivj0",
     kWkggS: "xjbqb8w x1c52tdz",
     kkrTdU: "x1ypdohk x16khyan",
-    kI3sdo: "x1a2a7pz",
+    kInvED: "x1c097ug",
     $$css: true
   },
   disabled: {
@@ -143,7 +144,7 @@ export function DropdownMenuCheckboxItem({
     endContent: endContent,
     onClick: handleClick,
     isDisabled: isDisabled,
-    xstyle: [styles.root, isDisabled && styles.disabled, xstyle],
+    xstyle: [focusOutlineStyles.focusVisible, styles.root, isDisabled && styles.disabled, xstyle],
     ...mergeProps(themeProps('dropdown-menu-item', {
       size: menuSize
     }), {

package/dist/DropdownMenu/DropdownMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgE5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAmHvB;yBAtIe,gBAAgB"}
+{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoE5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAoHvB;yBAvIe,gBAAgB"}

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -33,9 +33,10 @@ import { renderIconSlot } from "../Icon/index.js";
 import { Item } from "../Item/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, typographyVars, typeScaleVars, focusVars } from "../theme/tokens.stylex.js";
 import { composeEventHandlers, mergeProps } from "../utils/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import { isModifiedClick } from "./menuItemRoles.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -56,7 +57,7 @@ const menuItemStyles = {
     ksu8eU: "xng3xce",
     kkrTdU: "x1ypdohk x16khyan",
     k9WMMc: "x1yc453h",
-    kI3sdo: "x1a2a7pz",
+    kInvED: "x1c097ug",
     $$css: true
   },
   disabled: {
@@ -198,7 +199,7 @@ export function DropdownMenuItem({
     ,
     draggable: href != null ? false : undefined,
     isDisabled: isDisabled,
-    xstyle: [menuItemStyles.root, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
+    xstyle: [focusOutlineStyles.focusVisible, menuItemStyles.root, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
     ...mergeProps(themeProps('dropdown-menu-item', {
       size: menuSize,
       variant: isDestructive ? 'destructive' : null

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -40,9 +40,10 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
      */
     icon?: ReactNode | IconType;
     /**
-     * Whether this individual radio item is disabled. Disabled items expose
-     * `aria-disabled`, block selection, and are currently skipped by
-     * DropdownMenu arrow-key navigation.
+     * Whether this individual radio item is disabled. A disabled item stays in
+     * the accessibility tree as disabled (`aria-disabled`) but takes no focus:
+     * the arrow keys, typeahead, and the pointer highlight skip it, and
+     * selection is blocked.
      * @default false
      */
     isDisabled?: boolean;

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4C5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAuE5B;yBApFe,qBAAqB"}
+{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAQtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+C5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,+BA4E5B;yBAzFe,qBAAqB"}

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -27,9 +27,10 @@ import { renderIconSlot } from "../Icon/index.js";
 import { useIndicator } from "../Indicator/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { colorVars, focusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
 import { useDropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,7 +41,7 @@ const styles = {
     kMwMTN: "x1tgivj0",
     kWkggS: "xjbqb8w x1c52tdz",
     kkrTdU: "x1ypdohk x16khyan",
-    kI3sdo: "x1a2a7pz",
+    kInvED: "x1c097ug",
     $$css: true
   },
   disabled: {
@@ -138,7 +139,7 @@ export function DropdownMenuRadioItem({
     endContent: endContent,
     onClick: handleClick,
     isDisabled: isDisabled,
-    xstyle: [styles.root, isDisabled && styles.disabled, xstyle],
+    xstyle: [focusOutlineStyles.focusVisible, styles.root, isDisabled && styles.disabled, xstyle],
     ...mergeProps(themeProps('dropdown-menu-item', {
       size: menuSize
     }), {

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAg5BX;yBAl5Be,mBAAmB"}
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0C5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsO5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAm5BX;yBAr5Be,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -67,7 +67,7 @@ import { resolveMenuWidth } from "./menuWidth.js";
 import "../Layer/layerViewportInset.stylex.js";
 import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars, typographyVars, typeScaleVars, focusVars } from "../theme/tokens.stylex.js";
 import { composeEventHandlers, isImeKeyEvent, isRenderable, mergeProps, rtlStyles } from "../utils/index.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { getInteractionModality } from "../utils/interactionModality.js";
@@ -78,11 +78,13 @@ import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMe
 import { DropdownMenuContext, DropdownMenuRootOpenContext, DropdownMenuSurfaceContext, useDropdownMenuContext, useDropdownMenuRootOpen } from "./DropdownMenuContext.js";
 import { focusMenuItemOnHover } from "./menuItemHover.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
-import { useTranslator } from "../i18n/index.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/DropdownMenu/DropdownMenuSubMenu.generated.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 // The flyout's own lower cap on the placement axis; the viewport cap under
 // it and the inline gutter beside it are the layer runtime's (spec:AST-059).
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MENU_BLOCK_CAP = '300px';
 const MENU_MAX_BLOCK_SIZE = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSize})`;
 const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`;
@@ -101,7 +103,7 @@ const triggerStyles = {
     ksu8eU: "xng3xce",
     kkrTdU: "x1ypdohk x16khyan",
     k9WMMc: "x1yc453h",
-    kI3sdo: "x1a2a7pz",
+    kInvED: "x1c097ug",
     $$css: true
   },
   open: {
@@ -307,7 +309,7 @@ export function DropdownMenuSubMenu(props) {
     // Host attributes and DOM handlers for the trigger row.
     ...rest
   } = props;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const menuCtx = useDropdownMenuContext();
   const rootSurface = use(DropdownMenuSurfaceContext);
   const rootHasRegions = use(MenuRegionsContext);
@@ -847,7 +849,9 @@ export function DropdownMenuSubMenu(props) {
     ...(surface === 'flyout' ?
     // The flyout's frame paints its surface, so the menu target rides
     // on it; a drilled-in view sits inside the root's surface.
-    mergeProps(themeProps('dropdown-menu'), {
+    mergeProps(themeProps('dropdown-menu', {
+      presentation: 'popover'
+    }), {
       className: "x9f619 x78zum5 xdt5ytf x1uh1i8a x1fcsqxe xgory14 x1n97fys xc0b1yq x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92"
     }) : stylex.props(regionStyles.frame, rootSurface?.menuMaxHeight != null && dynamicRegionStyles.viewMaxHeight(rootSurface.menuMaxHeight), frameProps.hidden === true && regionStyles.hidden)),
     children: [isRenderable(header) && /*#__PURE__*/_jsx("div", {
@@ -874,7 +878,7 @@ export function DropdownMenuSubMenu(props) {
   // on the menu element shows the ring the base style otherwise removes.
   const handleMenuFocus = event => {
     if (hasRegions && event.target === event.currentTarget) {
-      setIsMenuKeyboardFocused(getInteractionModality() === 'keyboard');
+      setIsMenuKeyboardFocused(getInteractionModality(event.currentTarget) === 'keyboard');
     }
   };
   const handleMenuBlur = event => {
@@ -911,7 +915,7 @@ export function DropdownMenuSubMenu(props) {
       onClick: handleRowClick,
       onKeyDown: composeEventHandlers(handleTriggerKeyDown, onKeyDown),
       isDisabled: isDisabled,
-      xstyle: [triggerStyles.root, triggerSizeStyles[menuSize], isOpen && triggerStyles.open, isDisabled && triggerStyles.disabled, xstyle],
+      xstyle: [focusOutlineStyles.focusVisible, triggerStyles.root, triggerSizeStyles[menuSize], isOpen && triggerStyles.open, isDisabled && triggerStyles.disabled, xstyle],
       ...mergeProps(themeProps('dropdown-menu-item', {
         size: menuSize
       }), {
@@ -1004,7 +1008,9 @@ export function DropdownMenuSubMenu(props) {
       onMouseLeave: contentProps.onMouseLeave,
       "data-testid": menuDataTestId,
       ...menuPress.menuProps,
-      ...mergeProps(themeProps('dropdown-menu'), {
+      ...mergeProps(themeProps('dropdown-menu', {
+        presentation: 'popover'
+      }), {
         0: {
           className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xc0b1yq x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o x1j4r261"
         },

package/dist/DropdownMenu/MenuBottomSheetActionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBottomSheetActionList.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/MenuBottomSheetActionList.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAkC,MAAM,OAAO,CAAC;AAWvD,OAAO,KAAK,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAsC7E,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,aAAa,GACd,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACrD,qBAyHA;yBAjIe,yBAAyB"}
+{"version":3,"file":"MenuBottomSheetActionList.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/MenuBottomSheetActionList.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAkC,MAAM,OAAO,CAAC;AAYvD,OAAO,KAAK,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAsC7E,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,aAAa,GACd,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACrD,qBA2HA;yBAnIe,yBAAyB"}

package/dist/DropdownMenu/MenuBottomSheetActionList.js

@@ -16,10 +16,11 @@ import { Icon, renderIconSlot } from "../Icon/Icon.js";
 import { List } from "../List/List.js";
 import { ListItem } from "../List/ListItem.js";
 import { useMenuPress } from "../hooks/useMenuPress.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { rtlStyles } from "../utils/rtlStyles.js";
-import { getInteractionModality } from "../utils/interactionModality.js";
+import { useInteractionModalityTracking } from "../utils/interactionModality.js";
 import { isModifiedClick } from "./menuItemRoles.js";
 
 /** The action rows: ListItem renders its action as a button (or a link). */
@@ -55,6 +56,11 @@ export function MenuBottomSheetActionList({
   onOpenSubmenu
 }) {
   const listRef = useRef(null);
+  const {
+    ref: modalityRef,
+    readModality
+  } = useInteractionModalityTracking();
+  const listComposedRef = useMergedRefs(listRef, modalityRef);
   // The press model: the row under a finger's RELEASE acts, and the
   // highlight (focus) follows the finger across the rows. The sheet is modal,
   // so a release outside it is the scrim's, not a dismissal of ours.
@@ -72,7 +78,7 @@ export function MenuBottomSheetActionList({
         event.preventDefault();
         return;
       }
-      if (getInteractionModality() === 'pointer') {
+      if (readModality() === 'pointer') {
         event.currentTarget.blur();
       }
       if (isSubmenu) {
@@ -116,7 +122,7 @@ export function MenuBottomSheetActionList({
     }, getItemKey(item, index));
   };
   return /*#__PURE__*/_jsx(List, {
-    ref: listRef,
+    ref: listComposedRef,
     density: "spacious",
     xstyle: styles.list,
     ...menuPress.menuProps,

package/dist/Field/Field.d.ts

@@ -14,8 +14,8 @@
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
 import type { SizeValue } from '../utils/types.js';
-import type { FieldStatusVariant } from '../FieldStatus/FieldStatus.js';
 import type { IconType } from '../Icon/index.js';
+import type { FieldStatusPlacement } from './fieldStatusPlacement.js';
 export type { SizeValue } from '../utils/types.js';
 export type FieldStatusType = 'warning' | 'error' | 'success';
 export interface FieldStatusInput {
@@ -109,7 +109,7 @@ export interface FieldProps extends Omit<BaseProps<HTMLDivElement>, 'children'>
      * - 'tooltip': No message box; the input surfaces status through a tooltip on its on-field icon
      * @default 'attached'
      */
-    statusVariant?: FieldStatusVariant;
+    statusVariant?: FieldStatusPlacement;
     /**
      * Width of the field. Numbers are treated as pixels, strings are used as-is
      * (e.g. `'100%'`). Sizes the whole field — label, control, and status — so

package/dist/Field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AA+DtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA0HZ;yBAhJe,KAAK"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAK9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAOtC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAyDjE,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA0HZ;yBAhJe,KAAK"}

package/dist/Field/FieldLabel.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType, useTranslator, FormLayoutContext
+ * @input Uses React, Icon, IconType, useComponentTranslator, FormLayoutContext
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *

package/dist/Field/FieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiFtC,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAkKjB;yBApLe,UAAU"}
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAuFtC,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAwJjB;yBA1Ke,UAAU"}

package/dist/Field/FieldLabel.js

@@ -4,7 +4,7 @@
 
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType, useTranslator, FormLayoutContext
+ * @input Uses React, Icon, IconType, useComponentTranslator, FormLayoutContext
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
@@ -22,12 +22,14 @@ import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Icon, renderIconSlot } from "../Icon/Icon.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import { TOUCH_POINTER_TYPES } from "../Layer/useTouchTrigger.js";
-import { useTranslator } from "../i18n/useTranslator.js";
+import { useTapStop } from "../Layer/useTouchTrigger.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/Field/FieldLabel.generated.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const styles = {
   label: {
     k1xSpc: "x78zum5",
@@ -95,7 +97,7 @@ export function FieldLabel({
   ref,
   ...rest
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const {
     defaultOptionality
   } = use(FormLayoutContext);
@@ -141,18 +143,10 @@ export function FieldLabel({
   // go on to activate the label's control, as a press anywhere else on the
   // label would (focus the field, toggle a switch). A mouse click on the icon
   // keeps that native activation, and hover shows the help.
-  const iconPressIsTapRef = useRef(false);
-  const handleIconPointerDown = event => {
-    // A finger or a pen: the pointers whose tap the shared touch trigger
-    // answers, so the ones whose tap opens or closes the help.
-    iconPressIsTapRef.current = TOUCH_POINTER_TYPES.has(event.pointerType);
-  };
-  const handleIconClick = event => {
-    if (iconPressIsTapRef.current) {
-      event.preventDefault();
-    }
-    iconPressIsTapRef.current = false;
-  };
+  const {
+    onPointerDown: handleIconPointerDown,
+    onClick: handleIconClick
+  } = useTapStop('click');
   const controlRef = useMemo(() => ({
     get current() {
       return inputID == null ? null : descriptionRef.current?.ownerDocument.getElementById(inputID) ?? null;

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAmD3C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAsDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAMxE;yBANe,gBAAgB;;;AAQhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAMX"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAyD3C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAsDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAMxE;yBANe,gBAAgB;;;AAQhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAMX"}