@fusion.dev/helix 0.211.1 → 0.212.1

package/dist/device-screen/index.d.ts

@@ -0,0 +1 @@
+export { HelixDeviceScreen } from './root/device-screen-root.js';

package/dist/device-screen/index.js

@@ -0,0 +1 @@
+export { HelixDeviceScreen } from './root/device-screen-root.js';

package/dist/device-screen/root/device-screen-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/device-screen/root/device-screen-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {block-size: var(--device-screen-block-size, 36rem);display: block}[part="region"] {block-size: 100%;box-sizing: border-box;display: grid;grid-template-areas: "header" "controls" "device" "footer";grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;position: relative}:host([controls-placement="bottom"]) [part="region"] {grid-template-areas: "header" "device" "controls" "footer";grid-template-rows: auto minmax(0, 1fr) auto auto}[part="header"] {grid-area: header}[part="footer"] {grid-area: footer}[part="device"] {align-items: center;contain-intrinsic-inline-size: calc(var(--device-screen-block-size, 36rem) * var(--device-screen-ratio, 0.4615));container-type: size;display: flex;gap: var(--helix-space-xs);grid-area: device;justify-content: center;min-block-size: 0}[part="bezel"] {--_ratio: var(--device-screen-ratio, 0.4615);--_side: var(--device-screen-bezel, 0.045);--_end: var(--device-screen-bezel-block, var(--_side));--_radius: var(--device-screen-radius, 0.13);--_inline: var(--_side);--_block: var(--_end);--_scale: 1;--_across: calc(1 + 2 * var(--_inline) * var(--_scale));--_down: calc(1 / var(--_ratio) + 2 * var(--_block) * var(--_scale));--_screen: min((100cqi - var(--_beside, 0px)) / var(--_across), 100cqb / var(--_down));--_unit: calc(var(--_screen) * var(--_scale));background-color: var(--device-screen-bezel-color, color-mix(in oklab, var(--helix-color-surface-media) 86%, var(--helix-color-foreground-media)));block-size: calc(var(--_screen) * var(--_down));border-radius: calc(var(--_unit) * var(--device-screen-bezel-radius, calc(var(--_radius) + var(--_side))));box-shadow: var(--helix-shadow-md);box-sizing: border-box;inline-size: calc(var(--_screen) * var(--_across));outline: var(--helix-border-thin) solid color-mix(in oklab, var(--helix-color-surface-media) 72%, var(--helix-color-foreground-media));outline-offset: calc(var(--helix-border-thin) * -1);padding: calc(var(--_unit) * var(--_block)) calc(var(--_unit) * var(--_inline));position: relative}:host(:state(sideways)) [part="bezel"] {--_inline: var(--_end);--_block: var(--_side);--_scale: calc(1 / var(--_ratio))}[part="device"]:has(> [part="controls"]) {gap: 0}[part="device"]:has(> [part="controls"]) > [part="bezel"] {--_beside: calc(var(--helix-size-control) + var(--helix-space-lg) * 2)}:host([shape="square"]) [part="bezel"] {--_radius: 0}:host([separation="plain"]) [part="bezel"] {--_end: 0;--_side: 0;background-color: transparent;box-shadow: none;outline: none}[part="screen"] {background-color: var(--helix-color-surface-media);block-size: 100%;border-radius: calc(var(--_unit) * var(--_radius));container-type: size;inline-size: 100%;overflow: hidden;position: relative;user-select: none}:host([shape="circle"]) [part="bezel"], :host([shape="circle"]) [part="screen"] {border-radius: var(--helix-radii-full)}[part="screen"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="picture"] {inset: 0;position: absolute;rotate: var(--device-screen-rotation, 0deg)}:host(:state(sideways)) [part="picture"] {block-size: 100cqi;inline-size: 100cqb;inset: 50% auto auto 50%;translate: -50% -50%}[part="picture"] ::slotted(*) {block-size: 100%;display: block;inline-size: 100%;object-fit: fill;pointer-events: none}::slotted([slot="bezel"]) {block-size: 100%;inline-size: 100%;inset: 0;pointer-events: none;position: absolute}[part~="touch"] {aspect-ratio: 1;background-color: color-mix(in oklab, var(--helix-color-foreground-media) 30%, transparent);border: var(--helix-border-thick) solid color-mix(in oklab, var(--helix-color-foreground-media) 85%, transparent);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin) color-mix(in oklab, var(--helix-color-surface-media) 40%, transparent);box-sizing: border-box;inline-size: 11cqmin;top: var(--device-screen-touch-y);left: var(--device-screen-touch-x);pointer-events: none;position: absolute;translate: -50% -50%}[part~="touch"]:not([part~="touch-held"]) {animation: device-screen-travel var(--device-screen-touch-duration, 0s) var(--helix-easing-standard) forwards, device-screen-fade calc(var(--helix-duration-slow) * 2) var(--helix-easing-standard) var(--device-screen-touch-duration, 0s) forwards}@keyframes device-screen-travel {from {top: var(--device-screen-touch-y);left: var(--device-screen-touch-x)}to {top: var(--device-screen-touch-to-y, var(--device-screen-touch-y));left: var(--device-screen-touch-to-x, var(--device-screen-touch-x))}}@keyframes device-screen-fade {0% {opacity: 0.4;scale: 0.6}15%, 55% {opacity: 1;scale: 1}100% {opacity: 0;scale: 1.3}}@media (prefers-reduced-motion: reduce) {[part~="touch"]:not([part~="touch-held"]) {animation: none;top: var(--device-screen-touch-to-y, var(--device-screen-touch-y));left: var(--device-screen-touch-to-x, var(--device-screen-touch-x))}}[part="loading"] {align-items: center;color: var(--helix-color-foreground-media);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset: 0;justify-items: center;padding: var(--helix-space-md);pointer-events: none;position: absolute;text-align: center}:host(:state(loading)) [part="loading"] {background-color: color-mix(in oklab, var(--helix-color-surface-media) 72%, transparent)}[part="controls"] {align-items: center;display: flex;flex: none;flex-wrap: wrap;gap: var(--helix-space-2xs);grid-area: controls;justify-content: center;padding: var(--helix-space-xs)}:host([controls-placement="end"]) [part="controls"], :host([controls-placement="start"]) [part="controls"] {flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;max-block-size: 100%;overflow-y: auto;padding: var(--helix-space-xl) var(--helix-space-lg);scrollbar-width: none}[part="controls"] > *, [part="controls"] ::slotted(*) {flex: none}[part="empty"] {align-items: center;border-radius: calc(var(--_unit) * var(--_radius));color: var(--helix-color-foreground-media);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inset: calc(var(--_unit) * var(--_block)) calc(var(--_unit) * var(--_inline));justify-items: center;overflow: hidden;padding: var(--helix-space-md);position: absolute;text-align: center}:host([shape="circle"]) [part="empty"] {border-radius: var(--helix-radii-full)}:host(:state(fullscreen)) [part="region"] {background-color: var(--helix-color-surface);padding: var(--helix-space-md)}@media print {[part="controls"] {display: none}[part="bezel"], [part="screen"] {print-color-adjust: exact}}`);

package/dist/device-screen/root/device-screen-root.d.ts

@@ -0,0 +1,53 @@
+import { HelixHeadlessDeviceScreen } from '@fusion.dev/helix-headless/device-screen';
+import type { CSSResultGroup } from 'lit';
+import '../../icon-button/index.js';
+/**
+ * @summary A device's screen, drawn from a stream you supply, that sends taps, swipes, keys, and button presses back to the device.
+ *
+ * @description
+ * 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.
+ *
+ * @since 0.211.0
+ * @status experimental
+ * @category media
+ * @aliases Simulator, Emulator, Device mirror, Remote screen
+ * @documentation https://fusion.dev/helix/components/device-screen
+ *
+ * @cssproperty --device-screen-bezel - How thick the body is at the sides, as a fraction of the screen's width. `0.045` by default.
+ * @cssproperty --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.
+ * @cssproperty --device-screen-bezel-color - The color of the body around the screen.
+ * @cssproperty --device-screen-bezel-radius - The body's corners, as a fraction of the screen's width. Round with the screen's corners by default.
+ * @cssproperty --device-screen-block-size - The element's height, which holds the device, its buttons, the header, and the footer. `36rem` by default.
+ * @cssproperty --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.
+ */
+export declare class HelixDeviceScreen extends HelixHeadlessDeviceScreen {
+    /**
+     * 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?: 'plain';
+    static tier: string;
+    /** The buttons stand apart from the page as the device does, so they are raised. */
+    protected get controlsRaised(): boolean;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-device-screen': HelixDeviceScreen;
+    }
+}

package/dist/device-screen/root/device-screen-root.js

@@ -0,0 +1,21 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessDeviceScreen } from '@fusion.dev/helix-headless/device-screen';
+import { property } from 'lit/decorators.js';
+import '../../icon-button/index.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles } from './device-screen-root.css.js';
+let HelixDeviceScreen = class HelixDeviceScreen extends HelixHeadlessDeviceScreen {
+    static { this.tier = 'helix-'; }
+    get controlsRaised() {
+        return true;
+    }
+    static { this.styles = [glyphStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixDeviceScreen.prototype, "separation", void 0);
+HelixDeviceScreen = __decorate([
+    customElement('helix-device-screen')
+], HelixDeviceScreen);
+export { HelixDeviceScreen };

package/dist/element-events.generated.js

@@ -103,6 +103,16 @@ registerElementEvents({
         'toggle',
     ],
     'helix-date-picker': ['change', 'helix-before-change', 'helix-navigate', 'input'],
+    'helix-device-screen': [
+        'helix-device-button',
+        'helix-device-key',
+        'helix-device-screenshot',
+        'helix-device-scroll',
+        'helix-device-swipe',
+        'helix-device-tap',
+        'helix-device-text',
+        'helix-device-touch',
+    ],
     'helix-dialog': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-donut-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export * from './data-table/index.js';
 export * from './date-input/index.js';
 export * from './date-picker/index.js';
 export * from './description-list/index.js';
+export * from './device-screen/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './donut-chart/index.js';

package/dist/index.js

@@ -30,6 +30,7 @@ export * from './data-table/index.js';
 export * from './date-input/index.js';
 export * from './date-picker/index.js';
 export * from './description-list/index.js';
+export * from './device-screen/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './donut-chart/index.js';