@octane-xplat/ui 0.7.2 → 0.9.0

package/src/index.shared.web.ts

@@ -0,0 +1,291 @@
+// Generated by scripts/sync-ui-barrels.mjs from index.shared.ts. Do not edit.
+// Foundations and common controls
+export { View } from './View'
+export { View as Column } from './View'
+export { Row } from './Row'
+export { Grid } from './Grid'
+export { Stack } from './Stack'
+export { Absolute } from './Absolute'
+export type { PanEvent, SwipeEvent, SetTranslate } from './props'
+export { setTranslate } from './translate.web'
+export { Spacer } from './Spacer'
+export { Text } from './Text'
+export { Markdown, MarkdownScreen } from './Markdown'
+export type { MdDoc, MdNode, MdInline } from './Markdown'
+export { RichText, RichTextSpan } from './RichText'
+export { Pressable } from './Pressable'
+export { Button } from './Button'
+export { Collapsible } from './Collapsible'
+export { Accordion } from './Accordion'
+export { Checkbox } from './Checkbox'
+export { RadioGroup } from './RadioGroup'
+export { DropdownMenu } from './DropdownMenu'
+export { ContextMenu } from './ContextMenu'
+export { Badge } from './Badge'
+export { Separator } from './Separator'
+export { Skeleton } from './Skeleton'
+export { Avatar } from './Avatar'
+export { AvatarGroup } from './AvatarGroup'
+export type {
+	AccordionItemSpec,
+	AccordionProps,
+	AvatarGroupProps,
+	AvatarProps,
+	BadgeProps,
+	ButtonProps,
+	CheckboxProps,
+	CollapsibleProps,
+	ContextMenuProps,
+	DropdownMenuProps,
+	MenuItem,
+	RadioGroupProps,
+	RadioOption,
+	SegmentedControlProps,
+	SeparatorProps,
+	SkeletonProps,
+} from './props'
+
+// Forms and data entry
+export { FormField } from './FormField'
+export { FieldGroup } from './FieldGroup'
+export { ListItem } from './ListItem'
+export { InputNumber } from './InputNumber'
+export { PinInput } from './PinInput'
+export { Select } from './Select'
+export { SelectMenu, Combobox, InputMenu } from './aliases'
+export { InputTags } from './InputTags'
+export { InputRating } from './InputRating'
+export { CheckboxGroup } from './CheckboxGroup'
+export type {
+	CheckboxGroupProps,
+	FieldGroupProps,
+	ListItemComponent,
+	ListItemProps,
+	ListItemSlotProps,
+	FormFieldProps,
+	InputNumberProps,
+	InputRatingProps,
+	InputTagsProps,
+	PinInputProps,
+	SelectOption,
+	SelectProps,
+} from './props'
+
+// Navigation and command surfaces
+export { Breadcrumb } from './Breadcrumb'
+export { Pagination } from './Pagination'
+export { Stepper } from './Stepper'
+export { NavigationMenu } from './NavigationMenu'
+export { CommandPalette } from './CommandPalette'
+export type {
+	BreadcrumbItem,
+	BreadcrumbProps,
+	CommandPaletteProps,
+	NavigationMenuItem,
+	NavigationMenuProps,
+	PaginationProps,
+	StepperProps,
+	StepperStep,
+} from './props'
+
+// Content and display
+export { Table } from './Table'
+export { Timeline } from './Timeline'
+export { Tree } from './Tree'
+export { Alert } from './Alert'
+export { Card } from './Card'
+export { Chip } from './Chip'
+export { Kbd } from './Kbd'
+export { Empty } from './Empty'
+export { Banner } from './Banner'
+export { User } from './User'
+export { ProgressGroup } from './ProgressGroup'
+export type {
+	AlertProps,
+	BannerProps,
+	CardProps,
+	ChipProps,
+	EmptyProps,
+	KbdProps,
+	ProgressGroupProps,
+	TableColumn,
+	TableProps,
+	TimelineItem,
+	TimelineProps,
+	TreeNode,
+	TreeProps,
+	UserProps,
+} from './props'
+
+// Links, input, scrolling, media, and overlays
+export { Link } from './Link'
+export { NavLink } from './NavLink'
+export { TextInput } from './TextInput'
+export { TextArea } from './TextArea'
+export { SearchInput } from './SearchInput'
+export { SegmentedControl } from './SegmentedControl'
+export { ScrollBox } from './ScrollBox'
+export { ScrollView } from './ScrollView'
+export { VirtualList } from './VirtualList'
+export type { VirtualListProps } from './props'
+export { Image } from './Image'
+export { WebView } from './WebView'
+export type { WebViewContentSize, WebViewHandle, WebViewLoadEvent, WebViewProps } from './props'
+export { Overlay } from './Overlay'
+export { Popover } from './Popover'
+export { Hoverable } from './Hoverable'
+export { Tooltip } from './Tooltip'
+export { showToast } from './toast-anchor'
+export type {
+	HoverableProps,
+	OverlayProps,
+	PopoverAnchorRef,
+	PopoverProps,
+	PopoverPlacement,
+	ToastContent,
+	ToastOptions,
+	ToastPosition,
+	TooltipProps,
+} from './props'
+
+// Animation, theme, styling, and host services
+export { useAnimation } from './anim'
+export type { AnimatedValue } from './anim'
+export {
+	useThemeScheme,
+	getThemeScheme,
+	setThemePreference,
+	getThemePreference,
+	themeSchemeClasses,
+	onThemeSchemeChange,
+	applyThemeClasses,
+} from './theme/theme-scheme'
+
+export { useColorScheme, getColorScheme } from './theme/colorScheme.web'
+export type { ColorScheme } from './theme/colorScheme.web'
+export { styled } from './styled'
+export { openWindow } from './windows.web'
+
+// Screens, visual controls, and icons
+export { Screen } from './Screen'
+export { Tabs } from './Tabs'
+export type { TabSpec } from './Tabs'
+export { Switch } from './Switch'
+export { SafeArea } from './SafeArea'
+export { KeyboardAvoiding } from './KeyboardAvoiding'
+export { Drawer } from './Drawer'
+export { useSafeAreaInsets } from './safeAreaInsets'
+export type { SafeAreaInsets } from './safeAreaInsets'
+export { useMeasure } from './useMeasure'
+export type { MeasureBounds, MeasureResult, UseMeasureOptions } from './props'
+export { ActivityIndicator } from './ActivityIndicator'
+export { Meter } from './Meter'
+export { Slider } from './Slider'
+export { Icon } from './Icon'
+export { Heading } from './Heading'
+export { registerIcon, registerIcons } from './icons'
+export type { IconGlyph } from './icons'
+export type {
+	ActivityIndicatorProps,
+	HeadingProps,
+	IconProps,
+	MeterProps,
+	RefreshProps,
+	SearchInputProps,
+	SliderProps,
+} from './props'
+
+// Platform state and routing
+export { isNative } from './platform.web'
+export { registerStack, getStack, stackEntries } from './stacks.web'
+export {
+	pushRoute,
+	popRoute,
+	routeStacks,
+	pushDeepLink,
+	routeFor,
+	currentRoute,
+	currentModalRoute,
+	canGoBack,
+	useCanGoBack,
+	useRoute,
+	useModalRoute,
+	redirect,
+	addBackInterceptor,
+	registerScreens,
+	registerRoutes,
+	addRoutes,
+	screenFor,
+	hrefFor,
+	layoutsForRoute,
+} from './route.web'
+
+export { useBackInterceptor } from './use-back'
+
+export {
+	deriveRouteManifest,
+	defineRoutes,
+	mergeRouteManifests,
+	manifestToJson,
+} from './route-table'
+
+export type {
+	BeforeLoad,
+	BeforeLoadArgs,
+	LinkProps,
+	NavLinkProps,
+	Route,
+	RouteContext,
+	RouteHead,
+	RouteHeadExport,
+	RouteMeta,
+	RouteManifest,
+	RouteManifestJson,
+	RouteJson,
+	RouteDataMode,
+	RouteNameOfPath,
+	RouteParamsFromSpecs,
+	RoutePathParams,
+	RoutePresentationsFromSpecs,
+	RouteSpec,
+	RouteSpecSet,
+	ManifestRouteNames,
+	ManifestRouteParams,
+	ManifestRoutePresentations,
+	SpecRouteInfo,
+	ScreenTable,
+	ModalOpenResult,
+	OpenWindowOptions,
+} from './props'
+
+// Stores, sheets, and shared prop types
+export { createStore } from './store'
+export type { Store, ReadableStore } from './store'
+export { useStore } from './use-store'
+export { Sheet } from './Sheet'
+export { openSheet, closeSheet } from './sheet-service.web'
+export type { SheetProps, SheetOpenOptions, OpenSheet } from './props'
+export type {
+	AbsoluteProps,
+	DrawerProps,
+	GridProps,
+	ImageProps,
+	KeyboardAvoidingProps,
+	LayoutChildProps,
+	PressableProps,
+	RichTextProps,
+	RichTextSpanProps,
+	RowProps,
+	ScreenProps,
+	SafeAreaProps,
+	ScrollBoxProps,
+	ScrollViewProps,
+	SpacerProps,
+	StackProps,
+	SwitchProps,
+	TabsProps,
+	TextAreaProps,
+	TextInputProps,
+	TextProps,
+	ViewProps,
+} from './props'

