@videojs/html 10.0.0-alpha.7 → 10.0.0-beta.1

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

@@ -1,22 +1,101 @@
+import { SkinMixin, createStyles } from "../skin-mixin.js";
+import "../media/container.js";
+import "../ui/mute-button.js";
+import "../ui/play-button.js";
+import "../ui/playback-rate-button.js";
+import "../ui/popover.js";
+import "../ui/seek-button.js";
+import "../ui/time.js";
+import "../ui/time-slider.js";
+import "../ui/tooltip.js";
+import "../ui/volume-slider.js";
+import { renderIcon } from "../../icons/dist/render/default/index.js";
+import skin_default from "../../_virtual/inline-css_src/define/audio/skin.js";
 import { ReactiveElement } from "@videojs/element";
 
 //#region src/define/audio/skin.ts
+const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<div></div>`;
+	return `
+    <media-container class="media-default-skin media-default-skin--audio">
+      <slot name="media"></slot>
+
+      <div class="media-surface media-controls">
+        <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-surface 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--seek 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-surface 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 media-icon--seek" })}
+            <span class="media-icon__label">${SEEK_TIME}</span>
+          </span>
+        </media-seek-button>
+        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+          Seek forward ${SEEK_TIME} seconds
+        </media-tooltip>
+
+        <media-time-group class="media-time">
+          <media-time type="current" class="media-time__value"></media-time>
+          <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>
+          <media-time type="duration" class="media-time__value"></media-time>
+        </media-time-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-surface media-tooltip">
+          Toggle playback rate
+        </media-tooltip>
+
+        <media-mute-button commandfor="audio-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="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface 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>
+      </div>
+    </media-container>
+  `;
 }
-var AudioSkinElement = class extends ReactiveElement {
+var AudioSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {
 		this.tagName = "audio-skin";
 	}
 	static {
-		this.getTemplateHTML = getTemplateHTML;
+		this.styles = createStyles(skin_default);
 	}
-	constructor() {
-		super();
-		const children = [...this.childNodes];
-		this.innerHTML = getTemplateHTML();
-		const container = this.firstElementChild;
-		if (container) for (const child of children) container.append(child);
+	static {
+		this.getTemplateHTML = getTemplateHTML;
 	}
 };
 customElements.define(AudioSkinElement.tagName, AudioSkinElement);

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\n\nfunction getTemplateHTML() {\n  return /*html*/ `<div></div>`;\n}\n\nexport class AudioSkinElement extends ReactiveElement {\n  static readonly tagName = 'audio-skin';\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n    const children = [...this.childNodes];\n    this.innerHTML = getTemplateHTML();\n    const container = this.firstElementChild;\n    if (container) for (const child of children) container.append(child);\n  }\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AudioSkinElement.tagName]: AudioSkinElement;\n  }\n}\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AACzB,QAAgB;;AAGlB,IAAa,mBAAb,cAAsC,gBAAgB;;iBAC1B;;;yBACD;;CAEzB,cAAc;AACZ,SAAO;EACP,MAAM,WAAW,CAAC,GAAG,KAAK,WAAW;AACrC,OAAK,YAAY,iBAAiB;EAClC,MAAM,YAAY,KAAK;AACvB,MAAI,UAAW,MAAK,MAAM,SAAS,SAAU,WAAU,OAAO,MAAM;;;AAIxE,eAAe,OAAO,iBAAiB,SAAS,iBAAiB"}
+{"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"}

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

@@ -0,0 +1,111 @@
+import { SkinMixin } from "../skin-mixin.js";
+import "../media/container.js";
+import "../ui/mute-button.js";
+import "../ui/play-button.js";
+import "../ui/playback-rate-button.js";
+import "../ui/popover.js";
+import "../ui/seek-button.js";
+import "../ui/time.js";
+import "../ui/time-slider.js";
+import "../ui/tooltip.js";
+import "../ui/volume-slider.js";
+import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
+import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
+import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
+import { root } from "../../skins/dist/default/default/tailwind/components/root.js";
+import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
+import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
+import { renderIcon } from "../../icons/dist/render/default/index.js";
+import { controls, iconState, popup, slider, tooltipState } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
+import { ReactiveElement } from "@videojs/element";
+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>
+  `;
+}
+var AudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
+	static {
+		this.tagName = "audio-skin-tailwind";
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+customElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);
+
+//#endregion
+export { AudioSkinTailwindElement };
+//# sourceMappingURL=skin.tailwind.js.map

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

