@octane-xplat/ui 0.7.3 → 0.9.0

package/src/PinInput.mobile.test.ts

@@ -0,0 +1,107 @@
+import { afterEach, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+vi.mock('./escape-props', () => ({ applyEscapeProps() {} }))
+vi.mock('./TextInput.tsrx', async () => {
+	const { defineUniversalComponent, universalPlan, universalValue, useRef } =
+		await import('octane/universal/native')
+
+	const plan = universalPlan('nativescript', {
+		kind: 'host',
+		type: 'test-input',
+		bindings: [
+			['value', 0],
+			['editable', 1],
+			['cell', 2],
+		],
+	})
+
+	return {
+		TextInput: defineUniversalComponent('nativescript', (props: any) => {
+			const handle = useRef({ focus: vi.fn(), blur: vi.fn(), native: {} })
+			props.bind?.(handle.current)
+			return universalValue(plan, [
+				props.value,
+				props.editable,
+				{ onChange: props.onChange, focus: handle.current.focus },
+			])
+		}),
+	}
+})
+
+import { PinInput } from './PinInput.tsrx'
+const roots: any[] = []
+function mount(props: any = {}) {
+	const container = createObjectContainer('nativescript')
+	const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+	roots.push(root)
+	root.render(PinInput as any, props)
+	flushUniversalSync(() => {})
+	const fields = (): any[] => {
+		const found: any[] = []
+		const walk = (node: any) => {
+			if (node.type === 'test-input') {
+				found.push(node)
+			}
+
+			for (const child of node.children ?? []) {
+				walk(child)
+			}
+		}
+
+		walk(container)
+		return found
+	}
+
+	const enter = (i: number, value: string) =>
+		flushUniversalSync(() => {
+			fields()[i].props.cell.onChange(value)
+		})
+
+	return { fields, enter }
+}
+
+afterEach(() => {
+	for (const root of roots.splice(0)) {
+		root.unmount()
+	}
+})
+
+it('clears a native controlled cell and its suffix', () => {
+	const change = vi.fn()
+	const { enter } = mount({ value: '1234', onValueChange: change })
+	enter(1, '')
+	expect(change).toHaveBeenCalledWith('1')
+})
+
+it('advances native focus after enabling the next cell and preserves handles across edits', async () => {
+	const complete = vi.fn()
+	const { fields, enter } = mount({ onComplete: complete })
+	expect(fields().map((field) => field.props.editable)).toEqual([true, false, false, false])
+	for (let i = 0; i < 4; i++) {
+		enter(i, String(i + 1))
+		await vi.waitFor(() => expect(fields()[i].props.value).toBe(String(i + 1)))
+		if (i < 3) {
+			await vi.waitFor(() => expect(fields()[i + 1].props.cell.focus).toHaveBeenCalled())
+		}
+	}
+
+	expect(complete).toHaveBeenCalledWith('1234')
+	enter(1, '')
+	await vi.waitFor(() => expect(fields().map((f) => f.props.value)).toEqual(['1', '', '', '']))
+})
+
+it('ignores disabled edits and edits beyond the next empty cell', () => {
+	const change = vi.fn()
+	const { enter } = mount({ onValueChange: change })
+	enter(3, '9')
+	expect(change).not.toHaveBeenCalled()
+	const disabled = mount({ disabled: true, value: '1234', onValueChange: change })
+	disabled.enter(1, '9')
+	expect(change).not.toHaveBeenCalled()
+})

package/src/PinInput.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useState } from 'octane';
+import { useEffect, useRef, useState } from 'octane';
 import type { PinInputProps, TextInputHandle } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
