@videojs/html 0.1.0-preview.10

package/dist/icons-CuxuONCk.js

@@ -0,0 +1,209 @@
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+import { SVG_ICONS } from "@videojs/icons";
+
+//#region src/icons/media-chrome-icon.ts
+function getTemplateHTML$9() {
+	return `
+    <style>
+      :host {
+        display: inline-block;
+      }
+      svg {
+        fill: currentColor;
+      }
+    </style>
+  `;
+}
+var MediaChromeIcon = class extends HTMLElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML$9;
+	}
+	constructor() {
+		super();
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
+		}
+	}
+};
+
+//#endregion
+//#region src/icons/media-fullscreen-enter-alt-icon.ts
+function getTemplateHTML$8() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-fullscreen-enter-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.fullscreenEnterAlt}
+  `;
+}
+var MediaFullscreenEnterAltIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$8;
+	}
+};
+defineCustomElement("media-fullscreen-enter-alt-icon", MediaFullscreenEnterAltIconElement);
+
+//#endregion
+//#region src/icons/media-fullscreen-enter-icon.ts
+function getTemplateHTML$7() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-fullscreen-enter-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.fullscreenEnter}
+  `;
+}
+var MediaFullscreenEnterIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$7;
+	}
+};
+defineCustomElement("media-fullscreen-enter-icon", MediaFullscreenEnterIconElement);
+
+//#endregion
+//#region src/icons/media-fullscreen-exit-alt-icon.ts
+function getTemplateHTML$6() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-fullscreen-exit-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.fullscreenExitAlt}
+  `;
+}
+var MediaFullscreenExitAltIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$6;
+	}
+};
+defineCustomElement("media-fullscreen-exit-alt-icon", MediaFullscreenExitAltIconElement);
+
+//#endregion
+//#region src/icons/media-fullscreen-exit-icon.ts
+function getTemplateHTML$5() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-fullscreen-exit-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.fullscreenExit}
+  `;
+}
+var MediaFullscreenExitIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$5;
+	}
+};
+defineCustomElement("media-fullscreen-exit-icon", MediaFullscreenExitIconElement);
+
+//#endregion
+//#region src/icons/media-pause-icon.ts
+function getTemplateHTML$4() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    ${SVG_ICONS.pause}
+  `;
+}
+var MediaPauseIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$4;
+	}
+};
+defineCustomElement("media-pause-icon", MediaPauseIconElement);
+
+//#endregion
+//#region src/icons/media-play-icon.ts
+function getTemplateHTML$3() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-play-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.play}
+  `;
+}
+var MediaPlayIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$3;
+	}
+};
+defineCustomElement("media-play-icon", MediaPlayIconElement);
+
+//#endregion
+//#region src/icons/media-volume-high-icon.ts
+function getTemplateHTML$2() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-play-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.volumeHigh}
+  `;
+}
+var MediaVolumeHighIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$2;
+	}
+};
+defineCustomElement("media-volume-high-icon", MediaVolumeHighIconElement);
+
+//#endregion
+//#region src/icons/media-volume-low-icon.ts
+function getTemplateHTML$1() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-play-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.volumeLow}
+  `;
+}
+var MediaVolumeLowIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML$1;
+	}
+};
+defineCustomElement("media-volume-low-icon", MediaVolumeLowIconElement);
+
+//#endregion
+//#region src/icons/media-volume-off-icon.ts
+function getTemplateHTML() {
+	return `
+    ${MediaChromeIcon.getTemplateHTML()}
+    <style>
+      :host {
+        display: var(--media-play-icon-display, inline-flex);
+      }
+    </style>
+    ${SVG_ICONS.volumeOff}
+  `;
+}
+var MediaVolumeOffIconElement = class extends MediaChromeIcon {
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+defineCustomElement("media-volume-off-icon", MediaVolumeOffIconElement);
+
+//#endregion
+//# sourceMappingURL=icons-CuxuONCk.js.map

package/dist/icons-CuxuONCk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-CuxuONCk.js","names":["getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML"],"sources":["../src/icons/media-chrome-icon.ts","../src/icons/media-fullscreen-enter-alt-icon.ts","../src/icons/media-fullscreen-enter-icon.ts","../src/icons/media-fullscreen-exit-alt-icon.ts","../src/icons/media-fullscreen-exit-icon.ts","../src/icons/media-pause-icon.ts","../src/icons/media-play-icon.ts","../src/icons/media-volume-high-icon.ts","../src/icons/media-volume-low-icon.ts","../src/icons/media-volume-off-icon.ts"],"sourcesContent":["export function getTemplateHTML() {\n  return /* html */ `\n    <style>\n      :host {\n        display: inline-block;\n      }\n      svg {\n        fill: currentColor;\n      }\n    </style>\n  `;\n}\n\nexport class MediaChromeIcon 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 MediaChromeIcon).shadowRootOptions);\n      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaChromeIcon).getTemplateHTML();\n    }\n  }\n}\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-enter-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenEnterAlt}\n  `;\n}\n\nexport class MediaFullscreenEnterAltIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-enter-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenEnter}\n  `;\n}\n\nexport class MediaFullscreenEnterIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-enter-icon', MediaFullscreenEnterIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-exit-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenExitAlt}\n  `;\n}\n\nexport class MediaFullscreenExitAltIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-fullscreen-exit-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.fullscreenExit}\n  `;\n}\n\nexport class MediaFullscreenExitIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-exit-icon', MediaFullscreenExitIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    ${SVG_ICONS.pause}\n  `;\n}\n\nexport class MediaPauseIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-pause-icon', MediaPauseIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.play}\n  `;\n}\n\nexport class MediaPlayIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-play-icon', MediaPlayIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.volumeHigh}\n  `;\n}\n\nexport class MediaVolumeHighIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-volume-high-icon', MediaVolumeHighIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.volumeLow}\n  `;\n}\n\nexport class MediaVolumeLowIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-volume-low-icon', MediaVolumeLowIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    ${MediaChromeIcon.getTemplateHTML()}\n    <style>\n      :host {\n        display: var(--media-play-icon-display, inline-flex);\n      }\n    </style>\n    ${SVG_ICONS.volumeOff}\n  `;\n}\n\nexport class MediaVolumeOffIconElement extends MediaChromeIcon {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-volume-off-icon', MediaVolumeOffIconElement);\n"],"mappings":";;;;AAAA,SAAgBA,oBAAkB;AAChC,QAAkB;;;;;;;;;;;AAYpB,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACtBA;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;AACjF,QAAK,WAAY,YAAa,KAAK,YAAuC,iBAAiB;;;;;;;ACjBjG,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,mBAAmB;;;AAInC,IAAa,qCAAb,cAAwD,gBAAgB;;yBAC/BA;;;AAGzC,oBAAoB,mCAAmC,mCAAmC;;;;AChB1F,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,gBAAgB;;;AAIhC,IAAa,kCAAb,cAAqD,gBAAgB;;yBAC5BA;;;AAGzC,oBAAoB,+BAA+B,gCAAgC;;;;AChBnF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,kBAAkB;;;AAIlC,IAAa,oCAAb,cAAuD,gBAAgB;;yBAC9BA;;;AAGzC,oBAAoB,kCAAkC,kCAAkC;;;;AChBxF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,eAAe;;;AAI/B,IAAa,iCAAb,cAAoD,gBAAgB;;yBAC3BA;;;AAGzC,oBAAoB,8BAA8B,+BAA+B;;;;AChBjF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;MAClC,UAAU,MAAM;;;AAItB,IAAa,wBAAb,cAA2C,gBAAgB;;yBAClBA;;;AAGzC,oBAAoB,oBAAoB,sBAAsB;;;;ACX9D,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,KAAK;;;AAIrB,IAAa,uBAAb,cAA0C,gBAAgB;;yBACjBA;;;AAGzC,oBAAoB,mBAAmB,qBAAqB;;;;AChB5D,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,WAAW;;;AAI3B,IAAa,6BAAb,cAAgD,gBAAgB;;yBACvBA;;;AAGzC,oBAAoB,0BAA0B,2BAA2B;;;;AChBzE,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,UAAU;;;AAI1B,IAAa,4BAAb,cAA+C,gBAAgB;;yBACtBA;;;AAGzC,oBAAoB,yBAAyB,0BAA0B;;;;AChBvE,SAAgB,kBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,UAAU;;;AAI1B,IAAa,4BAAb,cAA+C,gBAAgB;;yBACtB;;;AAGzC,oBAAoB,yBAAyB,0BAA0B"}

package/dist/icons.d.ts

@@ -0,0 +1 @@
+import "./index-LKrIp3Oo.js";

package/dist/icons.js

@@ -0,0 +1,2 @@
+import "./custom-element-3bDlB2XO.js";
+import "./icons-CuxuONCk.js";

package/dist/index-LKrIp3Oo.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,205 @@
+import { t as MediaSkinElement } from "./media-skin-Di3vSHvS.js";
+import { CurrentTimeDisplayState, DurationDisplayState, FullscreenButtonState, MediaStore, MuteButtonState, PlayButtonState, PreviewTimeDisplayState, fullscreenButtonStateDefinition, muteButtonStateDefinition, playButtonStateDefinition, timeSliderStateDefinition, volumeSliderStateDefinition } from "@videojs/core/store";
+import { Constructor, CustomElement } from "@open-wc/context-protocol";
+import { Popover, PopoverState, TimeSlider, Tooltip, VolumeSlider } from "@videojs/core";
+
+//#region src/utils/component-factory.d.ts
+
+interface ConnectedComponentConstructor<E extends HTMLElement, State> {
+  new (state: State): E;
+}
+//#endregion
+//#region src/elements/current-time-display.d.ts
+declare class CurrentTimeDisplay extends HTMLElement {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static observedAttributes: string[];
+  constructor();
+  get showRemaining(): boolean;
+  _update(_props: any, state: CurrentTimeDisplayState): void;
+}
+declare const CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplay, CurrentTimeDisplayState>;
+//#endregion
+//#region src/elements/duration-display.d.ts
+declare function getTemplateHTML$1(this: typeof DurationDisplay, _attrs: Record<string, string>, _props?: Record<string, any>): string;
+declare class DurationDisplay extends HTMLElement {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML$1;
+  constructor();
+  _update(_props: any, state: DurationDisplayState): void;
+}
+declare const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplay, DurationDisplayState>;
+//#endregion
+//#region src/types.d.ts
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
+//#endregion
+//#region src/elements/button.d.ts
+declare function getTemplateHTML(this: typeof ButtonElement, _attrs: Record<string, string>, _props?: Record<string, any>): string;
+declare class ButtonElement extends HTMLElement {
+  #private;
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: typeof getTemplateHTML;
+  static observedAttributes: string[];
+  constructor();
+  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+  handleEvent(event: Event): void;
+}
+//#endregion
+//#region src/elements/fullscreen-button.d.ts
+type FullscreenButtonStateWithMethods = Prettify<FullscreenButtonState & ReturnType<typeof fullscreenButtonStateDefinition.createRequestMethods>>;
+/**
+* FullscreenButton state hook - equivalent to React's useFullscreenButtonState
+* Handles media store state subscription and transformation
+*/
+
+declare class FullscreenButton extends ButtonElement {
+  _state: FullscreenButtonStateWithMethods | undefined;
+  handleEvent(event: Event): void;
+}
+declare const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButton, FullscreenButtonStateWithMethods>;
+//#endregion
+//#region src/elements/mute-button.d.ts
+type MuteButtonStateWithMethods = Prettify<MuteButtonState & ReturnType<typeof muteButtonStateDefinition.createRequestMethods>>;
+declare class MuteButton extends ButtonElement {
+  _state: MuteButtonStateWithMethods | undefined;
+  handleEvent(event: Event): void;
+}
+declare const MuteButtonElement: ConnectedComponentConstructor<MuteButton, MuteButtonStateWithMethods>;
+//#endregion
+//#region src/elements/play-button.d.ts
+type PlayButtonStateWithMethods = Prettify<PlayButtonState & ReturnType<typeof playButtonStateDefinition.createRequestMethods>>;
+/**
+* PlayButton state hook - equivalent to React's usePlayButtonState
+* Handles media store state subscription and transformation
+*/
+
+declare class PlayButton extends ButtonElement {
+  _state: PlayButtonStateWithMethods | undefined;
+  handleEvent(event: Event): void;
+}
+declare const PlayButtonElement: ConnectedComponentConstructor<PlayButton, PlayButtonStateWithMethods>;
+//#endregion
+//#region src/elements/popover.d.ts
+type Placement = PopoverState["placement"];
+type PopoverState$1 = Prettify<ReturnType<Popover["getState"]>>;
+declare class Popover$1 extends HTMLElement {
+  static get observedAttributes(): string[];
+  get openOnHover(): boolean;
+  get delay(): number;
+  get closeDelay(): number;
+  get side(): Placement;
+  get sideOffset(): number;
+  get collisionPadding(): number;
+  get collisionBoundary(): string | null;
+}
+declare const PopoverElement: ConnectedComponentConstructor<Popover$1, PopoverState$1>;
+//#endregion
+//#region src/elements/preview-time-display.d.ts
+declare class PreviewTimeDisplay extends HTMLElement {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static observedAttributes: string[];
+  constructor();
+  get showRemaining(): boolean;
+  _update(_props: any, state: PreviewTimeDisplayState): void;
+}
+declare const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplay, PreviewTimeDisplayState>;
+//#endregion
+//#region src/elements/time-slider.d.ts
+type TimeSliderState = Prettify<ReturnType<TimeSlider["getState"]>>;
+type TimeSliderStateWithMethods = Prettify<TimeSliderState & ReturnType<typeof timeSliderStateDefinition.createRequestMethods>>;
+declare class TimeSliderRoot extends HTMLElement {
+  static readonly observedAttributes: readonly string[];
+  _state: TimeSliderState | undefined;
+  get orientation(): "horizontal" | "vertical";
+}
+declare const TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderRoot, TimeSliderStateWithMethods>;
+declare class TimeSliderTrack extends HTMLElement {}
+declare const TimeSliderTrackElement: ConnectedComponentConstructor<TimeSliderTrack, undefined>;
+declare class TimeSliderProgress extends HTMLElement {}
+declare const TimeSliderProgressElement: ConnectedComponentConstructor<TimeSliderProgress, undefined>;
+declare class TimeSliderPointer extends HTMLElement {}
+declare const TimeSliderPointerElement: ConnectedComponentConstructor<TimeSliderPointer, undefined>;
+declare class TimeSliderThumb extends HTMLElement {}
+declare const TimeSliderThumbElement: ConnectedComponentConstructor<TimeSliderThumb, undefined>;
+declare const TimeSliderElement: {
+  Root: typeof TimeSliderRootElement;
+  Track: typeof TimeSliderTrackElement;
+  Progress: typeof TimeSliderProgressElement;
+  Pointer: typeof TimeSliderPointerElement;
+  Thumb: typeof TimeSliderThumbElement;
+};
+//#endregion
+//#region src/elements/tooltip.d.ts
+type TooltipState = Prettify<ReturnType<Tooltip["getState"]>>;
+declare class Tooltip$1 extends Popover$1 {
+  static get observedAttributes(): string[];
+  get trackCursorAxis(): "x" | null;
+}
+declare const TooltipElement: ConnectedComponentConstructor<Tooltip$1, TooltipState>;
+//#endregion
+//#region src/elements/volume-slider.d.ts
+type VolumeSliderState = Prettify<ReturnType<VolumeSlider["getState"]>>;
+type VolumeSliderStateWithMethods = Prettify<VolumeSliderState & ReturnType<typeof volumeSliderStateDefinition.createRequestMethods>>;
+declare class VolumeSliderRoot extends HTMLElement {
+  static readonly observedAttributes: readonly string[];
+  _state: VolumeSliderState | undefined;
+  get orientation(): "horizontal" | "vertical";
+}
+declare const VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderRoot, VolumeSliderStateWithMethods>;
+declare class VolumeSliderTrack extends HTMLElement {}
+declare const VolumeSliderTrackElement: ConnectedComponentConstructor<VolumeSliderTrack, undefined>;
+declare class VolumeSliderIndicator extends HTMLElement {}
+declare const VolumeSliderIndicatorElement: ConnectedComponentConstructor<VolumeSliderIndicator, undefined>;
+declare class VolumeSliderThumb extends HTMLElement {}
+declare const VolumeSliderThumbElement: ConnectedComponentConstructor<VolumeSliderThumb, undefined>;
+declare const VolumeSliderElement: {
+  Root: typeof VolumeSliderRootElement;
+  Track: typeof VolumeSliderTrackElement;
+  Indicator: typeof VolumeSliderIndicatorElement;
+  Thumb: typeof VolumeSliderThumbElement;
+};
+//#endregion
+//#region src/media/media-container.d.ts
+declare const CustomElementConsumer: Constructor<CustomElement & HTMLElement>;
+declare class MediaContainerElement extends CustomElementConsumer {
+  static shadowRootOptions: {
+    mode: ShadowRootMode;
+  };
+  static getTemplateHTML: () => string;
+  _mediaStore: any;
+  _mediaSlot: HTMLSlotElement;
+  _paused: boolean;
+  contexts: {
+    mediaStore: (mediaStore: any) => void;
+  };
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  _registerContainerStateOwner: () => void;
+  _unregisterContainerStateOwner: () => void;
+  _handleMediaSlotChange: () => void;
+  _handleClick: (event: Event) => void;
+  _subscribeToPlayState: () => void;
+}
+//#endregion
+//#region src/media/video-provider.d.ts
+declare const ProviderHTMLElement: Constructor<CustomElement & HTMLElement>;
+declare class VideoProviderElement extends ProviderHTMLElement {
+  contexts: {
+    mediaStore: () => MediaStore;
+  };
+}
+//#endregion
+export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement, MediaSkinElement, MuteButtonElement, PlayButtonElement, PopoverElement, PreviewTimeDisplayElement, TimeSliderElement, TooltipElement, VideoProviderElement, VolumeSliderElement };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":["getCurrentTimeDisplayState: StateHook<CurrentTimeDisplay, CurrentTimeDisplayState>","getCurrentTimeDisplayProps: PropsHook<CurrentTimeDisplay, CurrentTimeDisplayState>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplay, CurrentTimeDisplayState>","getDurationDisplayState: StateHook<DurationDisplay, DurationDisplayState>","getDurationDisplayProps: PropsHook<DurationDisplay, DurationDisplayState>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplay, DurationDisplayState>","Prettify","T","K","getFullscreenButtonState: StateHook<FullscreenButton, FullscreenButtonStateWithMethods>","getFullscreenButtonProps: PropsHook<FullscreenButton, FullscreenButtonStateWithMethods>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButton, FullscreenButtonStateWithMethods>","getMuteButtonState: StateHook<MuteButton, MuteButtonStateWithMethods>","getMuteButtonProps: PropsHook<MuteButton, MuteButtonStateWithMethods>","MuteButtonElement: ConnectedComponentConstructor<MuteButton, MuteButtonStateWithMethods>","getPlayButtonState: StateHook<PlayButton, PlayButtonStateWithMethods>","getPlayButtonProps: PropsHook<PlayButton, PlayButtonStateWithMethods>","PlayButtonElement: ConnectedComponentConstructor<PlayButton, PlayButtonStateWithMethods>","getPopoverState: StateHook<Popover, PopoverState>","getPopoverProps: PropsHook<Popover, PopoverState>","PopoverElement: ConnectedComponentConstructor<Popover, PopoverState>","getPreviewTimeDisplayState: StateHook<PreviewTimeDisplay, PreviewTimeDisplayState>","getPreviewTimeDisplayProps: PropsHook<PreviewTimeDisplay, PreviewTimeDisplayState>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplay, PreviewTimeDisplayState>","getTimeSliderRootState: StateHook<TimeSliderRoot, TimeSliderStateWithMethods>","getTimeSliderRootProps: PropsHook<TimeSliderRoot, TimeSliderStateWithMethods>","TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderRoot, TimeSliderStateWithMethods>","getTimeSliderTrackProps: PropsHook<TimeSliderTrack, undefined>","TimeSliderTrackElement: ConnectedComponentConstructor<TimeSliderTrack, undefined>","getTimeSliderProgressProps: PropsHook<TimeSliderProgress, undefined>","TimeSliderProgressElement: ConnectedComponentConstructor<TimeSliderProgress, undefined>","getTimeSliderPointerProps: PropsHook<TimeSliderPointer, undefined>","TimeSliderPointerElement: ConnectedComponentConstructor<TimeSliderPointer, undefined>","getTimeSliderThumbProps: PropsHook<TimeSliderThumb, undefined>","TimeSliderThumbElement: ConnectedComponentConstructor<TimeSliderThumb, undefined>","getTooltipState: StateHook<Tooltip, TooltipState>","getTooltipProps: PropsHook<Tooltip, TooltipState>","TooltipElement: ConnectedComponentConstructor<Tooltip, TooltipState>","getVolumeSliderRootState: StateHook<VolumeSliderRoot, VolumeSliderStateWithMethods>","getVolumeSliderRootProps: PropsHook<VolumeSliderRoot, VolumeSliderStateWithMethods>","VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderRoot, VolumeSliderStateWithMethods>","getVolumeSliderTrackProps: PropsHook<VolumeSliderTrack, undefined>","VolumeSliderTrackElement: ConnectedComponentConstructor<VolumeSliderTrack, undefined>","getVolumeSliderIndicatorProps: PropsHook<VolumeSliderIndicator, undefined>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<VolumeSliderIndicator, undefined>","getVolumeSliderThumbProps: PropsHook<VolumeSliderThumb, undefined>","VolumeSliderThumbElement: ConnectedComponentConstructor<VolumeSliderThumb, undefined>","CustomElementConsumer: Constructor<CustomElement & HTMLElement>","ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/utils/component-factory.ts","../src/elements/current-time-display.ts","../src/elements/duration-display.ts","../src/types.d.ts","../src/elements/button.ts","../src/elements/fullscreen-button.ts","../src/elements/mute-button.ts","../src/elements/play-button.ts","../src/elements/popover.ts","../src/elements/preview-time-display.ts","../src/elements/time-slider.ts","../src/elements/tooltip.ts","../src/elements/volume-slider.ts","../src/media/media-container.ts","../src/media/video-provider.ts"],"sourcesContent":["declare module '*.css' {\n  const content: string;\n  export default content;\n}\n\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,17 @@
+import "./component-factory-vR-5t251.js";
+import { t as CurrentTimeDisplayElement } from "./current-time-display-BNvqKqSQ.js";
+import { t as DurationDisplayElement } from "./duration-display-Dtl2RCNd.js";
+import "./button-Bu1mGG-F.js";
+import { t as FullscreenButtonElement } from "./fullscreen-button-CKOv8Ywh.js";
+import { t as MuteButtonElement } from "./mute-button-BCN9DDLN.js";
+import { t as PlayButtonElement } from "./play-button-DP8VldNs.js";
+import { n as PopoverElement } from "./popover-ah61j3HR.js";
+import { t as PreviewTimeDisplayElement } from "./preview-time-display-DwLOj4CJ.js";
+import { t as TimeSliderElement } from "./time-slider-DBWcZzRe.js";
+import { t as TooltipElement } from "./tooltip-O0U-gkDS.js";
+import { t as VolumeSliderElement } from "./volume-slider-cwSYSsFC.js";
+import { t as MediaContainerElement } from "./media-container-BOL0PKuG.js";
+import { t as MediaSkinElement } from "./media-skin-CxnuHwhu.js";
+import { t as VideoProviderElement } from "./video-provider-Bj9JwzDx.js";
+
+export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement, MediaSkinElement, MuteButtonElement, PlayButtonElement, PopoverElement, PreviewTimeDisplayElement, TimeSliderElement, TooltipElement, VideoProviderElement, VolumeSliderElement };

