@videojs/html 10.0.0-beta.1 → 10.0.0-beta.3

package/dist/default/define/audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--audio\">\n      <slot name=\"media\"></slot>\n\n      <div class=\"media-surface media-controls\">\n        <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n          ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-play-button>\n        <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n          <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n          <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Seek backward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Seek forward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-time-group class=\"media-time\">\n          <media-time type=\"current\" class=\"media-time__value\"></media-time>\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n          <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n        </media-time-group>\n\n        <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n        </media-mute-button>\n\n        <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n          <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;YAMN,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;YACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;YAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;yEAQF,CAAC,UAAU;;cAEtE,WAAW,QAAQ,EAAE,OAAO,mDAAmD,CAAC,CAAC;8CACjD,UAAU;;;;0BAI9B,UAAU;;;wEAGoC,UAAU;;cAEpE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;8CAC7B,UAAU;;;;yBAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;YAqBvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;YACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;YACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;;;AAgBvF,IAAa,mBAAb,cAAsC,UAAU,gBAAgB,CAAC;;iBACrC;;;gBACV,aAAaA,aAAO;;;yBACX;;;AAG3B,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--audio\">\n      <slot name=\"media\"></slot>\n\n      <div class=\"media-surface media-controls\">\n        <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n          ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-play-button>\n        <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n          <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n          <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Seek backward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n          <span class=\"media-icon__container\">\n            ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n            <span class=\"media-icon__label\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Seek forward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-time-group class=\"media-time\">\n          <media-time type=\"current\" class=\"media-time__value\"></media-time>\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n          <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n        </media-time-group>\n\n        <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n        </media-mute-button>\n\n        <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n          <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,sPAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,w7BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;;;iBAIM;;;gBACT,aAAY,aAAW;;;yBACd;;;AAGxB,eAAe,OAAM,iBAAM,SAAA,iBAAA"}

package/dist/default/define/audio/skin.tailwind.js

@@ -23,78 +23,7 @@ import { cn } from "@videojs/utils/style";
 //#region src/define/audio/skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `
-    <media-container class="${root}">
-      <slot name="media"></slot>
-
-      <div class="${controls}">
-        <span class="${tooltipState.play.wrapper}">
-          <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
-            ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })}
-            ${renderIcon("play", { class: cn(icon, iconState.play.play) })}
-            ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.play.replay}">Replay</span>
-            <span class="${tooltipState.play.play}">Play</span>
-            <span class="${tooltipState.play.pause}">Pause</span>
-          </media-tooltip>
-        </span>
-
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon("seek", { class: cn(icon, iconFlipped) })}
-            <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon("seek", { class: icon })}
-            <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-time-group class="${time.group}">
-          <media-time type="current" class="${time.current}"></media-time>
-          <media-time-slider class="${slider.root}">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-              <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="${time.duration}"></media-time>
-        </media-time-group>
-
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Toggle playback rate
-        </media-tooltip>
-
-        <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
-          ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })}
-          ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })}
-          ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })}
-        </media-mute-button>
-
-        <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
-          <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
-      </div>
-    </media-container>
-  `;
+	return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"><media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"><media-slider-track class="${slider.track}"><media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover></div></media-container>`;
 }
 var AudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