@@ -0,0 +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"}

package/dist/default/define/media/simple-hls-video.js

@@ -0,0 +1,13 @@
+import { SimpleHlsVideo } from "../../media/simple-hls-video/index.js";
+
+//#region src/define/media/simple-hls-video.ts
+var SimpleHlsVideoElement = class extends SimpleHlsVideo {
+	static {
+		this.tagName = "simple-hls-video";
+	}
+};
+customElements.define(SimpleHlsVideoElement.tagName, SimpleHlsVideoElement);
+
+//#endregion
+export { SimpleHlsVideoElement };
+//# sourceMappingURL=simple-hls-video.js.map

package/dist/default/define/media/simple-hls-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-hls-video.js","names":[],"sources":["../../../../src/define/media/simple-hls-video.ts"],"sourcesContent":["import { SimpleHlsVideo } from '../../media/simple-hls-video';\n\nexport class SimpleHlsVideoElement extends SimpleHlsVideo {\n  static readonly tagName = 'simple-hls-video';\n}\n\ncustomElements.define(SimpleHlsVideoElement.tagName, SimpleHlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SimpleHlsVideoElement.tagName]: SimpleHlsVideoElement;\n  }\n}\n"],"mappings":";;;AAEA,IAAa,wBAAb,cAA2C,eAAe;;iBAC9B;;;AAG5B,eAAe,OAAO,sBAAsB,SAAS,sBAAsB"}

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

@@ -1,35 +1,69 @@
 //#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;
+}
+
+@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;
+	const style = document.createElement("style");
+	style.id = BRIDGE_ID;
+	style.textContent = NATIVE_CAPTION_BRIDGE_CSS;
+	document.head.appendChild(style);
+}
+/**
 * Mixin for skin elements that renders the template from a static
-* `getTemplateHTML` method and resolves `<slot name="media">` placeholders
-* by replacing them with the actual media element children.
+* `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`.
 */
 function SkinMixin(BaseClass) {
 	class SkinElement extends BaseClass {
+		static {
+			this.shadowRootOptions = { mode: "open" };
+		}
 		constructor(...args) {
 			super(...args);
-			const ctor = this.constructor;
-			if (ctor.getTemplateHTML) {
-				const children = [...this.childNodes];
-				this.innerHTML = ctor.getTemplateHTML();
-				this.#resolveSlots(children);
+			this.classList.add("media-skin");
+			ensureCaptionBridge();
+			if (!this.shadowRoot) {
+				const ctor = this.constructor;
+				this.attachShadow(ctor.shadowRootOptions);
+				if (ctor.styles) this.shadowRoot.adoptedStyleSheets = [ctor.styles];
+				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
 			}
 		}
-		connectedCallback() {
-			this.#resolveSlots();
-			super.connectedCallback();
-		}
-		#resolveSlots(nodes) {
-			const slot = this.querySelector("slot[name=\"media\"]");
-			if (!slot) return;
-			const media = nodes ? nodes.filter((n) => n instanceof HTMLElement && n.getAttribute("slot") === "media") : [...this.querySelectorAll(":scope > [slot=\"media\"]")];
-			for (const el of media) slot.before(el);
-			slot.remove();
-		}
 	}
 	return SkinElement;
 }
+/** Create a shared `CSSStyleSheet` from a CSS string. */
+function createStyles(css) {
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(css);
+	return sheet;
+}
 
 //#endregion
