@videojs/html 10.2.0 → 10.4.0

package/dist/default/media/background-video/base.js

@@ -0,0 +1,95 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { getTemplateHTML, getTemplateVideo } from "./template.js";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { pick } from "@videojs/utils/object";
+//#region src/media/background-video/base.ts
+const HTMLElementBase = globalThis.HTMLElement ?? class {};
+const MediaAttachBase = MediaAttachMixin(HTMLElementBase);
+const PLAYBACK_DEFAULTS = [
+	"muted",
+	"loop",
+	"autoplay"
+];
+/**
+* The shadow setup, `src` wiring, and `target` that `<background-video>` and `<hls-background-video>` share. Each
+* subclass supplies its own `src` and declares which playback defaults authors may opt out of.
+*
+* @internal
+*/
+var BackgroundVideoBase = class extends MediaAttachBase {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	static {
+		this.optOuts = [
+			"muted",
+			"loop",
+			"autoplay"
+		];
+	}
+	static {
+		this.passthroughAttributes = [
+			"controls",
+			"controlslist",
+			"crossorigin",
+			"preload"
+		];
+	}
+	static get observedAttributes() {
+		return [
+			"src",
+			...this.optOuts,
+			...this.optOuts.map((name) => `no${name}`),
+			...this.passthroughAttributes
+		];
+	}
+	constructor() {
+		super();
+		const ctor = this.constructor;
+		if (!this.shadowRoot) {
+			const attrs = {
+				...pick(namedNodeMapToObject(this.attributes), ctor.passthroughAttributes),
+				playsinline: "",
+				disableremoteplayback: "",
+				disablepictureinpicture: ""
+			};
+			for (const name of PLAYBACK_DEFAULTS) if (this.#isDefaultOn(name)) attrs[name] = "";
+			this.attachShadow(ctor.shadowRootOptions);
+			this.shadowRoot.innerHTML = ctor.getTemplateHTML(attrs);
+		}
+		this.syncPlaybackDefaults();
+	}
+	/**
+	* Writes muted, loop, and autoplay onto the inner video as properties. The template's attributes only cover markup
+	* parsed with its attributes in place; an element created by script gets its `no*` attributes afterwards, and neither
+	* Chrome nor Firefox honor a `muted` attribute set after `document.createElement`.
+	*/
+	syncPlaybackDefaults() {
+		const target = this.target;
+		if (!target) return;
+		for (const name of PLAYBACK_DEFAULTS) target[name] = this.#isDefaultOn(name);
+	}
+	/** On unless its `no*` attribute is set and allowed; an explicit attribute such as `muted` wins over its opt-out. */
+	#isDefaultOn(name) {
+		const { optOuts } = this.constructor;
+		return this.hasAttribute(name) || !optOuts.includes(name) || !this.hasAttribute(`no${name}`);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		const { passthroughAttributes } = this.constructor;
+		if (name === "src") this.src = newValue ?? "";
+		else if (passthroughAttributes.includes(name)) {
+			if (newValue === null) this.target?.removeAttribute(name);
+			else this.target?.setAttribute(name, newValue);
+		} else this.syncPlaybackDefaults();
+	}
+	/** The inner `<video>` in the shadow root: what plays, and what `play()` / `pause()` belong on. */
+	get target() {
+		return getTemplateVideo(this.shadowRoot);
+	}
+};
+//#endregion
+export { BackgroundVideoBase };

package/dist/default/media/background-video/template.js

@@ -1,32 +1,25 @@
 import { serializeAttributes } from "@videojs/utils/dom";
