@colixsystems/widget-sdk 0.206.0 → 0.210.0

package/dist/modal-tokens.js

@@ -0,0 +1,107 @@
+// The values `<Modal>` paints with, resolved from the theme's `modal` component
+// scope on top of the overlay's own. Platform-free, like overlay-tokens.js, so
+// both hosts draw one dialog from the same numbers.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { INK_CONTRAST, inkForBackdrop } from "./contract.js";
+import {
+  OVERLAY_DEFAULTS,
+  modalThemeScope,
+  resolveOverlayTokens,
+} from "./overlay-tokens.js";
+import { compositeOver, readableInk } from "./readable-ink.js";
+
+// The close button's touch target; its glyph is drawn at CLOSE_ICON_SIZE.
+export const MODAL_CLOSE_TARGET = 40;
+export const MODAL_CLOSE_ICON_SIZE = 20;
+
+const NO_INSETS = Object.freeze({ top: 0, bottom: 0 });
+
+/**
+ * The device safe-area insets a dialog pads its panel by: none for
+ * a centred dialog, the bottom for a sheet, top and bottom edge to edge.
+ *
+ * @param {{ size: string, presentation: string }} tokens — resolved tokens.
+ * @param {{ top?: number, bottom?: number }} [insets] — the host's insets.
+ */
+export function modalSafeInsets(tokens, insets) {
+  if (!insets) return NO_INSETS;
+  const top = tokens.size === "full" ? insets.top || 0 : 0;
+  const reachesBottom = tokens.size === "full" || tokens.presentation === "sheet";
+  const bottom = reachesBottom ? insets.bottom || 0 : 0;
+  return top || bottom ? { top, bottom } : NO_INSETS;
+}
+
+// A panel style replaces the overlay's shadow, so "none" must zero each key.
+const NO_SHADOW = Object.freeze({
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0,
+});
+
+// The theme's own ink while it reads on the panel, else the readable fixed one.
+function inkOn(backdrop, themeInk, minimum) {
+  return inkForBackdrop(themeInk, readableInk(backdrop), backdrop, minimum);
+}
+
+/**
+ * What the scope's unset tokens show in Theme Settings where no `uiDefault`
+ * path exists: the scrim as the hex a colour field can display, and the title
+ * colour a dialog paints on the background currently set.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ */
+export function modalScopeDefaults(theme) {
+  const base = theme && typeof theme === "object" ? theme : {};
+  const { titleColor: _own, ...others } = modalThemeScope(base);
+  const untitled = { ...base, components: { ...base.components, modal: others } };
+  return {
+    scrim: "#0f172a8c",
+    titleColor: resolveModalTokens(untitled).titleColor,
+  };
+}
+
+/**
+ * Resolve one dialog: the theme's `modal` scope, then the overlay's own values,
+ * so an unthemed `<Modal>` sits on exactly the panel `<Overlay>` draws.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ * @param {{ size?: string, presentation?: string }} [options] — the overlay's
+ *   `sm` | `md` | `lg` | `full` and `dialog` | `sheet`.
+ */
+export function resolveModalTokens(theme, { size, presentation } = {}) {
+  const overlay = resolveOverlayTokens(theme, size, presentation);
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const fallback = DEFAULT_THEME_TOKENS;
+  const colors = base.colors || fallback.colors;
+  const spacing = base.spacing || fallback.spacing;
+  const levels = base.elevation || fallback.elevation;
+  const scope = modalThemeScope(base);
+  const background = scope.background || overlay.surface;
+  // A translucent fill is judged as it lands on the panel surface under it.
+  const backdrop = compositeOver(background, overlay.surface);
+  const onSurface = colors.onSurface || fallback.colors.onSurface;
+  const onSurfaceMuted = colors.onSurfaceMuted || fallback.colors.onSurfaceMuted;
+
+  return {
+    size: overlay.size,
+    presentation: overlay.presentation,
+    scrim: overlay.scrim,
+    background,
+    // What the panel paints: `background` as it lands on the overlay surface,
+    // so a see-through one never shows the scrim and the ink maths holds.
+    panelColor: backdrop,
+    // What the body sits on; null while the theme's own surface stands.
+    bodyBackdrop: scope.background ? backdrop : null,
+    // Edge to edge has no corner to round, whatever the theme says.
+    radius: overlay.size === "full" ? 0 : scope.radius ?? overlay.radius,
+    padding: scope.padding ?? overlay.padding,
+    // Null keeps the overlay's own elevation: the look with no token set.
+    shadow: scope.shadow ? { ...NO_SHADOW, ...levels[scope.shadow] } : null,
+    shadowLevel: scope.shadow || OVERLAY_DEFAULTS.elevation,
+    titleColor: scope.titleColor || inkOn(backdrop, onSurface, INK_CONTRAST.text),
+    closeColor: inkOn(backdrop, onSurfaceMuted, INK_CONTRAST.boundary),
+    sectionGap: spacing.md ?? fallback.spacing.md,
+    actionGap: spacing.sm ?? fallback.spacing.sm,
+  };
+}

