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

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

@@ -1,14 +1,14 @@
 import { SkinMixin } from "../skin-mixin.js";
 import { renderIcon } from "../../icons/dist/render/minimal/index.js";
+import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
+import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
 import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
 import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
 import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
-import { iconState } from "../../skins/dist/default/minimal/tailwind/components/icon-state.js";
 import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
-import { tooltipState } from "../../skins/dist/default/minimal/tailwind/components/tooltip-state.js";
 import { controls, popup, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
@@ -24,6 +24,7 @@ import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
 import "../ui/tooltip.js";
+import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { ReactiveElement } from "@videojs/element";
@@ -32,7 +33,7 @@ import { cn } from "@videojs/utils/style";
 //#region src/define/video/minimal-skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root(true)}"><slot name="media"></slot><media-buffering-indicator class="${bufferingIndicator}"> ${renderIcon("spinner")} </media-buffering-indicator><media-controls data-controls="" class="${controls}"><span class="${buttonGroup}"><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></span><span class="${time.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><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></span><span class="${buttonGroup}"><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="video-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="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(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="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover><span class="${tooltipState.captions.wrapper}"><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.captions.enable}">Enable captions</span><span class="${tooltipState.captions.disable}">Disable captions</span></media-tooltip></span><span class="${tooltipState.pip.wrapper}"><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}"> ${renderIcon("pip", { class: icon })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.pip.enter}">Enter picture-in-picture</span><span class="${tooltipState.pip.exit}">Exit picture-in-picture</span></media-tooltip></span><span class="${tooltipState.fullscreen.wrapper}"><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span><span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span></media-tooltip></span></span></media-controls><div class="${overlay}"></div></media-container>`;
+	return `<media-container class="${root(true)}"><slot name="media"></slot><media-buffering-indicator class="${bufferingIndicator}"> ${renderIcon("spinner")} </media-buffering-indicator><media-controls data-controls="" class="${controls}"><media-tooltip-group class="contents"><div class="${buttonGroup}"><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></div><div class="${time.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><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></div><div class="${buttonGroup}"><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="video-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="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(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="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover><span class="${tooltipState.captions.wrapper}"><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.captions.enable}">Enable captions</span><span class="${tooltipState.captions.disable}">Disable captions</span></media-tooltip></span><span class="${tooltipState.pip.wrapper}"><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}"> ${renderIcon("pip", { class: icon })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.pip.enter}">Enter picture-in-picture</span><span class="${tooltipState.pip.exit}">Exit picture-in-picture</span></media-tooltip></span><span class="${tooltipState.fullscreen.wrapper}"><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span><span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span></media-tooltip></span></div></media-tooltip-group></media-controls><div class="${overlay}"></div></media-container>`;
 }
 var MinimalVideoSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/video.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/buffering-indicator';\nimport '../ui/captions-button';\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';\nimport { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${buttonGroup}\">\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        </span>\n\n        <span class=\"${time.controls}\">\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-separator class=\"${time.separator}\"></media-time-separator>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\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        </span>\n\n        <span class=\"${buttonGroup}\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n          </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=\"video-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=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(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=\"${slider.thumb.base}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n              ${renderIcon('pip', { class: icon })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinTailwindElement.tagName, MinimalVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinTailwindElement.tagName]: MinimalVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/video.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/buffering-indicator';\nimport '../ui/captions-button';\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/tooltip-group';\nimport '../ui/volume-slider';\nimport { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group class=\"contents\">\n          <div class=\"${buttonGroup}\">\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          </div>\n\n          <div class=\"${time.controls}\">\n            <media-time-group class=\"${time.group}\">\n              <media-time type=\"current\" class=\"${time.current}\"></media-time>\n              <media-time-separator class=\"${time.separator}\"></media-time-separator>\n              <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n            </media-time-group>\n\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          </div>\n\n          <div class=\"${buttonGroup}\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n            </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=\"video-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=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(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=\"${slider.thumb.base}\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n\n            <span class=\"${tooltipState.captions.wrapper}\">\n              <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n              </media-captions-button>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n                <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n              </media-tooltip>\n            </span>\n\n            <span class=\"${tooltipState.pip.wrapper}\">\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n                ${renderIcon('pip', { class: icon })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n                <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n              </media-tooltip>\n            </span>\n\n            <span class=\"${tooltipState.fullscreen.wrapper}\">\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n                <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n              </media-tooltip>\n            </span>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinTailwindElement.tagName, MinimalVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinTailwindElement.tagName]: MinimalVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

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

@@ -140,10 +140,6 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-
-  &:fullscreen {
-    border-radius: 0;
-  }
 }
 
 /* ==========================================================================
@@ -187,8 +183,13 @@
   display: block;
   width: 100%;
   height: 100%;
+}
+.media-default-skin ::slotted(video) {
   border-radius: var(--media-border-radius, 2rem);
 }
+.media-default-skin video {
+  border-radius: inherit;
+}
 
 /* ==========================================================================
    Poster Image
@@ -209,6 +210,19 @@
   }
 }
 
+/* ==========================================================================
+   Fullscreen
+   ========================================================================== */
+
+.media-default-skin:fullscreen video,
+.media-default-skin:fullscreen ::slotted(video),
+.media-default-skin > img {
+  object-fit: contain;
+}
+.media-default-skin:fullscreen ::slotted(video) {
+  border-radius: 0;
+}
+
 /* ==========================================================================
    Overlay / Scrim
    ========================================================================== */
