@fusion.dev/helix 0.211.0 → 0.212.0

package/types/jsx.d.ts

@@ -70,6 +70,15 @@ import type {
   HelixDatePicker,
   HelixDescriptionList,
   HelixDescriptionListItem,
+  HelixDeviceButtonEvent,
+  HelixDeviceKeyEvent,
+  HelixDeviceScreen,
+  HelixDeviceScreenshotEvent,
+  HelixDeviceScrollEvent,
+  HelixDeviceSwipeEvent,
+  HelixDeviceTapEvent,
+  HelixDeviceTextEvent,
+  HelixDeviceTouchEvent,
   HelixDialog,
   HelixDismissEvent,
   HelixDivider,
@@ -13995,6 +14004,386 @@ makes the list a named group. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixDeviceScreen` component event */
+export type HelixDeviceScreenElementEvent<E = Event> = TypedEvent<
+  HelixDeviceScreen,
+  E
+>;
+/** `helix-device-button` event type */
+export type HelixDeviceScreenHelixDeviceButtonElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceButtonEvent>;
+/** `helix-device-key` event type */
+export type HelixDeviceScreenHelixDeviceKeyElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceKeyEvent>;
+/** `helix-device-screenshot` event type */
+export type HelixDeviceScreenHelixDeviceScreenshotElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceScreenshotEvent>;
+/** `helix-device-scroll` event type */
+export type HelixDeviceScreenHelixDeviceScrollElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceScrollEvent>;
+/** `helix-device-swipe` event type */
+export type HelixDeviceScreenHelixDeviceSwipeElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceSwipeEvent>;
+/** `helix-device-tap` event type */
+export type HelixDeviceScreenHelixDeviceTapElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceTapEvent>;
+/** `helix-device-text` event type */
+export type HelixDeviceScreenHelixDeviceTextElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceTextEvent>;
+/** `helix-device-touch` event type */
+export type HelixDeviceScreenHelixDeviceTouchElementEvent =
+  HelixDeviceScreenElementEvent<HelixDeviceTouchEvent>;
+
+export type HelixDeviceScreenProps = {
+  /** How the device stands apart from the page. Absent draws its body around
+the screen; `plain` draws the screen alone, with its rounded corners. */
+  separation?: (HelixDeviceScreen["separation"]) | undefined;
+  /** The Back button's label. */
+  "back-label"?: (HelixDeviceScreen["backLabel"]) | undefined;
+  /** The Back button's label. */
+  backLabel?: (HelixDeviceScreen["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?: (HelixDeviceScreen["controls"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  "controls-label"?: (HelixDeviceScreen["controlsLabel"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  controlsLabel?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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?: (HelixDeviceScreen["controlsPlacement"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  "fallback-label"?: (HelixDeviceScreen["fallbackLabel"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  fallbackLabel?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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?: (HelixDeviceScreen["forwardShortcuts"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The Home button's label. */
+  "home-label"?: (HelixDeviceScreen["homeLabel"]) | undefined;
+  /** The Home button's label. */
+  homeLabel?: (HelixDeviceScreen["homeLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  "keys-hint-label"?: (HelixDeviceScreen["keysHintLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  keysHintLabel?: (HelixDeviceScreen["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?: (HelixDeviceScreen["label"]) | undefined;
+  /** Shows the `loading` slot over the screen, for a stream that is starting
+or has stopped. Screen readers hear `loading-label`. */
+  loading?: (HelixDeviceScreen["loading"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  "loading-label"?: (HelixDeviceScreen["loadingLabel"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  loadingLabel?: (HelixDeviceScreen["loadingLabel"]) | undefined;
+  /** The Power button's label. */
+  "power-label"?: (HelixDeviceScreen["powerLabel"]) | undefined;
+  /** The Power button's label. */
+  powerLabel?: (HelixDeviceScreen["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?: (HelixDeviceScreen["readonly"]) | undefined;
+  /** The Recent apps button's label. */
+  "recents-label"?: (HelixDeviceScreen["recentsLabel"]) | undefined;
+  /** The Recent apps button's label. */
+  recentsLabel?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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?: (HelixDeviceScreen["roleLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  "rotate-left-label"?: (HelixDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  rotateLeftLabel?: (HelixDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  "rotate-right-label"?: (HelixDeviceScreen["rotateRightLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  rotateRightLabel?: (HelixDeviceScreen["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?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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?: (HelixDeviceScreen["screenHeight"]) | undefined;
+  /** The screenshot button's label. */
+  "screenshot-label"?: (HelixDeviceScreen["screenshotLabel"]) | undefined;
+  /** The screenshot button's label. */
+  screenshotLabel?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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?: (HelixDeviceScreen["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?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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?: (HelixDeviceScreen["showTouches"]) | undefined;
+  /** The Volume down button's label. */
+  "volume-down-label"?: (HelixDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume down button's label. */
+  volumeDownLabel?: (HelixDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume up button's label. */
+  "volume-up-label"?: (HelixDeviceScreen["volumeUpLabel"]) | undefined;
+  /** The Volume up button's label. */
+  volumeUpLabel?: (HelixDeviceScreen["volumeUpLabel"]) | undefined;
+
+  /** A hardware button was pressed, with how long it was held. Press it on the device in response. */
+  "onhelix-device-button"?: ((
+    e: HelixDeviceScreenHelixDeviceButtonElementEvent,
+  ) => 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: HelixDeviceScreenHelixDeviceKeyElementEvent,
+  ) => void) | undefined;
+  /** A screenshot was asked for. Take one in response. */
+  "onhelix-device-screenshot"?: ((
+    e: HelixDeviceScreenHelixDeviceScreenshotElementEvent,
+  ) => void) | undefined;
+  /** A wheel or a trackpad scrolled over the screen. Scroll the device in response. */
+  "onhelix-device-scroll"?: ((
+    e: HelixDeviceScreenHelixDeviceScrollElementEvent,
+  ) => void) | undefined;
+  /** One finger moved across the screen and lifted. Swipe the device in response. */
+  "onhelix-device-swipe"?: ((
+    e: HelixDeviceScreenHelixDeviceSwipeElementEvent,
+  ) => void) | undefined;
+  /** One finger touched the screen and lifted near where it landed. Tap the device in response. */
+  "onhelix-device-tap"?: ((
+    e: HelixDeviceScreenHelixDeviceTapElementEvent,
+  ) => void) | undefined;
+  /** Text was pasted into the screen. Type it on the device in response. */
+  "onhelix-device-text"?: ((
+    e: HelixDeviceScreenHelixDeviceTextElementEvent,
+  ) => void) | undefined;
+  /** A finger landed, moved, lifted, or was taken away. Touch the device in response. */
+  "onhelix-device-touch"?: ((
+    e: HelixDeviceScreenHelixDeviceTouchElementEvent,
+  ) => void) | undefined;
+};
+
+export type HelixDeviceScreenSolidJsProps = {
+  /** How the device stands apart from the page. Absent draws its body around
+the screen; `plain` draws the screen alone, with its rounded corners. */
+  "prop:separation"?: (HelixDeviceScreen["separation"]) | undefined;
+  /** The Back button's label. */
+  "attr:back-label"?: (HelixDeviceScreen["backLabel"]) | undefined;
+  /** The Back button's label. */
+  "prop:backLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["controls"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  "attr:controls-label"?: (HelixDeviceScreen["controlsLabel"]) | undefined;
+  /** The name of the toolbar of hardware buttons, read by screen readers. */
+  "prop:controlsLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["controlsPlacement"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  "attr:fallback-label"?: (HelixDeviceScreen["fallbackLabel"]) | undefined;
+  /** The screen's name where `label` is empty and the host has no `aria-label`. */
+  "prop:fallbackLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["forwardShortcuts"]) | undefined;
+  /** The fullscreen button's label. */
+  "attr:fullscreen-label"?: (HelixDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  "prop:fullscreenLabel"?: (HelixDeviceScreen["fullscreenLabel"]) | undefined;
+  /** The Home button's label. */
+  "attr:home-label"?: (HelixDeviceScreen["homeLabel"]) | undefined;
+  /** The Home button's label. */
+  "prop:homeLabel"?: (HelixDeviceScreen["homeLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  "attr:keys-hint-label"?: (HelixDeviceScreen["keysHintLabel"]) | undefined;
+  /** What a screen reader says about the keys when it reaches the screen,
+after its name. */
+  "prop:keysHintLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["loading"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  "attr:loading-label"?: (HelixDeviceScreen["loadingLabel"]) | undefined;
+  /** What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot. */
+  "prop:loadingLabel"?: (HelixDeviceScreen["loadingLabel"]) | undefined;
+  /** The Power button's label. */
+  "attr:power-label"?: (HelixDeviceScreen["powerLabel"]) | undefined;
+  /** The Power button's label. */
+  "prop:powerLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["readonly"]) | undefined;
+  /** The Recent apps button's label. */
+  "attr:recents-label"?: (HelixDeviceScreen["recentsLabel"]) | undefined;
+  /** The Recent apps button's label. */
+  "prop:recentsLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["roleLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  "attr:rotate-left-label"?: (HelixDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate left button's label. */
+  "prop:rotateLeftLabel"?: (HelixDeviceScreen["rotateLeftLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  "attr:rotate-right-label"?: (HelixDeviceScreen["rotateRightLabel"]) | undefined;
+  /** The Rotate right button's label. */
+  "prop:rotateRightLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["screenHeight"]) | undefined;
+  /** The screenshot button's label. */
+  "attr:screenshot-label"?: (HelixDeviceScreen["screenshotLabel"]) | undefined;
+  /** The screenshot button's label. */
+  "prop:screenshotLabel"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["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"?: (HelixDeviceScreen["showTouches"]) | undefined;
+  /** The Volume down button's label. */
+  "attr:volume-down-label"?: (HelixDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume down button's label. */
+  "prop:volumeDownLabel"?: (HelixDeviceScreen["volumeDownLabel"]) | undefined;
+  /** The Volume up button's label. */
+  "attr:volume-up-label"?: (HelixDeviceScreen["volumeUpLabel"]) | undefined;
+  /** The Volume up button's label. */
+  "prop:volumeUpLabel"?: (HelixDeviceScreen["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: HelixDeviceScreenHelixDeviceButtonElementEvent,
+  ) => 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: HelixDeviceScreenHelixDeviceKeyElementEvent,
+  ) => void) | undefined;
+  /** A screenshot was asked for. Take one in response. */
+  "on:helix-device-screenshot"?: ((
+    e: HelixDeviceScreenHelixDeviceScreenshotElementEvent,
+  ) => void) | undefined;
+  /** A wheel or a trackpad scrolled over the screen. Scroll the device in response. */
+  "on:helix-device-scroll"?: ((
+    e: HelixDeviceScreenHelixDeviceScrollElementEvent,
+  ) => void) | undefined;
+  /** One finger moved across the screen and lifted. Swipe the device in response. */
+  "on:helix-device-swipe"?: ((
+    e: HelixDeviceScreenHelixDeviceSwipeElementEvent,
+  ) => void) | undefined;
+  /** One finger touched the screen and lifted near where it landed. Tap the device in response. */
+  "on:helix-device-tap"?: ((
+    e: HelixDeviceScreenHelixDeviceTapElementEvent,
+  ) => void) | undefined;
+  /** Text was pasted into the screen. Type it on the device in response. */
+  "on:helix-device-text"?: ((
+    e: HelixDeviceScreenHelixDeviceTextElementEvent,
+  ) => void) | undefined;
+  /** A finger landed, moved, lifted, or was taken away. Touch the device in response. */
+  "on:helix-device-touch"?: ((
+    e: HelixDeviceScreenHelixDeviceTouchElementEvent,
+  ) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 /** `HelixDialog` component event */
 export type HelixDialogElementEvent<E = Event> = TypedEvent<HelixDialog, E>;
 /** `toggle` event type */
@@ -54206,6 +54595,266 @@ export type CustomElements<F extends Framework = "other"> = {
     HelixDescriptionListProps & BaseProps<HelixDescriptionList, F> & BaseEvents<HelixDescriptionList>
   >;
 
+  /**
+   * The styled device: a dark body around a screen with rounded corners, fitted
+   * to the space it is given, with its hardware buttons raised in a row above
+   * it. Give it a height with `block-size` or `--device-screen-block-size`, such
+   * as `100%` to fill a pane, and the device keeps its shape inside it.
+   *
+   * The body is drawn in proportion to the screen, so it keeps its look at any
+   * size. `--device-screen-bezel` sets how thick it is at the sides and
+   * `--device-screen-bezel-block` at the top and bottom, each as a fraction of
+   * the screen's width: `0.25` at the top and bottom draws the forehead and chin
+   * of a phone with a Home button. `--device-screen-radius` sets the screen's
+   * corners the same way. Set `separation="plain"` to draw the screen alone.
+   *
+   * For a picture of a real device, put an image of it with a clear screen in
+   * the `bezel` slot, set `--device-screen-bezel-color` to `transparent`, and
+   * set the two bezel properties to the picture's own margins around its screen,
+   * each divided by the width of its screen.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `separation`: How the device stands apart from the page. Absent draws its body around
+   * the screen; `plain` draws the screen alone, with its rounded corners.
+   * - `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-bezel`: How thick the body is at the sides, as a fraction of the screen's width. `0.045` by default.
+   * - `--device-screen-bezel-block`: How thick the body is at the top and bottom, as a fraction of the screen's width. The same as `--device-screen-bezel` by default.
+   * - `--device-screen-bezel-color`: The color of the body around the screen.
+   * - `--device-screen-bezel-radius`: The body's corners, as a fraction of the screen's width. Round with the screen's corners by default.
+   * - `--device-screen-block-size`: The element's height, which holds the device, its buttons, the header, and the footer. `36rem` by default.
+   * - `--device-screen-radius`: The screen's corners, as a fraction of the screen's width. `0.13` by default, which is near a recent iPhone's.
+   * - `--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-device-screen": Partial<
+    HelixDeviceScreenProps & BaseProps<HelixDeviceScreen, F> & BaseEvents<HelixDeviceScreen>
+  >;
+
   /**
    * The panel uses `surface-overlay` with a shadow, because it sits over the
    * page. The scrim is drawn on `::backdrop`, the platform's element for it,
@@ -86856,6 +87505,269 @@ export type CustomElementsSolidJs = {
       BaseEvents<HelixDescriptionList>
   >;
 
+  /**
+   * The styled device: a dark body around a screen with rounded corners, fitted
+   * to the space it is given, with its hardware buttons raised in a row above
+   * it. Give it a height with `block-size` or `--device-screen-block-size`, such
+   * as `100%` to fill a pane, and the device keeps its shape inside it.
+   *
+   * The body is drawn in proportion to the screen, so it keeps its look at any
+   * size. `--device-screen-bezel` sets how thick it is at the sides and
+   * `--device-screen-bezel-block` at the top and bottom, each as a fraction of
+   * the screen's width: `0.25` at the top and bottom draws the forehead and chin
+   * of a phone with a Home button. `--device-screen-radius` sets the screen's
+   * corners the same way. Set `separation="plain"` to draw the screen alone.
+   *
+   * For a picture of a real device, put an image of it with a clear screen in
+   * the `bezel` slot, set `--device-screen-bezel-color` to `transparent`, and
+   * set the two bezel properties to the picture's own margins around its screen,
+   * each divided by the width of its screen.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `separation`: How the device stands apart from the page. Absent draws its body around
+   * the screen; `plain` draws the screen alone, with its rounded corners.
+   * - `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-bezel`: How thick the body is at the sides, as a fraction of the screen's width. `0.045` by default.
+   * - `--device-screen-bezel-block`: How thick the body is at the top and bottom, as a fraction of the screen's width. The same as `--device-screen-bezel` by default.
+   * - `--device-screen-bezel-color`: The color of the body around the screen.
+   * - `--device-screen-bezel-radius`: The body's corners, as a fraction of the screen's width. Round with the screen's corners by default.
+   * - `--device-screen-block-size`: The element's height, which holds the device, its buttons, the header, and the footer. `36rem` by default.
+   * - `--device-screen-radius`: The screen's corners, as a fraction of the screen's width. `0.13` by default, which is near a recent iPhone's.
+   * - `--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-device-screen": Partial<
+    HelixDeviceScreenProps &
+      HelixDeviceScreenSolidJsProps &
+      BaseProps<HelixDeviceScreen, "solid"> &
+      BaseEvents<HelixDeviceScreen>
+  >;
+
   /**
    * The panel uses `surface-overlay` with a shadow, because it sits over the
    * page. The scrim is drawn on `::backdrop`, the platform's element for it,
@@ -111900,6 +112812,32 @@ export type CustomCssProperties = {
   "--description-list-gap"?: (string) | undefined;
   /** The width of the column of labels, with `direction="row"`. Defaults to the width of the longest label; set a length such as `10rem` to line up several lists. */
   "--description-list-label-width"?: (string) | undefined;
+  /** How thick the body is at the sides, as a fraction of the screen's width. `0.045` by default. */
+  "--device-screen-bezel"?: (string) | undefined;
+  /** How thick the body is at the top and bottom, as a fraction of the screen's width. The same as `--device-screen-bezel` by default. */
+  "--device-screen-bezel-block"?: (string) | undefined;
+  /** The color of the body around the screen. */
+  "--device-screen-bezel-color"?: (string) | undefined;
+  /** The body's corners, as a fraction of the screen's width. Round with the screen's corners by default. */
+  "--device-screen-bezel-radius"?: (string) | undefined;
+  /** The element's height, which holds the device, its buttons, the header, and the footer. `36rem` by default. */
+  "--device-screen-block-size"?: (string) | undefined;
+  /** The screen's corners, as a fraction of the screen's width. `0.13` by default, which is near a recent iPhone's. */
+  "--device-screen-radius"?: (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;
   /** The panel's fill. Follows `--helix-color-surface-overlay`. */
   "--dialog-background-color"?: (string) | undefined;
   /** Color of the panel's edge. */