@colixsystems/widget-sdk 0.245.0 → 0.246.0

package/dist/index.d.ts

@@ -3870,6 +3870,11 @@ export const Avatar: (props: {
   seed?: string;
   /** An absolute image URL. */
   url?: string;
+  /**
+   * A filestore file id (a FILE column's value). Takes precedence over `url`;
+   * the initials show while it loads and stay if it cannot load.
+   */
+  fileId?: string | null;
   /** A size token, or a number of px (clamped to 16-160). */
   size?: "sm" | "md" | "lg" | "xl" | number;
   shape?: "circle" | "rounded";
@@ -3878,6 +3883,36 @@ export const Avatar: (props: {
   testID?: string;
 }) => any;
 
+/**
+ * A stored file's picture, or one at a URL: a themed `<Skeleton>` while it
+ * loads and a fallback, never a broken image, when it cannot. A `fileId` is
+ * resolved through `useFilestoreFile`, and an expired signed URL is fetched
+ * again once before the fallback shows.
+ *
+ * @example
+ *   <FileImage fileId={record.Photo} variant="card" aspectRatio={4 / 3} />
+ */
+export const FileImage: (props: {
+  /** A filestore file id (a FILE column's value). Wins over `uri`. */
+  fileId?: string | null;
+  /** A URL you already have, e.g. a `useFilestoreFiles()` row's `urls.card`. */
+  uri?: string | null;
+  /** The size-ladder rung to load. Default "large". */
+  variant?: "thumbnail" | "card" | "large" | "hero" | "original";
+  /** Width / height. Unset, the box takes the picture's own shape once loaded. */
+  aspectRatio?: number;
+  /** Corner radius: px, a theme radius name, or "none". Default the theme's `md`. */
+  radius?: number | "none" | "sm" | "md" | "lg" | "pill";
+  resizeMode?: "cover" | "contain" | "stretch" | "center";
+  /** What shows when the picture cannot load. Default "icon". */
+  fallback?: "icon" | "blank";
+  /** Unset, the picture is decorative and hidden from assistive technology. */
+  accessibilityLabel?: string;
+  style?: any;
+  /** Also tags `<testID>-image`, `<testID>-loading` and `<testID>-fallback`. */
+  testID?: string;
+}) => any;
+
 /** Themed completion bar or ring for real progress toward a known goal. */
 export const Progress: (props: {
   /** Percent complete; clamped to 0-100. */
@@ -3979,38 +4014,61 @@ export const Card: (props: {
 export type CardScrim = "bottom" | "top" | "left" | "right" | "full" | "none";
 export type CardImagePosition = "center" | "top" | "bottom" | "left" | "right";
 
-export type ButtonVariant = "primary" | "secondary" | "outlined" | "danger";
+export type ButtonVariant = "primary" | "secondary" | "outlined" | "danger" | "ghost" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
 export const BUTTON_VARIANTS: readonly ButtonVariant[];
 
+/** Per-button surface fields; unset ones follow the theme. */
+export interface ButtonFields {
+  background?: string;
+  textColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  paddingX?: number;
+  paddingY?: number;
+  radius?: number;
+  fontWeight?: string;
+  fontSize?: number;
+  shadow?: "none" | "sm" | "md" | "lg";
+  gradient?: { from: string; to: string; angle?: number };
+}
+
 /**
  * Themed button (Design > Components > Buttons, Danger buttons, Button outline). Omit
- * `onPress` for a purely visual button inside something pressable.
+ * `onPress` for a purely visual button inside something pressable. `ghost` and
+ * `link` draw no fill or border and take only the look's shape and type.
  *
  * @example
- *   <Button title="Save" onPress={save} />
+ *   <Button title="Save" onPress={save} busy={saving} />
  *   <Button title="Delete" variant="danger" icon="trash-2" onPress={remove} />
+ *   <Button title="Load more" variant="ghost" size="sm" onPress={next} />
+ */
+/**
+ * What a `<Menu>`, `<Popover>` or `<Tooltip>` puts on the button it wraps, so
+ * a button can open one and expose whether it is open.
  */
-export const Button: (props: {
+export interface ButtonTriggerProps {
+  /** A `<Tooltip>` shows on a long press. */
+  onLongPress?: () => void;
+  "aria-haspopup"?: "menu" | "dialog" | boolean;
+  "aria-expanded"?: boolean;
+  "aria-describedby"?: string;
+}
+
+export const Button: (props: ButtonTriggerProps & {
   title: ReactNode;
   variant?: ButtonVariant;
+  /** sm (36 high) | md (44, default) | lg (52). */
+  size?: ButtonSize;
   icon?: string;
   iconPosition?: "leading" | "trailing";
   onPress?: () => void;
   disabled?: boolean;
-  /** Per-button surface fields; unset ones follow the theme. */
-  fields?: {
-    background?: string;
-    textColor?: string;
-    borderColor?: string;
-    borderWidth?: number;
-    paddingX?: number;
-    paddingY?: number;
-    radius?: number;
-    fontWeight?: string;
-    fontSize?: number;
-    shadow?: "none" | "sm" | "md" | "lg";
-    gradient?: { from: string; to: string; angle?: number };
-  };
+  /** A pending action: a spinner over the kept label; it cannot be pressed. */
+  busy?: boolean;
+  /** A toggle's on/off state; omit for a plain button. */
+  selected?: boolean;
+  fields?: ButtonFields;
   style?: any;
   labelStyle?: any;
   accessibilityLabel?: string;
@@ -4019,6 +4077,34 @@ export const Button: (props: {
   ref?: { current: any } | ((node: any) => void);
 }) => any;
 
+/**
+ * A square themed button that shows only an icon, at least 36px on both hosts.
+ * `accessibilityLabel` is its only name, so it is required.
+ *
+ * @example
+ *   <IconButton icon="pencil" accessibilityLabel="Edit order" onPress={edit} />
+ *   <IconButton icon="bold" accessibilityLabel="Bold" selected={bold} onPress={toggleBold} />
+ */
+export const IconButton: (props: ButtonTriggerProps & {
+  /** A lucide icon name, drawn with `<Icon>`. */
+  icon: string;
+  accessibilityLabel: string;
+  /** ghost (default) | primary | secondary | outlined | danger. */
+  variant?: Exclude<ButtonVariant, "link">;
+  /** sm (36) | md (44, default) | lg (52). */
+  size?: ButtonSize;
+  /** The glyph's colour, over the variant's. */
+  color?: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  busy?: boolean;
+  selected?: boolean;
+  fields?: ButtonFields;
+  style?: any;
+  testID?: string;
+  ref?: { current: any } | ((node: any) => void);
+}) => any;
+
 /**
  * What every form control shares: the label drawn with it (and read by a
  * screen reader), a hint below it, and an error that replaces the hint and
@@ -4204,6 +4290,48 @@ export const SearchField: (props: FormControlProps & {
   [prop: string]: any;
 }) => any;
 
+export type RadioGroupVariant = "list" | "card" | "segmented";
+
+export interface RadioOption<V extends string | number = string | number> {
+  value: V;
+  label: ReactNode;
+  /** A second line under the label; not drawn by the segmented variant. */
+  description?: ReactNode;
+  /** A lucide icon name drawn before the label. */
+  icon?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+/**
+ * Themed pick-ONE of a short list that stays on screen. `list` (default) is
+ * the app's input panel with one row per option, `card` one bordered card per
+ * option (with its `description`), both from Design > Components > Inputs;
+ * `segmented` is the segmented tab strip from Design > Components > Tabs,
+ * its options sharing the row evenly. Radio role and checked state on both
+ * hosts; on the web the group is one tab stop, the arrow keys move the
+ * choice and Space picks the focused option. Other props land on the group.
+ *
+ * @example
+ *   <RadioGroup label="Delivery" value={speed} onValueChange={setSpeed}
+ *     options={[{ value: "standard", label: "Standard" }, { value: "express", label: "Express" }]} />
+ */
+export const RadioGroup: <V extends string | number = string | number>(
+  props: FormControlProps & {
+    options: Array<RadioOption<V>>;
+    value?: V | null;
+    /** Called when a different option is picked. */
+    onValueChange?: (value: V, option: RadioOption<V>) => void;
+    variant?: RadioGroupVariant;
+    /** The group. */
+    style?: any;
+    /** The box around a group that shows a label, helper or error. */
+    containerStyle?: any;
+    [prop: string]: any;
+  },
+) => any;
+
 export type TabStyle = "segmented" | "pill" | "underline";
 
 /**
@@ -4429,6 +4557,107 @@ export const FileUpload: (props: FormControlProps & {
   containerStyle?: any;
 }) => any;
 
+export type PopoverPlacement = "bottom" | "top";
+
+/** One `<Menu>` item. */
+export interface MenuItem {
+  label: string;
+  /** Runs after the menu closes. */
+  onPress?: () => void;
+  /** A Lucide icon name, or an element drawn before the label. */
+  icon?: string | ReactNode;
+  /** Drawn in the theme's danger colour. */
+  danger?: boolean;
+  /** Dimmed, skipped by the arrow keys, and cannot be picked. */
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+  key?: string;
+}
+
+/**
+ * A list of actions opened from a trigger: a row's "…" button, a toolbar's
+ * overflow. Beside the trigger on a wide screen, a bottom sheet on a phone;
+ * drawn over the screen, so no card or list clips it. The backdrop, Escape
+ * (web) and the Android back button close it, and focus returns to the
+ * trigger. On the web it is a `menu` of `menuitem`s: the arrow keys, Home and
+ * End move between enabled items and Space or Enter picks one. A picked
+ * item's `onPress` runs once the menu has left the screen, so it can open a
+ * `<ConfirmDialog>`. Follows the theme's `popover` scope (Design > Components
+ * > Dropdown menus).
+ *
+ * @example
+ *   <Menu
+ *     trigger={<IconButton icon="more-horizontal" accessibilityLabel="More actions" />}
+ *     accessibilityLabel="Order actions"
+ *     items={[
+ *       { label: "Edit", icon: "pencil", onPress: edit },
+ *       canDelete && { label: "Delete", icon: "trash-2", danger: true, onPress: askDelete },
+ *     ]}
+ *   />
+ */
+export const Menu: (props: {
+  /** ONE pressable element; the menu adds the press that opens it. */
+  trigger: ReactNode;
+  /** Falsy entries are skipped, so `cond && { … }` works. */
+  items: Array<MenuItem | null | false | undefined>;
+  accessibilityLabel?: string;
+  /** Default "bottom"; it flips at the screen edge. */
+  placement?: PopoverPlacement;
+  /** The sheet backdrop's name. Default "Close". */
+  closeAccessibilityLabel?: string;
+  /** On the panel; the item list takes `-items`. */
+  testID?: string;
+}) => any;
+
+/**
+ * Free content beside a trigger: quick filters, a swatch picker, a short
+ * detail card. Placed like `<Menu>`, closed the same ways. Components inside
+ * read a theme inked for the panel. Follows the theme's `popover` scope.
+ *
+ * @example
+ *   <Popover trigger={<Button variant="secondary" title="Filters" />} accessibilityLabel="Filters">
+ *     {({ close }) => <Button title="Apply" onPress={() => { apply(); close(); }} />}
+ *   </Popover>
+ */
+export const Popover: (props: {
+  /** ONE pressable element; the popover adds the press that opens it. */
+  trigger: ReactNode;
+  children?: ReactNode | ((api: { close: () => void }) => ReactNode);
+  /** Pass with `onVisibleChange` to open and close it from your own code. */
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+  /** Default "bottom"; it flips at the screen edge. */
+  placement?: PopoverPlacement;
+  accessibilityLabel?: string;
+  /** The sheet backdrop's name. Default "Close". */
+  closeAccessibilityLabel?: string;
+  /** On the panel. */
+  testID?: string;
+}) => any;
+
+/**
+ * A short label for the one pressable element it wraps, usually an
+ * icon-only button that keeps its own `accessibilityLabel`. On the web it
+ * shows on hover and keyboard focus; a touch screen has no hover, so there a
+ * long press shows it (a bottom sheet on a phone). A child with its own
+ * `onLongPress` keeps it and gets no long-press tooltip. The tooltip wraps
+ * the child in a `View`. Follows the theme's `popover` scope.
+ *
+ * @example
+ *   <Tooltip label="Delete">
+ *     <IconButton icon="trash-2" accessibilityLabel="Delete" onPress={remove} />
+ *   </Tooltip>
+ */
+export const Tooltip: (props: {
+  label: string;
+  /** Default "top"; it flips at the screen edge. */
+  placement?: PopoverPlacement;
+  /** On the label. */
+  testID?: string;
+  children: ReactNode;
+}) => any;
+
 /**
  * Themed collapsible sections. The surface comes from the theme's `card`
  * scope and the headers and dividers from its `list` scope, so every

package/dist/index.js

@@ -241,6 +241,8 @@ export { List, ListRow, ListHeader, EmptyState } from "./list.js";
 export { Badge, Avatar, Progress, Stat, Divider } from "./detail-parts.js";
 export { initialsFor } from "./initials.js";
 export { avatarColorFor } from "./avatar-color.js";
+// A stored file's picture: a themed placeholder, then a fallback on failure.
+export { FileImage } from "./file-image.js";
 // The one card surface: the theme's `card` scope, a gradient fill, margin.
 export { Card } from "./card.js";
 export {
@@ -258,7 +260,7 @@ export {
   cardGradientProps,
 } from "./card-style.js";
 // The themed button; follows the theme's button, destructive and ring scopes.
-export { Button, BUTTON_VARIANTS } from "./button.js";
+export { Button, IconButton, BUTTON_VARIANTS } from "./button.js";
 export {
   BUTTON_PADDING_MAX,
   BUTTON_BORDER_WIDTH_MAX,
@@ -278,6 +280,8 @@ export { Checkbox } from "./checkbox.js";
 export { Switch } from "./switch.js";
 export { Select } from "./select.js";
 export { SearchField } from "./search-field.js";
+// Pick one of a short visible list; `muted` scope, or `tabs` when segmented.
+export { RadioGroup } from "./radio-group.js";
 // Space for a control whose role is not a button; a no-op on native.
 export { spaceActivates } from "./form-control-logic.js";
 // A themed tab strip; follows the theme's `tabs` scope.
@@ -294,6 +298,8 @@ export { ConfirmDialog } from "./confirm-dialog.js";
 export { Chip, ChipGroup } from "./chip.js";
 // A themed file chooser on `<FilePicker>`; follows the theme's `muted` scope.
 export { FileUpload } from "./file-upload.js";
+// Anchored actions, content and labels; follow the theme's `popover` scope.
+export { Menu, Popover, Tooltip } from "./popover.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/index.native.js

@@ -234,6 +234,8 @@ export { List, ListRow, ListHeader, EmptyState } from "./list.native.js";
 export { Badge, Avatar, Progress, Stat, Divider } from "./detail-parts.native.js";
 export { initialsFor } from "./initials.js";
 export { avatarColorFor } from "./avatar-color.js";
+// A stored file's picture: a themed placeholder, then a fallback on failure.
+export { FileImage } from "./file-image.native.js";
 // The one card surface: the theme's `card` scope, a gradient fill, margin.
 export { Card } from "./card.native.js";
 export {
@@ -251,7 +253,7 @@ export {
   cardGradientProps,
 } from "./card-style.js";
 // The themed button; follows the theme's button, destructive and ring scopes.
-export { Button, BUTTON_VARIANTS } from "./button.native.js";
+export { Button, IconButton, BUTTON_VARIANTS } from "./button.native.js";
 export {
   BUTTON_PADDING_MAX,
   BUTTON_BORDER_WIDTH_MAX,
@@ -271,6 +273,8 @@ export { Checkbox } from "./checkbox.native.js";
 export { Switch } from "./switch.native.js";
 export { Select } from "./select.native.js";
 export { SearchField } from "./search-field.native.js";
+// Pick one of a short visible list; `muted` scope, or `tabs` when segmented.
+export { RadioGroup } from "./radio-group.native.js";
 // Space for a control whose role is not a button; a no-op on native.
 export { spaceActivates } from "./form-control-logic.js";
 // A themed tab strip; follows the theme's `tabs` scope.
@@ -287,6 +291,8 @@ export { ConfirmDialog } from "./confirm-dialog.native.js";
 export { Chip, ChipGroup } from "./chip.native.js";
 // A themed file chooser on `<FilePicker>`; follows the theme's `muted` scope.
 export { FileUpload } from "./file-upload.native.js";
+// Anchored actions, content and labels; follow the theme's `popover` scope.
+export { Menu, Popover, Tooltip } from "./popover.native.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/menu-view.js

@@ -0,0 +1,168 @@
+// The ONE implementation behind `<Menu>`: a list of actions opened from a
+// trigger, on the anchored surface `<Popover>` uses. Its rows are `<Select>`'s
+// option rows, so a menu and a dropdown in one app look alike.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { optionRowStyle, resolveFormControlTokens } from "./form-control-tokens.js";
+import { isText, optionKeyDown } from "./form-control-logic.js";
+import { initialFocusIndex } from "./select-logic.js";
+import { POPOVER_DEFAULTS, menuItemList } from "./popover-tokens.js";
+import { triggerWith } from "./popover-view.js";
+
+const h = React.createElement;
+const ICON_SIZE = 18;
+const NOTHING_PICKED = () => false;
+
+/**
+ * Bind the shared menu to one platform's primitives and anchored surface.
+ *
+ * @param {{View: any, Text: any, Pressable: any, ScrollView: any, Platform: any}} rn
+ * @param {any} AnchoredSurface — from `makePopover()` for the same host.
+ */
+export function makeMenu(rn, AnchoredSurface) {
+  const { Text, Pressable, ScrollView, Platform } = rn;
+
+  // Keyboard focus is a web concern: a device moves its reader into the
+  // sheet by itself, and a programmatic focus there would fight it.
+  function focusNode(node) {
+    if (Platform.OS === "web" && node && typeof node.focus === "function") node.focus();
+  }
+
+  function itemGlyph(icon, color) {
+    if (typeof icon === "string" && icon) return h(Icon, { name: icon, size: ICON_SIZE, color });
+    return React.isValidElement(icon) ? icon : null;
+  }
+
+  function MenuItems({ t, items, onPick, accessibilityLabel, testID }) {
+    const nodes = React.useRef([]);
+    const initial = initialFocusIndex(items, NOTHING_PICKED);
+    const pendingFocus = React.useRef(true);
+    return h(
+      ScrollView,
+      {
+        style: { flexShrink: 1 },
+        role: "menu",
+        accessibilityLabel,
+        keyboardShouldPersistTaps: "handled",
+        testID: testID ? `${testID}-items` : undefined,
+      },
+      ...items.map((item, index) => {
+        // The web host still delivers keys to a disabled Pressable.
+        const activate = () => {
+          if (!item.disabled) onPick(item);
+        };
+        const color = item.danger ? t.popover.dangerColor : t.popover.textColor;
+        return h(
+          Pressable,
+          {
+            key: item.key,
+            ref: (node) => {
+              nodes.current[index] = node;
+              if (node && index === initial && pendingFocus.current) {
+                pendingFocus.current = false;
+                focusNode(node);
+              }
+            },
+            onPress: activate,
+            onKeyDown: optionKeyDown({
+              options: items,
+              index,
+              focusAt: (next) => focusNode(nodes.current[next]),
+              activate,
+            }),
+            disabled: item.disabled,
+            role: "menuitem",
+            "aria-disabled": item.disabled,
+            accessibilityLabel: item.accessibilityLabel,
+            testID: item.testID,
+            style: ({ pressed }) => optionRowStyle(t, { pressed, disabled: item.disabled }),
+          },
+          itemGlyph(item.icon, color),
+          h(
+            Text,
+            { style: { fontFamily: t.fontFamily, fontSize: t.fontSize, color, flexShrink: 1 } },
+            item.label,
+          ),
+        );
+      }),
+    );
+  }
+
+  /**
+   * A list of actions opened from a trigger: a row's "…" button, a toolbar's
+   * overflow. Beside the trigger on a wide screen, a bottom sheet on a phone.
+   * Each item closes the menu, then runs its `onPress` once the menu has left
+   * the screen, so an item can open a dialog of its own.
+   *
+   * @param {object} props
+   * @param {any} props.trigger — the pressable element that opens it.
+   * @param {Array<{label: string, onPress?: () => void, icon?: string|any,
+   *   danger?: boolean, disabled?: boolean, testID?: string,
+   *   accessibilityLabel?: string, key?: string}|null|false>} props.items —
+   *   falsy entries are skipped, so `cond && {…}` works.
+   * @param {string} [props.accessibilityLabel] — names the menu.
+   * @param {"bottom"|"top"} [props.placement] — default "bottom"; flips.
+   * @param {string} [props.closeAccessibilityLabel] — the sheet backdrop's name.
+   * @param {string} [props.testID] — on the panel; the list takes `-items`.
+   */
+  function Menu({
+    trigger,
+    items,
+    accessibilityLabel,
+    placement = "bottom",
+    closeAccessibilityLabel,
+    testID,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const t = resolveFormControlTokens(theme);
+    const anchorRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const list = menuItemList(items);
+    const close = () => setOpen(false);
+    // A dialog opened before the menu is gone would lose focus on the web and
+    // fail to present on iOS.
+    const picked = React.useRef(null);
+    const pick = (item) => {
+      picked.current = item.onPress;
+      close();
+    };
+    const runPicked = () => {
+      const run = picked.current;
+      picked.current = null;
+      if (typeof run === "function") run();
+    };
+
+    return h(
+      React.Fragment,
+      null,
+      triggerWith(trigger, {
+        anchorRef,
+        onOpen: () => setOpen(true),
+        extraProps: { "aria-haspopup": "menu", "aria-expanded": open },
+      }),
+      h(
+        AnchoredSurface,
+        {
+          visible: open && list.length > 0,
+          onRequestClose: close,
+          onDismiss: runPicked,
+          anchorRef,
+          placement,
+          padding: t.rowGap,
+          minWidth: POPOVER_DEFAULTS.menuMinWidth,
+          maxWidth: POPOVER_DEFAULTS.menuMaxWidth,
+          accessibilityLabel: isText(accessibilityLabel) ? String(accessibilityLabel) : undefined,
+          closeAccessibilityLabel,
+          testID,
+        },
+        h(MenuItems, { t, items: list, onPick: pick, accessibilityLabel, testID }),
+      ),
+    );
+  }
+
+  Menu.displayName = "Menu";
+  return Menu;
+}

package/dist/overlay-tokens.js

@@ -85,6 +85,56 @@ export function overlayCornerStyle(radius, presentation) {
     : { borderRadius: radius };
 }
 
+/**
+ * The screen box and the panel box of one overlay. An anchored overlay (a
+ * menu or popover placed at its trigger) has no scrim, and its panel sits at
+ * `anchoredAt`, a window position, instead of in the centre or at the bottom.
+ *
+ * @param {object} tokens — `resolveOverlayTokens()`'s result.
+ * @param {{top: number, left: number}|null} [anchoredAt]
+ */
+export function overlayFrameStyles(tokens, anchoredAt) {
+  const look = {
+    backgroundColor: tokens.surface,
+    padding: tokens.padding,
+    ...tokens.elevation,
+  };
+  if (anchoredAt) {
+    return {
+      backdrop: { flex: 1, backgroundColor: "transparent" },
+      panel: {
+        position: "absolute",
+        top: anchoredAt.top,
+        left: anchoredAt.left,
+        ...look,
+        ...overlayCornerStyle(tokens.radius, "dialog"),
+      },
+    };
+  }
+  return {
+    backdrop: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: tokens.verticalAlign,
+      padding: tokens.screenPadding,
+      ...(tokens.topGap ? { paddingTop: tokens.topGap } : null),
+      backgroundColor: tokens.scrim,
+    },
+    panel: {
+      width: "100%",
+      // Capped to the padded screen box so a tall panel scrolls inside its own
+      // ScrollView instead of overflowing past the viewport unreachably.
+      maxHeight: "100%",
+      flexShrink: 1,
+      ...(tokens.maxWidth ? { maxWidth: tokens.maxWidth } : { flex: 1 }),
+      backgroundColor: look.backgroundColor,
+      ...overlayCornerStyle(tokens.radius, tokens.presentation),
+      padding: look.padding,
+      ...tokens.elevation,
+    },
+  };
+}
+
 /**
  * Resolve the values one overlay is painted with, from the workspace theme.
  *