@videojs/html 0.1.0-preview.10

package/dist/media-mute-button-DXq-JKvc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-mute-button-DXq-JKvc.js","names":[],"sources":["../src/define/media-mute-button.ts"],"sourcesContent":["import { MuteButtonElement } from '@/elements/mute-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-mute-button', MuteButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}

package/dist/media-mute-button-NVJF2EEW.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-play-button-Wt6RbYe5.js

@@ -0,0 +1,8 @@
+import { t as PlayButtonElement } from "./play-button-DP8VldNs.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-play-button.ts
+defineCustomElement("media-play-button", PlayButtonElement);
+
+//#endregion
+//# sourceMappingURL=media-play-button-Wt6RbYe5.js.map

package/dist/media-play-button-Wt6RbYe5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-play-button-Wt6RbYe5.js","names":[],"sources":["../src/define/media-play-button.ts"],"sourcesContent":["import { PlayButtonElement } from '@/elements/play-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-play-button', PlayButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}

package/dist/media-play-button-oq8yDlxe.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-popover-BtJmPv0E.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-popover-CpbBQOK2.js

@@ -0,0 +1,8 @@
+import { n as PopoverElement } from "./popover-ah61j3HR.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-popover.ts
+defineCustomElement("media-popover", PopoverElement);
+
+//#endregion
+//# sourceMappingURL=media-popover-CpbBQOK2.js.map

package/dist/media-popover-CpbBQOK2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-popover-CpbBQOK2.js","names":[],"sources":["../src/define/media-popover.ts"],"sourcesContent":["import { PopoverElement } from '@/elements/popover';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-popover', PopoverElement);\n"],"mappings":";;;;AAGA,oBAAoB,iBAAiB,eAAe"}

package/dist/media-preview-time-display-4YX5Rics.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-preview-time-display-DF6tOv7J.js

@@ -0,0 +1,8 @@
+import { t as PreviewTimeDisplayElement } from "./preview-time-display-DwLOj4CJ.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-preview-time-display.ts
+defineCustomElement("media-preview-time-display", PreviewTimeDisplayElement);
+
+//#endregion
+//# sourceMappingURL=media-preview-time-display-DF6tOv7J.js.map

package/dist/media-preview-time-display-DF6tOv7J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-preview-time-display-DF6tOv7J.js","names":[],"sources":["../src/define/media-preview-time-display.ts"],"sourcesContent":["import { PreviewTimeDisplayElement } from '@/elements/preview-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-preview-time-display', PreviewTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}

package/dist/media-skin-CxnuHwhu.js

@@ -0,0 +1,36 @@
+//#region src/media/media-skin.ts
+function getTemplateHTML() {
+	return `
+    <style>
+      :host {
+        display: block;
+      }
+
+      media-container {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <slot></slot>
+  `;
+}
+var MediaSkinElement = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
+		}
+	}
+};
+
+//#endregion
+export { MediaSkinElement as t };
+//# sourceMappingURL=media-skin-CxnuHwhu.js.map

package/dist/media-skin-CxnuHwhu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-skin-CxnuHwhu.js","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":["export function getTemplateHTML() {\n  return /* html */ `\n    <style>\n      :host {\n        display: block;\n      }\n\n      media-container {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n    <slot></slot>\n  `;\n}\n\nexport class MediaSkinElement extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML: () => string = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof MediaSkinElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkinElement).getTemplateHTML();\n    }\n  }\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;;;;;;;;;;;AAgBpB,IAAa,mBAAb,cAAsC,YAAY;;2BACrB,EAAE,MAAM,QAA0B;;;yBACtB;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAwC,kBAAkB;AAClF,QAAK,WAAY,YAAa,KAAK,YAAwC,iBAAiB"}

package/dist/media-skin-Di3vSHvS.d.ts

@@ -0,0 +1,11 @@
+//#region src/media/media-skin.d.ts
+declare class MediaSkinElement extends HTMLElement {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: () => string;
+  constructor();
+}
+//#endregion
+export { MediaSkinElement as t };
+//# sourceMappingURL=media-skin-Di3vSHvS.d.ts.map

package/dist/media-skin-Di3vSHvS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-skin-Di3vSHvS.d.ts","names":[],"sources":["../src/media/media-skin.ts"],"sourcesContent":[],"mappings":";AAiBa,cAAA,gBAAA,SAAyB,WAAA,CAAA;;UACS"}

package/dist/media-time-slider-DFfiWHUh.js

@@ -0,0 +1,12 @@
+import { a as TimeSliderThumbElement, i as TimeSliderRootElement, n as TimeSliderPointerElement, o as TimeSliderTrackElement, r as TimeSliderProgressElement } from "./time-slider-DBWcZzRe.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-time-slider.ts
+defineCustomElement("media-time-slider", TimeSliderRootElement);
+defineCustomElement("media-time-slider-track", TimeSliderTrackElement);
+defineCustomElement("media-time-slider-progress", TimeSliderProgressElement);
+defineCustomElement("media-time-slider-pointer", TimeSliderPointerElement);
+defineCustomElement("media-time-slider-thumb", TimeSliderThumbElement);
+
+//#endregion
+//# sourceMappingURL=media-time-slider-DFfiWHUh.js.map

package/dist/media-time-slider-DFfiWHUh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-time-slider-DFfiWHUh.js","names":[],"sources":["../src/define/media-time-slider.ts"],"sourcesContent":["import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-time-slider', TimeSliderRootElement);\ndefineCustomElement('media-time-slider-track', TimeSliderTrackElement);\ndefineCustomElement('media-time-slider-progress', TimeSliderProgressElement);\ndefineCustomElement('media-time-slider-pointer', TimeSliderPointerElement);\ndefineCustomElement('media-time-slider-thumb', TimeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,sBAAsB;AAC/D,oBAAoB,2BAA2B,uBAAuB;AACtE,oBAAoB,8BAA8B,0BAA0B;AAC5E,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,2BAA2B,uBAAuB"}

