@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/dist/HoverCard/useHoverCard.js

@@ -5,7 +5,7 @@
 /**
  * @file useHoverCard.ts
  * @input Uses useLayer, useTouchTrigger, React hooks
- * @output Exports useHoverCard hook for hover/focus/tap triggered layers
+ * @output Exports useHoverCard hook with stable trigger refs for hover/focus/tap layers
  * @position Layer hook; builds on useLayer for hover card behavior
  *
  * SYNC: When modified, update:
@@ -99,6 +99,21 @@ export function useHoverCard(options = {}) {
     onShow,
     onHide
   });
+  // Destructure the layer and touch objects once: both are rebuilt every
+  // render, but their members are stable. Depending on the members instead of
+  // the enclosing objects keeps the refs below identity-stable across
+  // unchanged rerenders, so React never detaches and re-attaches the trigger
+  // (and never rewrites the trigger's `anchor-name`) while the card streams
+  // alongside it.
+  const {
+    ref: layerRef,
+    anchorId: layerAnchorId,
+    show: showLayer,
+    hide: hideLayer,
+    isOpen: isLayerOpen,
+    id: layerId,
+    render: renderLayer
+  } = layer;
   const popoverXstyle = styles.container;
   const showTimeoutRef = useRef(null);
   const hideTimeoutRef = useRef(null);
@@ -123,19 +138,25 @@ export function useHoverCard(options = {}) {
   // passing across the trigger, and a tap is never that.
   const showNow = useCallback(() => {
     clearTimeouts();
-    layer.show();
-  }, [clearTimeouts, layer]);
+    showLayer();
+  }, [clearTimeouts, showLayer]);
   const hideNow = useCallback(() => {
     clearTimeouts();
     isHoveringContentRef.current = false;
-    layer.hide();
-  }, [clearTimeouts, layer]);
-  const touch = useTouchTrigger({
+    hideLayer();
+  }, [clearTimeouts, hideLayer]);
+  const {
+    isTouchPointerRef,
+    isTouchInteraction,
+    handlePointerEnter,
+    handlePointerDown: handleTouchPointerDown,
+    clearTapOpen
+  } = useTouchTrigger({
     touchTrigger,
     isEnabled,
     isControlled: isOpen !== undefined,
-    isOpen: layer.isOpen,
-    layerId: layer.id,
+    isOpen: isLayerOpen,
+    layerId: layerId,
     triggerRef,
     show: showNow,
     hide: hideNow
@@ -148,9 +169,9 @@ export function useHoverCard(options = {}) {
     }
     clearTimeouts();
     showTimeoutRef.current = setTimeout(() => {
-      layer.show();
+      showLayer();
     }, delay);
-  }, [isEnabled, isOpen, clearTimeouts, layer, delay]);
+  }, [isEnabled, isOpen, clearTimeouts, showLayer, delay]);
 
   // Schedule hide with delay (suppressed when isOpen is true)
   const scheduleHide = useCallback(() => {
@@ -161,34 +182,34 @@ export function useHoverCard(options = {}) {
     hideTimeoutRef.current = setTimeout(() => {
       // Don't hide if hovering content
       if (!isHoveringContentRef.current) {
-        layer.hide();
+        hideLayer();
       }
     }, hideDelay);
-  }, [isOpen, clearTimeouts, layer, hideDelay]);
+  }, [isOpen, clearTimeouts, hideLayer, hideDelay]);
 
   // Event handlers
   const handleMouseEnter = useCallback(() => {
     // A tap synthesizes mouseenter. On touch the tap path owns the decision,
     // so hover must not also fire — without this a hover card opens on every
     // tap of its trigger and has nothing to close it.
-    if (touch.isTouchPointerRef.current) {
+    if (isTouchPointerRef.current) {
       return;
     }
     scheduleShow();
-  }, [touch, scheduleShow]);
+  }, [isTouchPointerRef, scheduleShow]);
   const handleMouseLeave = useCallback(() => {
     // On touch the synthesized mouseleave arrives with the next tap elsewhere,
     // which the outside-tap dismissal already handles.
-    if (touch.isTouchPointerRef.current) {
+    if (isTouchPointerRef.current) {
       return;
     }
     scheduleHide();
-  }, [touch, scheduleHide]);
+  }, [isTouchPointerRef, scheduleHide]);
 
   // Tap-to-open on touch; on a mouse this does nothing and hover still rules.
   const handlePointerDown = useCallback(event => {
-    touch.handlePointerDown(event);
-  }, [touch]);
+    handleTouchPointerDown(event);
+  }, [handleTouchPointerDown]);
   const handleFocusIn = useCallback(() => {
     if (!isEnabled) {
       return;
@@ -196,7 +217,7 @@ export function useHoverCard(options = {}) {
     // A tap focuses the trigger it activates. Opening on that focus would
     // reinstate exactly the behavior the touch path just decided against —
     // and on an action trigger it covers the thing the user tapped.
-    if (touch.isTouchInteraction()) {
+    if (isTouchInteraction()) {
       return;
     }
     // Skip showing if we're in the middle of an Escape dismiss
@@ -205,18 +226,18 @@ export function useHoverCard(options = {}) {
       return;
     }
     clearTimeouts();
-    layer.show();
-  }, [isEnabled, touch, clearTimeouts, layer]);
+    showLayer();
+  }, [isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
   const handleFocusOut = useCallback(e => {
     // Check if focus is moving to the hover card content
     const relatedTarget = e.relatedTarget;
-    const popoverElement = document.getElementById(layer.id);
+    const popoverElement = document.getElementById(layerId);
     if (popoverElement?.contains(relatedTarget)) {
       // Focus moving into hover card, keep it open
       return;
     }
     scheduleHide();
-  }, [layer.id, scheduleHide]);
+  }, [layerId, scheduleHide]);
 
   // Escape dismissal (WCAG 1.4.13) goes through the shared layer stack: a
   // visible card is the top-most layer, so it takes the press and consumes it.
@@ -239,7 +260,7 @@ export function useHoverCard(options = {}) {
     // presence is answered from the DOM at press time instead of from state.
     isActive: true,
     isPresent: () => {
-      const el = typeof document === 'undefined' ? null : document.getElementById(layer.id);
+      const el = typeof document === 'undefined' ? null : document.getElementById(layerId);
       if (el == null) {
         return false;
       }
@@ -248,12 +269,12 @@ export function useHoverCard(options = {}) {
       } catch {
         // Browsers without the Popover API (and some test environments) cannot
         // answer the selector; fall back to the hook's own state.
-        return layer.isOpen;
+        return isLayerOpen;
       }
     },
     onDismiss: () => {
       clearTimeouts();
-      touch.clearTapOpen();
+      clearTapOpen();
       // Controlled: report and stop. The close — and the focus restore that
       // goes with it — happens in the controlled effect if and when the
       // consumer flips `isOpen`.
@@ -268,9 +289,9 @@ export function useHoverCard(options = {}) {
       // guard unconditionally would swallow their next focus on the trigger,
       // because a focus() on the already-focused trigger fires no focusin to
       // clear it.
-      const card = typeof document === 'undefined' ? null : document.getElementById(layer.id);
+      const card = typeof document === 'undefined' ? null : document.getElementById(layerId);
       const hadFocus = card?.contains(document.activeElement) ?? false;
-      layer.hide();
+      hideLayer();
       if (hadFocus) {
         isEscapeDismissingRef.current = true;
         triggerRef.current?.focus();
@@ -279,9 +300,6 @@ export function useHoverCard(options = {}) {
   });
 
   // Interaction ref that handles event listeners only
-  const {
-    handlePointerEnter
-  } = touch;
   const interactionRef = useCallback(el => {
     // Cleanup previous element
     if (triggerRef.current) {
@@ -313,9 +331,9 @@ export function useHoverCard(options = {}) {
 
   // Combined ref - shorthand for calling both positionRef and interactionRef
   const ref = useCallback(el => {
-    layer.ref(el);
+    layerRef(el);
     interactionRef(el);
-  }, [layer, interactionRef]);
+  }, [layerRef, interactionRef]);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -327,7 +345,7 @@ export function useHoverCard(options = {}) {
   // Show on mount when isDefaultOpen is true
   useEffect(() => {
     if (isDefaultOpen) {
-      layer.show();
+      showLayer();
     }
     // eslint-disable-next-line @eslint-react/exhaustive-deps -- intentionally only on mount
   }, []);
@@ -339,21 +357,21 @@ export function useHoverCard(options = {}) {
     }
     if (isOpen) {
       clearTimeouts();
-      layer.show();
+      showLayer();
     } else {
       clearTimeouts();
       // A consumer closing the card while it holds focus would strand focus on
       // <body>. Arming the re-show guard is what keeps the refocus from
       // reopening the card through `handleFocusIn`, which shows on any focusin.
-      const card = typeof document === 'undefined' ? null : document.getElementById(layer.id);
+      const card = typeof document === 'undefined' ? null : document.getElementById(layerId);
       const hadFocus = card?.contains(document.activeElement) ?? false;
-      layer.hide();
+      hideLayer();
       if (hadFocus) {
         isEscapeDismissingRef.current = true;
         triggerRef.current?.focus();
       }
     }
-  }, [isOpen, clearTimeouts, layer]);
+  }, [isOpen, clearTimeouts, showLayer, hideLayer, layerId]);
 
   // Render function that wraps layer.render with hover card behavior
   const renderHoverCard = useCallback((children, props) => {
@@ -379,21 +397,21 @@ export function useHoverCard(options = {}) {
       // so rich HoverCard content can use block-safe markup.
       as: 'div'
     };
-    return layer.render(/*#__PURE__*/_jsx("div", {
+    return renderLayer(/*#__PURE__*/_jsx("div", {
       ...{
         className: "x1lliihq x1vlblms xvmdzux x126nfab x1t818jl"
       },
       onMouseEnter: () => {
         // Touch synthesizes these over the card too; letting a tap inside
         // register as "hovering content" would block every later hide.
-        if (touch.isTouchPointerRef.current) {
+        if (isTouchPointerRef.current) {
           return;
         }
         isHoveringContentRef.current = true;
         clearTimeouts();
       },
       onMouseLeave: () => {
-        if (touch.isTouchPointerRef.current) {
+        if (isTouchPointerRef.current) {
           return;
         }
         isHoveringContentRef.current = false;
@@ -419,17 +437,17 @@ export function useHoverCard(options = {}) {
       },
       children: children
     }), renderProps);
-  }, [layer, placement, alignment, label, clearTimeouts, scheduleHide, popoverXstyle, touch]);
+  }, [renderLayer, placement, alignment, label, clearTimeouts, scheduleHide, popoverXstyle, isTouchPointerRef]);
   return {
     ref,
-    positionRef: layer.ref,
+    positionRef: layerRef,
     interactionRef,
-    anchorId: layer.anchorId,
-    id: layer.id,
-    describedBy: layer.id,
-    isOpen: layer.isOpen,
+    anchorId: layerAnchorId,
+    id: layerId,
+    describedBy: layerId,
+    isOpen: isLayerOpen,
     renderHoverCard,
-    show: layer.show,
-    hide: layer.hide
+    show: showLayer,
+    hide: hideLayer
   };
 }