package/dist/modal-view.js

@@ -0,0 +1,255 @@
+// The ONE implementation behind the `<Modal>` SDK component: the standard
+// dialog, drawn inside `<Overlay>` so it leaves the widget's box on both hosts.
+//
+// Bound per host by modal.js / modal.native.js, which differ only in where the
+// primitives come from, so the web Player and the Expo export cannot drift.
+
+import React from "react";
+import { ThemeScope, useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { overlayCornerStyle } from "./overlay-tokens.js";
+import {
+  MODAL_CLOSE_ICON_SIZE,
+  MODAL_CLOSE_TARGET,
+  modalSafeInsets,
+  resolveModalTokens,
+} from "./modal-tokens.js";
+import { surfaceAwareTheme } from "./surface-theme.js";
+import { textRoleStyle } from "./text-roles.js";
+
+// Pulls the glyph, not its touch target, onto the panel's padding edge.
+const CLOSE_EDGE_PULL = -(MODAL_CLOSE_TARGET - MODAL_CLOSE_ICON_SIZE) / 2;
+
+const useNoInsets = () => null;
+
+function headerStyle(t) {
+  // Never less than the pull, or the close target would leave the panel.
+  const edge = Math.max(t.padding, -CLOSE_EDGE_PULL);
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: t.actionGap,
+    paddingTop: edge,
+    paddingLeft: t.padding,
+    paddingRight: edge,
+    paddingBottom: t.sectionGap,
+  };
+}
+
+function closeStyle(pressed) {
+  return {
+    width: MODAL_CLOSE_TARGET,
+    height: MODAL_CLOSE_TARGET,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: "auto",
+    marginRight: CLOSE_EDGE_PULL,
+    marginVertical: CLOSE_EDGE_PULL,
+    borderRadius: MODAL_CLOSE_TARGET / 2,
+    opacity: pressed ? 0.6 : 1,
+  };
+}
+
+function footerStyle(t) {
+  return {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: t.actionGap,
+    paddingTop: t.sectionGap,
+    paddingHorizontal: t.padding,
+    paddingBottom: t.padding,
+  };
+}
+
+/**
+ * Bind the shared dialog to one platform's primitives and its `<Overlay>`.
+ *
+ * `useSafeAreaInsets` and `KeyboardAvoider` are the native host's: a browser
+ * lays out inside its own safe area and resizes for its own keyboard.
+ *
+ * @param {{View: any, Text: any, Pressable: any, ScrollView: any,
+ *   useSafeAreaInsets?: () => ({top: number, bottom: number}|null),
+ *   KeyboardAvoider?: any}} rn
+ * @param {any} Overlay — the host's bound `<Overlay>`.
+ */
+export function makeModal(rn, Overlay) {
+  const { View, Text, Pressable, ScrollView } = rn;
+  const useSafeAreaInsets = rn.useSafeAreaInsets || useNoInsets;
+
+  /**
+   * The standard dialog: a title, a close button, a body that scrolls when it
+   * is long, and a footer action row laid out below it. Its look follows the
+   * theme's `modal` scope (Design > Components > Dialogs). Components rendered
+   * inside it read a theme re-inked for the dialog's background.
+   *
+   * @param {object} props
+   * @param {boolean} [props.visible] — nothing is mounted while false.
+   * @param {() => void} [props.onRequestClose] — the close button, backdrop
+   *   press, Escape (web) and the Android back button all fire it. Omitted,
+   *   the dialog draws no close button and only your own controls close it.
+   * @param {boolean} [props.dismissible] — default true. False while the
+   *   dialog must stay open (a save in flight): no close button, and the
+   *   backdrop, Escape and Android back do not fire `onRequestClose`. Only
+   *   while that work runs, and always restore it: with no footer or in-body
+   *   control, such a dialog cannot be closed by anyone.
+   * @param {string} [props.title] — with no title and no close button, the
+   *   dialog has no header row.
+   * @param {any} [props.footer] — the action buttons; laid out as one
+   *   right-aligned row that wraps. Omitted, the dialog has no footer.
+   * @param {"dialog"|"sheet"} [props.presentation] — centred (default), or
+   *   anchored to the bottom edge.
+   * @param {"sm"|"md"|"lg"|"full"} [props.size] — the overlay's width tier.
+   * @param {boolean} [props.dismissOnBackdropPress] — default true.
+   * @param {"dialog"|"alertdialog"} [props.role] — default "dialog"; web only,
+   *   native has no equivalent.
+   * @param {{current: any}} [props.initialFocusRef] — the element focused on
+   *   open instead of the dialog itself; web only, a no-op on native.
+   * @param {string} [props.closeAccessibilityLabel] — default "Close".
+   * @param {string} [props.accessibilityLabel] — names a dialog with no title.
+   * @param {string} [props.testID] — on the panel; the close button, body and
+   *   footer take `-close`, `-body` and `-footer`.
+   */
+  function Modal({
+    visible = false,
+    onRequestClose,
+    dismissible = true,
+    title,
+    footer,
+    presentation = "dialog",
+    size = "md",
+    dismissOnBackdropPress = true,
+    role = "dialog",
+    initialFocusRef,
+    closeAccessibilityLabel = "Close",
+    accessibilityLabel,
+    testID,
+    children,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const deviceInsets = useSafeAreaInsets();
+    const titleId = React.useId();
+    const t = React.useMemo(
+      () => resolveModalTokens(theme, { size, presentation }),
+      [theme, size, presentation],
+    );
+    // Null while the theme's own surface stands, so the context is untouched.
+    const bodyTheme = React.useMemo(
+      () => (t.bodyBackdrop ? surfaceAwareTheme(theme, t.bodyBackdrop) : null),
+      [theme, t.bodyBackdrop],
+    );
+
+    const close =
+      dismissible && typeof onRequestClose === "function" ? onRequestClose : undefined;
+    const hasTitle = typeof title === "string" && title.length > 0;
+    const hasHeader = hasTitle || Boolean(close);
+    const hasFooter = footer !== undefined && footer !== null && footer !== false;
+    const fills = t.size === "full";
+    const insets = modalSafeInsets(t, deviceInsets);
+    const part = (name) => (testID ? `${testID}-${name}` : undefined);
+
+    const panel = {
+      padding: 0,
+      backgroundColor: t.panelColor,
+      ...overlayCornerStyle(t.radius, t.presentation),
+      ...t.shadow,
+      ...(insets.top ? { paddingTop: insets.top } : null),
+      ...(insets.bottom ? { paddingBottom: insets.bottom } : null),
+    };
+
+    const content = React.createElement(
+      React.Fragment,
+      null,
+      hasHeader
+        ? React.createElement(
+            View,
+            { style: headerStyle(t) },
+            hasTitle
+              ? React.createElement(
+                  Text,
+                  {
+                    nativeID: titleId,
+                    accessibilityRole: "header",
+                    style: {
+                      ...textRoleStyle("subtitle", theme.typography, theme.colors),
+                      flex: 1,
+                      color: t.titleColor,
+                    },
+                  },
+                  title,
+                )
+              : null,
+            close
+              ? React.createElement(
+                  Pressable,
+                  {
+                    onPress: close,
+                    accessibilityRole: "button",
+                    accessibilityLabel: closeAccessibilityLabel,
+                    testID: part("close"),
+                    style: ({ pressed }) => closeStyle(pressed),
+                  },
+                  React.createElement(Icon, {
+                    name: "x",
+                    size: MODAL_CLOSE_ICON_SIZE,
+                    color: t.closeColor,
+                  }),
+                )
+              : null,
+          )
+        : null,
+      React.createElement(
+        ScrollView,
+        {
+          // Shrinks inside the panel's height cap, so a long body scrolls here
+          // and the footer below it stays on screen.
+          style: fills ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
+          contentContainerStyle: {
+            paddingTop: hasHeader ? 0 : t.padding,
+            paddingHorizontal: t.padding,
+            paddingBottom: hasFooter ? 0 : t.padding,
+          },
+          alwaysBounceVertical: false,
+          keyboardShouldPersistTaps: "handled",
+          testID: part("body"),
+        },
+        children,
+      ),
+      hasFooter
+        ? React.createElement(
+            View,
+            { style: footerStyle(t), testID: part("footer") },
+            footer,
+          )
+        : null,
+    );
+
+    return React.createElement(
+      Overlay,
+      {
+        visible,
+        onRequestClose: close,
+        size,
+        presentation,
+        dismissOnBackdropPress: dismissOnBackdropPress && Boolean(close),
+        // The dialog's own close button is the one a screen reader meets.
+        backdropAccessible: false,
+        role,
+        accessibilityLabelledBy: hasTitle ? titleId : undefined,
+        // Where the host cannot point at the title, the name is the title.
+        accessibilityLabel: accessibilityLabel || (hasTitle ? title : undefined),
+        initialFocusRef,
+        panelFrame: rn.KeyboardAvoider,
+        style: panel,
+        testID,
+      },
+      // The body reads a theme whose inks suit the dialog's background.
+      React.createElement(ThemeScope, { theme: bodyTheme }, content),
+    );
+  }
+
+  Modal.displayName = "Modal";
+  return Modal;
+}

package/dist/modal.js

@@ -0,0 +1,8 @@
+// `<Modal>` (web). Binds ./modal-view.js to react-native-web and the web
+// `<Overlay>`; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeModal } from "./modal-view.js";
+import { Overlay } from "./overlay.js";
+
+export const Modal = makeModal(ReactNative, Overlay);

package/dist/modal.native.js

@@ -0,0 +1,45 @@
+// `<Modal>` (native). Binds ./modal-view.js to React Native's own primitives
+// and the native `<Overlay>`; only the imports differ from ./modal.js, plus
+// the two things a browser does for itself: safe-area insets and keyboard
+// avoidance. Both are the dialog's own; a bare `<Overlay>` gets neither.
+
+import React from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+// Host-provided: the exported app pins it and mounts its provider at the root.
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { makeModal } from "./modal-view.js";
+import { Overlay } from "./overlay.native.js";
+
+// Null with no provider above, which the view reads as "no insets".
+const useSafeAreaInsets = () => React.useContext(SafeAreaInsetsContext);
+
+// Wraps the panel only, so the scrim still covers the strip under a raised one.
+function KeyboardAvoider({ verticalAlign, children }) {
+  return React.createElement(
+    KeyboardAvoidingView,
+    {
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      // Lets a press beside the panel reach the backdrop behind this frame.
+      pointerEvents: "box-none",
+      style: {
+        flex: 1,
+        alignSelf: "stretch",
+        alignItems: "center",
+        justifyContent: verticalAlign,
+      },
+    },
+    children,
+  );
+}
+
+export const Modal = makeModal(
+  { View, Text, Pressable, ScrollView, useSafeAreaInsets, KeyboardAvoider },
+  Overlay,
+);

package/dist/overlay-tokens.js

@@ -7,16 +7,28 @@
 // thing tests can pin rather than a literal buried in JSX.
 
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { hexAlphaPercent, withHexAlpha } from "./contract.js";
+import { normaliseThemeComponents } from "./theme-components.js";
 
 export const OVERLAY_SIZES = Object.freeze(["sm", "md", "lg", "full"]);
 
+// `dialog` is centred; `sheet` rises from the bottom edge of the screen.
+export const OVERLAY_PRESENTATIONS = Object.freeze(["dialog", "sheet"]);
+
 export const OVERLAY_DEFAULTS = Object.freeze({
   size: "md",
+  presentation: "dialog",
+  elevation: "lg",
   // Slate-black at 55%: dark enough to mute a busy page behind the panel,
   // light enough that the page still reads as "still there, just behind".
   scrim: "rgba(15, 23, 42, 0.55)",
   // Breathing room between the panel and the screen edge on a phone.
   screenPadding: 16,
+  // Scrim kept visible above a sheet, so it reads as a layer over the page.
+  sheetTopGap: 48,
+  // A themed scrim with no alpha takes the default's; none may hide the page.
+  scrimAlphaPercent: 55,
+  scrimAlphaMaxPercent: 85,
 });
 
 // `full` deliberately has no ceiling — a media/PDF preview wants the screen.
@@ -31,6 +43,48 @@ export function normaliseOverlaySize(size) {
   return OVERLAY_SIZES.indexOf(size) === -1 ? OVERLAY_DEFAULTS.size : size;
 }
 
+export function normaliseOverlayPresentation(presentation) {
+  return OVERLAY_PRESENTATIONS.indexOf(presentation) === -1
+    ? OVERLAY_DEFAULTS.presentation
+    : presentation;
+}
+
+/**
+ * The theme's validated `modal` component scope (Design > Components > Dialogs):
+ * `<Modal>` paints from all of it, `<Overlay>` from its scrim alone.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ * @returns {Record<string, string|number>} the set tokens; `{}` when none.
+ */
+export function modalThemeScope(theme) {
+  const components = theme && typeof theme === "object" ? theme.components : null;
+  return normaliseThemeComponents({ modal: components && components.modal }).modal || {};
+}
+
+/**
+ * The scrim a themed colour really paints: always see-through, so a theme (or
+ * a planner) that names an opaque colour dims the page instead of hiding it.
+ */
+export function themedScrim(color) {
+  if (!color) return OVERLAY_DEFAULTS.scrim;
+  const alpha = hexAlphaPercent(color);
+  const { scrimAlphaPercent, scrimAlphaMaxPercent } = OVERLAY_DEFAULTS;
+  return withHexAlpha(
+    color,
+    alpha >= 100 ? scrimAlphaPercent : Math.min(alpha, scrimAlphaMaxPercent),
+  );
+}
+
+/**
+ * The panel's corners: all four for a dialog, the top two for a sheet, which
+ * meets the screen edge with square ones.
+ */
+export function overlayCornerStyle(radius, presentation) {
+  return presentation === "sheet"
+    ? { borderTopLeftRadius: radius, borderTopRightRadius: radius }
+    : { borderRadius: radius };
+}
+
 /**
  * Resolve the values one overlay is painted with, from the workspace theme.
  *
@@ -39,25 +93,35 @@ export function normaliseOverlaySize(size) {
  *
  * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
  * @param {string} size — `sm` | `md` | `lg` | `full`.
+ * @param {string} [presentation] — `dialog` | `sheet`; `full` is always a dialog.
  */
-export function resolveOverlayTokens(theme, size) {
+export function resolveOverlayTokens(theme, size, presentation) {
   const safeSize = normaliseOverlaySize(size);
+  const isFull = safeSize === "full";
+  const safePresentation = isFull
+    ? OVERLAY_DEFAULTS.presentation
+    : normaliseOverlayPresentation(presentation);
+  const isSheet = safePresentation === "sheet";
   const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
   const fallback = DEFAULT_THEME_TOKENS;
   const colors = base.colors || fallback.colors;
   const radii = base.radii || fallback.radii;
   const spacing = base.spacing || fallback.spacing;
-  const elevation = (base.elevation || fallback.elevation).lg || {};
+  const elevation =
+    (base.elevation || fallback.elevation)[OVERLAY_DEFAULTS.elevation] || {};
 
   return {
     size: safeSize,
-    scrim: OVERLAY_DEFAULTS.scrim,
+    presentation: safePresentation,
+    scrim: themedScrim(modalThemeScope(base).scrim),
     surface: colors.surface || fallback.colors.surface,
-    radius: safeSize === "full" ? 0 : radii.lg || fallback.radii.lg,
+    radius: isFull ? 0 : radii.lg || fallback.radii.lg,
     padding: spacing.lg || fallback.spacing.lg,
     // A `full` overlay runs edge to edge; every other size keeps a margin so
     // the scrim stays visible and the panel reads as a layer, not a screen.
-    screenPadding: safeSize === "full" ? 0 : OVERLAY_DEFAULTS.screenPadding,
+    screenPadding: isFull || isSheet ? 0 : OVERLAY_DEFAULTS.screenPadding,
+    topGap: isSheet ? OVERLAY_DEFAULTS.sheetTopGap : 0,
+    verticalAlign: isSheet ? "flex-end" : "center",
     maxWidth: SIZE_MAX_WIDTH[safeSize],
     elevation,
   };

package/dist/overlay-view.js

@@ -16,30 +16,51 @@
 
 import React from "react";
 import { useHostTheme } from "./hooks.js";
-import { resolveOverlayTokens } from "./overlay-tokens.js";
+import { overlayCornerStyle, resolveOverlayTokens } from "./overlay-tokens.js";
+
+// Kept clickable, but out of the tab order and the accessibility tree.
+const SILENT_BACKDROP = {
+  accessible: false,
+  focusable: false,
+  tabIndex: -1,
+  "aria-hidden": true,
+  importantForAccessibility: "no",
+};
 
 /**
  * Bind the shared overlay component to one platform's primitives.
  *
- * @param {{Modal: any, View: any, Pressable: any, StyleSheet: any}} rn
+ * `namesPanel` is for a host whose `Modal` cannot carry the accessible name
+ * (React Native's): the panel carries it there, the dialog node on the web.
+ *
+ * @param {{Modal: any, View: any, Pressable: any, StyleSheet: any,
+ *   namesPanel?: boolean}} rn
  */
 export function makeOverlay(rn) {
   const { Modal, View, Pressable, StyleSheet } = rn;
+  const namesPanel = Boolean(rn.namesPanel);
 
   function Overlay({
     visible = false,
     onRequestClose,
     size = "md",
+    presentation = "dialog",
     dismissOnBackdropPress = true,
+    backdropAccessible = true,
+    role = "dialog",
     accessibilityLabel,
+    accessibilityLabelledBy,
     closeAccessibilityLabel = "Close",
+    initialFocusRef,
+    panelFrame: PanelFrame,
     style,
+    testID,
     children,
   }) {
     const theme = useHostTheme();
     const tokens = React.useMemo(
-      () => resolveOverlayTokens(theme, size),
-      [theme, size],
+      () => resolveOverlayTokens(theme, size, presentation),
+      [theme, size, presentation],
     );
     const requestClose = React.useCallback(() => {
       if (typeof onRequestClose === "function") onRequestClose();
@@ -52,8 +73,9 @@ export function makeOverlay(rn) {
     const backdrop = {
       flex: 1,
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: tokens.verticalAlign,
       padding: tokens.screenPadding,
+      ...(tokens.topGap ? { paddingTop: tokens.topGap } : null),
       backgroundColor: tokens.scrim,
     };
     const panel = {
@@ -64,11 +86,21 @@ export function makeOverlay(rn) {
       flexShrink: 1,
       ...(tokens.maxWidth ? { maxWidth: tokens.maxWidth } : { flex: 1 }),
       backgroundColor: tokens.surface,
-      borderRadius: tokens.radius,
+      ...overlayCornerStyle(tokens.radius, tokens.presentation),
       padding: tokens.padding,
       ...tokens.elevation,
     };
 
+    const panelNode = React.createElement(
+      View,
+      {
+        style: [panel, style],
+        accessibilityLabel: namesPanel ? accessibilityLabel : undefined,
+        testID,
+      },
+      children,
+    );
+
     return React.createElement(
       Modal,
       {
@@ -77,6 +109,10 @@ export function makeOverlay(rn) {
         // Not animated: a sheet must answer the tap that opened it at once.
         animationType: "none",
         onRequestClose: requestClose,
+        role: role === "alertdialog" ? "alertdialog" : "dialog",
+        "aria-label": accessibilityLabelledBy ? undefined : accessibilityLabel,
+        "aria-labelledby": accessibilityLabelledBy,
+        initialFocusRef,
       },
       React.createElement(
         View,
@@ -85,18 +121,18 @@ export function makeOverlay(rn) {
           ? React.createElement(Pressable, {
               style: StyleSheet.absoluteFill,
               onPress: requestClose,
-              accessibilityRole: "button",
-              accessibilityLabel: closeAccessibilityLabel,
+              ...(backdropAccessible
+                ? {
+                    accessibilityRole: "button",
+                    accessibilityLabel: closeAccessibilityLabel,
+                  }
+                : SILENT_BACKDROP),
             })
           : null,
-        React.createElement(
-          View,
-          {
-            style: [panel, style],
-            accessibilityLabel,
-          },
-          children,
-        ),
+        // @internal `panelFrame`: `<Modal>` wraps its panel, never the scrim.
+        PanelFrame
+          ? React.createElement(PanelFrame, { verticalAlign: tokens.verticalAlign }, panelNode)
+          : panelNode,
       ),
     );
   }

package/dist/overlay.native.js

@@ -8,4 +8,11 @@
 import { Modal, View, Pressable, StyleSheet } from "react-native";
 import { makeOverlay } from "./overlay-view.js";
 
-export const Overlay = makeOverlay({ Modal, View, Pressable, StyleSheet });
+// RN's `Modal` forwards no ARIA props, so the panel carries the name here.
+export const Overlay = makeOverlay({
+  Modal,
+  View,
+  Pressable,
+  StyleSheet,
+  namesPanel: true,
+});