-import { pick } from "@videojs/utils/object";
 //#region src/media/background-video/template.ts
 /**
-* Attributes forwarded to the inner `<video>`. `src` is deliberately not one of them: each element decides what to do
-* with it, whether that is assigning the inner video or handing it to a playback engine, and serializing it into the
-* template would start a native load either way.
-*/
-const VideoAttributes = [
-	"autoplay",
-	"controls",
-	"controlslist",
-	"crossorigin",
-	"disablepictureinpicture",
-	"disableremoteplayback",
-	"loop",
-	"muted",
-	"playsinline",
-	"preload"
-];
-/**
 * The shadow template both background-video elements render: a `<slot>` for a placeholder image, and a `<video>`
 * stretched over the host.
 *
+* `attrs` go onto the `<video>` as given; each element decides which of its own attributes to forward. `src` is never
+* among them, since serializing it would start a native load before an engine could take it.
+*
 * Shared so the two can't drift in presentation. `object-fit` and `object-position` are the only styling hooks — a
 * background video has no controls to theme.
 */
 function getTemplateHTML(attrs) {
-	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video${serializeAttributes(pick(attrs, [...VideoAttributes]))}></video>`;
+	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video${serializeAttributes(attrs)}></video>`;
+}
+/**
+* The `<video>` from `getTemplateHTML`. Always the shadow one: the template has no slot that would render a light-DOM
+* `<video>`, so anything found there is either the placeholder or not displayed at all.
+*/
+function getTemplateVideo(shadowRoot) {
+	const video = shadowRoot?.querySelector("video");
+	return video instanceof HTMLVideoElement ? video : null;
 }
 //#endregion
-export { VideoAttributes, getTemplateHTML };
+export { getTemplateHTML, getTemplateVideo };

package/dist/default/media/dailymotion-video/adapter.js

@@ -0,0 +1,31 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { DailymotionAdapter } from "@videojs/dailymotion-video";
+//#region src/media/dailymotion-video/adapter.ts
+var DailymotionCustomMediaElement = class extends CustomMediaElement("iframe", DailymotionAdapter) {
+	static {
+		this.getTemplateHTML = () => `<style> :host { display: inline-block; min-width: 300px; min-height: 150px; position: relative; } ::slotted([slot=media]) { position: absolute; inset: 0; } </style><slot name="media"></slot>`;
+	}
+};
+var DailymotionVideo = class extends MediaAttachMixin(DailymotionCustomMediaElement) {
+	constructor() {
+		super();
+		this.adapter.addEventListener("volumechange", () => {
+			const { muted } = this.adapter;
+			if (this.hasAttribute("muted") !== muted) this.toggleAttribute("muted", muted);
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+		const existing = this.querySelector(":scope > [slot=media]");
+		if (existing) {
+			if (this.adapter.src && !existing.hasChildNodes() && !this.adapter.error) this.adapter.load();
+			return;
+		}
+		const container = document.createElement("div");
+		container.slot = "media";
+		this.append(container);
+	}
+};
+//#endregion
+export { DailymotionVideo };

package/dist/default/media/hls-background-video/adapter.js

@@ -1,10 +1,6 @@
-import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
-import { getTemplateHTML } from "../background-video/template.js";
-import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { BackgroundVideoBase } from "../background-video/base.js";
 import { HlsBackgroundVideoAdapter } from "@videojs/spf/adapters/hls-background-video";
 //#region src/media/hls-background-video/adapter.ts
-const HTMLElementBase = globalThis.HTMLElement ?? class {};
-const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
 /**
 * A muted, looping, chrome-less video over the SPF background-video engine.
 *
@@ -16,8 +12,9 @@ const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
 * package, whose `audio`, `debug`, `preload`, and `max-resolution` attributes are all deliberately absent. Capping
 * which rendition is fetched is a delivery param on the URL — `?max_resolution=720p` on a Mux stream, for one — which
 * keeps the renditions it excludes out of the manifest rather than merely unpicked; `preload` would have nothing to
-* say, since the engine loads from the moment it has a source. And unlike `<background-video>` there are no `nomuted` /
-* `noloop` / `noautoplay` opt-outs: those three are what this element is for, so the adapter fixes them on at attach.
+* say, since the engine loads from the moment it has a source. Muted is fixed on: the engine drops audio, so there is
+* nothing to unmute. `noloop` and `noautoplay` opt out as on `<background-video>`, so a page can play the video once,
+* or hold it until it has checked the motion preference.
 *
 * Takes no structured `source` — `src` is an HLS URL, as the package it replaces required. Mux playback-ID identity,
 * poster, and storyboard belong to `<mux-video>`; none of them mean anything without controls to hang them on.
@@ -39,40 +36,36 @@ const HlsBackgroundVideoBase = MediaAttachMixin(HTMLElementBase);
 *   `<mux-background-video>` is this element under the name the package it replaces used. Same class, so the tag is a
 *   naming choice and nothing more.
 */
-var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
+var HlsBackgroundVideo = class extends BackgroundVideoBase {
 	static {
-		this.shadowRootOptions = { mode: "open" };
+		this.optOuts = ["loop", "autoplay"];
 	}
 	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-	static get observedAttributes() {
-		return ["src"];
+		this.passthroughAttributes = [
+			"controls",
+			"controlslist",
+			"crossorigin"
+		];
 	}
 	#media = new HlsBackgroundVideoAdapter();
 	constructor() {
 		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = {
-				...namedNodeMapToObject(this.attributes),
-				muted: "",
-				loop: "",
-				autoplay: "",
-				playsinline: "",
-				disableremoteplayback: "",
-				disablepictureinpicture: ""
-			};
-			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
-		}
-		const video = this.video;
-		if (video) this.#media.attach(video);
+		const target = this.target;
+		if (target) this.#media.attach(target);
+		this.syncPlaybackDefaults();
 		this.#media.addEventListener("error", () => this.dispatchEvent(new Event("error")));
 	}
 	/** Register the Media (not the inner `<video>`) with the provider. */
 	getMediaTarget() {
 		return this.#media;
 	}
+	/**
+	* The Media driving the inner `<video>`, matching `adapter` on `CustomMediaElement`. Call `adapter.destroy()` to
+	* release the engine after `keep-alive` kept it running past removal.
+	*/
+	get adapter() {
+		return this.#media;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback?.();
 		if (this.hasAttribute("keep-alive")) return;
@@ -80,14 +73,9 @@ var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
 			if (!this.isConnected) this.#media.destroy();
 		});
 	}
