@octane-xplat/ui 0.7.3 → 0.10.0

package/src/BottomSheet.web.tsrx

@@ -0,0 +1,220 @@
+import { LayerDepthContext, LayerDepthProvider } from './layer-dismissal.tsrx';
+import { createPortal, useContext, useEffect, useMemo, useRef, useState } from 'octane';
+import type { BottomSheetProps, BottomSheetSwitcherProps } from './props';
+import {
+	BottomSheetSwitcherContext,
+	BottomSheetSwitcherProvider,
+	type BottomSheetRegistration,
+	type BottomSheetSwitcherHandle,
+} from './bottom-sheet-context';
+
+import { cx } from './cx';
+import { useThemeScheme } from './theme/theme-scheme';
+import { normalizeSnapPoints } from './sheet-snap';
+import { attachSheetDetents } from './sheet-detents.web';
+import { isolateModalFocus } from './modal-focus.web';
+import { applyEscapeProps } from './escape-props';
+
+const BASE_SCRIM = 0.4;
+
+function sheetHeightStyle(height: BottomSheetProps['height'], snapCount: number): Record<string, any> {
+	if (height == null || height === 'capped') {
+		// 'capped' = 62dvh (Astryx budget). With snap points the detents
+		// controller sizes the panel to the largest stop instead.
+		return snapCount ? {} : { height: '62dvh' };
+	}
+
+	if (height === 'hug') {
+		return snapCount ? {} : { maxHeight: '92dvh' };
+	}
+
+	if (height === 'tall') {
+		return snapCount ? {} : { height: '92dvh' };
+	}
+
+	return { height: typeof height === 'number' ? `${height}px` : height };
+}
+
+/** The shared bottom panel: scrim (when modal), grabber + snap/swipe
+ *  gestures, focus isolation, Escape discipline per `purpose`. Renders
+ *  `panel` — the active sheet's children for a switcher, or the
+ *  declarative sheet's own children standalone. */
+function BottomSheetLayer(props: {
+	sheet: BottomSheetProps;
+	panel: any;
+	onDismiss: () => void;
+}) @{
+	const { sheet, panel } = props;
+	const layerDepth = useContext(LayerDepthContext);
+	const dark = useThemeScheme() === 'dark';
+	const layer = useRef<HTMLDivElement | null>(null);
+	const panelEl = useRef<HTMLDivElement | null>(null);
+	const backdrop = useRef<HTMLDivElement | null>(null);
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+	const hasScrim = sheet.hasScrim ?? true;
+	const purpose = sheet.purpose ?? 'info';
+
+	const snapPoints = useMemo(
+		() => normalizeSnapPoints(sheet.snapPoints, typeof window === 'undefined' ? 0 : window.innerHeight),
+		[JSON.stringify(sheet.snapPoints ?? [])],
+	);
+
+	const snapKey = snapPoints.join(',');
+
+	// Focus isolation + Escape discipline only for the modal presentation.
+	useEffect(() => {
+		if (!hasScrim || !layer.current || !panelEl.current) {
+			return;
+		}
+
+		return isolateModalFocus(layer.current, panelEl.current, () => {
+			if ((sheet.purpose ?? 'info') !== 'required') {
+				dismiss.current();
+			}
+		}, layerDepth);
+	}, [hasScrim, purpose]);
+
+	useEffect(() => {
+		const el = panelEl.current;
+		if (!el) return;
+		const ctl = attachSheetDetents(el, snapPoints, () => dismiss.current(), {
+			dismissible: purpose !== 'required',
+			swipeOnly: !snapPoints.length,
+			onOffset: (offset, vh) => {
+				const shade = backdrop.current;
+				if (shade) {
+					shade.style.opacity = String(Math.max(0, BASE_SCRIM * (1 - offset / vh)));
+				}
+			},
+		});
+
+		return () => ctl.detach();
+	}, [snapKey, purpose]);
+
+	<div ref={layer} className={cx('vx-sheet-layer', 'vx-bottom-sheet-layer', dark && 'dark')}>
+		{hasScrim && (
+			<div
+				ref={backdrop}
+				className="vx-sheet-backdrop"
+				style={{ opacity: BASE_SCRIM }}
+				onClick={() => {
+					if (purpose === 'info') {
+						dismiss.current();
+					}
+				}}
+			/>
+		)}
+		<div
+			ref={(el: any) => {
+				panelEl.current = el;
+				applyEscapeProps(el, sheet);
+			}}
+			id={sheet.id}
+			className={cx('vx-sheet', 'vx-bottom-sheet', sheet.className)}
+			role={hasScrim ? 'dialog' : 'region'}
+			aria-modal={hasScrim ? true : undefined}
+			aria-label={sheet.label}
+			style={{
+				...sheet.style,
+				...sheetHeightStyle(sheet.height, snapPoints.length),
+				// Parked below the viewport until the gesture controller slides
+				// the panel in (attachSheetDetents owns transform from then on).
+				transform: 'translateY(100%)',
+			}}
+			{...sheet.web}
+		>
+			<LayerDepthProvider value={layerDepth + 1}>{panel}</LayerDepthProvider>
+		</div>
+	</div>
+}
+
+/** In-window bottom sheet (Astryx `BottomSheet`), web leaf. Standalone
+ *  usage renders its own portal layer; inside `BottomSheetSwitcher` (with
+ *  `sheetId`) it registers under the switcher's shared host and renders
+ *  nothing on its own. */
+export function BottomSheet(props: BottomSheetProps) @{
+	const switcher = useContext(BottomSheetSwitcherContext);
+	const registration: BottomSheetRegistration = {
+		sheetId: props.sheetId ?? '',
+		props,
+	};
+
+	useEffect(() => {
+		if (props.sheetId == null) {
+			return;
+		}
+
+		if (!switcher) {
+			console.warn('[BottomSheet] sheetId is set but no BottomSheetSwitcher ancestor was found — the sheet renders nothing.');
+			return;
+		}
+
+		switcher.register(registration);
+		return () => switcher.unregister(registration.sheetId);
+	}, [switcher, props.sheetId, props]);
+
+	@if (props.sheetId != null) {
+		<></>
+	} @else {
+		@if (props.isOpen) {
+			<>{createPortal(
+				<BottomSheetLayer
+					sheet={props}
+					panel={props.children}
+					onDismiss={() => props.onOpenChange?.(false)}
+				/>,
+				document.body,
+			)}</>
+		}
+	}
+}
+
+/** Shared host for a set of BottomSheet panels (Astryx
+ *  `BottomSheetSwitcher`) — one layer, `activeSheet` picks which
+ *  registered child renders inside it. */
+export function BottomSheetSwitcher(props: BottomSheetSwitcherProps) @{
+	const dark = useThemeScheme() === 'dark';
+	const registry = useRef(new Map<string, BottomSheetRegistration>());
+	const [version, bump] = useState(0);
+	const activeId = props.activeSheet ?? null;
+	const onChange = useRef(props.onActiveSheetChange);
+	onChange.current = props.onActiveSheetChange;
+
+	const handle: BottomSheetSwitcherHandle = useMemo(
+		() => ({
+			register(spec) {
+				const prev = registry.current.get(spec.sheetId);
+				registry.current.set(spec.sheetId, spec);
+				if (prev !== spec) bump((v) => v + 1);
+			},
+			unregister(sheetId) {
+				if (registry.current.delete(sheetId)) bump((v) => v + 1);
+			},
+			requestDismiss() {
+				onChange.current?.(null);
+			},
+			activeSheet() {
+				return props.activeSheet ?? null;
+			},
+		}),
+		[],
+	);
+
+	const active = activeId != null ? registry.current.get(activeId) : undefined;
+	void version;
+
+	<BottomSheetSwitcherProvider value={handle}>
+		{props.children}
+		{active != null && (
+			<>{createPortal(
+				<BottomSheetLayer
+					sheet={{ ...active.props, hasScrim: props.hasScrim ?? active.props.hasScrim }}
+					panel={active.props.children}
+					onDismiss={() => onChange.current?.(null)}
+				/>,
+				document.body,
+			)}</>
+		)}
+	</BottomSheetSwitcherProvider>
+}