package/src/index.web.ts

@@ -1 +1 @@
-export * from './index.shared'
+export * from './index.shared.web'

package/src/input-readiness.web.test.tsrx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest';
+import { act, createRoot } from 'octane';
+import { Pressable } from './Pressable.web.tsrx';
+import { TextInput } from './TextInput.web.tsrx';
+import { TextArea } from './TextArea.web.tsrx';
+import { SearchInput } from './SearchInput.web.tsrx';
+
+describe('keyboard access', () => {
+	it('cancels a held long press when disabled before its timer fires', () => {
+		vi.useFakeTimers();
+		try {
+			const host = document.createElement('div');
+			const root = createRoot(host);
+			const hold = vi.fn();
+			act(() => root.render(<Pressable onLongPress={hold}>Hold</Pressable>));
+			act(() => host.firstElementChild!.dispatchEvent(new Event('pointerdown', { bubbles: true })));
+			act(() => root.render(<Pressable onLongPress={hold} disabled>Hold</Pressable>));
+			act(() => vi.advanceTimersByTime(600));
+			expect(hold).not.toHaveBeenCalled();
+			root.unmount();
+		} finally {
+			vi.useRealTimers();
+		}
+	});
+
+	it('makes actionable Pressables keyboard reachable and activates once per key', () => {
+		const host = document.createElement('div');
+		document.body.appendChild(host);
+		const root = createRoot(host);
+		const press = vi.fn();
+		act(() => root.render(<Pressable onPress={press}>Save</Pressable>));
+		const button = host.firstElementChild as HTMLElement;
+		expect(button.tabIndex).toBe(0);
+		act(() => {
+			button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+			button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', repeat: true, bubbles: true }));
+			button.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter', bubbles: true }));
+		});
+
+		expect(press).toHaveBeenCalledTimes(1);
+		act(() => {
+			button.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+			button.dispatchEvent(new KeyboardEvent('keyup', { key: ' ', bubbles: true }));
+		});
+
+		expect(press).toHaveBeenCalledTimes(2);
+		act(() => root.render(<Pressable onPress={press} disabled>Save</Pressable>));
+		expect(button.tabIndex).toBe(-1);
+		act(() => button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })));
+		expect(press).toHaveBeenCalledTimes(2);
+		root.unmount();
+		host.remove();
+	});
+
+	for (const Component of [TextInput, TextArea, SearchInput]) {
+		it(`does not submit ${Component.name} while Enter confirms composition`, () => {
+			const host = document.createElement('div');
+			const root = createRoot(host);
+			const submit = vi.fn();
+			act(() => root.render(<Component onSubmit={submit} />));
+			const input = host.querySelector('input,textarea')!;
+			act(() => input.dispatchEvent(new KeyboardEvent('keydown', {
+				key: 'Enter', ctrlKey: true, isComposing: true, bubbles: true,
+			})));
+
+			expect(submit).not.toHaveBeenCalled();
+			// Some engines report composition-confirming Enter as keyCode 229.
+			act(() => input.dispatchEvent(new KeyboardEvent('keydown', {
+				key: 'Enter', ctrlKey: true, keyCode: 229, bubbles: true,
+			})));
+
+			expect(submit).not.toHaveBeenCalled();
+			act(() => input.dispatchEvent(new KeyboardEvent('keydown', {
+				key: 'Enter', ctrlKey: true, bubbles: true,
+			})));
+
+			expect(submit).toHaveBeenCalledTimes(1);
+			root.unmount();
+		});
+	}
+});

