reshaped 4.2.0 → 4.3.0-canary.0

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--m{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--l{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--xl{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}
+@property --rs-modal-drag{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--m{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--l{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--xl{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}

package/dist/components/Modal/Modal.types.d.ts

@@ -3,6 +3,7 @@ import type { ClassName } from "@reshaped/utilities";
 import type { OverlayCloseReason, OverlayProps } from "../../components/Overlay";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
+export type Position = "center" | "end" | "bottom" | "start" | "full-screen";
 export type Context = {
     id: string;
     titleMounted: boolean;
@@ -22,7 +23,7 @@ export type Props = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Component position on the screen */
-    position?: G.Responsive<"center" | "end" | "bottom" | "start" | "full-screen">;
+    position?: G.Responsive<Position>;
     /** Component size, literal css value */
     size?: G.Responsive<string>;
     /** Component padding, unit token multiplier */

package/dist/components/Modal/useModalDrag.d.ts

@@ -0,0 +1,21 @@
+import type { OverlayInstance } from "../../components/Overlay";
+import type * as T from "./Modal.types";
+/**
+ * Swipe gesture closing the modal, moving it with the finger and continuing
+ * the release animation from the velocity the gesture ended with
+ */
+declare const useModalDrag: (args: {
+    position: T.Position;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    overlayRef: React.RefObject<OverlayInstance | null>;
+    active?: boolean;
+    disabled?: boolean;
+    transparentOverlay?: boolean;
+    containerRef?: T.Props["containerRef"];
+    onClose?: T.Props["onClose"];
+}) => {
+    dragging: boolean;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    handleTransitionEnd: (e: React.TransitionEvent) => void;
+};
+export default useModalDrag;

package/dist/components/Modal/useModalDrag.js

@@ -0,0 +1,256 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import { resolveSpringTransition } from "../../utilities/animation";
+/** Distance in px the modal has to be dragged before it starts following the finger */
+const THRESHOLD = 32;
+/** Distance in px on the axis perpendicular to the drag axis cancelling the gesture */
+const OPPOSITE_THRESHOLD = 100;
+/** Screen edge zone in px reserved for the browser back gesture */
+const EDGE_BOUNDARY = 32;
+/** Distance in px after which the modal content stops scrolling for the rest of the gesture */
+const SCROLL_LOCK_THRESHOLD = 8;
+/** Velocity in px/ms closing the modal on release regardless of the dragged distance */
+const VELOCITY_THRESHOLD = 0.4;
+/** Time window in ms used for measuring the release velocity */
+const VELOCITY_WINDOW = 100;
+const VELOCITY_SAMPLES = 10;
+const getInitialState = () => ({
+    origin: 0,
+    oppositeOrigin: 0,
+    previous: 0,
+    seed: 0,
+    distance: 0,
+    offset: 0,
+    size: 1,
+    samples: [],
+    closing: false,
+    returning: false,
+});
+/**
+ * Distance in px the modal is currently rendered at from its open position, towards the closing direction.
+ * Resolved from the transform so a gesture can pick up an animation that is still in flight,
+ * the dragging class disables transitions and would otherwise snap the modal to the animation target
+ */
+const getRenderedOffset = (el, args) => {
+    const { transform } = window.getComputedStyle(el);
+    if (!transform || transform === "none")
+        return 0;
+    const matrix = new DOMMatrixReadOnly(transform);
+    return Math.max(0, (args.axis === "y" ? matrix.m42 : matrix.m41) * args.closingSign);
+};
+/** Velocity in px/ms measured over the most recent samples, signed on the drag axis */
+const getVelocity = (state, time) => {
+    const samples = state.samples.filter((sample) => time - sample.time <= VELOCITY_WINDOW);
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    if (!first || !last || first === last)
+        return 0;
+    return (last.coordinate - first.coordinate) / (last.time - first.time);
+};
+/**
+ * Swipe gesture closing the modal, moving it with the finger and continuing
+ * the release animation from the velocity the gesture ended with
+ */
+const useModalDrag = (args) => {
+    const { position, rootRef, overlayRef, active, disabled, transparentOverlay, containerRef } = args;
+    const onCloseRef = useHandlerRef(args.onClose);
+    const [dragging, setDragging] = useState(false);
+    const stateRef = useRef(getInitialState());
+    const frameRef = useRef(null);
+    const axis = position === "bottom" ? "y" : "x";
+    // Start drawers close towards the negative coordinates
+    const closingSign = position === "start" ? -1 : 1;
+    const render = useCallback(() => {
+        const rootEl = rootRef.current;
+        const state = stateRef.current;
+        if (!rootEl)
+            return;
+        // A gesture picking up an animation starts on an already moving modal, so it skips the dead zone
+        const threshold = state.seed ? 0 : THRESHOLD;
+        const closingDistance = state.seed + state.distance;
+        state.offset = Math.max(0, closingDistance - threshold);
+        rootEl.style.setProperty("--rs-modal-drag", `${state.offset * closingSign}px`);
+        if (transparentOverlay)
+            return;
+        const progress = Math.min(1, closingDistance / state.size);
+        overlayRef.current?.setOpacity(1 - progress * 0.5);
+    }, [closingSign, transparentOverlay, rootRef, overlayRef]);
+    const reset = useCallback(() => {
+        stateRef.current = getInitialState();
+        render();
+    }, [render]);
+    const setScrollLock = useCallback((locked) => {
+        const style = rootRef.current?.style;
+        if (locked)
+            style?.setProperty("overflow", "hidden");
+        else
+            style?.removeProperty("overflow");
+    }, [rootRef]);
+    /**
+     * Continues the release animation from the current gesture velocity,
+     * velocity is passed in px/ms and is positive when moving towards the closing direction
+     */
+    const setReleaseTransition = useCallback((releaseArgs) => {
+        const rootEl = rootRef.current;
+        const { offset, size } = stateRef.current;
+        const displacement = offset - (releaseArgs.closing ? size : 0);
+        // Without a displacement no transition will run and the override would stay applied
+        if (!rootEl || !displacement)
+            return;
+        const { duration, easing } = resolveSpringTransition({
+            displacement,
+            velocity: releaseArgs.velocity,
+        });
+        rootEl.style.setProperty("transition-duration", `${Math.round(duration)}ms`);
+        rootEl.style.setProperty("transition-timing-function", easing);
+    }, [rootRef]);
+    const resetReleaseTransition = useCallback(() => {
+        const style = rootRef.current?.style;
+        style?.removeProperty("transition-duration");
+        style?.removeProperty("transition-timing-function");
+    }, [rootRef]);
+    const handleTouchStart = (e) => {
+        if (disabled || position === "center")
+            return;
+        // Prevent swipe to close from happening when user is working with text selection
+        if (window.getSelection()?.toString())
+            return;
+        const rootEl = rootRef.current;
+        const touch = e.targetTouches[0];
+        let currentEl = e.target;
+        while (currentEl && (currentEl === rootEl || rootEl?.contains(currentEl))) {
+            // Prioritize scrolling over modal swiping
+            if (currentEl.scrollTop !== 0 || currentEl.scrollLeft !== 0)
+                return;
+            // Start dragging only when starting on static elements
+            if (currentEl.matches("input,textarea"))
+                return;
+            currentEl = currentEl.parentElement;
+        }
+        // Prevent the drag handling when browser is trying to navigate to a previous page
+        if (position === "start" && touch.clientX < EDGE_BOUNDARY)
+            return;
+        // Measured before the state is replaced, a transition in flight resolves to its current position
+        const seed = active && rootEl ? getRenderedOffset(rootEl, { axis, closingSign }) : 0;
+        const origin = axis === "y" ? touch.clientY : touch.clientX;
+        // The previous gesture can be left unresolved, e.g. when the modal stays open after a drag close
+        stateRef.current = {
+            ...getInitialState(),
+            origin,
+            oppositeOrigin: axis === "y" ? touch.clientX : touch.clientY,
+            previous: origin,
+            seed,
+            size: rootEl ? Math.max(1, axis === "y" ? rootEl.clientHeight : rootEl.clientWidth) : 1,
+        };
+        resetReleaseTransition();
+        render();
+        if (containerRef?.current)
+            disableScroll();
+        setDragging(true);
+    };
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "transform")
+            return;
+        if (e.currentTarget !== e.target)
+            return;
+        resetReleaseTransition();
+        // Once modal is closed - reset its drag data
+        if (active)
+            return;
+        reset();
+        setScrollLock(false);
+    };
+    // Modal returns to its open position after the dragging class is removed,
+    // so the transition is applied to the reset instead of snapping back
+    useIsomorphicLayoutEffect(() => {
+        if (dragging || !stateRef.current.returning)
+            return;
+        reset();
+    }, [dragging, reset]);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const handleTouchMove = (e) => {
+            const state = stateRef.current;
+            const rootEl = rootRef.current;
+            if (rootEl?.scrollTop !== 0 || rootEl?.scrollLeft !== 0)
+                return;
+            const touch = e.targetTouches[0];
+            const coordinate = axis === "y" ? touch.clientY : touch.clientX;
+            const oppositeCoordinate = axis === "y" ? touch.clientX : touch.clientY;
+            const travel = Math.abs(coordinate - state.origin);
+            const oppositeTravel = Math.abs(oppositeCoordinate - state.oppositeOrigin);
+            // Positive when moving towards the closing direction
+            const delta = (coordinate - state.previous) * closingSign;
+            state.previous = coordinate;
+            // For start/end drawers - ignore the swiping
+            // If user is scrolling vertically more than swiping
+            if (axis === "x" && (travel < oppositeTravel || oppositeTravel > OPPOSITE_THRESHOLD)) {
+                return;
+            }
+            if (travel > SCROLL_LOCK_THRESHOLD && delta > 0)
+                setScrollLock(true);
+            // Clamped so the modal can't be dragged past its open position
+            state.distance = Math.max(-state.seed, state.distance + delta);
+            state.samples.push({ time: e.timeStamp, coordinate });
+            if (state.samples.length > VELOCITY_SAMPLES)
+                state.samples.shift();
+            if (frameRef.current !== null)
+                return;
+            frameRef.current = window.requestAnimationFrame(() => {
+                frameRef.current = null;
+                render();
+            });
+        };
+        const handleTouchEnd = (e) => {
+            const state = stateRef.current;
+            // Positive when moving towards the closing direction
+            const velocity = getVelocity(state, e.timeStamp) * closingSign;
+            const flicked = velocity > VELOCITY_THRESHOLD;
+            const dragged = state.distance > THRESHOLD && velocity >= 0;
+            state.closing = flicked || dragged;
+            state.returning = !state.closing;
+            // Apply the pending frame before the release so the transition starts from the current position
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+                render();
+            }
+            setReleaseTransition({ closing: state.closing, velocity });
+            if (containerRef?.current)
+                enableScroll();
+            if (state.returning)
+                setScrollLock(false);
+            setDragging(false);
+            if (state.closing)
+                onCloseRef.current?.({ reason: "drag" });
+        };
+        document.addEventListener("touchmove", handleTouchMove, { passive: true });
+        document.addEventListener("touchend", handleTouchEnd, { passive: true });
+        return () => {
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+            if (!stateRef.current.closing)
+                setScrollLock(false);
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [
+        dragging,
+        axis,
+        closingSign,
+        containerRef,
+        rootRef,
+        onCloseRef,
+        render,
+        setScrollLock,
+        setReleaseTransition,
+    ]);
+    return { dragging, handleTouchStart, handleTransitionEnd };
+};
+export default useModalDrag;

package/dist/components/Overlay/Overlay.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { TrapFocus, classNames } from "@reshaped/utilities";
 import Portal from "../../components/_private/Portal";
@@ -21,6 +21,7 @@ const Overlay = (props) => {
     const [animated, setAnimated] = React.useState(false);
     const [offset, setOffset] = React.useState([0, 0]);
     const rootRef = React.useRef(null);
+    const backdropRef = React.useRef(null);
     const scopeRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const { lockScroll, unlockScroll } = useScrollLock({ containerRef });
@@ -125,7 +126,8 @@ const Overlay = (props) => {
         setOpacity: (value) => {
             if (transparent)
                 return;
-            rootRef.current?.style.setProperty("--rs-overlay-opacity", `${value}`);
+            // Applied directly to the backdrop element to keep the style recalculation scoped to it
+            backdropRef.current?.style.setProperty("opacity", `${value}`);
         },
     }), [transparent]);
     if (!rendered || !mounted)
@@ -136,10 +138,9 @@ const Overlay = (props) => {
                 }, style: {
                     "--rs-overlay-offset-x": containerRef ? `${offset[0]}px` : undefined,
                     "--rs-overlay-offset-y": containerRef ? `${offset[1]}px` : undefined,
-                    "--rs-overlay-opacity": transparent ? 0 : undefined,
                 }, 
                 // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
-                role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: s.wrapper, children: _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) }) }) })) }) }));
+                role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd, children: _jsxs("div", { className: s.wrapper, children: [_jsx("div", { className: s.backdrop, ref: backdropRef }), _jsx("div", { className: s.inner, children: _jsx("div", { className: s.content, ref: contentRef, children: typeof children === "function" ? children({ active: visible }) : children }) })] }) })) }) }));
 };
 Overlay.displayName = "Overlay";
 export default Overlay;

