@octane-xplat/sheet 0.9.0 → 0.10.0

package/README.md

@@ -2,9 +2,8 @@
 
 An install boundary for platform-specific modal bottom sheets: a SwiftUI
 `.sheet` presentation on iOS, a Material 3 `ModalBottomSheet` on Android,
-a fixed-position DOM panel on web, and a real `NSWindow` sheet
+a native modal `<dialog>` on web, and a real `NSWindow` sheet
 (`beginSheet`) on macOS.
-
 Install the package in the app that renders a control. Import
 `SwiftUIBottomSheet` from `@octane-xplat/sheet/ios`,
 `MaterialBottomSheet` from `@octane-xplat/sheet/android`, `BottomSheet`
@@ -12,12 +11,119 @@ from `@octane-xplat/sheet/web`, or `AppKitSheet` from
 `@octane-xplat/sheet/macos` in the matching platform-suffixed file.
 There is no shared sheet API at the package root.
 
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// SwiftUIBottomSheetExample.ios.tsx
+import { SwiftUIBottomSheet } from '@octane-xplat/sheet/ios'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<SwiftUIBottomSheet
+				open={open}
+				detents={['medium', 'large']}
+				showDragIndicator
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// MaterialBottomSheetExample.android.tsx
+import { MaterialBottomSheet } from '@octane-xplat/sheet/android'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<MaterialBottomSheet
+				open={open}
+				skipPartiallyExpanded
+				showDragHandle
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+```tsx
+// BottomSheetExample.web.tsx
+import { BottomSheet } from '@octane-xplat/sheet/web'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<BottomSheet
+				open={open}
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+```tsx
+// AppKitSheetExample.macos.tsx
+import { AppKitSheet } from '@octane-xplat/sheet/macos'
+import { useState } from 'octane'
+import { Button, Text } from '@octane-xplat/ui'
+
+export function Details() {
+	const [open, setOpen] = useState(false)
+	return (
+		<>
+			<Button onPress={() => setOpen(true)}>Trip details</Button>
+			<AppKitSheet
+				open={open}
+				onDismissed={() => setOpen(false)}
+				content={() => <Text>Two bags packed</Text>}
+			/>
+		</>
+	)
+}
+```
+
+Web apps must also import the sheet stylesheet from their app entry:
+
+```ts
+import '@octane-xplat/sheet/web/styles.css'
+```
+
 Sheet content is a render fn whose octane output mounts into a detached
 root — the same embedding mechanism as `@octane-xplat/context-menu`'s
 trigger. On iOS the registered view resolves through
 `NativeScriptViewFactory`; on Android through the leaf's
 `XplatViewRegistry` + `AndroidView` inside the sheet's dialog window.
 
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// HostedContent.android.tsx
+import { MaterialBottomSheet } from '@octane-xplat/sheet/android'
+import { Text } from '@octane-xplat/ui'
+
+export function HostedContent({ open }: { open: boolean }) {
+	return <MaterialBottomSheet open={open} content={() => <Text>Trip details</Text>} />
+}
+```
+
 - iOS: `open` (controlled `isPresented`), `onDismissed`,
   `onPresentedChange`, `fitToContents` (ported size-reader →
   `.presentationDetents([.height])`), `detents`
@@ -29,7 +135,11 @@ trigger. On iOS the registered view resolves through
   `shouldDismissOnClickOutside`, and `containerColor`/`contentColor`/
   `scrimColor` hex strings. Activity-owned key events are forwarded while
   the sheet's dialog is open (ported from Expo).
-- Web: scrim + bottom panel, scrim-click dismiss.
+- Web: native modal `<dialog>` with a named panel, focus entry/Tab
+  containment, trigger restoration (`finalFocusRef`), Escape and scrim
+  dismissal controls, and drag-handle dismissal. `label` supplies the dialog
+  name; pass `finalFocusRef` when pointer-opening so focus returns to the
+  invoking control across browsers.
 
 The native implementations are adapted from `@expo/ui` (MIT,
 `packages/expo-ui` sdk-57): `ios/BottomSheetView.swift` and

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "a708cea8-c79d-46a5-ae17-04112d1be0ac",
+  "buildId": "ea2c2633-b2c7-487d-a7b8-9061f5e34343",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/BottomSheet.web.tsrx.js

