@astryxdesign/lab 0.5.0-canary.70988c2 → 0.5.0-canary.73b00a5

package/dist/Drawer/Drawer.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Drawer.tsx
- * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock, BaseProps, mergeProps/mergeRefs, themeProps
+ * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock/useDrawerDialogPresence, BaseProps, mergeProps/mergeRefs, themeProps
  * @output Exports Drawer component and DrawerProps
  * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
  *
@@ -22,10 +22,11 @@
  * - `show()` when `hasScrim={false}` — non-modal overlay; the page behind
  *   stays interactive (e.g. master-detail inspectors).
  *
- * Entry animation uses `@starting-style` + `transition-behavior:
- * allow-discrete` (see CLAUDE.md dialog-entry pattern); exit slides out
- * before a delayed `dialog.close()` releases the top layer and restores
- * focus to the element that opened the drawer.
+ * Entry animation uses `@starting-style`; exit slides out before
+ * `dialog.close()` releases the top layer and restores focus to the element
+ * that opened the drawer. React owns `display` for both legs rather than a
+ * discrete `display` transition, so the panel stops painting in the same
+ * commit as `close()` — see the `rendered` style for why that matters.
  *
  * Sibling drawers coordinate through a module-level LIFO registry: Escape
  * closes only the top (last-opened) drawer, and non-modal drawers stack

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAsOlD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,mBAA2B,EAC3B,KAAK,EACL,QAAe,EACf,cAAqB,EACrB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmMb;yBApNe,MAAM"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA+OlD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,mBAA2B,EAC3B,KAAK,EACL,QAAe,EACf,cAAqB,EACrB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAqJb;yBAtKe,MAAM"}

package/dist/Drawer/Drawer.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Drawer.tsx
- * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock, BaseProps, mergeProps/mergeRefs, themeProps
+ * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock/useDrawerDialogPresence, BaseProps, mergeProps/mergeRefs, themeProps
  * @output Exports Drawer component and DrawerProps
  * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
  *
@@ -26,10 +26,11 @@
  * - `show()` when `hasScrim={false}` — non-modal overlay; the page behind
  *   stays interactive (e.g. master-detail inspectors).
  *
- * Entry animation uses `@starting-style` + `transition-behavior:
- * allow-discrete` (see CLAUDE.md dialog-entry pattern); exit slides out
- * before a delayed `dialog.close()` releases the top layer and restores
- * focus to the element that opened the drawer.
+ * Entry animation uses `@starting-style`; exit slides out before
+ * `dialog.close()` releases the top layer and restores focus to the element
+ * that opened the drawer. React owns `display` for both legs rather than a
+ * discrete `display` transition, so the panel stops painting in the same
+ * commit as `close()` — see the `rendered` style for why that matters.
  *
  * Sibling drawers coordinate through a module-level LIFO registry: Escape
  * closes only the top (last-opened) drawer, and non-modal drawers stack
@@ -50,6 +51,7 @@ import { IconButton } from '@astryxdesign/core/IconButton';
 import { useScrollLock } from '@astryxdesign/core/hooks';
 import { composeEventHandlers, mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { overlayPaddingReset } from '@astryxdesign/core/Layout';
+import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
 
 // =============================================================================
 // LIFO stacking registry (internal)
@@ -122,14 +124,13 @@ const styles = {
     krVfgx: "x1ey2m1c",
     kZKoxP: "xtdtrs8",
     k1xSpc: "x1s85apg",
-    k1ekBW: "xayqnl7",
+    k1ekBW: "x11xpdln",
     kIyJzY: "x80gvsz",
     kAMwcw: "xlr8y92",
-    kzIqYQ: "xd00j3c",
     k6CgDc: "xzg1mie",
     $$css: true
   },
-  open: {
+  rendered: {
     k1xSpc: "x78zum5",
     $$css: true
   },
@@ -244,9 +245,6 @@ export function Drawer({
   ...props
 }) {
   const dialogRef = useRef(null);
-  const closeTimeoutRef = useRef(null);
-  // Element focused when the drawer opened — restored on close.
-  const triggerElementRef = useRef(null);
   // Registry identity + latest onOpenChange (stable across re-renders so the
   // registration effect doesn't churn on every onOpenChange identity change).
   const drawerId = useId();
@@ -256,70 +254,21 @@ export function Drawer({
   }, [onOpenChange]);
   // z-index assigned by the registry on open (non-modal stacking only).
   const [stackZ, setStackZ] = useState(NON_MODAL_BASE_Z);
+  // Whether the panel paints: true while open and for the whole slide-out.
+  const [isRendered, setIsRendered] = useState(isOpen);
 
-  // Open/close the native dialog. close() is delayed so the slide-out
-  // transition can play; focus restore happens after close() because a
-  // modal dialog makes the rest of the document inert (focus() on the
-  // trigger would silently fail while the dialog is still open).
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) {
-      return;
-    }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    if (isOpen) {
-      if (!dialog.open) {
-        triggerElementRef.current = document.activeElement;
-        if (hasScrim) {
-          dialog.showModal();
-        } else {
-          dialog.show();
-        }
-        // React's autoFocus calls .focus() during commit, before the dialog
-        // is shown, so it silently fails — honor data-autofocus instead
-        // (same contract as Dialog).
-        const autofocusTarget = dialog.querySelector('[data-autofocus]');
-        if (autofocusTarget) {
-          autofocusTarget.focus();
-        }
-      }
-    } else if (dialog.open) {
-      const duration = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 10 : 250;
-      closeTimeoutRef.current = setTimeout(() => {
-        dialog.close();
-        // Return focus to the element that opened the drawer.
-        triggerElementRef.current?.focus();
-        triggerElementRef.current = null;
-      }, duration);
-    }
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-        closeTimeoutRef.current = null;
-      }
-    };
-  }, [isOpen, hasScrim]);
-
-  // Close the native dialog on unmount if it's still open. When the drawer
-  // is mounted inside an <Activity> that flips to mode="hidden", React runs
-  // effect cleanups (with a stale isOpen) instead of re-running the effect
-  // with isOpen=false — leaving the <dialog> `open` would skip showModal()
-  // on the next open and the drawer could never be re-opened (see
-  // MobileNavReopen.test.tsx for the original repro). 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.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    return () => {
-      if (dialog?.open) {
-        dialog.close();
-      }
-    };
-  }, []);
+  // Adjusted during render, not in an effect: the panel has to be rendered in
+  // the same commit that targets the open transform, or @starting-style has
+  // nothing to animate from.
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
+  useDrawerDialogPresence({
+    dialogRef,
+    isOpen,
+    isModal: hasScrim,
+    setIsRendered
+  });
 
   // LIFO registry membership: register on open, unregister on close or
   // unmount. The returned z-index stacks non-modal siblings in open order.
