@fusion.dev/helix-headless 0.211.0 → 0.212.0

package/types/jsx.d.ts

@@ -26,6 +26,14 @@ import type {
   HelixCopyErrorEvent,
   HelixCopyEvent,
   HelixCreateEvent,
+  HelixDeviceButtonEvent,
+  HelixDeviceKeyEvent,
+  HelixDeviceScreenshotEvent,
+  HelixDeviceScrollEvent,
+  HelixDeviceSwipeEvent,
+  HelixDeviceTapEvent,
+  HelixDeviceTextEvent,
+  HelixDeviceTouchEvent,
   HelixDismissEvent,
   HelixEndEvent,
   HelixExpandEvent,
@@ -76,6 +84,7 @@ import type {
   HelixHeadlessDatePicker,
   HelixHeadlessDescriptionList,
   HelixHeadlessDescriptionListItem,
+  HelixHeadlessDeviceScreen,
   HelixHeadlessDialog,
   HelixHeadlessDivider,
   HelixHeadlessDonutChart,
@@ -12276,6 +12285,380 @@ makes the list a named group. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixHeadlessDeviceScreen` component event */
+export type HelixHeadlessDeviceScreenElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessDeviceScreen,
+  E
+>;
+/** `helix-device-button` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceButtonElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceButtonEvent>;
+/** `helix-device-key` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceKeyElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceKeyEvent>;
+/** `helix-device-screenshot` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceScreenshotElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceScreenshotEvent>;
+/** `helix-device-scroll` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceScrollElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceScrollEvent>;
+/** `helix-device-swipe` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceSwipeElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceSwipeEvent>;
+/** `helix-device-tap` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceTapElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceTapEvent>;
+/** `helix-device-text` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceTextElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceTextEvent>;
+/** `helix-device-touch` event type */
+export type HelixHeadlessDeviceScreenHelixDeviceTouchElementEvent =
+  HelixHeadlessDeviceScreenElementEvent<HelixDeviceTouchEvent>;
+
+export type HelixHeadlessDeviceScreenProps = {
+  /** The Back button's label. */
+  "back-label"?: (HelixHeadlessDeviceScreen["backLabel"]) | undefined;
+  /** The Back button's label. */
+  backLabel?: (HelixHeadlessDeviceScreen["backLabel"]) | undefined;
+  /** Which hardware buttons to draw, as a list: `back`, `home`, `recents`,
+`power`, `volume`, `rotate`, `screenshot`, and `fullscreen`, or `none`.
+They are drawn in that order whatever order the list is in. Absent is
+`home screenshot`. `volume` draws Volume up and Volume down, and `rotate`
+draws Rotate left and Rotate right. */
+  controls?: (HelixHeadlessDeviceScreen["controls"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  "controls-label"?: (HelixHeadlessDeviceScreen["controlsLabel"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  controlsLabel?: (HelixHeadlessDeviceScreen["controlsLabel"]) | undefined;
+  /** Which side of the device the hardware buttons sit on. Absent and `top`
+are a row above it, `bottom` is a row below it, and `start` and `end` are
+a column beside it, as the Android Emulator draws its toolbar. The words
+are sides, as Carousel's are, and not the corners a map's controls take. */
+  "controls-placement"?: (HelixHeadlessDeviceScreen["controlsPlacement"]) | undefined;
+  /** Which side of the device the hardware buttons sit on. Absent and `top`
+are a row above it, `bottom` is a row below it, and `start` and `end` are
+a column beside it, as the Android Emulator draws its toolbar. The words
+are sides, as Carousel's are, and not the corners a map's controls take. */
+  controlsPlacement?: (HelixHeadlessDeviceScreen["controlsPlacement"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  "fallback-label"?: (HelixHeadlessDeviceScreen["fallbackLabel"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  fallbackLabel?: (HelixHeadlessDeviceScreen["fallbackLabel"]) | undefined;
+  /** Also sends key presses with Control, Command, or Alt held, which are left
+to the browser otherwise. For an app that owns its window. Command or
+Control with V pastes either way. */
+  "forward-shortcuts"?: (HelixHeadlessDeviceScreen["forwardShortcuts"]) | undefined;
+  /** Also sends key presses with Control, Command, or Alt held, which are left
+to the browser otherwise. For an app that owns its window. Command or
+Control with V pastes either way. */
+  forwardShortcuts?: (HelixHeadlessDeviceScreen["forwardShortcuts"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixHeadlessDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixHeadlessDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The Home button's label. */
+  "home-label"?: (HelixHeadlessDeviceScreen["homeLabel"]) | undefined;
+  /** The Home button's label. */
+  homeLabel?: (HelixHeadlessDeviceScreen["homeLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  "keys-hint-label"?: (HelixHeadlessDeviceScreen["keysHintLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  keysHintLabel?: (HelixHeadlessDeviceScreen["keysHintLabel"]) | undefined;
+  /** The device's name, read by screen readers as the screen's name, such as
+"iPhone 17 Pro". Name each device on a page with several. Required. */
+  label?: (HelixHeadlessDeviceScreen["label"]) | undefined;
+  /** Shows the `loading` slot over the screen, for a stream that is starting
+or has stopped. Screen readers hear `loading-label`. */
+  loading?: (HelixHeadlessDeviceScreen["loading"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  "loading-label"?: (HelixHeadlessDeviceScreen["loadingLabel"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  loadingLabel?: (HelixHeadlessDeviceScreen["loadingLabel"]) | undefined;
+  /** The Power button's label. */
+  "power-label"?: (HelixHeadlessDeviceScreen["powerLabel"]) | undefined;
+  /** The Power button's label. */
+  powerLabel?: (HelixHeadlessDeviceScreen["powerLabel"]) | undefined;
+  /** Shows the screen and sends nothing: no touches, scrolls, keys, or button
+presses. The screen is then a picture, out of the tab order, and the
+hardware buttons are off but for screenshot and fullscreen. Buttons of
+your own in the `controls` slot are yours to turn off. */
+  readonly?: (HelixHeadlessDeviceScreen["readonly"]) | undefined;
+  /** The Recent apps button's label. */
+  "recents-label"?: (HelixHeadlessDeviceScreen["recentsLabel"]) | undefined;
+  /** The Recent apps button's label. */
+  recentsLabel?: (HelixHeadlessDeviceScreen["recentsLabel"]) | undefined;
+  /** What a screen reader calls the screen in place of its role, after its
+name: "iPhone 17 Pro, screen". Empty leaves the role. */
+  "role-label"?: (HelixHeadlessDeviceScreen["roleLabel"]) | undefined;
+  /** What a screen reader calls the screen in place of its role, after its
+name: "iPhone 17 Pro, screen". Empty leaves the role. */
+  roleLabel?: (HelixHeadlessDeviceScreen["roleLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  "rotate-left-label"?: (HelixHeadlessDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  rotateLeftLabel?: (HelixHeadlessDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  "rotate-right-label"?: (HelixHeadlessDeviceScreen["rotateRightLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  rotateRightLabel?: (HelixHeadlessDeviceScreen["rotateRightLabel"]) | undefined;
+  /** How far to turn the picture clockwise, in degrees: `90`, `180`, or `270`.
+For a source that sends frames in the device's natural orientation while
+the device is turned. Every point is turned back, so events stay in the
+device's own orientation. A source whose frames turn with the device
+needs none. */
+  rotation?: (HelixHeadlessDeviceScreen["rotation"]) | undefined;
+  /** The screen's height in the units your device takes input in: points for
+the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+Set alone, the width follows the stream's shape, and with neither, both
+are the stream's own size in pixels. */
+  "screen-height"?: (HelixHeadlessDeviceScreen["screenHeight"] | `${number}`) | undefined;
+  /** The screen's height in the units your device takes input in: points for
+the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+Set alone, the width follows the stream's shape, and with neither, both
+are the stream's own size in pixels. */
+  screenHeight?: (HelixHeadlessDeviceScreen["screenHeight"]) | undefined;
+  /** The screenshot button's label. */
+  "screenshot-label"?: (HelixHeadlessDeviceScreen["screenshotLabel"]) | undefined;
+  /** The screenshot button's label. */
+  screenshotLabel?: (HelixHeadlessDeviceScreen["screenshotLabel"]) | undefined;
+  /** The screen's width in the units your device takes input in, as
+`screen-height` is. Set alone, the height follows the stream's shape. */
+  "screen-width"?: (HelixHeadlessDeviceScreen["screenWidth"] | `${number}`) | undefined;
+  /** The screen's width in the units your device takes input in, as
+`screen-height` is. Set alone, the height follows the stream's shape. */
+  screenWidth?: (HelixHeadlessDeviceScreen["screenWidth"]) | undefined;
+  /** The screen's outline. Absent is a rectangle with rounded corners;
+`square` has square corners, as on a phone with a Home button or a
+television, and `circle` is round, as on a round watch, and takes
+touches inside the circle only. */
+  shape?: (HelixHeadlessDeviceScreen["shape"]) | undefined;
+  /** Draws a ring under each finger on the screen, as the iOS Simulator's
+Show single touches does. Rings from `showTap()` and `showSwipe()` are
+drawn either way. */
+  "show-touches"?: (HelixHeadlessDeviceScreen["showTouches"]) | undefined;
+  /** Draws a ring under each finger on the screen, as the iOS Simulator's
+Show single touches does. Rings from `showTap()` and `showSwipe()` are
+drawn either way. */
+  showTouches?: (HelixHeadlessDeviceScreen["showTouches"]) | undefined;
+  /** The Volume down button's label. */
+  "volume-down-label"?: (HelixHeadlessDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume down button's label. */
+  volumeDownLabel?: (HelixHeadlessDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume up button's label. */
+  "volume-up-label"?: (HelixHeadlessDeviceScreen["volumeUpLabel"]) | undefined;
+  /** The Volume up button's label. */
+  volumeUpLabel?: (HelixHeadlessDeviceScreen["volumeUpLabel"]) | undefined;
+
+  /** A hardware button was pressed, with how long it was held. Press it on the device in response. */
+  "onhelix-device-button"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceButtonElementEvent,
+  ) => void) | undefined;
+  /** A key went down or came up while the screen had focus. Press or release it on the device in response. */
+  "onhelix-device-key"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceKeyElementEvent,
+  ) => void) | undefined;
+  /** A screenshot was asked for. Take one in response. */
+  "onhelix-device-screenshot"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceScreenshotElementEvent,
+  ) => void) | undefined;
+  /** A wheel or a trackpad scrolled over the screen. Scroll the device in response. */
+  "onhelix-device-scroll"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceScrollElementEvent,
+  ) => void) | undefined;
+  /** One finger moved across the screen and lifted. Swipe the device in response. */
+  "onhelix-device-swipe"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceSwipeElementEvent,
+  ) => void) | undefined;
+  /** One finger touched the screen and lifted near where it landed. Tap the device in response. */
+  "onhelix-device-tap"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceTapElementEvent,
+  ) => void) | undefined;
+  /** Text was pasted into the screen. Type it on the device in response. */
+  "onhelix-device-text"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceTextElementEvent,
+  ) => void) | undefined;
+  /** A finger landed, moved, lifted, or was taken away. Touch the device in response. */
+  "onhelix-device-touch"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceTouchElementEvent,
+  ) => void) | undefined;
+};
+
+export type HelixHeadlessDeviceScreenSolidJsProps = {
+  /** The Back button's label. */
+  "attr:back-label"?: (HelixHeadlessDeviceScreen["backLabel"]) | undefined;
+  /** The Back button's label. */
+  "prop:backLabel"?: (HelixHeadlessDeviceScreen["backLabel"]) | undefined;
+  /** Which hardware buttons to draw, as a list: `back`, `home`, `recents`,
+`power`, `volume`, `rotate`, `screenshot`, and `fullscreen`, or `none`.
+They are drawn in that order whatever order the list is in. Absent is
+`home screenshot`. `volume` draws Volume up and Volume down, and `rotate`
+draws Rotate left and Rotate right. */
+  "prop:controls"?: (HelixHeadlessDeviceScreen["controls"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  "attr:controls-label"?: (HelixHeadlessDeviceScreen["controlsLabel"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  "prop:controlsLabel"?: (HelixHeadlessDeviceScreen["controlsLabel"]) | undefined;
+  /** Which side of the device the hardware buttons sit on. Absent and `top`
+are a row above it, `bottom` is a row below it, and `start` and `end` are
+a column beside it, as the Android Emulator draws its toolbar. The words
+are sides, as Carousel's are, and not the corners a map's controls take. */
+  "attr:controls-placement"?: (HelixHeadlessDeviceScreen["controlsPlacement"]) | undefined;
+  /** Which side of the device the hardware buttons sit on. Absent and `top`
+are a row above it, `bottom` is a row below it, and `start` and `end` are
+a column beside it, as the Android Emulator draws its toolbar. The words
+are sides, as Carousel's are, and not the corners a map's controls take. */
+  "prop:controlsPlacement"?: (HelixHeadlessDeviceScreen["controlsPlacement"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  "attr:fallback-label"?: (HelixHeadlessDeviceScreen["fallbackLabel"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  "prop:fallbackLabel"?: (HelixHeadlessDeviceScreen["fallbackLabel"]) | undefined;
+  /** Also sends key presses with Control, Command, or Alt held, which are left
+to the browser otherwise. For an app that owns its window. Command or
+Control with V pastes either way. */
+  "bool:forward-shortcuts"?: (HelixHeadlessDeviceScreen["forwardShortcuts"]) | undefined;
+  /** Also sends key presses with Control, Command, or Alt held, which are left
+to the browser otherwise. For an app that owns its window. Command or
+Control with V pastes either way. */
+  "prop:forwardShortcuts"?: (HelixHeadlessDeviceScreen["forwardShortcuts"]) | undefined;
+  /** The fullscreen button's label. */
+  "attr:fullscreen-label"?: (HelixHeadlessDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  "prop:fullscreenLabel"?: (HelixHeadlessDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The Home button's label. */
+  "attr:home-label"?: (HelixHeadlessDeviceScreen["homeLabel"]) | undefined;
+  /** The Home button's label. */
+  "prop:homeLabel"?: (HelixHeadlessDeviceScreen["homeLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  "attr:keys-hint-label"?: (HelixHeadlessDeviceScreen["keysHintLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  "prop:keysHintLabel"?: (HelixHeadlessDeviceScreen["keysHintLabel"]) | undefined;
+  /** The device's name, read by screen readers as the screen's name, such as
+"iPhone 17 Pro". Name each device on a page with several. Required. */
+  "prop:label"?: (HelixHeadlessDeviceScreen["label"]) | undefined;
+  /** Shows the `loading` slot over the screen, for a stream that is starting
+or has stopped. Screen readers hear `loading-label`. */
+  "prop:loading"?: (HelixHeadlessDeviceScreen["loading"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  "attr:loading-label"?: (HelixHeadlessDeviceScreen["loadingLabel"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  "prop:loadingLabel"?: (HelixHeadlessDeviceScreen["loadingLabel"]) | undefined;
+  /** The Power button's label. */
+  "attr:power-label"?: (HelixHeadlessDeviceScreen["powerLabel"]) | undefined;
+  /** The Power button's label. */
+  "prop:powerLabel"?: (HelixHeadlessDeviceScreen["powerLabel"]) | undefined;
+  /** Shows the screen and sends nothing: no touches, scrolls, keys, or button
+presses. The screen is then a picture, out of the tab order, and the
+hardware buttons are off but for screenshot and fullscreen. Buttons of
+your own in the `controls` slot are yours to turn off. */
+  "prop:readonly"?: (HelixHeadlessDeviceScreen["readonly"]) | undefined;
+  /** The Recent apps button's label. */
+  "attr:recents-label"?: (HelixHeadlessDeviceScreen["recentsLabel"]) | undefined;
+  /** The Recent apps button's label. */
+  "prop:recentsLabel"?: (HelixHeadlessDeviceScreen["recentsLabel"]) | undefined;
+  /** What a screen reader calls the screen in place of its role, after its
+name: "iPhone 17 Pro, screen". Empty leaves the role. */
+  "attr:role-label"?: (HelixHeadlessDeviceScreen["roleLabel"]) | undefined;
+  /** What a screen reader calls the screen in place of its role, after its
+name: "iPhone 17 Pro, screen". Empty leaves the role. */
+  "prop:roleLabel"?: (HelixHeadlessDeviceScreen["roleLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  "attr:rotate-left-label"?: (HelixHeadlessDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  "prop:rotateLeftLabel"?: (HelixHeadlessDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  "attr:rotate-right-label"?: (HelixHeadlessDeviceScreen["rotateRightLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  "prop:rotateRightLabel"?: (HelixHeadlessDeviceScreen["rotateRightLabel"]) | undefined;
+  /** How far to turn the picture clockwise, in degrees: `90`, `180`, or `270`.
+For a source that sends frames in the device's natural orientation while
+the device is turned. Every point is turned back, so events stay in the
+device's own orientation. A source whose frames turn with the device
+needs none. */
+  "prop:rotation"?: (HelixHeadlessDeviceScreen["rotation"]) | undefined;
+  /** The screen's height in the units your device takes input in: points for
+the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+Set alone, the width follows the stream's shape, and with neither, both
+are the stream's own size in pixels. */
+  "attr:screen-height"?: (HelixHeadlessDeviceScreen["screenHeight"] | `${number}`) | undefined;
+  /** The screen's height in the units your device takes input in: points for
+the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+Set alone, the width follows the stream's shape, and with neither, both
+are the stream's own size in pixels. */
+  "prop:screenHeight"?: (HelixHeadlessDeviceScreen["screenHeight"]) | undefined;
+  /** The screenshot button's label. */
+  "attr:screenshot-label"?: (HelixHeadlessDeviceScreen["screenshotLabel"]) | undefined;
+  /** The screenshot button's label. */
+  "prop:screenshotLabel"?: (HelixHeadlessDeviceScreen["screenshotLabel"]) | undefined;
+  /** The screen's width in the units your device takes input in, as
+`screen-height` is. Set alone, the height follows the stream's shape. */
+  "attr:screen-width"?: (HelixHeadlessDeviceScreen["screenWidth"] | `${number}`) | undefined;
+  /** The screen's width in the units your device takes input in, as
+`screen-height` is. Set alone, the height follows the stream's shape. */
+  "prop:screenWidth"?: (HelixHeadlessDeviceScreen["screenWidth"]) | undefined;
+  /** The screen's outline. Absent is a rectangle with rounded corners;
+`square` has square corners, as on a phone with a Home button or a
+television, and `circle` is round, as on a round watch, and takes
+touches inside the circle only. */
+  "prop:shape"?: (HelixHeadlessDeviceScreen["shape"]) | undefined;
+  /** Draws a ring under each finger on the screen, as the iOS Simulator's
+Show single touches does. Rings from `showTap()` and `showSwipe()` are
+drawn either way. */
+  "bool:show-touches"?: (HelixHeadlessDeviceScreen["showTouches"]) | undefined;
+  /** Draws a ring under each finger on the screen, as the iOS Simulator's
+Show single touches does. Rings from `showTap()` and `showSwipe()` are
+drawn either way. */
+  "prop:showTouches"?: (HelixHeadlessDeviceScreen["showTouches"]) | undefined;
+  /** The Volume down button's label. */
+  "attr:volume-down-label"?: (HelixHeadlessDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume down button's label. */
+  "prop:volumeDownLabel"?: (HelixHeadlessDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume up button's label. */
+  "attr:volume-up-label"?: (HelixHeadlessDeviceScreen["volumeUpLabel"]) | undefined;
+  /** The Volume up button's label. */
+  "prop:volumeUpLabel"?: (HelixHeadlessDeviceScreen["volumeUpLabel"]) | undefined;
+  /** A hardware button was pressed, with how long it was held. Press it on the device in response. */
+  "on:helix-device-button"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceButtonElementEvent,
+  ) => void) | undefined;
+  /** A key went down or came up while the screen had focus. Press or release it on the device in response. */
+  "on:helix-device-key"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceKeyElementEvent,
+  ) => void) | undefined;
+  /** A screenshot was asked for. Take one in response. */
+  "on:helix-device-screenshot"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceScreenshotElementEvent,
+  ) => void) | undefined;
+  /** A wheel or a trackpad scrolled over the screen. Scroll the device in response. */
+  "on:helix-device-scroll"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceScrollElementEvent,
+  ) => void) | undefined;
+  /** One finger moved across the screen and lifted. Swipe the device in response. */
+  "on:helix-device-swipe"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceSwipeElementEvent,
+  ) => void) | undefined;
+  /** One finger touched the screen and lifted near where it landed. Tap the device in response. */
+  "on:helix-device-tap"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceTapElementEvent,
+  ) => void) | undefined;
+  /** Text was pasted into the screen. Type it on the device in response. */
+  "on:helix-device-text"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceTextElementEvent,
+  ) => void) | undefined;
+  /** A finger landed, moved, lifted, or was taken away. Touch the device in response. */
+  "on:helix-device-touch"?: ((
+    e: HelixHeadlessDeviceScreenHelixDeviceTouchElementEvent,
+  ) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 /** `HelixHeadlessDialog` component event */
 export type HelixHeadlessDialogElementEvent<E = Event> = TypedEvent<
   HelixHeadlessDialog,
@@ -48888,6 +49271,296 @@ export type CustomElements<F extends Framework = "other"> = {
       BaseEvents<HelixHeadlessDescriptionList>
   >;
 
+  /**
+   * Shows the screen of a phone, a tablet, or a watch, such as the iOS Simulator
+   * or the Android Emulator, and turns what you do on it into events. Helix does
+   * not connect to the device. Put the element that draws the stream inside: a
+   * `<video>` fed by WebRTC or Media Source, an `<img>` showing an MJPEG stream,
+   * or a `<canvas>` you draw decoded frames on. The frame gives the screen the
+   * device's shape and stretches the element to fill it.
+   *
+   * Set `screen-width` and `screen-height` to the screen's size in the units
+   * your device takes input in: points for the iOS Simulator, and pixels for an
+   * Android device. Every point an event carries is in those units, beside the
+   * `width` and `height` it is measured against. Without them, the frame reads
+   * the stream's own size in pixels.
+   *
+   * **Touches.** Listen in one of two ways, and not both, or the device moves
+   * twice:
+   * - `helix-device-touch` for each finger as it lands, moves, and lifts, for a
+   *   source that takes live touches. A drag and a pinch need it.
+   * - `helix-device-tap` and `helix-device-swipe` once the finger lifts, for a
+   *   source that takes whole gestures. A long press is a tap with a long
+   *   `duration`.
+   *
+   * Alt, or Option on a Mac, with a drag sends two touches mirrored about the
+   * middle of the screen, for a pinch or a turn, as the iOS Simulator does. A
+   * wheel or a trackpad over the screen sends `helix-device-scroll`.
+   *
+   * **Keyboard.** Press Tab to reach the screen, or press the screen. While it
+   * has focus:
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Any key | Sends `helix-device-key` as it goes down, and again as it comes up. |
+   * | Tab, Shift with Tab | Moves focus on from the screen. Never sent. |
+   * | Control, Command, or Alt with a key | Left to the browser, unless `forward-shortcuts` is set. |
+   * | Command or Control with V | Sends the clipboard's text as `helix-device-text`. |
+   *
+   * A key still held when focus leaves is sent as released. The screen has the
+   * `application` role, so a screen reader passes every key to it, and its
+   * description says how to leave.
+   *
+   * **Buttons.** `controls` names the hardware buttons to draw: `back`, `home`,
+   * `recents`, `power`, `volume`, `rotate`, `screenshot`, and `fullscreen`,
+   * `home screenshot` by default. Each sends `helix-device-button` with how long
+   * it was held, and the screenshot button sends `helix-device-screenshot`.
+   * `press()` and `screenshot()` do the same from a script. Put buttons of your
+   * own in the `controls` slot, and they join the row. The row is one tab stop,
+   * and the arrow keys move along it, or Up and Down in a column.
+   *
+   * Set `rotation` where your source sends frames in the device's natural
+   * orientation while the device is turned: the frame turns the picture, and
+   * turns every point back. Set `readonly` to show the screen and send nothing,
+   * such as while an agent drives the device. The screen is then a picture, and
+   * `showTap()` and `showSwipe()` mark where the agent touched it.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `back-label`/`backLabel`: The Back button's label.
+   * - `controls`: Which hardware buttons to draw, as a list: `back`, `home`, `recents`,
+   * `power`, `volume`, `rotate`, `screenshot`, and `fullscreen`, or `none`.
+   * They are drawn in that order whatever order the list is in. Absent is
+   * `home screenshot`. `volume` draws Volume up and Volume down, and `rotate`
+   * draws Rotate left and Rotate right.
+   * - `controls-label`/`controlsLabel`: The name of the toolbar of hardware buttons, read by screen readers.
+   * - `controls-placement`/`controlsPlacement`: Which side of the device the hardware buttons sit on. Absent and `top`
+   * are a row above it, `bottom` is a row below it, and `start` and `end` are
+   * a column beside it, as the Android Emulator draws its toolbar. The words
+   * are sides, as Carousel's are, and not the corners a map's controls take.
+   * - `fallback-label`/`fallbackLabel`: The screen's name where `label` is empty and the host has no `aria-label`.
+   * - `forward-shortcuts`/`forwardShortcuts`: Also sends key presses with Control, Command, or Alt held, which are left
+   * to the browser otherwise. For an app that owns its window. Command or
+   * Control with V pastes either way.
+   * - `fullscreen-label`/`fullscreenLabel`: The fullscreen button's label.
+   * - `home-label`/`homeLabel`: The Home button's label.
+   * - `keys-hint-label`/`keysHintLabel`: What a screen reader says about the keys when it reaches the screen,
+   * after its name.
+   * - `label`: The device's name, read by screen readers as the screen's name, such as
+   * "iPhone 17 Pro". Name each device on a page with several. Required.
+   * - `loading`: Shows the `loading` slot over the screen, for a stream that is starting
+   * or has stopped. Screen readers hear `loading-label`.
+   * - `loading-label`/`loadingLabel`: What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot.
+   * - `power-label`/`powerLabel`: The Power button's label.
+   * - `readonly`: Shows the screen and sends nothing: no touches, scrolls, keys, or button
+   * presses. The screen is then a picture, out of the tab order, and the
+   * hardware buttons are off but for screenshot and fullscreen. Buttons of
+   * your own in the `controls` slot are yours to turn off.
+   * - `recents-label`/`recentsLabel`: The Recent apps button's label.
+   * - `role-label`/`roleLabel`: What a screen reader calls the screen in place of its role, after its
+   * name: "iPhone 17 Pro, screen". Empty leaves the role.
+   * - `rotate-left-label`/`rotateLeftLabel`: The Rotate left button's label.
+   * - `rotate-right-label`/`rotateRightLabel`: The Rotate right button's label.
+   * - `rotation`: How far to turn the picture clockwise, in degrees: `90`, `180`, or `270`.
+   * For a source that sends frames in the device's natural orientation while
+   * the device is turned. Every point is turned back, so events stay in the
+   * device's own orientation. A source whose frames turn with the device
+   * needs none.
+   * - `screen-height`/`screenHeight`: The screen's height in the units your device takes input in: points for
+   * the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+   * Set alone, the width follows the stream's shape, and with neither, both
+   * are the stream's own size in pixels.
+   * - `screenshot-label`/`screenshotLabel`: The screenshot button's label.
+   * - `screen-width`/`screenWidth`: The screen's width in the units your device takes input in, as
+   * `screen-height` is. Set alone, the height follows the stream's shape.
+   * - `shape`: The screen's outline. Absent is a rectangle with rounded corners;
+   * `square` has square corners, as on a phone with a Home button or a
+   * television, and `circle` is round, as on a round watch, and takes
+   * touches inside the circle only.
+   * - `show-touches`/`showTouches`: Draws a ring under each finger on the screen, as the iOS Simulator's
+   * Show single touches does. Rings from `showTap()` and `showSwipe()` are
+   * drawn either way.
+   * - `volume-down-label`/`volumeDownLabel`: The Volume down button's label.
+   * - `volume-up-label`/`volumeUpLabel`: The Volume up button's label.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-device-button`: A hardware button was pressed, with how long it was held. Press it on the device in response.
+   * - `helix-device-key`: A key went down or came up while the screen had focus. Press or release it on the device in response.
+   * - `helix-device-screenshot`: A screenshot was asked for. Take one in response.
+   * - `helix-device-scroll`: A wheel or a trackpad scrolled over the screen. Scroll the device in response.
+   * - `helix-device-swipe`: One finger moved across the screen and lifted. Swipe the device in response.
+   * - `helix-device-tap`: One finger touched the screen and lifted near where it landed. Tap the device in response.
+   * - `helix-device-text`: Text was pasted into the screen. Type it on the device in response.
+   * - `helix-device-touch`: A finger landed, moved, lifted, or was taken away. Touch the device in response.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The element that draws the stream: a `<video>`, an `<img>`, or a `<canvas>`.
+   * - `back-icon`: Replaces the glyph inside the Back button.
+   * - `bezel`: A picture of the device drawn over the screen, such as a photograph of a phone with a clear screen. It takes no touches.
+   * - `controls`: Buttons of your own, such as Shake or Record, in the row after the hardware buttons and before the fullscreen button.
+   * - `empty`: Content shown over the screen while no element that draws the stream is inside and `loading` is not set, such as "No simulator is running" and a button to start one.
+   * - `footer`: Content below the device.
+   * - `fullscreen-icon`: Replaces the glyph inside the fullscreen button.
+   * - `header`: Content above the device, such as its name and state.
+   * - `home-icon`: Replaces the glyph inside the Home button.
+   * - `loading`: Content shown over the screen while `loading` is set, such as a spinner. `loading-label` by default, which screen readers hear either way.
+   * - `power-icon`: Replaces the glyph inside the Power button.
+   * - `recents-icon`: Replaces the glyph inside the Recent apps button.
+   * - `rotate-left-icon`: Replaces the glyph inside the Rotate left button.
+   * - `rotate-right-icon`: Replaces the glyph inside the Rotate right button.
+   * - `screenshot-icon`: Replaces the glyph inside the screenshot button.
+   * - `volume-down-icon`: Replaces the glyph inside the Volume down button.
+   * - `volume-up-icon`: Replaces the glyph inside the Volume up button.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `press(button: DeviceButton, duration = 0) => void`: Presses a hardware button, as its control does: sends
+   * `helix-device-button`. `duration` is how long it is held, in
+   * milliseconds.
+   * - `screenshot() => void`: Asks for a screenshot, as the screenshot button does: sends `helix-device-screenshot`.
+   * - `capture(type = 'image/png', quality?: number) => Promise<Blob>`: The picture on the screen now, as an image, at the stream's own size and
+   * turned by `rotation`. For a page with no sharper screenshot from its
+   * source.
+   *
+   * Fails where there is no stream, where it has not drawn a frame, and where
+   * the browser will not let a page read it, such as an image from another
+   * origin served without CORS.
+   * - `showTap(x: number, y: number) => void`: Draws a ring at a point on the screen for a moment, in the device's
+   * units, for a touch made elsewhere, such as by an agent. Drawn whether or
+   * not `show-touches` is set, and nothing is sent.
+   * - `showSwipe(fromX: number, fromY: number, toX: number, toY: number, duration = 300) => void`: Draws a ring that travels from one point to another over `duration`
+   * milliseconds, in the device's units, for a swipe made elsewhere, as
+   * `showTap()` does for a tap.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--device-screen-ratio`: The drawn screen's width divided by its height, turned by `rotation`, as a number. Written by the frame once the screen's size is known.
+   * - `--device-screen-rotation`: How far the picture is turned, as an angle. The frame writes it from `rotation`.
+   * - `--device-screen-touch-duration`: How long a swipe's ring takes to travel, as a time. Written on each ring from `showSwipe()`.
+   * - `--device-screen-touch-to-x`: Where a swipe's ring travels to, across the screen, as a percentage. Written on each ring from `showSwipe()`.
+   * - `--device-screen-touch-to-y`: Where a swipe's ring travels to, down the screen, as a percentage. Written on each ring from `showSwipe()`.
+   * - `--device-screen-touch-x`: Where a ring is, across the screen, as a percentage. Written on each ring.
+   * - `--device-screen-touch-y`: Where a ring is, down the screen, as a percentage. Written on each ring.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `back`: The Back button.
+   * - `back-button`: The Back button's inner button.
+   * - `back-live`: The Back button's live region, which speaks while the button is pending.
+   * - `back-spinner`: The ring the Back button turns while it is pending.
+   * - `back-text`: The box the Back button's icon sits in.
+   * - `bezel`: The body of the device around the screen.
+   * - `controls`: The row of buttons: the hardware buttons and any of yours in the `controls` slot.
+   * - `device`: The box the device is fitted into, which keeps its shape inside it.
+   * - `empty`: The box over the screen that holds the `empty` slot while no stream is inside and `loading` is not set. It stands beside the screen, so what you put in it takes presses and keys of its own, and a read-only screen does not hide it from screen readers.
+   * - `footer`: The strip below the device.
+   * - `fullscreen`: The button that makes the device fill the screen.
+   * - `fullscreen-button`: The fullscreen button's inner button.
+   * - `fullscreen-live`: The fullscreen button's live region, which speaks while the button is pending.
+   * - `fullscreen-spinner`: The ring the fullscreen button turns while it is pending.
+   * - `fullscreen-text`: The box the fullscreen button's icon sits in.
+   * - `header`: The strip above the device.
+   * - `home`: The Home button.
+   * - `home-button`: The Home button's inner button.
+   * - `home-live`: The Home button's live region, which speaks while the button is pending.
+   * - `home-spinner`: The ring the Home button turns while it is pending.
+   * - `home-text`: The box the Home button's icon sits in.
+   * - `keys-hint`: What a screen reader says about the keys when it reaches the screen, as its description. Read by screen readers only.
+   * - `live`: What screen readers hear while `loading` is set: `loading-label`. Read by screen readers only.
+   * - `loading`: The box over the screen that holds the `loading` slot while `loading` is set. Screen readers hear `live` in its place.
+   * - `picture`: The box the stream is drawn in, turned by `rotation`.
+   * - `power`: The Power button.
+   * - `power-button`: The Power button's inner button.
+   * - `power-live`: The Power button's live region, which speaks while the button is pending.
+   * - `power-spinner`: The ring the Power button turns while it is pending.
+   * - `power-text`: The box the Power button's icon sits in.
+   * - `recents`: The Recent apps button.
+   * - `recents-button`: The Recent apps button's inner button.
+   * - `recents-live`: The Recent apps button's live region, which speaks while the button is pending.
+   * - `recents-spinner`: The ring the Recent apps button turns while it is pending.
+   * - `recents-text`: The box the Recent apps button's icon sits in.
+   * - `region`: The box that holds the device, its buttons, the header, and the footer.
+   * - `rotate-left`: The Rotate left button.
+   * - `rotate-left-button`: The Rotate left button's inner button.
+   * - `rotate-left-live`: The Rotate left button's live region, which speaks while the button is pending.
+   * - `rotate-left-spinner`: The ring the Rotate left button turns while it is pending.
+   * - `rotate-left-text`: The box the Rotate left button's icon sits in.
+   * - `rotate-right`: The Rotate right button.
+   * - `rotate-right-button`: The Rotate right button's inner button.
+   * - `rotate-right-live`: The Rotate right button's live region, which speaks while the button is pending.
+   * - `rotate-right-spinner`: The ring the Rotate right button turns while it is pending.
+   * - `rotate-right-text`: The box the Rotate right button's icon sits in.
+   * - `screen`: The device's screen, which takes the touches and the keys.
+   * - `screenshot`: The button that asks for a screenshot.
+   * - `screenshot-button`: The screenshot button's inner button.
+   * - `screenshot-live`: The screenshot button's live region, which speaks while the button is pending.
+   * - `screenshot-spinner`: The ring the screenshot button turns while it is pending.
+   * - `screenshot-text`: The box the screenshot button's icon sits in.
+   * - `touch`: A ring where a touch is or was.
+   * - `touch-held`: A ring under a finger that is down, beside `touch`, with `show-touches`.
+   * - `volume-down`: The Volume down button.
+   * - `volume-down-button`: The Volume down button's inner button.
+   * - `volume-down-live`: The Volume down button's live region, which speaks while the button is pending.
+   * - `volume-down-spinner`: The ring the Volume down button turns while it is pending.
+   * - `volume-down-text`: The box the Volume down button's icon sits in.
+   * - `volume-up`: The Volume up button.
+   * - `volume-up-button`: The Volume up button's inner button.
+   * - `volume-up-live`: The Volume up button's live region, which speaks while the button is pending.
+   * - `volume-up-spinner`: The ring the Volume up button turns while it is pending.
+   * - `volume-up-text`: The box the Volume up button's icon sits in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `empty`: No element that draws the stream is inside, which the frame knows once it runs in the browser.
+   * - `fullscreen`: The device fills the screen.
+   * - `loading`: `loading` is set.
+   * - `readonly`: `readonly` is set, and the screen sends nothing.
+   * - `sideways`: `rotation` turns the picture a quarter, so the drawn screen is the device's height wide.
+   * - `touching`: A finger is on the screen.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-headless-device-screen": Partial<
+    HelixHeadlessDeviceScreenProps &
+      BaseProps<HelixHeadlessDeviceScreen, F> &
+      BaseEvents<HelixHeadlessDeviceScreen>
+  >;
+
   /**
    * Renders a native `<dialog>` opened with `showModal()`. The platform provides:
    *
@@ -81740,6 +82413,297 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixHeadlessDescriptionList>
   >;
 
+  /**
+   * Shows the screen of a phone, a tablet, or a watch, such as the iOS Simulator
+   * or the Android Emulator, and turns what you do on it into events. Helix does
+   * not connect to the device. Put the element that draws the stream inside: a
+   * `<video>` fed by WebRTC or Media Source, an `<img>` showing an MJPEG stream,
+   * or a `<canvas>` you draw decoded frames on. The frame gives the screen the
+   * device's shape and stretches the element to fill it.
+   *
+   * Set `screen-width` and `screen-height` to the screen's size in the units
+   * your device takes input in: points for the iOS Simulator, and pixels for an
+   * Android device. Every point an event carries is in those units, beside the
+   * `width` and `height` it is measured against. Without them, the frame reads
+   * the stream's own size in pixels.
+   *
+   * **Touches.** Listen in one of two ways, and not both, or the device moves
+   * twice:
+   * - `helix-device-touch` for each finger as it lands, moves, and lifts, for a
+   *   source that takes live touches. A drag and a pinch need it.
+   * - `helix-device-tap` and `helix-device-swipe` once the finger lifts, for a
+   *   source that takes whole gestures. A long press is a tap with a long
+   *   `duration`.
+   *
+   * Alt, or Option on a Mac, with a drag sends two touches mirrored about the
+   * middle of the screen, for a pinch or a turn, as the iOS Simulator does. A
+   * wheel or a trackpad over the screen sends `helix-device-scroll`.
+   *
+   * **Keyboard.** Press Tab to reach the screen, or press the screen. While it
+   * has focus:
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Any key | Sends `helix-device-key` as it goes down, and again as it comes up. |
+   * | Tab, Shift with Tab | Moves focus on from the screen. Never sent. |
+   * | Control, Command, or Alt with a key | Left to the browser, unless `forward-shortcuts` is set. |
+   * | Command or Control with V | Sends the clipboard's text as `helix-device-text`. |
+   *
+   * A key still held when focus leaves is sent as released. The screen has the
+   * `application` role, so a screen reader passes every key to it, and its
+   * description says how to leave.
+   *
+   * **Buttons.** `controls` names the hardware buttons to draw: `back`, `home`,
+   * `recents`, `power`, `volume`, `rotate`, `screenshot`, and `fullscreen`,
+   * `home screenshot` by default. Each sends `helix-device-button` with how long
+   * it was held, and the screenshot button sends `helix-device-screenshot`.
+   * `press()` and `screenshot()` do the same from a script. Put buttons of your
+   * own in the `controls` slot, and they join the row. The row is one tab stop,
+   * and the arrow keys move along it, or Up and Down in a column.
+   *
+   * Set `rotation` where your source sends frames in the device's natural
+   * orientation while the device is turned: the frame turns the picture, and
+   * turns every point back. Set `readonly` to show the screen and send nothing,
+   * such as while an agent drives the device. The screen is then a picture, and
+   * `showTap()` and `showSwipe()` mark where the agent touched it.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `back-label`/`backLabel`: The Back button's label.
+   * - `controls`: Which hardware buttons to draw, as a list: `back`, `home`, `recents`,
+   * `power`, `volume`, `rotate`, `screenshot`, and `fullscreen`, or `none`.
+   * They are drawn in that order whatever order the list is in. Absent is
+   * `home screenshot`. `volume` draws Volume up and Volume down, and `rotate`
+   * draws Rotate left and Rotate right.
+   * - `controls-label`/`controlsLabel`: The name of the toolbar of hardware buttons, read by screen readers.
+   * - `controls-placement`/`controlsPlacement`: Which side of the device the hardware buttons sit on. Absent and `top`
+   * are a row above it, `bottom` is a row below it, and `start` and `end` are
+   * a column beside it, as the Android Emulator draws its toolbar. The words
+   * are sides, as Carousel's are, and not the corners a map's controls take.
+   * - `fallback-label`/`fallbackLabel`: The screen's name where `label` is empty and the host has no `aria-label`.
+   * - `forward-shortcuts`/`forwardShortcuts`: Also sends key presses with Control, Command, or Alt held, which are left
+   * to the browser otherwise. For an app that owns its window. Command or
+   * Control with V pastes either way.
+   * - `fullscreen-label`/`fullscreenLabel`: The fullscreen button's label.
+   * - `home-label`/`homeLabel`: The Home button's label.
+   * - `keys-hint-label`/`keysHintLabel`: What a screen reader says about the keys when it reaches the screen,
+   * after its name.
+   * - `label`: The device's name, read by screen readers as the screen's name, such as
+   * "iPhone 17 Pro". Name each device on a page with several. Required.
+   * - `loading`: Shows the `loading` slot over the screen, for a stream that is starting
+   * or has stopped. Screen readers hear `loading-label`.
+   * - `loading-label`/`loadingLabel`: What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot.
+   * - `power-label`/`powerLabel`: The Power button's label.
+   * - `readonly`: Shows the screen and sends nothing: no touches, scrolls, keys, or button
+   * presses. The screen is then a picture, out of the tab order, and the
+   * hardware buttons are off but for screenshot and fullscreen. Buttons of
+   * your own in the `controls` slot are yours to turn off.
+   * - `recents-label`/`recentsLabel`: The Recent apps button's label.
+   * - `role-label`/`roleLabel`: What a screen reader calls the screen in place of its role, after its
+   * name: "iPhone 17 Pro, screen". Empty leaves the role.
+   * - `rotate-left-label`/`rotateLeftLabel`: The Rotate left button's label.
+   * - `rotate-right-label`/`rotateRightLabel`: The Rotate right button's label.
+   * - `rotation`: How far to turn the picture clockwise, in degrees: `90`, `180`, or `270`.
+   * For a source that sends frames in the device's natural orientation while
+   * the device is turned. Every point is turned back, so events stay in the
+   * device's own orientation. A source whose frames turn with the device
+   * needs none.
+   * - `screen-height`/`screenHeight`: The screen's height in the units your device takes input in: points for
+   * the iOS Simulator, pixels for an Android device. Set with `screen-width`.
+   * Set alone, the width follows the stream's shape, and with neither, both
+   * are the stream's own size in pixels.
+   * - `screenshot-label`/`screenshotLabel`: The screenshot button's label.
+   * - `screen-width`/`screenWidth`: The screen's width in the units your device takes input in, as
+   * `screen-height` is. Set alone, the height follows the stream's shape.
+   * - `shape`: The screen's outline. Absent is a rectangle with rounded corners;
+   * `square` has square corners, as on a phone with a Home button or a
+   * television, and `circle` is round, as on a round watch, and takes
+   * touches inside the circle only.
+   * - `show-touches`/`showTouches`: Draws a ring under each finger on the screen, as the iOS Simulator's
+   * Show single touches does. Rings from `showTap()` and `showSwipe()` are
+   * drawn either way.
+   * - `volume-down-label`/`volumeDownLabel`: The Volume down button's label.
+   * - `volume-up-label`/`volumeUpLabel`: The Volume up button's label.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-device-button`: A hardware button was pressed, with how long it was held. Press it on the device in response.
+   * - `helix-device-key`: A key went down or came up while the screen had focus. Press or release it on the device in response.
+   * - `helix-device-screenshot`: A screenshot was asked for. Take one in response.
+   * - `helix-device-scroll`: A wheel or a trackpad scrolled over the screen. Scroll the device in response.
+   * - `helix-device-swipe`: One finger moved across the screen and lifted. Swipe the device in response.
+   * - `helix-device-tap`: One finger touched the screen and lifted near where it landed. Tap the device in response.
+   * - `helix-device-text`: Text was pasted into the screen. Type it on the device in response.
+   * - `helix-device-touch`: A finger landed, moved, lifted, or was taken away. Touch the device in response.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The element that draws the stream: a `<video>`, an `<img>`, or a `<canvas>`.
+   * - `back-icon`: Replaces the glyph inside the Back button.
+   * - `bezel`: A picture of the device drawn over the screen, such as a photograph of a phone with a clear screen. It takes no touches.
+   * - `controls`: Buttons of your own, such as Shake or Record, in the row after the hardware buttons and before the fullscreen button.
+   * - `empty`: Content shown over the screen while no element that draws the stream is inside and `loading` is not set, such as "No simulator is running" and a button to start one.
+   * - `footer`: Content below the device.
+   * - `fullscreen-icon`: Replaces the glyph inside the fullscreen button.
+   * - `header`: Content above the device, such as its name and state.
+   * - `home-icon`: Replaces the glyph inside the Home button.
+   * - `loading`: Content shown over the screen while `loading` is set, such as a spinner. `loading-label` by default, which screen readers hear either way.
+   * - `power-icon`: Replaces the glyph inside the Power button.
+   * - `recents-icon`: Replaces the glyph inside the Recent apps button.
+   * - `rotate-left-icon`: Replaces the glyph inside the Rotate left button.
+   * - `rotate-right-icon`: Replaces the glyph inside the Rotate right button.
+   * - `screenshot-icon`: Replaces the glyph inside the screenshot button.
+   * - `volume-down-icon`: Replaces the glyph inside the Volume down button.
+   * - `volume-up-icon`: Replaces the glyph inside the Volume up button.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `press(button: DeviceButton, duration = 0) => void`: Presses a hardware button, as its control does: sends
+   * `helix-device-button`. `duration` is how long it is held, in
+   * milliseconds.
+   * - `screenshot() => void`: Asks for a screenshot, as the screenshot button does: sends `helix-device-screenshot`.
+   * - `capture(type = 'image/png', quality?: number) => Promise<Blob>`: The picture on the screen now, as an image, at the stream's own size and
+   * turned by `rotation`. For a page with no sharper screenshot from its
+   * source.
+   *
+   * Fails where there is no stream, where it has not drawn a frame, and where
+   * the browser will not let a page read it, such as an image from another
+   * origin served without CORS.
+   * - `showTap(x: number, y: number) => void`: Draws a ring at a point on the screen for a moment, in the device's
+   * units, for a touch made elsewhere, such as by an agent. Drawn whether or
+   * not `show-touches` is set, and nothing is sent.
+   * - `showSwipe(fromX: number, fromY: number, toX: number, toY: number, duration = 300) => void`: Draws a ring that travels from one point to another over `duration`
+   * milliseconds, in the device's units, for a swipe made elsewhere, as
+   * `showTap()` does for a tap.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--device-screen-ratio`: The drawn screen's width divided by its height, turned by `rotation`, as a number. Written by the frame once the screen's size is known.
+   * - `--device-screen-rotation`: How far the picture is turned, as an angle. The frame writes it from `rotation`.
+   * - `--device-screen-touch-duration`: How long a swipe's ring takes to travel, as a time. Written on each ring from `showSwipe()`.
+   * - `--device-screen-touch-to-x`: Where a swipe's ring travels to, across the screen, as a percentage. Written on each ring from `showSwipe()`.
+   * - `--device-screen-touch-to-y`: Where a swipe's ring travels to, down the screen, as a percentage. Written on each ring from `showSwipe()`.
+   * - `--device-screen-touch-x`: Where a ring is, across the screen, as a percentage. Written on each ring.
+   * - `--device-screen-touch-y`: Where a ring is, down the screen, as a percentage. Written on each ring.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `back`: The Back button.
+   * - `back-button`: The Back button's inner button.
+   * - `back-live`: The Back button's live region, which speaks while the button is pending.
+   * - `back-spinner`: The ring the Back button turns while it is pending.
+   * - `back-text`: The box the Back button's icon sits in.
+   * - `bezel`: The body of the device around the screen.
+   * - `controls`: The row of buttons: the hardware buttons and any of yours in the `controls` slot.
+   * - `device`: The box the device is fitted into, which keeps its shape inside it.
+   * - `empty`: The box over the screen that holds the `empty` slot while no stream is inside and `loading` is not set. It stands beside the screen, so what you put in it takes presses and keys of its own, and a read-only screen does not hide it from screen readers.
+   * - `footer`: The strip below the device.
+   * - `fullscreen`: The button that makes the device fill the screen.
+   * - `fullscreen-button`: The fullscreen button's inner button.
+   * - `fullscreen-live`: The fullscreen button's live region, which speaks while the button is pending.
+   * - `fullscreen-spinner`: The ring the fullscreen button turns while it is pending.
+   * - `fullscreen-text`: The box the fullscreen button's icon sits in.
+   * - `header`: The strip above the device.
+   * - `home`: The Home button.
+   * - `home-button`: The Home button's inner button.
+   * - `home-live`: The Home button's live region, which speaks while the button is pending.
+   * - `home-spinner`: The ring the Home button turns while it is pending.
+   * - `home-text`: The box the Home button's icon sits in.
+   * - `keys-hint`: What a screen reader says about the keys when it reaches the screen, as its description. Read by screen readers only.
+   * - `live`: What screen readers hear while `loading` is set: `loading-label`. Read by screen readers only.
+   * - `loading`: The box over the screen that holds the `loading` slot while `loading` is set. Screen readers hear `live` in its place.
+   * - `picture`: The box the stream is drawn in, turned by `rotation`.
+   * - `power`: The Power button.
+   * - `power-button`: The Power button's inner button.
+   * - `power-live`: The Power button's live region, which speaks while the button is pending.
+   * - `power-spinner`: The ring the Power button turns while it is pending.
+   * - `power-text`: The box the Power button's icon sits in.
+   * - `recents`: The Recent apps button.
+   * - `recents-button`: The Recent apps button's inner button.
+   * - `recents-live`: The Recent apps button's live region, which speaks while the button is pending.
+   * - `recents-spinner`: The ring the Recent apps button turns while it is pending.
+   * - `recents-text`: The box the Recent apps button's icon sits in.
+   * - `region`: The box that holds the device, its buttons, the header, and the footer.
+   * - `rotate-left`: The Rotate left button.
+   * - `rotate-left-button`: The Rotate left button's inner button.
+   * - `rotate-left-live`: The Rotate left button's live region, which speaks while the button is pending.
+   * - `rotate-left-spinner`: The ring the Rotate left button turns while it is pending.
+   * - `rotate-left-text`: The box the Rotate left button's icon sits in.
+   * - `rotate-right`: The Rotate right button.
+   * - `rotate-right-button`: The Rotate right button's inner button.
+   * - `rotate-right-live`: The Rotate right button's live region, which speaks while the button is pending.
+   * - `rotate-right-spinner`: The ring the Rotate right button turns while it is pending.
+   * - `rotate-right-text`: The box the Rotate right button's icon sits in.
+   * - `screen`: The device's screen, which takes the touches and the keys.
+   * - `screenshot`: The button that asks for a screenshot.
+   * - `screenshot-button`: The screenshot button's inner button.
+   * - `screenshot-live`: The screenshot button's live region, which speaks while the button is pending.
+   * - `screenshot-spinner`: The ring the screenshot button turns while it is pending.
+   * - `screenshot-text`: The box the screenshot button's icon sits in.
+   * - `touch`: A ring where a touch is or was.
+   * - `touch-held`: A ring under a finger that is down, beside `touch`, with `show-touches`.
+   * - `volume-down`: The Volume down button.
+   * - `volume-down-button`: The Volume down button's inner button.
+   * - `volume-down-live`: The Volume down button's live region, which speaks while the button is pending.
+   * - `volume-down-spinner`: The ring the Volume down button turns while it is pending.
+   * - `volume-down-text`: The box the Volume down button's icon sits in.
+   * - `volume-up`: The Volume up button.
+   * - `volume-up-button`: The Volume up button's inner button.
+   * - `volume-up-live`: The Volume up button's live region, which speaks while the button is pending.
+   * - `volume-up-spinner`: The ring the Volume up button turns while it is pending.
+   * - `volume-up-text`: The box the Volume up button's icon sits in.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `empty`: No element that draws the stream is inside, which the frame knows once it runs in the browser.
+   * - `fullscreen`: The device fills the screen.
+   * - `loading`: `loading` is set.
+   * - `readonly`: `readonly` is set, and the screen sends nothing.
+   * - `sideways`: `rotation` turns the picture a quarter, so the drawn screen is the device's height wide.
+   * - `touching`: A finger is on the screen.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-headless-device-screen": Partial<
+    HelixHeadlessDeviceScreenProps &
+      HelixHeadlessDeviceScreenSolidJsProps &
+      BaseProps<HelixHeadlessDeviceScreen, "solid"> &
+      BaseEvents<HelixHeadlessDeviceScreen>
+  >;
+
   /**
    * Renders a native `<dialog>` opened with `showModal()`. The platform provides:
    *
@@ -106208,6 +107172,20 @@ export type CustomCssProperties = {
   "--data-table-template"?: (string) | undefined;
   /** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
   "--date-picker-column-count"?: (string) | undefined;
+  /** The drawn screen's width divided by its height, turned by `rotation`, as a number. Written by the frame once the screen's size is known. */
+  "--device-screen-ratio"?: (string) | undefined;
+  /** How far the picture is turned, as an angle. The frame writes it from `rotation`. */
+  "--device-screen-rotation"?: (string) | undefined;
+  /** How long a swipe's ring takes to travel, as a time. Written on each ring from `showSwipe()`. */
+  "--device-screen-touch-duration"?: (string) | undefined;
+  /** Where a swipe's ring travels to, across the screen, as a percentage. Written on each ring from `showSwipe()`. */
+  "--device-screen-touch-to-x"?: (string) | undefined;
+  /** Where a swipe's ring travels to, down the screen, as a percentage. Written on each ring from `showSwipe()`. */
+  "--device-screen-touch-to-y"?: (string) | undefined;
+  /** Where a ring is, across the screen, as a percentage. Written on each ring. */
+  "--device-screen-touch-x"?: (string) | undefined;
+  /** Where a ring is, down the screen, as a percentage. Written on each ring. */
+  "--device-screen-touch-y"?: (string) | undefined;
   /** How thick the ring is drawn, derived from `hole`. */
   "--donut-chart-stroke"?: (string) | undefined;
   /** How far a swipe, or a snap point, has moved the panel across, in pixels, toward the right. */