@videojs/html 10.1.0 → 10.3.0

package/dist/default/internal/skins/scaffold-video/skin.css

@@ -223,6 +223,10 @@
     display: none;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -240,8 +244,8 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-popup {
     z-index: 50;
-    width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
+    max-height: calc(100% - var(--media-spacing) * 8);
+    width: calc(100% - var(--media-spacing) * 8);
     max-width: calc(var(--media-spacing) * 80);
     gap: calc(var(--media-spacing) * 3);
     background-color: var(--media-popover);
@@ -268,6 +272,11 @@
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - var(--media-spacing) * 8);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -281,8 +290,8 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-dialog-title {
-    font-size: 1.125rem;
-    line-height: 1.55556;
+    font-size: calc(var(--media-spacing) * 4.5);
+    line-height: calc(var(--media-spacing) * 7);
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-indicator {
@@ -431,6 +440,18 @@
     overflow: hidden;
   }
 
+  .media-poster > slot::slotted(img) {
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    display: block;
+    height: 100% !important;
+  }
+
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -602,8 +623,13 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-tooltip-shortcut {
+    text-align: center;
+    min-width: 1.5em;
     font-family: inherit;
     font-size: calc(var(--media-spacing) * 2.75);
+    background-color: oklab(100% 0 5.96046e-8 / .1);
+    padding: .1em;
+    line-height: 1.25;
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-button-icon {
@@ -676,6 +702,10 @@
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -1201,14 +1231,6 @@
     display: block;
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-captions-button-on-icon {
     display: none;
   }
@@ -1699,6 +1721,14 @@
     inset: auto !important;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button-exit-icon {
+    display: none;
+  }
+
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
+    display: block;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-tooltip-screen-popup {
     --media-tooltip-side-offset: calc(var(--media-spacing) * 3) !important;
   }
@@ -1768,7 +1798,7 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-backdrop {
     pointer-events: none;
-    background-color: #0006;
+    background-image: linear-gradient(to top, #00000080, #0000 40% 60%, #0006);
     position: absolute;
     inset: 0;
   }
@@ -1803,6 +1833,9 @@
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-container, :where(.media-skin[data-theme="scaffold"][data-preset="video"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     font-family: var(--media-font-family, inherit);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1822,9 +1855,19 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-video, :where(.media-skin[data-theme="scaffold"][data-preset="video"]).media-video {
-    aspect-ratio: 16 / 9;
     background-color: #000;
   }
+
+  .media-container > slot::slotted(video), :scope.media-container > slot::slotted(video) {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    display: block;
+    height: 100% !important;
+  }
 }
 
 @layer utilities;
@@ -1842,7 +1885,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
     --media-border: oklch(0% 0 0 / .1);
     --media-ring: oklch(100% 0 0);
     --media-backdrop: oklch(0% 0 0);
@@ -1855,9 +1898,9 @@
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
     --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -1957,10 +2000,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 40%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
@@ -1972,9 +2025,17 @@
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
 
@@ -1989,9 +2050,20 @@
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: 40%;
     --media-controls-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
     --media-indicator-gradient: linear-gradient(to bottom,
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
@@ -2001,6 +2073,7 @@
   }
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
 
@@ -2012,7 +2085,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
 
@@ -2036,7 +2118,6 @@
   }
 
   .media-skin[data-theme="scaffold"] {
-    --media-spacing: calc(var(--media-scale-unit, 16px) / 4);
     --media-background: transparent;
     --media-foreground: white;
     --media-accent: var(--media-accent-color, var(--media-default-accent-color));

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-audio/adapter.js

@@ -1,6 +1,6 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { CustomMediaElement } from "@videojs/media/dom";
-import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+import { HlsAudioAdapter } from "@videojs/spf/adapters/hls-audio";
 //#region src/media/hls-audio/adapter.ts
 var HlsAudio = class extends MediaAttachMixin(CustomMediaElement("audio", HlsAudioAdapter)) {};
 //#endregion

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

@@ -1,7 +1,7 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { getTemplateHTML } from "../background-video/template.js";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
-import { HlsBackgroundVideoAdapter } from "@videojs/spf/hls-background-video";
+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);
@@ -73,6 +73,13 @@ var HlsBackgroundVideo = class extends HlsBackgroundVideoBase {
 	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;

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

@@ -1,6 +1,6 @@
 import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { CustomMediaElement } from "@videojs/media/dom";
-import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+import { HlsVideoAdapter } from "@videojs/spf/adapters/hls-video";
 //#region src/media/hls-video/adapter.ts
 var HlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", HlsVideoAdapter)) {};
 //#endregion

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/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();