@fusion.dev/helix 0.211.1 → 0.212.0

package/types/svelte.d.ts

@@ -67,6 +67,7 @@ declare module 'svelte/elements' {
     'helix-date-picker': Helix<'helix-date-picker'>
     'helix-description-list-item': Helix<'helix-description-list-item'>
     'helix-description-list': Helix<'helix-description-list'>
+    'helix-device-screen': Helix<'helix-device-screen'>
     'helix-dialog': Helix<'helix-dialog'>
     'helix-divider': Helix<'helix-divider'>
     'helix-donut-chart': Helix<'helix-donut-chart'>

package/types/vue.d.ts

@@ -70,6 +70,15 @@ import type {
   HelixDatePicker,
   HelixDescriptionList,
   HelixDescriptionListItem,
+  HelixDeviceButtonEvent,
+  HelixDeviceKeyEvent,
+  HelixDeviceScreen,
+  HelixDeviceScreenshotEvent,
+  HelixDeviceScrollEvent,
+  HelixDeviceSwipeEvent,
+  HelixDeviceTapEvent,
+  HelixDeviceTextEvent,
+  HelixDeviceTouchEvent,
   HelixDialog,
   HelixDismissEvent,
   HelixDivider,
@@ -7155,6 +7164,195 @@ makes the list a named group. */
 
 export type HelixDescriptionListVueEvents = {};
 
+/** `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 HelixDeviceScreenVueProps = {
+  /** 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;
+};
+
+export type HelixDeviceScreenVueEvents = {
+  /** A hardware button was pressed, with how long it was held. Press it on the device in response. */
+  "helix-device-button": HelixDeviceScreenHelixDeviceButtonElementEvent;
+  /** A key went down or came up while the screen had focus. Press or release it on the device in response. */
+  "helix-device-key": HelixDeviceScreenHelixDeviceKeyElementEvent;
+  /** A screenshot was asked for. Take one in response. */
+  "helix-device-screenshot": HelixDeviceScreenHelixDeviceScreenshotElementEvent;
+  /** A wheel or a trackpad scrolled over the screen. Scroll the device in response. */
+  "helix-device-scroll": HelixDeviceScreenHelixDeviceScrollElementEvent;
+  /** One finger moved across the screen and lifted. Swipe the device in response. */
+  "helix-device-swipe": HelixDeviceScreenHelixDeviceSwipeElementEvent;
+  /** One finger touched the screen and lifted near where it landed. Tap the device in response. */
+  "helix-device-tap": HelixDeviceScreenHelixDeviceTapElementEvent;
+  /** Text was pasted into the screen. Type it on the device in response. */
+  "helix-device-text": HelixDeviceScreenHelixDeviceTextElementEvent;
+  /** A finger landed, moved, lifted, or was taken away. Touch the device in response. */
+  "helix-device-touch": HelixDeviceScreenHelixDeviceTouchElementEvent;
+};
+
 /** `HelixDialog` component event */
 export type HelixDialogElementEvent<E = Event> = TypedEvent<HelixDialog, E>;
 /** `toggle` event type */
@@ -24045,6 +24243,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. */
@@ -26281,6 +26505,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixDescriptionListVueProps,
     HelixDescriptionListVueEvents
   >;
+  /** 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. */
+  "helix-device-screen": DefineCustomElement<
+    HelixDeviceScreen,
+    HelixDeviceScreenVueProps,
+    HelixDeviceScreenVueEvents
+  >;
   /** 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, which sits in the top layer with the dialog. */
   "helix-dialog": DefineCustomElement<
     HelixDialog,

package/types/words.d.ts

@@ -1469,6 +1469,100 @@ declare module '@fusion.dev/helix-core' {
        */
       yearViewLabel: Message
     }
+    'helix-device-screen': {
+      /**
+       * The Back button's label.
+       *
+       * English: `Back`
+       */
+      backLabel: Message
+      /**
+       * The name of the toolbar of hardware buttons, read by screen readers.
+       *
+       * English: `Device controls`
+       */
+      controlsLabel: Message
+      /**
+       * The screen's name where `label` is empty and the host has no `aria-label`.
+       *
+       * English: `Device`
+       */
+      fallbackLabel: Message
+      /**
+       * The fullscreen button's label.
+       *
+       * English: `Fill the screen`
+       */
+      fullscreenLabel: Message
+      /**
+       * The Home button's label.
+       *
+       * English: `Home`
+       */
+      homeLabel: Message
+      /**
+       * What a screen reader says about the keys when it reaches the screen,
+       * after its name.
+       *
+       * English: `Keys you press go to the device. Press Tab to leave the screen.`
+       */
+      keysHintLabel: Message
+      /**
+       * What the screen shows and screen readers hear while `loading` is set and nothing is in the `loading` slot.
+       *
+       * English: `Connecting to the device`
+       */
+      loadingLabel: Message
+      /**
+       * The Power button's label.
+       *
+       * English: `Power`
+       */
+      powerLabel: Message
+      /**
+       * The Recent apps button's label.
+       *
+       * English: `Recent apps`
+       */
+      recentsLabel: Message
+      /**
+       * What a screen reader calls the screen in place of its role, after its
+       * name: "iPhone 17 Pro, screen". Empty leaves the role.
+       *
+       * English: `screen`
+       */
+      roleLabel: Message
+      /**
+       * The Rotate left button's label.
+       *
+       * English: `Rotate left`
+       */
+      rotateLeftLabel: Message
+      /**
+       * The Rotate right button's label.
+       *
+       * English: `Rotate right`
+       */
+      rotateRightLabel: Message
+      /**
+       * The screenshot button's label.
+       *
+       * English: `Take a screenshot`
+       */
+      screenshotLabel: Message
+      /**
+       * The Volume down button's label.
+       *
+       * English: `Volume down`
+       */
+      volumeDownLabel: Message
+      /**
+       * The Volume up button's label.
+       *
+       * English: `Volume up`
+       */
+      volumeUpLabel: Message
+    }
     'helix-dialog': {
       /**
        * The close control's accessible name. Translate it with the rest of your