package/dist/media-container-BOL0PKuG.js

@@ -0,0 +1,80 @@
+import { ConsumerMixin } from "@open-wc/context-protocol";
+
+//#region src/media/media-container.ts
+function getTemplateHTML() {
+	return `
+    <slot name="media"></slot>
+    <slot></slot>
+  `;
+}
+const CustomElementConsumer = ConsumerMixin(HTMLElement);
+var MediaContainerElement = class extends CustomElementConsumer {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	constructor() {
+		super();
+		this._paused = true;
+		this.contexts = { mediaStore: (mediaStore) => {
+			this._mediaStore = mediaStore;
+			this._handleMediaSlotChange();
+			this._registerContainerStateOwner();
+			this._subscribeToPlayState();
+		} };
+		this._registerContainerStateOwner = () => {
+			if (!this._mediaStore) return;
+			this._mediaStore.dispatch({
+				type: "containerstateownerchangerequest",
+				detail: this
+			});
+		};
+		this._unregisterContainerStateOwner = () => {
+			if (!this._mediaStore) return;
+			this._mediaStore.dispatch({
+				type: "containerstateownerchangerequest",
+				detail: null
+			});
+		};
+		this._handleMediaSlotChange = () => {
+			const media = this._mediaSlot.assignedElements({ flatten: true })[0];
+			this._mediaStore.dispatch({
+				type: "mediastateownerchangerequest",
+				detail: media
+			});
+		};
+		this._handleClick = (event) => {
+			if (!this._mediaStore) return;
+			if (!["video", "audio"].includes(event.target.localName || "")) return;
+			if (this._paused) this._mediaStore.dispatch({ type: "playrequest" });
+			else this._mediaStore.dispatch({ type: "pauserequest" });
+		};
+		this._subscribeToPlayState = () => {
+			if (!this._mediaStore) return;
+			this._mediaStore.subscribe((state) => {
+				this._paused = state.paused ?? true;
+			});
+		};
+		if (!this.shadowRoot) {
+			this.attachShadow(this.constructor.shadowRootOptions);
+			this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
+		}
+		this._mediaSlot = this.shadowRoot.querySelector("slot[name=media]");
+		this._mediaSlot.addEventListener("slotchange", this._handleMediaSlotChange);
+		this.addEventListener("click", this._handleClick);
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+		this._registerContainerStateOwner();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		this._unregisterContainerStateOwner();
+	}
+};
+
+//#endregion
+export { MediaContainerElement as t };
+//# sourceMappingURL=media-container-BOL0PKuG.js.map

