expo-interface 0.1.0 → 0.1.1

package/src/collapsible/types.ts

@@ -0,0 +1,24 @@
+import type {ReactNode} from 'react';
+
+/**
+ * Cross-platform disclosure: a tappable header that shows or hides content.
+ *
+ * Bridges the SwiftUI `DisclosureGroup` on iOS, the Jetpack Compose
+ * expandable list item on Android (via `@expo/ui`'s universal `Collapsible`),
+ * and the HTML `<details>` element on web. May be used controlled
+ * (`expanded` + `onExpandedChange`) or uncontrolled (`defaultExpanded`).
+ */
+export interface CollapsibleProps {
+  /** Text rendered in the tappable header. */
+  label: string;
+  /** Whether the content is shown (controlled). */
+  expanded?: boolean;
+  /** Initial state when uncontrolled. */
+  defaultExpanded?: boolean;
+  /** Called when the user toggles the header. */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Content shown while expanded. Must be native (`@expo/ui`) content on iOS/Android. */
+  children?: ReactNode;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

package/src/context-menu/index.android.tsx

@@ -0,0 +1,27 @@
+import type {ContextMenuProps} from '../menu/types';
+
+import {useState} from 'react';
+import {Box, DropdownMenu} from '@expo/ui/jetpack-compose';
+import {combinedClickable, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {MenuItems} from '../menu/index.android';
+
+/**
+ * Android wraps `children` in a `Box` with `combinedClickable`, so a
+ * long-press expands a Material 3 `DropdownMenu` anchored to it while a tap
+ * goes to `onPress`. `children` must be Compose content.
+ */
+export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+  const [expanded, setExpanded] = useState(false);
+  const modifiers = [
+    ...(disabled ? [] : [combinedClickable({onClick: onPress, onLongClick: () => setExpanded(true)})]),
+    ...(testID ? [testIDModifier(testID)] : []),
+  ];
+  return (
+    <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
+      <DropdownMenu.Trigger>
+        <Box modifiers={modifiers}>{children}</Box>
+      </DropdownMenu.Trigger>
+      <MenuItems items={items} onClose={() => setExpanded(false)}/>
+    </DropdownMenu>
+  );
+}

package/src/context-menu/index.ios.tsx

@@ -0,0 +1,22 @@
+import type {ContextMenuProps} from '../menu/types';
+
+import {ContextMenu as SwiftUIContextMenu} from '@expo/ui/swift-ui';
+import {onTapGesture} from '@expo/ui/swift-ui/modifiers';
+import {MenuItems} from '../menu/index.ios';
+
+/**
+ * iOS renders SwiftUI's `contextMenu`: a long-press on `children` lifts it
+ * into a preview with the entries beneath. `children` must be SwiftUI
+ * content. A plain tap is passed to `onPress` through `onTapGesture`.
+ */
+export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+  if (disabled) return <>{children}</>;
+  return (
+    <SwiftUIContextMenu modifiers={onPress ? [onTapGesture(onPress)] : undefined} testID={testID}>
+      <SwiftUIContextMenu.Trigger>{children}</SwiftUIContextMenu.Trigger>
+      <SwiftUIContextMenu.Items>
+        <MenuItems items={items}/>
+      </SwiftUIContextMenu.Items>
+    </SwiftUIContextMenu>
+  );
+}

package/src/context-menu/index.tsx