@@ -12,7 +12,15 @@ export function PinInput(props: PinInputProps) @{
 	const [internal, setInternal] = useState('');
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value! : internal;
-	const handles: (TextInputHandle | null)[] = [];
+	const handles = useRef<(TextInputHandle | null)[]>([]);
+	const pendingFocus = useRef<number | null>(null);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value]);
 
 	const setValue = (next: string) => {
 		const clipped = next.slice(0, length);
@@ -24,10 +32,16 @@ export function PinInput(props: PinInputProps) @{
 	const cellValue = (i: number) => value[i] ?? '';
 
 	const enter = (i: number, text: string) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 
 	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
@@ -36,10 +50,10 @@ export function PinInput(props: PinInputProps) @{
 				className="vx-pininput-cell"
 				keyboardType="number"
 				secure={props.secure}
-				editable={!props.disabled}
+				editable={!props.disabled && i <= value.length}
 				value={cellValue(i)}
 				onChange={(text: string) => enter(i, text)}
-				bind={(h: TextInputHandle) => { handles[i] = h; }}
+				bind={(h: TextInputHandle) => { handles.current[i] = h; }}
 			/>
 		}
 	</flexboxlayout>

package/src/PinInput.web.test.tsrx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from 'vitest'
+import { act, createRoot } from 'octane'
+import { PinInput } from './PinInput.web.tsrx'
+const roots:any[]=[]
+function mount(props:any={}) {
+ const el=document.createElement('div');document.body.append(el);const root=createRoot(el);roots.push(root)
+ const render=(next:any={}) => act(() => root.render(<PinInput {...props} {...next} />));render()
+ const inputs=() => Array.from(el.querySelectorAll('input'))
+ const enter=(i:number,value:string) => {const field=inputs()[i];field.value=value;act(() => field.dispatchEvent(new Event('input',{bubbles:true})))}
+ return {render,inputs,enter}
+}
+
+afterEach(() => {for (const root of roots.splice(0)) act(() => root.unmount());document.body.innerHTML=''})
+it('clears the edited cell and suffix of a controlled PIN', () => {
+ const change=vi.fn(),complete=vi.fn();const {enter}=mount({value:'1234',onValueChange:change,onComplete:complete});enter(1,'')
+ expect(change).toHaveBeenCalledWith('1');expect(complete).not.toHaveBeenCalled()
+})
+
+it('keeps editing contiguous and advances focus through an uncontrolled PIN', () => {
+ const change=vi.fn(),complete=vi.fn();const {inputs,enter}=mount({onValueChange:change,onComplete:complete})
+ expect(inputs().map(i => i.readOnly)).toEqual([false,true,true,true])
+ for (let i=0;i<4;i++) {enter(i,String(i+1));if (i<3) expect(document.activeElement).toBe(inputs()[i+1])}
+ expect(inputs().map(i=>i.value)).toEqual(['1','2','3','4']);expect(complete).toHaveBeenCalledTimes(1);expect(complete).toHaveBeenCalledWith('1234')
+ enter(1,'');expect(inputs().map(i=>i.value)).toEqual(['1','','','']);expect(change).toHaveBeenLastCalledWith('1')
+ enter(1,'5');expect(document.activeElement).toBe(inputs()[2]);expect(inputs().map(i=>i.value)).toEqual(['1','5','',''])
+ expect(complete).toHaveBeenCalledTimes(1)
+})
+
+it('replaces a filled cell without shifting later cells', () => {
+ const change=vi.fn(),complete=vi.fn();const {enter}=mount({value:'1234',onValueChange:change,onComplete:complete});enter(1,'29')
+ expect(change).toHaveBeenCalledWith('1934');expect(complete).toHaveBeenCalledWith('1934')
+})
+
+it('does not relocate input from a later empty cell to the beginning', () => {
+ const change=vi.fn();const {enter}=mount({onValueChange:change});enter(3,'9');expect(change).not.toHaveBeenCalled()
+})
+
+it('respects disabled cells and controlled updates', () => {
+ const {render,inputs}=mount({value:'1234',disabled:true});expect(inputs().every(i=>i.readOnly)).toBe(true)
+ render({value:'12',disabled:false});expect(inputs().map(i=>i.value)).toEqual(['1','2','','']);expect(inputs().map(i=>i.readOnly)).toEqual([false,false,false,true])
+})

package/src/PinInput.web.tsrx

@@ -1,4 +1,4 @@
-import { useState } from 'octane';
+import { useEffect, useRef, useState } from 'octane';
 import type { PinInputProps, TextInputHandle } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { TextInput } from './TextInput.web.tsrx';
@@ -10,7 +10,15 @@ export function PinInput(props: PinInputProps) @{
 	const [internal, setInternal] = useState('');
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value! : internal;
-	const handles: (TextInputHandle | null)[] = [];
+	const handles = useRef<(TextInputHandle | null)[]>([]);
+	const pendingFocus = useRef<number | null>(null);
+	useEffect(() => {
+		const next = pendingFocus.current;
+		if (next !== null && next <= value.length) {
+			pendingFocus.current = null;
+			handles.current[next]?.focus();
+		}
+	}, [value]);
 
 	const setValue = (next: string) => {
 		const clipped = next.slice(0, length);
@@ -22,10 +30,16 @@ export function PinInput(props: PinInputProps) @{
 	const cellValue = (i: number) => value[i] ?? '';
 
 	const enter = (i: number, text: string) => {
+		if (props.disabled || i > value.length) return;
 		const ch = text.slice(-1);
-		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		const next = ch ? (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length) : value.slice(0, i);
+		pendingFocus.current = ch && i < length - 1 ? i + 1 : null;
 		setValue(next);
-		if (ch && i < length - 1) handles[i + 1]?.focus();
+		if (pendingFocus.current !== null && pendingFocus.current <= value.length) {
+			const index = pendingFocus.current;
+			pendingFocus.current = null;
+			handles.current[index]?.focus();
+		}
 	};
 
 	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-pininput', props.disabled ? 'vx-pininput--disabled' : undefined, props.className]} style={props.style} role="group">
@@ -35,10 +49,10 @@ export function PinInput(props: PinInputProps) @{
 				className="vx-pininput-cell"
 				keyboardType="number"
 				secure={props.secure}
-				editable={!props.disabled}
+				editable={!props.disabled && i <= value.length}
 				value={cellValue(i)}
 				onChange={(text: string) => enter(i, text)}
-				bind={(h: TextInputHandle) => { handles[i] = h; }}
+				bind={(h: TextInputHandle) => { handles.current[i] = h; }}
 			/>
 		))}
 	</div>

package/src/Popover.tsrx

@@ -9,6 +9,7 @@ import { cx } from './cx';
 import { positionPopover, type PopoverPosition } from './popover-position';
 import { applyThemeClasses, useThemeScheme } from './theme/theme-scheme';
 import { rootLayoutFor } from './root-layout.mobile';
+import { createOverlayLifetime } from './overlay-lifetime.mobile';
 
 function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 	const panelRef = useRef<any>(null);
@@ -38,6 +39,7 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 			},
 			props.placement ?? 'bottom',
 		);
+
 		const insets = isIOS ? panelRef.current?.parent?.getSafeAreaInsets?.() : undefined;
 		const scale = isIOS ? Number(Screen.mainScreen.scale) || 1 : 1;
 		const panelPosition = {
@@ -45,6 +47,7 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
 			left: next.left - Number(insets?.left ?? 0) / scale,
 			top: next.top - Number(insets?.top ?? 0) / scale,
 		};
+
 		setPosition((current) =>
 			current?.left === panelPosition.left &&
 			current?.top === panelPosition.top &&
@@ -125,22 +128,15 @@ function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
  *  Overlay: a transparent host opened on the RootLayout enclosing the
  *  anchor, with PopoverLayer positioning itself over the anchor's rect. */
 export function Popover(props: PopoverProps) @{
-	const shown = useRef<{ host: any; root: any; unbindTheme?: () => void } | null>(null);
+	const shown = useRef<{ host: any; root: any; lifetime: ReturnType<typeof createOverlayLifetime> } | null>(null);
+
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
 
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.unbindTheme?.();
-			const owner = cur.host.parent as any;
-			if (owner?.hasChild?.(cur.host)) {
-				owner.close(cur.host).then(
-					() => cur.root.unmount?.(),
-					(error: any) => { console.error('[Popover] close failed', error); cur.root.unmount?.(); },
-				);
-			} else cur.root.unmount?.();
-
+			cur?.lifetime.close();
 			return;
 		}
 
@@ -158,14 +154,18 @@ export function Popover(props: PopoverProps) @{
 		host.horizontalAlignment = 'stretch';
 		host.verticalAlignment = 'stretch';
 		const root = createNativeScriptRoot(host);
-		shown.current = { host, root, unbindTheme };
-		root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
-		rl.open(host).catch((error: unknown) => {
+		const lifetime = createOverlayLifetime(rl, host, root, 'Popover', (dismissed) => {
 			if (shown.current?.host === host) shown.current = null;
-			console.error('[Popover] open failed', error);
-			root.unmount?.();
+			if (dismissed) dismiss.current?.();
 		});
+
+		lifetime.own(unbindTheme);
+		shown.current = { host, root, lifetime };
+		root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
+		lifetime.open();
 	}, [props.open, props.children, props.placement, props.className, props.style, props.dismissOnOutsideTap]);
 
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
 	<></>
 }

package/src/Pressable.tsrx

@@ -20,7 +20,7 @@ export function Pressable(props: PressableProps) @{
 		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
 		accessibilityHint={props.accessibilityHint}
 		accessibilityValue={props.accessibilityValue}
-		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityState={nativeAccessibilityState({ ...props.accessibilityState, disabled: props.disabled || props.accessibilityState?.disabled }) as any}
 		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
 		onPan={usePan(props.disabled ? undefined : props.onPan)}
 		onSwipe={props.disabled ? undefined : props.onSwipe}

package/src/Pressable.web.test.tsrx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from 'vitest'
+import { act, createRoot } from 'octane'
+import { Pressable } from './Pressable.web.tsrx'
+const roots: any[] = []
+function mount(props: any = {}) {
+ vi.useFakeTimers()
+ const el = document.createElement('div');document.body.append(el);const root=createRoot(el);roots.push(root)
+ const render = (next:any={}) => act(() => root.render(<Pressable {...props} {...next} />))
+ render();const pointer=(type:string) => act(() => el.firstElementChild!.dispatchEvent(new Event(type,{bubbles:true})))
+ const advance=() => act(() => vi.advanceTimersByTime(500))
+ return {root,render,pointer,advance}
+}
+
+afterEach(() => {for (const root of roots.splice(0)) act(() => root.unmount());document.body.innerHTML='';vi.useRealTimers()})
+it.each(['pointerup','pointerleave','pointercancel'])('cancels on %s after a rerender', (event) => {
+ const callback=vi.fn();const {render,pointer,advance}=mount({onLongPress:callback})
+ pointer('pointerdown');render({className:'updated'});pointer(event);advance();expect(callback).not.toHaveBeenCalled()
+})
+
+it('cancels on unmount', () => {
+ const callback=vi.fn();const {root,pointer,advance}=mount({onLongPress:callback});pointer('pointerdown');act(() => root.unmount());advance();expect(callback).not.toHaveBeenCalled()
+})
+
+it.each([{disabled:true},{onLongPress:undefined}])('cancels when long press becomes unavailable (%j)', (next) => {
+ const callback=vi.fn();const {render,pointer,advance}=mount({onLongPress:callback});pointer('pointerdown');render(next);advance();expect(callback).not.toHaveBeenCalled()
+})
+
+it('reports one long press through the latest callback', () => {
+ const old=vi.fn(),current=vi.fn();const {render,pointer,advance}=mount({onLongPress:old});pointer('pointerdown');render({onLongPress:current});advance();advance()
+ expect(old).not.toHaveBeenCalled();expect(current).toHaveBeenCalledTimes(1)
+})
+
+it('does not start a disabled long press', () => {
+ const callback=vi.fn();const {pointer,advance}=mount({onLongPress:callback,disabled:true});pointer('pointerdown');advance();expect(callback).not.toHaveBeenCalled()
+})

package/src/Pressable.web.tsrx

@@ -1,4 +1,4 @@
-import { useRef } from 'octane';
+import { useEffect, useRef } from 'octane';
 import type { PressableProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { layoutChildProps } from './layout-child.web';
@@ -6,17 +6,27 @@ import { usePan } from './pan.web.tsrx';
 
 export function Pressable(props: PressableProps) @{
 	const el = useRef<HTMLElement | null>(null);
-	let timer: ReturnType<typeof setTimeout> | null = null;
+	const spacePressed = useRef(false);
+	const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const latest = useRef(props);
+	latest.current = props;
 
 	usePan(el, props.disabled ? undefined : props.onPan);
 
-	const cancel = () => { if (timer !== null) { clearTimeout(timer); timer = null; } };
+	const cancel = () => { if (timer.current !== null) { clearTimeout(timer.current); timer.current = null; } };
+	useEffect(() => { if (props.disabled) spacePressed.current = false; }, [props.disabled]);
+	const enabled = !props.disabled && Boolean(props.onLongPress);
+	useEffect(() => { if (!enabled) cancel(); }, [enabled]);
+	useEffect(() => () => cancel(), []);
 
 	// Long-press parity with native: ~500ms hold over pointerdown/up.
 	const down = () => {
-		if (props.disabled || !props.onLongPress) return;
+		if (latest.current.disabled || !latest.current.onLongPress) return;
 		cancel();
-		timer = setTimeout(() => { timer = null; props.onLongPress?.(); }, 500);
+		timer.current = setTimeout(() => {
+			timer.current = null;
+			if (!latest.current.disabled) latest.current.onLongPress?.();
+		}, 500);
 	};
 
 	<div
@@ -28,11 +38,32 @@ export function Pressable(props: PressableProps) @{
 		aria-label={props.accessibilityLabel}
 		aria-description={props.accessibilityHint}
 		aria-valuetext={props.accessibilityValue}
-		aria-disabled={props.accessibilityState?.disabled ?? props.disabled ?? undefined}
+		aria-disabled={props.disabled || props.accessibilityState?.disabled || undefined}
 		aria-selected={props.accessibilityState?.selected}
 		aria-checked={props.accessibilityState?.checked}
 		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
 		aria-hidden={props.accessible === false ? true : undefined}
+		tabIndex={props.onPress && !props.disabled && props.accessible !== false ? 0 : -1}
+		onKeyDown={(e: KeyboardEvent) => {
+			if (e.target !== e.currentTarget || props.disabled || e.isComposing || !props.onPress) return;
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				if (!e.repeat) props.onPress();
+			} else if (e.key === ' ') {
+				e.preventDefault();
+				spacePressed.current = true;
+			}
+		}}
+		onKeyUp={(e: KeyboardEvent) => {
+			if (e.target !== e.currentTarget || e.key !== ' ') return;
+			const activate = spacePressed.current;
+			spacePressed.current = false;
+			if (activate && !props.disabled && props.onPress) {
+				e.preventDefault();
+				props.onPress();
+			}
+		}}
+		onBlur={() => { spacePressed.current = false; }}
 		onClick={props.disabled ? undefined : props.onPress}
 		onDoubleClick={props.disabled ? undefined : props.onDoublePress}
 		onPointerDown={(e: any) => { if (!props.disabled) { props.onPressIn?.(); down(); } }}

package/src/RouteHost.macos.tsrx

@@ -14,5 +14,6 @@ export function RouteHost(props: RouteHostProps) @{
 		const nested = child
 		child = <Layout>{nested}</Layout>
 	}
+
 	<>{child}</>
 }

package/src/SearchInput.tsrx

@@ -4,7 +4,8 @@ import type { SearchInputProps } from './props';
 import { Icon } from './Icon.tsrx';
 import { cx } from './cx';
 import { applyEscapeProps } from './escape-props';
-import { writeText } from './text-write';
+import { isWritingText, writeText } from './text-write';
+import { blurText } from './text-focus';
 
 /** Chrome-reset search field — a styled TextField (not UISearchBar) with a
  *  leading glyph and a self-drawn clear button, matching the web leaf.
@@ -40,13 +41,13 @@ export function SearchInput(props: SearchInputProps) @{
 			ref={(v: any) => {
 				el.current = v;
 				if (!v) return;
-				props.bind?.({ focus: () => v.focus(), blur: () => v.dismissSoftInput?.() ?? v.blur(), native: v });
+				props.bind?.({ focus: () => v.focus(), blur: () => blurText(v), native: v });
 			}}
 			className="vx-search-field"
 			hint={props.placeholder}
 			returnKeyType="search"
 			editable={props.editable ?? true}
-			onTextChange={(e: any) => setValue(e.value)}
+			onTextChange={(e: any) => { if (!isWritingText(e.object)) setValue(e.value); }}
 			onReturnPress={props.onSubmit}
 			onFocus={props.onFocus}
 			onBlur={props.onBlur}

package/src/SearchInput.web.tsrx

@@ -41,7 +41,7 @@ export function SearchInput(props: SearchInputProps) @{
 			enterKeyHint="search"
 			onInput={(e: any) => setValue(e.target.value)}
 			onKeyDown={(e: any) => {
-				if (e.key === 'Enter' && !e.shiftKey) props.onSubmit?.();
+				if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229) props.onSubmit?.();
 			}}
 			onFocus={props.onFocus}
 			onBlur={props.onBlur}

package/src/Sheet.tsrx

@@ -7,6 +7,7 @@ import type { SheetProps } from './props';
 import { cx } from './cx';
 import { applyThemeClasses } from './theme/theme-scheme';
 import { rootLayoutFor } from './root-layout.mobile';
+import { createOverlayLifetime } from './overlay-lifetime.mobile';
 import { attachSheetDetents } from './sheet-detents';
 import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile';
 import { attachTapToBlur } from './tap-to-blur';
@@ -23,28 +24,16 @@ export function Sheet(props: SheetProps) @{
 	const shown = useRef<{
 		host: GridLayout;
 		root: any;
-		unbindTheme?: () => void;
-		unbindKeyboard?: () => void;
-		programmatic?: boolean;
-		detach?: () => void;
+		lifetime: ReturnType<typeof createOverlayLifetime>;
 	} | null>(null);
 
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.programmatic = true;
-			cur.unbindTheme?.();
-			cur.unbindKeyboard?.();
-			cur.root.unmount?.();
-			const owner = cur.host.parent as any;
-			if (owner?.hasChild?.(cur.host)) {
-				owner.close(cur.host).catch((error: unknown) => {
-					console.error('[Sheet] close failed', error);
-				});
-			}
-
+			cur?.lifetime.close();
 			return;
 		}
 
@@ -63,6 +52,12 @@ export function Sheet(props: SheetProps) @{
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : undefined);
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, 'Sheet', (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
+
+		lifetime.own(unbindTheme);
 		// Detents: the controller owns enter/slide-out — RootLayout's open
 		// animation always lands translateY at 0, which would fight the
 		// detent offsets, so it's skipped while detents are attached.
@@ -77,23 +72,13 @@ export function Sheet(props: SheetProps) @{
 
 		// Lift the host above the software keyboard (todo 'Add' row inside a
 		// demo sheet is bottom-anchored and was covered on iOS).
-		const unbindKeyboard = bindBottomInsetToKeyboard(host);
-		attachTapToBlur(host);
-		const opened = { host, root, unbindTheme, unbindKeyboard, programmatic: false, detach: detents?.detach };
-		shown.current = opened;
+		lifetime.own(bindBottomInsetToKeyboard(host));
+		lifetime.own(attachTapToBlur(host));
+		if (detents) lifetime.own(detents.detach);
+		shown.current = { host, root, lifetime };
 		root.render(SheetBody as unknown as UniversalComponent, { children: props.children });
-		host.on('closed', () => {
-			if (shown.current === opened) shown.current = null;
-			opened.detach?.();
-			opened.unbindKeyboard?.();
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			// 'closed' fires for programmatic closes too — onDismiss only when
-			// the platform dismissed it (shade tap or detent drag-out).
-			if (!opened.programmatic) props.onDismiss?.();
-		});
 
-		rl.open(host, {
+		lifetime.open({
 			...(props.shadeCover ?? true)
 				? { shadeCover: { opacity: 0.4, tapToClose: true } }
 				: {},
@@ -105,17 +90,11 @@ export function Sheet(props: SheetProps) @{
 							exitTo: { translateY: 400, duration: 200 },
 						},
 					}),
-		})
-			.then(() => detents?.enter())
-			.catch((error: unknown) => {
-				if (shown.current === opened) shown.current = null;
-				opened.unbindKeyboard?.();
-				opened.unbindTheme?.();
-				opened.root.unmount?.();
-				console.error('[Sheet] open failed', error);
-			});
+		}, () => detents?.enter());
 	}, [props.open, props.children, props.className, props.style, props.shadeCover, props.ios, props.android]);
 
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
 	// Zero-size sentinel — the sheet resolves its owning RootLayout from the
 	// declaring component's ancestry, not getRootLayout() (first-mounted shell).
 	<stacklayout ref={(v: any) => { sentinel.current = v; }} style={{ width: 0, height: 0 }} />

package/src/Sheet.web.tsrx

@@ -4,6 +4,7 @@ import { cx } from './cx';
 import { useThemeScheme } from './theme/theme-scheme';
 import { normalizeDetents } from './sheet-snap';
 import { attachSheetDetents } from './sheet-detents.web';
+import { isolateModalFocus } from './modal-focus.web';
 
 /** In-window bottom sheet — portal layer with a backdrop and a bottom-
  *  anchored panel. Same vocabulary as the native RootLayout sheet.
@@ -13,8 +14,13 @@ import { attachSheetDetents } from './sheet-detents.web';
 export function Sheet(props: SheetProps) @{
 	const dark = useThemeScheme() === 'dark';
 	const panel = useRef<HTMLElement | null>(null);
+	const layer = useRef<HTMLDivElement | null>(null);
 	const dismiss = useRef(props.onDismiss);
 	dismiss.current = props.onDismiss;
+	useEffect(() => {
+		if (!props.open || props.shadeCover === false || !layer.current || !panel.current) return;
+		return isolateModalFocus(layer.current, panel.current, () => dismiss.current?.());
+	}, [props.open, props.shadeCover]);
 
 	const detents = normalizeDetents(props.detents);
 	const maxDetent = detents.length ? detents[detents.length - 1] : 0;
@@ -31,11 +37,13 @@ export function Sheet(props: SheetProps) @{
 
 	@if (props.open) {
 		<>{createPortal(
-			<div className={cx('vx-sheet-layer', dark && 'dark')}>
+			<div ref={layer} className={cx('vx-sheet-layer', dark && 'dark')}>
 				{(props.shadeCover ?? true) && <div className="vx-sheet-backdrop" onClick={props.onDismiss} />}
 				<div
 					ref={(el: any) => { panel.current = el; }}
 					className={cx('vx-sheet', detents.length && 'vx-sheet-detents', props.className)}
+					role={props.shadeCover === false ? undefined : 'dialog'}
+					aria-modal={props.shadeCover === false ? undefined : true}
 					style={{
 						...props.style,
 						...(detents.length

package/src/Text.tsrx

@@ -37,9 +37,11 @@ export function Text(props: TextProps) @{
 		'extra-bold': 800,
 		black: 900,
 	};
+
 	const fontWeight = /^\d+$/.test(fontWeightValue)
 		? Number(fontWeightValue)
 		: namedWeights[fontWeightValue];
+
 	const lineHeight = props.style?.lineHeight;
 	// UIFontDescriptor resolves variable fonts to the regular axis default on
 	// iOS. Set wght explicitly so CSS fontWeight selects the matching instance.