@videojs/html 0.1.0-preview.4 → 0.1.0-preview.5

package/README.md

@@ -22,5 +22,5 @@ members:
 
 [package]: https://www.npmjs.com/package/@videojs/html
 [package-badge]: https://img.shields.io/npm/v/@videojs/html/next?label=@videojs/html@next
-[discord]: https://discord.gg/b664Gq3pdy
+[discord]: https://discord.gg/zdrCwByt
 [gh-discussions]: https://github.com/videojs/v10/discussions

package/dist/define/index.js

@@ -5,10 +5,10 @@ import "../button-D1DWjsQu.js";
 import "../fullscreen-button-CGO2UJjs.js";
 import "../mute-button-vW2sLqqY.js";
 import "../play-button-aVb0g10G.js";
-import "../popover-Dc0hyhwB.js";
+import "../popover-ty9dFDNE.js";
 import "../preview-time-display-Dax0FQ2X.js";
 import "../time-slider-CA1GMs6A.js";
-import "../tooltip-54fBUUpb.js";
+import "../tooltip-CJpujx2f.js";
 import "../volume-slider-guD8gqpi.js";
 import "../media-container-C0MUzkJ_.js";
 import "../media-provider-CyoL0bCx.js";
@@ -23,5 +23,5 @@ import "../media-fullscreen-button-Dcflbt54.js";
 import "../media-duration-display-BLMr7VHo.js";
 import "../media-current-time-display-B-4Cp845.js";
 import "../media-preview-time-display-DAiMgLPX.js";
-import "../media-popover-F4M4Tq4z.js";
-import "../media-tooltip-ClcVafMb.js";
+import "../media-popover-DVCIlSBX.js";
+import "../media-tooltip-C4jOtQ8a.js";

package/dist/define/media-popover.js

@@ -1,3 +1,3 @@
-import "../popover-Dc0hyhwB.js";
+import "../popover-ty9dFDNE.js";
 import "../custom-element-3bDlB2XO.js";
-import "../media-popover-F4M4Tq4z.js";
+import "../media-popover-DVCIlSBX.js";

package/dist/define/media-tooltip.js

@@ -1,3 +1,3 @@
-import "../tooltip-54fBUUpb.js";
+import "../tooltip-CJpujx2f.js";
 import "../custom-element-3bDlB2XO.js";
-import "../media-tooltip-ClcVafMb.js";
+import "../media-tooltip-C4jOtQ8a.js";

package/dist/index.d.ts

@@ -66,46 +66,19 @@ declare const TimeSliderElement: {
 };
 //#endregion
 //#region src/elements/tooltip.d.ts
