@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/tree/item/tree-item.js

@@ -4,22 +4,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
-import { caretDown } from '@fusion.dev/helix-icons';
+import { customElement, HelixElement, HelixLoadEvent, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { caretDown, check, minus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
+        this.checkable = false;
+        this.checked = false;
+        this.disabled = false;
         this.heads = false;
         this.href = '';
+        this.lazy = false;
         this.rel = '';
         this.selected = false;
         this.target = '';
         this.focusable = false;
         this.value = '';
         this.branch = false;
+        this.handleCheckClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.select();
+        };
         this.handleToggleClick = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -27,7 +36,11 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         };
         this.handleRowClick = (event) => {
             const onLink = event.composedPath().some((node) => node instanceof HTMLAnchorElement);
-            if (this.branch && this.href === '') {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.isBranch && this.href === '') {
                 if (!onLink) {
                     if (this.choosable) {
                         this.select();
@@ -51,10 +64,10 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         });
     }
     get choosable() {
-        return this.value !== '' && !this.heads;
+        return this.value !== '' && !this.heads && !this.checkable && !this.disabled;
     }
     get isBranch() {
-        return this.branch;
+        return this.branch || this.lazy;
     }
     focusItem() {
         this.renderRoot
@@ -62,12 +75,21 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             ?.focus({ preventScroll: true });
     }
     select() {
+        if (this.disabled) {
+            return;
+        }
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     activate() {
+        if (this.disabled) {
+            return;
+        }
         this.select();
         this.follow();
     }
+    toggleOpen() {
+        return this.disabled ? false : super.toggleOpen();
+    }
     follow() {
         const own = this.renderRoot?.querySelector('a[part="row"]');
         if (own) {
@@ -85,18 +107,32 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             }
         }
     }
+    renderToggle() {
+        return html `<slot
+      name="chevron"
+      @click=${this.href === '' ? nothing : this.handleToggleClick}
+      ><svg part="toggle" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
+        ${unsafeSVG(caretDown.content)}
+      </svg></slot
+    >`;
+    }
+    renderCheckbox() {
+        if (!this.checkable) {
+            return nothing;
+        }
+        const mixed = this.checked === 'mixed';
+        const glyph = mixed ? minus : this.checked ? check : undefined;
+        return html `<span
+      part="checkbox${mixed ? ' checkbox-mixed' : this.checked ? ' checkbox-checked' : ''}"
+      aria-hidden="true"
+      @click=${this.handleCheckClick}
+      >${glyph
+            ? html `<svg fill="currentColor" viewBox=${glyph.viewBox}>${unsafeSVG(glyph.content)}</svg>`
+            : nothing}</span
+    >`;
+    }
     renderRow() {
-        return html `${this.branch
-            ? html `<svg
-            part="toggle"
-            fill="currentColor"
-            viewBox=${caretDown.viewBox}
-            aria-hidden="true"
-            @click=${this.href === '' ? nothing : this.handleToggleClick}
-          >
-          ${unsafeSVG(caretDown.content)}
-        </svg>`
-            : nothing}
+        return html `${this.isBranch ? this.renderToggle() : nothing}${this.renderCheckbox()}
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>`;
@@ -104,21 +140,39 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        this.toggleState('loading', this.open && this.lazy);
         if (this.childrenKnown) {
             this.branch = this.knownChildren.some((child) => child.slot === 'children');
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open') && this.open && this.lazy) {
+            this.dispatchEvent(new HelixLoadEvent());
+        }
+    }
     render() {
         const linked = this.href !== '';
         const level = this.level ?? 1;
         const depth = this.level ?? nothing;
-        const expanded = this.branch ? (this.open ? 'true' : 'false') : nothing;
+        const expanded = this.isBranch ? (this.open ? 'true' : 'false') : nothing;
+        const chosen = this.checkable ? undefined : this.selected ? 'true' : 'false';
+        const checked = this.checkable
+            ? this.checked === 'mixed'
+                ? 'mixed'
+                : String(this.checked)
+            : undefined;
+        const busy = this.open && this.lazy ? 'true' : nothing;
+        const off = this.disabled ? 'true' : nothing;
         const tabIndex = this.focusable || !this.childrenKnown ? '0' : '-1';
         return html `<div
         part="item"
         role=${linked ? 'none' : 'treeitem'}
         aria-expanded=${linked ? nothing : expanded}
-        aria-selected=${linked ? nothing : this.selected ? 'true' : 'false'}
+        aria-selected=${linked ? nothing : (chosen ?? nothing)}
+        aria-checked=${linked ? nothing : (checked ?? nothing)}
+        aria-disabled=${linked ? nothing : off}
+        aria-busy=${linked ? nothing : busy}
         aria-level=${linked ? nothing : depth}
         tabindex=${linked ? nothing : tabIndex}
       >
@@ -126,11 +180,14 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             ? html `<a
                 part="row"
                 role="treeitem"
-                href=${this.href}
+                href=${this.disabled ? nothing : this.href}
                 target=${this.target || nothing}
                 rel=${this.rel || nothing}
                 aria-expanded=${expanded}
-                aria-selected=${this.selected ? 'true' : 'false'}
+                aria-selected=${chosen ?? nothing}
+                aria-checked=${checked ?? nothing}
+                aria-disabled=${off}
+                aria-busy=${busy}
                 aria-level=${depth}
                 tabindex=${tabIndex}
                 style="--tree-level: ${level}"
@@ -152,12 +209,24 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "checkable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTreeItem.prototype, "disabled", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTreeItem.prototype, "heads", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "href", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTreeItem.prototype, "lazy", void 0);
 __decorate([
     property({ attribute: false, type: Number })
 ], HelixHeadlessTreeItem.prototype, "level", void 0);

package/dist/tree/root/tree-root.d.ts

@@ -16,6 +16,14 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * Typing a letter moves to the next visible item whose name starts with it,
  * and `*` opens every branch beside the focused item.
  *
+ * `selection-mode="multiple"` draws a check mark on every row and lets a
+ * reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking
+ * a branch checks every item under it, and a branch some of whose items are
+ * checked is partly checked. Space or a press on the mark checks the focused
+ * row, and Enter or a press on a branch's row opens it. `active` then holds the
+ * checked values, comma separated, which `values` also gives as a list, and
+ * the tree says `aria-multiselectable`.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -82,6 +90,21 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * The resting state is the absence of the attribute, which is `peer`.
      */
     nesting?: 'heading' | 'peer' | 'subordinate';
+    /**
+     * Whether a reader can check many items. Unset, one item is chosen at a
+     * time.
+     *
+     * Optional, so a tree of one choice writes no attribute onto the host.
+     */
+    selectionMode?: 'multiple';
+    /**
+     * The checked values, as a list, under `selection-mode="multiple"`, and the
+     * chosen value alone otherwise. Writing it sets `active`.
+     */
+    get values(): string[];
+    set values(next: string[]);
+    /** Whether many items can be checked. */
+    private get multiple();
     private watcher;
     /**
      * Every item, in the order a reader moving down would meet them.
@@ -100,6 +123,20 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /** Items a reader can actually reach: not inside a collapsed branch. */
     private get visibleItems();
     private readonly handleSelection;
+    /** Every value in the tree, in the order a reader meets the items. */
+    private get order();
+    /**
+     * Whether an item holds others, read from the tree as well as from the item.
+     *
+     * **An item hydrating what a server sent has not said it is a branch yet**:
+     * it learns that from its children on the render after, and nothing then
+     * asks the tree again. Read from its own render alone, a folder served with
+     * one of its files checked was counted a leaf and drawn unchecked rather
+     * than partly checked, once hydrated.
+     */
+    private holds;
+    /** What the multiple selection reads of an item. */
+    private rowOf;
     /**
      * Pushes tree-owned state down: which item is selected, which holds the tab
      * stop, and how deep each one sits.

package/dist/tree/root/tree-root.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
+import { checkedState, pressRow } from '../selection.js';
 const KEYS = new Set([
     'ArrowDown',
     'ArrowUp',
@@ -33,7 +34,9 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 return;
             }
             if (!event.defaultPrevented) {
-                this.requestActive(event.detail.value);
+                this.requestActive(this.multiple
+                    ? pressRow(this.rowOf(origin), this.values, this.order).join(',')
+                    : event.detail.value);
             }
             this.syncItems();
         };
@@ -51,6 +54,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             this.typeahead.reset();
             const along = inlineStep(this, event.key);
+            if (this.multiple && event.key === ' ') {
+                current.select();
+                event.preventDefault();
+                return;
+            }
             if (event.key === 'ArrowDown') {
                 this.move(current, 1);
             }
@@ -64,7 +72,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 this.focusOn(this.visibleItems.at(-1));
             }
             else if (along === 1) {
-                if (current.isBranch && !current.open) {
+                if (current.isBranch && !current.open && !current.disabled) {
                     current.requestOpen(true);
                     this.syncItems();
                 }
@@ -73,7 +81,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 }
             }
             else if (along === -1) {
-                if (current.isBranch && current.open) {
+                if (current.isBranch && current.open && !current.disabled) {
                     current.requestOpen(false);
                     this.syncItems();
                 }
@@ -100,6 +108,15 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             this.syncItems();
         };
     }
+    get values() {
+        return this.multiple ? commaList(this.active) : this.active === '' ? [] : [this.active];
+    }
+    set values(next) {
+        this.active = next.join(',');
+    }
+    get multiple() {
+        return this.selectionMode === 'multiple';
+    }
     get items() {
         return [...this.querySelectorAll('*')].filter((node) => node instanceof HelixHeadlessTreeItem);
     }
@@ -115,6 +132,25 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             return true;
         });
     }
+    get order() {
+        return this.items.map((item) => item.value).filter((value) => value !== '');
+    }
+    holds(item) {
+        return item.isBranch || this.items.some((other) => other !== item && item.contains(other));
+    }
+    rowOf(item) {
+        const branch = this.holds(item);
+        const leaves = branch
+            ? this.items
+                .filter((other) => other !== item &&
+                item.contains(other) &&
+                !this.holds(other) &&
+                !other.disabled &&
+                other.value !== '')
+                .map((other) => other.value)
+            : [];
+        return { branch, disabled: item.disabled, leaves, value: item.value };
+    }
     syncItems() {
         const visible = this.visibleItems;
         const chosen = this.resolveActive(visible);
@@ -122,8 +158,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             this.visibleAncestor(this.items.find((item) => item.focusable));
         const stop = held ?? chosen;
         const heads = this.nesting === 'heading';
+        const multiple = this.multiple;
+        const checked = new Set(this.values);
         for (const item of this.items) {
-            const selected = item.value !== '' && item.value === this.active;
+            const selected = !multiple && item.value !== '' && item.value === this.active;
+            const state = multiple ? checkedState(this.rowOf(item), checked) : false;
             const focusable = item === stop;
             let level = 1;
             let parent = item.parentElement;
@@ -135,6 +174,8 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             whenHydrated(item, () => {
                 item.selected = selected;
+                item.checkable = multiple;
+                item.checked = state;
                 item.focusable = focusable;
                 item.level = level;
                 item.heads = heads;
@@ -214,7 +255,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('active') || changed.has('nesting')) {
+        if (changed.has('active') || changed.has('nesting') || changed.has('selectionMode')) {
             this.syncItems();
         }
     }
@@ -223,6 +264,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
       part="tree"
       role="tree"
       aria-busy=${this.loading ? 'true' : nothing}
+      aria-multiselectable=${this.multiple ? 'true' : nothing}
       aria-label=${this.label}
     >
       <slot
@@ -241,6 +283,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTree.prototype, "nesting", void 0);
+__decorate([
+    property({ attribute: 'selection-mode', reflect: true })
+], HelixHeadlessTree.prototype, "selectionMode", void 0);
 HelixHeadlessTree = __decorate([
     customElement('helix-headless-tree')
 ], HelixHeadlessTree);

package/dist/tree/selection.d.ts

@@ -0,0 +1,24 @@
+/** What the multiple selection reads of a row. */
+export interface CheckableRow {
+    /** Whether the row is a branch, holding rows of its own. */
+    branch: boolean;
+    /** Whether the row is out of play. Its value is never added or taken away. */
+    disabled: boolean;
+    /** The values of the leaves under a branch, in order. Empty for a leaf. */
+    leaves: readonly string[];
+    /** The row's own value. */
+    value: string;
+}
+/**
+ * Whether a row is checked in a tree of check marks: a leaf by its value, and
+ * a branch by its leaves, `mixed` where some of them are.
+ */
+export declare const checkedState: (row: CheckableRow, chosen: ReadonlySet<string>) => boolean | 'mixed';
+/**
+ * The checked values after a press on `row`, in `order`.
+ *
+ * A leaf comes in or out. A branch checks every leaf under it, or clears them
+ * all where every one is already checked, as Ark UI's and Web Awesome's
+ * checkbox trees do. A disabled row changes nothing.
+ */
+export declare const pressRow: (row: CheckableRow, chosen: readonly string[], order: readonly string[]) => string[];

package/dist/tree/selection.js

@@ -0,0 +1,26 @@
+const valuesOf = (row) => row.branch && row.leaves.length > 0 ? [...row.leaves] : row.value === '' ? [] : [row.value];
+export const checkedState = (row, chosen) => {
+    const values = valuesOf(row);
+    const count = values.filter((value) => chosen.has(value)).length;
+    if (count === 0) {
+        return false;
+    }
+    return count === values.length ? true : 'mixed';
+};
+export const pressRow = (row, chosen, order) => {
+    if (row.disabled) {
+        return [...chosen];
+    }
+    const values = valuesOf(row);
+    const all = values.every((value) => chosen.includes(value));
+    const next = new Set(chosen);
+    for (const value of values) {
+        if (all) {
+            next.delete(value);
+        }
+        else {
+            next.add(value);
+        }
+    }
+    return order.filter((value) => next.has(value));
+};

package/dist/trend/root/trend-root.d.ts

@@ -30,6 +30,7 @@ import { type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/trend
  *
  * @slot - The metric that moved.
+ * @slot icon - Replaces the arrow, such as with a glyph of your own set. Slot the one for the current direction.
  * @slot label - The period the metric moved over.
  *
  * @csspart direction - The direction as a word, for people who cannot see the arrow.
@@ -77,6 +78,18 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * The word read out after the direction when the move is a setback.
      */
     worseLabel: string;
+    /**
+     * The arrow for the direction, as the fallback of the `icon` slot.
+     *
+     * Slot fallback, so the page replaces it by slotting a glyph of its own and
+     * a trend with none draws the arrow it always did; and a method, so the tier
+     * above replaces it by overriding. The word beside it still says the
+     * direction either way.
+     */
+    protected renderIcon(icon: {
+        content: string;
+        viewBox: string;
+    }): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/trend/root/trend-root.js

@@ -24,20 +24,25 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         this.upLabel = 'Up';
         this.worseLabel = 'worse';
     }
-    render() {
-        const direction = readDirection(this.direction);
-        const judgment = this.good && this.direction && this.direction !== 'neutral'
-            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
-            : '';
-        return html `<svg
+    renderIcon(icon) {
+        return html `<slot name="icon"
+      ><svg
         aria-hidden="true"
         data-glyph
         fill="currentColor"
         part="icon"
-        viewBox=${direction.icon.viewBox}
+        viewBox=${icon.viewBox}
       >
-        ${unsafeSVG(direction.icon.content)}
-      </svg>
+        ${unsafeSVG(icon.content)}
+      </svg></slot
+    >`;
+    }
+    render() {
+        const direction = readDirection(this.direction);
+        const judgment = this.good && this.direction && this.direction !== 'neutral'
+            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
+            : '';
+        return html `${this.renderIcon(direction.icon)}
       <span part="direction">${`${this[direction.word]}${judgment}`}</span>
       <slot></slot>
       <slot name="label"></slot>`;

package/dist/video/media-events.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The media events a player sends on from its inner `<video>`, and how.
+ *
+ * Separable because the set is a decision about the platform, and nothing in it
+ * draws. It is the HTML standard's own summary of the events a media element
+ * fires, every one of them, so a consumer who listened on a `<video>` listens
+ * on the player with the same names and hears the same things. A shorter list
+ * would be one more list for a consumer to learn.
+ *
+ * None of these crosses a shadow boundary on its own. The video is inside the
+ * player's shadow root, so a listener on the element a consumer wrote hears
+ * nothing at all without the relay.
+ */
+/**
+ * Every event a media element fires, by the standard's names, sorted.
+ *
+ * `resize` is on the list because the standard puts it there: it fires when the
+ * video's own width or height changes, which is the moment a consumer sizing
+ * something to the picture needs.
+ */
+export declare const MEDIA_EVENTS: readonly ['abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'resize', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting'];
+/** One of the media events the player relays. */
+export type MediaEventName = (typeof MEDIA_EVENTS)[number];
+/**
+ * The copy the host sends: the same name, neither bubbling nor composed.
+ *
+ * **As the platform sends it, which is what makes it reach a React consumer at
+ * all.** These names are in react-dom's `nonDelegatedEvents`, which React wires
+ * on a `<video>` and never on a custom element, so its root listener hears none
+ * of them. `bindReactHandler` closes that for an event that does not bubble,
+ * and skips one that does, on the grounds that a bubbling relay already reaches
+ * React's delegated listener and binding it again would double every call. A
+ * copy sent with `bubbles: true` lands in the branch that refuses to bind, and
+ * `onPlay` on the player is silent.
+ *
+ * Not cancelable, as the platform's are not: the media has already moved by the
+ * time the event is sent, and a refusal would have nothing to stop.
+ */
+export declare const relayedCopy: (event: Event) => Event;
+/**
+ * Sends each media event the video fires on from the host, and returns what
+ * stops it.
+ *
+ * Bound once, after the first render, so the player's own listeners in its
+ * template are ahead of it on the same video: what a consumer reads off the
+ * player in a handler (`paused`, `volume`, `currentTime`) is already the
+ * player's state by the time the copy reaches them.
+ */
+export declare const relayMedia: (video: EventTarget, host: EventTarget) => (() => void);

package/dist/video/media-events.js

@@ -0,0 +1,39 @@
+export const MEDIA_EVENTS = [
+    'abort',
+    'canplay',
+    'canplaythrough',
+    'durationchange',
+    'emptied',
+    'ended',
+    'error',
+    'loadeddata',
+    'loadedmetadata',
+    'loadstart',
+    'pause',
+    'play',
+    'playing',
+    'progress',
+    'ratechange',
+    'resize',
+    'seeked',
+    'seeking',
+    'stalled',
+    'suspend',
+    'timeupdate',
+    'volumechange',
+    'waiting',
+];
+export const relayedCopy = (event) => new Event(event.type, { bubbles: false, cancelable: false, composed: false });
+export const relayMedia = (video, host) => {
+    const relay = (event) => {
+        host.dispatchEvent(relayedCopy(event));
+    };
+    for (const name of MEDIA_EVENTS) {
+        video.addEventListener(name, relay);
+    }
+    return () => {
+        for (const name of MEDIA_EVENTS) {
+            video.removeEventListener(name, relay);
+        }
+    };
+};