From 60e8535abde83b7a7a7eaa5599496968ad0a1464 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 22 Sep 2025 09:17:19 -0700
Subject: [PATCH 1/6] fix: Fix collection dirty node tracking with suspense
 (#8892)

---
 .../@react-aria/collections/src/Document.ts    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/@react-aria/collections/src/Document.ts b/packages/@react-aria/collections/src/Document.ts
index 7c50285dcf2..453ce572404 100644
--- a/packages/@react-aria/collections/src/Document.ts
+++ b/packages/@react-aria/collections/src/Document.ts
@@ -461,16 +461,14 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
   }
 
   private removeNode(node: ElementNode<T>): void {
-    if (node.node == null) {
-      return;
-    }
-
     for (let child of node) {
       this.removeNode(child);
     }
 
-    let collection = this.getMutableCollection();
-    collection.removeNode(node.node.key);
+    if (node.node) {
+      let collection = this.getMutableCollection();
+      collection.removeNode(node.node.key);
+    }
   }
 
   /** Finalizes the collection update, updating all nodes and freezing the collection. */
@@ -508,12 +506,16 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
           this.addNode(element);
         }
 
+        if (element.node) {
+          this.dirtyNodes.delete(element);
+        }
+
         element.isMutated = false;
+      } else {
+        this.dirtyNodes.delete(element);
       }
     }
 