-export { SkinMixin };
+export { SkinMixin, createStyles };
 //# sourceMappingURL=skin-mixin.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"skin-mixin.js","names":["#resolveSlots"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method and resolves `<slot name=\"media\">` placeholders\n * by replacing them with the actual media element children.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(BaseClass: Base): Base {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    constructor(...args: any[]) {\n      super(...args);\n\n      const ctor = this.constructor as { getTemplateHTML?: () => string };\n\n      if (ctor.getTemplateHTML) {\n        const children = [...this.childNodes];\n        this.innerHTML = ctor.getTemplateHTML();\n        this.#resolveSlots(children);\n      }\n    }\n\n    override connectedCallback(): void {\n      // During innerHTML parsing, children aren't available in the constructor.\n      // Resolve any remaining slotted elements before the container connects.\n      this.#resolveSlots();\n      super.connectedCallback();\n    }\n\n    #resolveSlots(nodes?: ChildNode[]): void {\n      const slot = this.querySelector('slot[name=\"media\"]');\n      if (!slot) return;\n\n      // Collect media from either the provided node list (constructor) or\n      // from direct children that haven't been placed yet (connectedCallback).\n      const media = nodes\n        ? nodes.filter((n): n is HTMLElement => n instanceof HTMLElement && n.getAttribute('slot') === 'media')\n        : [...this.querySelectorAll<HTMLElement>(':scope > [slot=\"media\"]')];\n\n      for (const el of media) slot.before(el);\n      slot.remove();\n    }\n  }\n\n  return SkinElement as unknown as Base;\n}\n"],"mappings":";;;;;;AAQA,SAAgB,UAAqD,WAAuB;CAC1F,MAAM,oBAAqB,UAA2C;EACpE,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;GAEd,MAAM,OAAO,KAAK;AAElB,OAAI,KAAK,iBAAiB;IACxB,MAAM,WAAW,CAAC,GAAG,KAAK,WAAW;AACrC,SAAK,YAAY,KAAK,iBAAiB;AACvC,UAAKA,aAAc,SAAS;;;EAIhC,AAAS,oBAA0B;AAGjC,SAAKA,cAAe;AACpB,SAAM,mBAAmB;;EAG3B,cAAc,OAA2B;GACvC,MAAM,OAAO,KAAK,cAAc,uBAAqB;AACrD,OAAI,CAAC,KAAM;GAIX,MAAM,QAAQ,QACV,MAAM,QAAQ,MAAwB,aAAa,eAAe,EAAE,aAAa,OAAO,KAAK,QAAQ,GACrG,CAAC,GAAG,KAAK,iBAA8B,4BAA0B,CAAC;AAEtE,QAAK,MAAM,MAAM,MAAO,MAAK,OAAO,GAAG;AACvC,QAAK,QAAQ;;;AAIjB,QAAO"}
+{"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"}

package/dist/default/define/ui/alert-dialog-close.js