package/dist/media-container-BOL0PKuG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-container-BOL0PKuG.js","names":["CustomElementConsumer: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/media-container.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\n\nimport { ConsumerMixin } from '@open-wc/context-protocol';\n\nexport function getTemplateHTML() {\n  return /* html */ `\n    <slot name=\"media\"></slot>\n    <slot></slot>\n  `;\n}\n\nconst CustomElementConsumer: Constructor<CustomElement & HTMLElement> = ConsumerMixin(HTMLElement);\n\nexport class MediaContainerElement extends CustomElementConsumer {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML: () => string = getTemplateHTML;\n\n  _mediaStore: any;\n  _mediaSlot: HTMLSlotElement;\n  _paused: boolean = true;\n  contexts = {\n    mediaStore: (mediaStore: any): void => {\n      this._mediaStore = mediaStore;\n      this._handleMediaSlotChange();\n      this._registerContainerStateOwner();\n      this._subscribeToPlayState();\n    },\n  };\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof MediaContainerElement).shadowRootOptions);\n      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainerElement).getTemplateHTML();\n    }\n\n    this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;\n    this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);\n\n    // Add click handler for play/pause functionality\n    this.addEventListener('click', this._handleClick);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this._registerContainerStateOwner();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this._unregisterContainerStateOwner();\n  }\n\n  _registerContainerStateOwner = (): void => {\n    if (!this._mediaStore) return;\n    this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: this });\n  };\n\n  _unregisterContainerStateOwner = (): void => {\n    if (!this._mediaStore) return;\n    this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: null });\n  };\n\n  _handleMediaSlotChange = (): void => {\n    const media = this._mediaSlot.assignedElements({ flatten: true })[0];\n    this._mediaStore.dispatch({ type: 'mediastateownerchangerequest', detail: media });\n  };\n\n  _handleClick = (event: Event): void => {\n    if (!this._mediaStore) return;\n\n    if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n    if (this._paused) {\n      this._mediaStore.dispatch({ type: 'playrequest' });\n    } else {\n      this._mediaStore.dispatch({ type: 'pauserequest' });\n    }\n  };\n\n  _subscribeToPlayState = (): void => {\n    if (!this._mediaStore) return;\n\n    // Subscribe to paused state changes\n    this._mediaStore.subscribe((state: any) => {\n      this._paused = state.paused ?? true;\n    });\n  };\n}\n"],"mappings":";;;AAIA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;AAMpB,MAAMA,wBAAkE,cAAc,YAAY;AAElG,IAAa,wBAAb,cAA2C,sBAAsB;;2BACpC,EAAE,MAAM,QAA0B;;;yBACtB;;CAcvC,cAAc;AACZ,SAAO;iBAXU;kBACR,EACT,aAAa,eAA0B;AACrC,QAAK,cAAc;AACnB,QAAK,wBAAwB;AAC7B,QAAK,8BAA8B;AACnC,QAAK,uBAAuB;KAE/B;4CA2B0C;AACzC,OAAI,CAAC,KAAK,YAAa;AACvB,QAAK,YAAY,SAAS;IAAE,MAAM;IAAoC,QAAQ;IAAM,CAAC;;8CAG1C;AAC3C,OAAI,CAAC,KAAK,YAAa;AACvB,QAAK,YAAY,SAAS;IAAE,MAAM;IAAoC,QAAQ;IAAM,CAAC;;sCAGlD;GACnC,MAAM,QAAQ,KAAK,WAAW,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC;AAClE,QAAK,YAAY,SAAS;IAAE,MAAM;IAAgC,QAAQ;IAAO,CAAC;;uBAGpE,UAAuB;AACrC,OAAI,CAAC,KAAK,YAAa;AAEvB,OAAI,CAAC,CAAC,SAAS,QAAQ,CAAC,SAAU,MAAM,OAAuB,aAAa,GAAG,CAAE;AAEjF,OAAI,KAAK,QACP,MAAK,YAAY,SAAS,EAAE,MAAM,eAAe,CAAC;OAElD,MAAK,YAAY,SAAS,EAAE,MAAM,gBAAgB,CAAC;;qCAInB;AAClC,OAAI,CAAC,KAAK,YAAa;AAGvB,QAAK,YAAY,WAAW,UAAe;AACzC,SAAK,UAAU,MAAM,UAAU;KAC/B;;AAvDF,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAA6C,kBAAkB;AACvF,QAAK,WAAY,YAAa,KAAK,YAA6C,iBAAiB;;AAGnG,OAAK,aAAa,KAAK,WAAY,cAAc,mBAAmB;AACpE,OAAK,WAAW,iBAAiB,cAAc,KAAK,uBAAuB;AAG3E,OAAK,iBAAiB,SAAS,KAAK,aAAa;;CAGnD,oBAA0B;AACxB,QAAM,qBAAqB;AAC3B,OAAK,8BAA8B;;CAGrC,uBAA6B;AAC3B,QAAM,wBAAwB;AAC9B,OAAK,gCAAgC"}