@@ -368,8 +317,20 @@ export function Drawer({
   }, [hasScrim, onOpenChange]);
   const widthValue = typeof width === 'number' ? `${width}px` : width;
   const mobileWidth = isFullWidthOnMobile ? MOBILE_WIDTH_FULL : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
-  const sideStyle = side === 'start' ? styles.start : styles.end;
-  const sideOpenStyle = side === 'start' ? styles.startOpen : styles.endOpen;
+
+  // The side the panel is ANCHORED to, which is the side it must slide back
+  // out to. Latched at open, because a consumer commonly derives `side` from
+  // the same state that drives `isOpen` (`side={selected?.side ?? 'end'}`):
+  // that state clears on close, so the live prop flips mid-exit and the panel
+  // teleports to the other edge and slides out the wrong way. Children stay
+  // mounted for the exit for the same reason; so does the anchor.
+  const exitSideRef = useRef(side);
+  if (isOpen) {
+    exitSideRef.current = side;
+  }
+  const anchoredSide = isOpen ? side : exitSideRef.current;
+  const sideStyle = anchoredSide === 'start' ? styles.start : styles.end;
+  const sideOpenStyle = anchoredSide === 'start' ? styles.startOpen : styles.endOpen;
 
   // Filter out native `open` to prevent InvalidStateError when passed
   const {
@@ -379,8 +340,8 @@ export function Drawer({
   return /*#__PURE__*/_jsxs("dialog", {
     ref: mergeRefs(ref, dialogRef),
     ...mergeProps(themeProps('drawer', {
-      side
-    }), stylex.props(styles.dialog, overlayPaddingReset.reset, sideStyle, dynamicStyles.inlineSize(widthValue, mobileWidth), isOpen && styles.open, isOpen && sideOpenStyle, hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ), hasScrim && isOpen && styles.scrimOpen, xstyle), className, style),
+      side: anchoredSide
+    }), stylex.props(styles.dialog, overlayPaddingReset.reset, sideStyle, dynamicStyles.inlineSize(widthValue, mobileWidth), isRendered && styles.rendered, isOpen && sideOpenStyle, hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ), hasScrim && isOpen && styles.scrimOpen, xstyle), className, style),
     ...safeProps,
     "aria-label": label,
     "aria-modal": hasScrim ? 'true' : undefined,

package/dist/Drawer/useDrawerDialogPresence.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native dialog presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - The native <dialog> `open` state keeps it in the top layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then `dialog.close()` and the React hide must happen in the same
+ * task. If the hide lands a frame later, a transformed ancestor becomes the
+ * containing block for the now-non-top-layer `position: fixed` panel and it
+ * paints back inside the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+import { type Dispatch, type RefObject, type SetStateAction } from 'react';
+type UseDrawerDialogPresenceOptions = {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    isOpen: boolean;
+    isModal: boolean;
+    setIsRendered: Dispatch<SetStateAction<boolean>>;
+};
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, opens the native dialog, and honours the
+ * component's `data-autofocus` contract. Closing waits for the actual
+ * transform transition (with a computed-duration backstop), then closes the
+ * native dialog and synchronously hides the panel before the browser can paint
+ * it outside the top layer. Unmount cleanup closes a dialog left open by React
+ * Activity or a removed subtree.
+ */
+export declare function useDrawerDialogPresence({ dialogRef, isOpen, isModal, setIsRendered, }: UseDrawerDialogPresenceOptions): void;
+export {};
+//# sourceMappingURL=useDrawerDialogPresence.d.ts.map

package/dist/Drawer/useDrawerDialogPresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAaf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CA6DvC"}

package/dist/Drawer/useDrawerDialogPresence.js

