@videojs/html 0.1.0-preview.6 → 0.1.0-preview.8

package/dist/{popover-ty9dFDNE.js → popover-BUCVOjnO.js}

@@ -1,14 +1,29 @@
 import { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from "@videojs/utils/dom";
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 
 //#region src/elements/popover.ts
 var PopoverElement = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"id",
+			"open-on-hover",
+			"delay",
+			"close-delay",
+			"side",
+			"side-offset"
+		];
+	}
 	#open = false;
 	#transitionStatus = "initial";
 	#hoverTimeout = null;
 	#cleanup = null;
 	#abortController = null;
-	#floatingContext = null;
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (name === "id") this.style.setProperty("position-anchor", `--${newValue}`);
+		const [side, alignment] = this.side.split("-");
+		this.style.setProperty("top", `calc(anchor(${side}) - ${this.sideOffset}px)`);
+		this.style.setProperty("translate", `0 -100%`);
+		this.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
+	}
 	connectedCallback() {
 		this.#abortController ??= new AbortController();
 		const { signal } = this.#abortController;
@@ -50,15 +65,6 @@ var PopoverElement = class extends HTMLElement {
 			default: break;
 		}
 	}
-	static get observedAttributes() {
-		return [
-			"open-on-hover",
-			"delay",
-			"close-delay",
-			"side",
-			"side-offset"
-		];
-	}
 	get openOnHover() {
 		return this.hasAttribute("open-on-hover");
 	}
