@videojs/html 0.1.0-preview.8 → 10.0.0-alpha.11

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

@@ -0,0 +1,105 @@
+import { SkinMixin, createStyles } from "../skin-mixin.js";
+import "../media/container.js";
+import "../ui/mute-button.js";
+import "../ui/play-button.js";
+import "../ui/playback-rate-button.js";
+import "../ui/popover.js";
+import "../ui/seek-button.js";
+import "../ui/time.js";
+import "../ui/time-slider.js";
+import "../ui/tooltip.js";
+import "../ui/volume-slider.js";
+import { renderIcon } from "../../icons/dist/render/default/index.js";
+import skin_default from "../../_virtual/inline-css_src/define/audio/skin.js";
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/audio/skin.ts
+const SEEK_TIME = 10;
+function getTemplateHTML() {
+	return `
+    <media-container class="media-default-skin media-default-skin--audio">
+      <slot name="media"></slot>
+
+      <div class="media-surface media-controls">
+        <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+          ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
+          ${renderIcon("play", { class: "media-icon media-icon--play" })}
+          ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
+        </media-play-button>
+        <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
+          <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+          <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+          <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+        </media-tooltip>
+
+        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <span class="media-icon__container">
+            ${renderIcon("seek", { class: "media-icon media-icon--seek media-icon--flipped" })}
+            <span class="media-icon__label">${SEEK_TIME}</span>
+          </span>
+        </media-seek-button>
+        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
+          Seek backward ${SEEK_TIME} seconds
+        </media-tooltip>
+
+        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+          <span class="media-icon__container">
+            ${renderIcon("seek", { class: "media-icon media-icon--seek" })}
+            <span class="media-icon__label">${SEEK_TIME}</span>
+          </span>
+        </media-seek-button>
+        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+          Seek forward ${SEEK_TIME} seconds
+        </media-tooltip>
+
+        <media-time-group class="media-time">
+          <media-time type="current" class="media-time__value"></media-time>
+          <media-time-slider class="media-slider">
+            <media-slider-track class="media-slider__track">
+              <media-slider-fill class="media-slider__fill"></media-slider-fill>
+              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
+            </media-slider-track>
+            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+          </media-time-slider>
+          <media-time type="duration" class="media-time__value"></media-time>
+        </media-time-group>
+
+        <media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
+          Toggle playback rate
+        </media-tooltip>
+
+        <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
+          ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
+          ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
+          ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
+        </media-mute-button>
+
+        <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+          <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+            <media-slider-track class="media-slider__track">
+              <media-slider-fill class="media-slider__fill"></media-slider-fill>
+            </media-slider-track>
+            <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+          </media-volume-slider>
+        </media-popover>
+      </div>
+    </media-container>
+  `;
+}
+var AudioSkinElement = class extends SkinMixin(ReactiveElement) {
+	static {
+		this.tagName = "audio-skin";
+	}
+	static {
+		this.styles = createStyles(skin_default);
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+customElements.define(AudioSkinElement.tagName, AudioSkinElement);
+
+//#endregion
+export { AudioSkinElement };
+//# sourceMappingURL=skin.js.map

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

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

package/dist/dev/define/audio/skin.tailwind.d.ts

@@ -0,0 +1,20 @@
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/audio/skin.tailwind.d.ts
+declare function getTemplateHTML(): string;
+declare const AudioSkinTailwindElement_base: typeof ReactiveElement & {
+  shadowRootOptions: ShadowRootInit;
+  styles?: CSSStyleSheet;
+};
+declare class AudioSkinTailwindElement extends AudioSkinTailwindElement_base {
+  static readonly tagName = "audio-skin-tailwind";
+  static getTemplateHTML: typeof getTemplateHTML;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;
+  }
+}
+//#endregion
+export { AudioSkinTailwindElement };
+//# sourceMappingURL=skin.tailwind.d.ts.map

package/dist/dev/define/audio/skin.tailwind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"mappings":";;;iBAkCS,eAAA,CAAA;AAAA,cAAe,6BAAA;;;;cA2EX,wBAAA,SAAiC,6BAAA;EAAA,gBAC5B,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,wBAAA,CAAyB,OAAA,GAAU,wBAAA;EAAA;AAAA"}

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

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

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

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