package/src/ios/UITabBar.ios.tsrx

@@ -37,6 +37,7 @@ function applyIcon(item: TabViewItem, name: string): void {
 		item.iconSource = name;
 		return;
 	}
+
 	const glyph = getIcon(name);
 	if (!glyph) {
 		warnIconOnce(name, `tab icon '${name}' isn't registered — call registerIcons() at boot.`);

package/src/keyboard-inset.mobile.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@nativescript/core', () => ({
+	Application: {
+		android: {
+			foregroundActivity: {
+				getWindow: () => ({
+					getAttributes: () => ({ softInputMode: 0 }),
+					getDecorView: () => ({}),
+				}),
+			},
+		},
+	},
+	Utils: { layout: { toDeviceIndependentPixels: (px: number) => px / 2 } },
+}))
+
+import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile'
+
+describe('Android overlay keyboard inset', () => {
+	it('converts physical IME pixels to NativeScript transform dips', () => {
+		let listener: any
+		vi.stubGlobal('android', {
+			view: {
+				WindowManager: {
+					LayoutParams: { SOFT_INPUT_MASK_ADJUST: 240, SOFT_INPUT_ADJUST_RESIZE: 16 },
+				},
+			},
+		})
+
+		vi.stubGlobal('androidx', {
+			core: {
+				view: {
+					ViewCompat: {
+						OnApplyWindowInsetsListener: class {
+							onApplyWindowInsets: any
+							constructor(value: any) {
+								this.onApplyWindowInsets = value.onApplyWindowInsets
+							}
+						},
+						setOnApplyWindowInsetsListener: (_view: any, value: any) => {
+							listener = value
+						},
+					},
+					WindowInsetsCompat: { Type: { ime: () => 'ime', systemBars: () => 'bars' } },
+				},
+			},
+		})
+
+		try {
+			const host = { translateY: 0 }
+			const unbind = bindBottomInsetToKeyboard(host)
+			const insets = { getInsets: (type: string) => ({ bottom: type === 'ime' ? 600 : 100 }) }
+			expect(listener.onApplyWindowInsets({}, insets)).toBe(insets)
+			expect(host.translateY).toBe(-250)
+			unbind()
+			expect(host.translateY).toBe(0)
+			expect(listener).toBe(null)
+		} finally {
+			vi.unstubAllGlobals()
+		}
+	})
+})