@@ -81,7 +87,6 @@ var PopoverElement = class extends HTMLElement {
 		if (this.#open === open) return;
 		this.#open = open;
 		if (open) {
-			this.#setupFloating();
 			this.#transitionStatus = "initial";
 			this.#updateVisibility();
 			this.showPopover();
@@ -105,37 +110,6 @@ var PopoverElement = class extends HTMLElement {
 		this.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
 		this.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
 	}
-	#setupFloating() {
-		const trigger = this.#triggerElement;
-		if (!trigger) return;
-		const placement = this.side ?? "top";
-		const sideOffset = this.sideOffset;
-		const updatePosition = () => {
-			computePosition(trigger, this, {
-				placement,
-				middleware: [
-					offset(sideOffset),
-					flip(),
-					shift()
-				],
-				strategy: "fixed"
-			}).then((data) => {
-				this.#floatingContext = {
-					...data,
-					elements: {
-						domReference: trigger,
-						floating: this
-					}
-				};
-				Object.assign(this.style, {
-					left: `${data.x}px`,
-					top: `${data.y}px`
-				});
-			});
-		};
-		updatePosition();
-		this.#cleanup = autoUpdate(trigger, this, updatePosition);
-	}
 	#clearHoverTimeout() {
 		if (this.#hoverTimeout) {
 			globalThis.clearTimeout(this.#hoverTimeout);
@@ -160,9 +134,13 @@ var PopoverElement = class extends HTMLElement {
 		getDocument(this).documentElement.addEventListener("pointermove", this, { signal });
 	}
 	#handlePointerMove(event) {
-		if (!this.openOnHover || !this.#floatingContext) return;
+		if (!this.openOnHover || !this.#triggerElement) return;
 		safePolygon({ blockPointerEvents: true })({
-			...this.#floatingContext,
+			placement: this.side,
+			elements: {
+				domReference: this.#triggerElement,
+				floating: this
+			},
 			x: event.clientX,
 			y: event.clientY,
 			onClose: () => {
@@ -186,4 +164,4 @@ var PopoverElement = class extends HTMLElement {
 
 //#endregion
 export { PopoverElement as t };
-//# sourceMappingURL=popover-ty9dFDNE.js.map
+//# sourceMappingURL=popover-BUCVOjnO.js.map

package/dist/popover-BUCVOjnO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-BUCVOjnO.js","names":["#abortController","#triggerElement","#clearHoverTimeout","#cleanup","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#handleFocusIn","#handleFocusOut","#open","#transitionStatus","#updateVisibility","#hoverTimeout","#addPointerMoveListener","#setOpen"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\nexport class PopoverElement extends HTMLElement {\n  static get observedAttributes(): string[] {\n    return ['id', 'open-on-hover', 'delay', 'close-delay', 'side', 'side-offset'];\n  }\n\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\n  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {\n    if (name === 'id') {\n      this.style.setProperty('position-anchor', `--${newValue}`);\n    }\n\n    const [side, alignment] = this.side.split('-');\n    this.style.setProperty('top', `calc(anchor(${side}) - ${this.sideOffset}px)`);\n    this.style.setProperty('translate', `0 -100%`);\n    this.style.setProperty('justify-self', alignment === 'start'\n      ? 'anchor-start'\n      : alignment === 'end'\n        ? 'anchor-end'\n        : 'anchor-center');\n  }\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  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.#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  #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.#triggerElement) return;\n\n    const close = safePolygon({ blockPointerEvents: true })({\n      placement: this.side,\n      elements: {\n        domReference: this.#triggerElement,\n        floating: this,\n      },\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

@@ -1,5 +1,5 @@
-import "../media-container-DPnFjmtK.js";
-import "../video-provider-BcBuWpx6.js";
+import "../video-provider-nSCfwA7l.js";
+import "../media-container-ChS9lZvf.js";
 import "../media-play-button-oq8yDlxe.js";
 import "../media-mute-button-NVJF2EEW.js";
 import "../media-volume-slider-DP47VLVi.js";

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;cAqGH,uBAAA,SAAgC,gBAAA;EArG7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AAqGhB"}
+{"version":3,"file":"frosted.d.ts","names":[],"sources":["../../src/skins/frosted/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cAqGH,uBAAA,SAAgC,gBAAA;EArG7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AAqGhB"}

package/dist/skins/frosted.js

@@ -1,35 +1,35 @@
 import "../component-factory-DeAN6cjC.js";
 import "../current-time-display-C3qndGf5.js";
 import "../duration-display-JOPp3bdU.js";
-import "../button-D1DWjsQu.js";
-import "../fullscreen-button-CGO2UJjs.js";
-import "../mute-button-vW2sLqqY.js";
-import "../play-button-aVb0g10G.js";
-import "../popover-ty9dFDNE.js";
+import "../button-Bu1mGG-F.js";
+import "../fullscreen-button-C1nq8yP-.js";
+import "../mute-button-BSDoCZs3.js";
+import "../play-button-gaqIKsrv.js";
+import "../popover-BUCVOjnO.js";
 import "../preview-time-display-Dax0FQ2X.js";
-import "../time-slider-CA1GMs6A.js";
-import "../tooltip-CJpujx2f.js";
-import "../volume-slider-guD8gqpi.js";
-import "../media-container-C0MUzkJ_.js";
+import "../time-slider-DKamO_2Q.js";
+import "../tooltip-B-glki2f.js";
+import "../volume-slider-CbFzCHX4.js";
+import "../media-container-BOL0PKuG.js";
 import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
 import "../video-provider-BKDqoKFf.js";
 import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
 import "../icons-CuxuONCk.js";
-import "../media-container-BGEXSi9g.js";
-import "../video-provider-BCGedOLm.js";
-import "../media-play-button-CLj-hkwn.js";
-import "../media-mute-button-BOVhZ3aP.js";
-import "../media-volume-slider-CKSxmdQv.js";
-import "../media-time-slider-Bp2qnwsW.js";
-import "../media-fullscreen-button-Dcflbt54.js";
+import "../video-provider-BPPI5e47.js";
+import "../media-container-DwKSOa1h.js";
+import "../media-play-button-DhSK0JQk.js";
+import "../media-mute-button-CHHISH91.js";
+import "../media-volume-slider-B-n6b3Y8.js";
+import "../media-time-slider-SuxR3Rep.js";
+import "../media-fullscreen-button-CIpcLhtU.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-DVCIlSBX.js";
-import "../media-tooltip-C4jOtQ8a.js";
+import "../media-popover-Cw9d_Bh3.js";
+import "../media-tooltip-CMRN_X4D.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 {\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";
+var styles_default = "media-container * {\n  box-sizing: border-box;\n}\n\nmedia-container {\n  position: relative;\n  isolation: isolate;\n  container: root / inline-size;\n  overflow: clip;\n  border-radius: var(--frosted-border-radius, 2rem);\n  background: oklab(0 0 0);\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\nmedia-container::before,\nmedia-container::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  border-radius: inherit;\n  z-index: 10;\n}\nmedia-container::before {\n  inset: 1px;\n  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\n}\nmedia-container::after {\n  inset: 0;\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\n}\n\n/* Fullscreen */\nmedia-container:fullscreen {\n  border-radius: 0;\n}\n\nmedia-container > ::slotted([slot='media']) {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* Media Container UI Overlay Styling */\nmedia-container > .overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: start;\n  pointer-events: none;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\n  backdrop-filter: saturate(1.5) brightness(0.9);\n  transition: opacity 0.15s ease-out;\n  transition-delay: 500ms;\n  opacity: 0;\n}\nmedia-container:hover > .overlay,\nmedia-container:has([data-paused]) > .overlay,\nmedia-container:has([aria-expanded='true']) > .overlay {\n  opacity: 1;\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n}\n\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\n.surface {\n  background-color: oklab(1 0 0 / 0.1);\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n  box-shadow:\n    inset 0 0 0 1px oklab(1 0 0 / 0.15),\n    0 0 0 1px oklab(0 0 0 / 0.15),\n    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\n    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\n}\n@media (prefers-reduced-transparency: reduce) {\n  .surface {\n    background-color: oklab(0 0 0 / 0.7);\n    box-shadow:\n      inset 0 0 0 1px oklab(0 0 0),\n      0 0 0 1px oklab(1 0 0 / 0.2);\n  }\n}\n@media (prefers-contrast: more) {\n  .surface {\n    background-color: oklab(0 0 0 / 0.9);\n    box-shadow:\n      inset 0 0 0 1px oklab(0 0 0),\n      0 0 0 1px oklab(1 0 0 / 0.2);\n  }\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n  position: absolute;\n  bottom: 0.75rem;\n  inset-inline: 0.75rem;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  border-radius: calc(infinity * 1px);\n  will-change: scale, transform, filter, opacity;\n  scale: 0.9;\n  opacity: 0;\n  filter: blur(8px);\n  transition-property: scale, transform, filter, opacity;\n  transition-delay: 500ms;\n  transition-duration: 300ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n  color: oklab(1 0 0);\n}\nmedia-container:hover > .control-bar,\nmedia-container:has([data-paused]) > .control-bar,\nmedia-container:has([aria-expanded='true']) > .control-bar {\n  opacity: 1;\n  scale: 1;\n  filter: blur(0px);\n  transition-delay: 0ms;\n  transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-controls {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n  padding-inline: 0.375rem;\n}\nmedia-current-time-display,\nmedia-duration-display {\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Generic Media Button Styling */\n.button {\n  display: grid;\n  flex-shrink: 0;\n  padding: 0.5rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: calc(infinity * 1px);\n  color: oklab(1 0 0 / 0.9);\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, color, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.button:hover,\n.button:focus-visible,\n.button[aria-expanded='true'] {\n  background-color: oklab(1 0 0 / 0.1);\n  color: oklab(1 0 0);\n  text-decoration: none;\n}\n.button:focus-visible {\n  outline-color: oklch(62.3% 0.214 259.815);\n  outline-offset: 2px;\n}\n.button[disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  filter: grayscale(1);\n}\n\n.button .icon {\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));\n}\n\n/* Media Play Button UI/Styles */\nmedia-play-button .icon {\n  opacity: 0;\n  transition: opacity 150ms linear;\n}\n\nmedia-play-button:not([data-paused]) .pause-icon,\nmedia-play-button[data-paused] .play-icon {\n  opacity: 1;\n}\n\n/* Media Fullscreen Button UI/Styles */\nmedia-fullscreen-button .icon {\n  display: none;\n}\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\n  display: inline;\n}\n\n/* One way to define the \"default visible\" icon (CJP) */\nmedia-mute-button .icon {\n  display: none;\n}\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\n  display: inline;\n}\n\n/* TimeSlider Component Styles */\n.slider {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n}\n\n/* Horizontal orientation styles */\n.slider[data-orientation='horizontal'] {\n  min-width: 5rem;\n  width: 100%;\n  height: 1.25rem;\n}\n\n/* Vertical orientation styles */\n.slider[data-orientation='vertical'] {\n  height: 5rem;\n  width: 1.25rem;\n}\n\n.slider-track {\n  position: relative;\n  isolation: isolate;\n  background-color: oklab(1 0 0 / 0.2);\n  border-radius: inherit;\n  overflow: hidden;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition: outline-offset 150ms ease-out;\n  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\n}\n\n/* Horizontal track styles */\n.slider-track[data-orientation='horizontal'] {\n  width: 100%;\n  height: 0.25rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n  width: 0.25rem;\n  height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n  outline-color: oklch(62.3% 0.214 259.815);\n  outline-offset: 6px;\n}\n\n.slider-thumb {\n  width: 0.625rem;\n  height: 0.625rem;\n  background-color: oklab(1 0 0);\n  border-radius: calc(infinity * 1px);\n  user-select: none;\n  z-index: 10;\n  box-shadow:\n    0 0 0 1px oklab(0 0 0 / 0.1),\n    0 1px 3px 0 oklab(0 0 0 / 0.15),\n    0 1px 2px -1px oklab(0 0 0 / 0.15);\n  opacity: 0;\n  transition-property: opacity, height, width;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slider-thumb:active {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n  opacity: 1;\n}\n.slider-track[data-orientation='horizontal'] .slider-thumb {\n  cursor: ew-resize;\n}\n.slider-track[data-orientation='vertical'] .slider-thumb {\n  cursor: ns-resize;\n}\n\n.slider-pointer {\n  background-color: oklab(1 0 0 / 0.2);\n  border-radius: inherit;\n}\n\n.slider-progress {\n  background-color: oklab(1 0 0);\n  border-radius: inherit;\n}\n\nmedia-preview-time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n.popup-animation {\n  transition-property: transform, scale, opacity, filter;\n  transition-duration: 200ms;\n  transform: scale(1);\n  transform-origin: bottom;\n  opacity: 1;\n  filter: blur(0px);\n}\n.popup-animation[data-starting-style],\n.popup-animation[data-ending-style] {\n  transform: scale(0);\n  opacity: 0;\n  filter: blur(8px);\n}\n.popup-animation[data-instant] {\n  transition-duration: 0ms;\n}\n\nmedia-popover {\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  padding: 0.75rem 0.25rem;\n  border-radius: calc(infinity * 1px);\n}\n\n/* Tooltip Component Styles */\nmedia-tooltip {\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: oklab(1 0 0);\n  padding: 0.25rem 0.625rem;\n  border-radius: calc(infinity * 1px);\n  font-size: 0.75rem;\n}\n\n.tooltip {\n  display: none;\n  white-space: nowrap;\n}\n\n[data-paused] + media-tooltip .play-tooltip,\n:not([data-paused]) + media-tooltip .pause-tooltip {\n  display: block;\n}\n\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\n  display: block;\n}\n";
 
 //#endregion
 //#region src/skins/frosted/index.ts

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 {\\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/video-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"}
+{"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  border-radius: var(--frosted-border-radius, 2rem);\\n  background: oklab(0 0 0);\\n  font-family: ui-sans-serif, system-ui, sans-serif;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  -webkit-font-smoothing: auto;\\n  -moz-osx-font-smoothing: auto;\\n}\\nmedia-container::before,\\nmedia-container::after {\\n  content: '';\\n  position: absolute;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  z-index: 10;\\n}\\nmedia-container::before {\\n  inset: 1px;\\n  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\n}\\nmedia-container::after {\\n  inset: 0;\\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n  border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n  position: absolute;\\n  inset: 0;\\n  display: flex;\\n  flex-flow: column nowrap;\\n  align-items: start;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\\n  backdrop-filter: saturate(1.5) brightness(0.9);\\n  transition: opacity 0.15s ease-out;\\n  transition-delay: 500ms;\\n  opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n  opacity: 1;\\n  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n}\\n\\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\\n.surface {\\n  background-color: oklab(1 0 0 / 0.1);\\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n  box-shadow:\\n    inset 0 0 0 1px oklab(1 0 0 / 0.15),\\n    0 0 0 1px oklab(0 0 0 / 0.15),\\n    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\\n    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n  .surface {\\n    background-color: oklab(0 0 0 / 0.7);\\n    box-shadow:\\n      inset 0 0 0 1px oklab(0 0 0),\\n      0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\n}\\n@media (prefers-contrast: more) {\\n  .surface {\\n    background-color: oklab(0 0 0 / 0.9);\\n    box-shadow:\\n      inset 0 0 0 1px oklab(0 0 0),\\n      0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n  position: absolute;\\n  bottom: 0.75rem;\\n  inset-inline: 0.75rem;\\n  padding: 0.25rem;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.125rem;\\n  border-radius: calc(infinity * 1px);\\n  will-change: scale, transform, filter, opacity;\\n  scale: 0.9;\\n  opacity: 0;\\n  filter: blur(8px);\\n  transition-property: scale, transform, filter, opacity;\\n  transition-delay: 500ms;\\n  transition-duration: 300ms;\\n  transition-timing-function: ease-out;\\n  transform-origin: bottom;\\n  color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n  opacity: 1;\\n  scale: 1;\\n  filter: blur(0px);\\n  transition-delay: 0ms;\\n  transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-controls {\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  gap: 0.75rem;\\n  padding-inline: 0.375rem;\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n  display: grid;\\n  flex-shrink: 0;\\n  padding: 0.5rem;\\n  cursor: pointer;\\n  background: transparent;\\n  border: none;\\n  border-radius: calc(infinity * 1px);\\n  color: oklab(1 0 0 / 0.9);\\n  user-select: none;\\n  outline: 2px solid transparent;\\n  outline-offset: -2px;\\n  transition-property: background-color, color, outline-offset;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n  background-color: oklab(1 0 0 / 0.1);\\n  color: oklab(1 0 0);\\n  text-decoration: none;\\n}\\n.button:focus-visible {\\n  outline-color: oklch(62.3% 0.214 259.815);\\n  outline-offset: 2px;\\n}\\n.button[disabled] {\\n  cursor: not-allowed;\\n  opacity: 0.5;\\n  filter: grayscale(1);\\n}\\n\\n.button .icon {\\n  grid-area: 1 / 1;\\n  width: 18px;\\n  height: 18px;\\n  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n  opacity: 0;\\n  transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n  opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n  display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n  display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n  display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n  display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n  flex: 1;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  position: relative;\\n  border-radius: calc(infinity * 1px);\\n  outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n  min-width: 5rem;\\n  width: 100%;\\n  height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n  height: 5rem;\\n  width: 1.25rem;\\n}\\n\\n.slider-track {\\n  position: relative;\\n  isolation: isolate;\\n  background-color: oklab(1 0 0 / 0.2);\\n  border-radius: inherit;\\n  overflow: hidden;\\n  user-select: none;\\n  outline: 2px solid transparent;\\n  outline-offset: -2px;\\n  transition: outline-offset 150ms ease-out;\\n  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n  width: 100%;\\n  height: 0.25rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n  width: 0.25rem;\\n  height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n  outline-color: oklch(62.3% 0.214 259.815);\\n  outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n  width: 0.625rem;\\n  height: 0.625rem;\\n  background-color: oklab(1 0 0);\\n  border-radius: calc(infinity * 1px);\\n  user-select: none;\\n  z-index: 10;\\n  box-shadow:\\n    0 0 0 1px oklab(0 0 0 / 0.1),\\n    0 1px 3px 0 oklab(0 0 0 / 0.15),\\n    0 1px 2px -1px oklab(0 0 0 / 0.15);\\n  opacity: 0;\\n  transition-property: opacity, height, width;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.slider-thumb:active {\\n  width: 0.75rem;\\n  height: 0.75rem;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n  opacity: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n  cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n  cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n  background-color: oklab(1 0 0 / 0.2);\\n  border-radius: inherit;\\n}\\n\\n.slider-progress {\\n  background-color: oklab(1 0 0);\\n  border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n  transition-property: transform, scale, opacity, filter;\\n  transition-duration: 200ms;\\n  transform: scale(1);\\n  transform-origin: bottom;\\n  opacity: 1;\\n  filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n  transform: scale(0);\\n  opacity: 0;\\n  filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n  transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n  margin: 0;\\n  border: none;\\n  box-shadow: none;\\n  background: transparent;\\n  padding: 0.75rem 0.25rem;\\n  border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip {\\n  margin: 0;\\n  border: none;\\n  box-shadow: none;\\n  background: transparent;\\n  color: oklab(1 0 0);\\n  padding: 0.25rem 0.625rem;\\n  border-radius: calc(infinity * 1px);\\n  font-size: 0.75rem;\\n}\\n\\n.tooltip {\\n  display: none;\\n  white-space: nowrap;\\n}\\n\\n[data-paused] + media-tooltip .play-tooltip,\\n:not([data-paused]) + media-tooltip .pause-tooltip {\\n  display: block;\\n}\\n\\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\\n  display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\n// be sure to import video-provider first for proper context initialization\nimport '@/define/video-provider';\nimport '@/define/media-container';\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;;;;ACkBA,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

@@ -1,5 +1,5 @@
-import "../media-container-DPnFjmtK.js";
-import "../video-provider-BcBuWpx6.js";
+import "../video-provider-nSCfwA7l.js";
+import "../media-container-ChS9lZvf.js";
 import "../media-play-button-oq8yDlxe.js";
 import "../media-mute-button-NVJF2EEW.js";
 import "../media-volume-slider-DP47VLVi.js";

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;cA0GH,uBAAA,SAAgC,gBAAA;EA1G7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AA0GhB"}
+{"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAmBgB,eAAA,CAAA;cA0GH,uBAAA,SAAgC,gBAAA;EA1G7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AA0GhB"}

package/dist/skins/minimal.js

@@ -1,35 +1,35 @@
 import "../component-factory-DeAN6cjC.js";
 import "../current-time-display-C3qndGf5.js";
 import "../duration-display-JOPp3bdU.js";
-import "../button-D1DWjsQu.js";
-import "../fullscreen-button-CGO2UJjs.js";
-import "../mute-button-vW2sLqqY.js";
-import "../play-button-aVb0g10G.js";
-import "../popover-ty9dFDNE.js";
+import "../button-Bu1mGG-F.js";
+import "../fullscreen-button-C1nq8yP-.js";
+import "../mute-button-BSDoCZs3.js";
+import "../play-button-gaqIKsrv.js";
+import "../popover-BUCVOjnO.js";
 import "../preview-time-display-Dax0FQ2X.js";
-import "../time-slider-CA1GMs6A.js";
-import "../tooltip-CJpujx2f.js";
-import "../volume-slider-guD8gqpi.js";
-import "../media-container-C0MUzkJ_.js";
+import "../time-slider-DKamO_2Q.js";
+import "../tooltip-B-glki2f.js";
+import "../volume-slider-CbFzCHX4.js";
+import "../media-container-BOL0PKuG.js";
 import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
 import "../video-provider-BKDqoKFf.js";
 import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
 import "../icons-CuxuONCk.js";
-import "../media-container-BGEXSi9g.js";
-import "../video-provider-BCGedOLm.js";
-import "../media-play-button-CLj-hkwn.js";
-import "../media-mute-button-BOVhZ3aP.js";
-import "../media-volume-slider-CKSxmdQv.js";
-import "../media-time-slider-Bp2qnwsW.js";
-import "../media-fullscreen-button-Dcflbt54.js";
+import "../video-provider-BPPI5e47.js";
+import "../media-container-DwKSOa1h.js";
+import "../media-play-button-DhSK0JQk.js";
+import "../media-mute-button-CHHISH91.js";
+import "../media-volume-slider-B-n6b3Y8.js";
+import "../media-time-slider-SuxR3Rep.js";
+import "../media-fullscreen-button-CIpcLhtU.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-DVCIlSBX.js";
-import "../media-tooltip-C4jOtQ8a.js";
+import "../media-popover-Cw9d_Bh3.js";
+import "../media-tooltip-CMRN_X4D.js";
 
 //#region src/skins/minimal/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::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  border-radius: inherit;\n  z-index: 10;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\n}\n@media (prefers-color-scheme: dark) {\n  media-container::after {\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\n  }\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.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\n  transform: translateY(100%);\n  transition-property: transform, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: 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  transform: translateY(0);\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  will-change: transform, filter, opacity;\n  transform: translateY(100%);\n  opacity: 0;\n  filter: blur(8px);\n  transition-property: transform, filter, opacity;\n  transition-delay: 500ms;\n  transition-duration: 300ms;\n  transition-timing-function: ease-out;\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  transform: translateY(0);\n  filter: blur(0px);\n  transition-delay: 0ms;\n  transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-display-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.duration-display {\n  display: contents;\n  color: oklab(1 0 0 / 0.5);\n}\nmedia-current-time-display,\nmedia-duration-display {\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\n  font-variant-numeric: tabular-nums;\n}\n\n.button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n/* Generic Media Button Styling */\n.button {\n  display: grid;\n  flex-shrink: 0;\n  padding: 0.625rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  color: oklab(1 0 0);\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  color: oklab(1 0 0 / 0.8);\n  text-decoration: none;\n}\n.button:focus-visible {\n  outline-color: oklab(1 0 0);\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.4));\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: 4.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.1875rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n  width: 0.1875rem;\n  height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n  outline-color: oklab(1 0 0);\n  outline-offset: 6px;\n}\n\n.slider-thumb {\n  width: 0.75rem;\n  height: 0.75rem;\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  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n  opacity: 1;\n  scale: 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  display: none;\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.5rem;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  background-color: oklab(1 0 0 / 0.1);\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklab(0 0 0 / 0.1),\n    0 2px 4px -2px oklab(0 0 0 / 0.1);\n}\n@media (prefers-reduced-transparency: reduce) {\n  media-tooltip {\n    background-color: oklab(0 0 0 / 0.7);\n  }\n}\n@media (prefers-contrast: more) {\n  media-tooltip {\n    background-color: oklab(0 0 0 / 0.9);\n  }\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";
+var styles_default = "media-container * {\n  box-sizing: border-box;\n}\n\nmedia-container {\n  position: relative;\n  isolation: isolate;\n  container: root / inline-size;\n  overflow: clip;\n  border-radius: var(--minimal-border-radius, 0.75rem);\n  background: oklab(0 0 0);\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\nmedia-container::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  border-radius: inherit;\n  z-index: 10;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);\n}\n@media (prefers-color-scheme: dark) {\n  media-container::after {\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\n  }\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.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\n  transform: translateY(100%);\n  transition-property: transform, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: 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  transform: translateY(0);\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  will-change: transform, filter, opacity;\n  transform: translateY(100%);\n  opacity: 0;\n  filter: blur(8px);\n  transition-property: transform, filter, opacity;\n  transition-delay: 500ms;\n  transition-duration: 300ms;\n  transition-timing-function: ease-out;\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  transform: translateY(0);\n  filter: blur(0px);\n  transition-delay: 0ms;\n  transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-display-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.duration-display {\n  display: contents;\n  color: oklab(1 0 0 / 0.5);\n}\nmedia-current-time-display,\nmedia-duration-display {\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\n  font-variant-numeric: tabular-nums;\n}\n\n.button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n/* Generic Media Button Styling */\n.button {\n  display: grid;\n  flex-shrink: 0;\n  padding: 0.625rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  color: oklab(1 0 0);\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  color: oklab(1 0 0 / 0.8);\n  text-decoration: none;\n}\n.button:focus-visible {\n  outline-color: oklab(1 0 0);\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.4));\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: 4.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.1875rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n  width: 0.1875rem;\n  height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n  outline-color: oklab(1 0 0);\n  outline-offset: 6px;\n}\n\n.slider-thumb {\n  width: 0.75rem;\n  height: 0.75rem;\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  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n  opacity: 1;\n  scale: 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  display: none;\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.5rem;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  background-color: oklab(1 0 0 / 0.1);\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklab(0 0 0 / 0.1),\n    0 2px 4px -2px oklab(0 0 0 / 0.1);\n}\n@media (prefers-reduced-transparency: reduce) {\n  media-tooltip {\n    background-color: oklab(0 0 0 / 0.7);\n  }\n}\n@media (prefers-contrast: more) {\n  media-tooltip {\n    background-color: oklab(0 0 0 / 0.9);\n  }\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/minimal/index.ts

package/dist/skins/minimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/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::after {\\n  content: '';\\n  position: absolute;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  z-index: 10;\\n  inset: 0;\\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\\n}\\n@media (prefers-color-scheme: dark) {\\n  media-container::after {\\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\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.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n  transform: translateY(100%);\\n  transition-property: transform, opacity;\\n  transition-duration: 150ms;\\n  transition-timing-function: 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  transform: translateY(0);\\n  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n  position: absolute;\\n  bottom: 0;\\n  inset-inline: 0;\\n  padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.875rem;\\n  will-change: transform, filter, opacity;\\n  transform: translateY(100%);\\n  opacity: 0;\\n  filter: blur(8px);\\n  transition-property: transform, filter, opacity;\\n  transition-delay: 500ms;\\n  transition-duration: 300ms;\\n  transition-timing-function: ease-out;\\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  transform: translateY(0);\\n  filter: blur(0px);\\n  transition-delay: 0ms;\\n  transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-display-group {\\n  display: flex;\\n  align-items: center;\\n  gap: 0.25rem;\\n}\\n.duration-display {\\n  display: contents;\\n  color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n  display: flex;\\n  align-items: center;\\n  gap: 0.375rem;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n  display: grid;\\n  flex-shrink: 0;\\n  padding: 0.625rem;\\n  cursor: pointer;\\n  background: transparent;\\n  border: none;\\n  border-radius: 0.375rem;\\n  color: oklab(1 0 0);\\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  color: oklab(1 0 0 / 0.8);\\n  text-decoration: none;\\n}\\n.button:focus-visible {\\n  outline-color: oklab(1 0 0);\\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.4));\\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: 4.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.1875rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n  width: 0.1875rem;\\n  height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n  outline-color: oklab(1 0 0);\\n  outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n  width: 0.75rem;\\n  height: 0.75rem;\\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  scale: 0.7;\\n  transform-origin: center;\\n  transition-property: opacity, scale;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n  opacity: 1;\\n  scale: 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  display: none;\\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.5rem;\\n  border-radius: 0.25rem;\\n  font-size: 0.75rem;\\n  background-color: oklab(1 0 0 / 0.1);\\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n  box-shadow:\\n    0 4px 6px -1px oklab(0 0 0 / 0.1),\\n    0 2px 4px -2px oklab(0 0 0 / 0.1);\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n  media-tooltip {\\n    background-color: oklab(0 0 0 / 0.7);\\n  }\\n}\\n@media (prefers-contrast: more) {\\n  media-tooltip {\\n    background-color: oklab(0 0 0 / 0.9);\\n  }\\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/video-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';\n\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\">\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=\"popup-animation\"\n          popover=\"manual\"\n          delay=\"500\"\n          side=\"top\"\n          side-offset=\"6\"\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-display-group\">\n          <!-- Use the show-remaining attribute to show count down/remaining time -->\n          <media-current-time-display></media-current-time-display>\n\n          <span class=\"duration-display\">\n            /\n            <media-duration-display></media-duration-display>\n          </span>\n        </div>\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=\"popup-animation\"\n          popover=\"manual\"\n          track-cursor-axis=\"x\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <media-preview-time-display></media-preview-time-display>\n        </media-tooltip>\n\n        <div class=\"button-group\">\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=\"popup-animation\"\n            popover=\"manual\"\n            open-on-hover\n            delay=\"200\"\n            close-delay=\"100\"\n            side=\"top\"\n            side-offset=\"2\"\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-alt-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-alt-icon>\n            <media-fullscreen-exit-alt-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n          </media-fullscreen-button>\n          <media-tooltip\n            id=\"fullscreen-tooltip\"\n            class=\"popup-animation\"\n            popover=\"manual\"\n            delay=\"500\"\n            side=\"top\"\n            side-offset=\"6\"\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      </div>\n    </media-container>\n  `;\n}\n\nexport class MediaSkinMinimalElement extends MediaSkinElement {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-minimal', MediaSkinMinimalElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACkBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
+{"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/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  border-radius: var(--minimal-border-radius, 0.75rem);\\n  background: oklab(0 0 0);\\n  font-family: ui-sans-serif, system-ui, sans-serif;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  -webkit-font-smoothing: auto;\\n  -moz-osx-font-smoothing: auto;\\n}\\nmedia-container::after {\\n  content: '';\\n  position: absolute;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  z-index: 10;\\n  inset: 0;\\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);\\n}\\n@media (prefers-color-scheme: dark) {\\n  media-container::after {\\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\n  }\\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.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n  transform: translateY(100%);\\n  transition-property: transform, opacity;\\n  transition-duration: 150ms;\\n  transition-timing-function: 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  transform: translateY(0);\\n  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n  position: absolute;\\n  bottom: 0;\\n  inset-inline: 0;\\n  padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.875rem;\\n  will-change: transform, filter, opacity;\\n  transform: translateY(100%);\\n  opacity: 0;\\n  filter: blur(8px);\\n  transition-property: transform, filter, opacity;\\n  transition-delay: 500ms;\\n  transition-duration: 300ms;\\n  transition-timing-function: ease-out;\\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  transform: translateY(0);\\n  filter: blur(0px);\\n  transition-delay: 0ms;\\n  transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-display-group {\\n  display: flex;\\n  align-items: center;\\n  gap: 0.25rem;\\n}\\n.duration-display {\\n  display: contents;\\n  color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n  display: flex;\\n  align-items: center;\\n  gap: 0.375rem;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n  display: grid;\\n  flex-shrink: 0;\\n  padding: 0.625rem;\\n  cursor: pointer;\\n  background: transparent;\\n  border: none;\\n  border-radius: 0.375rem;\\n  color: oklab(1 0 0);\\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  color: oklab(1 0 0 / 0.8);\\n  text-decoration: none;\\n}\\n.button:focus-visible {\\n  outline-color: oklab(1 0 0);\\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.4));\\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: 4.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.1875rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n  width: 0.1875rem;\\n  height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n  outline-color: oklab(1 0 0);\\n  outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n  width: 0.75rem;\\n  height: 0.75rem;\\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  scale: 0.7;\\n  transform-origin: center;\\n  transition-property: opacity, scale;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n  opacity: 1;\\n  scale: 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  display: none;\\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.5rem;\\n  border-radius: 0.25rem;\\n  font-size: 0.75rem;\\n  background-color: oklab(1 0 0 / 0.1);\\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n  box-shadow:\\n    0 4px 6px -1px oklab(0 0 0 / 0.1),\\n    0 2px 4px -2px oklab(0 0 0 / 0.1);\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n  media-tooltip {\\n    background-color: oklab(0 0 0 / 0.7);\\n  }\\n}\\n@media (prefers-contrast: more) {\\n  media-tooltip {\\n    background-color: oklab(0 0 0 / 0.9);\\n  }\\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';\n// be sure to import video-provider first for proper context initialization\nimport '@/define/video-provider';\nimport '@/define/media-container';\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';\n\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\">\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=\"popup-animation\"\n          popover=\"manual\"\n          delay=\"500\"\n          side=\"top\"\n          side-offset=\"6\"\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-display-group\">\n          <!-- Use the show-remaining attribute to show count down/remaining time -->\n          <media-current-time-display></media-current-time-display>\n\n          <span class=\"duration-display\">\n            /\n            <media-duration-display></media-duration-display>\n          </span>\n        </div>\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=\"popup-animation\"\n          popover=\"manual\"\n          track-cursor-axis=\"x\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <media-preview-time-display></media-preview-time-display>\n        </media-tooltip>\n\n        <div class=\"button-group\">\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=\"popup-animation\"\n            popover=\"manual\"\n            open-on-hover\n            delay=\"200\"\n            close-delay=\"100\"\n            side=\"top\"\n            side-offset=\"2\"\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-alt-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-alt-icon>\n            <media-fullscreen-exit-alt-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n          </media-fullscreen-button>\n          <media-tooltip\n            id=\"fullscreen-tooltip\"\n            class=\"popup-animation\"\n            popover=\"manual\"\n            delay=\"500\"\n            side=\"top\"\n            side-offset=\"6\"\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      </div>\n    </media-container>\n  `;\n}\n\nexport class MediaSkinMinimalElement extends MediaSkinElement {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-minimal', MediaSkinMinimalElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACmBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}

package/dist/{time-slider-CA1GMs6A.js → time-slider-DKamO_2Q.js}

@@ -34,7 +34,7 @@ var TimeSliderRoot = class extends HTMLElement {
 		this._core = null;
 	}
 	static {
-		this.observedAttributes = ["orientation"];
+		this.observedAttributes = ["commandfor", "orientation"];
 	}
 	get currentTime() {
 		return this._state?.currentTime ?? 0;
@@ -45,8 +45,9 @@ var TimeSliderRoot = class extends HTMLElement {
 	get orientation() {
 		return this.getAttribute("orientation") || "horizontal";
 	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
+	attributeChangedCallback(name, _oldValue, newValue) {
 		if (name === "orientation" && this._state) this._render(getTimeSliderRootProps(this._state, this), this._state);
+		else if (name === "commandfor") this.style.setProperty("anchor-name", `--${newValue}`);
 	}
 	_update(_props, state) {
 		this._state = state;
@@ -198,4 +199,4 @@ const TimeSliderElement = Object.assign({}, {
 
 //#endregion
 export { TimeSliderThumbElement as a, TimeSliderRootElement as i, TimeSliderPointerElement as n, TimeSliderTrackElement as o, TimeSliderProgressElement as r, TimeSliderElement as t };
-//# sourceMappingURL=time-slider-CA1GMs6A.js.map
+//# sourceMappingURL=time-slider-DKamO_2Q.js.map

package/dist/time-slider-DKamO_2Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-DKamO_2Q.js","names":["getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","CoreTimeSlider","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>"],"sources":["../src/elements/time-slider.ts"],"sourcesContent":["import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\ninterface TimeSliderRootState {\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}\n\n/**\n * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = (state, element) => {\n  const formatTime = (time: number) => {\n    const minutes = Math.floor(time / 60);\n    const seconds = Math.floor(time % 60);\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n  };\n\n  const currentTimeText = formatTime(state.currentTime);\n  const durationText = formatTime(state.duration);\n\n  const baseProps: Record<string, any> = {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-current-time': state.currentTime.toString(),\n    'data-duration': state.duration.toString(),\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Seek',\n    'aria-valuemin': '0',\n    'aria-valuemax': Math.round(state.duration).toString(),\n    'aria-valuenow': Math.round(state.currentTime).toString(),\n    'aria-valuetext': `${currentTimeText} of ${durationText}`,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n\n  return baseProps;\n};\n\nexport class TimeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['commandfor', 'orientation'];\n\n  _state: TimeSliderRootState | undefined;\n  _core: CoreTimeSlider | null = null;\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._render(getTimeSliderRootProps(this._state, this), this._state);\n    } else if (name === 'commandfor') {\n      this.style.setProperty('anchor-name', `--${newValue}`);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    if (state && !this._core) {\n      this._core = new CoreTimeSlider();\n      this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));\n      this._core.attach(this);\n      state.core = this._core;\n    }\n\n    this._core?.setState(state);\n  }\n\n  _render(props: any, state: any): void {\n    const coreState = state?.core?.getState();\n    if (!coreState) return;\n\n    this.style.setProperty('--slider-fill', `${Math.round(coreState._fillWidth)}%`);\n    this.style.setProperty('--slider-pointer', `${Math.round(coreState._pointerWidth)}%`);\n\n    setAttributes(this, props);\n  }\n}\n\nexport class TimeSliderTrack extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    // Set this element as the track element in the core TimeSlider\n    const rootElement = this.closest('media-time-slider') as any;\n    if (rootElement?._state?.core) {\n      rootElement._state.core.setState({ _trackElement: this });\n    }\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\nexport class TimeSliderProgress extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport class TimeSliderPointer extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-pointer, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-pointer, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-pointer, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport class TimeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\nexport const useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = {\n  keys: timeSliderStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...timeSliderStateDefinition.stateTransform(rawState),\n    ...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n    core: null,\n  }),\n};\n\nexport const getTimeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderPointerProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, 'TimeSliderRoot');\n\nexport const TimeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderTrack,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderTrackProps,\n  'TimeSliderTrack',\n);\n\nexport const TimeSliderProgressElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderProgress,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderProgressProps,\n  'TimeSliderProgress',\n);\n\nexport const TimeSliderPointerElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderPointer,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderPointerProps,\n  'TimeSliderPointer',\n);\n\nexport const TimeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderThumb,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderThumbProps,\n  'TimeSliderThumb',\n);\n\nexport const TimeSliderElement = Object.assign(\n  {},\n  {\n    Root: TimeSliderRootElement,\n    Track: TimeSliderTrackElement,\n    Progress: TimeSliderProgressElement,\n    Pointer: TimeSliderPointerElement,\n    Thumb: TimeSliderThumbElement,\n  },\n) as {\n  Root: typeof TimeSliderRootElement;\n  Track: typeof TimeSliderTrackElement;\n  Progress: typeof TimeSliderProgressElement;\n  Pointer: typeof TimeSliderPointerElement;\n  Thumb: typeof TimeSliderThumbElement;\n};\n"],"mappings":"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"}