@@ -0,0 +1,56 @@
+import '../menu/menu.css';
+import type {MouseEvent, PointerEvent} from 'react';
+import type {ContextMenuProps} from '../menu/types';
+import {useId, useRef, useState} from 'react';
+import {MenuList, menuIdent} from '../menu/list';
+
+const LONG_PRESS_MS = 500;
+
+/**
+ * On web the entries live in the same native `popover="auto"` element as
+ * `Menu`, opened with `showPopover()` on right-click (`contextmenu`) or a
+ * touch long-press and placed at the pointer. The browser still owns the top
+ * layer and light dismiss. The wrapper is `display: contents`, so it doesn't
+ * affect the layout of `children`.
+ */
+export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+  const ident = menuIdent(useId());
+  const popover = useRef<HTMLDivElement>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [position, setPosition] = useState<{x: number; y: number} | null>(null);
+
+  const open = (x: number, y: number) => {
+    setPosition({x, y});
+    const element = popover.current;
+    if (element && !element.matches(':popover-open')) element.showPopover();
+  };
+  const onContextMenu = (event: MouseEvent) => {
+    if (disabled) return;
+    event.preventDefault();
+    open(event.clientX, event.clientY);
+  };
+  const onPointerDown = (event: PointerEvent) => {
+    if (disabled || event.pointerType !== 'touch') return;
+    const {clientX: x, clientY: y} = event;
+    timer.current = setTimeout(() => open(x, y), LONG_PRESS_MS);
+  };
+  const cancelPress = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+
+  return (
+    <div
+      className="ui-context-menu"
+      onContextMenu={onContextMenu}
+      onPointerDown={onPointerDown}
+      onPointerUp={cancelPress}
+      onPointerCancel={cancelPress}
+      onPointerMove={cancelPress}
+      onClick={disabled ? undefined : onPress}
+      data-testid={testID}>
+      {children}
+      <MenuList id={ident} items={items} position={position} popoverRef={popover}/>
+    </div>
+  );
+}

package/src/date-time/index.android.tsx

@@ -2,7 +2,7 @@ import type {DateTimePickerProps} from './types';
 
 import {useState} from 'react';
 import {useMaterialColors, Row, Text, Column, DatePickerDialog, TimePickerDialog} from '@expo/ui/jetpack-compose';
