@sovereignfs/ui 0.21.1 → 0.21.3

package/dist/Dialog.module.css

@@ -48,7 +48,15 @@
 .content {
   flex: 1 1 auto;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: var(--sv-space-6);
+  /* Disable elastic overscroll within the dialog: `none` stops both scroll-
+     chaining to the parent and the iOS rubber-band bounce inside the panel.
+     `contain` only prevents chaining — the panel itself still bounces, which
+     reveals white panel-background between the mobileBar and the sticky tab
+     strip on iOS PWA. A dialog is a bounded surface where bounce is a visual
+     bug, not a feature. */
+  overscroll-behavior: none;
 }
 
 /* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus

package/dist/Drawer.module.css

@@ -20,6 +20,7 @@
   width: 100%;
   max-height: 80dvh;
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--sv-color-surface-raised);
   border-top: 1px solid var(--sv-color-border);
   border-radius: var(--sv-radius-3xl) var(--sv-radius-3xl) 0 0;

package/dist/index.js

@@ -905,6 +905,20 @@ function Input({ type = "text", className, ...rest }) {
 
 // src/components/Dialog/Dialog.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/scroll-lock.ts
+function lockBodyScroll() {
+  const count = parseInt(document.body.dataset.scrollLocks ?? "0", 10);
+  document.body.dataset.scrollLocks = String(count + 1);
+  if (count === 0) document.body.style.overflowY = "hidden";
+}
+function unlockBodyScroll() {
+  const next = Math.max(0, parseInt(document.body.dataset.scrollLocks ?? "0", 10) - 1);
+  document.body.dataset.scrollLocks = String(next);
+  if (next === 0) document.body.style.overflowY = "";
+}
+
+// src/components/Dialog/Dialog.tsx
 import styles11 from "./Dialog.module.css";
 import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -918,6 +932,11 @@ function Dialog({
 }) {
   const panelRef = useRef2(null);
   const previouslyFocused = useRef2(null);
+  useEffect2(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return unlockBodyScroll;
+  }, [open]);
   useEffect2(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
@@ -1012,6 +1031,11 @@ var FOCUSABLE2 = 'a[href], button:not([disabled]), textarea:not([disabled]), inp
 function Drawer({ open, onClose, "aria-label": ariaLabel, children }) {
   const panelRef = useRef3(null);
   const previouslyFocused = useRef3(null);
+  useEffect3(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return unlockBodyScroll;
+  }, [open]);
   useEffect3(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovereignfs/ui",
-  "version": "0.21.1",
+  "version": "0.21.3",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [

package/src/components/Dialog/Dialog.module.css

@@ -48,7 +48,15 @@
 .content {
   flex: 1 1 auto;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: var(--sv-space-6);
+  /* Disable elastic overscroll within the dialog: `none` stops both scroll-
+     chaining to the parent and the iOS rubber-band bounce inside the panel.
+     `contain` only prevents chaining — the panel itself still bounces, which
+     reveals white panel-background between the mobileBar and the sticky tab
+     strip on iOS PWA. A dialog is a bounded surface where bounce is a visual
+     bug, not a feature. */
+  overscroll-behavior: none;
 }
 
 /* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus

package/src/components/Dialog/Dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { type ReactNode, useEffect, useRef } from 'react';
+import { lockBodyScroll, unlockBodyScroll } from '../../scroll-lock';
 import styles from './Dialog.module.css';
 
 export type DialogSize = 'sm' | 'md' | 'lg' | 'full';
@@ -44,6 +45,15 @@ export function Dialog({
   const panelRef = useRef<HTMLDivElement>(null);
   const previouslyFocused = useRef<HTMLElement | null>(null);
 
+  // Prevent document-level scroll while open. Ref-counted so nested overlays
+  // (e.g. a confirmation dialog inside an overlay plugin) don't release the
+  // lock while a sibling is still open.
+  useEffect(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return unlockBodyScroll;
+  }, [open]);
+
   // Capture focus on open; restore it on close/unmount.
   useEffect(() => {
     if (!open) return;

package/src/components/Drawer/Drawer.module.css

@@ -20,6 +20,7 @@
   width: 100%;
   max-height: 80dvh;
   overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--sv-color-surface-raised);
   border-top: 1px solid var(--sv-color-border);
   border-radius: var(--sv-radius-3xl) var(--sv-radius-3xl) 0 0;

package/src/components/Drawer/Drawer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { type ReactNode, useEffect, useRef } from 'react';
+import { lockBodyScroll, unlockBodyScroll } from '../../scroll-lock';
 import styles from './Drawer.module.css';
 
 export interface DrawerProps {
@@ -30,6 +31,12 @@ export function Drawer({ open, onClose, 'aria-label': ariaLabel, children }: Dra
   const panelRef = useRef<HTMLDivElement>(null);
   const previouslyFocused = useRef<HTMLElement | null>(null);
 
+  useEffect(() => {
+    if (!open) return;
+    lockBodyScroll();
+    return unlockBodyScroll;
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement as HTMLElement | null;

package/src/scroll-lock.ts

@@ -0,0 +1,22 @@
+// Ref-counted body scroll lock. Multiple overlays (Dialog, Drawer) can be
+// open simultaneously; the body stays locked until all of them close.
+// Uses data-scroll-locks on <body> as a counter so concurrent callers
+// don't clobber each other's lock state.
+//
+// Only locks overflow-y (not the shorthand overflow) so the stylesheet's
+// overflow-x: hidden on html,body is never overridden. On Android, clearing
+// the overflow shorthand causes a brief frame where overflow-x is also
+// unlocked — content wider than the viewport can paint and the home screen
+// appears to "blow out" after the overlay closes.
+
+export function lockBodyScroll(): void {
+  const count = parseInt(document.body.dataset.scrollLocks ?? '0', 10);
+  document.body.dataset.scrollLocks = String(count + 1);
+  if (count === 0) document.body.style.overflowY = 'hidden';
+}
+
+export function unlockBodyScroll(): void {
+  const next = Math.max(0, parseInt(document.body.dataset.scrollLocks ?? '0', 10) - 1);
+  document.body.dataset.scrollLocks = String(next);
+  if (next === 0) document.body.style.overflowY = '';
+}