@@ -0,0 +1,180 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native dialog presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - The native <dialog> `open` state keeps it in the top layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then `dialog.close()` and the React hide must happen in the same
+ * task. If the hide lands a frame later, a transformed ancestor becomes the
+ * containing block for the now-non-top-layer `position: fixed` panel and it
+ * paints back inside the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+import { useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+
+/** Slack past the computed transition before the backstop gives up waiting. */
+const EXIT_BACKSTOP_BUFFER_MS = 50;
+
+/**
+ * Hold used when the transition duration cannot be read — an unresolved
+ * `var()` outside a real browser. Picking a fixed number would otherwise make
+ * an assumption about the consumer's theme.
+ */
+const EXIT_FALLBACK_MS = 250;
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, opens the native dialog, and honours the
+ * component's `data-autofocus` contract. Closing waits for the actual
+ * transform transition (with a computed-duration backstop), then closes the
+ * native dialog and synchronously hides the panel before the browser can paint
+ * it outside the top layer. Unmount cleanup closes a dialog left open by React
+ * Activity or a removed subtree.
+ */
+export function useDrawerDialogPresence({
+  dialogRef,
+  isOpen,
+  isModal,
+  setIsRendered
+}) {
+  // Element focused when the drawer opened — restored on close.
+  const triggerElementRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+    if (isOpen) {
+      if (!dialog.open) {
+        triggerElementRef.current = document.activeElement;
+        if (isModal) {
+          dialog.showModal();
+        } else {
+          dialog.show();
+        }
+        // React's autoFocus calls .focus() during commit, before the dialog is
+        // shown, so it silently fails — honour data-autofocus instead (same
+        // contract as Dialog).
+        dialog.querySelector('[data-autofocus]')?.focus();
+      }
+      return;
+    }
+    if (!dialog.open) {
+      return;
+    }
+    return waitForDrawerExit(dialog, () => {
+      dialog.close();
+      // flushSync, not a plain setState: React's default scheduling can land
+      // the commit after the next paint, and that one frame is exactly the
+      // bug — the panel paints outside the top layer. Both happen in this
+      // task, so the browser never gets to paint between them.
+      flushSync(() => {
+        setIsRendered(false);
+      });
+      // Return focus after close(): a modal dialog makes the rest of the
+      // document inert, so focusing the trigger before close() silently fails.
+      triggerElementRef.current?.focus();
+      triggerElementRef.current = null;
+    });
+  }, [dialogRef, isModal, isOpen, setIsRendered]);
+
+  // Close the native dialog on unmount if it is still open. When the drawer is
+  // mounted inside an <Activity> that flips to mode="hidden", React runs effect
+  // cleanups (with stale isOpen) instead of re-running the effect with
+  // isOpen=false. Leaving `open` set would skip showModal() on the next open.
+  // This is deliberately separate from the open/close effect: putting it in
+  // that cleanup would cut off every delayed slide-out.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog?.open) {
+        dialog.close();
+      }
+    };
+  }, [dialogRef]);
+}
+
+/**
+ * Wait for the panel's transform transition, with a computed-duration
+ * backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is
+ * authoritative, and the timeout only prevents a lost event from stranding an
+ * open dialog.
+ */
+function waitForDrawerExit(element, complete) {
+  let done = false;
+  let timer = null;
+  const finish = () => {
+    if (done) {
+      return;
+    }
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+    complete();
+  };
+  const handleTransitionEnd = event => {
+    if (event.target === element && event.propertyName === 'transform') {
+      finish();
+    }
+  };
+  element.addEventListener('transitionend', handleTransitionEnd);
+  element.addEventListener('transitioncancel', handleTransitionEnd);
+  const transitionMs = readTransformTransitionMs(element);
+  timer = setTimeout(finish, (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS);
+  return () => {
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+  };
+}
+
+/** Read the transform transition's duration + delay from computed CSS. */
+function readTransformTransitionMs(element) {
+  const computed = window.getComputedStyle(element);
+  const properties = computed.transitionProperty.split(',').map(value => value.trim());
+  const durations = parseTimes(computed.transitionDuration);
+  const delays = parseTimes(computed.transitionDelay);
+  if (properties.length === 0 || durations.length === 0 || delays.length === 0 || durations.includes(null) || delays.includes(null)) {
+    return null;
+  }
+  return properties.reduce((longest, property, index) => {
+    if (property !== 'transform' && property !== 'all') {
+      return longest;
+    }
+    const duration = durations[index % durations.length];
+    const delay = delays[index % delays.length];
+    return Math.max(longest, (duration ?? 0) + (delay ?? 0));
+  }, 0);
+}
+function parseTimes(value) {
+  return value.split(',').map(part => {
+    const trimmed = part.trim();
+    const time = Number.parseFloat(trimmed);
+    if (!Number.isFinite(time)) {
+      return null;
+    }
+    if (trimmed.endsWith('ms')) {
+      return time;
+    }
+    return trimmed.endsWith('s') ? time * 1000 : null;
+  });
+}

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

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

package/dist/TransferList/TransferList.js

@@ -28,24 +28,26 @@ import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { useAnnounce } from '@astryxdesign/core/hooks';
 import { useTranslator } from '@astryxdesign/core/i18n';
 import '@astryxdesign/core/theme/tokens.stylex';
-import { borderVars, colorVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { borderVars, colorVars, sizeVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { focusOutlineStyles, mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { reorderStyles } from "../reorderStyles.js";
 import "./tokens.stylex.js";
 import { transferListVars } from "./tokens.stylex.js";
+
+// Lucide glyphs the shared icon registry does not carry (there is no `add` or
+// `grip` semantic name). Typed as icon components and rendered through `Icon`
+// so sizing, colour and a11y come from the icon pipeline rather than a raw
+// inline `<svg>`. Removal reuses the registry `close` glyph instead.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function PlusIcon() {
+function PlusIcon(props) {
   return /*#__PURE__*/_jsxs("svg", {
-    className: "lucide lucide-plus",
-    width: 16,
-    height: 16,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    "aria-hidden": true,
+    ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M5 12h14"
     }), /*#__PURE__*/_jsx("path", {
@@ -53,37 +55,15 @@ function PlusIcon() {
     })]
   });
 }
-function RemoveIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    className: "lucide lucide-x",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M18 6 6 18"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "m6 6 12 12"
-    })]
-  });
-}
-function GripVerticalIcon() {
+function GripVerticalIcon(props) {
   return /*#__PURE__*/_jsxs("svg", {
-    className: "lucide lucide-grip-vertical",
-    width: 16,
-    height: 16,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    "aria-hidden": true,
+    ...props,
     children: [/*#__PURE__*/_jsx("circle", {
       cx: "9",
       cy: "5",
@@ -144,6 +124,7 @@ const styles = {
   },
   headerAction: {
     kZKoxP: "xt7dq6l",
+    kAzted: "x1gdqauq",
     k8WAf4: "xt970qd",
     kg3NbH: "xnjsko4",
     kaIpWk: "x2u8bby",
@@ -696,7 +677,10 @@ export function TransferList({
         label: t('@astryx.transferList.addOption', {
           label: option.label
         }),
-        icon: /*#__PURE__*/_jsx(PlusIcon, {}),
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: PlusIcon,
+          size: "sm"
+        }),
         size: "sm",
         variant: "ghost",
         isDisabled: isTransferDisabled,
@@ -709,7 +693,10 @@ export function TransferList({
       label: t('@astryx.transferList.removeOption', {
         label: option.label
       }),
-      icon: /*#__PURE__*/_jsx(RemoveIcon, {}),
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "close",
+        size: "sm"
+      }),
       size: "sm",
       variant: "ghost",
       isDisabled: isTransferDisabled,
@@ -750,7 +737,10 @@ export function TransferList({
       }),
       "aria-describedby": reorderInstructionsId,
       "aria-pressed": active,
-      icon: /*#__PURE__*/_jsx(GripVerticalIcon, {}),
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: GripVerticalIcon,
+        size: "sm"
+      }),
       size: "sm",
       variant: "ghost",
       isDisabled: isReorderDisabled,
@@ -954,7 +944,7 @@ export function TransferList({
                   type: "body",
                   weight: "bold",
                   color: "primary",
-                  children: group || 'Other'
+                  children: group || t('@astryx.transferList.ungroupedLabel')
                 })
               }), groupOptions.map(option => transferItem(option, 'available', availableOptions.indexOf(option)))]
             }, group || 'ungrouped'))