package/src/keyboard-inset.mobile.ts

@@ -1,23 +1,25 @@
-import { Application } from '@nativescript/core';
+import { Application, Utils } from '@nativescript/core'
 
 // One shared observer tracks the keyboard's current bottom inset — a sheet
 // opened while the keyboard is ALREADY up must lift immediately (a
 // WillChangeFrame observer only learns about changes after binding), and a
 // focused field keeps the inset live across sheet swaps.
-const bound = new Set<any>();
-let inset = 0;
-let wired = false;
+const bound = new Set<any>()
+let inset = 0
+let wired = false
 
 const apply = () => {
 	bound.forEach((host) => {
-		host.translateY = -inset;
-	});
-};
-
+		host.translateY = -inset
+	})
+}
 
 const wireIos = () => {
-	if (wired) { return; }
-	wired = true;
+	if (wired) {
+		return
+	}
+
+	wired = true
 	NSNotificationCenter.defaultCenter.addObserverForNameObjectQueueUsingBlock(
 		UIKeyboardWillChangeFrameNotification,
 		null,
@@ -25,14 +27,19 @@ const wireIos = () => {
 		(note: any) => {
 			// UIKeyboardFrameEndUserInfoKey arrives boxed as NSValue whose
 			// `CGRectValue` marshals to a plain CGRect object (not a call).
-			const raw = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
-			const boxed = raw?.CGRectValue;
-			const frame = typeof boxed === 'function' ? raw.CGRectValue() : (boxed ?? raw);
-			inset = Math.max(0, UIScreen.mainScreen.bounds.size.height - (frame?.origin?.y ?? UIScreen.mainScreen.bounds.size.height));
-			apply();
+			const raw = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey)
+			const boxed = raw?.CGRectValue
+			const frame = typeof boxed === 'function' ? raw.CGRectValue() : (boxed ?? raw)
+			inset = Math.max(
+				0,
+				UIScreen.mainScreen.bounds.size.height -
+					(frame?.origin?.y ?? UIScreen.mainScreen.bounds.size.height),
+			)
+
+			apply()
 		},
-	);
-};
+	)
+}
 
 /** Lift a bottom-anchored overlay host above the software keyboard.
  *  iOS: a shared UIKeyboardWillChangeFrame observer tracks the inset and
@@ -45,45 +52,58 @@ const wireIos = () => {
  *  restores the transform — call it when the host detaches. */
 export function bindBottomInsetToKeyboard(host: any): () => void {
 	if (Application.ios) {
-		wireIos();
-		bound.add(host);
-		host.translateY = -inset;
+		wireIos()
+		bound.add(host)
+		host.translateY = -inset
 		return () => {
-			bound.delete(host);
-			host.translateY = 0;
-		};
+			bound.delete(host)
+			host.translateY = 0
+		}
 	}
 
 	if (Application.android) {
-		const nativeWindow = Application.android.foregroundActivity?.window;
-		if (!nativeWindow) { return () => {}; }
-		const params = (globalThis as any).android?.view?.WindowManager?.LayoutParams;
-		if (!params) { return () => {}; }
+		const nativeWindow = Application.android.foregroundActivity?.getWindow()
+		if (!nativeWindow) {
+			return () => {}
+		}
+
+		const params = (globalThis as any).android?.view?.WindowManager?.LayoutParams
+		if (!params) {
+			return () => {}
+		}
+
 		// adjustResize resizes the RootLayout for us — an extra offset would
 		// double-lift the host.
-		if ((nativeWindow.attributes.softInputMode & params.SOFT_INPUT_MASK_ADJUST) === params.SOFT_INPUT_ADJUST_RESIZE) {
-			return () => {};
+		if (
+			(nativeWindow.getAttributes().softInputMode & params.SOFT_INPUT_MASK_ADJUST) ===
+			params.SOFT_INPUT_ADJUST_RESIZE
+		) {
+			return () => {}
 		}
 
-		const ViewCompat = (globalThis as any).androidx?.core?.view?.ViewCompat;
-		const WindowInsetsCompat = (globalThis as any).androidx?.core?.view?.WindowInsetsCompat;
-		if (!ViewCompat || !WindowInsetsCompat) { return () => {}; }
-		const decorView = nativeWindow.decorView;
+		const ViewCompat = (globalThis as any).androidx?.core?.view?.ViewCompat
+		const WindowInsetsCompat = (globalThis as any).androidx?.core?.view?.WindowInsetsCompat
+		if (!ViewCompat || !WindowInsetsCompat) {
+			return () => {}
+		}
+
+		const decorView = nativeWindow.getDecorView()
 		const listener = new ViewCompat.OnApplyWindowInsetsListener({
 			onApplyWindowInsets: (v: any, insets: any) => {
-				const ime = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom;
-				const nav = insets.getInsets(WindowInsetsCompat.Type.systemBars()).bottom;
-				host.translateY = -Math.max(0, ime - nav);
-				return insets;
+				const ime = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
+				const nav = insets.getInsets(WindowInsetsCompat.Type.systemBars()).bottom
+				// Insets are physical pixels; NativeScript transforms are dips.
+				host.translateY = -Utils.layout.toDeviceIndependentPixels(Math.max(0, ime - nav))
+				return insets
 			},
-		});
+		})
 
