@videojs/html 0.1.0-preview.9 → 10.0.0-alpha.3

package/dist/skins/frosted.js

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

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

package/dist/skins/minimal.d.ts

@@ -1,23 +0,0 @@
-import "../video-provider-nSCfwA7l.js";
-import "../media-container-ChS9lZvf.js";
-import "../media-play-button-oq8yDlxe.js";
-import "../media-mute-button-NVJF2EEW.js";
-import "../media-volume-slider-DP47VLVi.js";
-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

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

package/dist/skins/minimal.js

@@ -1,150 +0,0 @@
-import "../component-factory-C0cl1nrL.js";
-import "../current-time-display-DpoDrQu9.js";
-import "../duration-display-BFRQmaOz.js";
-import "../button-Bu1mGG-F.js";
-import "../fullscreen-button-B0R9K3GV.js";
-import "../mute-button-C7XQB6iK.js";
-import "../play-button-DFbxwrrq.js";
-import "../popover-BUCVOjnO.js";
-import "../preview-time-display-CtA58pCS.js";
-import "../time-slider-DHpKPCI1.js";
-import "../tooltip-B-glki2f.js";
-import "../volume-slider-CUyfwehe.js";
-import "../media-container-BOL0PKuG.js";
-import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
-import "../video-provider-BKDqoKFf.js";
-import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
-import "../icons-CuxuONCk.js";
-import "../video-provider-BPPI5e47.js";
-import "../media-container-DwKSOa1h.js";
-import "../media-play-button-CDBZrhmx.js";
-import "../media-mute-button-Uy18NpPx.js";
-import "../media-volume-slider-BB6GhrzS.js";
-import "../media-time-slider-BOdJr4QE.js";
-import "../media-fullscreen-button-DDQ6EdLz.js";
-import "../media-duration-display-tzVLafRm.js";
-import "../media-current-time-display-DVCqNt7c.js";
-import "../media-preview-time-display-ufqXiNXg.js";
-import "../media-popover-Cw9d_Bh3.js";
-import "../media-tooltip-CMRN_X4D.js";
-
-//#region src/skins/minimal/styles.css
-var styles_default = "media-container * {\n  box-sizing: border-box;\n}\n\nmedia-container {\n  position: relative;\n  isolation: isolate;\n  container: root / inline-size;\n  overflow: clip;\n  border-radius: var(--minimal-border-radius, 0.75rem);\n  background: oklab(0 0 0);\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\nmedia-container::after {\n  content: '';\n  position: absolute;\n  pointer-events: none;\n  border-radius: inherit;\n  z-index: 10;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);\n}\n@media (prefers-color-scheme: dark) {\n  media-container::after {\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\n  }\n}\n\n/* Fullscreen */\nmedia-container:fullscreen {\n  border-radius: 0;\n}\n\nmedia-container > ::slotted([slot='media']) {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* Media Container UI Overlay Styling */\nmedia-container > .overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: start;\n  pointer-events: none;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\n  transform: translateY(100%);\n  transition-property: transform, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  transition-delay: 500ms;\n  opacity: 0;\n}\nmedia-container:hover > .overlay,\nmedia-container:has([data-paused]) > .overlay,\nmedia-container:has([aria-expanded='true']) > .overlay {\n  opacity: 1;\n  transform: translateY(0);\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n  display: flex;\n  align-items: center;\n  gap: 0.875rem;\n  will-change: transform, filter, opacity;\n  transform: translateY(100%);\n  opacity: 0;\n  filter: blur(8px);\n  transition-property: transform, filter, opacity;\n  transition-delay: 500ms;\n  transition-duration: 300ms;\n  transition-timing-function: ease-out;\n  color: oklab(1 0 0);\n}\nmedia-container:hover > .control-bar,\nmedia-container:has([data-paused]) > .control-bar,\nmedia-container:has([aria-expanded='true']) > .control-bar {\n  opacity: 1;\n  transform: translateY(0);\n  filter: blur(0px);\n  transition-delay: 0ms;\n  transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-display-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.duration-display {\n  display: contents;\n  color: oklab(1 0 0 / 0.5);\n}\nmedia-current-time-display,\nmedia-duration-display {\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\n  font-variant-numeric: tabular-nums;\n}\n\n.button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n/* Generic Media Button Styling */\n.button {\n  display: grid;\n  flex-shrink: 0;\n  padding: 0.625rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  color: oklab(1 0 0);\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, color, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.button:hover,\n.button:focus-visible,\n.button[aria-expanded='true'] {\n  color: oklab(1 0 0 / 0.8);\n  text-decoration: none;\n}\n.button:focus-visible {\n  outline-color: oklab(1 0 0);\n  outline-offset: 2px;\n}\n.button[disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  filter: grayscale(1);\n}\n\n.button .icon {\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\n}\n\n/* Media Play Button UI/Styles */\nmedia-play-button .icon {\n  opacity: 0;\n  transition: opacity 150ms linear;\n}\n\nmedia-play-button:not([data-paused]) .pause-icon,\nmedia-play-button[data-paused] .play-icon {\n  opacity: 1;\n}\n\n/* Media Fullscreen Button UI/Styles */\nmedia-fullscreen-button .icon {\n  display: none;\n}\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\n  display: inline;\n}\n\n/* One way to define the \"default visible\" icon (CJP) */\nmedia-mute-button .icon {\n  display: none;\n}\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\n  display: inline;\n}\n\n/* TimeSlider Component Styles */\n.slider {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n}\n\n/* Horizontal orientation styles */\n.slider[data-orientation='horizontal'] {\n  min-width: 5rem;\n  width: 100%;\n  height: 1.25rem;\n}\n\n/* Vertical orientation styles */\n.slider[data-orientation='vertical'] {\n  height: 4.5rem;\n  width: 1.25rem;\n}\n\n.slider-track {\n  position: relative;\n  isolation: isolate;\n  background-color: oklab(1 0 0 / 0.2);\n  border-radius: inherit;\n  overflow: hidden;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition: outline-offset 150ms ease-out;\n  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\n}\n\n/* Horizontal track styles */\n.slider-track[data-orientation='horizontal'] {\n  width: 100%;\n  height: 0.1875rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n  width: 0.1875rem;\n  height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n  outline-color: oklab(1 0 0);\n  outline-offset: 6px;\n}\n\n.slider-thumb {\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: oklab(1 0 0);\n  border-radius: calc(infinity * 1px);\n  user-select: none;\n  z-index: 10;\n  box-shadow:\n    0 0 0 1px oklab(0 0 0 / 0.1),\n    0 1px 3px 0 oklab(0 0 0 / 0.15),\n    0 1px 2px -1px oklab(0 0 0 / 0.15);\n  opacity: 0;\n  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n  opacity: 1;\n  scale: 1;\n}\n.slider-track[data-orientation='horizontal'] .slider-thumb {\n  cursor: ew-resize;\n}\n.slider-track[data-orientation='vertical'] .slider-thumb {\n  cursor: ns-resize;\n}\n\n.slider-pointer {\n  display: none;\n}\n\n.slider-progress {\n  background-color: oklab(1 0 0);\n  border-radius: inherit;\n}\n\nmedia-preview-time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n.popup-animation {\n  transition-property: transform, scale, opacity, filter;\n  transition-duration: 200ms;\n  transform: scale(1);\n  transform-origin: bottom;\n  opacity: 1;\n  filter: blur(0px);\n}\n.popup-animation[data-starting-style],\n.popup-animation[data-ending-style] {\n  transform: scale(0);\n  opacity: 0;\n  filter: blur(8px);\n}\n.popup-animation[data-instant] {\n  transition-duration: 0ms;\n}\n\nmedia-popover {\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  padding: 0.75rem 0.25rem;\n  border-radius: calc(infinity * 1px);\n}\n\n/* Tooltip Component Styles */\nmedia-tooltip {\n  margin: 0;\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: oklab(1 0 0);\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  background-color: oklab(1 0 0 / 0.1);\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklab(0 0 0 / 0.1),\n    0 2px 4px -2px oklab(0 0 0 / 0.1);\n}\n@media (prefers-reduced-transparency: reduce) {\n  media-tooltip {\n    background-color: oklab(0 0 0 / 0.7);\n  }\n}\n@media (prefers-contrast: more) {\n  media-tooltip {\n    background-color: oklab(0 0 0 / 0.9);\n  }\n}\n\n.tooltip {\n  display: none;\n  white-space: nowrap;\n}\n\n[data-paused] + media-tooltip .play-tooltip,\n:not([data-paused]) + media-tooltip .pause-tooltip {\n  display: block;\n}\n\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\n  display: block;\n}\n";
-
-//#endregion
-//#region src/skins/minimal/index.ts
-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-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 -->
-          <media-current-time-display></media-current-time-display>
-
-          <span class="duration-display">
-            /
-            <media-duration-display></media-duration-display>
-          </span>
-        </div>
-
-        <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 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>
-          </media-mute-button>
-          <media-popover
-            id="volume-slider-popover"
-            class="popup-animation"
-            popover="manual"
-            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-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 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

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