package/dist/media-container-ChS9lZvf.d.ts

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

package/dist/media-container-DwKSOa1h.js

@@ -0,0 +1,8 @@
+import { t as MediaContainerElement } from "./media-container-BOL0PKuG.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-container.ts
+defineCustomElement("media-container", MediaContainerElement);
+
+//#endregion
+//# sourceMappingURL=media-container-DwKSOa1h.js.map

package/dist/media-container-DwKSOa1h.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-container-DwKSOa1h.js","names":[],"sources":["../src/define/media-container.ts"],"sourcesContent":["import { MediaContainerElement } from '@/media/media-container';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-container', MediaContainerElement);\n"],"mappings":";;;;AAGA,oBAAoB,mBAAmB,sBAAsB"}

package/dist/media-current-time-display-Cd0rPAuj.d.ts

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

package/dist/media-current-time-display-Cr2LJaRo.js

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

package/dist/media-current-time-display-Cr2LJaRo.js.map

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

package/dist/media-duration-display-6KTtxmm3.js

@@ -0,0 +1,8 @@
+import { t as DurationDisplayElement } from "./duration-display-Dtl2RCNd.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/media-duration-display.ts
+defineCustomElement("media-duration-display", DurationDisplayElement);
+
+//#endregion
+//# sourceMappingURL=media-duration-display-6KTtxmm3.js.map

package/dist/media-duration-display-6KTtxmm3.js.map

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

package/dist/media-duration-display-qvm6YX-q.d.ts

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

package/dist/media-fullscreen-button-BgUK3lgu.d.ts

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

package/dist/media-fullscreen-button-CiG60HOW.js

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

package/dist/media-fullscreen-button-CiG60HOW.js.map

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

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

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