package/dist/media-time-slider-DvMnfYXZ.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-tooltip-BqV17mdM.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/media-tooltip-RjL5rqLT.js

@@ -0,0 +1,8 @@
+import { t as TooltipElement } from "./tooltip-O0U-gkDS.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-tooltip.ts
+defineCustomElement("media-tooltip", TooltipElement);
+
+//#endregion
+//# sourceMappingURL=media-tooltip-RjL5rqLT.js.map

package/dist/media-tooltip-RjL5rqLT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-tooltip-RjL5rqLT.js","names":[],"sources":["../src/define/media-tooltip.ts"],"sourcesContent":["import { TooltipElement } from '@/elements/tooltip';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-tooltip', TooltipElement);\n"],"mappings":";;;;AAGA,oBAAoB,iBAAiB,eAAe"}

package/dist/media-volume-slider-DHV-7FOd.js

@@ -0,0 +1,11 @@
+import { a as VolumeSliderTrackElement, i as VolumeSliderThumbElement, n as VolumeSliderIndicatorElement, r as VolumeSliderRootElement } from "./volume-slider-cwSYSsFC.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-volume-slider.ts
+defineCustomElement("media-volume-slider", VolumeSliderRootElement);
+defineCustomElement("media-volume-slider-track", VolumeSliderTrackElement);
+defineCustomElement("media-volume-slider-indicator", VolumeSliderIndicatorElement);
+defineCustomElement("media-volume-slider-thumb", VolumeSliderThumbElement);
+
+//#endregion
+//# sourceMappingURL=media-volume-slider-DHV-7FOd.js.map

package/dist/media-volume-slider-DHV-7FOd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-volume-slider-DHV-7FOd.js","names":[],"sources":["../src/define/media-volume-slider.ts"],"sourcesContent":["import { VolumeSliderIndicatorElement, VolumeSliderRootElement, VolumeSliderThumbElement, VolumeSliderTrackElement } from '@/elements/volume-slider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-volume-slider', VolumeSliderRootElement);\ndefineCustomElement('media-volume-slider-track', VolumeSliderTrackElement);\ndefineCustomElement('media-volume-slider-indicator', VolumeSliderIndicatorElement);\ndefineCustomElement('media-volume-slider-thumb', VolumeSliderThumbElement);\n"],"mappings":";;;;AAGA,oBAAoB,uBAAuB,wBAAwB;AACnE,oBAAoB,6BAA6B,yBAAyB;AAC1E,oBAAoB,iCAAiC,6BAA6B;AAClF,oBAAoB,6BAA6B,yBAAyB"}

package/dist/media-volume-slider-DP47VLVi.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/mute-button-BCN9DDLN.js

@@ -0,0 +1,39 @@
+import { r as toConnectedHTMLComponent } from "./component-factory-vR-5t251.js";
+import { t as ButtonElement } from "./button-Bu1mGG-F.js";
+import { muteButtonStateDefinition } from "@videojs/core/store";
+import { memoize } from "@videojs/utils";
+
+//#region src/elements/mute-button.ts
+const muteButtonCreateRequestMethods = memoize(muteButtonStateDefinition.createRequestMethods);
+const getMuteButtonState = (_element, mediaStore) => {
+	return {
+		...muteButtonStateDefinition.stateTransform(mediaStore.getState()),
+		...muteButtonCreateRequestMethods(mediaStore.dispatch)
+	};
+};
+const getMuteButtonProps = (_element, state) => {
+	return {
+		"data-muted": state.muted,
+		"data-volume-level": state.volumeLevel,
+		role: "button",
+		tabindex: "0",
+		"aria-label": state.muted ? "unmute" : "mute",
+		"data-tooltip": state.muted ? "Unmute" : "Mute"
+	};
+};
+var MuteButton = class extends ButtonElement {
+	handleEvent(event) {
+		super.handleEvent(event);
+		const { type } = event;
+		const state = this._state;
+		if (state) {
+			if (type === "click") if (state.volumeLevel === "off") state.requestUnmute();
+			else state.requestMute();
+		}
+	}
+};
+const MuteButtonElement = toConnectedHTMLComponent(MuteButton, getMuteButtonState, getMuteButtonProps, "MuteButton");
+
+//#endregion
+export { MuteButtonElement as t };
+//# sourceMappingURL=mute-button-BCN9DDLN.js.map