package/dist/default/define/audio/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root}\">\n      <slot name=\"media\"></slot>\n\n      <div class=\"${controls}\">\n        <span class=\"${tooltipState.play.wrapper}\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n            ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n            ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n            ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.play.replay}\">Replay</span>\n            <span class=\"${tooltipState.play.play}\">Play</span>\n            <span class=\"${tooltipState.play.pause}\">Pause</span>\n          </media-tooltip>\n        </span>\n\n        <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n          <span class=\"${iconContainer}\">\n            ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n            <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Seek backward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n          <span class=\"${iconContainer}\">\n            ${renderIcon('seek', { class: icon })}\n            <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Seek forward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-time-group class=\"${time.group}\">\n          <media-time type=\"current\" class=\"${time.current}\"></media-time>\n          <media-time-slider class=\"${slider.root}\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n          </media-time-slider>\n          <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n        </media-time-group>\n\n        <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"audio-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n          ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n          ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n          ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n        </media-mute-button>\n\n        <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n          <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;8BACY,KAAK;;;oBAGf,SAAS;uBACN,aAAa,KAAK,QAAQ;gEACe,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;cACtG,WAAW,WAAW,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,QAAQ,EAAE,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,EAAE,CAAC,CAAC;;+DAEd,GAAG,MAAM,QAAQ,CAAC;2BACtD,aAAa,KAAK,OAAO;2BACzB,aAAa,KAAK,KAAK;2BACvB,aAAa,KAAK,MAAM;;;;yEAIsB,CAAC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,CAAC;yBAChH,cAAc;cACzB,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,YAAY,EAAE,CAAC,CAAC;2BACxC,GAAG,KAAK,OAAO,KAAK,cAAc,CAAC,IAAI,UAAU;;;sEAGN,GAAG,MAAM,QAAQ,CAAC;0BAC9D,UAAU;;;wEAGoC,UAAU,WAAW,GAAG,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,CAAC;yBAC9G,cAAc;cACzB,WAAW,QAAQ,EAAE,OAAO,MAAM,CAAC,CAAC;2BACvB,GAAG,KAAK,OAAO,KAAK,aAAa,CAAC,IAAI,UAAU;;;qEAGN,GAAG,MAAM,QAAQ,CAAC;yBAC9D,UAAU;;;mCAGA,KAAK,MAAM;8CACA,KAAK,QAAQ;sCACrB,OAAO,KAAK;yCACT,OAAO,MAAM;0CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;4CACrC,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,OAAO,CAAC;;yCAE5C,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,CAAC;;+CAE1C,KAAK,SAAS;;;iFAGoB,GAAG,OAAO,MAAM,OAAO,MAAM,aAAa,OAAO,CAAC;sEAC7D,GAAG,MAAM,QAAQ,CAAC;;;;sEAIlB,GAAG,OAAO,MAAM,OAAO,MAAM,UAAU,KAAK,OAAO,CAAC;YAC9G,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;YACxE,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;YACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,WAAW,EAAE,CAAC,CAAC;;;iHAG2B,GAAG,MAAM,SAAS,MAAM,OAAO,CAAC;wCACzG,OAAO,KAAK;yCACX,OAAO,MAAM;0CACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC;;yCAExC,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,WAAW,CAAC;;;;;;;AAQxF,IAAa,2BAAb,cAA8C,UAAU,gBAAgB,CAAC;;iBAC7C;;;yBACD;;;AAG3B,eAAe,OAAO,yBAAyB,SAAS,yBAAyB"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root}\">\n      <slot name=\"media\"></slot>\n\n      <div class=\"${controls}\">\n        <span class=\"${tooltipState.play.wrapper}\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n            ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n            ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n            ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.play.replay}\">Replay</span>\n            <span class=\"${tooltipState.play.play}\">Play</span>\n            <span class=\"${tooltipState.play.pause}\">Pause</span>\n          </media-tooltip>\n        </span>\n\n        <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n          <span class=\"${iconContainer}\">\n            ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n            <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Seek backward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n          <span class=\"${iconContainer}\">\n            ${renderIcon('seek', { class: icon })}\n            <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n          </span>\n        </media-seek-button>\n        <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Seek forward ${SEEK_TIME} seconds\n        </media-tooltip>\n\n        <media-time-group class=\"${time.group}\">\n          <media-time type=\"current\" class=\"${time.current}\"></media-time>\n          <media-time-slider class=\"${slider.root}\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n          </media-time-slider>\n          <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n        </media-time-group>\n\n        <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n        <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n          Toggle playback rate\n        </media-tooltip>\n\n        <media-mute-button commandfor=\"audio-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n          ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n          ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n          ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n        </media-mute-button>\n\n        <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n          <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,0CAAA,SAAA,iBAAA,aAAA,KAAA,QAAA,wDAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,iBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,iBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,iBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,oDAAA,KAAA,MAAA,sCAAA,KAAA,QAAA,2CAAA,OAAA,KAAA,+BAAA,OAAA,MAAA,8BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,gFAAA,KAAA,SAAA,0GAAA,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,OAAA,CAAA,gCAAA,OAAA,KAAA,6EAAA,OAAA,MAAA,8BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,CAAA;;;;iBAIU;;;yBACL;;;AAGvB,eAAc,OAAA,yBAA+B,SAAM,yBAAuB"}

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

