@videojs/html 10.0.0-beta.27 → 10.0.0-beta.29

package/dist/default/ui/poster/poster-element.js

@@ -1,27 +1,157 @@
 import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
-import { MediaUIElement } from "../media-ui-element.js";
-import { selectPlayback } from "@videojs/core/dom";
+import { applyStateDataAttrs, selectMetadata, selectPlayback } from "@videojs/core/dom";
 import { PosterCore, PosterDataAttrs } from "@videojs/core";
 //#region src/ui/poster/poster-element.ts
-var PosterElement = class extends MediaUIElement {
-	constructor(..._args) {
-		super(..._args);
-		this.core = new PosterCore();
-		this.stateAttrMap = PosterDataAttrs;
-		this.mediaState = new PlayerController(this, playerContext, selectPlayback);
+/** What an element composes: whatever fills a slot, or the element's own children. */
+function composedChildren(element) {
+	if (element instanceof HTMLSlotElement) {
+		const assigned = element.assignedElements();
+		if (assigned.length > 0) return assigned;
 	}
+	return [...element.children];
+}
+/**
+* The first image an element composes. A skin forwards its own
+* `<slot name="poster">` in, so the image is a slot or two down and may be
+* wrapped in a `<picture>` or a framework image component.
+*/
+function findImage(element) {
+	for (const child of composedChildren(element)) {
+		if (child instanceof HTMLImageElement) return child;
+		const nested = findImage(child);
+		if (nested) return nested;
+	}
+	return null;
+}
+/**
+* Whether anything already points this image somewhere, which answers both
+* whether the author owns the source and whether there is a download to wait
+* for. A `<source>` counts: inside a `<picture>` it can win over the `src`.
+*/
+function hasSource(img) {
+	if (img.hasAttribute("src") || img.hasAttribute("srcset")) return true;
+	const parent = img.parentElement;
+	return parent?.localName === "picture" && parent.querySelector("source") !== null;
+}
+/**
+* Whether `complete` on this image describes a request. It is also true for one
+* that omits both `src` and `srcset`, whatever a parent `<picture>` is fetching
+* on its behalf, so only an image sourced from its own attributes can be read.
+*/
+function hasOwnSource(img) {
+	return !!img.getAttribute("src") || img.hasAttribute("srcset");
+}
+/**
+* `<media-poster>` — sets `src` on a poster image it does not own.
+*
+* The image is a child, as in `<picture>`, but sourcing runs the other way
+* around: `<picture>` treats the `src` on its `<img>` as the fallback, while
+* here an image with no source of its own is the one this element fills in.
+* Give the child a `src`, a `srcset`, or `<source>` candidates and it is yours,
+* left alone.
+*
+* Renders no image of its own, so include one:
+* `<media-poster><img alt=""></media-poster>`. Inside a skin, an
+* `<img slot="poster">` of yours replaces the one the skin carries.
+*/
+var PosterElement = class extends MediaElement {
 	static {
 		this.tagName = "media-poster";
 	}
 	static get observedAttributes() {
 		return [...super.observedAttributes, "placeholdersrc"];
 	}
+	#core = new PosterCore();
+	#children = new MutationObserver(() => this.requestUpdate());
+	#playback = new PlayerController(this, playerContext, selectPlayback);
+	#metadata = new PlayerController(this, playerContext, selectMetadata);
+	#image = null;
+	/** Whether `#image` had no source of its own when it became active. */
+	#owned = false;
+	#imageLoadState = "pending";
+	#imageEvents = null;
+	#disconnect = null;
+	#warnedMissingImage = false;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		const { signal } = this.#disconnect;
+		this.addEventListener("slotchange", () => this.requestUpdate(), { signal });
+		this.#children.observe(this, {
+			childList: true,
+			subtree: true
+		});
+	}
 	attributeChangedCallback(attr, oldValue, newValue) {
 		super.attributeChangedCallback(attr, oldValue, newValue);
 		if (attr === "placeholdersrc") if (newValue) this.style.setProperty("--media-poster-placeholder", `url(${newValue})`);
 		else this.style.removeProperty("--media-poster-placeholder");
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#adopt(null);
+		this.#children.disconnect();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	get #loadState() {
+		if (!this.#image || !hasSource(this.#image)) return "none";
+		return this.#imageLoadState === "pending" ? "loading" : this.#imageLoadState;
+	}
+	update(changed) {
+		super.update(changed);
+		const playback = this.#playback.value;
+		if (!playback) return;
+		this.#core.setMedia({
+			started: playback.started,
+			poster: this.#metadata.value?.poster ?? ""
+		});
+		const { src } = this.#core.getState();
+		this.#adopt(findImage(this));
+		this.#applySource(src);
+		this.#core.setImageLoadState(this.#loadState);
+		applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);
+	}
+	/**
+	* Ownership is settled once, when an image becomes active: after the first fill
+	* the `src` we set would itself look authored. Re-slot an image with a source
+	* to hand it back, the way React decides a field is controlled at mount.
+	*/
+	#adopt(next) {
+		if (next === this.#image) return;
+		if (this.#owned) this.#image?.removeAttribute("src");
+		this.#imageEvents?.abort();
+		this.#imageEvents = null;
+		this.#image = next;
+		this.#owned = next !== null && !hasSource(next);
+		this.#imageLoadState = "pending";
+		if (!next) return;
+		if (next.naturalWidth > 0) this.#imageLoadState = "loaded";
+		else if (next.complete && hasOwnSource(next)) this.#imageLoadState = "error";
+		this.#imageEvents = new AbortController();
+		const { signal } = this.#imageEvents;
+		const settle = (loadState) => () => {
+			this.#imageLoadState = loadState;
+			this.requestUpdate();
+		};
+		next.addEventListener("load", settle("loaded"), { signal });
+		next.addEventListener("error", settle("error"), { signal });
+	}
+	#applySource(src) {
+		const img = this.#image;
+		if (!img) return;
+		if (!this.#owned) return;
+		if (!src) {
+			this.#imageLoadState = "pending";
+			img.removeAttribute("src");
+		} else if (img.getAttribute("src") !== src) {
+			this.#imageLoadState = "pending";
+			img.setAttribute("src", src);
+		}
+	}
 };
 //#endregion
 export { PosterElement };