package/dist/dev/define/background/player.d.ts

@@ -0,0 +1,17 @@
+import { MediaElement } from "../../ui/media-element.js";
+import { PlayerProviderConstructor } from "../../store/types.js";
+import * as _videojs_core_dom0 from "@videojs/core/dom";
+
+//#region src/define/background/player.d.ts
+declare const BackgroundVideoPlayerElement_base: typeof MediaElement & PlayerProviderConstructor<_videojs_core_dom0.PlayerStore<[]>>;
+declare class BackgroundVideoPlayerElement extends BackgroundVideoPlayerElement_base {
+  static readonly tagName = "background-video-player";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;
+  }
+}
+//#endregion
+export { BackgroundVideoPlayerElement };
+//# sourceMappingURL=player.d.ts.map

package/dist/dev/define/background/player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.d.ts","names":[],"sources":["../../../../src/define/background/player.ts"],"mappings":";;;;;cAGsD,iCAAA;cAOzC,4BAAA,SAAqC,iCAAA;EAAA,gBAChC,OAAA;AAAA;AAAA,QAOV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,4BAAA,CAA6B,OAAA,GAAU,4BAAA;EAAA;AAAA"}

package/dist/dev/define/background/player.js

@@ -0,0 +1,19 @@
+import { MediaElement } from "../../ui/media-element.js";
+import { MediaContainerElement } from "../../media/container-element.js";
+import { createPlayer } from "../../player/create-player.js";
+import { safeDefine } from "../safe-define.js";
+import { backgroundFeatures } from "@videojs/core/dom";
+
+//#region src/define/background/player.ts
+const { ProviderMixin } = createPlayer({ features: backgroundFeatures });
+var BackgroundVideoPlayerElement = class extends ProviderMixin(MediaElement) {
+	static {
+		this.tagName = "background-video-player";
+	}
+};
+safeDefine(BackgroundVideoPlayerElement);
+safeDefine(MediaContainerElement);
+
+//#endregion
+export { BackgroundVideoPlayerElement };
+//# sourceMappingURL=player.js.map

package/dist/dev/define/background/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","names":[],"sources":["../../../../src/define/background/player.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n  features: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n  static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n  }\n}\n"],"mappings":";;;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,oBACX,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc,aAAa,CAAC;;iBAClD;;;AAI5B,WAAW,6BAA6B;AACxC,WAAW,sBAAsB"}

package/dist/dev/define/background/skin.css

@@ -0,0 +1,27 @@
+background-video-player {
+  display: contents;
+}
+
+background-video-skin {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  --media-object-fit: cover;
+  object-fit: var(--media-object-fit);
+}
+
+background-video-skin > [slot="media"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+background-video-skin > img,
+background-video-skin > picture {
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}

package/dist/dev/define/background/skin.d.ts

@@ -0,0 +1,20 @@
+import { ReactiveElement } from "@videojs/element";
+
+//#region src/define/background/skin.d.ts
+declare function getTemplateHTML(_attrs: Record<string, string>): string;
+declare class BackgroundVideoSkinElement extends ReactiveElement {
+  static readonly tagName = "background-video-skin";
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;
+  }
+}
+//#endregion
+export { BackgroundVideoSkinElement };
+//# sourceMappingURL=skin.d.ts.map

package/dist/dev/define/background/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/background/skin.ts"],"mappings":";;;iBAIS,eAAA,CAAgB,MAAA,EAAQ,MAAA;AAAA,cAQpB,0BAAA,SAAmC,eAAA;EAAA,gBAC9B,OAAA;EAAA,OACT,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;;;QAchB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,0BAAA,CAA2B,OAAA,GAAU,0BAAA;EAAA;AAAA"}

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

