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

package/dist/skins/frosted.js

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

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

package/dist/skins/minimal.d.ts

@@ -1,12 +1,23 @@
-import "../index-AcYRyuAY.js";
-import { t as MediaSkin } from "../media-skin-D44BfH6y.js";
+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 MediaSkinMinimal extends MediaSkin {
+declare class MediaSkinMinimalElement extends MediaSkinElement {
   static getTemplateHTML: () => string;
 }
 //#endregion
-export { MediaSkinMinimal, getTemplateHTML };
+export { MediaSkinMinimalElement, getTemplateHTML };
 //# sourceMappingURL=minimal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;iBAiBgB,eAAA,CAAA;cAyGH,gBAAA,SAAyB,SAAA"}
+{"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"}

package/dist/skins/minimal.js

@@ -1,15 +1,41 @@
-import { t as MediaSkin } from "../media-skin-DR8zj-LV.js";
-import "../icons-eJws_3Te.js";
-import "../media-preview-time-display-C7jpAct6.js";
+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 "../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 "../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-DVCIlSBX.js";
+import "../media-tooltip-C4jOtQ8a.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-root {\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-root[data-orientation='horizontal'] {\n  min-width: 5rem;\n  width: 100%;\n  height: 1.25rem;\n}\n\n/* Vertical orientation styles */\n.slider-root[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-root: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-root:hover .slider-thumb,\n.slider-root: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\npreview-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";
+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";
 
 //#endregion
 //#region src/skins/minimal/index.ts
 function getTemplateHTML() {
 	return `
-    ${MediaSkin.getTemplateHTML()}
+    ${MediaSkinElement.getTemplateHTML()}
     <style>${styles_default}</style>
 
     <media-container>
@@ -19,22 +45,23 @@ function getTemplateHTML() {
 
       <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-root 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-root>
+
+        <media-play-button commandfor="play-tooltip" class="button">
+          <media-play-icon class="icon play-icon"></media-play-icon>
+          <media-pause-icon class="icon pause-icon"></media-pause-icon>
+        </media-play-button>
+        <media-tooltip
+          id="play-tooltip"
+          class="popup-animation"
+          popover="manual"
+          delay="500"
+          side="top"
+          side-offset="6"
+          collision-padding="12"
+        >
+          <span class="tooltip play-tooltip">Play</span>
+          <span class="tooltip pause-tooltip">Pause</span>
+        </media-tooltip>
 
         <div class="time-display-group">
           <!-- Use the show-remaining attribute to show count down/remaining time -->
@@ -46,27 +73,27 @@ function getTemplateHTML() {
           </span>
         </div>
 
-        <media-tooltip-root track-cursor-axis="x">
-          <media-tooltip-trigger>
-            <media-time-slider-root class="slider-root">
-              <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-root>
-          </media-tooltip-trigger>
-          <media-tooltip-portal>
-            <media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
-              <media-tooltip-popup class="popup-animation">
-                <preview-time-display></preview-time-display>
-              </media-tooltip-popup>
-            </media-tooltip-positioner>
-          </media-tooltip-portal>
-        </media-tooltip-root>
+        <media-time-slider commandfor="time-slider-tooltip" class="slider">
+          <media-time-slider-track class="slider-track">
+            <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
+            <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
+          </media-time-slider-track>
+          <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
+        </media-time-slider>
+        <media-tooltip 
+          id="time-slider-tooltip"
+          class="popup-animation"
+          popover="manual"
+          track-cursor-axis="x"
+          side="top"
+          side-offset="12"
+          collision-padding="12"
+        >
+          <media-preview-time-display></media-preview-time-display>
+        </media-tooltip>
 
         <div class="button-group">
-          <media-mute-button popovertarget="volume-slider-popover" class="button">
+          <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
             <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
             <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
             <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
@@ -74,7 +101,7 @@ function getTemplateHTML() {
           <media-popover 
             id="volume-slider-popover" 
             class="popup-animation"
-            popover
+            popover="manual"
             open-on-hover
             delay="200"
             close-delay="100"
@@ -82,42 +109,42 @@ function getTemplateHTML() {
             side-offset="2"
             collision-padding="12"
           >
-            <media-volume-slider-root class="slider-root" orientation="vertical">
+            <media-volume-slider class="slider" orientation="vertical">
               <media-volume-slider-track class="slider-track">
-                <media-volume-slider-progress class="slider-progress"></media-volume-slider-progress>
+                <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-root>
+            </media-volume-slider>
           </media-popover>
 
-          <media-tooltip-root 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-root>
+          <media-fullscreen-button commandfor="fullscreen-tooltip" 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-icon>
+          </media-fullscreen-button>
+          <media-tooltip 
+            id="fullscreen-tooltip" 
+            class="popup-animation"
+            popover="manual"
+            delay="500"
+            side="top"
+            side-offset="6"
+            collision-padding="12"
+          >
+            <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
+            <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
+          </media-tooltip>
         </div>
       </div>
     </media-container>
   `;
 }
-var MediaSkinMinimal = class extends MediaSkin {
+var MediaSkinMinimalElement = class extends MediaSkinElement {
 	static {
 		this.getTemplateHTML = getTemplateHTML;
 	}
 };
-customElements.define("media-skin-minimal", MediaSkinMinimal);
+defineCustomElement("media-skin-minimal", MediaSkinMinimalElement);
 
 //#endregion
-export { MediaSkinMinimal, getTemplateHTML };
+export { MediaSkinMinimalElement, getTemplateHTML };
 //# sourceMappingURL=minimal.js.map