package/dist/default/ui/poster/poster-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"poster-element.js","names":[],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaUIElement } from '../media-ui-element';\n\nexport class PosterElement extends MediaUIElement<PosterCore> {\n  static readonly tagName = 'media-poster';\n\n  static get observedAttributes(): string[] {\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return [...super.observedAttributes, 'placeholdersrc'];\n  }\n\n  protected readonly core = new PosterCore();\n  protected readonly stateAttrMap = PosterDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n\n  override attributeChangedCallback(attr: string, oldValue: string | null, newValue: string | null): void {\n    super.attributeChangedCallback(attr, oldValue, newValue);\n\n    if (attr === 'placeholdersrc') {\n      if (newValue) {\n        this.style.setProperty('--media-poster-placeholder', `url(${newValue})`);\n      } else {\n        this.style.removeProperty('--media-poster-placeholder');\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,gBAAb,cAAmC,eAA2B;;;EAQlC,KAAA,OAAA,IAAI,WAAW;EACP,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;;;EAT9D,KAAA,UAAA;;CAE1B,WAAW,qBAA+B;EAExC,OAAO,CAAC,GAAG,MAAM,oBAAoB,gBAAgB;CACvD;CAMA,yBAAkC,MAAc,UAAyB,UAA+B;EACtG,MAAM,yBAAyB,MAAM,UAAU,QAAQ;EAEvD,IAAI,SAAS,kBACX,IAAI,UACF,KAAK,MAAM,YAAY,8BAA8B,OAAO,SAAS,EAAE;OAEvE,KAAK,MAAM,eAAe,4BAA4B;CAG5D;AACF"}
+{"version":3,"file":"poster-element.js","names":["#core","#children","#playback","#metadata","#disconnect","#adopt","#loadState","#image","#imageLoadState","#applySource","#owned","#imageEvents"],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\n/** What an element composes: whatever fills a slot, or the element's own children. */\nfunction composedChildren(element: Element): Element[] {\n  if (element instanceof HTMLSlotElement) {\n    const assigned = element.assignedElements();\n    if (assigned.length > 0) return assigned;\n  }\n\n  return [...element.children];\n}\n\n/**\n * The first image an element composes. A skin forwards its own\n * `<slot name=\"poster\">` in, so the image is a slot or two down and may be\n * wrapped in a `<picture>` or a framework image component.\n */\nfunction findImage(element: Element): HTMLImageElement | null {\n  for (const child of composedChildren(element)) {\n    if (child instanceof HTMLImageElement) return child;\n\n    const nested = findImage(child);\n    if (nested) return nested;\n  }\n\n  return null;\n}\n\n/**\n * Whether anything already points this image somewhere, which answers both\n * whether the author owns the source and whether there is a download to wait\n * for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n */\nfunction hasSource(img: HTMLImageElement): boolean {\n  if (img.hasAttribute('src') || img.hasAttribute('srcset')) return true;\n\n  const parent = img.parentElement;\n  return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/**\n * Whether `complete` on this image describes a request. It is also true for one\n * that omits both `src` and `srcset`, whatever a parent `<picture>` is fetching\n * on its behalf, so only an image sourced from its own attributes can be read.\n */\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n  return !!img.getAttribute('src') || img.hasAttribute('srcset');\n}\n\n/** How the current source is faring. */\ntype ImageLoadState = 'pending' | 'loaded' | 'error';\n\n/**\n * `<media-poster>` — sets `src` on a poster image it does not own.\n *\n * The image is a child, as in `<picture>`, but sourcing runs the other way\n * around: `<picture>` treats the `src` on its `<img>` as the fallback, while\n * here an image with no source of its own is the one this element fills in.\n * Give the child a `src`, a `srcset`, or `<source>` candidates and it is yours,\n * left alone.\n *\n * Renders no image of its own, so include one:\n * `<media-poster><img alt=\"\"></media-poster>`. Inside a skin, an\n * `<img slot=\"poster\">` of yours replaces the one the skin carries.\n */\nexport class PosterElement extends MediaElement {\n  static readonly tagName = 'media-poster';\n\n  static get observedAttributes(): string[] {\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return [...super.observedAttributes, 'placeholdersrc'];\n  }\n\n  readonly #core = new PosterCore();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n\n  readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n  readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n  #image: HTMLImageElement | null = null;\n  /** Whether `#image` had no source of its own when it became active. */\n  #owned = false;\n  #imageLoadState: ImageLoadState = 'pending';\n\n  #imageEvents: AbortController | null = null;\n  #disconnect: AbortController | null = null;\n  #warnedMissingImage = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const { signal } = this.#disconnect;\n\n    // Two ways the image can change: a skin's forwarding slot fills or empties,\n    // which bubbles here, or a child is added or removed, which announces nothing.\n    this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n    this.#children.observe(this, { childList: true, subtree: true });\n\n    if (__DEV__ && !this.#playback.value) {\n      logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n    }\n  }\n\n  override attributeChangedCallback(attr: string, oldValue: string | null, newValue: string | null): void {\n    super.attributeChangedCallback(attr, oldValue, newValue);\n\n    if (attr === 'placeholdersrc') {\n      if (newValue) {\n        this.style.setProperty('--media-poster-placeholder', `url(${newValue})`);\n      } else {\n        this.style.removeProperty('--media-poster-placeholder');\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  get #loadState(): PosterImageLoadState {\n    if (!this.#image || !hasSource(this.#image)) return 'none';\n    return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const playback = this.#playback.value;\n    if (!playback) return;\n\n    // `metadata` is optional: without it nothing resolves a URL, and this stays\n    // a visibility wrapper around whatever the author supplied.\n    this.#core.setMedia({\n      started: playback.started,\n      poster: this.#metadata.value?.poster ?? '',\n    });\n\n    const { src } = this.#core.getState();\n\n    this.#adopt(findImage(this));\n    this.#applySource(src);\n\n    this.#core.setImageLoadState(this.#loadState);\n    applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n  }\n\n  /**\n   * Ownership is settled once, when an image becomes active: after the first fill\n   * the `src` we set would itself look authored. Re-slot an image with a source\n   * to hand it back, the way React decides a field is controlled at mount.\n   */\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#image) return;\n\n    // An image that steps aside keeps downloading whatever we pointed it at.\n    if (this.#owned) this.#image?.removeAttribute('src');\n    this.#imageEvents?.abort();\n    this.#imageEvents = null;\n\n    this.#image = next;\n    this.#owned = next !== null && !hasSource(next);\n    this.#imageLoadState = 'pending';\n\n    if (!next) return;\n\n    // An image that finished before we started listening never fires again, so\n    // its load state has to be read off it. Decoded pixels stand on their own;\n    // the absence of them only means failure once `complete` can be trusted.\n    if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n    else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n    this.#imageEvents = new AbortController();\n    const { signal } = this.#imageEvents;\n    const settle = (loadState: ImageLoadState) => () => {\n      this.#imageLoadState = loadState;\n      this.requestUpdate();\n    };\n\n    next.addEventListener('load', settle('loaded'), { signal });\n    next.addEventListener('error', settle('error'), { signal });\n  }\n\n  #applySource(src: string): void {\n    const img = this.#image;\n\n    if (!img) {\n      if (__DEV__ && src && !this.#warnedMissingImage) {\n        this.#warnedMissingImage = true;\n        console.warn(\n          `<${this.localName}> resolved a poster but has no image to put it in. ` +\n            `Add one as a child: <${this.localName}><img alt=\"\"></${this.localName}>`\n        );\n      }\n      return;\n    }\n\n    if (!this.#owned) return;\n\n    if (!src) {\n      this.#imageLoadState = 'pending';\n      img.removeAttribute('src');\n    } else if (img.getAttribute('src') !== src) {\n      // Reset before the write, not after: how the last source fared says\n      // nothing about this one, and the write itself can settle it.\n      this.#imageLoadState = 'pending';\n      img.setAttribute('src', src);\n    }\n  }\n}\n"],"mappings":";;;;;;;AASA,SAAS,iBAAiB,SAA6B;CACrD,IAAI,mBAAmB,iBAAiB;EACtC,MAAM,WAAW,QAAQ,iBAAiB;EAC1C,IAAI,SAAS,SAAS,GAAG,OAAO;CAClC;CAEA,OAAO,CAAC,GAAG,QAAQ,QAAQ;AAC7B;;;;;;AAOA,SAAS,UAAU,SAA2C;CAC5D,KAAK,MAAM,SAAS,iBAAiB,OAAO,GAAG;EAC7C,IAAI,iBAAiB,kBAAkB,OAAO;EAE9C,MAAM,SAAS,UAAU,KAAK;EAC9B,IAAI,QAAQ,OAAO;CACrB;CAEA,OAAO;AACT;;;;;;AAOA,SAAS,UAAU,KAAgC;CACjD,IAAI,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,GAAG,OAAO;CAElE,MAAM,SAAS,IAAI;CACnB,OAAO,QAAQ,cAAc,aAAa,OAAO,cAAc,QAAQ,MAAM;AAC/E;;;;;;AAOA,SAAS,aAAa,KAAgC;CACpD,OAAO,CAAC,CAAC,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ;AAC/D;;;;;;;;;;;;;;AAkBA,IAAa,gBAAb,cAAmC,aAAa;;EACpB,KAAA,UAAA;;CAE1B,WAAW,qBAA+B;EAExC,OAAO,CAAC,GAAG,MAAM,oBAAoB,gBAAgB;CACvD;CAEA,QAAiB,IAAI,WAAW;CAChC,YAAqB,IAAI,uBAAuB,KAAK,cAAc,CAAC;CAEpE,YAAqB,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAC7E,YAAqB,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAE7E,SAAkC;;CAElC,SAAS;CACT,kBAAkC;CAElC,eAAuC;CACvC,cAAsC;CACtC,sBAAsB;CAEtB,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,IAAI,KAAK,WAAW;EAEpB,KAAKI,cAAc,IAAI,gBAAgB;EACvC,MAAM,EAAE,WAAW,KAAKA;EAIxB,KAAK,iBAAiB,oBAAoB,KAAK,cAAc,GAAG,EAAE,OAAO,CAAC;EAC1E,KAAKH,UAAU,QAAQ,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;CAKjE;CAEA,yBAAkC,MAAc,UAAyB,UAA+B;EACtG,MAAM,yBAAyB,MAAM,UAAU,QAAQ;EAEvD,IAAI,SAAS,kBACX,IAAI,UACF,KAAK,MAAM,YAAY,8BAA8B,OAAO,SAAS,EAAE;OAEvE,KAAK,MAAM,eAAe,4BAA4B;CAG5D;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAE3B,KAAKI,OAAO,IAAI;EAChB,KAAKJ,UAAU,WAAW;EAC1B,KAAKG,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,IAAIE,aAAmC;EACrC,IAAI,CAAC,KAAKC,UAAU,CAAC,UAAU,KAAKA,MAAM,GAAG,OAAO;EACpD,OAAO,KAAKC,oBAAoB,YAAY,YAAY,KAAKA;CAC/D;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,WAAW,KAAKN,UAAU;EAChC,IAAI,CAAC,UAAU;EAIf,KAAKF,MAAM,SAAS;GAClB,SAAS,SAAS;GAClB,QAAQ,KAAKG,UAAU,OAAO,UAAU;EAC1C,CAAC;EAED,MAAM,EAAE,QAAQ,KAAKH,MAAM,SAAS;EAEpC,KAAKK,OAAO,UAAU,IAAI,CAAC;EAC3B,KAAKI,aAAa,GAAG;EAErB,KAAKT,MAAM,kBAAkB,KAAKM,UAAU;EAC5C,oBAAoB,MAAM,KAAKN,MAAM,SAAS,GAAG,eAAe;CAClE;;;;;;CAOA,OAAO,MAAqC;EAC1C,IAAI,SAAS,KAAKO,QAAQ;EAG1B,IAAI,KAAKG,QAAQ,KAAKH,QAAQ,gBAAgB,KAAK;EACnD,KAAKI,cAAc,MAAM;EACzB,KAAKA,eAAe;EAEpB,KAAKJ,SAAS;EACd,KAAKG,SAAS,SAAS,QAAQ,CAAC,UAAU,IAAI;EAC9C,KAAKF,kBAAkB;EAEvB,IAAI,CAAC,MAAM;EAKX,IAAI,KAAK,eAAe,GAAG,KAAKA,kBAAkB;OAC7C,IAAI,KAAK,YAAY,aAAa,IAAI,GAAG,KAAKA,kBAAkB;EAErE,KAAKG,eAAe,IAAI,gBAAgB;EACxC,MAAM,EAAE,WAAW,KAAKA;EACxB,MAAM,UAAU,oBAAoC;GAClD,KAAKH,kBAAkB;GACvB,KAAK,cAAc;EACrB;EAEA,KAAK,iBAAiB,QAAQ,OAAO,QAAQ,GAAG,EAAE,OAAO,CAAC;EAC1D,KAAK,iBAAiB,SAAS,OAAO,OAAO,GAAG,EAAE,OAAO,CAAC;CAC5D;CAEA,aAAa,KAAmB;EAC9B,MAAM,MAAM,KAAKD;EAEjB,IAAI,CAAC,KAQH;EAGF,IAAI,CAAC,KAAKG,QAAQ;EAElB,IAAI,CAAC,KAAK;GACR,KAAKF,kBAAkB;GACvB,IAAI,gBAAgB,KAAK;EAC3B,OAAO,IAAI,IAAI,aAAa,KAAK,MAAM,KAAK;GAG1C,KAAKA,kBAAkB;GACvB,IAAI,aAAa,OAAO,GAAG;EAC7B;CACF;AACF"}

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

@@ -58,7 +58,7 @@ var QualityRadioGroupElement = class extends MenuRadioGroupElement {
 			state = this.#core.getState();
 			this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));
 			this.#options.sync(state, this.#i18n.value, this.#i18n.locale);
-			this.publishMenuMetadata(state.disabled, state.availability);
+			this.publishMenuTriggerState(state.disabled, state.availability);
 		}
 		super.update(changed);
 		if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);

package/dist/default/ui/quality-radio-group/quality-radio-group-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"quality-radio-group-element.js","names":["#setContent","#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group-element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MenuRadioGroupElement } from '../menu/menu-radio-group-element';\nimport type { MenuRadioItemElement } from '../menu/menu-radio-item-element';\nimport { RadioOptionsController } from '../radio-options/radio-options-controller';\n\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-quality-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n  readonly #core = new QualityRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n  readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n    setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n    getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: QualityRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuMetadata(state.disabled, state.availability);\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, tier: string | undefined, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (tierPart) {\n      tierPart.textContent = tier ?? '';\n      tierPart.hidden = !tier;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !tierPart && !badgePart) {\n      item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace QualityRadioGroupElement {\n  export type State = QualityRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAKA,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKC,YAAY;IAC/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAvBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAUA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,IAAI,KAAK,WAAW;CAKtB;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKD,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,oBAAoB,MAAM,UAAU,MAAM,YAAY;EAC7D;EAEA,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}
+{"version":3,"file":"quality-radio-group-element.js","names":["#setContent","#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group-element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MenuRadioGroupElement } from '../menu/menu-radio-group-element';\nimport type { MenuRadioItemElement } from '../menu/menu-radio-item-element';\nimport { RadioOptionsController } from '../radio-options/radio-options-controller';\n\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-quality-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n  readonly #core = new QualityRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n  readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n    setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n    getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: QualityRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuTriggerState(state.disabled, state.availability);\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, tier: string | undefined, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (tierPart) {\n      tierPart.textContent = tier ?? '';\n      tierPart.hidden = !tier;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !tierPart && !badgePart) {\n      item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace QualityRadioGroupElement {\n  export type State = QualityRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAKA,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKC,YAAY;IAC/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAvBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAUA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,IAAI,KAAK,WAAW;CAKtB;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKD,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,wBAAwB,MAAM,UAAU,MAAM,YAAY;EACjE;EAEA,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}

package/dist/default/ui/slider/slider-preview-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-preview-element.js","names":["#ctx","#stopObservingResize","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles, observeResize } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends MediaElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: SliderPreviewOverflow = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #stopObservingResize: (() => void) | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#stopObservingResize = observeResize(this, ([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#stopObservingResize?.();\n    this.#stopObservingResize = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,uBAAb,cAA0C,aAAa;;;EAOnB,KAAA,WAAA;EAElB,KAAA,OAAA,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;EACb,CAAC;EAE2C,KAAA,uBAAA;EACnC,KAAA,SAAA;;;EAdiB,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,UAAU,EAAE,MAAM,OAAO,EAC3B;;CAIA;CAKA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,KAAKC,uBAAuB,cAAc,OAAO,CAAC,WAAW;GAC3D,KAAKC,SAAS,MAAO,YAAY;GACjC,KAAKC,eAAe;EACtB,CAAC;CACH;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKF,uBAAuB;EAC5B,KAAKA,uBAAuB;CAC9B;CAEA,iBAAuB;EACrB,YAAY,MAAM,sBAAsB,KAAKC,QAAQ,KAAK,QAAQ,CAAC;CACrE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKF,KAAK;EACtB,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;EAE9D,KAAKG,eAAe;CACtB;AACF"}
+{"version":3,"file":"slider-preview-element.js","names":["#ctx","#stopObservingResize","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewProps } from '@videojs/core';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles, observeResize } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends MediaElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: NonNullable<SliderPreviewProps['overflow']> = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #stopObservingResize: (() => void) | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#stopObservingResize = observeResize(this, ([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#stopObservingResize?.();\n    this.#stopObservingResize = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,uBAAb,cAA0C,aAAa;;;EAOG,KAAA,WAAA;EAExC,KAAA,OAAA,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;EACb,CAAC;EAE2C,KAAA,uBAAA;EACnC,KAAA,SAAA;;;EAdiB,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,UAAU,EAAE,MAAM,OAAO,EAC3B;;CAIA;CAKA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,KAAKC,uBAAuB,cAAc,OAAO,CAAC,WAAW;GAC3D,KAAKC,SAAS,MAAO,YAAY;GACjC,KAAKC,eAAe;EACtB,CAAC;CACH;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKF,uBAAuB;EAC5B,KAAKA,uBAAuB;CAC9B;CAEA,iBAAuB;EACrB,YAAY,MAAM,sBAAsB,KAAKC,QAAQ,KAAK,QAAQ,CAAC;CACrE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKF,KAAK;EACtB,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;EAE9D,KAAKG,eAAe;CACtB;AACF"}

package/dist/dev/__generated__/skins/default-video/styles/buttons.css

@@ -1,47 +1,145 @@
 @layer videojs.components {
   @scope (.media-skin-video) {
+    .media-airplay-button:not([data-airplay-state='connected']) {
+      --media-icon-airplay-fill-animation: none;
+      --media-icon-airplay-triangle-animation: none;
+    }
+
+    .media-airplay-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-airplay-button) {
+      &:not([data-airplay-state='connected']) .media-airplay-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-airplay-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-airplay-button) {
+      &[data-airplay-state='connected'] .media-airplay-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
     .media-button {
-      width: var(--media-control-size);
-      height: var(--media-control-size);
+      width: calc(var(--media-spacing) * 9);
+      height: calc(var(--media-spacing) * 9);
+      min-height: calc(var(--media-spacing) * 0);
       cursor: pointer;
-      border-radius: var(--media-radius-pill);
+      touch-action: manipulation;
+      border-radius: var(--media-control-radius);
+      padding: calc(var(--media-spacing) * 0);
+      text-align: center;
       color: inherit;
       outline-offset: -2px;
+      -webkit-user-select: none;
+      user-select: none;
       background-color: #0000;
       border-style: solid;
       border-width: 0;
       outline: 2px solid #0000;
       flex-shrink: 0;
       place-items: center;
-      padding: 0;
+      transition-property: background-color, color, outline-offset, scale;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
       display: grid;
     }
 
     @media (hover: hover) {
       .media-button:hover {
-        background-color: var(--media-control-hover-background);
+        background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
+        color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
       }
     }
 
     .media-button:focus-visible {
-      background-color: var(--media-control-hover-background);
+      background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
+      color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
       outline-offset: 2px;
       outline-color: currentColor;
     }
 
+    .media-button:not([aria-disabled='true']):active {
+      scale: 0.9;
+    }
+
     .media-button[aria-disabled='true'] {
       cursor: not-allowed;
       opacity: 0.5;
     }
 
     .media-button[aria-expanded='true'] {
-      background-color: var(--media-control-hover-background);
+      background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
+      color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .media-button {
+        transition-duration: 50ms;
+      }
     }
 
     .media-button-icon {
-      width: var(--media-icon-size);
-      height: var(--media-icon-size);
-      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+      width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+      height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+      filter: drop-shadow(0 1px #00000026);
+    }
+
+    .media-captions-off-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-captions-button) {
+      &:not([data-active]) .media-captions-off-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-captions-on-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-captions-button) {
+      &[data-active] .media-captions-on-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-cast-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-cast-button) {
+      &:not([data-cast-state='connected']) .media-cast-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-cast-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-cast-button) {
+      &[data-cast-state='connected'] .media-cast-exit-icon {
+        opacity: 1;
+        display: block;
+      }
     }
 
     .media-fullscreen-enter-icon {
@@ -80,6 +178,30 @@
       }
     }
 
+    .media-pip-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-pip-button) {
+      &:not([data-pip]) .media-pip-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pip-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-pip-button) {
+      &[data-pip] .media-pip-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
     .media-play-icon {
       opacity: 0;
       display: none;
@@ -105,14 +227,6 @@
       }
     }
 
-    .media-seek-backward-icon {
-      scale: -1 1;
-    }
-
-    .media-seek-button-label {
-      font-variant-numeric: tabular-nums;
-    }
-
     .media-volume-high-icon {
       opacity: 0;
       display: none;

package/dist/dev/__generated__/skins/default-video/styles/captions.css

@@ -0,0 +1,22 @@
+@layer videojs.components {
+  @scope (.media-skin) {
+    video::-webkit-media-text-track-container {
+      translate: 0 calc(var(--media-spacing) * -2);
+      transition: translate var(--media-controls-transition-duration) ease-out 25ms;
+    }
+
+    :scope.media-theme-default:has([data-controls][data-visible]) video::-webkit-media-text-track-container {
+      translate: 0 calc(var(--media-spacing) * -14);
+    }
+
+    :scope.media-theme-minimal:has([data-controls][data-visible]) video::-webkit-media-text-track-container {
+      translate: 0 calc(var(--media-spacing) * -18);
+    }
+
+    @container media-root (width > 42rem) {
+      :scope.media-theme-minimal:has([data-controls][data-visible]) video::-webkit-media-text-track-container {
+        translate: 0 calc(var(--media-spacing) * -12);
+      }
+    }
+  }
+}

package/dist/dev/__generated__/skins/default-video/styles/container.css

@@ -1,19 +1,40 @@
 @layer videojs.components {
   @scope (.media-skin-video) {
-    .media-container {
+    .media-container,
+    :scope.media-container {
       isolation: isolate;
-      border-radius: var(--media-radius-surface);
-      background-color: #000;
+      border-radius: var(--media-video-border-radius);
       width: 100%;
       height: 100%;
+      font-family:
+        ui-sans-serif,
+        system-ui,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji,
+        Segoe UI Symbol,
+        Noto Color Emoji;
+      font-size: calc(var(--media-spacing) * 3.25);
+      -webkit-font-smoothing: auto;
+      -moz-osx-font-smoothing: auto;
+      outline-offset: -4px;
+      --spacing: var(--media-spacing);
+      background-color: #000;
+      outline: 2px solid #0000;
+      line-height: 1.5;
+      transition-property: outline-offset, outline-color;
+      transition-duration: 0.1s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
       display: block;
       position: relative;
       overflow: hidden;
-      container: media-container / inline-size;
+      container: media-root / inline-size;
     }
 
-    .media-container:before {
+    .media-container:before,
+    :scope.media-container:before {
       pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
       background-image: var(--media-poster-placeholder, none);
       background-size: var(--media-object-fit, contain);
       background-position: var(--media-object-position, center);
@@ -25,15 +46,70 @@
       transition-duration: 0.25s;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       position: absolute;
-      inset: 0;
     }
 
-    .media-container:has(:is(img[data-visible]:not([data-loaded]))):before {
+    .media-container:after,
+    :scope.media-container:after {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      z-index: 10;
+      border-radius: inherit;
+      content: '';
+      position: absolute;
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        inset 0 0 0 1px light-dark(#0000001a, #ffffff26);
+    }
+
+    .media-container:focus-visible,
+    :scope.media-container:focus-visible {
+      outline-offset: 2px;
+      outline-color: #fff;
+    }
+
+    .media-container:has(:is(img[data-visible]:not([data-loaded]))):before,
+    :scope.media-container:has(:is(img[data-visible]:not([data-loaded]))):before {
       content: '';
       opacity: 1;
     }
 
-    .media-container video {
+    @media (prefers-reduced-motion: reduce) {
+      .media-container,
+      :scope.media-container {
+        transition-duration: 50ms;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .media-container:after,
+      :scope.media-container:after {
+        content: '';
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          inset 0 0 0 1px canvastext;
+      }
+
+      .media-container:focus-visible,
+      :scope.media-container:focus-visible {
+        outline-color: canvastext;
+      }
+    }
+
+    @media (pointer: fine) {
+      .media-container:has([data-controls]:not([data-visible])),
+      :scope.media-container:has([data-controls]:not([data-visible])) {
+        cursor: none;
+      }
+    }
+
+    .media-container video,
+    :scope.media-container video {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -41,5 +117,42 @@
       height: 100%;
       display: block;
     }
+
+    .media-container:fullscreen,
+    :scope.media-container:fullscreen {
+      --media-video-border-radius: 0;
+    }
+
+    .media-container:fullscreen:after,
+    :scope.media-container:fullscreen:after {
+      content: '';
+      display: none;
+    }
+
+    @media (width >= 1280px) {
+      .media-container:fullscreen,
+      :scope.media-container:fullscreen {
+        --media-scale: 1.25;
+      }
+    }
+
+    @media (width >= 1536px) {
+      .media-container:fullscreen,
+      :scope.media-container:fullscreen {
+        --media-scale: 1.5;
+      }
+    }
+
+    @media (width >= 1920px) {
+      .media-container:fullscreen,
+      :scope.media-container:fullscreen {
+        --media-scale: 1.75;
+      }
+    }
+
+    .media-container:fullscreen video,
+    :scope.media-container:fullscreen video {
+      object-fit: contain;
+    }
   }
 }