-import {clip, Shapes, padding, clickable, background, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers';
+import {clip, Shapes, padding, clickable, background, fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {useColor} from '../theme';
 import {formatValue, useDateValue, withDatePart, withTimePart} from './shared';
 
@@ -22,6 +22,7 @@ export function DateTimePicker({
   maximumDate,
   disabled,
   accentColor,
+  testID,
 }: DateTimePickerProps) {
   const [current, setValue] = useDateValue(value, onChange);
   const [stage, setStage] = useState<'idle' | 'date' | 'time'>('idle');
@@ -69,7 +70,7 @@ export function DateTimePicker({
   };
 
   return (
-    <Column modifiers={[fillMaxWidth()]}>
+    <Column modifiers={[fillMaxWidth(), ...(testID ? [testIDModifier(testID)] : [])]}>
       <Row
         verticalAlignment="center"
         horizontalArrangement="spaceBetween"

package/src/divider/divider.css

@@ -0,0 +1,16 @@
+.ui-divider {
+  --ui-divider-color: var(--color-separator);
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 100%;
+  height: 1px;
+  margin: 0;
+  border: none;
+  background: var(--ui-divider-color);
+}
+
+.ui-divider--vertical {
+  width: 1px;
+  height: auto;
+  min-height: 1em;
+}

package/src/divider/index.android.tsx

@@ -0,0 +1,26 @@
+import type {DividerProps} from './types';
+
+import {StyleSheet} from 'react-native';
+import {HorizontalDivider, VerticalDivider} from '@expo/ui/jetpack-compose';
+import {padding, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+
+/**
+ * Android renders the Material 3 `HorizontalDivider` (or `VerticalDivider`)
+ * as a single-pixel line in the theme `separator` color, matching iOS/web.
+ */
+export function Divider({vertical, color, inset, testID}: DividerProps) {
+  const separator = useColor('separator');
+  const Component = vertical ? VerticalDivider : HorizontalDivider;
+  const modifiers = [
+    ...(inset ? [vertical ? padding(0, inset, 0, 0) : padding(inset, 0, 0, 0)] : []),
+    ...(testID ? [testIDModifier(testID)] : []),
+  ];
+  return (
+    <Component
+      color={color ?? separator}
+      thickness={StyleSheet.hairlineWidth}
+      modifiers={modifiers}
+    />
+  );
+}

package/src/divider/index.ios.tsx

@@ -0,0 +1,18 @@
+import type {DividerProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Divider as SwiftUIDivider} from '@expo/ui/swift-ui';
+import {background, padding} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * iOS renders SwiftUI's `Divider`, which is horizontal inside a `VStack` /
+ * `Form` and vertical inside an `HStack` on its own — `vertical` only picks
+ * the inset axis here, the surrounding stack decides the orientation. A custom
+ * `color` is painted with a `background` modifier (dividers take no tint).
+ */
+export function Divider({vertical, color, inset, testID}: DividerProps) {
+  const modifiers: ViewModifier[] = [];
+  if (inset) modifiers.push(padding(vertical ? {top: inset} : {leading: inset}));
+  if (color) modifiers.push(background(color));
+  return <SwiftUIDivider modifiers={modifiers} testID={testID}/>;
+}

package/src/divider/index.tsx

@@ -0,0 +1,21 @@
+import './divider.css';
+import type {CSSProperties} from 'react';
+import type {DividerProps} from './types';
+
+/**
+ * On web the rule is a real `<hr>` element colored through the
+ * `--ui-divider-color` custom property (the theme `separator` by default).
+ */
+export function Divider({vertical, color, inset, testID}: DividerProps) {
+  const style: Record<string, string | number> = {};
+  if (color) style['--ui-divider-color'] = color;
+  if (inset) style[vertical ? 'marginTop' : 'marginLeft'] = inset;
+  return (
+    <hr
+      className={['ui-divider', vertical && 'ui-divider--vertical'].filter(Boolean).join(' ')}
+      aria-orientation={vertical ? 'vertical' : 'horizontal'}
+      style={style as CSSProperties}
+      data-testid={testID}
+    />
+  );
+}

package/src/divider/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Cross-platform hairline separator.
+ *
+ * Bridges the SwiftUI `Divider` on iOS, the Jetpack Compose Material 3
+ * `HorizontalDivider` / `VerticalDivider` on Android, and the HTML `<hr>`
+ * element on web.
+ */
+export interface DividerProps {
+  /** Draw a vertical rule (for use inside a row) instead of a horizontal one. */
+  vertical?: boolean;
+  /** Line color. Defaults to the theme `separator` token. */
+  color?: string;
+  /**
+   * Leading inset in points/dp, e.g. to align the rule with row content that
+   * sits after a leading icon.
+   */
+  inset?: number;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

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,39 @@ 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 {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 {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 type {ProgressProps, ProgressVariant} from './progress/types';
 export {QRCode, type QRCodeProps} from './qr';
+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>
+  );
+}

package/src/menu/menu.css

@@ -0,0 +1,83 @@
+/*
+ * The popup is a native `[popover="auto"]` element: the browser puts it in the
+ * top layer, closes it on outside click / Escape (light dismiss), and toggles
+ * it from the trigger's `popovertarget` — no JS open/close state. Placement is
+ * CSS anchor positioning relative to the trigger's `anchor-name`, flipping to
+ * stay on screen. Context menus instead set `left`/`top` at the pointer.
+ */
+.ui-menu {
+  display: inline-flex;
+}
+
+.ui-menu__list {
+  box-sizing: border-box;
+  min-width: 200px;
+  inset: auto;
+  margin: 0;
+  padding: 6px;
+  border: 1px solid var(--color-separator);
+  border-radius: 12px;
+  background: var(--color-background-element);
+  color: var(--color-label);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+  overflow: visible;
+}
+
+.ui-menu__list--anchored {
+  position-area: bottom span-left;
+  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  margin-block: 4px;
+}
+
+.ui-menu__list::backdrop {
+  background: transparent;
+}
+
+.ui-menu__item {
+  -webkit-appearance: none;
+  appearance: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-label);
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ui-menu__item:hover:not(:disabled),
+.ui-menu__item:focus-visible {
+  background: color-mix(in srgb, var(--color-label) 8%, transparent);
+  outline: none;
+}
+
+.ui-menu__item:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.ui-menu__item--destructive {
+  color: var(--color-destructive);
+}
+
+.ui-menu__separator {
+  height: 1px;
+  margin: 6px 4px;
+  background: var(--color-separator);
+}
+
+.ui-context-menu {
+  display: contents;
+}