package/dist/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;--rs-overlay-opacity:0;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);background-color:rgb(from var(--rs-color-black) r g b/0);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{--rs-overlay-opacity:1;background-color:rgb(from var(--rs-color-black) r g b/calc(var(--rs-overlay-opacity) * .7));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}
+.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;position:fixed;overflow-x:clip;-webkit-overflow-scrolling:touch;left:var(--rs-overlay-offset-x);top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-fixed);color:var(--rs-color-white);opacity:0;outline:none;isolation:isolate}.root,.wrapper{height:100%;width:100%}.wrapper{display:table;position:relative}.backdrop{position:absolute;inset:0;z-index:-1;background-color:rgb(from var(--rs-color-black) r g b/70%);opacity:0;will-change:opacity}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible,.root.--visible .backdrop{opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .backdrop{opacity:0}.root.--blurred{backdrop-filter:blur(3px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px);height:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated,.root.--animated .backdrop{transition:opacity var(--rs-duration-medium) var(--rs-easing-accelerate)}.root.--animated.--visible,.root.--animated.--visible .backdrop{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto;overscroll-behavior:none}

package/dist/components/ScrollArea/ScrollArea.js

@@ -8,7 +8,7 @@ import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
 import { resolveMixin } from "../../styles/mixin";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
-    const { ratio, position, vertical, onThumbMove } = props;
+    const { ratio, vertical, scrollableRef, onThumbMove } = props;
     const onThumbMoveRef = useHandlerRef(onThumbMove);
     const [dragging, setDragging] = React.useState(false);
     const dragStartPositionRef = React.useRef(0);
@@ -49,6 +49,31 @@ const ScrollAreaBar = (props) => {
         setDragging(false);
         enableScroll();
     }, []);
+    /**
+     * Thumb position is written directly to a css variable on the bar instead of the react state,
+     * so scrolling doesn't re-render the component and the style recalculation stays scoped to the bar
+     */
+    useIsomorphicLayoutEffect(() => {
+        const scrollableEl = scrollableRef.current;
+        const barEl = barRef.current;
+        if (!scrollableEl || !barEl)
+            return;
+        const updatePosition = () => {
+            const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
+            const position = vertical
+                ? scrollHeight <= clientHeight
+                    ? 0
+                    : scrollTop / scrollHeight
+                : scrollWidth <= clientWidth
+                    ? 0
+                    : scrollLeft / scrollWidth;
+            barEl.style.setProperty("--rs-scroll-area-position", `${position}`);
+        };
+        updatePosition();
+        scrollableEl.addEventListener("scroll", updatePosition, { passive: true });
+        return () => scrollableEl.removeEventListener("scroll", updatePosition);
+        // Ratio is included to re-sync the position after the content or the container size changes
+    }, [vertical, scrollableRef, ratio]);
     React.useEffect(() => {
         if (!dragging)
             return;
@@ -59,15 +84,11 @@ const ScrollAreaBar = (props) => {
             document.removeEventListener("mouseup", handleDragEnd);
         };
     }, [handleDrag, handleDragEnd, dragging]);
-    return (_jsx("div", { className: barClassNames, style: {
-            "--rs-scroll-area-ratio": ratio,
-            "--rs-scroll-area-position": position,
-        }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
+    return (_jsx("div", { className: barClassNames, style: { "--rs-scroll-area-ratio": ratio }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
 };
 const ScrollArea = forwardRef((props, ref) => {
     const { children, height, maxHeight, orientation = "both", scrollbarDisplay = "hover", overscrollBehavior = "auto", fade, onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
-    const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const [scrolling, setScrolling] = React.useState(false);
     const scrollingTimeoutRef = React.useRef(undefined);
     const scrollableRef = React.useRef(null);
@@ -80,15 +101,11 @@ const ScrollArea = forwardRef((props, ref) => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
             return;
-        const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
+        const { clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
         setScrollRatio({
             x: scrollWidth === 0 ? 1 : Math.min(clientWidth / scrollWidth, 1),
             y: scrollHeight === 0 ? 1 : Math.min(clientHeight / scrollHeight, 1),
         });
-        setScrollPosition({
-            x: scrollWidth <= clientWidth ? 0 : scrollLeft / scrollWidth,
-            y: scrollHeight <= clientHeight ? 0 : scrollTop / scrollHeight,
-        });
     }, []);
     const handleScroll = (e) => {
         const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = e.currentTarget;
@@ -97,10 +114,6 @@ const ScrollArea = forwardRef((props, ref) => {
             clearTimeout(scrollingTimeoutRef.current);
             scrollingTimeoutRef.current = setTimeout(() => setScrolling(false), 1000);
         }
-        setScrollPosition({
-            x: scrollLeft / scrollWidth,
-            y: scrollTop / scrollHeight,
-        });
         onScroll?.({
             x: scrollWidth === clientWidth ? 0 : scrollLeft / (scrollWidth - clientWidth),
             y: scrollHeight === clientHeight ? 0 : scrollTop / (scrollHeight - clientHeight),
@@ -161,7 +174,7 @@ const ScrollArea = forwardRef((props, ref) => {
             mutationObserver.disconnect();
         };
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: mixinStyles.variables, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), orientation !== "horizontal" && scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), orientation !== "vertical" && scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
+    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: mixinStyles.variables, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), orientation !== "horizontal" && scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, scrollableRef: scrollableRef })), orientation !== "vertical" && scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, scrollableRef: scrollableRef }))] }));
 });
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +1 @@
-@property --rs-scroll-area-fade-block-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-block-end{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-end{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);--rs-scroll-area-fade-size:var(--rs-unit-x8);overflow:hidden;height:100%;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;position:relative;overflow:auto;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;width:0;height:0}.--orientation-vertical{overflow-x:hidden}.--orientation-vertical>.content{max-width:100%}.--orientation-horizontal{overflow-y:hidden}.--orientation-horizontal>.content{max-height:100%}@keyframes fade-block-start{0%{--rs-scroll-area-fade-block-start:0px}to{--rs-scroll-area-fade-block-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-block-end{0%{--rs-scroll-area-fade-block-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-block-end:0px}}@keyframes fade-inline-start{0%{--rs-scroll-area-fade-inline-start:0px}to{--rs-scroll-area-fade-inline-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-inline-end{0%{--rs-scroll-area-fade-inline-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-inline-end:0px}}@supports (animation-timeline:scroll(self block)){.--fade{--rs-scroll-area-fade-inline-direction:to right;mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-block-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-block-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-block-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-block-start) * .8),#000 var(--rs-scroll-area-fade-block-start),#000 calc(100% - var(--rs-scroll-area-fade-block-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-block-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-block-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-block-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-block-end) * .2),transparent 100%),linear-gradient(var(--rs-scroll-area-fade-inline-direction),transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-inline-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-inline-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-inline-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-inline-start) * .8),#000 var(--rs-scroll-area-fade-inline-start),#000 calc(100% - var(--rs-scroll-area-fade-inline-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-inline-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-inline-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-inline-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-inline-end) * .2),transparent 100%);mask-composite:intersect;animation-name:fade-block-start,fade-block-end,fade-inline-start,fade-inline-end;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%,0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%}[dir=rtl] .--fade{--rs-scroll-area-fade-inline-direction:to left}}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;vertical-align:top;min-width:100%;min-height:100%;height:100%}.scrollbar{position:absolute;box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset)}.thumb{position:relative;height:100%;width:100%;background-color:var(--rs-color-background-neutral-faded);opacity:0}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{content:"";display:block;background:var(--rs-color-foreground-neutral);position:absolute;opacity:.2}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size);padding-block:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x1))}.--scrollbar-y .thumb:before{inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%;height:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-x{inset-inline:0;inset-block-end:0;height:var(--rs-scroll-area-thumb-size);padding-inline:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x0-5))}.--scrollbar-x .thumb:before{inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);height:100%;width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-hover>.--scrollbar-dragging .thumb,.--display-scroll.--scrolling>.scrollbar .thumb,.--display-scroll>.--scrollbar-dragging .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+@property --rs-scroll-area-fade-block-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-block-end{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-start{syntax:"<length>";initial-value:0;inherits:false}@property --rs-scroll-area-fade-inline-end{syntax:"<length>";initial-value:0;inherits:false}.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);--rs-scroll-area-fade-size:var(--rs-unit-x8);overflow:hidden;height:100%;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;position:relative;overflow:auto;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;width:0;height:0}.--orientation-vertical{overflow-x:hidden}.--orientation-vertical>.content{max-width:100%}.--orientation-horizontal{overflow-y:hidden}.--orientation-horizontal>.content{max-height:100%}@keyframes fade-block-start{0%{--rs-scroll-area-fade-block-start:0px}to{--rs-scroll-area-fade-block-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-block-end{0%{--rs-scroll-area-fade-block-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-block-end:0px}}@keyframes fade-inline-start{0%{--rs-scroll-area-fade-inline-start:0px}to{--rs-scroll-area-fade-inline-start:var(--rs-scroll-area-fade-size)}}@keyframes fade-inline-end{0%{--rs-scroll-area-fade-inline-end:var(--rs-scroll-area-fade-size)}to{--rs-scroll-area-fade-inline-end:0px}}@supports (animation-timeline:scroll(self block)){.--fade{--rs-scroll-area-fade-inline-direction:to right;mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-block-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-block-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-block-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-block-start) * .8),#000 var(--rs-scroll-area-fade-block-start),#000 calc(100% - var(--rs-scroll-area-fade-block-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-block-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-block-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-block-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-block-end) * .2),transparent 100%),linear-gradient(var(--rs-scroll-area-fade-inline-direction),transparent 0,rgba(0,0,0,.1) calc(var(--rs-scroll-area-fade-inline-start) * .2),rgba(0,0,0,.35) calc(var(--rs-scroll-area-fade-inline-start) * .4),rgba(0,0,0,.65) calc(var(--rs-scroll-area-fade-inline-start) * .6),rgba(0,0,0,.9) calc(var(--rs-scroll-area-fade-inline-start) * .8),#000 var(--rs-scroll-area-fade-inline-start),#000 calc(100% - var(--rs-scroll-area-fade-inline-end)),rgba(0,0,0,.9) calc(100% - var(--rs-scroll-area-fade-inline-end) * .8),rgba(0,0,0,.65) calc(100% - var(--rs-scroll-area-fade-inline-end) * .6),rgba(0,0,0,.35) calc(100% - var(--rs-scroll-area-fade-inline-end) * .4),rgba(0,0,0,.1) calc(100% - var(--rs-scroll-area-fade-inline-end) * .2),transparent 100%);mask-composite:intersect;animation-name:fade-block-start,fade-block-end,fade-inline-start,fade-inline-end;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%,0 var(--rs-scroll-area-fade-size),calc(100% - var(--rs-scroll-area-fade-size)) 100%}[dir=rtl] .--fade{--rs-scroll-area-fade-inline-direction:to left}}.--overscroll-auto{overscroll-behavior:auto}.--overscroll-contain{overscroll-behavior:contain}.content{display:inline-block;vertical-align:top;min-width:100%;min-height:100%;height:100%}.scrollbar{position:absolute;box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset)}.thumb{position:relative;height:100%;width:100%;background-color:var(--rs-color-background-neutral-faded);opacity:0}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{content:"";display:block;background:var(--rs-color-foreground-neutral);position:absolute;opacity:.2;will-change:transform}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size);padding-block:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x1))}.--scrollbar-y .thumb:before{inset-block-start:0;width:100%;height:calc(var(--rs-scroll-area-ratio) * 100%);transform:translateY(calc(var(--rs-scroll-area-position, 0) / var(--rs-scroll-area-ratio) * 100%))}.--scrollbar-x{inset-inline:0;inset-block-end:0;height:var(--rs-scroll-area-thumb-size);padding-inline:calc(var(--rs-scroll-area-thumb-offset) + var(--rs-unit-x0-5))}.--scrollbar-x .thumb:before{inset-inline-start:0;height:100%;width:calc(var(--rs-scroll-area-ratio) * 100%);transform:translateX(calc(var(--rs-scroll-area-position, 0) / var(--rs-scroll-area-ratio) * 100%))}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-hover>.--scrollbar-dragging .thumb,.--display-scroll.--scrolling>.scrollbar .thumb,.--display-scroll>.--scrollbar-dragging .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

package/dist/components/ScrollArea/ScrollArea.types.d.ts

@@ -31,8 +31,8 @@ export type Props = {
 };
 export type BarProps = {
     ratio: number;
-    position: number;
     vertical?: boolean;
+    scrollableRef: React.RefObject<HTMLElement | null>;
     onThumbMove: (args: {
         value: number;
         type: "absolute" | "relative";

package/dist/components/Select/SelectCustomControlled.js

@@ -124,7 +124,7 @@ const SelectCustomControlled = (props) => {
             return passedRenderTrigger(attributes, { ...triggerState, value });
         return passedRenderTrigger(attributes, { ...triggerState, value });
     };
-    return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: !openedWithTouch, fallbackMinHeight: "220px", initialFocusRef: initialFocusRef, positionRef: positionRef, onClose: () => setOpenedWithTouch(false), children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
+    return (_jsxs(DropdownMenu, { width: width, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: !openedWithTouch, fallbackMinHeight: "220px", initialFocusRef: initialFocusRef, positionRef: positionRef, onClose: () => setOpenedWithTouch(false), children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
                     const triggerAttributes = {
                         ...attributes,
                         onTouchStart: () => {

package/dist/components/Select/tests/Select.stories.js

@@ -99,6 +99,10 @@ exports.base = {
         (0, test_1.expect)(options[0]).toHaveTextContent("Dog");
         (0, test_1.expect)(options[1]).toHaveTextContent("Turtle");
         await test_1.userEvent.click(document.body);
+        // Wait for the previous menu to finish its hide animation
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)((0, test_1.within)(canvasElement.ownerDocument.body).queryAllByRole("option")).toHaveLength(0);
+        });
         const [_, triggerWithGroups] = canvas.getAllByRole("button");
         const hiddenInputs2 = canvasElement.querySelectorAll('input[type="hidden"]');
         const [__, hiddenInputWithGroups] = Array.from(hiddenInputs2);
@@ -345,7 +349,10 @@ exports.renderTrigger = {
         await test_1.userEvent.click(option);
         (0, test_1.expect)(hiddenInput).toHaveValue("turtle");
         (0, test_1.expect)(trigger).toHaveTextContent("Turtle");
-        (0, test_1.expect)(trigger).toHaveAttribute("aria-expanded", "false");
+        // Trigger stays expanded until the hide animation ends
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)(trigger).toHaveAttribute("aria-expanded", "false");
+        });
         (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
         (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
             name: "animal",
@@ -616,6 +623,10 @@ exports.defaultHandlers = {
         });
         // Controlled
         await test_1.userEvent.click(document.body);
+        // Wait for the previous menu to finish its hide animation
+        await (0, test_1.waitFor)(() => {
+            (0, test_1.expect)((0, test_1.within)(canvasElement.ownerDocument.body).queryAllByRole("option")).toHaveLength(0);
+        });
         const [__, controlled, focusable] = canvas.getAllByRole("button");
         const hiddenInputs2 = canvasElement.querySelectorAll('input[type="hidden"]');
         const [___, inputControlled] = Array.from(hiddenInputs2);

package/dist/components/_private/Freeze/Freeze.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Freeze.types";
+declare const Freeze: React.FC<T.Props>;
+export default Freeze;

package/dist/components/_private/Freeze/Freeze.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import s from "./Freeze.module.css";
+/**
+ * Transitions never commit an already visible Suspense boundary switching to its fallback,
+ * so we stop freezing if the frozen render isn't committed in time instead of blocking them forever
+ */
+const COMMIT_TIMEOUT = 100;
+const infinitePromise = new Promise(() => { });
+const Suspend = (props) => {
+    const state = props.stateRef.current;
+    if (state.expired)
+        return null;
+    if (state.committed)
+        throw infinitePromise;
+    state.pending ??= new Promise((resolve) => {
+        setTimeout(() => {
+            state.expired = !state.committed;
+            resolve();
+        }, COMMIT_TIMEOUT);
+    });
+    throw state.pending;
+};
+const Freeze = (props) => {
+    const { frozen, children } = props;
+    const stateRef = React.useRef({});
+    const elRef = React.useRef(null);
+    // Insertion effect is the earliest opportunity to undo the Suspense display: none
+    React.useInsertionEffect(() => {
+        if (!frozen) {
+            stateRef.current = {};
+            return;
+        }
+        if (stateRef.current.expired)
+            return;
+        stateRef.current.committed = true;
+        elRef.current?.style.removeProperty("display");
+    }, [frozen]);
+    return (_jsx(React.Suspense, { children: _jsxs("div", { className: s.root, ref: (el) => {
+                if (el)
+                    elRef.current = el;
+            }, children: [frozen && _jsx(Suspend, { stateRef: stateRef }), children] }) }));
+};
+Freeze.displayName = "Freeze";
+export default Freeze;

package/dist/components/_private/Freeze/Freeze.module.css

@@ -0,0 +1 @@
+.root{display:contents}