@@ -218,7 +232,7 @@
   inset: 0;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
-  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(0) saturate(1.5);
   opacity: 0;
   transition-property: opacity, backdrop-filter;
   transition-duration: 300ms;
@@ -239,7 +253,7 @@
 }
 
 .media-default-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);
+  backdrop-filter: blur(16px) saturate(1.5);
 }
 
 /* ==========================================================================
@@ -755,7 +769,7 @@
   --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
   --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
-  --media-surface-backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
 
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);
@@ -771,6 +785,10 @@
     box-shadow: inset 0 0 0 1px var(--media-border-color);
     pointer-events: none;
   }
+
+  &:fullscreen {
+    border-radius: 0;
+  }
 }
 
 /* ==========================================================================
@@ -815,3 +833,7 @@
   box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
 }
 
+media-tooltip-group {
+  display: contents;
+}
+

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

@@ -13,6 +13,7 @@ import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
 import "../ui/tooltip.js";
+import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import skin_default from "../../_virtual/inline-css_src/define/video/skin.js";
@@ -21,7 +22,7 @@ import { ReactiveElement } from "@videojs/element";
 //#region src/define/video/skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-controls 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--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" })} <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="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-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><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-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span><span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip"> ${renderIcon("pip", { class: "media-icon" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface 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-surface 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></media-controls><div class="media-overlay"></div></media-container>`;
+	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-controls class="media-surface media-controls"><media-tooltip-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-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--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" })} <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="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-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><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-surface media-tooltip"><span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span><span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip"> ${renderIcon("pip", { class: "media-icon" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface 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-surface 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></media-tooltip-group></media-controls><div class="media-overlay"></div></media-container>`;
 }
 var VideoSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/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/buffering-indicator';\nimport '../ui/captions-button';\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-default-skin media-default-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <media-controls 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--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' })}\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=\"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-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\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-surface media-tooltip\">\n          <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n          <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n        </media-tooltip>\n\n        <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon media-button--pip\">\n          ${renderIcon('pip', { class: 'media-icon' })}\n        </media-pip-button>\n        <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface 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-surface 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      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,4LAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mMAAA,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,kCAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,cAAA,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,gpBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,iaAAA,WAAA,OAAA,EAAA,OAAA,cAAA,CAAA,CAAA,8aAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;;;iBAIK;;;gBACL,aAAQ,aAAQ;;;yBACV"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/video/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/buffering-indicator';\nimport '../ui/captions-button';\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/tooltip-group';\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--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-tooltip-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-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--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' })}\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=\"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-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\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-surface media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enable-captions\">Enable captions</span>\n            <span class=\"media-tooltip-label media-tooltip-label--disable-captions\">Disable captions</span>\n          </media-tooltip>\n\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon media-button--pip\">\n            ${renderIcon('pip', { class: 'media-icon' })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface 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-surface 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        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinElement.tagName, VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,4LAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,wNAAA,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,kCAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,oGAAA,WAAA,QAAA,EAAA,OAAA,cAAA,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,gpBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,iaAAA,WAAA,OAAA,EAAA,OAAA,cAAA,CAAA,CAAA,8aAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;;;iBAIK;;;gBACL,aAAQ,aAAQ;;;yBACV"}

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

@@ -1,4 +1,6 @@
 import { SkinMixin } from "../skin-mixin.js";
+import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
+import { tooltipState } from "../../skins/dist/default/shared/tailwind/tooltip-state.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
 import "../ui/captions-button.js";
@@ -13,15 +15,14 @@ import "../ui/seek-button.js";
 import "../ui/time.js";
 import "../ui/time-slider.js";
 import "../ui/tooltip.js";
+import "../ui/tooltip-group.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 { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
-import { iconState } from "../../skins/dist/default/default/tailwind/components/icon-state.js";
 import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
-import { tooltipState } from "../../skins/dist/default/default/tailwind/components/tooltip-state.js";
 import { bufferingIndicator, controls, popup, root, slider } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import { ReactiveElement } from "@videojs/element";
@@ -30,7 +31,7 @@ import { cn } from "@videojs/utils/style";
 //#region src/define/video/skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root(true)}"><slot name="media"></slot><media-buffering-indicator class="${bufferingIndicator.root}"><div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><media-controls data-controls="" 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="video-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="video-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><span class="${tooltipState.captions.wrapper}"><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.captions.enable}">Enable captions</span><span class="${tooltipState.captions.disable}">Disable captions</span></media-tooltip></span><span class="${tooltipState.pip.wrapper}"><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}"> ${renderIcon("pip", { class: icon })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.pip.enter}">Enter picture-in-picture</span><span class="${tooltipState.pip.exit}">Exit picture-in-picture</span></media-tooltip></span><span class="${tooltipState.fullscreen.wrapper}"><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span><span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span></media-tooltip></span></media-controls><div class="${overlay}"></div></media-container>`;
+	return `<media-container class="${root(true)}"><slot name="media"></slot><media-buffering-indicator class="${bufferingIndicator.root}"><div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><media-controls data-controls="" class="${controls}"><media-tooltip-group class="contents"><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="video-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="video-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><span class="${tooltipState.captions.wrapper}"><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.captions.enable}">Enable captions</span><span class="${tooltipState.captions.disable}">Disable captions</span></media-tooltip></span><span class="${tooltipState.pip.wrapper}"><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}"> ${renderIcon("pip", { class: icon })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.pip.enter}">Enter picture-in-picture</span><span class="${tooltipState.pip.exit}">Exit picture-in-picture</span></media-tooltip></span><span class="${tooltipState.fullscreen.wrapper}"><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"><span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span><span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span></media-tooltip></span></media-tooltip-group></media-controls><div class="${overlay}"></div></media-container>`;
 }
 var VideoSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/video.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/buffering-indicator';\nimport '../ui/captions-button';\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=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        <div class=\"${bufferingIndicator.container}\">\n          ${renderIcon('spinner')}\n        </div>\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" 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=\"video-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=\"video-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\n        <span class=\"${tooltipState.captions.wrapper}\">\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n            ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n            ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n            <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n          </media-tooltip>\n        </span>\n\n        <span class=\"${tooltipState.pip.wrapper}\">\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n            ${renderIcon('pip', { class: icon })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n            <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n          </media-tooltip>\n        </span>\n\n        <span class=\"${tooltipState.fullscreen.wrapper}\">\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n            ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n            <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  bufferingIndicator,\n  button,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  playbackRate,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/default/tailwind/video.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/buffering-indicator';\nimport '../ui/captions-button';\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/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        <div class=\"${bufferingIndicator.container}\">\n          ${renderIcon('spinner')}\n        </div>\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group class=\"contents\">\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=\"video-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=\"video-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\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n              ${renderIcon('pip', { class: icon })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(VideoSkinTailwindElement.tagName, VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js

@@ -1,3 +1,5 @@
+import { iconState } from "../../shared/tailwind/icon-state.js";
+import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
 import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
 import { controls as controls$1 } from "./components/controls.js";
 import { error as error$1 } from "./components/error.js";
@@ -19,26 +21,6 @@ const slider = {
 	...slider$1,
 	track: cn(slider$1.track, "bg-black/10", "dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
 };
-const iconState = {
-	play: {
-		button: "group",
-		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
-		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
-		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
-	},
-	mute: {
-		button: "group",
-		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
-		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
-		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
-	}
-};
-const tooltipState = { play: {
-	wrapper: "contents group/play-tip",
-	replay: "hidden group-has-data-ended/play-tip:block",
-	play: "hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block",
-	pause: "hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block"
-} };
 const popup = {
 	...popup$1,
 	popover: cn(surface, popup$1.popover),
@@ -54,5 +36,5 @@ const error = {
 };
 
 //#endregion
-export { controls, iconState, popup, slider, tooltipState };
+export { controls, popup, slider };
 //# sourceMappingURL=audio.tailwind.js.map

package/dist/default/skins/dist/default/default/tailwind/audio.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-brightness-98 backdrop-saturate-120 backdrop-blur\", \"ring-white/5 shadow-black/15\", \"after:ring-black/5\");\nconst controls = cn(controls$1, surface, \"dark:text-white\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t}\n};\nconst tooltipState = { play: {\n\twrapper: \"contents group/play-tip\",\n\treplay: \"hidden group-has-data-ended/play-tip:block\",\n\tplay: \"hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block\",\n\tpause: \"hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block\"\n} };\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,UAAU,GAAG,WAAW,gCAAgC,8DAA8D,gCAAgC,qBAAqB;AACjL,MAAM,WAAW,GAAG,YAAY,SAAS,kBAAkB;AAC3D,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,6DAA6D;CACtG;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD;AACD,MAAM,eAAe,EAAE,MAAM;CAC5B,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,EAAE;AACH,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}
+{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-brightness-98 backdrop-saturate-120 backdrop-blur\", \"ring-white/5 shadow-black/15\", \"after:ring-black/5\");\nconst controls = cn(controls$1, surface, \"dark:text-white\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,UAAU,GAAG,WAAW,gCAAgC,8DAA8D,gCAAgC,qBAAqB;AACjL,MAAM,WAAW,GAAG,YAAY,SAAS,kBAAkB;AAC3D,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,6DAA6D;CACtG;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}

package/dist/default/skins/dist/default/default/tailwind/components/overlay.js

@@ -1,7 +1,7 @@
 import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/default/tailwind/components/overlay.js
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur", "motion-reduce:duration-100");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-150", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "motion-reduce:duration-100");
 
 //#endregion
 export { overlay };

package/dist/default/skins/dist/default/default/tailwind/components/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,sCAAsC,6BAA6B"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,4CAA4C,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B"}

package/dist/default/skins/dist/default/default/tailwind/components/root.js

@@ -1,7 +1,7 @@
 import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/default/tailwind/components/root.js
-const root = cn("block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,2rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "[&:fullscreen]:rounded-none");
+const root = cn("block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,2rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
 
 //#endregion
 export { root };

package/dist/default/skins/dist/default/default/tailwind/components/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/root.ts\nconst root = cn(\"block relative isolate h-full w-full @container/media-root\", \"rounded-(--media-border-radius,2rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"[&:fullscreen]:rounded-none\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8DAA8D,wCAAwC,uHAAuH,wBAAwB,6BAA6B,iDAAiD,8BAA8B"}
+{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/root.ts\nconst root = cn(\"block relative isolate h-full w-full @container/media-root\", \"rounded-(--media-border-radius,2rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8DAA8D,wCAAwC,uHAAuH,wBAAwB,6BAA6B,gDAAgD"}

package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js

@@ -1,3 +1,5 @@
+import { iconState } from "../../shared/tailwind/icon-state.js";
+import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
 import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
 import { controls as controls$1 } from "./components/controls.js";
 import { error as error$1 } from "./components/error.js";
@@ -10,9 +12,7 @@ import { playbackRate } from "./components/playback-rate.js";
 import { root as root$1 } from "./components/root.js";
 import { seek } from "./components/seek.js";
 import { time } from "./components/time.js";
-import { iconState } from "./components/icon-state.js";
 import { overlay } from "./components/overlay.js";
-import { tooltipState } from "./components/tooltip-state.js";
 import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/default/tailwind/video.tailwind.js
@@ -29,8 +29,11 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
 	"[&_video::-webkit-media-text-track-container]:z-1",
 	"[&_video::-webkit-media-text-track-container]:font-[inherit]",
 	"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50"
-] : [], "[&:fullscreen]:rounded-none");
-const surface = cn(surface$1, "bg-white/10", "backdrop-brightness-90 backdrop-saturate-150 backdrop-blur-3xl", "ring-white/5 shadow-black/10", "after:ring-black/15", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-black/90");
+] : [], "[&:fullscreen]:rounded-none", {
+	"[&:fullscreen_video]:object-contain": !isShadowDOM,
+	"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none": isShadowDOM
+}, "[&:fullscreen>img]:object-contain");
+const surface = cn(surface$1, "bg-white/10", "backdrop-saturate-150 backdrop-blur-lg", "ring-white/5 shadow-black/10", "after:ring-black/15", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-black/90");
 const controls = cn(controls$1, surface, "absolute bottom-3 inset-x-3", "text-white z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100 origin-bottom", "not-data-visible:pointer-events-none not-data-visible:blur-sm", "not-data-visible:scale-90 not-data-visible:opacity-0", "not-data-visible:delay-500 not-data-visible:duration-300", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100");
 const slider = {
 	...slider$1,