-    this.dirtyNodes.clear();
-
     // Finally, update the collection.
     if (this.nextCollection) {
       this.nextCollection.commit(this.firstVisibleChild?.node?.key ?? null, this.lastVisibleChild?.node?.key ?? null, this.isSSR);

From f1a021ec2dbaba345da10fac4e6691fb057f30ca Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 22 Sep 2025 10:02:55 -0700
Subject: [PATCH 2/6] fix: Improve behavior of modals on iOS 26 (#8888)

* Improve usePreventScroll focus behavior on iOS

* Make visual viewport size update before keyboard animation

* Update modals and trays to extend underlay behind browser UI

* Fix S2 docs header appearing above modals

* fix removing event

* Clamp scroll position to prevent over-scrolling

* Prevent scrolling the whole page when programmatically focusing

* Avoid setting size on blur too early

* Example app fix

* Ensure temporary input has attributes that might affect keyboard size

* typo

* Fix scroll into view calculation when the address bar is collapsed

* Try removing the hidden input entirely
---
 .../components/tray/index.css                 |  13 +-
 .../components/underlay/index.css             |   3 +-
 .../@react-aria/dialog/docs/useDialog.mdx     |  22 ++-
 .../overlays/docs/useModalOverlay.mdx         |  22 ++-
 .../overlays/src/usePreventScroll.ts          | 177 +++++++-----------
 packages/@react-aria/utils/src/index.ts       |   2 +-
 packages/@react-aria/utils/src/keyboard.tsx   |  21 +++
 .../@react-aria/utils/src/useViewportSize.ts  |  25 +++
 .../@react-spectrum/overlays/src/Tray.tsx     |   6 +-
 .../@react-spectrum/overlays/src/Underlay.tsx |  10 +-
 packages/@react-spectrum/s2/src/Dialog.tsx    |   7 +-
 .../s2/src/FullscreenDialog.tsx               |   2 +-
 packages/@react-spectrum/s2/src/Modal.tsx     | 170 +++++++++--------
 .../docs/pages/react-aria/home/ExampleApp.tsx |  27 ++-
 packages/dev/s2-docs/src/Layout.tsx           | 157 ++++++++--------
 packages/react-aria-components/docs/Modal.mdx |  31 +--
 .../docs/examples/command-palette.mdx         |  62 +++---
 .../docs/examples/destructive-dialog.mdx      |   8 +-
 packages/react-aria-components/src/Modal.tsx  |   3 +-
 starters/docs/src/Modal.css                   |  13 +-
 starters/docs/src/Sheet.css                   |  19 +-
 starters/tailwind/src/Modal.tsx               |   6 +-
 22 files changed, 458 insertions(+), 348 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tray/index.css b/packages/@adobe/spectrum-css-temp/components/tray/index.css
index cd58246a1eb..b82f9ae6250 100644
--- a/packages/@adobe/spectrum-css-temp/components/tray/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tray/index.css
@@ -20,14 +20,13 @@
 
 .spectrum-Tray-wrapper {
   inset-inline-start: 0;
-  /* Positioned at the top of the window */
-  position: fixed;
+  position: absolute;
   top: 0;
 
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
 
   /* Don't catch clicks */
   pointer-events: none;
@@ -55,10 +54,12 @@
   max-height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
   /* Add padding at the bottom to account for the rest of the viewport height behind the keyboard.
    * This is necessary so that there isn't a visible gap that appears while the keyboard is animating
-   * in and out. Fall back to the safe area inset to account for things like iOS home indicator. */
-  padding-bottom: max(calc(100vh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom));
+   * in and out. Fall back to the safe area inset to account for things like iOS home indicator.
+     We also add an additional 100vh of padding (offset by the bottom position below) so the tray 
+     extends behind Safari's address bar and keyboard in iOS 26. */
+  padding-bottom: calc(max(calc(100dvh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom)) + 100vh);
   position: absolute;
-  bottom: 0;
+  bottom: -100vh;
   outline: none;
   display: flex;
   flex-direction: column;
diff --git a/packages/@adobe/spectrum-css-temp/components/underlay/index.css b/packages/@adobe/spectrum-css-temp/components/underlay/index.css
index 95de662061b..82da0097342 100644
--- a/packages/@adobe/spectrum-css-temp/components/underlay/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/underlay/index.css
@@ -23,7 +23,8 @@ governing permissions and limitations under the License.
 .spectrum-Underlay {
   composes: spectrum-overlay;
 
-  position: fixed;
+  /* Use position: absolute instead of fixed to avoid being clipped to the "inner" viewport in iOS 26 */
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/packages/@react-aria/dialog/docs/useDialog.mdx b/packages/@react-aria/dialog/docs/useDialog.mdx
index b206ed281ff..58a006f6f8c 100644
--- a/packages/@react-aria/dialog/docs/useDialog.mdx
+++ b/packages/@react-aria/dialog/docs/useDialog.mdx
@@ -131,6 +131,7 @@ The `Modal` and `ModalTrigger` components render the dialog within a typical mod
 ```tsx example export=true render=false
 import {useOverlayTriggerState} from '@react-stately/overlays';
 import {Overlay, useModalOverlay, useOverlayTrigger} from '@react-aria/overlays';
+import {useViewportSize} from '@react-aria/utils';
 
 function Modal({state, children, ...props}) {
   let ref = React.useRef(null);
@@ -140,18 +141,27 @@ function Modal({state, children, ...props}) {
     <Overlay>
       <div
         style={{
-          position: 'fixed',
+          position: 'absolute',
           zIndex: 100,
           top: 0,
           left: 0,
-          bottom: 0,
-          right: 0,
-          background: 'rgba(0, 0, 0, 0.5)',
+          width: '100%',
+          height: document.body.clientHeight,
+          background: 'rgba(0, 0, 0, 0.5)'
+        }}
+        {...underlayProps} />
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: useViewportSize().height + 'px',
+          zIndex: 101,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
-        }}
-        {...underlayProps}>
+        }}>
         <div
           {...modalProps}
           ref={ref}
diff --git a/packages/@react-aria/overlays/docs/useModalOverlay.mdx b/packages/@react-aria/overlays/docs/useModalOverlay.mdx
index 8b43b9be036..a60b08a8457 100644
--- a/packages/@react-aria/overlays/docs/useModalOverlay.mdx
+++ b/packages/@react-aria/overlays/docs/useModalOverlay.mdx
@@ -75,6 +75,7 @@ The `Modal` component uses an &lt;<TypeLink links={docs.links} type={docs.export
 
 ```tsx example export=true render=false
 import {Overlay, useModalOverlay} from '@react-aria/overlays';
+import {useViewportSize} from '@react-aria/utils';
 
 function Modal({state, children, ...props}) {
   let ref = React.useRef(null);
@@ -84,18 +85,27 @@ function Modal({state, children, ...props}) {
     <Overlay>
       <div
         style={{
-          position: 'fixed',
+          position: 'absolute',
           zIndex: 100,
           top: 0,
           left: 0,
-          bottom: 0,
-          right: 0,
-          background: 'rgba(0, 0, 0, 0.5)',
+          width: '100%',
+          height: document.body.clientHeight,
+          background: 'rgba(0, 0, 0, 0.5)'
+        }}
+        {...underlayProps} />
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: useViewportSize().height + 'px',
+          zIndex: 101,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
-        }}
-        {...underlayProps}>
+        }}>
         <div
           {...modalProps}
           ref={ref}
diff --git a/packages/@react-aria/overlays/src/usePreventScroll.ts b/packages/@react-aria/overlays/src/usePreventScroll.ts
index d60629373a1..88bbb44bea3 100644
--- a/packages/@react-aria/overlays/src/usePreventScroll.ts
+++ b/packages/@react-aria/overlays/src/usePreventScroll.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, isIOS, useLayoutEffect} from '@react-aria/utils';
+import {chain, getScrollParent, isIOS, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -19,19 +19,6 @@ interface PreventScrollOptions {
 
 const visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
-// HTML input types that do not cause the software keyboard to appear.
-const nonTextInputTypes = new Set([
-  'checkbox',
-  'radio',
-  'range',
-  'color',
-  'file',
-  'image',
-  'button',
-  'submit',
-  'reset'
-]);
-
 // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let preventScrollCount = 0;
 let restore;
@@ -100,32 +87,32 @@ function preventScrollStandard() {
 //    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
 //    by preventing default in a `touchmove` event.
 // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
-// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
-//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
-//    into view ourselves, without scrolling the whole page.
-// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
-//    same visually, but makes the actual scroll position always zero. This is required to make all of the
-//    above work or Safari will still try to scroll the page when focusing an input.
-// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
-//    to navigate to an input with the next/previous buttons that's outside a modal.
+// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents 
+//    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
+//    ourselves, without scrolling the whole page.
 function preventScrollMobileSafari() {
   let scrollable: Element;
-  let restoreScrollableStyles;
   let onTouchStart = (e: TouchEvent) => {
     // Store the nearest scrollable parent element from the element that the user touched.
     scrollable = getScrollParent(e.target as Element, true);
     if (scrollable === document.documentElement && scrollable === document.body) {
       return;
     }
-
-    // Prevent scrolling up when at the top and scrolling down when at the bottom
-    // of a nested scrollable area, otherwise mobile Safari will start scrolling
-    // the window instead.
-    if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === 'auto') {
-      restoreScrollableStyles = setStyle(scrollable, 'overscrollBehavior', 'contain');
-    }
   };
 
+  // Prevent scrolling up when at the top and scrolling down when at the bottom
+  // of a nested scrollable area, otherwise mobile Safari will start scrolling
+  // the window instead.
+  // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
+  let style = document.createElement('style');
+  style.textContent = `
+@layer {
+  * {
+    overscroll-behavior: contain;
+  }
+}`.trim();
+  document.head.prepend(style);
+
   let onTouchMove = (e: TouchEvent) => {
     // Prevent scrolling the window.
     if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
@@ -144,86 +131,48 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let onTouchEnd = () => {
-    if (restoreScrollableStyles) {
-      restoreScrollableStyles();
-    }
-  };
-
-  let onFocus = (e: FocusEvent) => {
+  let onBlur = (e: FocusEvent) => {
     let target = e.target as HTMLElement;
-    if (willOpenKeyboard(target)) {
-      setupStyles();
-
-      // Apply a transform to trick Safari into thinking the input is at the top of the page
-      // so it doesn't try to scroll it into view.
-      target.style.transform = 'translateY(-2000px)';
-      requestAnimationFrame(() => {
-        target.style.transform = '';
-
-        // This will have prevented the browser from scrolling the focused element into view,
-        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
-        if (visualViewport) {
-          if (visualViewport.height < window.innerHeight) {
-            // If the keyboard is already visible, do this after one additional frame
-            // to wait for the transform to be removed.
-            requestAnimationFrame(() => {
-              scrollIntoView(target);
-            });
-          } else {
-            // Otherwise, wait for the visual viewport to resize before scrolling so we can
-            // measure the correct position to scroll to.
-            visualViewport.addEventListener('resize', () => scrollIntoView(target), {once: true});
-          }
-        }
-      });
+    let relatedTarget = e.relatedTarget as HTMLElement | null;
+    if (relatedTarget && willOpenKeyboard(relatedTarget)) {
+      // Focus without scrolling the whole page, and then scroll into view manually.
+      relatedTarget.focus({preventScroll: true});
+      scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
+    } else if (!relatedTarget) {
+      // When tapping the Done button on the keyboard, focus moves to the body.
+      // FocusScope will then restore focus back to the input. Later when tapping
+      // the same input again, it is already focused, so no blur event will fire,
+      // resulting in the flow above never running and Safari's native scrolling occurring.
+      // Instead, move focus to the parent focusable element (e.g. the dialog).
+      let focusable = target.parentElement?.closest('[tabindex]') as HTMLElement | null;
+      focusable?.focus({preventScroll: true});
     }
   };
 
-  let restoreStyles: null | (() => void) = null;
-  let setupStyles = () => {
-    if (restoreStyles) {
-      return;
-    }
-
-    let onWindowScroll = () => {
-      // Last resort. If the window scrolled, scroll it back to the top.
-      // It should always be at the top because the body will have a negative margin (see below).
-      window.scrollTo(0, 0);
-    };
-
-    // Record the original scroll position so we can restore it.
-    // Then apply a negative margin to the body to offset it by the scroll position. This will
-    // enable us to scroll the window to the top, which is required for the rest of this to work.
-    let scrollX = window.pageXOffset;
-    let scrollY = window.pageYOffset;
+  // Override programmatic focus to scroll into view without scrolling the whole page.
+  let focus = HTMLElement.prototype.focus;
+  HTMLElement.prototype.focus = function (opts) {
+    // Track whether the keyboard was already visible before.
+    let wasKeyboardVisible = document.activeElement != null && willOpenKeyboard(document.activeElement);
 
-    restoreStyles = chain(
-      addEvent(window, 'scroll', onWindowScroll),
-      setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
-      setStyle(document.documentElement, 'overflow', 'hidden'),
-      setStyle(document.body, 'marginTop', `-${scrollY}px`),
-      () => {
-        window.scrollTo(scrollX, scrollY);
-      }
-    );
+    // Focus the element without scrolling the page.
+    focus.call(this, {...opts, preventScroll: true});
 
-    // Scroll to the top. The negative margin on the body will make this appear the same.
-    window.scrollTo(0, 0);
+    if (!opts || !opts.preventScroll) {
+      scrollIntoViewWhenReady(this, wasKeyboardVisible);
+    }
   };
 
   let removeEvents = chain(
     addEvent(document, 'touchstart', onTouchStart, {passive: false, capture: true}),
     addEvent(document, 'touchmove', onTouchMove, {passive: false, capture: true}),
-    addEvent(document, 'touchend', onTouchEnd, {passive: false, capture: true}),
-    addEvent(document, 'focus', onFocus, true)
+    addEvent(document, 'blur', onBlur, true)
   );
 
   return () => {
-    // Restore styles and scroll the page back to where it was.
-    restoreScrollableStyles?.();
-    restoreStyles?.();
     removeEvents();
+    style.remove();
+    HTMLElement.prototype.focus = focus;
   };
 }
 
@@ -253,6 +202,17 @@ function addEvent<K extends keyof GlobalEventHandlersEventMap>(
   };
 }
 
+function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean) {
+  if (wasKeyboardVisible || !visualViewport) {
+    // If the keyboard was already visible, scroll the target into view immediately.
+    scrollIntoView(target);
+  } else {
+    // Otherwise, wait for the visual viewport to resize before scrolling so we can
+    // measure the correct position to scroll to.
+    visualViewport.addEventListener('resize', () => scrollIntoView(target), {once: true});
+  }
+}
+
 function scrollIntoView(target: Element) {
   let root = document.scrollingElement || document.documentElement;
   let nextTarget: Element | null = target;
@@ -260,21 +220,24 @@ function scrollIntoView(target: Element) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
     let scrollable = getScrollParent(nextTarget);
     if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
-      let scrollableTop = scrollable.getBoundingClientRect().top;
-      let targetTop = nextTarget.getBoundingClientRect().top;
-      if (targetTop > scrollableTop + nextTarget.clientHeight) {
-        scrollable.scrollTop += targetTop - scrollableTop;
+      let scrollableRect = scrollable.getBoundingClientRect();
+      let targetRect = nextTarget.getBoundingClientRect();
+      if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+        let bottom = scrollableRect.bottom;
+        if (visualViewport) {
+          bottom = Math.min(bottom, visualViewport.offsetTop + visualViewport.height);
+        }
+
+        // Center within the viewport.
+        let adjustment = (targetRect.top - scrollableRect.top) - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+        scrollable.scrollTo({
+          // Clamp to the valid range to prevent over-scrolling.
+          top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
+          behavior: 'smooth'
+        });
       }
     }
 
     nextTarget = scrollable.parentElement;
   }
 }
-
-function willOpenKeyboard(target: Element) {
-  return (
-    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
-  );
-}
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index 530c5fa6d6c..9da3461dd5b 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -48,7 +48,7 @@ export {useLoadMore} from './useLoadMore';
 export {useLoadMoreSentinel, useLoadMoreSentinel as UNSTABLE_useLoadMoreSentinel} from './useLoadMoreSentinel';
 export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
-export {isCtrlKeyPressed} from './keyboard';
+export {isCtrlKeyPressed, willOpenKeyboard} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
 
diff --git a/packages/@react-aria/utils/src/keyboard.tsx b/packages/@react-aria/utils/src/keyboard.tsx
index b33bf452a7c..aac7cd38d4a 100644
--- a/packages/@react-aria/utils/src/keyboard.tsx
+++ b/packages/@react-aria/utils/src/keyboard.tsx
@@ -25,3 +25,24 @@ export function isCtrlKeyPressed(e: Event): boolean {
 
   return e.ctrlKey;
 }
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset'
+]);
+
+export function willOpenKeyboard(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}
diff --git a/packages/@react-aria/utils/src/useViewportSize.ts b/packages/@react-aria/utils/src/useViewportSize.ts
index 71d7625b15d..2a369a82356 100644
--- a/packages/@react-aria/utils/src/useViewportSize.ts
+++ b/packages/@react-aria/utils/src/useViewportSize.ts
@@ -12,6 +12,7 @@
 
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
+import {willOpenKeyboard} from './keyboard';
 
 interface ViewportSize {
   width: number,
@@ -36,6 +37,28 @@ export function useViewportSize(): ViewportSize {
       });
     };
 