package/dist/InputGroup/InputGroup.d.ts

@@ -4,10 +4,8 @@
  * @output Exports InputGroup component with group label/description ARIA wiring
  * @position Groups input with prefix/suffix addons; consumed by index.ts
  *
- * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
- * Selector, MultiSelector) consume the InputGroup context
- * to remove their own border/radius so the group container provides
- * the unified border treatment.
+ * Compatible input children consume InputGroup context to remove competing
+ * border/radius geometry. Button addons consume it to join the same outer shape.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/InputGroup/InputGroup.doc.mjs

package/dist/InputGroup/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;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;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BAwEjB;yBAzFe,UAAU"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;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;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BAwEjB;yBAzFe,UAAU"}

package/dist/InputGroup/InputGroup.js

@@ -8,10 +8,8 @@
  * @output Exports InputGroup component with group label/description ARIA wiring
  * @position Groups input with prefix/suffix addons; consumed by index.ts
  *
- * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
- * Selector, MultiSelector) consume the InputGroup context
- * to remove their own border/radius so the group container provides
- * the unified border treatment.
+ * Compatible input children consume InputGroup context to remove competing
+ * border/radius geometry. Button addons consume it to join the same outer shape.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/InputGroup/InputGroup.doc.mjs

package/dist/InputGroup/groupStyles.d.ts