-declare class TooltipRootElement extends HTMLElement {
+declare class TooltipElement extends HTMLElement {
   #private;
-  constructor();
-  handleEvent(event: Event): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  handleEvent(event: Event): void;
   static get observedAttributes(): string[];
   get delay(): number;
   get closeDelay(): number;
   get trackCursorAxis(): "x" | "y" | "both" | undefined;
-}
-declare class TooltipTriggerElement extends HTMLElement {
-  connectedCallback(): void;
-}
-declare class TooltipPortalElement extends HTMLElement {
-  #private;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  querySelector(selector: string): HTMLElement | null;
-}
-declare class TooltipPositionerElement extends HTMLElement {
-  connectedCallback(): void;
   get side(): Placement;
   get sideOffset(): number;
   get collisionPadding(): number;
 }
-declare class TooltipPopupElement extends HTMLElement {
-  connectedCallback(): void;
-}
-declare class TooltipArrowElement extends HTMLElement {
-  connectedCallback(): void;
-}
-declare const TooltipElement: {
-  Root: typeof TooltipRootElement;
-  Trigger: typeof TooltipTriggerElement;
-  Portal: typeof TooltipPortalElement;
-  Positioner: typeof TooltipPositionerElement;
-  Popup: typeof TooltipPopupElement;
-  Arrow: typeof TooltipArrowElement;
-};
 //#endregion
 //#region src/elements/volume-slider.d.ts
 

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":["useCurrentTimeDisplayState: StateHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>","useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>","usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","TooltipElement: {\n  Root: typeof TooltipRootElement;\n  Trigger: typeof TooltipTriggerElement;\n  Portal: typeof TooltipPortalElement;\n  Positioner: typeof TooltipPositionerElement;\n  Popup: typeof TooltipPopupElement;\n  Arrow: typeof TooltipArrowElement;\n}","getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","useVolumeSliderRootState: StateHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderProgressElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","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/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/media-provider.ts"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","names":["useCurrentTimeDisplayState: StateHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n  currentTime: number | undefined;\n  duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>","useDurationDisplayState: StateHook<{\n  duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n  duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n  muted: boolean;\n  volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>","usePreviewTimeDisplayState: StateHook<{\n  previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n  previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","getVolumeSliderRootProps: PropsHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","useVolumeSliderRootState: StateHook<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderProgressElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","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/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/media-provider.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAaiB;cACH,QAAQ;;;;;cCqETE,2BAA2B,8BAA8B;;;;cCNzDG,wBAAwB,8BAA8B;;;;AEQtDM,cDXAH,uBCWiD,EDXxB,6BCWN,CDXoC,qBCWpC,CAAA;;;AAAnBG,cAAAA,iBAAiD,EAA9B,6BAAA,CAA8B,eAA9B,CAAA;;;ADXnBH,cEVAM,iBFUuD,EEVpC,6BFUM,CEVwB,eFUxB,CAAA;;;cG1DzB,cAAA,SAAuB,WAAA;;;;qBAmCf;;ENtCrB,IAAiB,WAAA,CAAA,CAAA,EAAA,OAAA;;;cM4EH;ELNd,IAAaZ,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;;;cMVAe,2BAA2B,8BAA8B;;;;cCsKzDO,uBAAuB;;ECzOpC,QAAa,EAAA,MAAA;EAqCQ,WAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAiCP,IAAA,EDuKN,UCvKM,GAAA,IAAA;CAtEsB,CAAA;AAAA,cDgPvBC,sBChPuB,EDgPC,6BChPD,CAAA,GAAA,CAAA;cDuPvBC,2BAA2B;cAO3BC,0BAA0B;cAO1BC,wBAAwB;AE/BxBM,cFsCA,iBEtCAA,EAAAA;EAWb,IAAaC,EAAAA,OFqCE,qBErCwB;EAUvC,KAAaC,EAAAA,OF4BG,sBE5B0B;EAU1C,QAAaC,EAAAA,OFmBM,yBEnBoB;EAUvC,OAAa,EAAA,OFUK,wBEVL;EASE,KAAA,EAAA,OFEC,sBEFD;CACC;;;cDzRH,cAAA,SAAuB,WAAA;;;;qBAqCf;;ET9BrB,IAAiB,KAAA,CAAA,CAAA,EAAA,MAAA;;;cS+DH;EROd,IAAanC,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;;;;;;;;AUpEgB,cD6NhBgC,uBC7NgB,ED6NS,6BC7NT,CAAA;EAE7B,MAAa,EAAA,MAAA;EACkC,KAAA,EAAA,OAAA;EAIjC,WAAA,EAAA,MAAA;EAmDW,mBAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAxDkB,IAAA,EDgOnC,YChOmC,GAAA,IAAA;CAAA,CAAA;;;;ACXrCK,cFiPOJ,wBEjP0C,EFiPhB,6BEjPgB,CAAA,GAAA,CAAA;;;;AAA5B,cF2PdC,2BE3Pc,EF2Pe,6BE3Pf,CAAA,GAAA,CAAA;AAE3B;;;cFmQaC,0BAA0B;;;;cAU1B;eASE;gBACC;mBACG;gBACH;;;;cClRVC,uBAAuB,YAAY,gBAAgB;cAE5C,qBAAA,SAA8B,qBAAA;;UACI;;EXL/C,OAAiB,eAAA,EAAA,GAAA,GAAA,MAAA;;cWSH;;EV6Dd,QAAapC,EAAAA;;;;ECNb,iBAAaG,CAAAA,CAAAA,EAAAA,IAAAA;;;;ECHb,sBAAaG,EAAAA,GAAAA,GAAuD,IAAA;wBQD3C;;;;;cCnEnB+B,qBAAqB,YAAY,gBAAgB;cAE1C,oBAAA,SAA6B,mBAAA;;sBAEtB;;AZGpB"}

package/dist/index.js

@@ -5,10 +5,10 @@ import "./button-D1DWjsQu.js";
 import { t as FullscreenButtonElement } from "./fullscreen-button-CGO2UJjs.js";
 import { t as MuteButtonElement } from "./mute-button-vW2sLqqY.js";
 import { t as PlayButtonElement } from "./play-button-aVb0g10G.js";
-import { t as PopoverElement } from "./popover-Dc0hyhwB.js";
+import { t as PopoverElement } from "./popover-ty9dFDNE.js";
 import { t as PreviewTimeDisplayElement } from "./preview-time-display-Dax0FQ2X.js";
 import { t as TimeSliderElement } from "./time-slider-CA1GMs6A.js";
-import { n as TooltipElement } from "./tooltip-54fBUUpb.js";
+import { t as TooltipElement } from "./tooltip-CJpujx2f.js";
 import { t as VolumeSliderElement } from "./volume-slider-guD8gqpi.js";
 import { t as MediaContainerElement } from "./media-container-C0MUzkJ_.js";
 import { t as MediaProviderElement } from "./media-provider-CyoL0bCx.js";

package/dist/{media-popover-F4M4Tq4z.js → media-popover-DVCIlSBX.js}

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

package/dist/{media-popover-F4M4Tq4z.js.map → media-popover-DVCIlSBX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"media-popover-F4M4Tq4z.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"}
+{"version":3,"file":"media-popover-DVCIlSBX.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-tooltip-C4jOtQ8a.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-tooltip-C4jOtQ8a.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/{popover-Dc0hyhwB.js → popover-ty9dFDNE.js}

@@ -75,7 +75,7 @@ var PopoverElement = class extends HTMLElement {
 		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
 	}
 	get #triggerElement() {
-		return getDocumentOrShadowRoot(this)?.querySelector(`[popovertarget="${this.id}"]`);
+		return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor="${this.id}"]`);
 	}
 	#setOpen(open) {
 		if (this.#open === open) return;
@@ -95,6 +95,8 @@ var PopoverElement = class extends HTMLElement {
 			const transitions = this.getAnimations().filter((anim) => anim instanceof CSSTransition);
 			if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => this.hidePopover()).catch(() => this.hidePopover());
 			else this.hidePopover();
+			this.#cleanup?.();
+			this.#cleanup = null;
 		}
 	}
 	#updateVisibility() {
@@ -184,4 +186,4 @@ var PopoverElement = class extends HTMLElement {
 
 //#endregion
 export { PopoverElement as t };
-//# sourceMappingURL=popover-Dc0hyhwB.js.map
+//# sourceMappingURL=popover-ty9dFDNE.js.map

package/dist/popover-ty9dFDNE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-ty9dFDNE.js","names":["#abortController","#triggerElement","#clearHoverTimeout","#cleanup","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#handleFocusIn","#handleFocusOut","#open","#setupFloating","#transitionStatus","#updateVisibility","#floatingContext","#hoverTimeout","#addPointerMoveListener","#setOpen"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import type { ComputePositionReturn } from '@floating-ui/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';\n\ntype Prettify<T> = {\n  [K in keyof T]: T[K];\n};\n\ntype FloatingContext = Prettify<ComputePositionReturn> & {\n  elements: {\n    domReference: HTMLElement;\n    floating: HTMLElement;\n  };\n};\n\nexport class PopoverElement extends HTMLElement {\n  #open = false;\n  #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n  #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n  #cleanup: (() => void) | null = null;\n  #abortController: AbortController | null = null;\n  #floatingContext: FloatingContext | null = null;\n\n  connectedCallback(): void {\n    this.#abortController ??= new AbortController();\n    const { signal } = this.#abortController;\n\n    const trigger = this.#triggerElement as HTMLElement;\n    if (trigger) {\n      if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n        trigger.addEventListener('pointerenter', this, { signal });\n        trigger.addEventListener('pointerleave', this, { signal });\n      }\n\n      trigger.addEventListener('focusin', this, { signal });\n      trigger.addEventListener('focusout', this, { signal });\n    }\n\n    this.addEventListener('pointerenter', this, { signal });\n    this.addEventListener('focusout', this, { signal });\n  }\n\n  disconnectedCallback(): void {\n    this.#clearHoverTimeout();\n    this.#cleanup?.();\n\n    this.#abortController?.abort();\n    this.#abortController = null;\n  }\n\n  handleEvent(event: Event): void {\n    switch (event.type) {\n      case 'pointerenter':\n        this.#handlePointerEnter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.#handlePointerLeave(event as PointerEvent);\n        break;\n      case 'pointermove':\n        this.#handlePointerMove(event as PointerEvent);\n        break;\n      case 'focusin':\n        this.#handleFocusIn(event as FocusEvent);\n        break;\n      case 'focusout':\n        this.#handleFocusOut(event as FocusEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  static get observedAttributes(): string[] {\n    return ['open-on-hover', 'delay', 'close-delay', 'side', 'side-offset'];\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 #triggerElement(): HTMLElement | null {\n    return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor=\"${this.id}\"]`) as HTMLElement | null;\n  }\n\n  #setOpen(open: boolean): void {\n    if (this.#open === open) return;\n\n    this.#open = open;\n\n    if (open) {\n      this.#setupFloating();\n\n      this.#transitionStatus = 'initial';\n      this.#updateVisibility();\n\n      this.showPopover();\n\n      requestAnimationFrame(() => {\n        this.#transitionStatus = 'open';\n        this.#updateVisibility();\n      });\n    } else {\n      this.#transitionStatus = 'close';\n      this.#updateVisibility();\n\n      const transitions = this.getAnimations().filter(anim => anim instanceof CSSTransition);\n      if (transitions.length > 0) {\n        Promise.all(transitions.map(t => t.finished))\n          .then(() => this.hidePopover())\n          .catch(() => this.hidePopover());\n      } else {\n        this.hidePopover();\n      }\n\n      this.#cleanup?.();\n      this.#cleanup = null;\n    }\n  }\n\n  #updateVisibility(): void {\n    this.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n    this.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n    this.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n    this.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n  }\n\n  #setupFloating(): void {\n    const trigger = this.#triggerElement as HTMLElement;\n    if (!trigger) return;\n\n    const placement = this.side ?? 'top';\n    const sideOffset = this.sideOffset;\n\n    const updatePosition = () => {\n      computePosition(trigger, this, {\n        placement,\n        middleware: [offset(sideOffset), flip(), shift()],\n        strategy: 'fixed',\n      }).then((data: ComputePositionReturn) => {\n        this.#floatingContext = {\n          ...data,\n          elements: {\n            domReference: trigger,\n            floating: this,\n          },\n        };\n\n        Object.assign(this.style, {\n          left: `${data.x}px`,\n          top: `${data.y}px`,\n        });\n      });\n    };\n\n    updatePosition();\n    this.#cleanup = autoUpdate(trigger, this, updatePosition);\n  }\n\n  #clearHoverTimeout(): void {\n    if (this.#hoverTimeout) {\n      globalThis.clearTimeout(this.#hoverTimeout);\n      this.#hoverTimeout = null;\n    }\n  }\n\n  #handlePointerEnter(event: PointerEvent): void {\n    if (!this.openOnHover) return;\n\n    this.#clearHoverTimeout();\n\n    if (event.currentTarget === this) {\n      this.#addPointerMoveListener();\n    }\n\n    if (this.#open) {\n      return;\n    }\n\n    this.#hoverTimeout = globalThis.setTimeout(() => {\n      this.#setOpen(true);\n    }, this.delay);\n  }\n\n  #handlePointerLeave(_event: PointerEvent): void {\n    this.#addPointerMoveListener();\n  }\n\n  #addPointerMoveListener(): void {\n    if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n    const { signal } = this.#abortController as AbortController;\n    getDocument(this).documentElement.addEventListener('pointermove', this, { signal });\n  }\n\n  #handlePointerMove(event: PointerEvent): void {\n    if (!this.openOnHover || !this.#floatingContext) return;\n\n    const close = safePolygon({ blockPointerEvents: true })({\n      ...this.#floatingContext,\n      x: event.clientX,\n      y: event.clientY,\n      onClose: () => {\n        getDocument(this).documentElement.removeEventListener('pointermove', this);\n\n        this.#clearHoverTimeout();\n        this.#hoverTimeout = globalThis.setTimeout(() => {\n          this.#setOpen(false);\n        }, this.closeDelay);\n      },\n    });\n    close(event);\n  }\n\n  #handleFocusIn(_event: FocusEvent): void {\n    this.#setOpen(true);\n  }\n\n  #handleFocusOut(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (relatedTarget && contains(this, relatedTarget)) return;\n\n    this.#setOpen(false);\n  };\n}\n"],"mappings":"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"}

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

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