@@ -0,0 +1,35 @@
+import { safeDefine } from "../safe-define.js";
+import { ReactiveElement } from "@videojs/element";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+
+//#region src/define/background/skin.ts
+function getTemplateHTML(_attrs) {
+	return `
+    <media-container>
+      <slot name="media" slot="media"></slot>
+    </media-container>
+  `;
+}
+var BackgroundVideoSkinElement = class extends ReactiveElement {
+	static {
+		this.tagName = "background-video-skin";
+	}
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));
+		}
+	}
+};
+safeDefine(BackgroundVideoSkinElement);
+
+//#endregion
+export { BackgroundVideoSkinElement };
+//# sourceMappingURL=skin.js.map

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

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

package/dist/dev/define/background/video.d.ts

@@ -0,0 +1,2 @@
+import { BackgroundVideoElement } from "../media/background-video.js";
+export { BackgroundVideoElement };

package/dist/dev/define/background/video.js

@@ -0,0 +1,3 @@
+import { BackgroundVideoElement } from "../media/background-video.js";
+
+export { BackgroundVideoElement };

package/dist/dev/define/media/background-video.d.ts

@@ -0,0 +1,14 @@
+import { BackgroundVideo } from "../../media/background-video/index.js";
+
+//#region src/define/media/background-video.d.ts
+declare class BackgroundVideoElement extends BackgroundVideo {
+  static readonly tagName = "background-video";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [BackgroundVideoElement.tagName]: BackgroundVideoElement;
+  }
+} //# sourceMappingURL=background-video.d.ts.map
+//#endregion
+export { BackgroundVideoElement };
+//# sourceMappingURL=background-video.d.ts.map

package/dist/dev/define/media/background-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-video.d.ts","names":[],"sources":["../../../../src/define/media/background-video.ts"],"mappings":";;;cAGa,sBAAA,SAA+B,eAAA;EAAA,gBAC1B,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,sBAAA,CAAuB,OAAA,GAAU,sBAAA;EAAA;AAAA"}

package/dist/dev/define/media/background-video.js

@@ -0,0 +1,14 @@
+import { safeDefine } from "../safe-define.js";
+import { BackgroundVideo } from "../../media/background-video/index.js";
+
+//#region src/define/media/background-video.ts
+var BackgroundVideoElement = class extends BackgroundVideo {
+	static {
+		this.tagName = "background-video";
+	}
+};
+safeDefine(BackgroundVideoElement);
+
+//#endregion
+export { BackgroundVideoElement };
+//# sourceMappingURL=background-video.js.map

package/dist/dev/define/media/background-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-video.js","names":[],"sources":["../../../../src/define/media/background-video.ts"],"sourcesContent":["import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n  static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,WAAW,uBAAuB"}

package/dist/dev/define/media/container.d.ts

@@ -0,0 +1,9 @@
+import { MediaContainerElement } from "../../media/container-element.js";
+
+//#region src/define/media/container.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [MediaContainerElement.tagName]: MediaContainerElement;
+  }
+} //# sourceMappingURL=container.d.ts.map
+//# sourceMappingURL=container.d.ts.map

package/dist/dev/define/media/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../../src/define/media/container.ts"],"mappings":";;;QAKQ,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,qBAAA,CAAsB,OAAA,GAAU,qBAAA;EAAA;AAAA"}

package/dist/dev/define/media/container.js

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

package/dist/dev/define/media/container.js.map

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

package/dist/dev/define/media/hls-video.d.ts

@@ -0,0 +1,14 @@
+import { HlsVideo } from "../../media/hls-video/index.js";
+
+//#region src/define/media/hls-video.d.ts
+declare class HlsVideoElement extends HlsVideo {
+  static readonly tagName = "hls-video";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [HlsVideoElement.tagName]: HlsVideoElement;
+  }
+} //# sourceMappingURL=hls-video.d.ts.map
+//#endregion
+export { HlsVideoElement };
+//# sourceMappingURL=hls-video.d.ts.map

package/dist/dev/define/media/hls-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hls-video.d.ts","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"mappings":";;;cAGa,eAAA,SAAwB,QAAA;EAAA,gBACnB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,eAAA,CAAgB,OAAA,GAAU,eAAA;EAAA;AAAA"}

package/dist/dev/define/media/hls-video.js