package/dist/mute-button-BCN9DDLN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button-BCN9DDLN.js","names":["getMuteButtonState: StateHook<MuteButton, MuteButtonStateWithMethods>","getMuteButtonProps: PropsHook<MuteButton, MuteButtonStateWithMethods>","MuteButtonElement: ConnectedComponentConstructor<MuteButton, MuteButtonStateWithMethods>"],"sources":["../src/elements/mute-button.ts"],"sourcesContent":["import type { MuteButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { memoize } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\ntype MuteButtonStateWithMethods = Prettify<MuteButtonState & ReturnType<typeof muteButtonStateDefinition.createRequestMethods>>;\n\nconst muteButtonCreateRequestMethods = memoize(muteButtonStateDefinition.createRequestMethods);\n\nexport const getMuteButtonState: StateHook<MuteButton, MuteButtonStateWithMethods> = (_element, mediaStore) => {\n  return {\n    ...muteButtonStateDefinition.stateTransform(mediaStore.getState()),\n    ...muteButtonCreateRequestMethods(mediaStore.dispatch),\n  };\n};\n\nexport const getMuteButtonProps: PropsHook<MuteButton, MuteButtonStateWithMethods> = (_element, state) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-muted': state.muted,\n    'data-volume-level': state.volumeLevel,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.muted ? 'unmute' : 'mute',\n    /** tooltip */\n    'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n  return baseProps;\n};\n\nexport class MuteButton extends ButtonElement {\n  _state: MuteButtonStateWithMethods | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n\n    if (state) {\n      if (type === 'click') {\n        if (state.volumeLevel === 'off') {\n          state.requestUnmute();\n        } else {\n          state.requestMute();\n        }\n      }\n    }\n  }\n}\n\nexport const MuteButtonElement: ConnectedComponentConstructor<MuteButton, MuteButtonStateWithMethods> = toConnectedHTMLComponent(\n  MuteButton,\n  getMuteButtonState,\n  getMuteButtonProps,\n  'MuteButton',\n);\n"],"mappings":";;;;;;AAYA,MAAM,iCAAiC,QAAQ,0BAA0B,qBAAqB;AAE9F,MAAaA,sBAAyE,UAAU,eAAe;AAC7G,QAAO;EACL,GAAG,0BAA0B,eAAe,WAAW,UAAU,CAAC;EAClE,GAAG,+BAA+B,WAAW,SAAS;EACvD;;AAGH,MAAaC,sBAAyE,UAAU,UAAU;AAgBxG,QAfuC;EAErC,cAAc,MAAM;EACpB,qBAAqB,MAAM;EAG3B,MAAM;EACN,UAAU;EACV,cAAc,MAAM,QAAQ,WAAW;EAEvC,gBAAgB,MAAM,QAAQ,WAAW;EAI1C;;AAIH,IAAa,aAAb,cAAgC,cAAc;CAG5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AAEnB,MAAI,OACF;OAAI,SAAS,QACX,KAAI,MAAM,gBAAgB,MACxB,OAAM,eAAe;OAErB,OAAM,aAAa;;;;AAO7B,MAAaC,oBAA2F,yBACtG,YACA,oBACA,oBACA,aACD"}

package/dist/play-button-DP8VldNs.js

@@ -0,0 +1,40 @@
+import { r as toConnectedHTMLComponent } from "./component-factory-vR-5t251.js";
+import { t as ButtonElement } from "./button-Bu1mGG-F.js";
+import { playButtonStateDefinition } from "@videojs/core/store";
+import { memoize } from "@videojs/utils";
+
+//#region src/elements/play-button.ts
+const playButtonCreateRequestMethods = memoize(playButtonStateDefinition.createRequestMethods);
+/**
+* PlayButton state hook - equivalent to React's usePlayButtonState
+* Handles media store state subscription and transformation
+*/
+const getPlayButtonState = (_element, mediaStore) => {
+	return {
+		...playButtonStateDefinition.stateTransform(mediaStore.getState()),
+		...playButtonCreateRequestMethods(mediaStore.dispatch)
+	};
+};
+const getPlayButtonProps = (_element, state) => {
+	return {
+		"data-paused": state.paused,
+		role: "button",
+		tabindex: "0",
+		"aria-label": state.paused ? "play" : "pause",
+		"data-tooltip": state.paused ? "Play" : "Pause"
+	};
+};
+var PlayButton = class extends ButtonElement {
+	handleEvent(event) {
+		super.handleEvent(event);
+		const { type } = event;
+		const state = this._state;
+		if (state && type === "click") if (state.paused) state.requestPlay();
+		else state.requestPause();
+	}
+};
+const PlayButtonElement = toConnectedHTMLComponent(PlayButton, getPlayButtonState, getPlayButtonProps, "PlayButton");
+
+//#endregion
+export { PlayButtonElement as t };
+//# sourceMappingURL=play-button-DP8VldNs.js.map