-		ViewCompat.setOnApplyWindowInsetsListener(decorView, listener);
+		ViewCompat.setOnApplyWindowInsetsListener(decorView, listener)
 		return () => {
-			host.translateY = 0;
-			ViewCompat.setOnApplyWindowInsetsListener(decorView, null);
-		};
+			host.translateY = 0
+			ViewCompat.setOnApplyWindowInsetsListener(decorView, null)
+		}
 	}
 
-	return () => {};
+	return () => {}
 }

package/src/layout-shells.macos.tsrx

@@ -1,10 +1,6 @@
 /** @jsxImportSource @xplat/macos/renderer */
-import type { KeyboardAvoidingProps, SafeAreaProps } from './props'
+import type { SafeAreaProps } from './props'
 
 export function SafeArea(props: SafeAreaProps) @{
 	<flexboxlayout flexDirection="column" className={props.className} style={props.style}>{props.children}</flexboxlayout>
 }
-
-export function KeyboardAvoiding(props: KeyboardAvoidingProps) @{
-	<flexboxlayout flexDirection="column" className={props.className} style={props.style}>{props.children}</flexboxlayout>
-}

package/src/macos-extras.macos.tsrx

@@ -5,6 +5,7 @@ import { cx } from './cx'
 export function Meter(props: MeterProps) @{
 	const size = props.size ?? 24
 	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size))
