@videojs/html 10.0.0-alpha.9 → 10.0.0-beta.10

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

@@ -1,22 +1,33 @@
+import { SkinMixin, createStyles } from "../skin-mixin.js";
+import { renderIcon } from "../../icons/dist/render/minimal/index.js";
+import "../media/container.js";
+import "../ui/mute-button.js";
+import "../ui/play-button.js";
+import "../ui/playback-rate-button.js";
+import "../ui/popover.js";
+import "../ui/seek-button.js";
+import "../ui/time.js";
+import "../ui/time-slider.js";
+import "../ui/tooltip.js";
+import "../ui/tooltip-group.js";
+import "../ui/volume-slider.js";
+import minimal_skin_default from "../../_virtual/inline-css_src/define/audio/minimal-skin.js";
 import { ReactiveElement } from "@videojs/element";
 
 //#region src/define/audio/minimal-skin.ts
+const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<div></div>`;
+	return `<media-container class="media-minimal-skin media-minimal-skin--audio"><slot name="media"></slot><slot></slot><div class="media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-tooltip"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="media-time-controls"><media-time-group class="media-time"><media-time type="current" class="media-time__value media-time__value--current"></media-time><media-time-separator class="media-time__separator"></media-time-separator><media-time type="duration" class="media-time__value media-time__value--duration"></media-time></media-time-group><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider></div><div class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
 }
-var MinimalAudioSkinElement = class extends ReactiveElement {
+var MinimalAudioSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {
 		this.tagName = "audio-minimal-skin";
 	}
 	static {
-		this.getTemplateHTML = getTemplateHTML;
+		this.styles = createStyles(minimal_skin_default);
 	}
-	constructor() {
-		super();
-		const children = [...this.childNodes];
-		this.innerHTML = getTemplateHTML();
-		const container = this.firstElementChild;
-		if (container) for (const child of children) container.append(child);
+	static {
+		this.getTemplateHTML = getTemplateHTML;
 	}
 };
 customElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);

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

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\n\nfunction getTemplateHTML() {\n  return /*html*/ `<div></div>`;\n}\n\nexport class MinimalAudioSkinElement extends ReactiveElement {\n  static readonly tagName = 'audio-minimal-skin';\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n    const children = [...this.childNodes];\n    this.innerHTML = getTemplateHTML();\n    const container = this.firstElementChild;\n    if (container) for (const child of children) container.append(child);\n  }\n}\n\ncustomElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n  }\n}\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AACzB,QAAgB;;AAGlB,IAAa,0BAAb,cAA6C,gBAAgB;;iBACjC;;;yBACD;;CAEzB,cAAc;AACZ,SAAO;EACP,MAAM,WAAW,CAAC,GAAG,KAAK,WAAW;AACrC,OAAK,YAAY,iBAAiB;EAClC,MAAM,YAAY,KAAK;AACvB,MAAI,UAAW,MAAK,MAAM,SAAS,SAAU,WAAU,OAAO,MAAM;;;AAIxE,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}
+{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--audio\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <div class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n              <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n              <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-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--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time-group class=\"media-time\">\n              <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n              <media-time-separator class=\"media-time__separator\"></media-time-separator>\n              <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n            </media-time-group>\n\n            <media-time-slider class=\"media-slider\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n            </media-time-slider>\n          </div>\n\n          <div class=\"media-button-group\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\">\n            </media-playback-rate-button>\n            <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n          </div>\n        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MinimalAudioSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,+TAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,mqCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,0BAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEM;;;AAGxB,eAAa,OAAM,wBAAwB,SAAY,wBAAsB"}

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

@@ -0,0 +1,44 @@
+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 { 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 { slider } from "../../skins/dist/default/minimal/tailwind/components/slider.js";
+import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
+import "../media/container.js";
+import "../ui/mute-button.js";
+import "../ui/play-button.js";
+import "../ui/playback-rate-button.js";
+import "../ui/popover.js";
+import "../ui/seek-button.js";
+import "../ui/time.js";
+import "../ui/time-slider.js";
+import "../ui/tooltip.js";
+import "../ui/tooltip-group.js";
+import "../ui/volume-slider.js";
+import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
+import { controls, popup, root } from "../../skins/dist/default/minimal/tailwind/audio.tailwind.js";
+import { ReactiveElement } from "@videojs/element";
+import { cn } from "@videojs/utils/style";
+
+//#region src/define/audio/minimal-skin.tailwind.ts
+const SEEK_TIME = 10;
+function getTemplateHTML() {
+	return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <span class="${tooltipState.play.wrapper}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, 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.subtle, 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.subtle, 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.subtle, button.icon, playbackRate.button)}"> </media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="horizontal" 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></div></media-tooltip-group></div></media-container>`;
+}
+var MinimalAudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
+	static {
+		this.tagName = "audio-minimal-skin-tailwind";
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+customElements.define(MinimalAudioSkinTailwindElement.tagName, MinimalAudioSkinTailwindElement);
+
+//#endregion
+export { MinimalAudioSkinTailwindElement };
+//# sourceMappingURL=minimal-skin.tailwind.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n  button,\n  buttonGroup,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <div class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${buttonGroup}\">\n            <span class=\"${tooltipState.play.wrapper}\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, 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.subtle, 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.subtle, 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.subtle, 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=\"audio-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n            </media-mute-button>\n\n            <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"${cn(popup.volume)}\">\n              <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" 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          </div>\n        </media-tooltip-group>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MinimalAudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'audio-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinTailwindElement.tagName, MinimalAudioSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalAudioSkinTailwindElement.tagName]: MinimalAudioSkinTailwindElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,wDAAA,SAAA,sCAAA,YAAA,kBAAA,aAAA,KAAA,QAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,6CAAA,KAAA,SAAA,8BAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,8CAAA,KAAA,UAAA,8DAAA,KAAA,SAAA,8DAAA,OAAA,KAAA,gCAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,+DAAA,YAAA,2EAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,aAAA,OAAA,CAAA,8FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,QAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,+HAAA,GAAA,MAAA,OAAA,CAAA,iCAAA,OAAA,KAAA,gFAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,OAAA,MAAA,KAAA;;AAGlB,IAAY,kCAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;AAIlB,eAAe,OAAO,gCAAe,SAAA,gCAAA"}