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

package/dist/skins/frosted.d.ts

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

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

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

package/dist/skins/frosted.js

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

package/dist/skins/frosted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frosted.js","names":["styles"],"sources":["../../src/skins/frosted/styles.css","../../src/skins/frosted/index.ts"],"sourcesContent":["\"media-container * {\\n  box-sizing: border-box;\\n}\\n\\nmedia-container {\\n  position: relative;\\n  isolation: isolate;\\n  container: root / inline-size;\\n  overflow: clip;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  border-radius: inherit;\\n  background: oklab(0 0 0);\\n}\\nmedia-container::before,\\nmedia-container::after {\\n  content: '';\\n  position: absolute;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  z-index: 10;\\n}\\nmedia-container::before {\\n  inset: 1px;\\n  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\n}\\nmedia-container::after {\\n  inset: 0;\\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n  border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n  position: absolute;\\n  inset: 0;\\n  display: flex;\\n  flex-flow: column nowrap;\\n  align-items: start;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\\n  backdrop-filter: saturate(1.5) brightness(0.9);\\n  transition: opacity 0.15s ease-out;\\n  transition-delay: 500ms;\\n  opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n  opacity: 1;\\n  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n}\\n\\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\\n.surface {\\n  background-color: oklab(1 0 0 / 0.1);\\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n  box-shadow:\\n    inset 0 0 0 1px oklab(1 0 0 / 0.15),\\n    0 0 0 1px oklab(0 0 0 / 0.15),\\n    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\\n    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n  .surface {\\n    background-color: oklab(0 0 0 / 0.7);\\n    box-shadow:\\n      inset 0 0 0 1px oklab(0 0 0),\\n      0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\n}\\n@media (prefers-contrast: more) {\\n  .surface {\\n    background-color: oklab(0 0 0 / 0.9);\\n    box-shadow:\\n      inset 0 0 0 1px oklab(0 0 0),\\n      0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n  position: absolute;\\n  bottom: 0.75rem;\\n  inset-inline: 0.75rem;\\n  padding: 0.25rem;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.125rem;\\n  border-radius: calc(infinity * 1px);\\n  will-change: scale, transform, filter, opacity;\\n  scale: 0.9;\\n  opacity: 0;\\n  filter: blur(8px);\\n  transition-property: scale, transform, filter, opacity;\\n  transition-delay: 500ms;\\n  transition-duration: 300ms;\\n  transition-timing-function: ease-out;\\n  transform-origin: bottom;\\n  color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n  opacity: 1;\\n  scale: 1;\\n  filter: blur(0px);\\n  transition-delay: 0ms;\\n  transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-controls {\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  gap: 0.75rem;\\n  padding-inline: 0.375rem;\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n  display: grid;\\n  flex-shrink: 0;\\n  padding: 0.5rem;\\n  cursor: pointer;\\n  background: transparent;\\n  border: none;\\n  border-radius: calc(infinity * 1px);\\n  color: oklab(1 0 0 / 0.9);\\n  user-select: none;\\n  outline: 2px solid transparent;\\n  outline-offset: -2px;\\n  transition-property: background-color, color, outline-offset;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n  background-color: oklab(1 0 0 / 0.1);\\n  color: oklab(1 0 0);\\n  text-decoration: none;\\n}\\n.button:focus-visible {\\n  outline-color: oklch(62.3% 0.214 259.815);\\n  outline-offset: 2px;\\n}\\n.button[disabled] {\\n  cursor: not-allowed;\\n  opacity: 0.5;\\n  filter: grayscale(1);\\n}\\n\\n.button .icon {\\n  grid-area: 1 / 1;\\n  width: 18px;\\n  height: 18px;\\n  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n  opacity: 0;\\n  transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n  opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n  display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n  display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n  display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n  display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n  flex: 1;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  position: relative;\\n  border-radius: calc(infinity * 1px);\\n  outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n  min-width: 5rem;\\n  width: 100%;\\n  height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n  height: 5rem;\\n  width: 1.25rem;\\n}\\n\\n.slider-track {\\n  position: relative;\\n  isolation: isolate;\\n  background-color: oklab(1 0 0 / 0.2);\\n  border-radius: inherit;\\n  overflow: hidden;\\n  user-select: none;\\n  outline: 2px solid transparent;\\n  outline-offset: -2px;\\n  transition: outline-offset 150ms ease-out;\\n  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n  width: 100%;\\n  height: 0.25rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n  width: 0.25rem;\\n  height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n  outline-color: oklch(62.3% 0.214 259.815);\\n  outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n  width: 0.625rem;\\n  height: 0.625rem;\\n  background-color: oklab(1 0 0);\\n  border-radius: calc(infinity * 1px);\\n  user-select: none;\\n  z-index: 10;\\n  box-shadow:\\n    0 0 0 1px oklab(0 0 0 / 0.1),\\n    0 1px 3px 0 oklab(0 0 0 / 0.15),\\n    0 1px 2px -1px oklab(0 0 0 / 0.15);\\n  opacity: 0;\\n  transition-property: opacity, height, width;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.slider-thumb:active {\\n  width: 0.75rem;\\n  height: 0.75rem;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n  opacity: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n  cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n  cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n  background-color: oklab(1 0 0 / 0.2);\\n  border-radius: inherit;\\n}\\n\\n.slider-progress {\\n  background-color: oklab(1 0 0);\\n  border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n  transition-property: transform, scale, opacity, filter;\\n  transition-duration: 200ms;\\n  transform: scale(1);\\n  transform-origin: bottom;\\n  opacity: 1;\\n  filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n  transform: scale(0);\\n  opacity: 0;\\n  filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n  transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n  margin: 0;\\n  border: none;\\n  box-shadow: none;\\n  background: transparent;\\n  padding: 0.75rem 0.25rem;\\n  border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip-popup {\\n  color: oklab(1 0 0);\\n  padding: 0.25rem 0.625rem;\\n  border-radius: calc(infinity * 1px);\\n  font-size: 0.75rem;\\n}\\n\\n.tooltip {\\n  display: none;\\n  white-space: nowrap;\\n}\\n\\nmedia-tooltip-popup[data-paused] .play-tooltip,\\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\\n  display: block;\\n}\\n\\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\\n  display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n  return /* html */`\n    ${MediaSkinElement.getTemplateHTML()}\n    <style>${styles}</style>\n\n    <media-container>\n      <slot name=\"media\" slot=\"media\"></slot>\n\n      <div class=\"overlay\"></div>\n\n      <div class=\"control-bar surface\">\n        <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n        <media-tooltip delay=\"500\" close-delay=\"0\">\n          <media-tooltip-trigger>\n            <media-play-button class=\"button\">\n              <media-play-icon class=\"icon play-icon\"></media-play-icon>\n              <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n            </media-play-button>\n          </media-tooltip-trigger>\n          <media-tooltip-portal>\n            <media-tooltip-positioner side=\"top\" side-offset=\"12\" collision-padding=\"12\">\n              <media-tooltip-popup class=\"surface popup-animation\">\n                <span class=\"tooltip play-tooltip\">Play</span>\n                <span class=\"tooltip pause-tooltip\">Pause</span>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip>\n\n        <div class=\"time-controls\">\n          <!-- Use the show-remaining attribute to show count down/remaining time -->\n          <media-current-time-display></media-current-time-display>\n\n          <media-tooltip track-cursor-axis=\"x\">\n            <media-tooltip-trigger>\n              <media-time-slider class=\"slider\">\n                <media-time-slider-track class=\"slider-track\">\n                  <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n                  <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n                </media-time-slider-track>\n                <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n              </media-time-slider>\n            </media-tooltip-trigger>\n            <media-tooltip-portal>\n              <media-tooltip-positioner side=\"top\" side-offset=\"18\" collision-padding=\"12\">\n                <media-tooltip-popup class=\"surface popup-animation\">\n                  <media-preview-time-display></media-preview-time-display>\n                </media-tooltip-popup>\n              </media-tooltip-positioner>\n            </media-tooltip-portal>\n          </media-tooltip>\n\n          <media-duration-display></media-duration-display>\n        </div>\n\n        <media-mute-button popovertarget=\"volume-slider-popover\" class=\"button\">\n          <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n          <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n          <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n        </media-mute-button>\n        <media-popover \n          id=\"volume-slider-popover\" \n          class=\"surface popup-animation\" \n          popover\n          open-on-hover\n          delay=\"200\"\n          close-delay=\"100\"\n          side=\"top\"\n          side-offset=\"12\"\n          collision-padding=\"12\"\n        >\n          <media-volume-slider class=\"slider\" orientation=\"vertical\">\n            <media-volume-slider-track class=\"slider-track\">\n              <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n            </media-volume-slider-track>\n            <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n          </media-volume-slider>\n        </media-popover>\n\n        <media-tooltip delay=\"500\" close-delay=\"0\">\n          <media-tooltip-trigger>\n            <media-fullscreen-button class=\"button\">\n              <media-fullscreen-enter-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n              <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n            </media-fullscreen-button>\n          </media-tooltip-trigger>\n          <media-tooltip-portal>\n            <media-tooltip-positioner side=\"top\" side-offset=\"12\" collision-padding=\"12\">\n              <media-tooltip-popup class=\"surface popup-animation\">\n                <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n                <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MediaSkinFrostedElement extends MediaSkinElement {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-frosted', MediaSkinFrostedElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACiBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}