@@ -1,11 +1,19 @@
 /**
  * @file groupStyles.ts
  * @input Uses StyleX, theme tokens, and layer-aware group end-cap selectors
- * @output Exports shared group-aware styles for input components
- * @position Shared styles consumed by InputGroup-compatible controls
+ * @output Exports shared group-aware styles for InputGroup children
+ * @position Shared styles consumed by InputGroup-compatible controls and addons
  */
 import * as stylex from '@stylexjs/stylex';
 export declare const groupStyles: Readonly<{
+    readonly buttonAddon: Readonly<{
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", 0 | null>;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", 0 | null>;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", 0 | null>;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", 0 | null>;
+        readonly height: stylex.StyleXClassNameFor<"height", "100%" | null>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 2 | null>;
+    }>;
     readonly inGroup: Readonly<{
         readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;

package/dist/InputGroup/groupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EA6BtB,CAAC"}
+{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAmB3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;EAwDtB,CAAC"}

package/dist/InputGroup/groupStyles.js

@@ -3,8 +3,8 @@
 /**
  * @file groupStyles.ts
  * @input Uses StyleX, theme tokens, and layer-aware group end-cap selectors
- * @output Exports shared group-aware styles for input components
- * @position Shared styles consumed by InputGroup-compatible controls
+ * @output Exports shared group-aware styles for InputGroup children
+ * @position Shared styles consumed by InputGroup-compatible controls and addons
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -15,7 +15,24 @@ import { radiusVars, borderVars } from "../theme/tokens.stylex.js";
 // than another control. Popovers, inert markers, and native dialog surfaces
 // are not visual group members; skip them when finding the trailing edge.
 const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template):not(dialog)))';
+
+// Button consumes InputGroup context anywhere below the group, including buttons
+// inside an input's own implementation. Keep the visual adaptation on direct
+// children so internal clear, calendar, and disclosure actions stay unchanged.
+const DIRECT_INPUT_GROUP_ADDON = ':where(.astryx-input-group > *)';
+const DIRECT_INPUT_GROUP_ADDON_FOCUS_VISIBLE = ':where(.astryx-input-group > *):focus-visible';
+const DIRECT_INPUT_GROUP_ADDON_NOT_FIRST = ':where(.astryx-input-group > *):not(:first-child)';
+const DIRECT_INPUT_GROUP_ADDON_WITH_MEMBER_AFTER = ':where(.astryx-input-group > *):has(~ *:not([popover]):not(template):not(dialog))';
 export const groupStyles = {
+  buttonAddon: {
+    krdFHd: "x1epqg88",
+    kVL7Gh: "xf2wquc",
+    kfmiAY: "x2dar1b",
+    kT0f0o: "x1tgb0ru",
+    kZKoxP: "x1vonza8",
+    kY2c9j: "x1qf1n5z",
+    $$css: true
+  },
   inGroup: {
     kUk6DE: "x98rzlu",
     k7Eaqz: "xeuugli",

package/dist/Layer/useLayerDismissal.d.ts

@@ -66,16 +66,16 @@ export interface UseLayerDismissalReturn {
  *
  * The layer does NOT attach a key listener — the stack owns one listener and
  * routes each Escape press to the top-most REGISTERED layer, so one press
- * dismisses exactly one of them. Dialog (and what is built on it), Popover and
- * the menus built on it, Tooltip, HoverCard, Lightbox, MobileNav, BottomSheet,
- * BottomSheetSwitcher and lab's `Drawer` register today.
+ * dismisses exactly one of them. Dialog (and what is built on it, including
+ * CommandPalette), Popover and the menus built on it, ContextMenu, Tooltip,
+ * HoverCard, Lightbox, MobileNav, BottomSheet, BottomSheetSwitcher and lab's
+ * `Drawer` register today.
  *
- * `CommandPalette`, `ContextMenu`, `DropdownMenuSubMenu`, and
- * `PowerSearchEditPopover` still run their own Escape listeners. They stay safe
- * next to the stack only because each claims the press at element level, and the
- * stack stands down on an already-`defaultPrevented` press — but a registered
- * layer opened inside one of them does not get the press. Migrating them is the
- * fix.
+ * `DropdownMenuSubMenu` and `PowerSearchEditPopover` still run their own Escape
+ * listeners. They stay safe next to the stack only because each claims the press
+ * at element level, and the stack stands down on an already-`defaultPrevented`
+ * press — but a registered layer opened inside one of them does not get the
+ * press. Migrating them is the fix.
  *
  * Wrap the layer's own content in `LayerDepthProvider` so anything opened from
  * inside it registers as nested.

package/dist/Layer/useLayerDismissal.js

@@ -23,16 +23,16 @@ import { isTextComposing, isTopmostLayer, registerLayer } from "./layerStack.js"
  *
  * The layer does NOT attach a key listener — the stack owns one listener and
  * routes each Escape press to the top-most REGISTERED layer, so one press
- * dismisses exactly one of them. Dialog (and what is built on it), Popover and
- * the menus built on it, Tooltip, HoverCard, Lightbox, MobileNav, BottomSheet,
- * BottomSheetSwitcher and lab's `Drawer` register today.
+ * dismisses exactly one of them. Dialog (and what is built on it, including
+ * CommandPalette), Popover and the menus built on it, ContextMenu, Tooltip,
+ * HoverCard, Lightbox, MobileNav, BottomSheet, BottomSheetSwitcher and lab's
+ * `Drawer` register today.
  *
- * `CommandPalette`, `ContextMenu`, `DropdownMenuSubMenu`, and
- * `PowerSearchEditPopover` still run their own Escape listeners. They stay safe
- * next to the stack only because each claims the press at element level, and the
- * stack stands down on an already-`defaultPrevented` press — but a registered
- * layer opened inside one of them does not get the press. Migrating them is the
- * fix.
+ * `DropdownMenuSubMenu` and `PowerSearchEditPopover` still run their own Escape
+ * listeners. They stay safe next to the stack only because each claims the press
+ * at element level, and the stack stands down on an already-`defaultPrevented`
+ * press — but a registered layer opened inside one of them does not get the
+ * press. Migrating them is the fix.
  *
  * Wrap the layer's own content in `LayerDepthProvider` so anything opened from
  * inside it registers as nested.

package/dist/Markdown/Markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAiBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AA8BzD,OAAO,KAAK,EAEV,mBAAmB,EAEpB,MAAM,oBAAoB,CAAC;AAoC5B;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,MAAM,GAAG,KAAK,CAAC;IAExE,2CAA2C;IAC3C,MAAM,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAE5C;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC;QAC5B,oEAAoE;QACpE,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,MAAM,EAAE,cAAc,CAAC;QACvB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,OAAO,GAAG,QAAQ,CAAC;KAC7B,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,WAAW,CAAC,EAAE,mBAAmB,CAAA;KAAC,CAAC,CAAC;CAC/D;AA0BD,MAAM,WAAW,aAAa,CAC5B,OAAO,SAAS,aAAa,CAAC,mBAAmB,CAAC,GAAG,SAAS,EAAE,CAChE,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,GAAG,KAAK,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzC;;;;;OAKG;IACH,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACvC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAosDD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CACtB,KAAK,CAAC,OAAO,SAAS,aAAa,CAAC,mBAAmB,CAAC,GAAG,SAAS,EAAE,EACtE,EACA,GAAG,EACH,QAAQ,EACR,OAAiB,EACjB,OAAmB,EACnB,iBAAqB,EACrB,WAAmB,EACnB,WAAW,EACX,OAAO,EACP,aAAuB,EACvB,YAAkB,EAClB,YAAsB,EACtB,UAAU,EACV,OAAO,EACP,aAAa,EACb,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,MAAM,EACV,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,YAAY,CAkT7C;yBA1Ue,QAAQ"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAkBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AA8BzD,OAAO,KAAK,EAEV,mBAAmB,EAEpB,MAAM,oBAAoB,CAAC;AAoC5B;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,MAAM,GAAG,KAAK,CAAC;IAExE,2CAA2C;IAC3C,MAAM,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAE5C;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC;QAC5B,oEAAoE;QACpE,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,MAAM,EAAE,cAAc,CAAC;QACvB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,OAAO,GAAG,QAAQ,CAAC;KAC7B,CAAC,CAAC;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,mBAAmB,CAAC;KACnC,CAAC,CAAC;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAC,WAAW,CAAC,EAAE,mBAAmB,CAAA;KAAC,CAAC,CAAC;CAC/D;AA0BD,MAAM,WAAW,aAAa,CAC5B,OAAO,SAAS,aAAa,CAAC,mBAAmB,CAAC,GAAG,SAAS,EAAE,CAChE,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,GAAG,KAAK,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACzC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzC;;;;;OAKG;IACH,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACvC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAytDD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CACtB,KAAK,CAAC,OAAO,SAAS,aAAa,CAAC,mBAAmB,CAAC,GAAG,SAAS,EAAE,EACtE,EACA,GAAG,EACH,QAAQ,EACR,OAAiB,EACjB,OAAmB,EACnB,iBAAqB,EACrB,WAAmB,EACnB,WAAW,EACX,OAAO,EACP,aAAuB,EACvB,YAAkB,EAClB,YAAsB,EACtB,UAAU,EACV,OAAO,EACP,aAAa,EACb,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,MAAM,EACV,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,YAAY,CAkT7C;yBA1Ue,QAAQ"}

package/dist/Markdown/Markdown.js

@@ -14,6 +14,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars, fontWeightVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { CodeBlock, Code } from "../CodeBlock/index.js";
+import { parseFenceLanguage } from "../CodeBlock/tokenizer.js";
 import { CheckboxList } from "../CheckboxList/CheckboxList.js";
 import { CheckboxListItem } from "../CheckboxList/CheckboxListItem.js";
 import { Blockquote } from "../Blockquote/Blockquote.js";
@@ -1009,15 +1010,29 @@ listDepth = 0) {
       {
         // Track codeblock content in cursor for accurate character counting
         cursor.offset += node.value.length;
-        const language = getMarkdownAstLegacyCodeLanguage(node) ?? 'plaintext';
+        // `diff-<lang>` fences are the diff layer over <lang>; `diff` is the
+        // layer over plaintext. The legacy language is the info
+        // string's leading word characters, which stops at the hyphen, so the
+        // diff mapping reads the whole first word and then applies the same
+        // word rule to the language it names.
+        const legacyLanguage = getMarkdownAstLegacyCodeLanguage(node) ?? 'plaintext';
+        const fence = parseFenceLanguage(node.lang ?? legacyLanguage);
+        const isDiff = fence.isDiff;
+        // The language under the diff layer; the default CodeBlock renders it.
+        const diffLanguage = isDiff ? fence.language.match(/^\w*/)?.[0] || 'plaintext' : undefined;
+        const language = diffLanguage ?? legacyLanguage;
         // A semantic-fence proposal claims its fence before the host's code
         // renderer (spec:AST-036 FR17). The host renderer, or the default Code
         // block without one, draws every unclaimed fence and is the fallback
         // when the claiming renderer is absent, declines, throws, or suspends.
         const CodeBlockComp = components?.code;
         const fallback = CodeBlockComp ? /*#__PURE__*/_jsx(CodeBlockComp, {
-          code: node.value,
-          language: language,
+          code: node.value
+          // A supplied renderer's contract is unchanged: it keeps receiving
+          // the leading word characters (`diff` for a `diff-tsx` fence, as
+          // today) and nothing new; only the default path maps the layer.
+          ,
+          language: legacyLanguage,
           ...lineProp
         }, index) : /*#__PURE__*/_jsx("div", {
           ...mergeProps(themeProps('markdown-codeblock', {
@@ -1027,7 +1042,13 @@ listDepth = 0) {
           children: /*#__PURE__*/_jsx(CodeBlock, {
             code: node.value,
             language: language,
-            isCollapsible: true,
+            isDiff: isDiff,
+            isCollapsible: true
+            // Long lines wrap rather than scroll sideways, as they do in
+            // RichText, so a reader sees whole lines and the read/edit switch
+            // moves no block (spec:AST-061 FR5, DEC-9).
+            ,
+            isWrapped: true,
             xstyle: [contentWidthValue != null ? dynamicStyles.blockWidth(contentWidthValue) : undefined, blockAlignStyle]
           })
         }, index);

package/dist/MobileNav/MobileNav.d.ts

@@ -21,6 +21,13 @@
  * closes. The native `cancel` event still handles the dismissals the browser
  * starts itself, such as the Android back gesture.
  *
+ * Focus RESTORATION is not delegated to the browser. The drawer captures the
+ * element that opened it and refocuses it once the native dialog has closed,
+ * mirroring Dialog: the implicit `<dialog>` restore has been observed dropping
+ * focus to `<body>`. The close itself is deferred past the slide-out, and the
+ * restore has to follow it. Until close() runs the rest of the document is
+ * inert and focus() on the opener is silently dropped.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
  * - /packages/core/src/Layer/useLayerDismissal.ts (dismissal stack)

package/dist/MobileNav/MobileNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiM5C;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AAmCD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAuOhB;yBAtPe,SAAS"}
+{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAwBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiM5C;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AA+DD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmPhB;yBAlQe,SAAS"}

package/dist/MobileNav/MobileNav.js

@@ -25,6 +25,13 @@
  * closes. The native `cancel` event still handles the dismissals the browser
  * starts itself, such as the Android back gesture.
  *
+ * Focus RESTORATION is not delegated to the browser. The drawer captures the
+ * element that opened it and refocuses it once the native dialog has closed,
+ * mirroring Dialog: the implicit `<dialog>` restore has been observed dropping
+ * focus to `<body>`. The close itself is deferred past the slide-out, and the
+ * restore has to follow it. Until close() runs the rest of the document is
+ * inert and focus() on the opener is silently dropped.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
  * - /packages/core/src/Layer/useLayerDismissal.ts (dismissal stack)
@@ -206,6 +213,31 @@ function resolveCloseDelay(dialog) {
   return hold <= 0 ? 0 : Math.min(cap, hold * CLOSE_WITHIN_HOLD);
 }
 
+/**
+ * Close the native dialog, then return focus to the element that opened it.
+ *
+ * Browsers are supposed to restore focus themselves when a modal <dialog>
+ * closes, but that has been observed to fail (focus lands on <body>), so the
+ * drawer does it explicitly, as Dialog does. The order is load-bearing: while
+ * the modal dialog holds the top layer the rest of the document is inert and
+ * focus() on the opener is silently dropped. So the restore rides on the close
+ * itself, wherever that happens (the delayed timer, or the unmount teardown),
+ * not on the `isOpen` flip that only schedules it.
+ *
+ * Focus is left alone when there was no real opener (activeElement was <body>)
+ * or the opener has since left the DOM: focusing <body> would blur whatever a
+ * router moved focus to, and a detached node cannot take focus.
+ */
+function closeAndRestoreFocus(dialog, openerRef) {
+  dialog.close();
+  const opener = openerRef.current;
+  openerRef.current = null;
+  if (!opener || opener === document.body || !opener.isConnected) {
+    return;
+  }
+  opener.focus();
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -273,6 +305,9 @@ export function MobileNav({
   }), [onOpenChangeProp, appShellMobile]);
   const dialogRef = useRef(null);
   const closeTimeoutRef = useRef(null);
+  // Element that was focused when the drawer opened; focus goes back to it
+  // once the native dialog has closed (see closeAndRestoreFocus).
+  const triggerElementRef = useRef(null);
   const gutterRef = useRef(null);
 
   // Gives back the gutter held open in place of the hidden scrollbar.
@@ -322,6 +357,11 @@ export function MobileNav({
       // and the gutter has to be measured while it is still there.
       gutterRef.current ??= holdScrollbarGutter(document.documentElement);
       if (!dialog.open) {
+        // Capture the opener before showModal() pulls focus into the top
+        // layer. Only on the transition into open: a reopen while the delayed
+        // close is still pending finds the dialog open, and must keep the
+        // original opener rather than whatever is focused inside the drawer.
+        triggerElementRef.current = document.activeElement;
         dialog.showModal();
       }
       // Prevent background scrolling and iOS pull-to-refresh.
@@ -333,7 +373,7 @@ export function MobileNav({
       document.documentElement.style.overflow = '';
       releaseGutter();
       closeTimeoutRef.current = setTimeout(() => {
-        dialog.close();
+        closeAndRestoreFocus(dialog, triggerElementRef);
       }, resolveCloseDelay(dialog));
     }
     return () => {
@@ -356,11 +396,14 @@ export function MobileNav({
   // This must be a separate unmount-only effect: putting it in the open/close
   // effect above would close the dialog on every isOpen flip and cut off the
   // delayed slide-out close.
+  //
+  // Inside AppShell this teardown is the only close the drawer ever gets, so
+  // it is also where focus goes back to the toggle.
   useEffect(() => {
     const dialog = dialogRef.current;
     return () => {
       if (dialog?.open) {
-        dialog.close();
+        closeAndRestoreFocus(dialog, triggerElementRef);
       }
     };
   }, []);