@@ -1,45 +1,124 @@
-import { Fragment, createElement, createScopedElement, createScopedValue, positionalChildren } from "octane";
+import { Fragment, createElement, createScopedElement, createScopedValue, hookSlots, positionalChildren, useEffect, useRef } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant } from "octane/internal/client";
 //#region src/BottomSheet.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+function tabStops(panel) {
+	return Array.from(panel.querySelectorAll("a[href],button,input:not([type=\"hidden\"]),textarea,select,[tabindex],[contenteditable=\"true\"]")).filter((element) => {
+		if (element.tabIndex < 0 || element.matches(":disabled") || element.closest("[inert],[hidden],[aria-hidden=\"true\"]")) return false;
+		for (let parent = element; parent; parent = parent.parentElement) {
+			const style = getComputedStyle(parent);
+			if (style.display === "none" || style.visibility === "hidden") return false;
+		}
+		return true;
+	});
+}
 var BottomSheet = function BottomSheet(props, __s, __extra) {
-	const open = props.open ?? false;
-	(props.shouldDismissOnClickOutside ?? true) || props.shouldDismissOnBackPress;
-	if (!open) return positionalChildren([]);
-	return createScopedElement(Fragment, {}, () => positionalChildren([createScopedValue(() => createElement("div", {
-		style: {
-			position: "fixed",
-			inset: 0,
-			background: "rgb(0 0 0 / 0.4)",
-			zIndex: 999
-		},
-		onClick: () => {
-			if (props.shouldDismissOnClickOutside ?? true) props.onDismissed?.();
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	const dialog = useRef(null, _hs$ + 0);
+	const panel = useRef(null, _hs$ + 1);
+	const drag = useRef(null, _hs$ + 2);
+	useEffect(() => {
+		const current = dialog.current;
+		if (!props.open || !current || current.open) return;
+		const trigger = props.finalFocusRef?.current ?? current.ownerDocument.activeElement;
+		const previousTabIndex = current.getAttribute("tabindex");
+		current.showModal();
+		const stops = panel.current ? tabStops(panel.current) : [];
+		const autofocus = current.querySelector("[autofocus]");
+		const initialFocus = (autofocus && !autofocus.matches(":disabled,[hidden],[inert]") ? autofocus : null) ?? stops[0] ?? current;
+		if (initialFocus === current && previousTabIndex === null) current.tabIndex = -1;
+		initialFocus.focus({ preventScroll: true });
+		return () => {
+			if (current.open) current.close();
+			if (previousTabIndex === null && initialFocus === current) current.removeAttribute("tabindex");
+			requestAnimationFrame(() => {
+				if (trigger?.isConnected && !trigger.closest("[inert]")) trigger.focus({ preventScroll: true });
+			});
+		};
+	}, [props.open], _hs$ + 3);
+	if (!props.open || typeof document === "undefined") return positionalChildren([]);
+	const resetDrag = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, () => {
+		drag.current = null;
+		panel.current?.style.removeProperty("--xplat-sheet-drag-offset");
+		panel.current?.style.removeProperty("transition");
+	});
+	const onPointerDown = (event) => {
+		if (props.sheetGesturesEnabled === false || !event.isPrimary || event.button !== 0) return;
+		drag.current = {
+			pointerId: event.pointerId,
+			startY: event.clientY,
+			offsetY: 0
+		};
+		panel.current?.style.setProperty("transition", "none");
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, (event) => {
+		const active = drag.current;
+		if (!active || active.pointerId !== event.pointerId) return;
+		active.offsetY = Math.max(0, event.clientY - active.startY);
+		panel.current?.style.setProperty("--xplat-sheet-drag-offset", `${active.offsetY}px`);
+	});
+	const onPointerUp = (event) => {
+		const active = drag.current;
+		if (!active || active.pointerId !== event.pointerId) return;
+		const shouldDismiss = active.offsetY >= Math.min(120, window.innerHeight * .18);
+		resetDrag();
+		if (shouldDismiss && props.sheetGesturesEnabled !== false) props.onDismissed?.();
+	};
+	const onCancel = (event) => {
+		event.preventDefault();
+		if (props.shouldDismissOnBackPress ?? true) props.onDismissed?.();
+	};
+	const onKeyDown = __hk[2] ?? hookMemoPublishInvariant(__hk, 2, (event) => {
+		if (event.key !== "Tab") return;
+		const current = dialog.current;
+		const active = current?.ownerDocument.activeElement;
+		if (!current?.open || active !== current && !panel.current?.contains(active)) return;
+		const stops = panel.current ? tabStops(panel.current) : [];
+		const index = stops.indexOf(active);
+		event.preventDefault();
+		if (!stops.length) {
+			dialog.current?.focus({ preventScroll: true });
+			return;
 		}
-	})), createScopedValue(() => createScopedElement("div", {
-		role: "dialog",
+		stops[event.shiftKey ? index <= 0 ? stops.length - 1 : index - 1 : index < 0 || index === stops.length - 1 ? 0 : index + 1].focus({ preventScroll: true });
+	});
+	useEffect(() => {
+		const current = dialog.current;
+		if (!props.open || !current) return;
+		current.ownerDocument.addEventListener("keydown", onKeyDown, true);
+		return () => current.ownerDocument.removeEventListener("keydown", onKeyDown, true);
+	}, [props.open], _hs$ + 4);
+	return createScopedElement(Fragment, {}, () => positionalChildren([createScopedValue(() => createScopedElement("dialog", {
+		ref: dialog,
+		className: "xplat-web-sheet",
+		"aria-label": props.label ?? "Bottom sheet",
 		"aria-modal": "true",
 		style: {
-			position: "fixed",
-			left: 0,
-			right: 0,
-			bottom: 0,
-			zIndex: 1e3,
-			background: "var(--sheet-bg, Canvas)",
-			color: "var(--sheet-fg, CanvasText)",
-			borderRadius: "16px 16px 0 0",
-			boxShadow: "0 -4px 24px rgb(0 0 0 / 0.2)",
-			maxHeight: props.skipPartiallyExpanded ? "90vh" : "60vh",
-			overflowY: "auto"
+			"--xplat-sheet-scrim": props.scrimColor ?? "rgb(0 0 0 / 0.4)",
+			"--xplat-sheet-container": props.containerColor ?? "var(--sheet-bg, Canvas)",
+			"--xplat-sheet-content": props.contentColor ?? "var(--sheet-fg, CanvasText)",
+			"--xplat-sheet-max-height": props.skipPartiallyExpanded ? "90vh" : "60vh"
+		},
+		onCancel,
+		onClick: (event) => {
+			if (event.target === event.currentTarget && (props.shouldDismissOnClickOutside ?? true)) props.onDismissed?.();
 		}
-	}, () => positionalChildren([(props.showDragHandle ?? true) && createScopedValue(() => createScopedElement("div", { style: {
-		display: "flex",
-		justifyContent: "center",
-		padding: "8px 0"
-	} }, () => createScopedValue(() => createElement("div", { style: {
-		width: 36,
-		height: 4,
-		borderRadius: 2,
-		background: "color-mix(in srgb, CanvasText 30%, transparent)"
-	} })))), props.content?.()])))]));
+	}, () => createScopedValue(() => createScopedElement("div", {
+		ref: panel,
+		id: props.id,
+		className: "xplat-web-sheet-panel " + (props.className ?? ""),
+		style: props.style
+	}, () => positionalChildren([(props.showDragHandle ?? true) && createScopedValue(() => createElement("div", {
+		className: "xplat-web-sheet-handle",
+		"aria-hidden": "true",
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: resetDrag
+	}, createElement("div", { className: "xplat-web-sheet-handle-mark" }))), props.content?.()])))))]));
 };
 //#endregion
 export { BottomSheet };

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "e60f4b8c-acc0-404d-89f0-5ee4a3e3365b",
+  "buildId": "6220e54f-fce6-443b-8aa6-2f815351b5b7",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/sheet.css