package/dist/lab.css

@@ -437,7 +437,6 @@
   .xumwmo6:not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
   .xsqj5wx:not(#\#):not(#\#):not(#\#){transform:var(--x-transform)}
-  .xd00j3c:not(#\#):not(#\#):not(#\#){transition-behavior:allow-discrete}
   .xkvfbh3:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast-min)}
   .xuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}
   .x80gvsz:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium)}
@@ -447,7 +446,7 @@
   .x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
   .xxnu56j:not(#\#):not(#\#):not(#\#){transition-property:stroke-dashoffset}
   .x1gfj591:not(#\#):not(#\#):not(#\#){transition-property:top,left,width,height}
-  .xayqnl7:not(#\#):not(#\#):not(#\#){transition-property:transform,display}
+  .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
   .x9lcvmn:not(#\#):not(#\#):not(#\#){transition-timing-function:ease-out}
   .xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
   .x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
@@ -535,6 +534,7 @@
   .xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
   .x1cy360x:not(#\#):not(#\#):not(#\#):not(#\#){min-height:3em}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
+  .x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
   .xu95rz8:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--transfer-list-panel-min-block-size)}
   .x82snj4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--x-minHeight)}
   .xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.5.0-canary.70988c2",
+  "version": "0.5.0-canary.73b00a5",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.5.0-canary.70988c2",
+    "@astryxdesign/core": "0.5.0-canary.73b00a5",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -55,7 +55,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.0-canary.70988c2",
+    "@astryxdesign/cli": "0.5.0-canary.73b00a5",
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",

package/src/Drawer/Drawer.test.tsx

@@ -255,6 +255,10 @@ describe('Drawer', () => {
         fireEvent.click(screen.getByRole('button', {name: 'Close inspector'}));
         // Still open while the slide-out transition plays
         expect(dialog).toHaveAttribute('open');
+        act(() => {
+          vi.advanceTimersByTime(250);
+        });
+        expect(dialog).toHaveAttribute('open');
         act(() => {
           vi.advanceTimersByTime(300);
         });
@@ -264,6 +268,43 @@ describe('Drawer', () => {
       }
     });
 
+    it('closes as soon as the slide-out transition ends', () => {
+      vi.useFakeTimers();
+      try {
+        render(<Harness />);
+        fireEvent.click(screen.getByRole('button', {name: 'Open inspector'}));
+        const dialog = screen.getByRole('dialog', {hidden: true});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Close inspector'}));
+        expect(dialog).toHaveAttribute('open');
+
+        // The transition is authoritative — no need to wait out the backstop.
+        act(() => {
+          fireEvent.transitionEnd(dialog, {propertyName: 'transform'});
+        });
+        expect(dialog).not.toHaveAttribute('open');
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('keeps sliding while a transitionend for another property arrives', () => {
+      vi.useFakeTimers();
+      try {
+        render(<Harness />);
+        fireEvent.click(screen.getByRole('button', {name: 'Open inspector'}));
+        const dialog = screen.getByRole('dialog', {hidden: true});
+
+        fireEvent.click(screen.getByRole('button', {name: 'Close inspector'}));
+        act(() => {
+          fireEvent.transitionEnd(dialog, {propertyName: 'opacity'});
+        });
+        expect(dialog).toHaveAttribute('open');
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
     it('restores focus to the trigger element on close', () => {
       vi.useFakeTimers();
       try {
@@ -576,10 +617,43 @@ describe('Drawer', () => {
     });
   });
 
+  describe('exit anchoring', () => {
+    it('slides out to the side it opened from, even if the prop flips', () => {
+      // The common consumer shape: `side` is derived from the same state that
+      // drives isOpen, so it reverts to the default the moment the drawer
+      // closes. The panel must still leave by the edge it came in from.
+      function Harness() {
+        const [side, setSide] = useState<'start' | 'end' | null>(null);
+        return (
+          <>
+            <button type="button" onClick={() => setSide('start')}>
+              Open from start
+            </button>
+            <Drawer
+              isOpen={side != null}
+              onOpenChange={isOpen => !isOpen && setSide(null)}
+              label="Filters"
+              side={side ?? 'end'}>
+              Content
+            </Drawer>
+          </>
+        );
+      }
+      render(<Harness />);
+      fireEvent.click(screen.getByRole('button', {name: 'Open from start'}));
+      const dialog = screen.getByRole('dialog', {hidden: true});
+      expect(dialog).toHaveAttribute('data-side', 'start');
+
+      fireEvent.keyDown(dialog, {key: 'Escape'});
+      // Mid-exit: the live prop is now 'end', the anchor must still be 'start'.
+      expect(dialog).toHaveAttribute('data-side', 'start');
+    });
+  });
+
   describe('container padding isolation', () => {
     it('resets container padding custom properties on the root dialog element', () => {
       render(
-        <Drawer isOpen onClose={() => {}} label="Details">
+        <Drawer isOpen onOpenChange={() => {}} label="Details">
           Content
         </Drawer>,
       );

package/src/Drawer/Drawer.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Drawer.tsx
- * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock, BaseProps, mergeProps/mergeRefs, themeProps
+ * @input Uses React, StyleX, theme tokens, Icon/IconButton, useScrollLock/useDrawerDialogPresence, BaseProps, mergeProps/mergeRefs, themeProps
  * @output Exports Drawer component and DrawerProps
  * @position Lab implementation; consumed by index.ts, tested by Drawer.test.tsx, demonstrated in Storybook
  *
@@ -26,10 +26,11 @@
  * - `show()` when `hasScrim={false}` — non-modal overlay; the page behind
  *   stays interactive (e.g. master-detail inspectors).
  *
- * Entry animation uses `@starting-style` + `transition-behavior:
- * allow-discrete` (see CLAUDE.md dialog-entry pattern); exit slides out
- * before a delayed `dialog.close()` releases the top layer and restores
- * focus to the element that opened the drawer.
+ * Entry animation uses `@starting-style`; exit slides out before
+ * `dialog.close()` releases the top layer and restores focus to the element
+ * that opened the drawer. React owns `display` for both legs rather than a
+ * discrete `display` transition, so the panel stops painting in the same
+ * commit as `close()` — see the `rendered` style for why that matters.
  *
  * Sibling drawers coordinate through a module-level LIFO registry: Escape
  * closes only the top (last-opened) drawer, and non-modal drawers stack
@@ -70,6 +71,7 @@ import {
   themeProps,
 } from '@astryxdesign/core/utils';
 import {overlayPaddingReset} from '@astryxdesign/core/Layout';
+import {useDrawerDialogPresence} from './useDrawerDialogPresence';
 
 // =============================================================================
 // LIFO stacking registry (internal)
@@ -149,22 +151,30 @@ const styles = stylex.create({
     insetBlockStart: 0,
     insetBlockEnd: 0,
     height: '100dvh',
-    // Closed state. `display` participates in the transition with
-    // allow-discrete so it flips to none only after the slide-out finishes
-    // (@starting-style covers the none -> flex entry).
+    // Closed state. `display` is owned by React (see `rendered`), not by a
+    // discrete `display` transition, so only `transform` animates here.
     display: 'none',
-    transitionProperty: 'transform, display',
+    transitionProperty: 'transform',
     transitionDuration: durationVars['--duration-medium'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    transitionBehavior: 'allow-discrete',
     '@media (prefers-reduced-motion: reduce)': {
       transitionDuration: '0.01s',
     },
   },
-  // Open state applied via isOpen prop, not :where([open]) — attribute
+  // Rendered while the drawer is open AND while it slides out. Applied from
+  // React state, not from a discrete `display` transition: `close()` drops the
+  // dialog out of the top layer, and any ancestor that establishes a
+  // containing block for fixed positioning (transform, filter, container-type,
+  // contain) then becomes the origin for the panel's `position: fixed`. A
+  // panel still painting after `close()` therefore snaps back INTO the layout
+  // and covers the page for the rest of the hold. Owning `display` lets the
+  // hide land in the same commit as `close()`, so no frame is ever painted
+  // outside the top layer.
+  //
+  // Applied via the isOpen/exit state, not :where([open]) — attribute
   // selectors have zero specificity and can lose to default styles
   // depending on CSS source order (same rationale as Dialog/MobileNav).
-  open: {
+  rendered: {
     display: 'flex',
   },
   // start/end transforms flip under RTL so the panel always slides in from
@@ -406,9 +416,6 @@ export function Drawer({
   ...props
 }: DrawerProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
-  // Element focused when the drawer opened — restored on close.
-  const triggerElementRef = useRef<HTMLElement | null>(null);
   // Registry identity + latest onOpenChange (stable across re-renders so the
   // registration effect doesn't churn on every onOpenChange identity change).
   const drawerId = useId();
@@ -418,78 +425,22 @@ export function Drawer({
   }, [onOpenChange]);
   // z-index assigned by the registry on open (non-modal stacking only).
   const [stackZ, setStackZ] = useState(NON_MODAL_BASE_Z);
+  // Whether the panel paints: true while open and for the whole slide-out.
+  const [isRendered, setIsRendered] = useState(isOpen);
+
+  // Adjusted during render, not in an effect: the panel has to be rendered in
+  // the same commit that targets the open transform, or @starting-style has
+  // nothing to animate from.
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
 
-  // Open/close the native dialog. close() is delayed so the slide-out
-  // transition can play; focus restore happens after close() because a
-  // modal dialog makes the rest of the document inert (focus() on the
-  // trigger would silently fail while the dialog is still open).
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) {
-      return;
-    }
-
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-
-    if (isOpen) {
-      if (!dialog.open) {
-        triggerElementRef.current =
-          document.activeElement as HTMLElement | null;
-        if (hasScrim) {
-          dialog.showModal();
-        } else {
-          dialog.show();
-        }
-        // React's autoFocus calls .focus() during commit, before the dialog
-        // is shown, so it silently fails — honor data-autofocus instead
-        // (same contract as Dialog).
-        const autofocusTarget =
-          dialog.querySelector<HTMLElement>('[data-autofocus]');
-        if (autofocusTarget) {
-          autofocusTarget.focus();
-        }
-      }
-    } else if (dialog.open) {
-      const duration = window.matchMedia('(prefers-reduced-motion: reduce)')
-        .matches
-        ? 10
-        : 250;
-      closeTimeoutRef.current = setTimeout(() => {
-        dialog.close();
-        // Return focus to the element that opened the drawer.
-        triggerElementRef.current?.focus();
-        triggerElementRef.current = null;
-      }, duration);
-    }
-
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-        closeTimeoutRef.current = null;
-      }
-    };
-  }, [isOpen, hasScrim]);
-
-  // Close the native dialog on unmount if it's still open. When the drawer
-  // is mounted inside an <Activity> that flips to mode="hidden", React runs
-  // effect cleanups (with a stale isOpen) instead of re-running the effect
-  // with isOpen=false — leaving the <dialog> `open` would skip showModal()
-  // on the next open and the drawer could never be re-opened (see
-  // MobileNavReopen.test.tsx for the original repro). 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.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    return () => {
-      if (dialog?.open) {
-        dialog.close();
-      }
-    };
-  }, []);
+  useDrawerDialogPresence({
+    dialogRef,
+    isOpen,
+    isModal: hasScrim,
+    setIsRendered,
+  });
 
   // LIFO registry membership: register on open, unregister on close or
   // unmount. The returned z-index stacks non-modal siblings in open order.
@@ -551,8 +502,21 @@ export function Drawer({
     ? MOBILE_WIDTH_FULL
     : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
 
-  const sideStyle = side === 'start' ? styles.start : styles.end;
-  const sideOpenStyle = side === 'start' ? styles.startOpen : styles.endOpen;
+  // The side the panel is ANCHORED to, which is the side it must slide back
+  // out to. Latched at open, because a consumer commonly derives `side` from
+  // the same state that drives `isOpen` (`side={selected?.side ?? 'end'}`):
+  // that state clears on close, so the live prop flips mid-exit and the panel
+  // teleports to the other edge and slides out the wrong way. Children stay
+  // mounted for the exit for the same reason; so does the anchor.
+  const exitSideRef = useRef(side);
+  if (isOpen) {
+    exitSideRef.current = side;
+  }
+  const anchoredSide = isOpen ? side : exitSideRef.current;
+
+  const sideStyle = anchoredSide === 'start' ? styles.start : styles.end;
+  const sideOpenStyle =
+    anchoredSide === 'start' ? styles.startOpen : styles.endOpen;
 
   // Filter out native `open` to prevent InvalidStateError when passed
   const {open: _open, ...safeProps} = props as Record<string, unknown>;
@@ -561,13 +525,13 @@ export function Drawer({
     <dialog
       ref={mergeRefs(ref, dialogRef)}
       {...mergeProps(
-        themeProps('drawer', {side}),
+        themeProps('drawer', {side: anchoredSide}),
         stylex.props(
           styles.dialog,
           overlayPaddingReset.reset,
           sideStyle,
           dynamicStyles.inlineSize(widthValue, mobileWidth),
-          isOpen && styles.open,
+          isRendered && styles.rendered,
           isOpen && sideOpenStyle,
           hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ),
           hasScrim && isOpen && styles.scrimOpen,

package/src/Drawer/useDrawerDialogPresence.ts

@@ -0,0 +1,222 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native dialog presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - The native <dialog> `open` state keeps it in the top layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then `dialog.close()` and the React hide must happen in the same
+ * task. If the hide lands a frame later, a transformed ancestor becomes the
+ * containing block for the now-non-top-layer `position: fixed` panel and it
+ * paints back inside the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+
+import {
+  useEffect,
+  useRef,
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
+import {flushSync} from 'react-dom';
+
+/** Slack past the computed transition before the backstop gives up waiting. */
+const EXIT_BACKSTOP_BUFFER_MS = 50;
+
+/**
+ * Hold used when the transition duration cannot be read — an unresolved
+ * `var()` outside a real browser. Picking a fixed number would otherwise make
+ * an assumption about the consumer's theme.
+ */
+const EXIT_FALLBACK_MS = 250;
+
+type UseDrawerDialogPresenceOptions = {
+  dialogRef: RefObject<HTMLDialogElement | null>;
+  isOpen: boolean;
+  isModal: boolean;
+  setIsRendered: Dispatch<SetStateAction<boolean>>;
+};
+
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, opens the native dialog, and honours the
+ * component's `data-autofocus` contract. Closing waits for the actual
+ * transform transition (with a computed-duration backstop), then closes the
+ * native dialog and synchronously hides the panel before the browser can paint
+ * it outside the top layer. Unmount cleanup closes a dialog left open by React
+ * Activity or a removed subtree.
+ */
+export function useDrawerDialogPresence({
+  dialogRef,
+  isOpen,
+  isModal,
+  setIsRendered,
+}: UseDrawerDialogPresenceOptions): void {
+  // Element focused when the drawer opened — restored on close.
+  const triggerElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+
+    if (isOpen) {
+      if (!dialog.open) {
+        triggerElementRef.current =
+          document.activeElement as HTMLElement | null;
+        if (isModal) {
+          dialog.showModal();
+        } else {
+          dialog.show();
+        }
+        // React's autoFocus calls .focus() during commit, before the dialog is
+        // shown, so it silently fails — honour data-autofocus instead (same
+        // contract as Dialog).
+        dialog.querySelector<HTMLElement>('[data-autofocus]')?.focus();
+      }
+      return;
+    }
+
+    if (!dialog.open) {
+      return;
+    }
+
+    return waitForDrawerExit(dialog, () => {
+      dialog.close();
+      // flushSync, not a plain setState: React's default scheduling can land
+      // the commit after the next paint, and that one frame is exactly the
+      // bug — the panel paints outside the top layer. Both happen in this
+      // task, so the browser never gets to paint between them.
+      flushSync(() => {
+        setIsRendered(false);
+      });
+      // Return focus after close(): a modal dialog makes the rest of the
+      // document inert, so focusing the trigger before close() silently fails.
+      triggerElementRef.current?.focus();
+      triggerElementRef.current = null;
+    });
+  }, [dialogRef, isModal, isOpen, setIsRendered]);
+
+  // Close the native dialog on unmount if it is still open. When the drawer is
+  // mounted inside an <Activity> that flips to mode="hidden", React runs effect
+  // cleanups (with stale isOpen) instead of re-running the effect with
+  // isOpen=false. Leaving `open` set would skip showModal() on the next open.
+  // This is deliberately separate from the open/close effect: putting it in
+  // that cleanup would cut off every delayed slide-out.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog?.open) {
+        dialog.close();
+      }
+    };
+  }, [dialogRef]);
+}
+
+/**
+ * Wait for the panel's transform transition, with a computed-duration
+ * backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is
+ * authoritative, and the timeout only prevents a lost event from stranding an
+ * open dialog.
+ */
+function waitForDrawerExit(
+  element: HTMLDialogElement,
+  complete: () => void,
+): () => void {
+  let done = false;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const finish = () => {
+    if (done) {
+      return;
+    }
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+    complete();
+  };
+
+  const handleTransitionEnd = (event: TransitionEvent) => {
+    if (event.target === element && event.propertyName === 'transform') {
+      finish();
+    }
+  };
+
+  element.addEventListener('transitionend', handleTransitionEnd);
+  element.addEventListener('transitioncancel', handleTransitionEnd);
+
+  const transitionMs = readTransformTransitionMs(element);
+  timer = setTimeout(
+    finish,
+    (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS,
+  );
+
+  return () => {
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+  };
+}
+
+/** Read the transform transition's duration + delay from computed CSS. */
+function readTransformTransitionMs(element: HTMLElement): number | null {
+  const computed = window.getComputedStyle(element);
+  const properties = computed.transitionProperty
+    .split(',')
+    .map(value => value.trim());
+  const durations = parseTimes(computed.transitionDuration);
+  const delays = parseTimes(computed.transitionDelay);
+
+  if (
+    properties.length === 0 ||
+    durations.length === 0 ||
+    delays.length === 0 ||
+    durations.includes(null) ||
+    delays.includes(null)
+  ) {
+    return null;
+  }
+
+  return properties.reduce((longest, property, index) => {
+    if (property !== 'transform' && property !== 'all') {
+      return longest;
+    }
+    const duration = durations[index % durations.length];
+    const delay = delays[index % delays.length];
+    return Math.max(longest, (duration ?? 0) + (delay ?? 0));
+  }, 0);
+}
+
+function parseTimes(value: string): Array<number | null> {
+  return value.split(',').map(part => {
+    const trimmed = part.trim();
+    const time = Number.parseFloat(trimmed);
+    if (!Number.isFinite(time)) {
+      return null;
+    }
+    if (trimmed.endsWith('ms')) {
+      return time;
+    }
+    return trimmed.endsWith('s') ? time * 1000 : null;
+  });
+}

package/src/TransferList/TransferList.test.tsx

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

package/src/TransferList/TransferList.tsx

@@ -26,6 +26,7 @@ import {
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  type SVGProps,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {flushSync} from 'react-dom';
@@ -44,6 +45,7 @@ import {useTranslator} from '@astryxdesign/core/i18n';
 import {
   borderVars,
   colorVars,
+  sizeVars,
   spacingVars,
   typeScaleVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
@@ -56,57 +58,36 @@ import {
 import {reorderStyles} from '../reorderStyles';
 import {transferListVars} from './tokens.stylex';
 
-function PlusIcon() {
+// Lucide glyphs the shared icon registry does not carry (there is no `add` or
+// `grip` semantic name). Typed as icon components and rendered through `Icon`
+// so sizing, colour and a11y come from the icon pipeline rather than a raw
+// inline `<svg>`. Removal reuses the registry `close` glyph instead.
+function PlusIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      className="lucide lucide-plus"
-      width={16}
-      height={16}
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      aria-hidden>
+      {...props}>
       <path d="M5 12h14" />
       <path d="M12 5v14" />
     </svg>
   );
 }
 
-function RemoveIcon() {
+function GripVerticalIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      className="lucide lucide-x"
-      width={16}
-      height={16}
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      aria-hidden>
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
-
-function GripVerticalIcon() {
-  return (
-    <svg
-      className="lucide lucide-grip-vertical"
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden>
+      {...props}>
       <circle cx="9" cy="5" r="1" />
       <circle cx="9" cy="12" r="1" />
       <circle cx="9" cy="19" r="1" />
@@ -276,7 +257,13 @@ const styles = stylex.create({
     borderBlockEndColor: colorVars['--color-border'],
   },
   headerAction: {
+    // A text-link treatment, but the hit target still has to clear the WCAG
+    // 2.5.8 24px floor. The link keeps `height: auto` so its baseline aligns
+    // with the panel heading; `minBlockSize` gives the button a >=24px target
+    // (the sm element height) without changing where the text sits, and the
+    // width already exceeds 24px.
     height: 'auto',
+    minBlockSize: sizeVars['--size-element-sm'],
     paddingBlock: 0,
     paddingInline: 0,
     borderRadius: 0,
@@ -1036,7 +1023,7 @@ export function TransferList<T extends string = string>({
       return (
         <IconButton
           label={t('@astryx.transferList.addOption', {label: option.label})}
-          icon={<PlusIcon />}
+          icon={<Icon icon={PlusIcon} size="sm" />}
           size="sm"
           variant="ghost"
           isDisabled={isTransferDisabled}
@@ -1049,7 +1036,7 @@ export function TransferList<T extends string = string>({
     return (
       <IconButton
         label={t('@astryx.transferList.removeOption', {label: option.label})}
-        icon={<RemoveIcon />}
+        icon={<Icon icon="close" size="sm" />}
         size="sm"
         variant="ghost"
         isDisabled={isTransferDisabled}
@@ -1096,7 +1083,7 @@ export function TransferList<T extends string = string>({
         label={t('@astryx.transferList.reorderOption', {label: option.label})}
         aria-describedby={reorderInstructionsId}
         aria-pressed={active}
-        icon={<GripVerticalIcon />}
+        icon={<Icon icon={GripVerticalIcon} size="sm" />}
         size="sm"
         variant="ghost"
         isDisabled={isReorderDisabled}
@@ -1346,7 +1333,7 @@ export function TransferList<T extends string = string>({
                         role="presentation"
                         {...stylex.props(styles.groupHeading)}>
                         <Text type="body" weight="bold" color="primary">
-                          {group || 'Other'}
+                          {group || t('@astryx.transferList.ungroupedLabel')}
                         </Text>
                       </li>
                     )}