+
 	// Track ring via layer chrome; the progress arc itself needs a stroked
 	// CAShapeLayer — not bridged yet, so the ring renders unfilled.
 	<flexboxlayout
@@ -28,6 +29,7 @@ export function Meter(props: MeterProps) @{
 
 export function Heading(props: HeadingProps) @{
 	const level = props.level ?? 2
+
 	<label
 		id={props.id}
 		className={cx('vx-heading', `vx-h${level}`, props.className)}

package/src/modal-focus.web.test.tsrx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest';
+import { act, createRoot } from 'octane';
+vi.mock('./theme/theme-scheme', () => ({ useThemeScheme: () => 'light' }));
+import { Sheet } from './Sheet.web.tsrx';
+import { Overlay } from './Overlay.web.tsrx';
+import { isolateModalFocus } from './modal-focus.web';
+
+describe('modal focus isolation', () => {
+	for (const [name, Component] of [['Sheet', Sheet], ['Overlay', Overlay]] as const) {
+		it(`${name} isolates background focus and restores its trigger on close`, () => {
+			const host = document.createElement('div');
+			document.body.appendChild(host);
+			const root = createRoot(host);
+			act(() => root.render(<><button id="trigger">Open</button><Component open={false} shadeCover><button id="inside">Close</button></Component></>));
+			const trigger = host.querySelector('#trigger') as HTMLElement;
+			trigger.focus();
+			act(() => root.render(<><button id="trigger">Open</button><Component open shadeCover><button id="inside">Close</button></Component></>));
+			expect(host.hasAttribute('inert')).toBe(true);
+			expect(document.activeElement?.id).toBe('inside');
+			act(() => root.render(<><button id="trigger">Open</button><Component open={false} shadeCover><button id="inside">Close</button></Component></>));
+			expect(host.hasAttribute('inert')).toBe(false);
+			expect(document.activeElement).toBe(trigger);
+			act(() => root.render(<><button id="trigger">Open</button><Component open shadeCover><button id="inside">Close</button></Component></>));
+			expect(host.hasAttribute('inert')).toBe(true);
+			expect(document.activeElement?.id).toBe('inside');
+			root.unmount();
+			host.remove();
+		}, 30000);
+	}
+
+	it('preserves nested isolation when the lower modal closes first', async () => {
+		const host = document.createElement('div');
+		host.innerHTML = '<button id="return">Return</button>';
+		const existing = document.createElement('div');
+		existing.setAttribute('inert', '');
+		document.body.append(host, existing);
+		const trigger = host.firstElementChild as HTMLElement;
+		trigger.focus();
+		const outer = document.createElement('div');
+		outer.innerHTML = '<button>Outer</button>';
+		document.body.append(outer);
+		const closeOuter = isolateModalFocus(outer, outer, () => {});
+		const inner = document.createElement('div');
+		inner.innerHTML = '<button>Inner</button>';
+		document.body.append(inner);
+		await Promise.resolve(); // outer modal's observer sees the new portal
+		expect(inner.hasAttribute('inert')).toBe(true);
+		const closeInner = isolateModalFocus(inner, inner, () => {});
+		expect(outer.hasAttribute('inert')).toBe(true);
+		closeOuter();
+		outer.remove();
+		expect(host.hasAttribute('inert')).toBe(true);
+		expect(document.activeElement).toBe(inner.firstElementChild);
+		closeInner();
+		inner.remove();
+		expect(document.activeElement).toBe(trigger);
+		expect(host.hasAttribute('inert')).toBe(false);
+		expect(existing.hasAttribute('inert')).toBe(true);
+		host.remove();
+		existing.remove();
+	}, 30000);
+});