@@ -0,0 +1,8 @@
+import { AlertDialogCloseElement } from "../../ui/alert-dialog/alert-dialog-close-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog-close.ts
+safeDefine(AlertDialogCloseElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog-close.js.map

package/dist/default/define/ui/alert-dialog-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.js","names":[],"sources":["../../../../src/define/ui/alert-dialog-close.ts"],"sourcesContent":["import { AlertDialogCloseElement } from '../../ui/alert-dialog/alert-dialog-close-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(AlertDialogCloseElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogCloseElement.tagName]: AlertDialogCloseElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,wBAAwB"}

package/dist/default/define/ui/alert-dialog-description.js

@@ -0,0 +1,8 @@
+import { AlertDialogDescriptionElement } from "../../ui/alert-dialog/alert-dialog-description-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog-description.ts
+safeDefine(AlertDialogDescriptionElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog-description.js.map

package/dist/default/define/ui/alert-dialog-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description.js","names":[],"sources":["../../../../src/define/ui/alert-dialog-description.ts"],"sourcesContent":["import { AlertDialogDescriptionElement } from '../../ui/alert-dialog/alert-dialog-description-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(AlertDialogDescriptionElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogDescriptionElement.tagName]: AlertDialogDescriptionElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,8BAA8B"}

package/dist/default/define/ui/alert-dialog-title.js

@@ -0,0 +1,8 @@
+import { AlertDialogTitleElement } from "../../ui/alert-dialog/alert-dialog-title-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog-title.ts
+safeDefine(AlertDialogTitleElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog-title.js.map

package/dist/default/define/ui/alert-dialog-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title.js","names":[],"sources":["../../../../src/define/ui/alert-dialog-title.ts"],"sourcesContent":["import { AlertDialogTitleElement } from '../../ui/alert-dialog/alert-dialog-title-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(AlertDialogTitleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogTitleElement.tagName]: AlertDialogTitleElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,wBAAwB"}

package/dist/default/define/ui/alert-dialog.js

@@ -0,0 +1,14 @@
+import { AlertDialogCloseElement } from "../../ui/alert-dialog/alert-dialog-close-element.js";
+import { AlertDialogDescriptionElement } from "../../ui/alert-dialog/alert-dialog-description-element.js";
+import { AlertDialogElement } from "../../ui/alert-dialog/alert-dialog-element.js";
+import { AlertDialogTitleElement } from "../../ui/alert-dialog/alert-dialog-title-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog.ts
+safeDefine(AlertDialogElement);
+safeDefine(AlertDialogCloseElement);
+safeDefine(AlertDialogDescriptionElement);
+safeDefine(AlertDialogTitleElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog.js.map

package/dist/default/define/ui/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../../../src/define/ui/alert-dialog.ts"],"sourcesContent":["import { AlertDialogCloseElement } from '../../ui/alert-dialog/alert-dialog-close-element';\nimport { AlertDialogDescriptionElement } from '../../ui/alert-dialog/alert-dialog-description-element';\nimport { AlertDialogElement } from '../../ui/alert-dialog/alert-dialog-element';\nimport { AlertDialogTitleElement } from '../../ui/alert-dialog/alert-dialog-title-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent first — child elements consume its context.\nsafeDefine(AlertDialogElement);\nsafeDefine(AlertDialogCloseElement);\nsafeDefine(AlertDialogDescriptionElement);\nsafeDefine(AlertDialogTitleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogElement.tagName]: AlertDialogElement;\n    [AlertDialogCloseElement.tagName]: AlertDialogCloseElement;\n    [AlertDialogDescriptionElement.tagName]: AlertDialogDescriptionElement;\n    [AlertDialogTitleElement.tagName]: AlertDialogTitleElement;\n  }\n}\n"],"mappings":";;;;;;;AAOA,WAAW,mBAAmB;AAC9B,WAAW,wBAAwB;AACnC,WAAW,8BAA8B;AACzC,WAAW,wBAAwB"}

package/dist/default/define/ui/captions-button.js

@@ -0,0 +1,7 @@
+import { CaptionsButtonElement } from "../../ui/captions-button/captions-button-element.js";
+
+//#region src/define/ui/captions-button.ts
+customElements.define(CaptionsButtonElement.tagName, CaptionsButtonElement);
+
+//#endregion
+//# sourceMappingURL=captions-button.js.map

package/dist/default/define/ui/captions-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/define/ui/captions-button.ts"],"sourcesContent":["import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';\n\ncustomElements.define(CaptionsButtonElement.tagName, CaptionsButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [CaptionsButtonElement.tagName]: CaptionsButtonElement;\n  }\n}\n"],"mappings":";;;AAEA,eAAe,OAAO,sBAAsB,SAAS,sBAAsB"}

package/dist/default/define/ui/slider-thumbnail.js

@@ -0,0 +1,8 @@
+import { SliderThumbnailElement } from "../../ui/slider/slider-thumbnail-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/slider-thumbnail.ts
+safeDefine(SliderThumbnailElement);
+
+//#endregion
+//# sourceMappingURL=slider-thumbnail.js.map

package/dist/default/define/ui/slider-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/define/ui/slider-thumbnail.ts"],"sourcesContent":["import { SliderThumbnailElement } from '../../ui/slider/slider-thumbnail-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(SliderThumbnailElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SliderThumbnailElement.tagName]: SliderThumbnailElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,uBAAuB"}

package/dist/default/define/ui/slider.js

@@ -4,10 +4,12 @@ import { SliderThumbElement } from "../../ui/slider/slider-thumb-element.js";
 import { SliderTrackElement } from "../../ui/slider/slider-track-element.js";
 import { SliderValueElement } from "../../ui/slider/slider-value-element.js";
 import { safeDefine } from "../safe-define.js";
+import { SliderPreviewElement } from "../../ui/slider/slider-preview-element.js";
 
 //#region src/define/ui/slider.ts
 safeDefine(SliderElement);
 safeDefine(SliderFillElement);
+safeDefine(SliderPreviewElement);
 safeDefine(SliderThumbElement);
 safeDefine(SliderTrackElement);
 safeDefine(SliderValueElement);

package/dist/default/define/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../../../src/define/ui/slider.ts"],"sourcesContent":["import { SliderElement } from '../../ui/slider/slider-element';\nimport { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(SliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SliderElement.tagName]: SliderElement;\n  }\n}\n"],"mappings":";;;;;;;;AAQA,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../../../src/define/ui/slider.ts"],"sourcesContent":["import { SliderElement } from '../../ui/slider/slider-element';\nimport { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(SliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [SliderElement.tagName]: SliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;AASA,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}

package/dist/default/define/ui/time-slider.js

@@ -1,16 +1,20 @@
 import { SliderBufferElement } from "../../ui/slider/slider-buffer-element.js";
 import { SliderFillElement } from "../../ui/slider/slider-fill-element.js";
 import { SliderThumbElement } from "../../ui/slider/slider-thumb-element.js";
+import { SliderThumbnailElement } from "../../ui/slider/slider-thumbnail-element.js";
 import { SliderTrackElement } from "../../ui/slider/slider-track-element.js";
 import { SliderValueElement } from "../../ui/slider/slider-value-element.js";
 import { TimeSliderElement } from "../../ui/time-slider/time-slider-element.js";
 import { safeDefine } from "../safe-define.js";
+import { SliderPreviewElement } from "../../ui/slider/slider-preview-element.js";
 
 //#region src/define/ui/time-slider.ts
 safeDefine(TimeSliderElement);
 safeDefine(SliderBufferElement);
 safeDefine(SliderFillElement);
+safeDefine(SliderPreviewElement);
 safeDefine(SliderThumbElement);
+safeDefine(SliderThumbnailElement);
 safeDefine(SliderTrackElement);
 safeDefine(SliderValueElement);
 

package/dist/default/define/ui/time-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider.js","names":[],"sources":["../../../../src/define/ui/time-slider.ts"],"sourcesContent":["import { SliderBufferElement } from '../../ui/slider/slider-buffer-element';\nimport { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { TimeSliderElement } from '../../ui/time-slider/time-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(TimeSliderElement);\nsafeDefine(SliderBufferElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeSliderElement.tagName]: TimeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;AASA,WAAW,kBAAkB;AAC7B,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}
+{"version":3,"file":"time-slider.js","names":[],"sources":["../../../../src/define/ui/time-slider.ts"],"sourcesContent":["import { SliderBufferElement } from '../../ui/slider/slider-buffer-element';\nimport { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderThumbnailElement } from '../../ui/slider/slider-thumbnail-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { TimeSliderElement } from '../../ui/time-slider/time-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(TimeSliderElement);\nsafeDefine(SliderBufferElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderThumbnailElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeSliderElement.tagName]: TimeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;AAWA,WAAW,kBAAkB;AAC7B,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,uBAAuB;AAClC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}

package/dist/default/define/ui/tooltip-group.js

@@ -0,0 +1,8 @@
+import { TooltipGroupElement } from "../../ui/tooltip/tooltip-group-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/tooltip-group.ts
+safeDefine(TooltipGroupElement);
+
+//#endregion
+//# sourceMappingURL=tooltip-group.js.map

package/dist/default/define/ui/tooltip-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-group.js","names":[],"sources":["../../../../src/define/ui/tooltip-group.ts"],"sourcesContent":["import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TooltipGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipGroupElement.tagName]: TooltipGroupElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,oBAAoB"}

package/dist/default/define/ui/tooltip.js

@@ -0,0 +1,8 @@
+import { TooltipElement } from "../../ui/tooltip/tooltip-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/tooltip.ts
+safeDefine(TooltipElement);
+
+//#endregion
+//# sourceMappingURL=tooltip.js.map

package/dist/default/define/ui/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../src/define/ui/tooltip.ts"],"sourcesContent":["import { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TooltipElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipElement.tagName]: TooltipElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,eAAe"}

package/dist/default/define/ui/volume-slider.js

@@ -4,10 +4,12 @@ import { SliderTrackElement } from "../../ui/slider/slider-track-element.js";
 import { SliderValueElement } from "../../ui/slider/slider-value-element.js";
 import { VolumeSliderElement } from "../../ui/volume-slider/volume-slider-element.js";
 import { safeDefine } from "../safe-define.js";
+import { SliderPreviewElement } from "../../ui/slider/slider-preview-element.js";
 
 //#region src/define/ui/volume-slider.ts
 safeDefine(VolumeSliderElement);
 safeDefine(SliderFillElement);
+safeDefine(SliderPreviewElement);
 safeDefine(SliderThumbElement);
 safeDefine(SliderTrackElement);
 safeDefine(SliderValueElement);

package/dist/default/define/ui/volume-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(VolumeSliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;AAQA,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}
+{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(VolumeSliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;AASA,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}