package/dist/play-button-DP8VldNs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button-DP8VldNs.js","names":["getPlayButtonState: StateHook<PlayButton, PlayButtonStateWithMethods>","getPlayButtonProps: PropsHook<PlayButton, PlayButtonStateWithMethods>","PlayButtonElement: ConnectedComponentConstructor<PlayButton, PlayButtonStateWithMethods>"],"sources":["../src/elements/play-button.ts"],"sourcesContent":["import type { PlayButtonState } from '@videojs/core/store';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\nimport { memoize } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\nimport { ButtonElement } from './button';\n\ntype PlayButtonStateWithMethods = Prettify<PlayButtonState & ReturnType<typeof playButtonStateDefinition.createRequestMethods>>;\n\nconst playButtonCreateRequestMethods = memoize(playButtonStateDefinition.createRequestMethods);\n\n/**\n * PlayButton state hook - equivalent to React's usePlayButtonState\n * Handles media store state subscription and transformation\n */\nexport const getPlayButtonState: StateHook<PlayButton, PlayButtonStateWithMethods> = (_element, mediaStore) => {\n  return {\n    ...playButtonStateDefinition.stateTransform(mediaStore.getState()),\n    ...playButtonCreateRequestMethods(mediaStore.dispatch),\n  };\n};\n\nexport const getPlayButtonProps: PropsHook<PlayButton, PlayButtonStateWithMethods> = (_element, state) => {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props */\n    'data-paused': state.paused,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    tabindex: '0',\n    'aria-label': state.paused ? 'play' : 'pause',\n    /** tooltip */\n    'data-tooltip': state.paused ? 'Play' : 'Pause',\n    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */\n    /** external props spread last to allow for overriding */\n    // ...props,\n  };\n\n  return baseProps;\n};\n\nexport class PlayButton extends ButtonElement {\n  _state: PlayButtonStateWithMethods | undefined;\n\n  handleEvent(event: Event): void {\n    super.handleEvent(event);\n\n    const { type } = event;\n    const state = this._state;\n    if (state && type === 'click') {\n      if (state.paused) {\n        state.requestPlay();\n      } else {\n        state.requestPause();\n      }\n    }\n  }\n}\n\nexport const PlayButtonElement: ConnectedComponentConstructor<PlayButton, PlayButtonStateWithMethods> = toConnectedHTMLComponent(\n  PlayButton,\n  getPlayButtonState,\n  getPlayButtonProps,\n  'PlayButton',\n);\n"],"mappings":";;;;;;AAWA,MAAM,iCAAiC,QAAQ,0BAA0B,qBAAqB;;;;;AAM9F,MAAaA,sBAAyE,UAAU,eAAe;AAC7G,QAAO;EACL,GAAG,0BAA0B,eAAe,WAAW,UAAU,CAAC;EAClE,GAAG,+BAA+B,WAAW,SAAS;EACvD;;AAGH,MAAaC,sBAAyE,UAAU,UAAU;AAgBxG,QAfuC;EAErC,eAAe,MAAM;EAGrB,MAAM;EACN,UAAU;EACV,cAAc,MAAM,SAAS,SAAS;EAEtC,gBAAgB,MAAM,SAAS,SAAS;EAIzC;;AAKH,IAAa,aAAb,cAAgC,cAAc;CAG5C,YAAY,OAAoB;AAC9B,QAAM,YAAY,MAAM;EAExB,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,KAAK;AACnB,MAAI,SAAS,SAAS,QACpB,KAAI,MAAM,OACR,OAAM,aAAa;MAEnB,OAAM,cAAc;;;AAM5B,MAAaC,oBAA2F,yBACtG,YACA,oBACA,oBACA,aACD"}

package/dist/popover-ah61j3HR.js

@@ -0,0 +1,63 @@
+import { n as getPropsFromAttrs, r as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-vR-5t251.js";
+import { getDocumentOrShadowRoot } from "@videojs/utils/dom";
+import { Popover } from "@videojs/core";
+
+//#region src/elements/popover.ts
+const getPopoverState = (element, _mediaStore) => {
+	return { ...getCoreState(Popover, getPropsFromAttrs(element)) };
+};
+const getPopoverProps = (element, state) => {
+	if (state._popoverElement !== element) state._setPopoverElement(element);
+	const triggerElement = getDocumentOrShadowRoot(element)?.querySelector(`[commandfor="${element.id}"]`);
+	if (state._triggerElement !== triggerElement) state._setTriggerElement(triggerElement);
+	const mediaContainer = element.closest(element.collisionBoundary ? `#${element.collisionBoundary}` : "media-container");
+	if (state._collisionBoundaryElement !== mediaContainer) state._setCollisionBoundaryElement(mediaContainer);
+	return {
+		"data-side": state.placement,
+		"data-starting-style": state._transitionStatus === "initial",
+		"data-open": state._transitionStatus === "initial" || state._transitionStatus === "open",
+		"data-ending-style": state._transitionStatus === "close" || state._transitionStatus === "unmounted",
+		"data-closed": state._transitionStatus === "close" || state._transitionStatus === "unmounted",
+		style: { ...state._popoverStyle }
+	};
+};
+var Popover$1 = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"id",
+			"open-on-hover",
+			"delay",
+			"close-delay",
+			"side",
+			"side-offset",
+			"collision-padding",
+			"collision-boundary"
+		];
+	}
+	get openOnHover() {
+		return this.hasAttribute("open-on-hover");
+	}
+	get delay() {
+		return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
+	}
+	get closeDelay() {
+		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
+	}
+	get side() {
+		return this.getAttribute("side");
+	}
+	get sideOffset() {
+		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
+	}
+	get collisionPadding() {
+		return Number.parseInt(this.getAttribute("collision-padding") ?? "0", 10);
+	}
+	get collisionBoundary() {
+		return this.getAttribute("collision-boundary");
+	}
+};
+const PopoverElement = toConnectedHTMLComponent(Popover$1, getPopoverState, getPopoverProps, "Popover");
+
+//#endregion
+export { PopoverElement as n, getPopoverProps as r, Popover$1 as t };
+//# sourceMappingURL=popover-ah61j3HR.js.map