@@ -0,0 +1,58 @@
+/* xplat-web-only:start */
+.xplat-web-sheet {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	overflow: visible;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+.xplat-web-sheet::backdrop {
+	background: var(--xplat-sheet-scrim, rgb(0 0 0 / 0.4));
+}
+
+.xplat-web-sheet-panel {
+	box-sizing: border-box;
+	width: 100%;
+	max-height: var(--xplat-sheet-max-height, 60vh);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	background: var(--xplat-sheet-container, var(--sheet-bg, Canvas));
+	color: var(--xplat-sheet-content, var(--sheet-fg, CanvasText));
+	border-radius: 16px 16px 0 0;
+	box-shadow: 0 -4px 24px rgb(0 0 0 / 0.2);
+	transform: translateY(var(--xplat-sheet-drag-offset, 0px));
+	transition: transform 180ms ease-out;
+}
+
+.xplat-web-sheet-handle {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+	cursor: grab;
+	touch-action: none;
+}
+
+.xplat-web-sheet-handle-mark {
+	width: 36px;
+	height: 4px;
+	border-radius: 2px;
+	background: color-mix(in srgb, CanvasText 30%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.xplat-web-sheet-panel {
+		transition: none;
+	}
+}
+/* xplat-web-only:end */
+/*$vite$:1*/

package/dist/web/web/index.js

@@ -1,2 +1,3 @@
+/* empty css           */
 import { BottomSheet } from "../BottomSheet.web.tsrx.js";
 export { BottomSheet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/sheet",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Platform-specific modal bottom sheet controls for Octane xplat",
   "repository": {
     "type": "git",
@@ -26,7 +26,8 @@
     "./web": {
       "types": "./types/web/index.d.ts",
       "web": "./dist/web/web/index.js"
-    }
+    },
+    "./web/styles.css": "./dist/web/sheet.css"
   },
   "publishConfig": {
     "access": "public"
@@ -40,7 +41,7 @@
     "@nativescript/core": "9.1.2",
     "@octanejs/vite-plugin": "0.1.60",
     "octane": "0.5.0",
-    "tsrx-typegen": "0.2.1",
+    "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },

package/src/AppKitSheet.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import { useEffect, useRef } from 'octane'
 import type { AppKitSheetProps } from './macos/types'
 

package/src/BottomSheet.web.tsrx

@@ -1,48 +1,210 @@
 /** @jsxImportSource octane */
-import type { BottomSheetProps } from './web/types'
+import { useEffect, useRef } from 'octane'
+import type { BottomSheetProps, WebFocusTarget } from './web/types'
 
-/** Web bottom sheet: a fixed-position panel over a scrim. `open` controls
- *  visibility; `onDismissed` fires on scrim click / Escape. */
+function tabStops(panel: HTMLElement): HTMLElement[] {
+	return Array.from(
+		panel.querySelectorAll<HTMLElement>(
+			'a[href],button,input:not([type="hidden"]),textarea,select,[tabindex],[contenteditable="true"]',
+		),
+	).filter((element) => {
+		if (
+			element.tabIndex < 0 ||
+			element.matches(':disabled') ||
+			element.closest('[inert],[hidden],[aria-hidden="true"]')
+		) {
+			return false
+		}
+
+		for (let parent: HTMLElement | null = element; parent; parent = parent.parentElement) {
+			const style = getComputedStyle(parent)
+			if (style.display === 'none' || style.visibility === 'hidden') {
+				return false
+			}
+		}
+
+		return true
+	})
+}
+
+/** Web bottom sheet: a modal browser dialog. `open` controls visibility;
+ *  `onDismissed` fires for enabled Escape, scrim, and drag dismissals. */
 export function BottomSheet(props: BottomSheetProps) @{
-	const open = props.open ?? false
-	const dismissable = (props.shouldDismissOnClickOutside ?? true) || (props.shouldDismissOnBackPress ?? true)
+	const dialog = useRef<HTMLDialogElement | null>(null)
+	const panel = useRef<HTMLDivElement | null>(null)
+	const drag = useRef<{ pointerId: number; startY: number; offsetY: number } | null>(null)
+
+	useEffect(() => {
+		const current = dialog.current
+		if (!props.open || !current || current.open) {
+			return
+		}
+
+		const trigger =
+			props.finalFocusRef?.current ?? (current.ownerDocument.activeElement as WebFocusTarget | null)
+
+		const previousTabIndex = current.getAttribute('tabindex')
+		current.showModal()
+		const stops = panel.current ? tabStops(panel.current) : []
+		const autofocus = current.querySelector<HTMLElement>('[autofocus]')
+		const initialFocus =
+			(autofocus && !autofocus.matches(':disabled,[hidden],[inert]') ? autofocus : null) ??
+			stops[0] ??
+			current
+
+		if (initialFocus === current && previousTabIndex === null) {
+			current.tabIndex = -1
+		}
+
+		initialFocus.focus({ preventScroll: true })
+
+		return () => {
+			if (current.open) {
+				current.close()
+			}
+
+			if (previousTabIndex === null && initialFocus === current) {
+				current.removeAttribute('tabindex')
+			}
 
-	if (!open) {
+			requestAnimationFrame(() => {
+				if (trigger?.isConnected && !trigger.closest('[inert]')) {
+					trigger.focus({ preventScroll: true })
+				}
+			})
+		}
+	}, [props.open])
+
+	if (!props.open || typeof document === 'undefined') {
 		return <></>
 	}
 
+	const resetDrag = () => {
+		drag.current = null
+		panel.current?.style.removeProperty('--xplat-sheet-drag-offset')
+		panel.current?.style.removeProperty('transition')
+	}
+
+	const onPointerDown = (event: PointerEvent) => {
+		if (props.sheetGesturesEnabled === false || !event.isPrimary || event.button !== 0) {
+			return
+		}
+
+		drag.current = { pointerId: event.pointerId, startY: event.clientY, offsetY: 0 }
+		panel.current?.style.setProperty('transition', 'none')
+
+		;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+	}
+
+	const onPointerMove = (event: PointerEvent) => {
+		const active = drag.current
+		if (!active || active.pointerId !== event.pointerId) {
+			return
+		}
+
+		active.offsetY = Math.max(0, event.clientY - active.startY)
+		panel.current?.style.setProperty('--xplat-sheet-drag-offset', `${active.offsetY}px`)
+	}
+
+	const onPointerUp = (event: PointerEvent) => {
+		const active = drag.current
+		if (!active || active.pointerId !== event.pointerId) {
+			return
+		}
+
+		const shouldDismiss = active.offsetY >= Math.min(120, window.innerHeight * 0.18)
+		resetDrag()
+
+		if (shouldDismiss && props.sheetGesturesEnabled !== false) {
+			props.onDismissed?.()
+		}
+	}
+
+	const onCancel = (event: Event) => {
+		event.preventDefault()
+		if (props.shouldDismissOnBackPress ?? true) {
+			props.onDismissed?.()
+		}
+	}
+
+	const onKeyDown = (event: KeyboardEvent) => {
+		if (event.key !== 'Tab') {
+			return
+		}
+
+		const current = dialog.current
+		const active = current?.ownerDocument.activeElement
+		if (!current?.open || (active !== current && !panel.current?.contains(active))) {
+			return
+		}
+
+		const stops = panel.current ? tabStops(panel.current) : []
+		const index = stops.indexOf(active as HTMLElement)
+		event.preventDefault()
+		if (!stops.length) {
+			dialog.current?.focus({ preventScroll: true })
+			return
+		}
+
+		const nextIndex = event.shiftKey
+			? index <= 0 ? stops.length - 1 : index - 1
+			: index < 0 || index === stops.length - 1 ? 0 : index + 1
+
+		stops[nextIndex].focus({ preventScroll: true })
+	}
+
+	useEffect(() => {
+		const current = dialog.current
+		if (!props.open || !current) {
+			return
+		}
+
+		current.ownerDocument.addEventListener('keydown', onKeyDown, true)
+		return () => current.ownerDocument.removeEventListener('keydown', onKeyDown, true)
+	}, [props.open])
+
 	<>
-		<div
-			style={{ position: 'fixed', inset: 0, background: 'rgb(0 0 0 / 0.4)', zIndex: 999 }}
-			onClick={() => {
-				if (props.shouldDismissOnClickOutside ?? true) {
-					props.onDismissed?.()
-				}
-			}}
-		/>
-		<div
-			role="dialog"
+		<dialog
+			ref={dialog}
+			className="xplat-web-sheet"
+			aria-label={props.label ?? 'Bottom sheet'}
 			aria-modal="true"
 			style={{
-				position: 'fixed',
-				left: 0,
-				right: 0,
-				bottom: 0,
-				zIndex: 1000,
-				background: 'var(--sheet-bg, Canvas)',
-				color: 'var(--sheet-fg, CanvasText)',
-				borderRadius: '16px 16px 0 0',
-				boxShadow: '0 -4px 24px rgb(0 0 0 / 0.2)',
-				maxHeight: props.skipPartiallyExpanded ? '90vh' : '60vh',
-				overflowY: 'auto',
+				'--xplat-sheet-scrim': props.scrimColor ?? 'rgb(0 0 0 / 0.4)',
+				'--xplat-sheet-container': props.containerColor ?? 'var(--sheet-bg, Canvas)',
+				'--xplat-sheet-content': props.contentColor ?? 'var(--sheet-fg, CanvasText)',
+				'--xplat-sheet-max-height': props.skipPartiallyExpanded ? '90vh' : '60vh',
+			}}
+			onCancel={onCancel}
+			onClick={(event: MouseEvent) => {
+				if (
+					event.target === event.currentTarget &&
+					(props.shouldDismissOnClickOutside ?? true)
+				) {
+					props.onDismissed?.()
+				}
 			}}
 		>
-			{(props.showDragHandle ?? true) && (
-				<div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0' }}>
-					<div style={{ width: 36, height: 4, borderRadius: 2, background: 'color-mix(in srgb, CanvasText 30%, transparent)' }} />
-				</div>
-			)}
-			{props.content?.()}
-		</div>
-	</>;
+			<div
+				ref={panel}
+				id={props.id}
+				className={'xplat-web-sheet-panel ' + (props.className ?? '')}
+				style={props.style}
+			>
+				{(props.showDragHandle ?? true) && (
+					<div
+						className="xplat-web-sheet-handle"
+						aria-hidden="true"
+						onPointerDown={onPointerDown}
+						onPointerMove={onPointerMove}
+						onPointerUp={onPointerUp}
+						onPointerCancel={resetDrag}
+					>
+						<div className="xplat-web-sheet-handle-mark" />
+					</div>
+				)}
+				{props.content?.()}
+			</div>
+		</dialog>
+	</>
 }

package/src/web/index.ts

@@ -1,2 +1,4 @@
+import './styles.css'
+
 export { BottomSheet } from '../BottomSheet.web.tsrx'
 export type { BottomSheetProps } from './types'

package/src/web/styles.css

@@ -0,0 +1,57 @@
+/* xplat-web-only:start */
+.xplat-web-sheet {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	overflow: visible;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+.xplat-web-sheet::backdrop {
+	background: var(--xplat-sheet-scrim, rgb(0 0 0 / 0.4));
+}
+
+.xplat-web-sheet-panel {
+	box-sizing: border-box;
+	width: 100%;
+	max-height: var(--xplat-sheet-max-height, 60vh);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	background: var(--xplat-sheet-container, var(--sheet-bg, Canvas));
+	color: var(--xplat-sheet-content, var(--sheet-fg, CanvasText));
+	border-radius: 16px 16px 0 0;
+	box-shadow: 0 -4px 24px rgb(0 0 0 / 0.2);
+	transform: translateY(var(--xplat-sheet-drag-offset, 0px));
+	transition: transform 180ms ease-out;
+}
+
+.xplat-web-sheet-handle {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+	cursor: grab;
+	touch-action: none;
+}
+
+.xplat-web-sheet-handle-mark {
+	width: 36px;
+	height: 4px;
+	border-radius: 2px;
+	background: color-mix(in srgb, CanvasText 30%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.xplat-web-sheet-panel {
+		transition: none;
+	}
+}
+/* xplat-web-only:end */

package/src/web/types.ts

@@ -1,5 +1,16 @@
+/** Minimal element shape used by the Web focus-restoration ref. */
+export type WebFocusTarget = {
+	focus(options?: { preventScroll?: boolean }): void
+	isConnected: boolean
+	closest(selector: string): object | null
+}
+
 export interface BottomSheetProps {
 	id?: string
+	/** Accessible name for the modal dialog. */
+	label?: string
+	/** Element that should regain focus when the sheet closes. */
+	finalFocusRef?: { current: WebFocusTarget | null }
 	className?: any
 	style?: any
 	open?: boolean

package/types/web/index.d.ts

@@ -1,5 +1,16 @@
+/** Minimal element shape used by the Web focus-restoration ref. */
+type WebFocusTarget = {
+	focus(options?: { preventScroll?: boolean }): void
+	isConnected: boolean
+	closest(selector: string): object | null
+}
+
 export interface BottomSheetProps {
 	id?: string
+	/** Accessible name for the modal dialog. */
+	label?: string
+	/** Element that should regain focus when the sheet closes. */
+	finalFocusRef?: { current: WebFocusTarget | null }
 	className?: any
 	style?: any
 	open?: boolean