-	attributeChangedCallback(name, oldValue, newValue) {
-		if (oldValue === newValue) return;
-		if (name === "src") this.src = newValue ?? "";
-	}
-	/** The inner `<video>` the engine renders into. */
+	/** Same element as `target`. */
 	get video() {
-		const video = this.shadowRoot?.querySelector("video");
-		return video instanceof HTMLVideoElement ? video : null;
+		return this.target;
 	}
 	/**
 	* What made the current source unplayable, or `null`. An SVTA code rather than a `MediaError` one — 99001 where this

package/dist/default/media/mixcloud-audio/adapter.js

@@ -0,0 +1,16 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { MixcloudAdapter, buildMixcloudIframeSrc } from "@videojs/mixcloud-audio";
+//#region src/media/mixcloud-audio/adapter.ts
+var MixcloudCustomMediaElement = class extends CustomMediaElement("iframe", MixcloudAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildMixcloudIframeSrc(attrs.src ?? "");
+			return `<style> :host { display: block; position: relative; height: 120px; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* * The widget is Mixcloud's own chrome, so without controls it is a * transport and nothing else. Hidden rather than merely inert, and * important so a consumer's own display rule cannot put it back on * screen. An iframe in a hidden subtree still loads and plays its src. */ :host(:not([controls])) { display: none !important; } </style><iframe part="iframe" title="Mixcloud audio player" ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""} allow="autoplay; encrypted-media" frameborder="0" width="100%" height="100%" referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}" ></iframe>`;
+		};
+	}
+};
+var MixcloudAudio = class extends MediaAttachMixin(MixcloudCustomMediaElement) {};
+//#endregion
+export { MixcloudAudio };

package/dist/default/media/soundcloud-audio/adapter.js

@@ -0,0 +1,16 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { SoundCloudAdapter, buildSoundCloudIframeSrc } from "@videojs/soundcloud-audio";
+//#region src/media/soundcloud-audio/adapter.ts
+var SoundCloudCustomMediaElement = class extends CustomMediaElement("iframe", SoundCloudAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildSoundCloudIframeSrc(attrs.src ?? "");
+			return `<style> :host { display: block; position: relative; height: 166px; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* * The widget is SoundCloud's own chrome, so without controls it is a * transport and nothing else. Hidden rather than merely inert, and * important so a consumer's own display rule cannot put it back on * screen. An iframe in a hidden subtree still loads and plays its src. */ :host(:not([controls])) { display: none !important; } </style><iframe part="iframe" title="SoundCloud audio player" ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""} allow="autoplay; encrypted-media" scrolling="no" frameborder="0" width="100%" height="100%" referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}" ></iframe>`;
+		};
+	}
+};
+var SoundCloudAudio = class extends MediaAttachMixin(SoundCloudCustomMediaElement) {};
+//#endregion
+export { SoundCloudAudio };

package/dist/default/player/element.js