package/dist/popover-ah61j3HR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-ah61j3HR.js","names":["getPopoverState: StateHook<Popover, PopoverState>","CorePopover","getPopoverProps: PropsHook<Popover, PopoverState>","Popover","PopoverElement: ConnectedComponentConstructor<Popover, PopoverState>"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import type { PopoverState as CorePopoverState } from '@videojs/core';\nimport type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\nimport { Popover as CorePopover } from '@videojs/core';\nimport { getDocumentOrShadowRoot } from '@videojs/utils/dom';\nimport { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';\n\ntype Placement = CorePopoverState['placement'];\n\nexport type PopoverState = Prettify<ReturnType<CorePopover['getState']>>;\n\nexport const getPopoverState: StateHook<Popover, PopoverState> = (element, _mediaStore) => {\n  const coreState = getCoreState(CorePopover, getPropsFromAttrs(element));\n  return {\n    ...coreState,\n  };\n};\n\nexport const getPopoverProps: PropsHook<Popover, PopoverState> = (element, state) => {\n  if (state._popoverElement !== element) {\n    state._setPopoverElement(element);\n  }\n\n  const triggerElement = getDocumentOrShadowRoot(element)?.querySelector(\n    `[commandfor=\"${element.id}\"]`,\n  ) as HTMLElement | null;\n\n  if (state._triggerElement !== triggerElement) {\n    state._setTriggerElement(triggerElement);\n  }\n\n  const mediaContainer = element.closest(element.collisionBoundary\n    ? `#${element.collisionBoundary}`\n    : 'media-container') as HTMLElement | null;\n\n  if (state._collisionBoundaryElement !== mediaContainer) {\n    state._setCollisionBoundaryElement(mediaContainer);\n  }\n\n  return {\n    'data-side': state.placement,\n    'data-starting-style': state._transitionStatus === 'initial',\n    'data-open': state._transitionStatus === 'initial' || state._transitionStatus === 'open',\n    'data-ending-style': state._transitionStatus === 'close' || state._transitionStatus === 'unmounted',\n    'data-closed': state._transitionStatus === 'close' || state._transitionStatus === 'unmounted',\n    style: {\n      ...state._popoverStyle,\n    },\n  };\n};\n\nexport class Popover extends HTMLElement {\n  static get observedAttributes(): string[] {\n    return [\n      'id',\n      'open-on-hover',\n      'delay',\n      'close-delay',\n      'side',\n      'side-offset',\n      'collision-padding',\n      'collision-boundary',\n    ];\n  }\n\n  get openOnHover(): boolean {\n    return this.hasAttribute('open-on-hover');\n  }\n\n  get delay(): number {\n    return Number.parseInt(this.getAttribute('delay') ?? '0', 10);\n  }\n\n  get closeDelay(): number {\n    return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);\n  }\n\n  get side(): Placement {\n    return this.getAttribute('side') as Placement;\n  }\n\n  get sideOffset(): number {\n    return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n  }\n\n  get collisionPadding(): number {\n    return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10);\n  }\n\n  get collisionBoundary(): string | null {\n    return this.getAttribute('collision-boundary');\n  }\n}\n\nexport const PopoverElement: ConnectedComponentConstructor<Popover, PopoverState> = toConnectedHTMLComponent(\n  Popover,\n  getPopoverState,\n  getPopoverProps,\n  'Popover',\n);\n"],"mappings":";;;;;AAWA,MAAaA,mBAAqD,SAAS,gBAAgB;AAEzF,QAAO,EACL,GAFgB,aAAaC,SAAa,kBAAkB,QAAQ,CAAC,EAGtE;;AAGH,MAAaC,mBAAqD,SAAS,UAAU;AACnF,KAAI,MAAM,oBAAoB,QAC5B,OAAM,mBAAmB,QAAQ;CAGnC,MAAM,iBAAiB,wBAAwB,QAAQ,EAAE,cACvD,gBAAgB,QAAQ,GAAG,IAC5B;AAED,KAAI,MAAM,oBAAoB,eAC5B,OAAM,mBAAmB,eAAe;CAG1C,MAAM,iBAAiB,QAAQ,QAAQ,QAAQ,oBAC3C,IAAI,QAAQ,sBACZ,kBAAkB;AAEtB,KAAI,MAAM,8BAA8B,eACtC,OAAM,6BAA6B,eAAe;AAGpD,QAAO;EACL,aAAa,MAAM;EACnB,uBAAuB,MAAM,sBAAsB;EACnD,aAAa,MAAM,sBAAsB,aAAa,MAAM,sBAAsB;EAClF,qBAAqB,MAAM,sBAAsB,WAAW,MAAM,sBAAsB;EACxF,eAAe,MAAM,sBAAsB,WAAW,MAAM,sBAAsB;EAClF,OAAO,EACL,GAAG,MAAM,eACV;EACF;;AAGH,IAAaC,YAAb,cAA6B,YAAY;CACvC,WAAW,qBAA+B;AACxC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;;CAGH,IAAI,cAAuB;AACzB,SAAO,KAAK,aAAa,gBAAgB;;CAG3C,IAAI,QAAgB;AAClB,SAAO,OAAO,SAAS,KAAK,aAAa,QAAQ,IAAI,KAAK,GAAG;;CAG/D,IAAI,aAAqB;AACvB,SAAO,OAAO,SAAS,KAAK,aAAa,cAAc,IAAI,KAAK,GAAG;;CAGrE,IAAI,OAAkB;AACpB,SAAO,KAAK,aAAa,OAAO;;CAGlC,IAAI,aAAqB;AACvB,SAAO,OAAO,SAAS,KAAK,aAAa,cAAc,IAAI,KAAK,GAAG;;CAGrE,IAAI,mBAA2B;AAC7B,SAAO,OAAO,SAAS,KAAK,aAAa,oBAAoB,IAAI,KAAK,GAAG;;CAG3E,IAAI,oBAAmC;AACrC,SAAO,KAAK,aAAa,qBAAqB;;;AAIlD,MAAaC,iBAAuE,yBAClFD,WACA,iBACA,iBACA,UACD"}

package/dist/preview-time-display-DwLOj4CJ.js