package/src/Breadcrumb.macos.tsrx

@@ -1,4 +1,5 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { DropdownMenu } from './DropdownMenu.macos.tsrx';
 import type { BreadcrumbProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
@@ -7,6 +8,10 @@ import { applyEscapeProps } from "./escape-props";
  *  tappable link; the last item is conventionally the current page. */
 export function Breadcrumb(props: BreadcrumbProps) @{
 	const sep = props.separator ?? '/';
+	const limit = Math.max(2, props.maxVisibleItems ?? props.items.length);
+	const overflow = props.items.length > limit ? props.items.slice(1, props.items.length - limit + 1) : [];
+	const visible = overflow.length ? [props.items[0], ...props.items.slice(props.items.length - limit + 1)] : props.items;
+
 
 	<flexboxlayout
 		ref={(v: any) => applyEscapeProps(v, props)}
@@ -15,8 +20,9 @@ export function Breadcrumb(props: BreadcrumbProps) @{
 		className={cx('vx-breadcrumb', props.className)}
 		style={props.style}
 	>
-		@for (const e of props.items.map((item, i) => ({ item, i })); key e.i) {
+		@for (const e of visible.map((item, i) => ({ item, i })); key e.i) {
 			<flexboxlayout className="vx-breadcrumb-item">
+				{e.i === 1 && (overflow.length > 0 || props.overflowMenu) && <DropdownMenu trigger={<label text="…" />} accessibilityLabel={props.overflowLabel ?? 'More ancestors'} items={overflow.map((item, index) => ({ key: `ancestor-${index}`, label: item.label, onSelect: item.onSelect, isDisabled: !item.onSelect }))}>{props.overflowMenu}</DropdownMenu>}
 				{e.i > 0 ? <label className="vx-breadcrumb-sep" text={sep} /> : null}
 				{e.item.onSelect
 					? <label className="vx-breadcrumb-link" text={e.item.label} onTap={e.item.onSelect} />

package/src/Breadcrumb.tsrx

@@ -1,4 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
+import { DropdownMenu } from './DropdownMenu';
 import type { BreadcrumbProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
@@ -7,6 +8,10 @@ import { applyEscapeProps } from "./escape-props";
  *  tappable link; the last item is conventionally the current page. */
 export function Breadcrumb(props: BreadcrumbProps) @{
 	const sep = props.separator ?? '/';
+	const limit = Math.max(2, props.maxVisibleItems ?? props.items.length);
+	const overflow = props.items.length > limit ? props.items.slice(1, props.items.length - limit + 1) : [];
+	const visible = overflow.length ? [props.items[0], ...props.items.slice(props.items.length - limit + 1)] : props.items;
+
 
 	<flexboxlayout
 		ref={(v: any) => applyEscapeProps(v, props)}
@@ -15,8 +20,9 @@ export function Breadcrumb(props: BreadcrumbProps) @{
 		className={cx('vx-breadcrumb', props.className)}
 		style={props.style}
 	>
-		@for (const e of props.items.map((item, i) => ({ item, i })); key e.i) {
+		@for (const e of visible.map((item, i) => ({ item, i })); key e.i) {
 			<flexboxlayout className="vx-breadcrumb-item">
+				{e.i === 1 && (overflow.length > 0 || props.overflowMenu) && <DropdownMenu trigger={<label text="…" />} accessibilityLabel={props.overflowLabel ?? 'More ancestors'} items={overflow.map((item, index) => ({ key: `ancestor-${index}`, label: item.label, onSelect: item.onSelect, isDisabled: !item.onSelect }))}>{props.overflowMenu}</DropdownMenu>}
 				{e.i > 0 ? <label className="vx-breadcrumb-sep" text={sep} /> : null}
 				{e.item.onSelect
 					? <label className="vx-breadcrumb-link" text={e.item.label} onTap={e.item.onSelect} />

package/src/Breadcrumb.web.tsrx

@@ -1,3 +1,4 @@
+import { DropdownMenu } from './DropdownMenu.web.tsrx';
 import type { BreadcrumbProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 
@@ -5,6 +6,10 @@ import { applyEscapeProps } from "./escape-props";
  *  pressable link; the last item is conventionally the current page. */
 export function Breadcrumb(props: BreadcrumbProps) @{
 	const sep = props.separator ?? '/';
+	const limit = Math.max(2, props.maxVisibleItems ?? props.items.length);
+	const overflow = props.items.length > limit ? props.items.slice(1, props.items.length - limit + 1) : [];
+	const visible = overflow.length ? [props.items[0], ...props.items.slice(props.items.length - limit + 1)] : props.items;
+
 
 	<nav
 		ref={(e: any) => applyEscapeProps(e, props)}
@@ -13,12 +18,13 @@ export function Breadcrumb(props: BreadcrumbProps) @{
 		style={props.style}
 		aria-label={props.accessibilityLabel ?? 'Breadcrumb'}
 	>
-		{props.items.map((item: any, i: number) => (
+		{visible.map((item: any, i: number) => (
 			<span key={i} className="vx-breadcrumb-item">
+				{i === 1 && (overflow.length > 0 || props.overflowMenu) && <DropdownMenu trigger="…" accessibilityLabel={props.overflowLabel ?? 'More ancestors'} items={overflow.map((item, index) => ({ key: `ancestor-${index}`, label: item.label, onSelect: item.onSelect, isDisabled: !item.onSelect }))}>{props.overflowMenu}</DropdownMenu>}
 				{i > 0 ? <span className="vx-breadcrumb-sep" aria-hidden="true">{sep}</span> : null}
 				{item.onSelect
 					? <span className="vx-breadcrumb-link" role="link" tabIndex={0} onClick={item.onSelect} onKeyDown={(e: any) => { if (e.key === 'Enter') item.onSelect?.(); }}>{item.label}</span>
-					: <span className="vx-breadcrumb-text" aria-current={i === props.items.length - 1 ? 'page' : undefined}>{item.label}</span>}
+					: <span className="vx-breadcrumb-text" aria-current={i === visible.length - 1 ? 'page' : undefined}>{item.label}</span>}
 			</span>
 		))}
 	</nav>

package/src/Button.tsrx

@@ -1,23 +1,71 @@
 /** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import { Utils } from '@nativescript/core';
+import { TextSlot } from './text-slot';
 import type { ButtonProps } from "./props";
 import { cx } from "./cx";
-import { Pressable } from './Pressable.tsrx';
+import { Pressable } from './Pressable';
 import { ActivityIndicator } from './ActivityIndicator.tsrx';
+import { Icon } from './Icon';
+import { useButtonGroup } from './button-group-context';
+import { sanitizeUrl } from './safe-url';
 
-/** Self-drawn button — Pressable row with optional leading/trailing content
- *  and a `loading` state that swaps children for the spinner and blocks
- *  presses. `vx-button` makes the row direction; styling is the app's. */
+/** Self-drawn button — Pressable row with optional icon/label/end content
+ *  and a loading state that swaps content for the spinner and blocks
+ *  presses. Accepts the Astryx vocabulary (`label`, `variant`, `size`,
+ *  `isDisabled`, `isLoading`, `icon`, `isIconOnly`, `endContent`,
+ *  `elevation`, `href`, `clickAction`, `isInterruptible`); `href` opens the
+ *  platform browser — touch targets have no link-preview semantics.
+ *  Inside a ButtonGroup the group supplies size/disabled and a position
+ *  class for the connected edge treatment. */
 export function Button(props: ButtonProps) @{
-	const disabled = props.disabled || props.loading;
+	const group = useButtonGroup();
+	const [actionPending, setActionPending] = useState(false);
+	const disabled = !!(props.disabled || props.isDisabled || props.isLoading || props.loading || group?.isDisabled);
+	const loading = !!(props.loading || props.isLoading || actionPending);
+	const size = props.size ?? group?.size ?? 'md';
+	const icon = typeof props.icon === 'string' ? <Icon name={props.icon} /> : props.icon;
+	const children = props.children == null ? null : <TextSlot className="vx-button-label">{props.children}</TextSlot>;
+	const labelEl = props.label != null ? <label className="vx-button-label" text={props.label} /> : null;
+	const content = loading
+		? <ActivityIndicator />
+		: props.isIconOnly
+			? icon ?? children ?? labelEl
+			: <>{icon ?? props.leading}{children ?? labelEl}{props.endContent ?? props.trailing}</>;
+
+	const runPress = () => {
+		if (disabled || (actionPending && !props.isInterruptible)) { return; }
+		if (props.href != null) {
+			const url = sanitizeUrl(props.href);
+			if (url != null) { Utils.openUrl(url); }
+		}
+
+		props.onPress?.();
+		const action = props.clickAction?.();
+		if (action && typeof (action as any).then === 'function') {
+			setActionPending(true);
+			Promise.resolve(action).then(() => setActionPending(false), () => setActionPending(false));
+		}
+	};
 
 	<Pressable
 		{...props}
 		disabled={disabled}
-		className={cx('vx-button', props.loading && 'vx-button--loading', props.className)}
+		onPress={runPress}
+		className={cx(
+			'vx-button',
+			`vx-button--${props.variant ?? 'secondary'}`,
+			size && `vx-button--size-${size}`,
+			props.elevation && props.elevation !== 'none' && `vx-button--elev-${props.elevation}`,
+			props.isIconOnly && 'vx-button--icon',
+			loading && 'vx-button--loading',
+			disabled && 'vx-button--disabled',
+			group && `vx-button--group-${group.position}`,
+			props.className,
+		)}
 		accessibilityRole={props.accessibilityRole ?? 'button'}
+		accessibilityLabel={props.accessibilityLabel ?? (props.isIconOnly ? props.label : undefined)}
 	>
-		{props.loading
-			? <ActivityIndicator />
-			: <>{props.leading}{props.children}{props.trailing}</>}
+		{content}
 	</Pressable>
 }

package/src/Button.web.tsrx

@@ -1,21 +1,88 @@
+import { useState } from 'octane';
 import type { ButtonProps } from "./props";
+import { applyWebProps } from './platformProps.web';
 import { Pressable } from './Pressable.web.tsrx';
 import { ActivityIndicator } from './ActivityIndicator.web.tsrx';
+import { Icon } from './Icon.web.tsrx';
+import { useButtonGroup } from './button-group-context';
+import { sanitizeUrl } from './safe-url';
 
-/** Self-drawn button — Pressable row with optional leading/trailing content
- *  and a `loading` state that swaps children for the spinner and blocks
- *  presses. `vx-button` makes the row direction; styling is the app's. */
+/** Self-drawn button — Pressable row with optional icon/label/end content
+ *  and a loading state that swaps content for the spinner and blocks
+ *  presses. Accepts the Astryx vocabulary (`label`, `variant`, `size`,
+ *  `isDisabled`, `isLoading`, `icon`, `isIconOnly`, `endContent`,
+ *  `elevation`, `tooltip`, `href`, `clickAction`, `isInterruptible`);
+ *  `href` renders a real anchor so link semantics (new tab, copy link)
+ *  stay intact. Inside a ButtonGroup the group supplies size/disabled and a
+ *  position class for the connected edge treatment. */
 export function Button(props: ButtonProps) @{
-	const disabled = props.disabled || props.loading;
+	const group = useButtonGroup();
+	const [actionPending, setActionPending] = useState(false);
+	const disabled = !!(props.disabled || props.isDisabled || props.isLoading || props.loading || group?.isDisabled);
+	const loading = !!(props.loading || props.isLoading || actionPending);
+	const size = props.size ?? group?.size ?? 'md';
+	const icon = typeof props.icon === 'string' ? <Icon name={props.icon} /> : props.icon;
+	const labelEl = props.label != null ? <span className="vx-button-label">{props.label}</span> : null;
+	const content = loading
+		? <ActivityIndicator />
+		: props.isIconOnly
+			? icon ?? props.children ?? labelEl
+			: <>{icon ?? props.leading}{props.children ?? labelEl}{props.endContent ?? props.trailing}</>;
 
-	<Pressable
-		{...props}
-		disabled={disabled}
-		className={['vx-button', props.loading ? 'vx-button--loading' : undefined, props.className]}
-		accessibilityRole={props.accessibilityRole ?? 'button'}
-	>
-		{props.loading
-			? <ActivityIndicator />
-			: <>{props.leading}{props.children}{props.trailing}</>}
-	</Pressable>
+	const cls = [
+		'vx-button',
+		`vx-button--${props.variant ?? 'secondary'}`,
+		size && `vx-button--size-${size}`,
+		props.elevation && props.elevation !== 'none' && `vx-button--elev-${props.elevation}`,
+		props.isIconOnly && 'vx-button--icon',
+		loading && 'vx-button--loading',
+		disabled && 'vx-button--disabled',
+		group && `vx-button--group-${group.position}`,
+		props.className,
+	];
+
+	const runPress = (e?: any) => {
+		if (disabled || (actionPending && !props.isInterruptible)) {
+			e?.preventDefault?.();
+			return;
+		}
+
+		props.onPress?.();
+		const action = props.clickAction?.();
+		if (action && typeof (action as any).then === 'function') {
+			setActionPending(true);
+			Promise.resolve(action).then(() => setActionPending(false), () => setActionPending(false));
+		}
+	};
+
+	@if (props.href != null) {
+		<a
+			id={props.id}
+			className={cls}
+			style={props.style}
+			href={sanitizeUrl(props.href) ?? undefined}
+			target={props.target}
+			rel={props.target === '_blank' ? 'noreferrer' : undefined}
+			title={props.tooltip}
+			aria-label={props.accessibilityLabel ?? (props.isIconOnly ? props.label : undefined)}
+			aria-disabled={disabled || undefined}
+			tabIndex={disabled ? -1 : undefined}
+			onClick={runPress}
+			ref={(el: any) => applyWebProps(el, props.web)}
+		>
+			{content}
+		</a>
+	} @else {
+		<Pressable
+			{...props}
+			disabled={disabled}
+			onPress={runPress}
+			className={cls}
+			accessibilityRole={props.accessibilityRole ?? 'button'}
+			accessibilityLabel={props.accessibilityLabel ?? (props.isIconOnly ? props.label : undefined)}
+			web={{ title: props.tooltip, ...props.web }}
+		>
+			{content}
+		</Pressable>
+	}
 }

package/src/ButtonGroup.macos.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import type { ButtonGroupProps } from './props'
+import { ButtonGroupProvider } from './button-group-context'
+import { cx } from './cx'
+
+export function ButtonGroup(props: ButtonGroupProps) @{
+	const orientation = props.orientation ?? 'horizontal'
+	const value = { orientation, isDisabled: !!props.isDisabled, size: props.size ?? 'md', position: 'only' as const }
+
+	<ButtonGroupProvider value={value}>
+		<flexboxlayout id={props.id} className={cx('vx-button-group', `vx-button-group--${orientation}`, props.className)} style={props.style} accessible={true} accessibilityLabel={props.label}>
+			{props.children}
+		</flexboxlayout>
+	</ButtonGroupProvider>
+}

package/src/ButtonGroup.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ButtonGroupProps } from './props'
+import { ButtonGroupProvider } from './button-group-context'
+import { cx } from './cx'
+
+export function ButtonGroup(props: ButtonGroupProps) @{
+	const orientation = props.orientation ?? 'horizontal'
+	const value = { orientation, isDisabled: !!props.isDisabled, size: props.size ?? 'md', position: 'only' as const }
+
+	<ButtonGroupProvider value={value}>
+		<flexboxlayout id={props.id} className={cx('vx-button-group', `vx-button-group--${orientation}`, props.className)} style={props.style} accessible={true} accessibilityLabel={props.label}>
+			{props.children}
+		</flexboxlayout>
+	</ButtonGroupProvider>
+}

package/src/ButtonGroup.web.tsrx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'octane'
+import type { ButtonGroupProps } from './props'
+import { ButtonGroupProvider } from './button-group-context'
+
+export function ButtonGroup(props: ButtonGroupProps) @{
+	const orientation = props.orientation ?? 'horizontal'
+	const groupRef = useRef<any>(null)
+	const value = { orientation, isDisabled: !!props.isDisabled, size: props.size ?? 'md', position: 'only' as const }
+	useEffect(() => {
+		const root = groupRef.current
+		if (!root) return
+		const members = () => Array.from(root.querySelectorAll('button:not([disabled]), [role="button"]:not([aria-disabled="true"]), a[href]')) as HTMLElement[]
+		const update = (active?: HTMLElement) => {
+			const enabled = members()
+			for (const member of enabled) member.tabIndex = member === active || (!active && member === enabled[0]) ? 0 : -1
+		}
+
+		update()
+		const focus = (event: FocusEvent) => { const target = event.target as HTMLElement; if (members().includes(target)) update(target) }
+		root.addEventListener('focusin', focus)
+		return () => root.removeEventListener('focusin', focus)
+	}, [props.children, props.isDisabled])
+
+	const onKeyDown = (event: any) => {
+		const keys = orientation === 'horizontal' ? ['ArrowLeft','ArrowRight'] : ['ArrowUp','ArrowDown']
+		if (![...keys,'Home','End'].includes(event.key)) return
+		const enabled = Array.from(groupRef.current?.querySelectorAll('button:not([disabled]), [role="button"]:not([aria-disabled="true"]), a[href]') ?? []) as HTMLElement[]
+		if (!enabled.length) return
+		event.preventDefault()
+		const index = enabled.indexOf(document.activeElement as HTMLElement)
+		const next = event.key==='Home'?0:event.key==='End'?enabled.length-1:Math.max(0,Math.min(enabled.length-1,index+(event.key===keys[0]?-1:1)))
+		updateTabStops(next, enabled)
+		enabled[next].focus()
+	}
+
+	<ButtonGroupProvider value={value}>
+		<div ref={(node:any)=>groupRef.current=node} id={props.id} role="group" aria-label={props.label} className={['vx-button-group', `vx-button-group--${orientation}`, props.className]} style={props.style} onKeyDown={onKeyDown}>
+			{props.children}
+		</div>
+	</ButtonGroupProvider>
+}
+
+function updateTabStops(index:number, members:HTMLElement[]) {
+	for (let i=0;i<members.length;i++) members[i].tabIndex=i===index?0:-1
+}