package/dist/skins/frosted.js

@@ -5,10 +5,10 @@ import "../button-D1DWjsQu.js";
 import "../fullscreen-button-CGO2UJjs.js";
 import "../mute-button-vW2sLqqY.js";
 import "../play-button-aVb0g10G.js";
-import "../popover-Dc0hyhwB.js";
+import "../popover-ty9dFDNE.js";
 import "../preview-time-display-Dax0FQ2X.js";
 import "../time-slider-CA1GMs6A.js";
-import "../tooltip-54fBUUpb.js";
+import "../tooltip-CJpujx2f.js";
 import "../volume-slider-guD8gqpi.js";
 import "../media-container-C0MUzkJ_.js";
 import "../media-provider-CyoL0bCx.js";
@@ -25,11 +25,11 @@ import "../media-fullscreen-button-Dcflbt54.js";
 import "../media-duration-display-BLMr7VHo.js";
 import "../media-current-time-display-B-4Cp845.js";
 import "../media-preview-time-display-DAiMgLPX.js";
-import "../media-popover-F4M4Tq4z.js";
-import "../media-tooltip-ClcVafMb.js";
+import "../media-popover-DVCIlSBX.js";
+import "../media-tooltip-C4jOtQ8a.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  font-size: 0.8125rem;\n  line-height: 1.5;\n  border-radius: inherit;\n  background: oklab(0 0 0);\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-popup {\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\nmedia-tooltip-popup[data-paused] .play-tooltip,\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\n  display: block;\n}\n\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\n  display: block;\n}\n";
+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  font-size: 0.8125rem;\n  line-height: 1.5;\n  border-radius: inherit;\n  background: oklab(0 0 0);\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
@@ -45,50 +45,51 @@ function getTemplateHTML() {
 
       <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-tooltip delay="500" close-delay="0">
-          <media-tooltip-trigger>
-            <media-play-button 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-trigger>
-          <media-tooltip-portal>
-            <media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
-              <media-tooltip-popup class="surface popup-animation">
-                <span class="tooltip play-tooltip">Play</span>
-                <span class="tooltip pause-tooltip">Pause</span>
-              </media-tooltip-popup>
-            </media-tooltip-positioner>
-          </media-tooltip-portal>
+
+        <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-tooltip track-cursor-axis="x">
-            <media-tooltip-trigger>
-              <media-time-slider 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-trigger>
-            <media-tooltip-portal>
-              <media-tooltip-positioner side="top" side-offset="18" collision-padding="12">
-                <media-tooltip-popup class="surface popup-animation">
-                  <media-preview-time-display></media-preview-time-display>
-                </media-tooltip-popup>
-              </media-tooltip-positioner>
-            </media-tooltip-portal>
+          <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 popovertarget="volume-slider-popover" class="button">
+        <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>
@@ -96,7 +97,7 @@ function getTemplateHTML() {
         <media-popover 
           id="volume-slider-popover" 
           class="surface popup-animation" 
-          popover
+          popover="manual"
           open-on-hover
           delay="200"
           close-delay="100"
@@ -112,21 +113,21 @@ function getTemplateHTML() {
           </media-volume-slider>
         </media-popover>
 
-        <media-tooltip delay="500" close-delay="0">
-          <media-tooltip-trigger>
-            <media-fullscreen-button 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-trigger>
-          <media-tooltip-portal>
-            <media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
-              <media-tooltip-popup class="surface popup-animation">
-                <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-                <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-              </media-tooltip-popup>
-            </media-tooltip-positioner>
-          </media-tooltip-portal>
+        <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>

package/dist/skins/frosted.js.map

@@ -1 +1 @@
-{"version":3,"file":"frosted.js","names":["styles"],"sources":["../../src/skins/frosted/styles.css","../../src/skins/frosted/index.ts"],"sourcesContent":["\"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  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  border-radius: inherit;\\n  background: oklab(0 0 0);\\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-popup {\\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\\nmedia-tooltip-popup[data-paused] .play-tooltip,\\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\\n  display: block;\\n}\\n\\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\\n  display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n  return /* html */`\n    ${MediaSkinElement.getTemplateHTML()}\n    <style>${styles}</style>\n\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n\n      <div class=\"overlay\"></div>\n\n      <div class=\"control-bar surface\">\n        <!-- 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) -->\n        <media-tooltip delay=\"500\" close-delay=\"0\">\n          <media-tooltip-trigger>\n            <media-play-button class=\"button\">\n              <media-play-icon class=\"icon play-icon\"></media-play-icon>\n              <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n            </media-play-button>\n          </media-tooltip-trigger>\n          <media-tooltip-portal>\n            <media-tooltip-positioner side=\"top\" side-offset=\"12\" collision-padding=\"12\">\n              <media-tooltip-popup class=\"surface popup-animation\">\n                <span class=\"tooltip play-tooltip\">Play</span>\n                <span class=\"tooltip pause-tooltip\">Pause</span>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip>\n\n        <div class=\"time-controls\">\n          <!-- Use the show-remaining attribute to show count down/remaining time -->\n          <media-current-time-display></media-current-time-display>\n\n          <media-tooltip track-cursor-axis=\"x\">\n            <media-tooltip-trigger>\n              <media-time-slider class=\"slider\">\n                <media-time-slider-track class=\"slider-track\">\n                  <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n                  <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n                </media-time-slider-track>\n                <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n              </media-time-slider>\n            </media-tooltip-trigger>\n            <media-tooltip-portal>\n              <media-tooltip-positioner side=\"top\" side-offset=\"18\" collision-padding=\"12\">\n                <media-tooltip-popup class=\"surface popup-animation\">\n                  <media-preview-time-display></media-preview-time-display>\n                </media-tooltip-popup>\n              </media-tooltip-positioner>\n            </media-tooltip-portal>\n          </media-tooltip>\n\n          <media-duration-display></media-duration-display>\n        </div>\n\n        <media-mute-button popovertarget=\"volume-slider-popover\" class=\"button\">\n          <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n          <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n          <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n        </media-mute-button>\n        <media-popover \n          id=\"volume-slider-popover\" \n          class=\"surface popup-animation\" \n          popover\n          open-on-hover\n          delay=\"200\"\n          close-delay=\"100\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <media-volume-slider class=\"slider\" orientation=\"vertical\">\n            <media-volume-slider-track class=\"slider-track\">\n              <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n            </media-volume-slider-track>\n            <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n\n        <media-tooltip delay=\"500\" close-delay=\"0\">\n          <media-tooltip-trigger>\n            <media-fullscreen-button class=\"button\">\n              <media-fullscreen-enter-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n              <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n            </media-fullscreen-button>\n          </media-tooltip-trigger>\n          <media-tooltip-portal>\n            <media-tooltip-positioner side=\"top\" side-offset=\"12\" collision-padding=\"12\">\n              <media-tooltip-popup class=\"surface popup-animation\">\n                <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n                <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MediaSkinFrostedElement extends MediaSkinElement {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-frosted', MediaSkinFrostedElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACiBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
+{"version":3,"file":"frosted.js","names":["styles"],"sources":["../../src/skins/frosted/styles.css","../../src/skins/frosted/index.ts"],"sourcesContent":["\"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  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  border-radius: inherit;\\n  background: oklab(0 0 0);\\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\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n  return /* html */`\n    ${MediaSkinElement.getTemplateHTML()}\n    <style>${styles}</style>\n\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n\n      <div class=\"overlay\"></div>\n\n      <div class=\"control-bar surface\">\n        <!-- 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) -->\n\n        <media-play-button commandfor=\"play-tooltip\" class=\"button\">\n          <media-play-icon class=\"icon play-icon\"></media-play-icon>\n          <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n        </media-play-button>\n        <media-tooltip\n          id=\"play-tooltip\"\n          class=\"surface popup-animation\"\n          popover=\"manual\"\n          delay=\"500\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <span class=\"tooltip play-tooltip\">Play</span>\n          <span class=\"tooltip pause-tooltip\">Pause</span>\n        </media-tooltip>\n\n        <div class=\"time-controls\">\n          <!-- Use the show-remaining attribute to show count down/remaining time -->\n          <media-current-time-display></media-current-time-display>\n\n          <media-time-slider commandfor=\"time-slider-tooltip\" class=\"slider\">\n            <media-time-slider-track class=\"slider-track\">\n              <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n              <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n            </media-time-slider-track>\n            <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n          </media-time-slider>\n          <media-tooltip \n            id=\"time-slider-tooltip\"\n            class=\"surface popup-animation\"\n            popover=\"manual\"\n            track-cursor-axis=\"x\"\n            side=\"top\"\n            side-offset=\"18\"\n            collision-padding=\"12\"\n          >\n            <media-preview-time-display></media-preview-time-display>\n          </media-tooltip>\n\n          <media-duration-display></media-duration-display>\n        </div>\n\n        <media-mute-button commandfor=\"volume-slider-popover\" command=\"toggle-popover\" class=\"button\">\n          <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n          <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n          <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n        </media-mute-button>\n        <media-popover \n          id=\"volume-slider-popover\" \n          class=\"surface popup-animation\" \n          popover=\"manual\"\n          open-on-hover\n          delay=\"200\"\n          close-delay=\"100\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <media-volume-slider class=\"slider\" orientation=\"vertical\">\n            <media-volume-slider-track class=\"slider-track\">\n              <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n            </media-volume-slider-track>\n            <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n\n        <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"button\">\n          <media-fullscreen-enter-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n          <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n        </media-fullscreen-button>\n        <media-tooltip \n          id=\"fullscreen-tooltip\"\n          class=\"surface popup-animation\"\n          popover=\"manual\"\n          delay=\"500\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n          <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n        </media-tooltip>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MediaSkinFrostedElement extends MediaSkinElement {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-frosted', MediaSkinFrostedElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACiBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cAyGH,uBAAA,SAAgC,gBAAA;EAzG7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AAyGhB"}
+{"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cA0GH,uBAAA,SAAgC,gBAAA;EA1G7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AA0GhB"}