@@ -0,0 +1,36 @@
+import { r as toConnectedHTMLComponent } from "./component-factory-vR-5t251.js";
+import { previewTimeDisplayStateDefinition } from "@videojs/core/store";
+import { formatDisplayTime } from "@videojs/utils";
+
+//#region src/elements/preview-time-display.ts
+const getPreviewTimeDisplayState = (_element, mediaStore) => {
+	return { ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()) };
+};
+const getPreviewTimeDisplayProps = (_element, _state) => {
+	return {};
+};
+var PreviewTimeDisplay = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.observedAttributes = ["show-remaining"];
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) this.attachShadow(this.constructor.shadowRootOptions);
+	}
+	get showRemaining() {
+		return this.hasAttribute("show-remaining");
+	}
+	_update(_props, state) {
+		/** @TODO Should this live here or elsewhere? (CJP) */
+		const timeLabel = formatDisplayTime(state.previewTime);
+		if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
+	}
+};
+const PreviewTimeDisplayElement = toConnectedHTMLComponent(PreviewTimeDisplay, getPreviewTimeDisplayState, getPreviewTimeDisplayProps, "PreviewTimeDisplay");
+
+//#endregion
+export { PreviewTimeDisplayElement as t };
+//# sourceMappingURL=preview-time-display-DwLOj4CJ.js.map