@@ -0,0 +1,14 @@
+import { safeDefine } from "../safe-define.js";
+import { HlsVideo } from "../../media/hls-video/index.js";
+
+//#region src/define/media/hls-video.ts
+var HlsVideoElement = class extends HlsVideo {
+	static {
+		this.tagName = "hls-video";
+	}
+};
+safeDefine(HlsVideoElement);
+
+//#endregion
+export { HlsVideoElement };
+//# sourceMappingURL=hls-video.js.map

package/dist/dev/define/media/hls-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hls-video.js","names":[],"sources":["../../../../src/define/media/hls-video.ts"],"sourcesContent":["import { HlsVideo } from '../../media/hls-video';\nimport { safeDefine } from '../safe-define';\n\nexport class HlsVideoElement extends HlsVideo {\n  static readonly tagName = 'hls-video';\n}\n\nsafeDefine(HlsVideoElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [HlsVideoElement.tagName]: HlsVideoElement;\n  }\n}\n"],"mappings":";;;;AAGA,IAAa,kBAAb,cAAqC,SAAS;;iBAClB;;;AAG5B,WAAW,gBAAgB"}

package/dist/dev/define/media/simple-hls-video.d.ts

@@ -0,0 +1,14 @@
+import { SimpleHlsVideo } from "../../media/simple-hls-video/index.js";
+
+//#region src/define/media/simple-hls-video.d.ts
+declare class SimpleHlsVideoElement extends SimpleHlsVideo {
+  static readonly tagName = "simple-hls-video";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [SimpleHlsVideoElement.tagName]: SimpleHlsVideoElement;
+  }
+} //# sourceMappingURL=simple-hls-video.d.ts.map
+//#endregion
+export { SimpleHlsVideoElement };
+//# sourceMappingURL=simple-hls-video.d.ts.map

package/dist/dev/define/media/simple-hls-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-hls-video.d.ts","names":[],"sources":["../../../../src/define/media/simple-hls-video.ts"],"mappings":";;;cAEa,qBAAA,SAA8B,cAAA;EAAA,gBACzB,OAAA;AAAA;AAAA,QAKV,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,qBAAA,CAAsB,OAAA,GAAU,qBAAA;EAAA;AAAA"}

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

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

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

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

package/dist/dev/define/safe-define.d.ts

@@ -0,0 +1,9 @@
+//#region src/define/safe-define.d.ts
+type DefinableElement = CustomElementConstructor & {
+  tagName: string;
+};
+/** Define a custom element only if not already registered. */
+declare function safeDefine(element: DefinableElement): void;
+//#endregion
+export { safeDefine };
+//# sourceMappingURL=safe-define.d.ts.map

package/dist/dev/define/safe-define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-define.d.ts","names":[],"sources":["../../../src/define/safe-define.ts"],"mappings":";KAAK,gBAAA,GAAmB,wBAAA;EAA6B,OAAA;AAAA;;iBAGrC,UAAA,CAAW,OAAA,EAAS,gBAAA"}

package/dist/dev/define/safe-define.js

@@ -0,0 +1,9 @@
+//#region src/define/safe-define.ts
+/** Define a custom element only if not already registered. */
+function safeDefine(element) {
+	if (!customElements.get(element.tagName)) customElements.define(element.tagName, element);
+}
+
+//#endregion
+export { safeDefine };
+//# sourceMappingURL=safe-define.js.map

package/dist/dev/define/safe-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-define.js","names":[],"sources":["../../../src/define/safe-define.ts"],"sourcesContent":["type DefinableElement = CustomElementConstructor & { tagName: string };\n\n/** Define a custom element only if not already registered. */\nexport function safeDefine(element: DefinableElement): void {\n  if (!customElements.get(element.tagName)) {\n    customElements.define(element.tagName, element);\n  }\n}\n"],"mappings":";;AAGA,SAAgB,WAAW,SAAiC;AAC1D,KAAI,CAAC,eAAe,IAAI,QAAQ,QAAQ,CACtC,gBAAe,OAAO,QAAQ,SAAS,QAAQ"}