+    // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
+    // We can anticipate this and resize early by handling the blur event and using the layout size.
+    let frame: number;
+    let onBlur = (e: FocusEvent) => {
+      if (willOpenKeyboard(e.target as Element)) {
+        // Wait one frame to see if a new element gets focused.
+        frame = requestAnimationFrame(() => {
+          if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
+            setSize(size => {
+              let newSize = {width: window.innerWidth, height: window.innerHeight};
+              if (newSize.width === size.width && newSize.height === size.height) {
+                return size;
+              }
+              return newSize;
+            });
+          }
+        });
+      }
+    };
+
+    window.addEventListener('blur', onBlur, true);
+
     if (!visualViewport) {
       window.addEventListener('resize', onResize);
     } else {
@@ -43,6 +66,8 @@ export function useViewportSize(): ViewportSize {
     }
 
     return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('blur', onBlur, true);
       if (!visualViewport) {
         window.removeEventListener('resize', onResize);
       } else {
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 28f70d2c313..2d72318d72d 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -72,7 +72,11 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRe
   // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
   let viewport = useViewportSize();
   let wrapperStyle: any = {
-    '--spectrum-visual-viewport-height': viewport.height + 'px'
+    '--spectrum-visual-viewport-height': viewport.height + 'px',
+    // position: fixed elements are clipped by Safari on iOS 26, so we use
+    // position: absolute and manually set the top to the scrollY.
+    // The page can't scroll while the tray is open so this doesn't need to update.
+    top: typeof window !== 'undefined' ? window.scrollY : 0
   };
 
   let wrapperClassName = classNames(
diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index d31ede0c542..646eff6d7a0 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Underlay.tsx
@@ -21,6 +21,14 @@ interface UnderlayProps {
 
 export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
   return (
-    <div data-testid="underlay" {...otherProps} className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
+    <div
+      data-testid="underlay"
+      {...otherProps}
+      // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
+      style={{height: isOpen && typeof document !== 'undefined' ? document.body.clientHeight : undefined}}
+      className={classNames(underlayStyles, 'spectrum-Underlay', {
+        'is-open': isOpen,
+        'spectrum-Underlay--transparent': isTransparent
+      })} />
   );
 }
diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index a158d4574bd..bc7bdaf7e05 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -57,10 +57,13 @@ const header = style({
 
 const content =  style({
   flexGrow: 1,
+  flexShrink: {
+    [`@container (height < ${500 / 16}rem)`]: 0
+  },
   overflowY: {
     default: 'auto',
-    // Make the whole dialog scroll rather than only the content when the height it small.
-    [`@media (height < ${400 / 16}rem)`]: 'visible'
+    // Make the whole dialog scroll rather than only the content when the height is small.
+    [`@container (height < ${500 / 16}rem)`]: 'visible'
   },
   font: 'body',
   // TODO: adjust margin on mobile?
diff --git a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
index bc54c8cc0a4..fc2a3c8c02f 100644
--- a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
+++ b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
@@ -52,7 +52,7 @@ const content =  style({
   overflowY: {
     default: 'auto',
     // Make the whole dialog scroll rather than only the content when the height it small.
-    [`@media (height < ${400 / 16}rem)`]: 'visible'
+    [`@container (height < ${400 / 16}rem)`]: 'visible'
   },
   font: 'body'
 });
diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index 67913f99699..7a579a90601 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -29,13 +29,13 @@ interface ModalProps extends ModalOverlayProps {
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'fixed',
-  inset: 0,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--page-height',
   isolation: 'isolate',
   backgroundColor: 'transparent-black-500',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
   opacity: {
     isEntering: 0,
     isExiting: 0
@@ -47,6 +47,22 @@ const modalOverlayStyles = style({
   }
 });
 
+const modalWrapper = style({
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--visual-viewport-height',
+  display: 'flex',
+  alignItems: {
+    default: 'center',
+    size: {
+      fullscreenTakeover: 'start'
+    }
+  },
+  justifyContent: 'center'
+});
+
 /**
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
@@ -68,74 +84,82 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
     <ModalOverlay
       {...props}
       className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>
-      <RACModal
-        {...props}
-        ref={modalRef}
-        className={renderProps => style({
-          display: 'flex',
-          flexDirection: 'column',
-          borderRadius: {
-            default: 'xl',
-            size: {
-              fullscreenTakeover: 'none'
-            }
-          },
-          width: {
-            size: {
-              // Copied from designs, not sure if correct.
-              S: 400,
-              M: 480,
-              L: 640,
-              fullscreen: 'calc(100% - 40px)',
-              fullscreenTakeover: 'full'
-            }
-          },
-          height: {
-            size: {
-              fullscreen: 'calc(100% - 40px)',
-              fullscreenTakeover: 'full'
-            }
-          },
-          maxWidth: {
-            default: '90vw',
-            size: {
-              fullscreen: 'none',
-              fullscreenTakeover: 'none'
-            }
-          },
-          maxHeight: {
-            default: '90vh',
-            size: {
-              fullscreen: 'none',
-              fullscreenTakeover: 'none'
-            }
-          },
-          '--s2-container-bg': {
-            type: 'backgroundColor',
-            value: 'layer-2'
-          },
-          backgroundColor: '--s2-container-bg',
-          opacity: {
-            isEntering: 0,
-            isExiting: 0
-          },
-          translateY: {
-            isEntering: 20
-          },
-          transition: '[opacity, translate]',
-          transitionDuration: {
-            default: 250,
-            isExiting: 130
-          },
-          transitionDelay: {
-            default: 160,
-            isExiting: 0
-          },
-          // Transparent outline for WHCM.
-          outlineStyle: 'solid',
-          outlineWidth: 1,
-          outlineColor: 'transparent'
-        })({...renderProps, size: props.size})} />
+      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>
+        <RACModal
+          {...props}
+          ref={modalRef}
+          className={renderProps => style({
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: {
+              default: 'xl',
+              size: {
+                fullscreenTakeover: 'none'
+              }
+            },
+            width: {
+              size: {
+                // Copied from designs, not sure if correct.
+                S: 400,
+                M: 480,
+                L: 640,
+                fullscreen: 'calc(100% - 40px)',
+                fullscreenTakeover: 'full'
+              }
+            },
+            height: {
+              size: {
+                fullscreen: 'calc(100% - 40px)',
+                fullscreenTakeover: 'full'
+              }
+            },
+            maxWidth: {
+              default: '90vw',
+              size: {
+                fullscreen: 'none',
+                fullscreenTakeover: 'none'
+              }
+            },
+            maxHeight: {
+              default: '90%',
+              size: {
+                fullscreen: 'none',
+                fullscreenTakeover: 'none'
+              }
+            },
+            paddingBottom: {
+              size: {
+                // Extend background behind the iOS Safari toolbar and keyboard.
+                fullscreenTakeover: '[100vh]'
+              }
+            },
+            '--s2-container-bg': {
+              type: 'backgroundColor',
+              value: 'layer-2'
+            },
+            backgroundColor: '--s2-container-bg',
+            opacity: {
+              isEntering: 0,
+              isExiting: 0
+            },
+            translateY: {
+              isEntering: 20
+            },
+            transition: '[opacity, translate]',
+            transitionDuration: {
+              default: 250,
+              isExiting: 130
+            },
+            transitionDelay: {
+              default: 160,
+              isExiting: 0
+            },
+            // Transparent outline for WHCM.
+            outlineStyle: 'solid',
+            outlineWidth: 1,
+            outlineColor: 'transparent'
+          })({...renderProps, size: props.size})} />
+      </div>
     </ModalOverlay>
   );
 });
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index 8a4f6366d36..14b8a028341 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -502,8 +502,10 @@ function PlantModal(props: ModalOverlayProps) {
   return (
     <ModalOverlay
       {...props}
+      // Use position: absolute instead of fixed to avoid
+      // being clipped to the "inner" viewport in iOS 26
       className={({isEntering, isExiting}) => `
-      fixed top-0 left-0 w-full h-(--visual-viewport-height) isolate z-20 bg-black/[15%] flex items-center justify-center p-4 text-center backdrop-blur-lg
+      absolute top-0 left-0 w-full h-(--page-height) isolate z-20 bg-black/[15%] backdrop-blur-lg
       ${isEntering ? 'animate-in fade-in duration-200 ease-out' : ''}
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
@@ -526,14 +528,21 @@ function PlantModal(props: ModalOverlayProps) {
             </svg>
           </div>
         }
-        <RACModal
-          {...props}
-          ref={ref}
-          className={({isEntering, isExiting}) => `
-          w-full max-w-md max-h-full overflow-auto rounded-2xl bg-white dark:bg-zinc-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:!bg-[Canvas] p-6 text-left align-middle shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10
-          ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
-          ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
-        `} />
+        {/* Inner position: sticky div sized to the visual viewport
+            height so the modal appears in view.
+            Note that position: fixed will not work here because this
+            is positioned relative to the containing block, which is
+            the ModalOverlay in this case due to backdrop-blur. */}
+        <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 text-center">
+          <RACModal
+            {...props}
+            ref={ref}
+            className={({isEntering, isExiting}) => `
+            w-full max-w-md max-h-full overflow-auto rounded-2xl bg-white dark:bg-zinc-800/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:!bg-[Canvas] p-6 text-left align-middle shadow-2xl bg-clip-padding border border-black/10 dark:border-white/10
+            ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
+            ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
+          `} />
+        </div>
       </>)}
     </ModalOverlay>
   );
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 93e3b0ea294..2b35bce30d5 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -87,91 +87,98 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
       </head>
       <body
         className={style({
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          maxWidth: {
-            default: 'full',
-            lg: 1280
-          },
-          marginX: 'auto',
-          marginY: 0,
-          padding: {
-            default: 0,
-            lg: 12
-          },
-          paddingBottom: 0,
-          gap: {
-            default: 0,
-            lg: 12
-          },
+          margin: 0,
+          padding: 0,
           overscrollBehavior: {
             default: 'auto',
             lg: 'none'
           }
         })}>
-        <Header pages={pages} currentPage={currentPage} />
-        <MobileHeader
-          toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
-          nav={<MobileNav key="nav" pages={pages} currentPage={currentPage} />} />
-        <div className={style({display: 'flex', width: 'full'})}>
-          <Nav pages={pages} currentPage={currentPage} />
-          <main 
-            key={currentPage.url}
-            style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
-            className={style({
-              isolation: 'isolate',
-              backgroundColor: 'base',
-              padding: {
-                default: 12,
-                lg: 40
-              },
-              borderRadius: {
-                default: 'none',
-                lg: 'xl'
-              },
-              boxShadow: {
-                lg: 'emphasized'
-              },
-              width: 'full',
-              boxSizing: 'border-box',
-              flexGrow: 1,
-              display: 'flex',
-              justifyContent: 'space-between',
-              position: 'relative',
-              height: {
-                lg: '[calc(100vh - 72px)]'
-              },
-              overflow: {
-                lg: 'auto'
-              }
-            })}>
-            <article
+        <div
+          className={style({
+            isolation: 'isolate',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            maxWidth: {
+              default: 'full',
+              lg: 1280
+            },
+            marginX: 'auto',
+            marginY: 0,
+            padding: {
+              default: 0,
+              lg: 12
+            },
+            paddingBottom: 0,
+            gap: {
+              default: 0,
+              lg: 12
+            }
+          })}>
+          <Header pages={pages} currentPage={currentPage} />
+          <MobileHeader
+            toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
+            nav={<MobileNav key="nav" pages={pages} currentPage={currentPage} />} />
+          <div className={style({display: 'flex', width: 'full'})}>
+            <Nav pages={pages} currentPage={currentPage} />
+            <main 
+              key={currentPage.url}
+              style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
               className={style({
-                maxWidth: 768,
+                isolation: 'isolate',
+                backgroundColor: 'base',
+                padding: {
+                  default: 12,
+                  lg: 40
+                },
+                borderRadius: {
+                  default: 'none',
+                  lg: 'xl'
+                },
+                boxShadow: {
+                  lg: 'emphasized'
+                },
                 width: 'full',
-                height: 'fit'
-              })}>
-              {React.cloneElement(children, {components})}
-            </article>
-            <aside
-              className={style({
-                position: 'sticky',
-                top: 0,
-                height: 'fit',
-                maxHeight: 'screen',
-                overflow: 'auto',
-                paddingY: 32,
                 boxSizing: 'border-box',
-                display: {
-                  default: 'none',
-                  lg: 'block'
+                flexGrow: 1,
+                display: 'flex',
+                justifyContent: 'space-between',
+                position: 'relative',
+                height: {
+                  lg: '[calc(100vh - 72px)]'
+                },
+                overflow: {
+                  lg: 'auto'
                 }
               })}>
-              <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
-              <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
-            </aside>
-          </main>
+              <article
+                className={style({
+                  maxWidth: 768,
+                  width: 'full',
+                  height: 'fit'
+                })}>
+                {React.cloneElement(children, {components})}
+              </article>
+              <aside
+                className={style({
+                  position: 'sticky',
+                  top: 0,
+                  height: 'fit',
+                  maxHeight: 'screen',
+                  overflow: 'auto',
+                  paddingY: 32,
+                  boxSizing: 'border-box',
+                  display: {
+                    default: 'none',
+                    lg: 'block'
+                  }
+                })}>
+                <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
+                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
+              </aside>
+            </main>
+          </div>
         </div>
       </body>
     </Provider>
diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx
index 4192f55878b..eabc05c0d27 100644
--- a/packages/react-aria-components/docs/Modal.mdx
+++ b/packages/react-aria-components/docs/Modal.mdx
@@ -80,15 +80,12 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
 @import "@react-aria/example-theme";
 
 .react-aria-ModalOverlay {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
-  height: var(--visual-viewport-height);
+  height: var(--page-height);
   background: rgba(0 0 0 / .5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   z-index: 100;
 
   &[data-entering] {
@@ -101,12 +98,18 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
 }
 
 .react-aria-Modal {
+  position: fixed;
+  max-height: var(--visual-viewport-height);
+  top: calc(var(--visual-viewport-height) / 2);
+  left: 50%;
+  translate: -50% -50%;
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
   border-radius: 6px;
   background: var(--overlay-background);
   color: var(--text-color);
   border: 1px solid var(--gray-400);
   outline: none;
+  width: max-content;
   max-width: 300px;
 
   &[data-entering] {
@@ -241,8 +244,11 @@ import {ModalOverlay} from 'react-aria-components';
 
 ```css
 .my-overlay {
-  position: fixed;
-  inset: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--page-height);
   background: rgba(45 0 0 / .3);
   backdrop-filter: blur(10px);
 
@@ -256,11 +262,14 @@ import {ModalOverlay} from 'react-aria-components';
 }
 
 .my-modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  position: sticky;
+  left: 0;
   width: 300px;
+  /* Extra padding to account for iOS floating browser UI. */
+  top: -100px;
+  height: calc(100dvh + 200px);
+  padding: 100px 0;
+  margin-left: auto;
   background: var(--overlay-background);
   outline: none;
   border-left: 1px solid var(--border-color);
diff --git a/packages/react-aria-components/docs/examples/command-palette.mdx b/packages/react-aria-components/docs/examples/command-palette.mdx
index 46b8363e30f..7f737fda4f4 100644
--- a/packages/react-aria-components/docs/examples/command-palette.mdx
+++ b/packages/react-aria-components/docs/examples/command-palette.mdx
@@ -101,40 +101,42 @@ function CommandPaletteExample() {
         <ModalOverlay
           isDismissable
           className={({ isEntering, isExiting }) => `
-          fixed inset-0 z-10 overflow-y-auto bg-black/25 flex min-h-full items-start sm:items-center justify-center p-4 text-center
+          absolute top-0 left-0 w-full h-(--page-height) z-10 bg-black/25
           ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''}
           ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
         `}
         >
-          <Modal
-            className={({ isEntering, isExiting }) => `
-            ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
-            ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
-          `}
-          >
-            <Dialog className="outline-hidden relative">
-              <div className="flex flex-col gap-1 w-[95vw] sm:w-[500px] max-w-full rounded-xl bg-white shadow-lg p-2">
-                <Autocomplete filter={contains}>
-                  <TextField
-                    aria-label="Search commands"
-                    className="flex flex-col px-3 py-2 rounded-md outline-none placeholder-white/70"
-                  >
-                    <Input
-                      autoFocus
-                      placeholder="Search commands…"
-                      className="border-none py-2 px-3 leading-5 text-gray-900 bg-transparent outline-hidden text-base focus-visible:ring-2 focus-visible:ring-violet-500 rounded-lg"
-                    />
-                  </TextField>
-                  <Menu
-                    items={commands}
-                    className="mt-2 p-1 max-h-44 overflow-auto"
-                  >
-                    {({ label }) => <CommandItem>{label}</CommandItem>}
-                  </Menu>
-                </Autocomplete>
-              </div>
-            </Dialog>
-          </Modal>
+          <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-start sm:items-center justify-center p-4 box-border text-center">
+            <Modal
+              className={({ isEntering, isExiting }) => `
+              ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
+              ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
+            `}
+            >
+              <Dialog className="outline-hidden relative">
+                <div className="flex flex-col gap-1 w-[95vw] sm:w-[500px] max-w-full rounded-xl bg-white shadow-lg p-2">
+                  <Autocomplete filter={contains}>
+                    <TextField
+                      aria-label="Search commands"
+                      className="flex flex-col px-3 py-2 rounded-md outline-none placeholder-white/70"
+                    >
+                      <Input
+                        autoFocus
+                        placeholder="Search commands…"
+                        className="border-none py-2 px-3 leading-5 text-gray-900 bg-transparent outline-hidden text-base focus-visible:ring-2 focus-visible:ring-violet-500 rounded-lg"
+                      />
+                    </TextField>
+                    <Menu
+                      items={commands}
+                      className="mt-2 p-1 max-h-44 overflow-auto"
+                    >
+                      {({ label }) => <CommandItem>{label}</CommandItem>}
+                    </Menu>
+                  </Autocomplete>
+                </div>
+              </Dialog>
+            </Modal>
+          </div>
         </ModalOverlay>
       </DialogTrigger>
     </div>
diff --git a/packages/react-aria-components/docs/examples/destructive-dialog.mdx b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
index 2f172b5facc..af2ca11b8bc 100644
--- a/packages/react-aria-components/docs/examples/destructive-dialog.mdx
+++ b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
@@ -46,19 +46,19 @@ function ModalExample() {
       <DialogTrigger>
         <Button className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">Delete…</Button>
         <ModalOverlay className={({isEntering, isExiting}) => `
-          fixed inset-0 z-10 overflow-y-auto bg-black/25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
+          absolute top-0 left-0 w-full h-(--page-height) z-10 bg-black/25 backdrop-blur isolate
           ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''}
           ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
         `}>
           <Modal className={({isEntering, isExiting}) => `
-            w-full max-w-md overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl
+            sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border text-center
             ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
             ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
           `}>
-            <Dialog role="alertdialog" className="outline-hidden relative">
+            <Dialog role="alertdialog" className="max-w-md max-h-full overflow-hidden rounded-2xl bg-white p-6 box-border text-left align-middle shadow-xl outline-hidden relative">
               {({ close }) => (<>
                 <Heading slot="title" className="text-xxl font-semibold leading-6 my-0 text-slate-700">Delete folder</Heading>
-                <div className="w-6 h-6 text-red-500 absolute right-0 top-0 stroke-2"><AlertTriangle className="w-6 h-6" /></div>
+                <div className="w-6 h-6 text-red-500 absolute right-6 top-6 stroke-2"><AlertTriangle className="w-6 h-6" /></div>
                 <p className="mt-3 text-slate-500">
                   Are you sure you want to delete "Documents"? All contents will be permanently destroyed.
                 </p>
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index b53a1b1bb8f..22029961651 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -173,7 +173,8 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   let viewport = useViewportSize();
   let style = {
     ...renderProps.style,
-    '--visual-viewport-height': viewport.height + 'px'
+    '--visual-viewport-height': viewport.height + 'px',
+    '--page-height': typeof document !== 'undefined' ? document.body.clientHeight + 'px' : undefined
   };
 
   return (
diff --git a/starters/docs/src/Modal.css b/starters/docs/src/Modal.css
index b3467c8a304..9125a4713e0 100644
--- a/starters/docs/src/Modal.css
+++ b/starters/docs/src/Modal.css
@@ -1,15 +1,12 @@
 @import "./theme.css";
 
 .react-aria-ModalOverlay {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
-  height: var(--visual-viewport-height);
+  height: var(--page-height);
   background: rgba(0 0 0 / .5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   z-index: 100;
   font-family: system-ui;
   font-size: 0.875rem;
@@ -24,12 +21,18 @@
 }
 
 .react-aria-Modal {
+  position: sticky;
+  max-height: var(--visual-viewport-height);
+  top: calc(var(--visual-viewport-height) / 2);
+  margin-left: 50vw;
+  translate: -50% -50%;
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
   border-radius: 6px;
   background: var(--overlay-background);
   color: var(--text-color);
   border: 1px solid var(--gray-400);
   outline: none;
+  width: max-content;
   max-width: 300px;
 
   &[data-entering] {
diff --git a/starters/docs/src/Sheet.css b/starters/docs/src/Sheet.css
index f45ac22f247..1a221f4c92d 100644
--- a/starters/docs/src/Sheet.css
+++ b/starters/docs/src/Sheet.css
@@ -1,8 +1,12 @@
 .sheet-overlay {
-  position: fixed;
-  inset: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--page-height);
   background: rgba(0 0 0 / .3);
   backdrop-filter: blur(10px);
+  z-index: 100;
 
   &[data-entering] {
     animation: sheet-blur 300ms;
@@ -14,11 +18,14 @@
 }
 
 .sheet {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  position: sticky;
+  left: 0;
   width: 300px;
+  /* Extra padding to account for iOS floating browser UI. */
+  top: -100px;
+  height: calc(100dvh + 200px);
+  padding: 100px 0;
+  margin-left: auto;
   background: var(--overlay-background);
   outline: none;
   border-left: 1px solid var(--border-color);
diff --git a/starters/tailwind/src/Modal.tsx b/starters/tailwind/src/Modal.tsx
index dc0d660da21..d639592b53b 100644
--- a/starters/tailwind/src/Modal.tsx
+++ b/starters/tailwind/src/Modal.tsx
@@ -4,7 +4,7 @@ import { ModalOverlay, ModalOverlayProps, Modal as RACModal } from 'react-aria-c
 import { tv } from 'tailwind-variants';
 
 const overlayStyles = tv({
-  base: 'fixed top-0 left-0 w-full h-(--visual-viewport-height) isolate z-20 bg-black/[15%] flex items-center justify-center p-4 text-center backdrop-blur-lg',
+  base: 'absolute top-0 left-0 w-full h-(--page-height) isolate z-20 bg-black/[50%] text-center backdrop-blur-lg',
   variants: {
     isEntering: {
       true: 'animate-in fade-in duration-200 ease-out'
@@ -30,7 +30,9 @@ const modalStyles = tv({
 export function Modal(props: ModalOverlayProps) {
   return (
     <ModalOverlay {...props} className={overlayStyles}>
-      <RACModal {...props} className={modalStyles} />
+      <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border">
+        <RACModal {...props} className={modalStyles} />
+      </div>
     </ModalOverlay>
   );
 }

From abe2e952c5deb2d2943216bdc73af277497e6e64 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 22 Sep 2025 10:26:07 -0700
Subject: [PATCH 3/6] fix: Dont display disclosure panel content if isDisabled
 and isExpanded=false (#8893)

* fix: Dont display disclosure panel content if isDisabled and isExpanded=false

* make sure disabled disclosures arent expanded if provided isExpanded

this retains the old behavior on main
---
 .../disclosure/src/useDisclosure.ts           |  2 +-
 .../test/Disclosure.test.js                   | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/@react-aria/disclosure/src/useDisclosure.ts b/packages/@react-aria/disclosure/src/useDisclosure.ts
index d67a942e01d..e640b95af28 100644
--- a/packages/@react-aria/disclosure/src/useDisclosure.ts
+++ b/packages/@react-aria/disclosure/src/useDisclosure.ts
@@ -155,7 +155,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
       role: 'group',
       'aria-labelledby': triggerId,
       'aria-hidden': !state.isExpanded,
-      hidden: isSSR ? !state.isExpanded : undefined
+      hidden: (isSSR || isDisabled) ? (isDisabled || !state.isExpanded) : undefined
     }
   };
 }
diff --git a/packages/react-aria-components/test/Disclosure.test.js b/packages/react-aria-components/test/Disclosure.test.js
index 24504ae3928..56b8303d1fb 100644
--- a/packages/react-aria-components/test/Disclosure.test.js
+++ b/packages/react-aria-components/test/Disclosure.test.js
@@ -78,7 +78,7 @@ describe('Disclosure', () => {
   });
 
   it('should support disabled state', () => {
-    const {getByTestId, getByRole} = render(
+    const {getByTestId, getByRole, queryByText} = render(
       <Disclosure data-testid="disclosure" isDisabled>
         <Heading level={3}>
           <Button slot="trigger">Trigger</Button>
@@ -94,6 +94,25 @@ describe('Disclosure', () => {
     const button = getByRole('button');
     expect(button).toHaveAttribute('disabled');
     expect(button).toHaveAttribute('data-disabled', 'true');
+    const panel = queryByText('Content');
+    expect(panel).not.toBeVisible();
+  });
+
+  it('should not expand a disabled disclosure via isExpanded', () => {
+    const {getByTestId,  queryByText} = render(
+      <Disclosure data-testid="disclosure" isDisabled isExpanded>
+        <Heading level={3}>
+          <Button slot="trigger">Trigger</Button>
+        </Heading>
+        <DisclosurePanel>
+          <p>Content</p>
+        </DisclosurePanel>
+      </Disclosure>
+    );
+    const disclosure = getByTestId('disclosure');
+    expect(disclosure).toHaveAttribute('data-disabled', 'true');
+    const panel = queryByText('Content');
+    expect(panel).not.toBeVisible();
   });
 
   it('should support controlled isExpanded prop', async () => {
@@ -239,7 +258,7 @@ describe('Disclosure', () => {
     const menuTrigger = getByTestId('menu-trigger');
     expect(disclosure).not.toHaveAttribute('data-expanded');
     expect(panel).not.toBeVisible();
-    
+
     await user.click(menuTrigger);
     const menu = getByTestId('menu');
     expect(menu).toBeVisible();

From 2a75be4f82c51b13187a94149ea633c33c627591 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Tue, 23 Sep 2025 04:23:18 +1000
Subject: [PATCH 4/6] fix: hide notification badge when button is pending and
 other pending fixes (#8898)

* fix: hide notification badge when button is pending

* fix avatar action button pending layout shift

* fix XS size for pending
---
 .../@react-spectrum/s2/src/ActionButton.tsx   | 27 +++++++++++++++----
 .../@react-spectrum/s2/src/style-utils.ts     |  4 ++-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 09f390349d3..7d5cd63d0d9 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -238,6 +238,15 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   paddingX: {
     default: controlStyle.paddingX,
     [avatarOnly]: 0
+  },
+  // `control` sets this, but we need to override it for avatar only buttons.
+  '--iconMargin': {
+    type: 'marginStart',
+    value: {
+      default: fontRelative(-2),
+      [iconOnly]: 0,
+      [avatarOnly]: 0
+    }
   }
 }, getAllowedOverrides());
 
@@ -325,10 +334,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
               [AvatarContext, {
                 size: avatarSize[size],
                 styles: style({
-                  marginStart: {
-                    default: '--iconMargin',
-                    ':last-child': 0
-                  },
+                  marginStart: '--iconMargin',
                   flexShrink: 0,
                   order: 0
                 })
@@ -345,7 +351,17 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
                 staticColor: staticColor,
                 size: props.size === 'XS' ? undefined : props.size,
                 isDisabled: isDisabled,
-                styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})
+                styles: style({
+                  position: 'absolute',
+                  top: '--badgeTop',
+                  insetStart: '--badgePosition',
+                  marginTop: 'calc((self(height) * -1)/2)',
+                  marginStart: 'calc((self(height) * -1)/2)',
+                  opacity: {
+                    default: 1,
+                    isProgressVisible: 0
+                  }
+                })({isProgressVisible})
               }]
             ]}>
             {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
@@ -369,6 +385,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
                   styles={style({
                     size: {
                       size: {
+                        XS: 12,
                         S: 14,
                         M: 18,
                         L: 20,
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index ca5461afce6..07f2334db24 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -302,7 +302,9 @@ const allowedOverrides = [
   'insetX',
   'insetY',
   'insetStart',
-  'insetEnd'
+  'insetEnd',
+  'opacity',
+  'visibility'
 ] as const;
 
 const widthProperties = [

From 84ff482298bad45c9ae0ca63935213c1e387148e Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Tue, 23 Sep 2025 04:27:59 +1000
Subject: [PATCH 5/6] Revert "fix: Focus behaviour on inputs inside a
 FocusScope (#8498)" (#8895)

This reverts commit 7df22966eabbb9b498ff26cf8657fc15a844fae8.
---
 .../@react-aria/autocomplete/src/useAutocomplete.ts   |  5 +----
 packages/@react-aria/focus/src/FocusScope.tsx         | 11 -----------
 packages/@react-aria/interactions/src/focusSafely.ts  |  7 -------
 .../@react-spectrum/combobox/test/ComboBox.test.js    |  4 ++--
 .../@react-spectrum/s2/stories/Dialog.stories.tsx     |  9 +++------
 5 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
index 2cd204e2e15..7f895a676b1 100644
--- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts
+++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
@@ -13,7 +13,7 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, getOwnerWindow, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -106,9 +106,6 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     // Ensure input is focused if the user clicks on the collection directly.
     if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
       inputRef.current.focus();
-      if (inputRef.current instanceof getOwnerWindow(inputRef.current).HTMLInputElement) {
-        inputRef.current.select();
-      }
     }
 
     let target = e.target as Element | null;
diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/packages/@react-aria/focus/src/FocusScope.tsx
index a7b5108f0a9..6dad540400a 100644
--- a/packages/@react-aria/focus/src/FocusScope.tsx
+++ b/packages/@react-aria/focus/src/FocusScope.tsx
@@ -15,7 +15,6 @@ import {
   getActiveElement,
   getEventTarget,
   getOwnerDocument,
-  getOwnerWindow,
   isAndroid,
   isChrome,
   isFocusable,
@@ -372,10 +371,6 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         // restore focus to the previously focused node or the first tabbable element in the active scope.
         if (focusedNode.current) {
           focusedNode.current.focus();
-
-          if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
-            focusedNode.current.select();
-          }
         } else if (activeScope && activeScope.current) {
           focusFirstInScope(activeScope.current);
         }
@@ -404,9 +399,6 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
           if (target && target.isConnected) {
             focusedNode.current = target;
             focusedNode.current?.focus();
-            if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
-              focusedNode.current.select();
-            }
           } else if (activeScope.current) {
             focusFirstInScope(activeScope.current);
           }
@@ -494,9 +486,6 @@ function focusElement(element: FocusableElement | null, scroll = false) {
   } else if (element != null) {
     try {
       element.focus();
-      if (element instanceof getOwnerWindow(element).HTMLInputElement) {
-        element.select();
-      }
     } catch {
       // ignore
     }
diff --git a/packages/@react-aria/interactions/src/focusSafely.ts b/packages/@react-aria/interactions/src/focusSafely.ts
index 46d95d917cf..384f3f363f7 100644
--- a/packages/@react-aria/interactions/src/focusSafely.ts
+++ b/packages/@react-aria/interactions/src/focusSafely.ts
@@ -15,7 +15,6 @@ import {
   focusWithoutScrolling,
   getActiveElement,
   getOwnerDocument,
-  getOwnerWindow,
   runAfterTransition
 } from '@react-aria/utils';
 import {getInteractionModality} from './useFocusVisible';
@@ -38,15 +37,9 @@ export function focusSafely(element: FocusableElement): void {
       // If focus did not move and the element is still in the document, focus it.
       if (getActiveElement(ownerDocument) === lastFocusedElement && element.isConnected) {
         focusWithoutScrolling(element);
-        if (element instanceof getOwnerWindow(element).HTMLInputElement) {
-          element.select();
-        }
       }
     });
   } else {
     focusWithoutScrolling(element);
-    if (element instanceof getOwnerWindow(element).HTMLInputElement) {
-      element.select();
-    }
   }
 }
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index 913a527a04a..8a6b7ee6e54 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -4398,7 +4398,7 @@ describe('ComboBox', function () {
       if (Method === 'escape key') {
         expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Two').id}`);
       } else {
-        expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('r').id}`);
+        expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Twor').id}`);
       }
       tree.unmount();
 
@@ -4412,7 +4412,7 @@ describe('ComboBox', function () {
 
       await performInteractions(tree);
       expect(() => tree.getByTestId('tray')).toThrow();
-      expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('r').id}`);
+      expect(button).toHaveAttribute('aria-labelledby', `${tree.getByText('Test').id} ${tree.getByText('Twor').id}`);
     });
 
     it('menutrigger=focus doesn\'t reopen the tray on close', async function () {
diff --git a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
index e4fdfcd4303..e178ef0c56f 100644
--- a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
@@ -48,12 +48,9 @@ const ExampleRender = (args: ExampleRenderProps): ReactElement => (
           <Heading slot="title">Dialog title</Heading>
           <Header>Header</Header>
           <Content>
-            <>
-              {[...Array(args.paragraphs)].map((_, i) =>
-                <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
-              )}
-              <input type="text" defaultValue="Hello" />
-            </>
+            {[...Array(args.paragraphs)].map((_, i) =>
+              <p key={i} style={{marginTop: i === 0 ? 0 : undefined, marginBottom: i === args.paragraphs - 1 ? 0 : undefined}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>
+            )}
           </Content>
           <Footer><Checkbox>Don't show this again</Checkbox></Footer>
           <ButtonGroup>

From 358480caa88fa8f001e3be466d655a7340db22b3 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Tue, 23 Sep 2025 02:38:54 +0800
Subject: [PATCH 6/6] fix(s2): Fix ColorLoupe position in ColorSlider for RTL
 locales (#8894)

* fix(s2): Fix ColorLoupe position in ColorSlider for RTL locales

* Fix ColorArea in RTL locales
---
 packages/@react-spectrum/s2/src/ColorArea.tsx   | 12 ++++++++++--
 packages/@react-spectrum/s2/src/ColorSlider.tsx |  5 +++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx
index 12548bef8ea..6c401b3efa8 100644
--- a/packages/@react-spectrum/s2/src/ColorArea.tsx
+++ b/packages/@react-spectrum/s2/src/ColorArea.tsx
@@ -13,7 +13,8 @@
 import {
   ColorArea as AriaColorArea,
   ColorAreaProps as AriaColorAreaProps,
-  ContextValue
+  ContextValue,
+  useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
 import {createContext, forwardRef} from 'react';
@@ -34,6 +35,7 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
+  let {direction} = useLocale();
   return (
     <AriaColorArea
       {...props}
@@ -67,7 +69,13 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
       {({state}) =>
         (<ColorHandle
           containerRef={containerRef}
-          getPosition={() => state.getThumbPosition()} />)
+          getPosition={() => {
+            let {x, y} = state.getThumbPosition();
+            return {
+              x: direction === 'ltr' ? x : 1 - x,
+              y
+            };
+          }} />)
       }
     </AriaColorArea>
   );
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index 5fb7994722e..d9a78172a0e 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -41,7 +41,7 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
   let trackRef = useRef(null);
-  let {locale} = useLocale();
+  let {direction, locale} = useLocale();
 
   return (
     <AriaColorSlider
@@ -133,7 +133,8 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
           <ColorHandle
             containerRef={trackRef}
             getPosition={() => {
-              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;
+              let thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);
+              let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;
               let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
               return {x, y};
             }} />