expo-interface 0.1.0 → 0.2.0

package/src/gauge/index.tsx

@@ -0,0 +1,165 @@
+import './gauge.css';
+import type {CSSProperties} from 'react';
+import type {GaugeProps} from './types';
+import {StyleSheet, type TextStyle} from 'react-native';
+import {flatten} from '../theme';
+import {fraction, gauge, markerOffset} from './shared';
+
+const polar = (angle: number, radius: number, center: number) => ({
+  x: center + radius * Math.cos((angle * Math.PI) / 180),
+  y: center + radius * Math.sin((angle * Math.PI) / 180),
+});
+
+/**
+ * On web each SwiftUI gauge style is redrawn with DOM elements (the bars)
+ * and inline SVG (the rings), sized in CSS pixels to the geometry measured
+ * from iOS. Colors flow through custom properties: the accent tints the
+ * indicator and the value labels, the descriptive label keeps the label
+ * color, and the marker knockout paints the scheme background.
+ */
+export function Gauge({
+  value,
+  min = 0,
+  max = 1,
+  variant = 'automatic',
+  label,
+  currentValueLabel,
+  minimumValueLabel,
+  maximumValueLabel,
+  accentColor,
+  testID,
+  style,
+}: GaugeProps) {
+  const f = fraction(value, min, max);
+  const vars = {
+    ...(accentColor ? {'--ui-gauge-accent': accentColor} : null),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
+  } as CSSProperties;
+  const meter = {
+    role: 'meter',
+    'aria-label': label,
+    'aria-valuemin': min,
+    'aria-valuemax': max,
+    'aria-valuenow': Math.min(max, Math.max(min, value)),
+    'aria-valuetext': currentValueLabel,
+  } as const;
+  const bounds = {
+    min: minimumValueLabel != null ? <span className="ui-gauge__bound">{minimumValueLabel}</span> : null,
+    max: maximumValueLabel != null ? <span className="ui-gauge__bound">{maximumValueLabel}</span> : null,
+  };
+
+  if (variant === 'circular' || variant === 'circularCapacity') {
+    const {size, stroke, arcStart, arcSweep, dot, knockout} = gauge.ring;
+    const center = size / 2;
+    const radius = (size - stroke) / 2;
+    const start = polar(arcStart, radius, center);
+    const end = polar(arcStart + arcSweep, radius, center);
+    const marker = markerOffset(f);
+    const circumference = 2 * Math.PI * radius;
+    const text = currentValueLabel ?? label;
+    return (
+      <div
+        {...meter}
+        className={`ui-gauge-ring ui-gauge-ring--${variant}`}
+        style={{...vars, width: size, height: size}}
+        data-testid={testID}>
+        <svg className="ui-gauge-ring__svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
+          {variant === 'circular' ? (
+            <>
+              <path
+                className="ui-gauge-ring__arc"
+                // The 240° sweep is always the large arc, drawn clockwise.
+                d={`M ${start.x} ${start.y} A ${radius} ${radius} 0 1 1 ${end.x} ${end.y}`}
+                fill="none"
+                strokeWidth={stroke}
+                strokeLinecap="round"
+              />
+              <circle className="ui-gauge-ring__knockout" cx={center + marker.x} cy={center + marker.y} r={knockout / 2}/>
+              <circle className="ui-gauge-ring__dot" cx={center + marker.x} cy={center + marker.y} r={dot / 2}/>
+            </>
+          ) : (
+            <>
+              <circle className="ui-gauge-ring__track" cx={center} cy={center} r={radius} fill="none" strokeWidth={stroke}/>
+              {f > 0 ? (
+                <circle
+                  className="ui-gauge-ring__fill"
+                  cx={center}
+                  cy={center}
+                  r={radius}
+                  fill="none"
+                  strokeWidth={stroke}
+                  strokeLinecap="round"
+                  strokeDasharray={`${f * circumference} ${circumference}`}
+                  transform={`rotate(-90 ${center} ${center})`}
+                />
+              ) : null}
+            </>
+          )}
+        </svg>
+        {text != null ? (
+          <span className={['ui-gauge-ring__center', currentValueLabel == null && 'ui-gauge-ring__center--label'].filter(Boolean).join(' ')}>
+            {text}
+          </span>
+        ) : null}
+        {variant === 'circular' && (bounds.min || bounds.max) ? (
+          <span className="ui-gauge-ring__bounds">
+            {bounds.min ?? <span/>}
+            {bounds.max ?? <span/>}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (variant === 'linear') {
+    return (
+      <div {...meter} className="ui-gauge ui-gauge--linear" style={vars} data-testid={testID}>
+        {bounds.min}
+        <span className="ui-gauge__track">
+          <span className="ui-gauge__marker" style={{left: `calc(${gauge.linear.dot / 2}px + ${f} * (100% - ${gauge.linear.dot}px))`}}>
+            <span className="ui-gauge__dot"/>
+          </span>
+        </span>
+        {bounds.max}
+      </div>
+    );
+  }
+
+  const fill = <span className="ui-gauge__fill" style={{width: `${f * 100}%`}}/>;
+
+  if (variant === 'linearCapacity') {
+    // A grid whose columns exist only for the bounds that are set, so the
+    // stacked label and current value start exactly at the bar's leading edge.
+    const columns = [bounds.min && 'auto', 'minmax(0, 1fr)', bounds.max && 'auto'].filter(Boolean).join(' ');
+    const barColumn = bounds.min ? 2 : 1;
+    const barRow = label != null ? 2 : 1;
+    const stacked = {gridColumn: barColumn} as const;
+    return (
+      <div
+        {...meter}
+        className="ui-gauge ui-gauge--linear-capacity"
+        style={{...vars, gridTemplateColumns: columns}}
+        data-testid={testID}>
+        {label != null ? <span className="ui-gauge__label" style={{...stacked, gridRow: 1}}>{label}</span> : null}
+        {bounds.min ? <span className="ui-gauge__bound" style={{gridColumn: 1, gridRow: barRow}}>{minimumValueLabel}</span> : null}
+        <span className="ui-gauge__track" style={{...stacked, gridRow: barRow}}>{fill}</span>
+        {bounds.max ? <span className="ui-gauge__bound" style={{gridColumn: barColumn + 1, gridRow: barRow}}>{maximumValueLabel}</span> : null}
+        {currentValueLabel != null ? (
+          <span className="ui-gauge__current" style={{...stacked, gridRow: barRow + 1}}>{currentValueLabel}</span>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div {...meter} className="ui-gauge ui-gauge--automatic" style={vars} data-testid={testID}>
+      {label != null ? <span className="ui-gauge__label">{label}</span> : null}
+      <span className="ui-gauge__row">
+        {bounds.min}
+        <span className="ui-gauge__track">{fill}</span>
+        {bounds.max}
+      </span>
+      {currentValueLabel != null ? <span className="ui-gauge__current">{currentValueLabel}</span> : null}
+    </div>
+  );
+}

package/src/gauge/shared.ts

@@ -0,0 +1,79 @@
+/**
+ * Geometry of the SwiftUI gauge styles, in points, measured from iOS
+ * screenshots so the Android and web redraws match the native control.
+ */
+export const gauge = {
+  /** Body text of the labels (the SwiftUI default font). */
+  fontSize: 17,
+  lineHeight: 22,
+  /** Space between a bounds label and the bar. */
+  rowGap: 8,
+
+  /** `automatic`: capacity bar height and the gaps to the labels above/below. */
+  automatic: {bar: 15, gapAbove: 14, gapBelow: 9},
+
+  /** `linear`: bar height, marker dot (same size) and its background knockout. */
+  linear: {bar: 7.5, dot: 7.5, knockout: 15},
+
+  /** `linearCapacity`: bar height, stack spacing and the current value font. */
+  linearCapacity: {bar: 4, gap: 4, currentFontSize: 12, currentLineHeight: 16},
+
+  /** Circular styles: ring diameter/stroke, arc, marker and label metrics. */
+  ring: {
+    size: 58,
+    stroke: 5.5,
+    /** Open ring (`circular`): arc start angle (degrees, clockwise from 3 o'clock) and sweep. */
+    arcStart: 150,
+    arcSweep: 240,
+    dot: 5.5,
+    knockout: 10,
+    centerFontSize: 24,
+    centerLineHeight: 29,
+    boundsFontSize: 10,
+    boundsLineHeight: 12,
+    /**
+     * Width of the bounds row and the offset of its center below the ring
+     * center: clear of the 24pt value above it and inside the arc's gap.
+     */
+    boundsWidth: 34,
+    boundsOffset: 17,
+    /** Opacity of the unfilled track in `circularCapacity`. */
+    trackOpacity: 0.3,
+  },
+} as const;
+
+/**
+ * Unfilled track fills, as `#RRGGBBAA` per scheme: iOS `tertiarySystemFill`
+ * behind the `automatic` bar and `systemFill` behind the `linearCapacity` bar.
+ */
+export const track = {
+  automatic: {light: '#7676801F', dark: '#7676803D'},
+  linearCapacity: {light: '#78788033', dark: '#7878805C'},
+} as const;
+
+/** Position of `value` within `[min, max]`, clamped to `0…1`. */
+export function fraction(value: number, min: number, max: number): number {
+  if (max <= min) return 0;
+  return Math.min(1, Math.max(0, (value - min) / (max - min)));
+}
+
+/**
+ * Center of the `circular` marker for a fraction, relative to the ring center
+ * (y grows downwards), on the stroke's center line.
+ */
+export function markerOffset(f: number): {x: number; y: number} {
+  const angle = ((gauge.ring.arcStart + f * gauge.ring.arcSweep) * Math.PI) / 180;
+  const radius = (gauge.ring.size - gauge.ring.stroke) / 2;
+  return {x: radius * Math.cos(angle), y: radius * Math.sin(angle)};
+}
+
+/**
+ * `#RRGGBB` (or `#RGB`/`#RRGGBBAA`) color with its alpha replaced. Other
+ * color syntaxes are returned unchanged.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color.trim())?.[1];
+  if (!hex) return color;
+  const rgb = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex.slice(0, 6);
+  return `#${rgb}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`.toUpperCase();
+}

package/src/gauge/types.ts

@@ -0,0 +1,64 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Visual style of the gauge, named after the SwiftUI `GaugeStyle` it renders
+ * (the `gaugeStyle` modifier names in `@expo/ui`):
+ * - `automatic` — the default in-app style: a capacity bar with the label
+ *   centered above and the current value centered below.
+ * - `linear` — `accessoryLinear`: a bar with a point marker at the current
+ *   value (no label).
+ * - `linearCapacity` — `accessoryLinearCapacity`: a thin capacity bar with
+ *   the label above and the current value below, aligned to its leading edge.
+ * - `circular` — `accessoryCircular`: an open ring with a point marker, the
+ *   current value in the center and the bounds under the ring.
+ * - `circularCapacity` — `accessoryCircularCapacity`: a closed ring filled to
+ *   the current value with the current value in the center.
+ */
+export type GaugeVariant = 'automatic' | 'linear' | 'linearCapacity' | 'circular' | 'circularCapacity';
+
+/**
+ * Cross-platform gauge showing a value within a range.
+ *
+ * Bridges the SwiftUI `Gauge` (iOS 16+) on iOS; Android (Jetpack Compose) and
+ * web (DOM/SVG) redraw each SwiftUI style with the same geometry: the
+ * bounds and current value labels take the accent, the descriptive label
+ * keeps the label color, exactly as a tinted SwiftUI gauge does.
+ */
+export interface GaugeProps {
+  /** Current value, between `min` and `max`. */
+  value: number;
+  /**
+   * Lower bound of the range.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Upper bound of the range.
+   * @default 1
+   */
+  max?: number;
+  /**
+   * SwiftUI gauge style to render.
+   * @default 'automatic'
+   */
+  variant?: GaugeVariant;
+  /**
+   * Text describing the gauge's purpose. Shown above the bar in the linear
+   * capacity styles and in the center of the circular styles when there is
+   * no `currentValueLabel`; the `linear` style only exposes it to assistive
+   * technology.
+   */
+  label?: string;
+  /** Text showing the current value. */
+  currentValueLabel?: string;
+  /** Text showing the lower bound. */
+  minimumValueLabel?: string;
+  /** Text showing the upper bound. */
+  maximumValueLabel?: string;
+  /** Tint of the indicator and the value labels (overrides the theme accent). */
+  accentColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the container (web only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/index.ts

@@ -3,7 +3,6 @@
 export * from './theme';
 export * from './accent';
 export * from './icons';
-export * from './link';
 export {fillWidth} from './fill';
 
 // Layout
@@ -17,20 +16,42 @@ export {Tabs} from './tabs';
 export type {TabBarProps, TabRoute, WebLogo} from './tabs/types';
 
 // Components
+export {Alert} from './alert';
+export type {AlertAction, AlertActionRole, AlertProps} from './alert/types';
 export {Button} from './button';
 export type {ButtonProps, ButtonRole, ButtonShape, ButtonSize, ButtonVariant} from './button/types';
+export {Checkbox} from './checkbox';
+export type {CheckboxProps} from './checkbox/types';
+export {Collapsible} from './collapsible';
+export type {CollapsibleProps} from './collapsible/types';
+export {ColorPicker} from './color-picker';
+export type {ColorPickerProps} from './color-picker/types';
+export {ContextMenu} from './context-menu';
 export {DateTimePicker} from './date-time';
 export type {DateTimeMode, DateTimePickerProps} from './date-time/types';
+export {Divider} from './divider';
+export type {DividerProps} from './divider/types';
 export {FieldGroup, type FieldGroupProps} from './field-group';
+export {Gauge} from './gauge';
+export type {GaugeProps, GaugeVariant} from './gauge/types';
 export {ListItem} from './list-item';
 export type {ListItemProps} from './list-item/types';
+export {Menu} from './menu';
+export type {ContextMenuProps, MenuItem, MenuProps} from './menu/types';
 export {Picker} from './picker';
 export type {PickerItemProps, PickerOption, PickerProps, PickerValue} from './picker/types';
 export {Progress} from './progress';
-export type {ProgressProps} from './progress/types';
-export {QRCode, type QRCodeProps} from './qr';
+export type {ProgressProps, ProgressVariant} from './progress/types';
+export {SegmentedControl} from './segmented';
+export type {SegmentedControlProps} from './segmented/types';
+export {Slider} from './slider';
+export type {SliderProps} from './slider/types';
+export {Stepper} from './stepper';
+export type {StepperProps} from './stepper/types';
 export {Switch} from './switch';
 export type {SwitchProps} from './switch/types';
+export {Tooltip} from './tooltip';
+export type {TooltipProps} from './tooltip/types';
 export {TextField} from './text-field';
 export type {TextFieldCapitalize, TextFieldKeyboard, TextFieldProps} from './text-field/types';
 export {ExternalLink} from './router/external-link';

package/src/menu/index.android.tsx

@@ -0,0 +1,66 @@
+import type {MenuItem, MenuProps} from './types';
+
+import {Fragment, useState} from 'react';
+import {DropdownMenu, DropdownMenuItem, HorizontalDivider, Icon, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {Button} from '../button';
+import {useColor} from '../theme';
+
+const ICON_SIZE = 20;
+
+/**
+ * Android anchors a Material 3 `DropdownMenu` to the kit's `Button`. Entries
+ * are `DropdownMenuItem`s with an optional drawable leading icon; destructive
+ * items use the theme danger color.
+ */
+export function Menu({label, icon, items, testID, ...button}: MenuProps) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
+      <DropdownMenu.Trigger>
+        <Button
+          {...button}
+          label={label}
+          prefixIcon={icon}
+          onPress={() => setExpanded(true)}
+          testID={testID}
+        />
+      </DropdownMenu.Trigger>
+      <MenuItems items={items} onClose={() => setExpanded(false)}/>
+    </DropdownMenu>
+  );
+}
+
+/** Compose `DropdownMenu.Items` shared by `Menu` and `ContextMenu`. */
+export function MenuItems({items, onClose}: {items: MenuItem[]; onClose: () => void}) {
+  const colors = useMaterialColors();
+  const destructive = useColor('destructive');
+  const separator = useColor('separator');
+  return (
+    <DropdownMenu.Items>
+      {items.map((item, index) => {
+        const color = item.role === 'destructive' ? destructive : colors.onSurface;
+        return (
+          <Fragment key={index}>
+            {item.separator && index > 0 ? <HorizontalDivider color={separator}/> : null}
+            <DropdownMenuItem
+              enabled={!item.disabled}
+              elementColors={{textColor: color, leadingIconColor: color}}
+              onClick={item.disabled ? undefined : () => {
+                onClose();
+                item.onPress?.();
+              }}>
+              {item.icon?.drawable ? (
+                <DropdownMenuItem.LeadingIcon>
+                  <Icon source={item.icon.drawable} size={ICON_SIZE} tint={item.disabled ? colors.onSurfaceVariant : color}/>
+                </DropdownMenuItem.LeadingIcon>
+              ) : null}
+              <DropdownMenuItem.Text>
+                <Text color={item.disabled ? colors.onSurfaceVariant : color}>{item.label}</Text>
+              </DropdownMenuItem.Text>
+            </DropdownMenuItem>
+          </Fragment>
+        );
+      })}
+    </DropdownMenu.Items>
+  );
+}

package/src/menu/index.ios.tsx

@@ -0,0 +1,72 @@
+import type {MenuItem, MenuProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Fragment} from 'react';
+import {Button, Divider, Menu as SwiftUIMenu} from '@expo/ui/swift-ui';
+import {buttonBorderShape, buttonStyle, controlSize, disabled as disabledMod, labelStyle, tint} from '@expo/ui/swift-ui/modifiers';
+import {iosSymbol, swiftBorderShape, swiftControlSize} from '../button/shared';
+import {useColor} from '../theme';
+
+const VARIANT_STYLE = {
+  filled: 'borderedProminent',
+  outlined: 'bordered',
+  text: 'plain',
+} as const;
+
+/**
+ * iOS renders SwiftUI's `Menu`, styled with the same `buttonStyle` / `tint`
+ * mapping as the kit's `Button` so the trigger matches. Entries are SwiftUI
+ * `Button`s (with SF Symbol and `destructive` role) and `Divider`s.
+ */
+export function Menu({
+  label,
+  icon,
+  items,
+  variant = 'filled',
+  size = 'medium',
+  shape,
+  color,
+  hideLabel,
+  disabled,
+  testID,
+}: MenuProps) {
+  const themeTint = useColor('tint');
+  const modifiers: ViewModifier[] = [
+    buttonStyle(VARIANT_STYLE[variant]),
+    controlSize(swiftControlSize(size)),
+    tint(color ?? themeTint),
+  ];
+  if (shape) modifiers.push(buttonBorderShape(swiftBorderShape(shape)));
+  if (hideLabel && icon) modifiers.push(labelStyle('iconOnly'));
+  if (disabled) modifiers.push(disabledMod(true));
+
+  return (
+    <SwiftUIMenu
+      label={label}
+      systemImage={icon ? iosSymbol(icon) : undefined}
+      modifiers={modifiers}
+      testID={testID}>
+      <MenuItems items={items}/>
+    </SwiftUIMenu>
+  );
+}
+
+/** SwiftUI menu entries shared by `Menu` and `ContextMenu`. */
+export function MenuItems({items}: {items: MenuItem[]}) {
+  return (
+    <>
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          {item.separator && index > 0 ? <Divider/> : null}
+          <Button
+            label={item.label}
+            systemImage={item.icon ? iosSymbol(item.icon) : undefined}
+            role={item.role === 'destructive' ? 'destructive' : 'default'}
+            onPress={item.onPress}
+            modifiers={item.disabled ? [disabledMod(true)] : undefined}
+          />
+        </Fragment>
+      ))}
+    </>
+  );
+}

package/src/menu/index.tsx

@@ -0,0 +1,30 @@
+import './menu.css';
+import type {CSSProperties} from 'react';
+import type {MenuProps} from './types';
+import {useId, useRef} from 'react';
+import {Button} from '../button';
+import {MenuList, menuIdent} from './list';
+
+/**
+ * On web the trigger is the kit's `<button>` with a `popovertarget` pointing
+ * at the entries' native `popover`, so opening, closing, light dismiss and
+ * `aria-expanded` are all handled by the browser. The wrapper carries the
+ * `anchor-name` that CSS anchor positioning places the popup against.
+ */
+export function Menu({label, icon, items, testID, ...button}: MenuProps) {
+  const ident = menuIdent(useId());
+  const anchor = `--${ident}`;
+  const wrapper = useRef<HTMLSpanElement>(null);
+  return (
+    <span ref={wrapper} className="ui-menu" style={{anchorName: anchor} as CSSProperties}>
+      <Button
+        {...button}
+        label={label}
+        prefixIcon={icon}
+        popoverTarget={ident}
+        testID={testID}
+      />
+      <MenuList id={ident} items={items} anchor={anchor} anchorRef={wrapper}/>
+    </span>
+  );
+}

package/src/menu/list.tsx

@@ -0,0 +1,98 @@
+import type {CSSProperties, ToggleEvent} from 'react';
+import type {MenuItem} from './types';
+import {useRef} from 'react';
+import {SymbolView} from 'expo-symbols';
+
+const ICON_SIZE = 16;
+const VIEWPORT_GAP = 8;
+
+/** Whether the browser lays out `position-anchor` natively (Baseline 2026). */
+const ANCHOR_SUPPORTED =
+  typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('position-anchor', '--ui-menu');
+
+/** Turns a React `useId()` value into a valid CSS `<dashed-ident>` / HTML id. */
+export function menuIdent(id: string): string {
+  return `ui-menu-${id.replace(/[^A-Za-z0-9_-]/g, '_')}`;
+}
+
+interface MenuListProps {
+  /** HTML id of the popover, referenced by the trigger's `popovertarget`. */
+  id: string;
+  items: MenuItem[];
+  /** `anchor-name` of the trigger; the popup is laid out relative to it. */
+  anchor?: string;
+  /** Element to measure when the browser lacks CSS anchor positioning. */
+  anchorRef?: React.RefObject<HTMLElement | null>;
+  /** Fixed viewport position (context menus) instead of an anchor. */
+  position?: {x: number; y: number} | null;
+  /** Exposes the popover element so callers can `showPopover()` programmatically. */
+  popoverRef?: React.RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Web `role="menu"` popup shared by `Menu` and `ContextMenu`, rendered as a
+ * native `popover="auto"` element. The browser handles the top layer, light
+ * dismiss (outside click / Escape) and the trigger's `aria-expanded`; every
+ * item carries `popovertargetaction="hide"` so picking one closes the menu
+ * declaratively. Placement is CSS anchor positioning (see `menu.css`), with a
+ * measured fallback for engines without it.
+ */
+export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: MenuListProps) {
+  const localRef = useRef<HTMLDivElement>(null);
+  const ref = popoverRef ?? localRef;
+  const anchored = !!anchor && !position;
+
+  const style: Record<string, string | number> = {};
+  if (anchored && ANCHOR_SUPPORTED) style.positionAnchor = anchor;
+  if (position) {
+    style.left = position.x;
+    style.top = position.y;
+  }
+
+  const onToggle = (event: ToggleEvent<HTMLDivElement>) => {
+    const popover = event.currentTarget;
+    if (event.newState !== 'open') return;
+    // Fallback placement: below the trigger, right-aligned, kept on screen.
+    if (anchored && !ANCHOR_SUPPORTED && anchorRef?.current) {
+      const rect = anchorRef.current.getBoundingClientRect();
+      popover.style.left = `${Math.max(VIEWPORT_GAP, rect.right - popover.offsetWidth)}px`;
+      popover.style.top = `${rect.bottom + 4}px`;
+    }
+    // Pointer placement: nudge back inside the viewport.
+    if (position) {
+      const maxX = window.innerWidth - popover.offsetWidth - VIEWPORT_GAP;
+      const maxY = window.innerHeight - popover.offsetHeight - VIEWPORT_GAP;
+      popover.style.left = `${Math.max(VIEWPORT_GAP, Math.min(position.x, maxX))}px`;
+      popover.style.top = `${Math.max(VIEWPORT_GAP, Math.min(position.y, maxY))}px`;
+    }
+    (popover.querySelector('button:not(:disabled)') as HTMLButtonElement | null)?.focus();
+  };
+
+  return (
+    <div
+      ref={ref}
+      id={id}
+      role="menu"
+      popover="auto"
+      className={['ui-menu__list', anchored && ANCHOR_SUPPORTED && 'ui-menu__list--anchored'].filter(Boolean).join(' ')}
+      style={style as CSSProperties}
+      onToggle={onToggle}>
+      {items.map((item, index) => (
+        <div key={index}>
+          {item.separator && index > 0 ? <div className="ui-menu__separator" role="separator"/> : null}
+          <button
+            type="button"
+            role="menuitem"
+            className={['ui-menu__item', item.role === 'destructive' && 'ui-menu__item--destructive'].filter(Boolean).join(' ')}
+            disabled={item.disabled}
+            popoverTarget={id}
+            popoverTargetAction="hide"
+            onClick={item.onPress}>
+            {item.icon ? <SymbolView name={item.icon.symbol} size={ICON_SIZE} tintColor="currentColor"/> : null}
+            <span>{item.label}</span>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}