@@ -1,6 +1,6 @@
 import { UIElement } from "../ui/ui-element.js";
 import { PlayerExtensionCoordinator, setPlayerConfigValue } from "@videojs/core/dom";
-import { ContextProvider, ContextRoot } from "@videojs/element/context";
+import { ContextProvider } from "@videojs/element/context";
 import { camelCase, kebabCase } from "@videojs/utils/string";
 import { isNull } from "@videojs/utils/predicate";
 //#region src/player/element.ts
@@ -27,7 +27,6 @@ function createPlayerElement(options) {
 			};
 		}
 		#store = options.factory();
-		#contextRoot = new ContextRoot();
 		#configuredStore = null;
 		#detach = null;
 		#connected = false;
@@ -94,7 +93,6 @@ function createPlayerElement(options) {
 		}
 		connectedCallback() {
 			this.#connected = true;
-			this.#contextRoot.attach(this);
 			super.connectedCallback();
 			this.#syncInitialConfig();
 			this.#playerProvider.setValue(this.store);
@@ -111,13 +109,11 @@ function createPlayerElement(options) {
 		}
 		disconnectedCallback() {
 			this.#connected = false;
-			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			super.disconnectedCallback();
 		}
 		destroyCallback() {
-			this.#contextRoot.detach(this);
 			this.#observer.disconnect();
 			this.#detachStore();
 			this.#extensions.destroy();

package/dist/default/presets/background/skin.js

@@ -1,5 +1,5 @@
 import skin_default from "../../define/background/skin2.js";
-import { ReactiveElement } from "@videojs/element";
+import { DestroyMixin, ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
 const STYLES_ID = "__media-background-styles";
@@ -12,7 +12,7 @@ function getTemplateHTML() {
     </media-container>
   `;
 }
-var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {
+var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends DestroyMixin(ReactiveElement) {
 	static {
 		this.tagName = "background-video-skin";
 	}

package/dist/default/presets/skin.js

@@ -1,15 +1,16 @@
+import { UIElement } from "../ui/ui-element.js";
 import global_default from "../define/global.js";
 import shadow_default from "../define/shadow.js";
-import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
 const STYLES_ID = "__media-styles";
 const shadowSheet = createShadowStyle(shadow_default);
 /**
 * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
-* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
+* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its
+* shadow root.
 */
-var SkinElement = class extends ReactiveElement {
+var SkinElement = class extends UIElement {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}

package/dist/default/ui/captions-radio-group/element.js

@@ -11,7 +11,8 @@ import { translateText } from "@videojs/core/i18n";
 /**
 * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and
 * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one
-* `<media-menu-radio-item>` customizes each generated item.
+* `<media-menu-radio-item>` customizes each generated item; its `data-part` `label` and `badge` descendants receive the
+* track's text.
 */
 var CaptionsRadioGroupElement = class extends MenuRadioGroupElement {
 	constructor(..._args) {
@@ -23,6 +24,8 @@ var CaptionsRadioGroupElement = class extends MenuRadioGroupElement {
 		this.#i18n = new I18nController(this, i18nContext);
 		this.#mediaState = new PlayerController(this, playerContext, selectTextTrack);
 		this.#options = new RadioOptionsController(this, {
+			renderItem: (item, label, option) => this.#setContent(item, label, option.badge),
+			getOptionCacheKey: (option) => option.badge ?? "",
 			setItemAttributes: (item, option) => item.setAttribute("data-track", option.value),
 			onValueChange: (value) => {
 				const media = this.#mediaState.value;
@@ -66,6 +69,16 @@ var CaptionsRadioGroupElement = class extends MenuRadioGroupElement {
 		super.update(changed);
 		if (state) applyStateDataAttrs(this, state, CaptionsRadioGroupDataAttrs);
 	}
+	#setContent(item, label, badge) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		const badgePart = item.querySelector("[data-part~=\"badge\"]");
+		if (labelPart) labelPart.textContent = label;
+		if (badgePart) {
+			badgePart.textContent = badge ?? "";
+			badgePart.hidden = !badge;
+		}
+		if (!labelPart && !badgePart) item.textContent = [label, badge].filter(Boolean).join(" ");
+	}
 };
 //#endregion
 export { CaptionsRadioGroupElement };

package/dist/default/ui/controls/element.js

@@ -3,13 +3,13 @@ import { PlayerController } from "../../player/controller.js";
 import { UIElement } from "../ui-element.js";
 import { controlsContext } from "./context.js";
 import { ControlsCore, ControlsDataAttrs, POPUP_HOST_SELECTOR } from "@videojs/core";
-import { applyStateDataAttrs, selectControls } from "@videojs/core/dom";
+import { applyStateDataAttrs, selectControls, selectPlayback } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/controls/element.ts
 /**
-* Tracks controls visibility, reflects it as data attributes, and shares it with its descendant controls parts. Hiding
-* the controls closes any popup open inside it.
+* Tracks controls visibility and whether playback has started, reflects them as data attributes, and shares them with
+* its descendant controls parts. Hiding the controls closes any popup open inside it.
 */
 var ControlsElement = class extends UIElement {
 	constructor(..._args) {
@@ -17,6 +17,7 @@ var ControlsElement = class extends UIElement {
 		this.visibility = ControlsCore.defaultProps.visibility;
 		this.#core = new ControlsCore();
 		this.#mediaState = new PlayerController(this, playerContext, selectControls);
+		this.#playback = new PlayerController(this, playerContext, selectPlayback);
 		this.#provider = new ContextProvider(this, { context: controlsContext });
 		this.#visible = true;
 	}
@@ -28,6 +29,7 @@ var ControlsElement = class extends UIElement {
 	}
 	#core;
 	#mediaState;
+	#playback;
 	#provider;
 	#visible;
 	connectedCallback() {
@@ -37,6 +39,7 @@ var ControlsElement = class extends UIElement {
 		super.update(_changed);
 		this.#core.setProps({ visibility: this.visibility });
 		this.#core.setMedia(this.#mediaState.value ?? null);
+		this.#core.setPlayback(this.#playback.value ?? null);
 		const state = this.#core.getState();
 		if (!state) return;
 		applyStateDataAttrs(this, state, ControlsDataAttrs);

package/dist/default/ui/dialog/element.js

@@ -1,9 +1,10 @@
+import { containerContext } from "../../player/context.js";
 import { UIElement } from "../ui-element.js";
 import { PositionController } from "../position-controller.js";
 import { dialogContext } from "./context.js";
 import { DialogCore, DialogDataAttrs } from "@videojs/core";
 import { applyElementProps, applyStateDataAttrs, createDialog, createTransition } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
 import { SnapshotController } from "@videojs/store/html";
 //#region src/ui/dialog/element.ts
 let idCounter = 0;
@@ -25,12 +26,14 @@ var DialogElementBase = class extends UIElement {
 	#stateAttrMap;
 	#provider;
 	#position;
+	#container;
 	#popupId;
 	#titleId;
 	#descriptionId;
 	#bindTrigger;
 	#dialog;
 	#snapshot;
+	#modalitySnapshot;
 	#triggerAbort;
 	#triggerElement;
 	constructor({ core = new DialogCore(), stateAttrMap = DialogDataAttrs, idPrefix = "dialog", bindTrigger = true } = {}) {
@@ -40,8 +43,13 @@ var DialogElementBase = class extends UIElement {
 		this.closeOnEscape = DialogCore.defaultProps.closeOnEscape;
 		this.#provider = new ContextProvider(this, { context: dialogContext });
 		this.#position = new PositionController(this);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#dialog = null;
 		this.#snapshot = null;
+		this.#modalitySnapshot = null;
 		this.#triggerAbort = null;
 		this.#triggerElement = null;
 		this.#core = core;
@@ -69,6 +77,8 @@ var DialogElementBase = class extends UIElement {
 		});
 		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
 		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+		if (this.#modalitySnapshot) this.#modalitySnapshot.track(this.#dialog.modality);
+		else this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);
 	}
 	firstUpdated(changed) {
 		super.firstUpdated(changed);
@@ -86,6 +96,7 @@ var DialogElementBase = class extends UIElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
+		this.#dialog?.setInteractionRoot(this.#container.value?.container ?? null);
 		if (this.#dialog && changed.has("open")) {
 			const { active: inputOpen } = this.#dialog.input.current;
 			if (this.open !== inputOpen) {
@@ -101,6 +112,7 @@ var DialogElementBase = class extends UIElement {
 		this.#syncTrigger(triggerElement);
 		const input = this.#dialog.input.current;
 		this.#core.setInput(input);
+		this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);
 		const state = this.#core.getState();
 		applyStateDataAttrs(this, state, this.#stateAttrMap);
 		if (this.#triggerElement) applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));

package/dist/default/ui/gesture/element.js

@@ -61,14 +61,17 @@ var GestureElement = class extends UIElement {
 		if (!resolver) return;
 		const { value, region } = this;
 		const actionValue = getGestureActionValue(this.action, region, value);
+		let state;
 		const onActivate = (event) => {
 			resolver({
 				store,
+				state,
 				value: actionValue,
 				event
 			});
 		};
 		const options = {
+			onPointerDown: () => state = store.state,
 			pointer: this.pointer,
 			region,
 			disabled: this.disabled,

package/dist/default/ui/media-button-element.js

@@ -71,6 +71,7 @@ var MediaButtonElement = class extends UIElement {
 		if (!media) return void 0;
 		this.core.setMedia(media);
 		const state = this.core.getState();
+		if (this.core.getTooltipLabel) return translateText(this.core.getTooltipLabel(state), this.#i18n.value);
 		return translateText(this.core.getLabel(state), this.#i18n.value, this.core.getLabelParams?.(state));
 	}
 	willUpdate(changed) {
@@ -89,9 +90,17 @@ var MediaButtonElement = class extends UIElement {
 		applyElementProps(this, {
 			...attrs,
 			"aria-keyshortcuts": this.#hotkeyRegistry?.aria,
-			...isHideable(state) && { hidden: state.hidden ? "" : void 0 }
+			...isHideable(state) && this.reflectsHidden() && { hidden: state.hidden ? "" : void 0 }
 		});
 		applyStateDataAttrs(this, state, this.stateAttrMap);
+		for (const [name, value] of Object.entries(this.core.getCSSVars?.(state) ?? {})) this.style.setProperty(name, value);
+	}
+	/**
+	* Whether this button writes its core's `hidden` state to the `hidden` attribute. A subclass returns `false` while
+	* another owner, such as a linked menu, manages its visibility.
+	*/
+	reflectsHidden() {
+		return true;
 	}
 	#syncHotkeyShortcut() {
 		const shortcut = this.getShortcut();

package/dist/default/ui/playback-rate-button/element.js

@@ -8,6 +8,7 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
 		this.commandfor = void 0;
+		this.rates = void 0;
 		this.core = new PlaybackRateButtonCore();
 		this.stateAttrMap = PlaybackRateButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
@@ -20,7 +21,8 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 		this.properties = {
 			label: { type: String },
 			disabled: { type: Boolean },
-			commandfor: { type: String }
+			commandfor: { type: String },
+			rates: { type: String }
 		};
 	}
 	activate(state, event) {
@@ -33,9 +35,12 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	getIsButtonDisabled() {
 		const media = this.mediaState.value;
 		if (super.getIsButtonDisabled()) return true;
-		if (this.commandfor && media && media.playbackRates.length === 0) return true;
+		if (this.commandfor && media && this.core.getRates(media).length === 0) return true;
 		return false;
 	}
+	reflectsHidden() {
+		return !this.commandfor;
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("commandfor")) {

package/dist/default/ui/playback-rate-radio-group/element.js

@@ -17,12 +17,17 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
+		this.rates = void 0;
 		this.formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;
 		this.#core = new PlaybackRateRadioGroupCore();
 		this.#i18n = new I18nController(this, i18nContext);
 		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
 		this.#options = new RadioOptionsController(this, {
-			setItemAttributes: (item, option) => item.setAttribute("data-rate", option.value),
+			setItemAttributes: (item, option) => {
+				item.setAttribute("data-rate", option.value);
+				item.toggleAttribute("data-custom", option.custom);
+			},
+			getOptionCacheKey: (option) => option.custom ? "custom" : "",
 			onValueChange: (value) => {
 				const media = this.#mediaState.value;
 				if (media) this.#core.selectValue(media, value);
@@ -35,7 +40,8 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 	static {
 		this.properties = {
 			...MenuRadioGroupElement.properties,
-			disabled: { type: Boolean }
+			disabled: { type: Boolean },
+			rates: { type: String }
 		};
 	}
 	#core;
@@ -52,7 +58,8 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 		if (media) {
 			this.#core.setProps({
 				formatRate: this.formatRate,
-				disabled: this.disabled
+				disabled: this.disabled,
+				rates: this.rates
 			});
 			this.#core.setMedia(media);
 			state = this.#core.getState();