package/dist/store.d.ts

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

package/dist/time-slider-DHpKPCI1.js

@@ -1,165 +0,0 @@
-import { n as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-C0cl1nrL.js";
-import { timeSliderStateDefinition } from "@videojs/core/store";
-import { setAttributes } from "@videojs/utils/dom";
-import { TimeSlider } from "@videojs/core";
-
-//#region src/elements/time-slider.ts
-function getTimeSliderRootState(mediaStore) {
-	const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());
-	const mediaMethods = timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch);
-	return { ...getCoreState(TimeSlider, {
-		...mediaState,
-		...mediaMethods
-	}) };
-}
-/**
-* TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
-* Handles element attributes and properties based on state
-*/
-const getTimeSliderRootProps = (state, element) => {
-	if (state._rootElement !== element) state._setRootElement(element);
-	return {
-		role: "slider",
-		tabindex: element.getAttribute("tabindex") ?? "0",
-		"data-current-time": state.currentTime.toString(),
-		"data-duration": state.duration.toString(),
-		"data-orientation": element.orientation || "horizontal",
-		"aria-label": "Seek",
-		"aria-valuemin": "0",
-		"aria-valuemax": Math.round(state.duration).toString(),
-		"aria-valuenow": Math.round(state.currentTime).toString(),
-		"aria-valuetext": `${state._currentTimeText} of ${state._durationText}`,
-		"aria-orientation": element.orientation || "horizontal"
-	};
-};
-var TimeSliderRoot = class extends HTMLElement {
-	static {
-		this.observedAttributes = ["commandfor", "orientation"];
-	}
-	get currentTime() {
-		return this._state?.currentTime ?? 0;
-	}
-	get duration() {
-		return this._state?.duration ?? 0;
-	}
-	get orientation() {
-		return this.getAttribute("orientation") || "horizontal";
-	}
-	attributeChangedCallback(name, _oldValue, newValue) {
-		if (name === "orientation" && this._state) this._update(getTimeSliderRootProps(this._state, this), this._state);
-		else if (name === "commandfor") this.style.setProperty("anchor-name", `--${newValue}`);
-	}
-	_update(props, state) {
-		this._state = state;
-		this.style.setProperty("--slider-fill", `${state._fillWidth.toFixed(3)}%`);
-		this.style.setProperty("--slider-pointer", `${(state._pointerWidth * 100).toFixed(3)}%`);
-		setAttributes(this, props);
-	}
-};
-const TimeSliderRootElement = toConnectedHTMLComponent(TimeSliderRoot, getTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
-const getTimeSliderTrackProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	if (rootElement._state?._trackElement !== element) rootElement._state?._setTrackElement?.(element);
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-var TimeSliderTrack = class extends HTMLElement {
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "100%";
-			this.style.removeProperty("height");
-		} else {
-			this.style.height = "100%";
-			this.style.removeProperty("width");
-		}
-	}
-};
-const TimeSliderTrackElement = toConnectedHTMLComponent(TimeSliderTrack, void 0, getTimeSliderTrackProps, "TimeSliderTrack");
-const getTimeSliderProgressProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-var TimeSliderProgress = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-		this.style.width = "var(--slider-fill, 0%)";
-		this.style.height = "100%";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "var(--slider-fill, 0%)";
-			this.style.height = "100%";
-			this.style.top = "0";
-			this.style.removeProperty("bottom");
-		} else {
-			this.style.height = "var(--slider-fill, 0%)";
-			this.style.width = "100%";
-			this.style.bottom = "0";
-			this.style.removeProperty("top");
-		}
-	}
-};
-const TimeSliderProgressElement = toConnectedHTMLComponent(TimeSliderProgress, void 0, getTimeSliderProgressProps, "TimeSliderProgress");
-const getTimeSliderPointerProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-var TimeSliderPointer = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-		this.style.width = "var(--slider-pointer, 0%)";
-		this.style.height = "100%";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "var(--slider-pointer, 0%)";
-			this.style.height = "100%";
-			this.style.top = "0";
-			this.style.removeProperty("bottom");
-		} else {
-			this.style.height = "var(--slider-pointer, 0%)";
-			this.style.width = "100%";
-			this.style.bottom = "0";
-			this.style.removeProperty("top");
-		}
-	}
-};
-const TimeSliderPointerElement = toConnectedHTMLComponent(TimeSliderPointer, void 0, getTimeSliderPointerProps, "TimeSliderPointer");
-const getTimeSliderThumbProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-var TimeSliderThumb = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.left = "var(--slider-fill, 0%)";
-			this.style.top = "50%";
-			this.style.translate = "-50% -50%";
-		} else {
-			this.style.bottom = "var(--slider-fill, 0%)";
-			this.style.left = "50%";
-			this.style.translate = "-50% 50%";
-		}
-	}
-};
-const TimeSliderThumbElement = toConnectedHTMLComponent(TimeSliderThumb, void 0, getTimeSliderThumbProps, "TimeSliderThumb");
-const TimeSliderElement = Object.assign({}, {
-	Root: TimeSliderRootElement,
-	Track: TimeSliderTrackElement,
-	Progress: TimeSliderProgressElement,
-	Pointer: TimeSliderPointerElement,
-	Thumb: TimeSliderThumbElement
-});
-
-//#endregion
-export { TimeSliderThumbElement as a, TimeSliderRootElement as i, TimeSliderPointerElement as n, TimeSliderTrackElement as o, TimeSliderProgressElement as r, TimeSliderElement as t };
-//# sourceMappingURL=time-slider-DHpKPCI1.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"time-slider-DHpKPCI1.js","names":["CoreTimeSlider","getTimeSliderRootProps: PropsHook<TimeSliderState>","TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderState>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/time-slider.ts"],"sourcesContent":["import type { MediaStore } from '@videojs/core/store';\nimport type { Prettify } from '../types';\n\nimport type { ConnectedComponentConstructor, PropsHook } from '../utils/component-factory';\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { getCoreState, toConnectedHTMLComponent } from '../utils/component-factory';\n\ntype TimeSliderState = Prettify<ReturnType<CoreTimeSlider['getState']>>;\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function getTimeSliderRootState(mediaStore: MediaStore): TimeSliderState {\n  const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());\n  const mediaMethods = timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch);\n  const coreState = getCoreState(CoreTimeSlider, { ...mediaState, ...mediaMethods });\n  return {\n    ...coreState,\n  };\n}\n\n/**\n * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getTimeSliderRootProps: PropsHook<TimeSliderState> = (state, element) => {\n  if (state._rootElement !== element) {\n    state._setRootElement(element);\n  }\n\n  return {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-current-time': state.currentTime.toString(),\n    'data-duration': state.duration.toString(),\n    'data-orientation': (element as any).orientation || 'horizontal',\n    'aria-label': 'Seek',\n    'aria-valuemin': '0',\n    'aria-valuemax': Math.round(state.duration).toString(),\n    'aria-valuenow': Math.round(state.currentTime).toString(),\n    'aria-valuetext': `${state._currentTimeText} of ${state._durationText}`,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = [\n    'commandfor',\n    'orientation',\n  ];\n\n  _state: TimeSliderState | undefined;\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._update(getTimeSliderRootProps(this._state, this), this._state);\n    } else if (name === 'commandfor') {\n      this.style.setProperty('anchor-name', `--${newValue}`);\n    }\n  }\n\n  _update(props: any, state: TimeSliderState): void {\n    this._state = state;\n\n    this.style.setProperty('--slider-fill', `${state._fillWidth.toFixed(3)}%`);\n    this.style.setProperty('--slider-pointer', `${(state._pointerWidth * 100).toFixed(3)}%`);\n\n    setAttributes(this, props);\n  }\n}\n\nexport const TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderState>\n  = toConnectedHTMLComponent(\n    TimeSliderRoot,\n    getTimeSliderRootState,\n    getTimeSliderRootProps,\n    'TimeSliderRoot',\n  );\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport const getTimeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n\n  if (rootElement._state?._trackElement !== element) {\n    rootElement._state?._setTrackElement?.(element);\n  }\n\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderTrack extends HTMLElement {\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\nexport const TimeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderTrack,\n  undefined,\n  getTimeSliderTrackProps,\n  'TimeSliderTrack',\n);\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport const getTimeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderProgress extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport const TimeSliderProgressElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderProgress,\n  undefined,\n  getTimeSliderProgressProps,\n  'TimeSliderProgress',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport const getTimeSliderPointerProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderPointer extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-pointer, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-pointer, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-pointer, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport const TimeSliderPointerElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderPointer,\n  undefined,\n  getTimeSliderPointerProps,\n  'TimeSliderPointer',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport const getTimeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport class TimeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\nexport const TimeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderThumb,\n  undefined,\n  getTimeSliderThumbProps,\n  'TimeSliderThumb',\n);\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSliderElement = Object.assign(\n  {},\n  {\n    Root: TimeSliderRootElement,\n    Track: TimeSliderTrackElement,\n    Progress: TimeSliderProgressElement,\n    Pointer: TimeSliderPointerElement,\n    Thumb: TimeSliderThumbElement,\n  },\n) as {\n  Root: typeof TimeSliderRootElement;\n  Track: typeof TimeSliderTrackElement;\n  Progress: typeof TimeSliderProgressElement;\n  Pointer: typeof TimeSliderPointerElement;\n  Thumb: typeof TimeSliderThumbElement;\n};\n"],"mappings":";;;;;;AAgBA,SAAgB,uBAAuB,YAAyC;CAC9E,MAAM,aAAa,0BAA0B,eAAe,WAAW,UAAU,CAAC;CAClF,MAAM,eAAe,0BAA0B,qBAAqB,WAAW,SAAS;AAExF,QAAO,EACL,GAFgB,aAAaA,YAAgB;EAAE,GAAG;EAAY,GAAG;EAAc,CAAC,EAGjF;;;;;;AAOH,MAAaC,0BAAsD,OAAO,YAAY;AACpF,KAAI,MAAM,iBAAiB,QACzB,OAAM,gBAAgB,QAAQ;AAGhC,QAAO;EACL,MAAM;EACN,UAAU,QAAQ,aAAa,WAAW,IAAI;EAC9C,qBAAqB,MAAM,YAAY,UAAU;EACjD,iBAAiB,MAAM,SAAS,UAAU;EAC1C,oBAAqB,QAAgB,eAAe;EACpD,cAAc;EACd,iBAAiB;EACjB,iBAAiB,KAAK,MAAM,MAAM,SAAS,CAAC,UAAU;EACtD,iBAAiB,KAAK,MAAM,MAAM,YAAY,CAAC,UAAU;EACzD,kBAAkB,GAAG,MAAM,iBAAiB,MAAM,MAAM;EACxD,oBAAqB,QAAgB,eAAe;EACrD;;AAGH,IAAa,iBAAb,cAAoC,YAAY;;4BACU,CACtD,cACA,cACD;;CAID,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,WAAmB;AACrB,SAAO,KAAK,QAAQ,YAAY;;CAGlC,IAAI,cAAyC;AAC3C,SAAQ,KAAK,aAAa,cAAc,IAAkC;;CAG5E,yBAAyB,MAAc,WAA0B,UAA+B;AAC9F,MAAI,SAAS,iBAAiB,KAAK,OACjC,MAAK,QAAQ,uBAAuB,KAAK,QAAQ,KAAK,EAAE,KAAK,OAAO;WAC3D,SAAS,aAClB,MAAK,MAAM,YAAY,eAAe,KAAK,WAAW;;CAI1D,QAAQ,OAAY,OAA8B;AAChD,OAAK,SAAS;AAEd,OAAK,MAAM,YAAY,iBAAiB,GAAG,MAAM,WAAW,QAAQ,EAAE,CAAC,GAAG;AAC1E,OAAK,MAAM,YAAY,oBAAoB,IAAI,MAAM,gBAAgB,KAAK,QAAQ,EAAE,CAAC,GAAG;AAExF,gBAAc,MAAM,MAAM;;;AAI9B,MAAaC,wBACT,yBACA,gBACA,wBACA,wBACA,iBACD;AAMH,MAAaC,2BAA6D,QAAQ,YAAY;CAC5F,MAAM,cAAc,QAAQ,QAAQ,oBAAoB;AAExD,KAAI,YAAY,QAAQ,kBAAkB,QACxC,aAAY,QAAQ,mBAAmB,QAAQ;AAGjD,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;AAGH,IAAa,kBAAb,cAAqC,YAAY;CAC/C,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAE1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,eAAe,SAAS;SAC9B;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,eAAe,QAAQ;;;;AAKxC,MAAaC,yBAA6D,yBACxE,iBACA,QACA,yBACA,kBACD;AAMD,MAAaC,8BAAgE,QAAQ,YAAY;CAC/F,MAAM,cAAc,QAAQ,QAAQ,oBAAoB;AACxD,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;AAGH,IAAa,qBAAb,cAAwC,YAAY;CAClD,cAAc;AACZ,SAAO;AACP,OAAK,MAAM,WAAW;AACtB,OAAK,MAAM,QAAQ;AACnB,OAAK,MAAM,SAAS;;CAGtB,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAE1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,MAAM;AACjB,QAAK,MAAM,eAAe,SAAS;SAC9B;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,eAAe,MAAM;;;;AAKtC,MAAaC,4BAAgE,yBAC3E,oBACA,QACA,4BACA,qBACD;AAMD,MAAaC,6BAA+D,QAAQ,YAAY;CAC9F,MAAM,cAAc,QAAQ,QAAQ,oBAAoB;AACxD,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;AAGH,IAAa,oBAAb,cAAuC,YAAY;CACjD,cAAc;AACZ,SAAO;AACP,OAAK,MAAM,WAAW;AACtB,OAAK,MAAM,QAAQ;AACnB,OAAK,MAAM,SAAS;;CAGtB,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAE1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,MAAM;AACjB,QAAK,MAAM,eAAe,SAAS;SAC9B;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,QAAQ;AACnB,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,eAAe,MAAM;;;;AAKtC,MAAaC,2BAA+D,yBAC1E,mBACA,QACA,2BACA,oBACD;AAMD,MAAaC,2BAA6D,QAAQ,YAAY;CAC5F,MAAM,cAAc,QAAQ,QAAQ,oBAAoB;AACxD,QAAO,EACL,oBAAoB,aAAa,eAAe,cACjD;;AAGH,IAAa,kBAAb,cAAqC,YAAY;CAC/C,cAAc;AACZ,SAAO;AACP,OAAK,MAAM,WAAW;;CAGxB,QAAQ,OAAY,QAAmB;AACrC,gBAAc,MAAM,MAAM;AAG1B,MAAI,MAAM,wBAAwB,cAAc;AAC9C,QAAK,MAAM,OAAO;AAClB,QAAK,MAAM,MAAM;AACjB,QAAK,MAAM,YAAY;SAClB;AACL,QAAK,MAAM,SAAS;AACpB,QAAK,MAAM,OAAO;AAClB,QAAK,MAAM,YAAY;;;;AAK7B,MAAaC,yBAA6D,yBACxE,iBACA,QACA,yBACA,kBACD;AAMD,MAAa,oBAAoB,OAAO,OACtC,EAAE,EACF;CACE,MAAM;CACN,OAAO;CACP,UAAU;CACV,SAAS;CACT,OAAO;CACR,CACF"}