package/dist/preview-time-display-DwLOj4CJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-time-display-DwLOj4CJ.js","names":["getPreviewTimeDisplayState: StateHook<PreviewTimeDisplay, PreviewTimeDisplayState>","getPreviewTimeDisplayProps: PropsHook<PreviewTimeDisplay, PreviewTimeDisplayState>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplay, PreviewTimeDisplayState>"],"sources":["../src/elements/preview-time-display.ts"],"sourcesContent":["import type { PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport const getPreviewTimeDisplayState: StateHook<PreviewTimeDisplay, PreviewTimeDisplayState> = (_element, mediaStore) => {\n  return {\n    ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()),\n    // Preview time display is read-only, so no request methods needed\n  };\n};\n\nexport const getPreviewTimeDisplayProps: PropsHook<PreviewTimeDisplay, PreviewTimeDisplayState> = (_element, _state) => {\n  return {};\n};\n\nexport class PreviewTimeDisplay extends HTMLElement {\n  static shadowRootOptions = {\n    mode: 'open' as ShadowRootMode,\n  };\n\n  static observedAttributes: string[] = ['show-remaining'];\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof PreviewTimeDisplay).shadowRootOptions);\n    }\n  }\n\n  get showRemaining(): boolean {\n    return this.hasAttribute('show-remaining');\n  }\n\n  _update(_props: any, state: PreviewTimeDisplayState): void {\n    /** @TODO Should this live here or elsewhere? (CJP) */\n    const timeLabel = formatDisplayTime(state.previewTime);\n\n    if (this.shadowRoot) {\n      this.shadowRoot.textContent = timeLabel;\n    }\n  }\n}\n\nexport const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplay, PreviewTimeDisplayState> = toConnectedHTMLComponent(\n  PreviewTimeDisplay,\n  getPreviewTimeDisplayState,\n  getPreviewTimeDisplayProps,\n  'PreviewTimeDisplay',\n);\n"],"mappings":";;;;;AAQA,MAAaA,8BAAsF,UAAU,eAAe;AAC1H,QAAO,EACL,GAAG,kCAAkC,eAAe,WAAW,UAAU,CAAC,EAE3E;;AAGH,MAAaC,8BAAsF,UAAU,WAAW;AACtH,QAAO,EAAE;;AAGX,IAAa,qBAAb,cAAwC,YAAY;;2BACvB,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAExD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA0C,kBAAkB;;CAIxF,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,QAAQ,QAAa,OAAsC;;EAEzD,MAAM,YAAY,kBAAkB,MAAM,YAAY;AAEtD,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaC,4BAAwG,yBACnH,oBACA,4BACA,4BACA,qBACD"}

package/dist/skins/frosted.d.ts

@@ -0,0 +1,23 @@
+import "../video-provider-nSCfwA7l.js";
+import "../media-container-ChS9lZvf.js";
+import "../media-play-button-oq8yDlxe.js";
+import "../media-mute-button-NVJF2EEW.js";
+import "../media-volume-slider-DP47VLVi.js";
+import "../media-time-slider-DvMnfYXZ.js";
+import "../media-fullscreen-button-BgUK3lgu.js";
+import "../media-duration-display-qvm6YX-q.js";
+import "../media-current-time-display-Cd0rPAuj.js";
+import "../media-preview-time-display-4YX5Rics.js";
+import "../media-popover-BtJmPv0E.js";
+import "../media-tooltip-BqV17mdM.js";
+import "../index-LKrIp3Oo.js";
+import { t as MediaSkinElement } from "../media-skin-Di3vSHvS.js";
+
+//#region src/skins/frosted/index.d.ts
+declare function getTemplateHTML(): string;
+declare class MediaSkinFrostedElement extends MediaSkinElement {
+  static getTemplateHTML: () => string;
+}
+//#endregion
+export { MediaSkinFrostedElement, getTemplateHTML };
+//# sourceMappingURL=frosted.d.ts.map

package/dist/skins/frosted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frosted.d.ts","names":[],"sources":["../../src/skins/frosted/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cAqGH,uBAAA,SAAgC,gBAAA;EArG7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AAqGhB"}

package/dist/skins/frosted.js

@@ -0,0 +1,145 @@
+import "../component-factory-vR-5t251.js";
+import "../current-time-display-BNvqKqSQ.js";
+import "../duration-display-Dtl2RCNd.js";
+import "../button-Bu1mGG-F.js";
+import "../fullscreen-button-CKOv8Ywh.js";
+import "../mute-button-BCN9DDLN.js";
+import "../play-button-DP8VldNs.js";
+import "../popover-ah61j3HR.js";
+import "../preview-time-display-DwLOj4CJ.js";
+import "../time-slider-DBWcZzRe.js";
+import "../tooltip-O0U-gkDS.js";
+import "../volume-slider-cwSYSsFC.js";
+import "../media-container-BOL0PKuG.js";
+import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
+import "../video-provider-Bj9JwzDx.js";
+import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
+import "../icons-CuxuONCk.js";
+import "../video-provider-HuYjfSUk.js";
+import "../media-container-DwKSOa1h.js";
+import "../media-play-button-Wt6RbYe5.js";
+import "../media-mute-button-DXq-JKvc.js";
+import "../media-volume-slider-DHV-7FOd.js";
+import "../media-time-slider-DFfiWHUh.js";
+import "../media-fullscreen-button-CiG60HOW.js";
+import "../media-duration-display-6KTtxmm3.js";
+import "../media-current-time-display-Cr2LJaRo.js";
+import "../media-preview-time-display-DF6tOv7J.js";
+import "../media-popover-CpbBQOK2.js";
+import "../media-tooltip-RjL5rqLT.js";
+
+//#region src/skins/frosted/styles.css
+var styles_default = "media-container * {\n  box-sizing: border-box;\n}\n\nmedia-container {\n  position: relative;\n  isolation: isolate;\n  container: root / inline-size;\n  overflow: clip;\n  border-radius: var(--frosted-border-radius, 2rem);\n  background: oklab(0 0 0);\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\nmedia-container::before,\nmedia-container::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  border-radius: inherit;\n  z-index: 10;\n}\nmedia-container::before {\n  inset: 1px;\n  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\n}\nmedia-container::after {\n  inset: 0;\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\n}\n\n/* Fullscreen */\nmedia-container:fullscreen {\n  border-radius: 0;\n}\n\nmedia-container > ::slotted([slot='media']) {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* Media Container UI Overlay Styling */\nmedia-container > .overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: start;\n  pointer-events: none;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\n  backdrop-filter: saturate(1.5) brightness(0.9);\n  transition: opacity 0.15s ease-out;\n  transition-delay: 500ms;\n  opacity: 0;\n}\nmedia-container:hover > .overlay,\nmedia-container:has([data-paused]) > .overlay,\nmedia-container:has([aria-expanded='true']) > .overlay {\n  opacity: 1;\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n}\n\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\n.surface {\n  background-color: oklab(1 0 0 / 0.1);\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n  box-shadow:\n    inset 0 0 0 1px oklab(1 0 0 / 0.15),\n    0 0 0 1px oklab(0 0 0 / 0.15),\n    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\n    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\n}\n@media (prefers-reduced-transparency: reduce) {\n  .surface {\n    background-color: oklab(0 0 0 / 0.7);\n    box-shadow:\n      inset 0 0 0 1px oklab(0 0 0),\n      0 0 0 1px oklab(1 0 0 / 0.2);\n  }\n}\n@media (prefers-contrast: more) {\n  .surface {\n    background-color: oklab(0 0 0 / 0.9);\n    box-shadow:\n      inset 0 0 0 1px oklab(0 0 0),\n      0 0 0 1px oklab(1 0 0 / 0.2);\n  }\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n  position: absolute;\n  bottom: 0.75rem;\n  inset-inline: 0.75rem;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  border-radius: calc(infinity * 1px);\n  will-change: scale, transform, filter, opacity;\n  scale: 0.9;\n  opacity: 0;\n  filter: blur(8px);\n  transition-property: scale, transform, filter, opacity;\n  transition-delay: 500ms;\n  transition-duration: 300ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n  color: oklab(1 0 0);\n}\nmedia-container:hover > .control-bar,\nmedia-container:has([data-paused]) > .control-bar,\nmedia-container:has([aria-expanded='true']) > .control-bar {\n  opacity: 1;\n  scale: 1;\n  filter: blur(0px);\n  transition-delay: 0ms;\n  transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-controls {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n  padding-inline: 0.375rem;\n}\nmedia-current-time-display,\nmedia-duration-display {\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Generic Media Button Styling */\n.button {\n  display: grid;\n  flex-shrink: 0;\n  padding: 0.5rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: calc(infinity * 1px);\n  color: oklab(1 0 0 / 0.9);\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, color, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.button:hover,\n.button:focus-visible,\n.button[aria-expanded='true'] {\n  background-color: oklab(1 0 0 / 0.1);\n  color: oklab(1 0 0);\n  text-decoration: none;\n}\n.button:focus-visible {\n  outline-color: oklch(62.3% 0.214 259.815);\n  outline-offset: 2px;\n}\n.button[disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  filter: grayscale(1);\n}\n\n.button .icon {\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));\n}\n\n/* Media Play Button UI/Styles */\nmedia-play-button .icon {\n  opacity: 0;\n  transition: opacity 150ms linear;\n}\n\nmedia-play-button:not([data-paused]) .pause-icon,\nmedia-play-button[data-paused] .play-icon {\n  opacity: 1;\n}\n\n/* Media Fullscreen Button UI/Styles */\nmedia-fullscreen-button .icon {\n  display: none;\n}\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\n  display: inline;\n}\n\n/* One way to define the \"default visible\" icon (CJP) */\nmedia-mute-button .icon {\n  display: none;\n}\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\n  display: inline;\n}\n\n/* TimeSlider Component Styles */\n.slider {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n}\n\n/* Horizontal orientation styles */\n.slider[data-orientation='horizontal'] {\n  min-width: 5rem;\n  width: 100%;\n  height: 1.25rem;\n}\n\n/* Vertical orientation styles */\n.slider[data-orientation='vertical'] {\n  height: 5rem;\n  width: 1.25rem;\n}\n\n.slider-track {\n  position: relative;\n  isolation: isolate;\n  background-color: oklab(1 0 0 / 0.2);\n  border-radius: inherit;\n  overflow: hidden;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition: outline-offset 150ms ease-out;\n  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\n}\n\n/* Horizontal track styles */\n.slider-track[data-orientation='horizontal'] {\n  width: 100%;\n  height: 0.25rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n  width: 0.25rem;\n  height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n  outline-color: oklch(62.3% 0.214 259.815);\n  outline-offset: 6px;\n}\n\n.slider-thumb {\n  width: 0.625rem;\n  height: 0.625rem;\n  background-color: oklab(1 0 0);\n  border-radius: calc(infinity * 1px);\n  user-select: none;\n  z-index: 10;\n  box-shadow:\n    0 0 0 1px oklab(0 0 0 / 0.1),\n    0 1px 3px 0 oklab(0 0 0 / 0.15),\n    0 1px 2px -1px oklab(0 0 0 / 0.15);\n  opacity: 0;\n  transition-property: opacity, height, width;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slider-thumb:active {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n  opacity: 1;\n}\n.slider-track[data-orientation='horizontal'] .slider-thumb {\n  cursor: ew-resize;\n}\n.slider-track[data-orientation='vertical'] .slider-thumb {\n  cursor: ns-resize;\n}\n\n.slider-pointer {\n  background-color: oklab(1 0 0 / 0.2);\n  border-radius: inherit;\n}\n\n.slider-progress {\n  background-color: oklab(1 0 0);\n  border-radius: inherit;\n}\n\nmedia-preview-time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n.popup-animation {\n  transition-property: transform, scale, opacity, filter;\n  transition-duration: 200ms;\n  transform: scale(1);\n  transform-origin: bottom;\n  opacity: 1;\n  filter: blur(0px);\n}\n.popup-animation[data-starting-style],\n.popup-animation[data-ending-style] {\n  transform: scale(0);\n  opacity: 0;\n  filter: blur(8px);\n}\n.popup-animation[data-instant] {\n  transition-duration: 0ms;\n}\n\nmedia-popover {\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  padding: 0.75rem 0.25rem;\n  border-radius: calc(infinity * 1px);\n}\n\n/* Tooltip Component Styles */\nmedia-tooltip {\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: oklab(1 0 0);\n  padding: 0.25rem 0.625rem;\n  border-radius: calc(infinity * 1px);\n  font-size: 0.75rem;\n}\n\n.tooltip {\n  display: none;\n  white-space: nowrap;\n}\n\n[data-paused] + media-tooltip .play-tooltip,\n:not([data-paused]) + media-tooltip .pause-tooltip {\n  display: block;\n}\n\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\n  display: block;\n}\n";
+
+//#endregion
+//#region src/skins/frosted/index.ts
+function getTemplateHTML() {
+	return `
+    ${MediaSkinElement.getTemplateHTML()}
+    <style>${styles_default}</style>
+
+    <media-container>
+      <slot name="media" slot="media"></slot>
+
+      <div class="overlay"></div>
+
+      <div class="control-bar surface">
+        <!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
+
+        <media-play-button commandfor="play-tooltip" class="button">
+          <media-play-icon class="icon play-icon"></media-play-icon>
+          <media-pause-icon class="icon pause-icon"></media-pause-icon>
+        </media-play-button>
+        <media-tooltip
+          id="play-tooltip"
+          class="surface popup-animation"
+          popover="manual"
+          delay="500"
+          side="top"
+          side-offset="12"
+          collision-padding="12"
+        >
+          <span class="tooltip play-tooltip">Play</span>
+          <span class="tooltip pause-tooltip">Pause</span>
+        </media-tooltip>
+
+        <div class="time-controls">
+          <!-- Use the show-remaining attribute to show count down/remaining time -->
+          <media-current-time-display></media-current-time-display>
+
+          <media-time-slider commandfor="time-slider-tooltip" class="slider">
+            <media-time-slider-track class="slider-track">
+              <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
+              <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
+            </media-time-slider-track>
+            <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
+          </media-time-slider>
+          <media-tooltip
+            id="time-slider-tooltip"
+            class="surface popup-animation"
+            popover="manual"
+            track-cursor-axis="x"
+            side="top"
+            side-offset="18"
+            collision-padding="12"
+          >
+            <media-preview-time-display></media-preview-time-display>
+          </media-tooltip>
+
+          <media-duration-display></media-duration-display>
+        </div>
+
+        <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
+          <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
+          <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
+          <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
+        </media-mute-button>
+        <media-popover
+          id="volume-slider-popover"
+          class="surface popup-animation"
+          popover="manual"
+          open-on-hover
+          delay="200"
+          close-delay="100"
+          side="top"
+          side-offset="12"
+          collision-padding="12"
+        >
+          <media-volume-slider class="slider" orientation="vertical">
+            <media-volume-slider-track class="slider-track">
+              <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
+            </media-volume-slider-track>
+            <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
+          </media-volume-slider>
+        </media-popover>
+
+        <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
+          <media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
+          <media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
+        </media-fullscreen-button>
+        <media-tooltip
+          id="fullscreen-tooltip"
+          class="surface popup-animation"
+          popover="manual"
+          delay="500"
+          side="top"
+          side-offset="12"
+          collision-padding="12"
+        >
+          <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
+          <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
+        </media-tooltip>
+      </div>
+    </media-container>
+  `;
+}
+var MediaSkinFrostedElement = class extends MediaSkinElement {
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+defineCustomElement("media-skin-frosted", MediaSkinFrostedElement);
+
+//#endregion
+export { MediaSkinFrostedElement, getTemplateHTML };
+//# sourceMappingURL=frosted.js.map