package/dist/skins/minimal.d.ts

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

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

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

package/dist/skins/minimal.js

@@ -0,0 +1,149 @@
+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-Dc0hyhwB.js";
+import "../preview-time-display-Dax0FQ2X.js";
+import "../time-slider-CA1GMs6A.js";
+import "../tooltip-54fBUUpb.js";
+import "../volume-slider-guD8gqpi.js";
+import "../media-container-C0MUzkJ_.js";
+import "../media-provider-CyoL0bCx.js";
+import { t as MediaSkinElement } from "../media-skin-mHWwUPg3.js";
+import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
+import "../icons-CuxuONCk.js";
+import "../media-container-BGEXSi9g.js";
+import "../media-provider-D_GL2_DN.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 "../media-duration-display-BLMr7VHo.js";
+import "../media-current-time-display-B-4Cp845.js";
+import "../media-preview-time-display-DAiMgLPX.js";
+import "../media-popover-F4M4Tq4z.js";
+import "../media-tooltip-ClcVafMb.js";
+
+//#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-popup {\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-popup {\n    background-color: oklab(0 0 0 / 0.7);\n  }\n}\n@media (prefers-contrast: more) {\n  media-tooltip-popup {\n    background-color: oklab(0 0 0 / 0.9);\n  }\n}\n\n.tooltip {\n  display: none;\n  white-space: nowrap;\n}\n\nmedia-tooltip-popup[data-paused] .play-tooltip,\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\n  display: block;\n}\n\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\n  display: block;\n}\n";
+
+//#endregion
+//#region src/skins/minimal/index.ts
+function getTemplateHTML() {
+	return `
+    ${MediaSkinElement.getTemplateHTML()}
+    <style>${styles_default}</style>
+
+    <media-container>
+      <slot name="media" slot="media"></slot>
+
+      <div class="overlay"></div>
+
+      <div class="control-bar">
+        <!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
+        <media-tooltip delay="500" close-delay="0">
+          <media-tooltip-trigger>
+            <media-play-button class="button">
+              <media-play-icon class="icon play-icon"></media-play-icon>
+              <media-pause-icon class="icon pause-icon"></media-pause-icon>
+            </media-play-button>
+          </media-tooltip-trigger>
+          <media-tooltip-portal>
+            <media-tooltip-positioner side="top" side-offset="6" collision-padding="12">
+              <media-tooltip-popup class="popup-animation">
+                <span class="tooltip play-tooltip">Play</span>
+                <span class="tooltip pause-tooltip">Pause</span>
+              </media-tooltip-popup>
+            </media-tooltip-positioner>
+          </media-tooltip-portal>
+        </media-tooltip>
+
+        <div class="time-display-group">
+          <!-- Use the show-remaining attribute to show count down/remaining time -->
+          <media-current-time-display></media-current-time-display>
+
+          <span class="duration-display">
+            /
+            <media-duration-display></media-duration-display>
+          </span>
+        </div>
+
+        <media-tooltip track-cursor-axis="x">
+          <media-tooltip-trigger>
+            <media-time-slider class="slider">
+              <media-time-slider-track class="slider-track">
+                <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
+                <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
+              </media-time-slider-track>
+              <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
+            </media-time-slider>
+          </media-tooltip-trigger>
+          <media-tooltip-portal>
+            <media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
+              <media-tooltip-popup class="popup-animation">
+                <media-preview-time-display></media-preview-time-display>
+              </media-tooltip-popup>
+            </media-tooltip-positioner>
+          </media-tooltip-portal>
+        </media-tooltip>
+
+        <div class="button-group">
+          <media-mute-button popovertarget="volume-slider-popover" class="button">
+            <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
+            <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
+            <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
+          </media-mute-button>
+          <media-popover 
+            id="volume-slider-popover" 
+            class="popup-animation"
+            popover
+            open-on-hover
+            delay="200"
+            close-delay="100"
+            side="top"
+            side-offset="2"
+            collision-padding="12"
+          >
+            <media-volume-slider class="slider" orientation="vertical">
+              <media-volume-slider-track class="slider-track">
+                <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
+              </media-volume-slider-track>
+              <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+
+          <media-tooltip delay="500" close-delay="0">
+            <media-tooltip-trigger>
+              <media-fullscreen-button class="button">
+                <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
+                <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
+              </media-fullscreen-button>
+            </media-tooltip-trigger>
+            <media-tooltip-portal>
+              <media-tooltip-positioner side="top" side-offset="6" collision-padding="12">
+                <media-tooltip-popup class="popup-animation">
+                  <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
+                  <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
+                </media-tooltip-popup>
+              </media-tooltip-positioner>
+            </media-tooltip-portal>
+          </media-tooltip>
+        </div>
+      </div>
+    </media-container>
+  `;
+}
+var MediaSkinMinimalElement = class extends MediaSkinElement {
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+defineCustomElement("media-skin-minimal", MediaSkinMinimalElement);
+
+//#endregion
+export { MediaSkinMinimalElement, getTemplateHTML };
+//# sourceMappingURL=minimal.js.map

package/dist/skins/minimal.js.map

@@ -0,0 +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-popup {\\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-popup {\\n    background-color: oklab(0 0 0 / 0.7);\\n  }\\n}\\n@media (prefers-contrast: more) {\\n  media-tooltip-popup {\\n    background-color: oklab(0 0 0 / 0.9);\\n  }\\n}\\n\\n.tooltip {\\n  display: none;\\n  white-space: nowrap;\\n}\\n\\nmedia-tooltip-popup[data-paused] .play-tooltip,\\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\\n  display: block;\\n}\\n\\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\\n  display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\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        <media-tooltip delay=\"500\" close-delay=\"0\">\n          <media-tooltip-trigger>\n            <media-play-button class=\"button\">\n              <media-play-icon class=\"icon play-icon\"></media-play-icon>\n              <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n            </media-play-button>\n          </media-tooltip-trigger>\n          <media-tooltip-portal>\n            <media-tooltip-positioner side=\"top\" side-offset=\"6\" collision-padding=\"12\">\n              <media-tooltip-popup class=\"popup-animation\">\n                <span class=\"tooltip play-tooltip\">Play</span>\n                <span class=\"tooltip pause-tooltip\">Pause</span>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip>\n\n        <div class=\"time-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-tooltip track-cursor-axis=\"x\">\n          <media-tooltip-trigger>\n            <media-time-slider class=\"slider\">\n              <media-time-slider-track class=\"slider-track\">\n                <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n                <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n              </media-time-slider-track>\n              <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n            </media-time-slider>\n          </media-tooltip-trigger>\n          <media-tooltip-portal>\n            <media-tooltip-positioner side=\"top\" side-offset=\"12\" collision-padding=\"12\">\n              <media-tooltip-popup class=\"popup-animation\">\n                <media-preview-time-display></media-preview-time-display>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip>\n\n        <div class=\"button-group\">\n          <media-mute-button popovertarget=\"volume-slider-popover\" class=\"button\">\n            <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n            <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n            <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n          </media-mute-button>\n          <media-popover \n            id=\"volume-slider-popover\" \n            class=\"popup-animation\"\n            popover\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-tooltip delay=\"500\" close-delay=\"0\">\n            <media-tooltip-trigger>\n              <media-fullscreen-button 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-alt-icon>\n              </media-fullscreen-button>\n            </media-tooltip-trigger>\n            <media-tooltip-portal>\n              <media-tooltip-positioner side=\"top\" side-offset=\"6\" collision-padding=\"12\">\n                <media-tooltip-popup class=\"popup-animation\">\n                  <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n                  <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n                </media-tooltip-popup>\n              </media-tooltip-positioner>\n            </media-tooltip-portal>\n          </media-tooltip>\n        </div>\n      </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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}