@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/dist/SegmentedControl/SegmentedControl.js

@@ -19,7 +19,8 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../theme/tokens.stylex.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
-import { useListFocus } from "../hooks/useListFocus.js";
+import { useInternalListFocus } from "../hooks/useListFocus.js";
+import { isSegmentDisabledOnItsOwn } from "../privateAttributes/segmentDisabled.stylex.js";
 import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, composeEventHandlers } from "../utils/index.js";
@@ -51,11 +52,6 @@ const styles = {
     $$css: true
   },
   disabled: {
-    kSiTet: "xbyyjgo",
-    kfzvcC: "x47corl",
-    $$css: true
-  },
-  disabledWithMessage: {
     kSiTet: "xbyyjgo",
     $$css: true
   }
@@ -112,11 +108,10 @@ export function SegmentedControl({
 }) {
   const size = useSize(sizeProp, 'md');
 
-  // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
-  // controls swallow pointer events, so the tooltip listeners attach to the
-  // radiogroup container (and the container keeps pointer events on in this
-  // mode) while the radios stay perceivable via aria-disabled. Selection is
-  // blocked by the isDisabled guards in the click/focus handlers.
+  // Disabled-reason tooltip. Applies to the whole-group disabled state. The
+  // tooltip listeners attach to the radiogroup container, which keeps pointer
+  // events while disabled; the radios stay perceivable via aria-disabled.
+  // Selection is blocked by the isDisabled guards in the click/focus handlers.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -135,9 +130,13 @@ export function SegmentedControl({
     listRef,
     handleKeyDown,
     handleFocus
-  } = useListFocus({
+  } = useInternalListFocus({
     itemSelector: '[role="radio"]:not([aria-disabled="true"])',
     hasRovingTabIndex: true,
+    // One Tab stop, placed by the control (FR2, FR7): the selected segment,
+    // enabled or not and in a disabled control too, else the first segment
+    // not disabled by its own isDisabled, else the first.
+    tabStopOrder: orderTabStop,
     wrap: true,
     orientation: 'horizontal'
   });
@@ -195,8 +194,8 @@ export function SegmentedControl({
     size,
     layout,
     isDisabled,
-    hasDisabledMessage: showsDisabledMessage
-  }), [value, onChange, size, layout, isDisabled, showsDisabledMessage]);
+    disabledReasonID: showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined
+  }), [value, onChange, size, layout, isDisabled, showsDisabledMessage, disabledMessageTooltip.describedBy]);
   return /*#__PURE__*/_jsxs(SegmentedControlContext, {
     value: contextValue,
     children: [/*#__PURE__*/_jsxs("div", {
@@ -213,9 +212,20 @@ export function SegmentedControl({
       onBlur: composeEventHandlers(onBlurProp, hint.onBlur),
       ...mergeProps(themeProps('segmented-control', {
         size
-      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && (showsDisabledMessage ? styles.disabledWithMessage : styles.disabled), xstyle), className, style),
+      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && styles.disabled, xstyle), className, style),
       children: [children, hint.hintElement]
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
-SegmentedControl.displayName = 'SegmentedControl';
+SegmentedControl.displayName = 'SegmentedControl';
+
+/**
+ * The control's segments, its Tab stop first: the selected segment, enabled
+ * or not, else the first segment not disabled by its own isDisabled, else the
+ * first (FR2, FR7).
+ */
+function orderTabStop(list) {
+  const segments = Array.from(list.querySelectorAll('[role="radio"]'));
+  const stop = segments.find(segment => segment.getAttribute('aria-checked') === 'true') ?? segments.find(segment => !isSegmentDisabledOnItsOwn(segment)) ?? segments[0];
+  return stop == null ? [] : [stop, ...segments.filter(segment => segment !== stop)];
+}

package/dist/SegmentedControl/SegmentedControlContext.d.ts

@@ -7,12 +7,11 @@ export interface SegmentedControlContextValue {
     layout: SegmentedControlLayout;
     isDisabled: boolean;
     /**
-     * True when the whole control is disabled *and* a `disabledMessage` is set.
-     * In that mode the selected segment stays focusable (via `aria-disabled`
-     * rather than being dropped from the tab order) so the group's disabled-reason
-     * tooltip is keyboard-discoverable; selection is still blocked.
+     * The id of the group's disabled-reason tooltip while the group is disabled
+     * with a `disabledMessage`. It also describes each segment, so the segment that has focus is
+     * described by the reason (spec:AST-085 FR5).
      */
-    hasDisabledMessage?: boolean;
+    disabledReasonID?: string;
 }
 export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
 export declare function useSegmentedControlContext(): SegmentedControlContextValue;

package/dist/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}

package/dist/SegmentedControl/SegmentedControlItem.d.ts

@@ -48,7 +48,7 @@ export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement>
  * <SegmentedControlItem value="grid" label="Grid" icon={<GridIcon />} />
  * ```
  */
-export declare function SegmentedControlItem({ ref, value, label, isLabelHidden, icon, isDisabled, onClick: onClickProp, xstyle, ...rest }: SegmentedControlItemProps): React.JSX.Element;
+export declare function SegmentedControlItem({ ref, value, label, isLabelHidden, icon, isDisabled, onClick: onClickProp, xstyle, 'aria-describedby': ariaDescribedByProp, ...rest }: SegmentedControlItemProps): React.JSX.Element;
 export declare namespace SegmentedControlItem {
     var displayName: string;
 }

package/dist/SegmentedControl/SegmentedControlItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAe5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgHD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,GAAG,IAAI,EACR,EAAE,yBAAyB,qBAgF3B;yBA1Fe,oBAAoB"}
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgHD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,yBAAyB,qBA2E3B;yBAtFe,oBAAoB"}

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -15,6 +15,8 @@
  * - /packages/cli/assets/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 import React from 'react';
+import { joinAriaIDs } from "../utils/inputAria.js";
+import { segmentDisabledProps } from "../privateAttributes/segmentDisabled.stylex.js";
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -142,17 +144,13 @@ export function SegmentedControlItem({
   isDisabled = false,
   onClick: onClickProp,
   xstyle,
+  'aria-describedby': ariaDescribedByProp,
   ...rest
 }) {
   const pressable = usePressFeedback();
   const ctx = useSegmentedControlContext();
   const isSelected = ctx.value === value;
   const isItemDisabled = isDisabled || ctx.isDisabled;
-  // When the whole group is disabled with a disabledMessage, keep the selected
-  // segment focusable so the group's reason tooltip is keyboard-discoverable.
-  // Per-item disabling (`isDisabled` on the item) always drops out of the tab
-  // order. Activation stays blocked by the isItemDisabled guard in handleClick.
-  const keepsSelectedFocusable = isSelected && (ctx.hasDisabledMessage ?? false) && !isDisabled;
   const size = ctx.size;
   const isFill = ctx.layout === 'fill';
 
@@ -177,15 +175,20 @@ export function SegmentedControlItem({
     role: "radio",
     "aria-checked": isSelected,
     "aria-disabled": isItemDisabled || undefined,
-    "aria-label": isLabelHidden ? label : undefined,
-    "data-value": value,
+    "aria-label": isLabelHidden ? label : undefined
+    // A caller description, then the group's disabled reason, which
+    // describes each segment (FR7).
+    ,
+    "aria-describedby": joinAriaIDs(ariaDescribedByProp, ctx.disabledReasonID),
+    "data-value": value
+    // The group's fallback Tab stop skips segments disabled on their own.
+    ,
+    ...segmentDisabledProps(isDisabled),
     ...(!isSelected && !isItemDisabled ? pressable : undefined),
-    // Disabled items (including when the whole group is disabled) are not tab
-    // stops — otherwise the selected segment stays keyboard-focusable but is
-    // silently dead (arrows and activation are no-ops) (navigation-13). The
-    // exception is a whole-group disabledMessage, where the selected segment
-    // stays focusable so the reason tooltip is keyboard-discoverable.
-    tabIndex: isSelected && !isItemDisabled || keepsSelectedFocusable ? 0 : -1,
+    // The selected segment holds the Tab stop, disabled or not (spec:AST-085
+    // FR1); activation stays blocked by the isItemDisabled guard. With no
+    // selected segment, the group places the stop (SegmentedControl FR2).
+    tabIndex: isSelected ? 0 : -1,
     onClick: handleClick,
     ...mergeProps(themeProps('segmented-control-item', {
       size,

package/dist/SelectableCard/SelectableCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../src/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EACL,KAAK,SAAS,EAKd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsN5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BA0GrB;yBA7He,cAAc"}
+{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../src/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EACL,KAAK,SAAS,EAKd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsN5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAoIrB;yBAvJe,cAAc"}

package/dist/SelectableCard/SelectableCard.js

@@ -34,6 +34,7 @@ import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { Card } from "../Card/Card.js";
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
+import { closestLayerRoot } from "../privateAttributes/layerRoot.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
@@ -183,6 +184,44 @@ const selectedStyleForVariant = variant => {
 // Component
 // =============================================================================
 
+/**
+ * Call a caller's click handler during capture, before the layer's own
+ * handlers, without letting it change what those handlers see. Its
+ * stopPropagation() would keep the press from the control inside the layer,
+ * so it does nothing here. Its preventDefault() would mark the event handled
+ * for those controls (a Button skips its clickAction), so it is applied to
+ * the native event only after the press has bubbled to the document, where it
+ * still cancels the browser's default action.
+ */
+function callBeforeLayerHandlers(handler, event) {
+  const {
+    stopPropagation,
+    preventDefault
+  } = event;
+  let isDefaultPreventedByCaller = false;
+  event.stopPropagation = () => {};
+  event.preventDefault = () => {
+    isDefaultPreventedByCaller = true;
+  };
+  try {
+    handler(event);
+  } finally {
+    event.stopPropagation = stopPropagation;
+    event.preventDefault = preventDefault;
+  }
+  if (isDefaultPreventedByCaller) {
+    const nativeEvent = event.nativeEvent;
+    const doc = event.currentTarget.ownerDocument;
+    const cancelDefault = bubbled => {
+      doc.removeEventListener(nativeEvent.type, cancelDefault);
+      if (bubbled === nativeEvent) {
+        nativeEvent.preventDefault();
+      }
+    };
+    doc.addEventListener(nativeEvent.type, cancelDefault);
+  }
+}
+
 /**
  * A card that toggles between selected and unselected states.
  *
@@ -266,6 +305,22 @@ export function SelectableCard({
     onClick(e);
     onClickProp(e);
   } : onClick;
+
+  // Until the next minor, a click inside an open layer within the card still
+  // reaches the caller's onClick. The layer root stops that click before the
+  // bubble phase, so it is delivered here, during capture. It never toggles.
+  // Remove at the next minor, when that click stops reaching onClick.
+  const handleLayerClickCapture = onClickProp ? e => {
+    const target = e.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const layerRoot = closestLayerRoot(target);
+    if (layerRoot == null || layerRoot.contains(e.currentTarget)) {
+      return;
+    }
+    callBeforeLayerHandlers(onClickProp, e);
+  } : undefined;
   const composedOnMouseUp = onMouseUpProp ? e => {
     onMouseUp(e);
     onMouseUpProp(e);
@@ -290,6 +345,10 @@ export function SelectableCard({
     onClick: !isDisabled ? composedOnClick : undefined,
     onMouseUp: !isDisabled ? composedOnMouseUp : undefined,
     ...props,
+    onClickCapture: !isDisabled && handleLayerClickCapture ? e => {
+      handleLayerClickCapture(e);
+      props.onClickCapture?.(e);
+    } : props.onClickCapture,
     children: [/*#__PURE__*/_jsx("input", {
       ref: interactiveRef,
       type: "checkbox",

package/dist/Selector/Selector.d.ts

@@ -6,7 +6,7 @@
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
- * - /packages/core/src/Selector/Selector.spec.md
+ * - /docs/specs/components/Selector/Selector.spec.md
  * - /packages/core/src/Selector/Selector.doc.mjs
  * - /packages/core/src/Selector/Selector.test.tsx
  * - /packages/core/src/Selector/index.ts
@@ -17,12 +17,12 @@
 import React, { type ReactNode } from 'react';
 import { type IconType } from '../Icon/index.js';
 import type { IndicatorPosition } from '../Indicator/index.js';
-import { type FieldStatusVariant } from '../Field/index.js';
 import { type LayerPlacement } from '../Layer/useLayer.js';
 import type { SelectorOptionType, SelectorOptionData } from './types.js';
 import { type FieldInputBaseProps } from '../Field/fieldParts.js';
 import type { SizeValue } from '../utils/types.js';
 import type { AdaptivePresentation } from '../hooks/useAdaptivePresentation.js';
+import type { FieldStatusPlacement } from '../Field/fieldStatusPlacement.js';
 export type SelectorSize = 'sm' | 'md' | 'lg';
 export type SelectorVariant = 'input' | 'secondary' | 'ghost';
 export type SelectorPresentation = AdaptivePresentation;
@@ -163,7 +163,7 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
      * - 'tooltip': message is exposed from the on-field status icon
      * @default 'attached' for input selectors; 'detached' for secondary/ghost selectors
      */
-    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 they

package/dist/Selector/Selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAUZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAwB,KAAK,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAkB7E,OAAO,KAAK,EAAC,kBAAkB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAmBpE,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AA4c3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB,CACzB,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAEpD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAIb;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEzD;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAExD;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAEpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,KAAK,yBAAyB,CAC5B,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAC/C,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD,CAAC;AAEF,KAAK,sBAAsB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAC3E,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACrB;;;;;OAKG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC;AAEJ,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IACzE,yBAAyB,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AA4C3D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EACnD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,qBAstCxB;yBAvtCe,QAAQ"}
+{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}

package/dist/Selector/Selector.js

@@ -10,7 +10,7 @@
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
- * - /packages/core/src/Selector/Selector.spec.md
+ * - /docs/specs/components/Selector/Selector.spec.md
  * - /packages/core/src/Selector/Selector.doc.mjs
  * - /packages/core/src/Selector/Selector.test.tsx
  * - /packages/core/src/Selector/index.ts
@@ -20,6 +20,7 @@
  */
 import React, { use, useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { useIndicator } from "../Indicator/index.js";
@@ -49,6 +50,7 @@ import { useSize } from "../SizeContext/SizeContext.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { composeEventHandlers } from "../utils/composeEventHandlers.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useInteractionModalityTracking } from "../utils/interactionModality.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
@@ -58,11 +60,13 @@ import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
-import { useTranslator } from "../i18n/index.js";
 import { SelectorBottomSheet } from "./SelectorBottomSheet.js";
 import { useSelectorPresentation } from "./useSelectorPresentation.js";
 import { selectorPresentationStyles } from "./selectorPresentation.stylex.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/Selector/Selector.generated.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 const styles = {
   triggerContainer: {
     kVAEAm: "x1n2onr6",
@@ -126,11 +130,6 @@ const styles = {
     k3aq6I: "x3oybdh xk4oym4 x5lqen6 x3y5scg",
     $$css: true
   },
-  triggerDisabledFocus: {
-    kVAM5u: "xvy26l8 x16it14f",
-    kGVxlE: "x1gnnqk1 xwmge8v",
-    $$css: true
-  },
   triggerGhostDisabled: {
     kKwaWg: "x18o3ruo",
     k3aq6I: "x1c071of x1pdlv7q x1ylxtyb",
@@ -338,7 +337,7 @@ function filterOptionsByQuery(items, query) {
  * ```
  */
 export function Selector(props) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const pressable = usePressFeedback();
   const {
     label,
@@ -431,7 +430,8 @@ export function Selector(props) {
   // shorter inner button makes every size's selected row land too low.
   const anchorRef = useRef(null);
   const triggerRef = useRef(null);
-  const triggerButtonRef = useMergedRefs(triggerRef, ref);
+  const triggerModality = useInteractionModalityTracking();
+  const triggerButtonRef = useMergedRefs(triggerRef, triggerModality.ref, ref);
   const searchRef = useRef(null);
   const [searchQuery, setSearchQuery] = useState('');
   // Mirrors searchQuery for the seed path, which runs before focus reaches the
@@ -538,6 +538,7 @@ export function Selector(props) {
     onHide: handleLayerHide,
     onShow: handleLayerShow,
     triggerRef,
+    triggerModality,
     popoverOptions: {
       hasLightDismiss: true,
       hasCloseButton: false,
@@ -1225,7 +1226,7 @@ export function Selector(props) {
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null,
         readonly: isEffectivelyReadOnly ? 'readonly' : null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'secondary' && styles.triggerSecondary, variant !== 'input' && interactionOverlayStyles.backgroundImage, variant !== 'input' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, variant === 'input' && isDisabled && !surface.isTriggerFocusRingSuppressed && styles.triggerDisabledFocus, isEffectivelyReadOnly && styles.triggerReadOnly, variant !== 'input' && isDisabled && styles.triggerGhostDisabled, variant !== 'input' && isEffectivelyReadOnly && styles.triggerGhostReadOnly, !selectedItem && styles.triggerPlaceholder, variant === 'input' && status && inputStatusBorderStyles[status.type], variant === 'input' && status && !isDisabled && inputStatusHoverShadowStyles[status.type],
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'secondary' && styles.triggerSecondary, variant !== 'input' && interactionOverlayStyles.backgroundImage, variant !== 'input' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, variant === 'input' && isDisabled && !surface.isTriggerFocusRingSuppressed && inputDisabledFocusStyles.ring, isEffectivelyReadOnly && styles.triggerReadOnly, variant !== 'input' && isDisabled && styles.triggerGhostDisabled, variant !== 'input' && isEffectivelyReadOnly && styles.triggerGhostReadOnly, !selectedItem && styles.triggerPlaceholder, variant === 'input' && status && inputStatusBorderStyles[status.type], variant === 'input' && status && !isDisabled && inputStatusHoverShadowStyles[status.type],
       // Grouped secondary triggers keep their neutral fill but take the
       // group's row height, connected edge radii, and focus stacking.
       variant !== 'ghost' && inputGroup && groupStyles.inGroup, inputGroup && styles.triggerInGroup, controlXstyle), controlClassName, controlStyle),

package/dist/Selector/useSelectorPresentation.d.ts

@@ -7,12 +7,18 @@
 import { type FocusEvent, type RefObject } from 'react';
 import { type UsePopoverOptions, type UsePopoverReturn } from '../Popover/usePopover.js';
 import { type AdaptivePresentation, type ResolvedAdaptivePresentation } from '../hooks/useAdaptivePresentation.js';
+import type { InteractionModalityTracking } from '../utils/interactionModality.js';
 interface UseSelectorPresentationOptions {
     presentation: AdaptivePresentation;
     onHide: () => void;
     onShow: () => void;
     popoverOptions: Omit<UsePopoverOptions, 'onHide' | 'onShow'>;
     triggerRef: RefObject<HTMLElement | null>;
+    /**
+     * The component's one modality tracking, its `ref` attached to the trigger,
+     * so the returned trigger's ring follows the trigger's own document.
+     */
+    triggerModality: Pick<InteractionModalityTracking, 'readModality'>;
     /**
      * Return focus to the trigger on every close, even when a press already
      * moved focus to another element. A caller-rendered trigger needs this
@@ -33,6 +39,6 @@ interface SelectorPresentationController {
     popover: UsePopoverReturn;
     show: () => boolean;
 }
-export declare function useSelectorPresentation({ presentation, onHide, onShow, popoverOptions, triggerRef, isFocusReturnAlways, }: UseSelectorPresentationOptions): SelectorPresentationController;
+export declare function useSelectorPresentation({ presentation, onHide, onShow, popoverOptions, triggerRef, triggerModality, isFocusReturnAlways, }: UseSelectorPresentationOptions): SelectorPresentationController;
 export {};
 //# sourceMappingURL=useSelectorPresentation.d.ts.map

package/dist/Selector/useSelectorPresentation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectorPresentation.d.ts","sourceRoot":"","sources":["../../src/Selector/useSelectorPresentation.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,4BAA4B,EAClC,MAAM,kCAAkC,CAAC;AAG1C,UAAU,8BAA8B;IACtC,YAAY,EAAE,oBAAoB,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;IAC7D,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,UAAU,8BAA8B;IACtC,kBAAkB,EAAE,4BAA4B,CAAC;IACjD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,4BAA4B,EAAE,OAAO,CAAC;IACtC,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,mBAA2B,GAC5B,EAAE,8BAA8B,GAAG,8BAA8B,CAmIjE"}
+{"version":3,"file":"useSelectorPresentation.d.ts","sourceRoot":"","sources":["../../src/Selector/useSelectorPresentation.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,4BAA4B,EAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,8BAA8B,CAAC;AAG9E,UAAU,8BAA8B;IACtC,YAAY,EAAE,oBAAoB,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;IAC7D,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C;;;OAGG;IACH,eAAe,EAAE,IAAI,CAAC,2BAA2B,EAAE,cAAc,CAAC,CAAC;IACnE;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,UAAU,8BAA8B;IACtC,kBAAkB,EAAE,4BAA4B,CAAC;IACjD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,4BAA4B,EAAE,OAAO,CAAC;IACtC,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,eAAe,EACf,mBAA2B,GAC5B,EAAE,8BAA8B,GAAG,8BAA8B,CAmIjE"}

package/dist/Selector/useSelectorPresentation.js

@@ -18,6 +18,7 @@ export function useSelectorPresentation({
   onShow,
   popoverOptions,
   triggerRef,
+  triggerModality,
   isFocusReturnAlways = false
 }) {
   const resolvedPresentation = useAdaptivePresentation(presentation);
@@ -39,7 +40,7 @@ export function useSelectorPresentation({
     onFocusReturnTargetFocus,
     prepareFocusReturn,
     resetFocusReturn
-  } = useFocusReturnVisibility();
+  } = useFocusReturnVisibility(triggerModality);
   onHideRef.current = onHide;
   onShowRef.current = onShow;
   const handlePopoverHide = useCallback(() => {

package/dist/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AA+P/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BA2Vd;yBA1We,OAAO"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAmR/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;AAmBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAied;yBAhfe,OAAO"}