@@ -4,11 +4,7 @@ import { namedNodeMapToObject } from "@videojs/utils/dom";
 
 //#region src/define/background/skin.ts
 function getTemplateHTML(_attrs) {
-	return `
-    <media-container>
-      <slot name="media" slot="media"></slot>
-    </media-container>
-  `;
+	return `<media-container><slot name="media" slot="media"></slot></media-container>`;
 }
 var BackgroundVideoSkinElement = class extends ReactiveElement {
 	static {

package/dist/default/define/background/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;AAIA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;;;;;AAOlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpC;;CAEzB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAY,gBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,WAAW,2BAA2B"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n  return /*html*/ `\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n    }\n  }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;AAIA,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;AAGlB,IAAY,6BAAZ,cAAqB,gBAAA;;iBAClB;;;2BACH,EAAA,MAAA,QAAA;;;;;CAGE,cAAO;AACP,SAAO;;AAGP,QAAA,aAAc,KAAA,YAAA,kBAAA;AACZ,QAAO,WAAA,YAAA,gBAAA,qBAAA,KAAA,WAAA,CAAA;;;;AAKX,WAAI,2BAAA"}

package/dist/default/define/base.css

@@ -0,0 +1,25 @@
+video-player {
+  display: contents;
+}
+
+video-player video,
+video-player hls-video,
+video-player simple-hls-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+video-player video::-webkit-media-text-track-container {
+  transition: transform var(--media-caption-track-duration, 150ms) ease-out;
+  transition-delay: var(--media-caption-track-delay, 600ms);
+  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
+  z-index: var(--media-caption-track-z, 1);
+  font-family: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  video-player video::-webkit-media-text-track-container {
+    transition-duration: 50ms;
+  }
+}

package/dist/default/define/skin-mixin.js

@@ -1,33 +1,12 @@
-//#region src/define/skin-mixin.ts
-/**
-* Light DOM stylesheet that bridges CSS custom properties set by skins
-* to native WebKit text track pseudo-elements on the slotted `<video>`.
-*
-* `::slotted(video)::-webkit-media-text-track-container` is invalid per
-* CSS spec, so this bridge lives in light DOM where it can directly
-* target the video element's pseudo-elements.
-*/
-const NATIVE_CAPTION_BRIDGE_CSS = `
-.media-skin > video::-webkit-media-text-track-container {
-  transition: transform var(--media-caption-track-duration, 150ms) ease-out;
-  transition-delay: var(--media-caption-track-delay, 600ms);
-  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
-  z-index: var(--media-caption-track-z, 1);
-  font-family: inherit;
-}
+import base_default from "../_virtual/inline-css_src/define/base.js";
 
-@media (prefers-reduced-motion: reduce) {
-  .media-skin > video::-webkit-media-text-track-container {
-    transition-duration: 50ms;
-  }
-}
-`;
-const BRIDGE_ID = "media-caption-bridge";
-function ensureCaptionBridge() {
-	if (document.getElementById(BRIDGE_ID)) return;
+//#region src/define/skin-mixin.ts
+const STYLES_ID = "__media-styles";
+function ensureStyles() {
+	if (document.getElementById(STYLES_ID)) return;
 	const style = document.createElement("style");
-	style.id = BRIDGE_ID;
-	style.textContent = NATIVE_CAPTION_BRIDGE_CSS;
+	style.id = STYLES_ID;
+	style.textContent = base_default;
 	document.head.appendChild(style);
 }
 /**
@@ -35,8 +14,8 @@ function ensureCaptionBridge() {
 * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
 * handle light DOM projection automatically.
 *
-* When `static styles` is set, the stylesheet is adopted into the shadow
-* root via `adoptedStyleSheets`.
+* When `static styles` is set, the stylesheet is adopted into the
+* shadow root via `adoptedStyleSheets`.
 */
 function SkinMixin(BaseClass) {
 	class SkinElement extends BaseClass {
@@ -45,8 +24,7 @@ function SkinMixin(BaseClass) {
 		}
 		constructor(...args) {
 			super(...args);
-			this.classList.add("media-skin");
-			ensureCaptionBridge();
+			ensureStyles();
 			if (!this.shadowRoot) {
 				const ctor = this.constructor;
 				this.attachShadow(ctor.shadowRootOptions);

package/dist/default/define/skin-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin-mixin.js","names":[],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/**\n * Light DOM stylesheet that bridges CSS custom properties set by skins\n * to native WebKit text track pseudo-elements on the slotted `<video>`.\n *\n * `::slotted(video)::-webkit-media-text-track-container` is invalid per\n * CSS spec, so this bridge lives in light DOM where it can directly\n * target the video element's pseudo-elements.\n */\nconst NATIVE_CAPTION_BRIDGE_CSS = /* css */ `\n.media-skin > video::-webkit-media-text-track-container {\n  transition: transform var(--media-caption-track-duration, 150ms) ease-out;\n  transition-delay: var(--media-caption-track-delay, 600ms);\n  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);\n  z-index: var(--media-caption-track-z, 1);\n  font-family: inherit;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .media-skin > video::-webkit-media-text-track-container {\n    transition-duration: 50ms;\n  }\n}\n`;\n\nconst BRIDGE_ID = 'media-caption-bridge';\n\nfunction ensureCaptionBridge(): void {\n  if (document.getElementById(BRIDGE_ID)) return;\n  const style = document.createElement('style');\n  style.id = BRIDGE_ID;\n  style.textContent = NATIVE_CAPTION_BRIDGE_CSS;\n  document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the shadow\n * root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n  BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n    static styles?: CSSStyleSheet;\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      this.classList.add('media-skin');\n      ensureCaptionBridge();\n\n      if (!this.shadowRoot) {\n        const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n        this.attachShadow(ctor.shadowRootOptions);\n\n        if (ctor.styles) {\n          this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n        }\n\n        if (ctor.getTemplateHTML) {\n          this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n        }\n      }\n    }\n  }\n\n  return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(css);\n  return sheet;\n}\n"],"mappings":";;;;;;;;;AAWA,MAAM,4BAAsC;;;;;;;;;;;;;;;AAgB5C,MAAM,YAAY;AAElB,SAAS,sBAA4B;AACnC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;;;;;;;;;AAWlC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,QAAK,UAAU,IAAI,aAAa;AAChC,wBAAqB;AAErB,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;AAEzC,QAAI,KAAK,OACP,MAAK,WAAY,qBAAqB,CAAC,KAAK,OAAO;AAGrD,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}
+{"version":3,"file":"skin-mixin.js","names":["styles"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport styles from './base.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ensureStyles(): void {\n  if (document.getElementById(STYLES_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLES_ID;\n  style.textContent = styles;\n  document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n  BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n    static styles?: CSSStyleSheet;\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      ensureStyles();\n\n      if (!this.shadowRoot) {\n        const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n        this.attachShadow(ctor.shadowRootOptions);\n\n        if (ctor.styles) {\n          this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n        }\n\n        if (ctor.getTemplateHTML) {\n          this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n        }\n      }\n    }\n  }\n\n  return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(css);\n  return sheet;\n}\n"],"mappings":";;;AAIA,MAAM,YAAY;AAElB,SAAS,eAAqB;AAC5B,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;;;;;;;;;AAWlC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,iBAAc;AAEd,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;AAEzC,QAAI,KAAK,OACP,MAAK,WAAY,qBAAqB,CAAC,KAAK,OAAO;AAGrD,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}

package/dist/default/define/video/minimal-skin.css

@@ -693,62 +693,9 @@
 }
 
 /* ==========================================================================
-   Captions
+   Native Caption Track
    ========================================================================== */
 
-.media-minimal-skin .media-captions {
-  position: absolute;
-  inset: auto 1rem 1.5rem 1rem;
-  z-index: 20;
-  font-size: 1rem;
-  text-wrap: balance;
-  pointer-events: none;
-
-  @container media-root (width > 20rem) {
-    font-size: 1.5rem;
-  }
-
-  @container media-root (width > 48rem) {
-    font-size: 1.875rem;
-  }
-
-  @container media-root (width > 80rem) {
-    font-size: 2.25rem;
-  }
-}
-
-.media-minimal-skin .media-captions__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 42ch;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.media-minimal-skin .media-captions__text {
-  display: block;
-  padding: 0.125rem 0.5rem;
-  color: oklch(1 0 0);
-  text-shadow:
-    0 0 1px oklch(0 0 0 / 0.7),
-    0 0 8px oklch(0 0 0 / 0.7);
-  text-align: center;
-  white-space: pre-wrap;
-  line-height: 1.2;
-
-  @media (prefers-contrast: more) {
-    background: oklch(0 0 0 / 0.7);
-    text-shadow: none;
-    box-decoration-break: clone;
-  }
-
-  & > * {
-    display: inline;
-  }
-}
-
-/* Caption shifting styles (custom and native) */
 .media-minimal-skin {
   --media-caption-track-delay: 600ms;
   --media-caption-track-y: -0.5rem;
@@ -759,26 +706,16 @@
   }
 }
 
-.media-minimal-skin .media-captions,
 .media-minimal-skin video::-webkit-media-text-track-container {
   /* NOTE: The delay must account for the controls delay/duration */
   transition: transform 150ms ease-out;
   transition-delay: var(--media-caption-track-delay);
-}
-
-.media-minimal-skin video::-webkit-media-text-track-container {
   transform: translateY(var(--media-caption-track-y)) scale(0.98);
   z-index: 1;
   font-family: inherit;
 }
 
-/* When controls are visible, shift captions up to avoid overlap */
-.media-minimal-skin .media-controls[data-visible] ~ .media-captions {
-  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .media-minimal-skin .media-captions,
   .media-minimal-skin video::-webkit-media-text-track-container {
     transition-duration: 50ms;
   }

package/dist/default/define/video/minimal-skin.js

@@ -20,127 +20,7 @@ import { ReactiveElement } from "@videojs/element";
 //#region src/define/video/minimal-skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `
-    <media-container class="media-minimal-skin media-minimal-skin--video">
-      <slot name="media"></slot>
-
-      <media-buffering-indicator class="media-buffering-indicator">
-        ${renderIcon("spinner", { class: "media-icon" })}
-      </media-buffering-indicator>
-
-      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="media-error__dialog">
-          <div class="media-error__content">
-            <p id="media-error-title" class="media-error__title">Something went wrong.</p>
-            <p id="media-error-description" class="media-error__description">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="media-error__actions">
-            <button type="button" class="media-button">OK</button>
-          </div>
-        </div>
-      </div>-->
-
-      <media-controls class="media-controls">
-        <span class="media-button-group">
-          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-            ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
-            ${renderIcon("play", { class: "media-icon media-icon--play" })}
-            ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-          </media-tooltip>
-
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
-            Seek backward ${SEEK_TIME} seconds
-          </media-tooltip>
-
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon("seek", { class: "media-icon" })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-        </span>
-
-        <span class="media-time-controls">
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-            <media-time-separator class="media-time__separator"></media-time-separator>
-            <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
-          </media-time-group>
-
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-        </span>
-
-        <span class="media-button-group">
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
-            ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
-            ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
-            ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
-          </media-mute-button>
-
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
-            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-              <media-slider-track class="media-slider__track">
-                <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              </media-slider-track>
-              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
-
-          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-            ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-            ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
-            Toggle captions
-          </media-tooltip>
-
-          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-            ${renderIcon("pip", { class: "media-icon" })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-            <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-          </media-tooltip>
-
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
-            ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
-            ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
-          </media-fullscreen-button>
-          <media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-            <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-          </media-tooltip>
-        </span>
-      </media-controls>
-
-      <div class="media-overlay"></div>
-    </media-container>
-  `;
+	return `<media-container class="media-minimal-skin media-minimal-skin--video"><slot name="media"></slot><media-buffering-indicator class="media-buffering-indicator"> ${renderIcon("spinner", { class: "media-icon" })} </media-buffering-indicator><media-controls class="media-controls"><span class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></span><span class="media-time-controls"><media-time-group class="media-time"><media-time type="current" class="media-time__value media-time__value--current"></media-time><media-time-separator class="media-time__separator"></media-time-separator><media-time type="duration" class="media-time__value media-time__value--duration"></media-time></media-time-group><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider></span><span class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover><media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-tooltip"> Toggle captions </media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon"> ${renderIcon("pip", { class: "media-icon" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-tooltip"><span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span><span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen"> ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip"><span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span><span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span></media-tooltip></span></media-controls><div class="media-overlay"></div></media-container>`;
 }
 var MinimalVideoSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {

package/dist/default/define/video/minimal-skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <!--<div class=\"media-error\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"media-error__dialog\">\n          <div class=\"media-error__content\">\n            <p id=\"media-error-title\" class=\"media-error__title\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"media-error__description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"media-error__actions\">\n            <button type=\"button\" class=\"media-button\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls class=\"media-controls\">\n        <span class=\"media-button-group\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n            ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n            <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n            <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n        </span>\n\n        <span class=\"media-time-controls\">\n          <media-time-group class=\"media-time\">\n            <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n            <media-time-separator class=\"media-time__separator\"></media-time-separator>\n            <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n          </media-time-group>\n\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n        </span>\n\n        <span class=\"media-button-group\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popover media-popover--volume\">\n            <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle captions\n          </media-tooltip>\n\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n            ${renderIcon('pip', { class: 'media-icon' })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n          </media-tooltip>\n\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;cAkB3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;cAO3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;cAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;AAcjG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}
+{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-controls\">\n        <span class=\"media-button-group\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n            ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n            <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n            <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n        </span>\n\n        <span class=\"media-time-controls\">\n          <media-time-group class=\"media-time\">\n            <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n            <media-time-separator class=\"media-time__separator\"></media-time-separator>\n            <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n          </media-time-group>\n\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n        </span>\n\n        <span class=\"media-button-group\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popover media-popover--volume\">\n            <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle captions\n          </media-tooltip>\n\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n            ${renderIcon('pip', { class: 'media-icon' })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n          </media-tooltip>\n\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,iKAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,gNAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,6nCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,koBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,sNAAA,WAAA,OAAA,EAAA,OAAA,cAAA,CAAA,CAAA,gaAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;;;iBAIK;;;gBACb,aAAqB,qBAAG;;;yBACV;;;AAGxB,eAAc,OAAO,wBAAmB,SAAA,wBAAA"}