@videojs/html 10.0.0-beta.2 → 10.0.0-beta.3

package/dist/dev/_virtual/inline-css_src/define/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../../../inline-css:src/define/video/skin.js"],"sourcesContent":["export default \"/* ==========================================================================\\n   Icon State Visibility for Video Skins\\n\\n   Data-attribute-driven visibility rules for multi-state icon buttons.\\n   Uses :is() with both element selectors (for HTML custom element wrappers)\\n   and class selectors (for React rendered SVG elements).\\n   ========================================================================== */\\n\\n/* --- All icons hidden by default --- */\\n\\n.media-button--play .media-icon--restart,\\n.media-button--play .media-icon--play,\\n.media-button--play .media-icon--pause,\\n.media-button--mute .media-icon--volume-off,\\n.media-button--mute .media-icon--volume-low,\\n.media-button--mute .media-icon--volume-high,\\n.media-button--fullscreen .media-icon--fullscreen-enter,\\n.media-button--fullscreen .media-icon--fullscreen-exit,\\n.media-button--captions .media-icon--captions-off,\\n.media-button--captions .media-icon--captions-on {\\n  display: none;\\n  opacity: 0;\\n}\\n\\n/* --- Active icon per state --- */\\n\\n/* Play: ended → restart */\\n.media-button--play[data-ended] .media-icon--restart,\\n/* Play: paused (not ended) → play */\\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\\n/* Play: playing (not paused, not ended) → pause */\\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\\n/* Mute: muted → volume off */\\n.media-button--mute[data-muted] .media-icon--volume-off,\\n/* Mute: volume low (not muted) → volume low */\\n.media-button--mute:not([data-muted])[data-volume-level=\\\"low\\\"] .media-icon--volume-low,\\n/* Mute: volume high (not muted, not low) → volume high */\\n.media-button--mute:not([data-muted]):not([data-volume-level=\\\"low\\\"]) .media-icon--volume-high,\\n/* Fullscreen: not fullscreen → enter */\\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\\n/* Fullscreen: fullscreen → exit */\\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\\n/* Captions: not active → captions off */\\n.media-button--captions:not([data-active]) .media-icon--captions-off,\\n/* Captions: active → captions on */\\n.media-button--captions[data-active] .media-icon--captions-on {\\n  display: block;\\n  opacity: 1;\\n}\\n\\n/* ==========================================================================\\n   Tooltip Label State Visibility for Video Skins\\n\\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\\n   Uses adjacent sibling selectors to match button state → tooltip content.\\n   ========================================================================== */\\n\\n/* --- All multi-state labels hidden by default --- */\\n\\n.media-tooltip-label {\\n  display: none;\\n}\\n\\n/* --- Active label per state --- */\\n\\n/* Play: ended → replay */\\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\\n/* Play: paused (not ended) → play */\\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\\n  .media-tooltip-label--play,\\n/* Play: playing (not paused, not ended) → pause */\\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\\n  .media-tooltip-label--pause,\\n/* Fullscreen: not fullscreen → enter */\\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\\n  .media-tooltip-label--enter-fullscreen,\\n/* Fullscreen: fullscreen → exit */\\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\\n  .media-tooltip-label--exit-fullscreen,\\n/* Captions: not active → enable */\\n  .media-button--captions:not([data-active]) + .media-tooltip\\n  .media-tooltip-label--enable-captions,\\n/* Captions: active → disable */\\n  .media-button--captions[data-active] + .media-tooltip\\n  .media-tooltip-label--disable-captions,\\n/* PiP: not in pip → enter */\\n  .media-button--pip:not([data-pip]) + .media-tooltip\\n  .media-tooltip-label--enter-pip,\\n/* PiP: in pip → exit */\\n  .media-button--pip[data-pip] + .media-tooltip\\n  .media-tooltip-label--exit-pip {\\n  display: block;\\n}\\n\\n/* ==========================================================================\\n   Reset\\n   ========================================================================== */\\n\\n.media-default-skin *,\\n.media-default-skin *::before,\\n.media-default-skin *::after {\\n  box-sizing: border-box;\\n  margin: 0;\\n}\\n.media-default-skin img,\\n.media-default-skin video,\\n.media-default-skin svg {\\n  display: block;\\n  max-width: 100%;\\n}\\n.media-default-skin button {\\n  font: inherit;\\n}\\n@media (prefers-reduced-motion: no-preference) {\\n  .media-default-skin {\\n    interpolate-size: allow-keywords;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Root Container\\n   ========================================================================== */\\n\\n.media-default-skin {\\n  position: relative;\\n  isolation: isolate;\\n  display: block;\\n  container: media-root / inline-size;\\n  border-radius: var(--media-border-radius, 2rem);\\n  font-family:\\n    Inter Variable,\\n    Inter,\\n    ui-sans-serif,\\n    system-ui,\\n    sans-serif;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  letter-spacing: normal;\\n  -webkit-font-smoothing: auto;\\n  -moz-osx-font-smoothing: auto;\\n\\n  &:fullscreen {\\n    border-radius: 0;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Surface (shared glass effect for tooltips, popovers, controls)\\n   ========================================================================== */\\n\\n.media-default-skin .media-surface {\\n  background-color: var(--media-surface-background-color);\\n  backdrop-filter: var(--media-surface-backdrop-filter);\\n  box-shadow:\\n    inset 0 0 0 1px var(--media-surface-inner-border-color),\\n    0 1px 3px 0 var(--media-surface-shadow-color),\\n    0 1px 2px -1px var(--media-surface-shadow-color);\\n\\n  /* Inner border ring */\\n  &::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    inset: 0;\\n    z-index: 10;\\n    border-radius: inherit;\\n    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);\\n    pointer-events: none;\\n  }\\n\\n  @media (prefers-reduced-transparency: reduce) {\\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.7);\\n  }\\n\\n  @media (prefers-contrast: more) {\\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.9);\\n  }\\n}\\n\\n/* ==========================================================================\\n   Media Element\\n   ========================================================================== */\\n\\n.media-default-skin ::slotted(video),\\n.media-default-skin video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  border-radius: var(--media-border-radius, 2rem);\\n}\\n\\n/* ==========================================================================\\n   Poster Image\\n   ========================================================================== */\\n\\n.media-default-skin > img {\\n  position: absolute;\\n  inset: 0;\\n  width: 100%;\\n  height: 100%;\\n  border-radius: inherit;\\n  object-fit: cover;\\n  transition: opacity 0.25s;\\n  pointer-events: none;\\n\\n  &:not([data-visible]) {\\n    opacity: 0;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Overlay / Scrim\\n   ========================================================================== */\\n\\n.media-default-skin .media-overlay {\\n  position: absolute;\\n  inset: 0;\\n  border-radius: inherit;\\n  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));\\n  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);\\n  opacity: 0;\\n  transition-property: opacity, backdrop-filter;\\n  transition-duration: 300ms;\\n  transition-delay: 500ms;\\n  transition-timing-function: ease-out;\\n  pointer-events: none;\\n\\n  @media (prefers-reduced-motion: reduce) {\\n    transition-duration: 100ms;\\n  }\\n}\\n\\n.media-default-skin .media-controls[data-visible] ~ .media-overlay,\\n.media-default-skin .media-error[data-open] ~ .media-overlay {\\n  opacity: 1;\\n  transition-duration: 150ms;\\n  transition-delay: 0ms;\\n}\\n\\n.media-default-skin .media-error[data-open] ~ .media-overlay {\\n  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);\\n}\\n\\n/* ==========================================================================\\n   Buffering Indicator\\n   ========================================================================== */\\n\\n.media-default-skin .media-buffering-indicator {\\n  position: absolute;\\n  inset: 0;\\n  display: none;\\n  align-items: center;\\n  justify-content: center;\\n  color: oklch(1 0 0);\\n  pointer-events: none;\\n\\n  &[data-visible] {\\n    display: flex;\\n  }\\n\\n  .media-surface {\\n    padding: 0.25rem;\\n    border-radius: 100%;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Error Dialog\\n   ========================================================================== */\\n\\n.media-default-skin .media-error {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 20;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\\n.media-default-skin .media-error__dialog {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 0.75rem;\\n  max-width: 18rem;\\n  padding: 0.75rem;\\n  border-radius: 1.75rem;\\n  color: oklch(1 0 0);\\n  font-size: 0.875rem;\\n  transition-property: opacity, transform;\\n  transition-duration: 500ms;\\n  transition-delay: 100ms;\\n  transition-timing-function: linear(\\n    0,\\n    0.034 1.5%,\\n    0.763 9.7%,\\n    1.066 13.9%,\\n    1.198 19.9%,\\n    1.184 21.8%,\\n    0.963 37.5%,\\n    0.997 50.9%,\\n    1\\n  );\\n\\n  /* Simple, fast transition for reduced motion users */\\n  @media (prefers-reduced-motion: reduce) {\\n    transition-duration: 100ms;\\n    transition-delay: 0ms;\\n    transition-timing-function: ease-out;\\n  }\\n}\\n\\n.media-default-skin .media-error[data-starting-style] .media-error__dialog,\\n.media-default-skin .media-error[data-ending-style] .media-error__dialog {\\n  opacity: 0;\\n  transform: scale(0.5);\\n}\\n\\n.media-default-skin .media-error__content {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 0.5rem;\\n  padding: 0.5rem 0.5rem 0.375rem;\\n}\\n\\n.media-default-skin .media-error__title {\\n  font-weight: 600;\\n  line-height: 1.25;\\n}\\n\\n.media-default-skin .media-error__description {\\n  opacity: 0.7;\\n}\\n\\n.media-default-skin .media-error__actions {\\n  display: flex;\\n  gap: 0.5rem;\\n\\n  & > * {\\n    flex: 1;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Controls\\n   ========================================================================== */\\n\\n.media-default-skin .media-controls {\\n  container: media-controls / inline-size;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.075rem;\\n  padding: 0.175rem;\\n  border-radius: calc(infinity * 1px);\\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));\\n  --media-controls-current-shadow-color-subtle: oklch(\\n    from var(--media-controls-current-shadow-color) l c h /\\n    calc(alpha * 0.4)\\n  );\\n  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);\\n\\n  @container media-root (width > 40rem) {\\n    gap: 0.125rem;\\n    padding: 0.25rem;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Time Display\\n   ========================================================================== */\\n\\n.media-default-skin .media-time {\\n  container: media-time / inline-size;\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  gap: 0.75rem;\\n  padding-inline: 0.5rem;\\n\\n  & .media-time__value:first-child {\\n    display: none;\\n\\n    @container media-time (width > 18rem) {\\n      display: block;\\n    }\\n  }\\n}\\n\\n.media-default-skin .media-time__value {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* ==========================================================================\\n   Buttons\\n   ========================================================================== */\\n\\n/* Base button */\\n.media-default-skin .media-button {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  padding: 0.5rem 1rem;\\n  background: oklch(1 0 0);\\n  border: none;\\n  border-radius: calc(infinity * 1px);\\n  outline: 2px solid transparent;\\n  outline-offset: -2px;\\n  color: oklch(0 0 0);\\n  font-weight: 500;\\n  text-align: center;\\n  transition-property: background-color, color, outline-offset, transform;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n  cursor: pointer;\\n  user-select: none;\\n\\n  &:focus-visible {\\n    outline-color: oklch(62.3% 0.214 259.815);\\n    outline-offset: 2px;\\n  }\\n\\n  &[disabled] {\\n    opacity: 0.5;\\n    filter: grayscale(1);\\n    cursor: not-allowed;\\n  }\\n\\n  &[data-availability=\\\"unavailable\\\"] {\\n    display: none;\\n  }\\n}\\n\\n/* Icon button variant */\\n.media-default-skin .media-button--icon {\\n  display: grid;\\n  width: 2.125rem;\\n  padding: 0;\\n  aspect-ratio: 1;\\n  background: transparent;\\n  color: inherit;\\n  text-shadow: inherit;\\n\\n  &:hover,\\n  &:focus-visible,\\n  &[aria-expanded=\\\"true\\\"] {\\n    background-color: oklch(from currentColor l c h / 0.1);\\n    text-decoration: none;\\n  }\\n\\n  &:active {\\n    transform: scale(0.9);\\n  }\\n\\n  & .media-icon {\\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\\n  }\\n}\\n\\n/* Seek button */\\n.media-default-skin .media-button--seek {\\n  & .media-icon__label {\\n    position: absolute;\\n    right: -1px;\\n    bottom: -3px;\\n    font-size: 0.75em;\\n    font-weight: 480;\\n    font-variant-numeric: tabular-nums;\\n  }\\n\\n  &:has(.media-icon--flipped) .media-icon__label {\\n    right: unset;\\n    left: -1px;\\n  }\\n\\n  @container media-controls (width < 28rem) {\\n    display: none;\\n  }\\n}\\n\\n/* Playback rate button */\\n.media-default-skin .media-button--playback-rate {\\n  padding: 0;\\n\\n  &::after {\\n    content: attr(data-rate) \\\"\\\\00D7\\\";\\n    width: 4ch;\\n    font-variant-numeric: tabular-nums;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Icons\\n   ========================================================================== */\\n\\n.media-default-skin .media-icon__container {\\n  position: relative;\\n}\\n.media-default-skin .media-icon {\\n  display: block;\\n  flex-shrink: 0;\\n  grid-area: 1 / 1;\\n  width: 18px;\\n  height: 18px;\\n  transition-behavior: allow-discrete;\\n  transition-property: display, opacity;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.media-default-skin .media-icon--flipped {\\n  scale: -1 1;\\n}\\n\\n/* ==========================================================================\\n   Slider\\n   ========================================================================== */\\n\\n.media-default-skin .media-slider {\\n  position: relative;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex: 1;\\n  border-radius: calc(infinity * 1px);\\n  outline: none;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    min-width: 5rem;\\n    width: 100%;\\n    height: 1.25rem;\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    width: 1.25rem;\\n    height: 5rem;\\n  }\\n}\\n\\n/* Track */\\n.media-default-skin .media-slider__track {\\n  position: relative;\\n  isolation: isolate;\\n  overflow: hidden;\\n  border-radius: inherit;\\n  user-select: none;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    width: 100%;\\n    height: 0.25rem;\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    width: 0.25rem;\\n    height: 100%;\\n  }\\n}\\n\\n/* Thumb */\\n.media-default-skin .media-slider__thumb {\\n  z-index: 10;\\n  position: absolute;\\n  transform: translate(-50%, -50%);\\n  width: 0.625rem;\\n  height: 0.625rem;\\n  background-color: currentColor;\\n  border-radius: calc(infinity * 1px);\\n  box-shadow:\\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\\n  opacity: 0;\\n  transition-property: opacity, height, width, outline-offset;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n  user-select: none;\\n  outline: 4px solid transparent;\\n  outline-offset: -4px;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    top: 50%;\\n    left: var(--media-slider-fill);\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    left: 50%;\\n    top: calc(100% - var(--media-slider-fill));\\n  }\\n\\n  &:hover,\\n  &:focus {\\n    outline-color: oklch(from currentColor l c h / 0.25);\\n    outline-offset: 0;\\n  }\\n}\\n\\n.media-default-skin .media-slider:active .media-slider__thumb,\\n.media-default-skin .media-slider__thumb--persistent {\\n  width: 0.75rem;\\n  height: 0.75rem;\\n}\\n\\n.media-default-skin .media-slider:hover .media-slider__thumb,\\n.media-default-skin .media-slider__thumb:focus-visible,\\n.media-default-skin .media-slider__thumb--persistent {\\n  opacity: 1;\\n}\\n\\n/* Shared track fills */\\n.media-default-skin .media-slider__buffer,\\n.media-default-skin .media-slider__fill {\\n  position: absolute;\\n  border-radius: inherit;\\n  pointer-events: none;\\n}\\n\\n.media-default-skin .media-slider__buffer[data-orientation=\\\"horizontal\\\"],\\n.media-default-skin .media-slider__fill[data-orientation=\\\"horizontal\\\"] {\\n  inset-block: 0;\\n  left: 0;\\n}\\n\\n.media-default-skin .media-slider__buffer[data-orientation=\\\"vertical\\\"],\\n.media-default-skin .media-slider__fill[data-orientation=\\\"vertical\\\"] {\\n  inset-inline: 0;\\n  bottom: 0;\\n}\\n\\n/* Buffer */\\n.media-default-skin .media-slider__buffer {\\n  background-color: oklch(from currentColor l c h / 0.2);\\n  transition-duration: 0.25s;\\n  transition-timing-function: ease-out;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    width: var(--media-slider-buffer);\\n    transition-property: width;\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    height: var(--media-slider-buffer);\\n    transition-property: height;\\n  }\\n}\\n\\n/* Fill */\\n.media-default-skin .media-slider__fill {\\n  background-color: currentColor;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    width: var(--media-slider-fill);\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    height: var(--media-slider-fill);\\n  }\\n}\\n\\n/* Time display within slider */\\n.media-default-skin .media-slider__time-display {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* ==========================================================================\\n   Popups & Tooltips\\n   ========================================================================== */\\n\\n.media-default-skin .media-popover,\\n.media-default-skin .media-tooltip {\\n  margin: 0;\\n  border: 0;\\n  color: inherit;\\n  overflow: visible;\\n  transition-property: transform, scale, opacity, filter;\\n  transition-duration: 200ms;\\n\\n  &[data-starting-style],\\n  &[data-ending-style] {\\n    opacity: 0;\\n    transform: scale(0);\\n    filter: blur(8px);\\n  }\\n\\n  &[data-instant] {\\n    transition-duration: 0ms;\\n  }\\n\\n  &[data-side=\\\"top\\\"] {\\n    transform-origin: bottom;\\n  }\\n  &[data-side=\\\"bottom\\\"] {\\n    transform-origin: top;\\n  }\\n  &[data-side=\\\"left\\\"] {\\n    transform-origin: right;\\n  }\\n  &[data-side=\\\"right\\\"] {\\n    transform-origin: left;\\n  }\\n}\\n\\n.media-default-skin .media-popover {\\n  --media-popover-side-offset: 0.5rem;\\n}\\n.media-default-skin .media-popover--volume {\\n  padding: 0.625rem 0.25rem;\\n  border-radius: calc(infinity * 1px);\\n}\\n\\n.media-default-skin .media-tooltip {\\n  padding: 0.25rem 0.625rem;\\n  border-radius: calc(infinity * 1px);\\n  font-size: 0.75rem;\\n  white-space: nowrap;\\n  --media-tooltip-side-offset: 0.5rem;\\n}\\n\\n/* ==========================================================================\\n   Captions\\n   ========================================================================== */\\n\\n.media-default-skin .media-captions {\\n  position: absolute;\\n  inset: auto 1rem 1.5rem 1rem;\\n  z-index: 20;\\n  font-size: 1rem;\\n  text-wrap: balance;\\n  pointer-events: none;\\n\\n  @container media-root (width > 20rem) {\\n    font-size: 1.5rem;\\n  }\\n\\n  @container media-root (width > 48rem) {\\n    font-size: 1.875rem;\\n  }\\n\\n  @container media-root (width > 80rem) {\\n    font-size: 2.25rem;\\n  }\\n}\\n\\n.media-default-skin .media-captions__container {\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n  max-width: 42ch;\\n  margin: 0 auto;\\n  text-align: center;\\n}\\n\\n.media-default-skin .media-captions__text {\\n  display: block;\\n  padding: 0.125rem 0.5rem;\\n  color: oklch(1 0 0);\\n  text-shadow:\\n    0 0 1px oklch(0 0 0 / 0.7),\\n    0 0 8px oklch(0 0 0 / 0.7);\\n  text-align: center;\\n  white-space: pre-wrap;\\n  line-height: 1.2;\\n\\n  @media (prefers-contrast: more) {\\n    background: oklch(0 0 0 / 0.7);\\n    text-shadow: none;\\n    box-decoration-break: clone;\\n  }\\n\\n  & > * {\\n    display: inline;\\n  }\\n}\\n\\n/* Caption shifting styles (custom and native) */\\n.media-default-skin {\\n  --media-caption-track-delay: 600ms;\\n  --media-caption-track-y: -0.5rem;\\n\\n  &:has(.media-controls[data-visible]) {\\n    --media-caption-track-delay: 25ms;\\n    --media-caption-track-y: -3.5rem;\\n  }\\n}\\n\\n.media-default-skin .media-captions,\\n.media-default-skin video::-webkit-media-text-track-container {\\n  /* NOTE: The delay must account for the controls delay/duration */\\n  transition: transform 150ms ease-out;\\n  transition-delay: var(--media-caption-track-delay);\\n}\\n\\n.media-default-skin video::-webkit-media-text-track-container {\\n  transform: translateY(var(--media-caption-track-y)) scale(0.98);\\n  z-index: 1;\\n  font-family: inherit;\\n}\\n\\n/* When controls are visible, shift captions up to avoid overlap */\\n.media-default-skin .media-controls[data-visible] ~ .media-captions {\\n  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n  .media-default-skin .media-captions,\\n  .media-default-skin video::-webkit-media-text-track-container {\\n    transition-duration: 50ms;\\n  }\\n}\\n\\n\\n/* ==========================================================================\\n   Root\\n   ========================================================================== */\\n\\n.media-default-skin--video {\\n  background: oklch(0 0 0);\\n  --media-border-color: oklch(0 0 0 / 0.1);\\n  --media-surface-background-color: oklch(1 0 0 / 0.1);\\n  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);\\n  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);\\n  --media-surface-shadow-color: oklch(0 0 0 / 0.15);\\n  --media-surface-backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n\\n  @media (prefers-color-scheme: dark) {\\n    --media-border-color: oklch(1 0 0 / 0.1);\\n  }\\n\\n  /* Inner border ring */\\n  &::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    inset: 0;\\n    z-index: 10;\\n    border-radius: inherit;\\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\\n    pointer-events: none;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Controls (hide/show behavior)\\n   ========================================================================== */\\n\\n.media-default-skin--video .media-controls {\\n  position: absolute;\\n  bottom: 0.75rem;\\n  inset-inline: 0.75rem;\\n  z-index: 10;\\n  will-change: scale, transform, filter, opacity;\\n  transition-property: scale, transform, filter, opacity;\\n  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n  transition-timing-function: ease-out;\\n  transform-origin: bottom;\\n  color: oklch(1 0 0);\\n\\n  &:not([data-visible]) {\\n    opacity: 0;\\n    scale: 0.9;\\n    filter: blur(8px);\\n    transition-duration: 300ms;\\n    transition-delay: 500ms;\\n    pointer-events: none;\\n\\n    @media (prefers-reduced-motion: reduce) {\\n      scale: 1;\\n      filter: blur(0);\\n      transition-duration: 100ms;\\n    }\\n  }\\n}\\n\\n/* ==========================================================================\\n   Sliders\\n   ========================================================================== */\\n\\n.media-default-skin--video .media-slider__track {\\n  background-color: oklch(1 0 0 / 0.2);\\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\\n}\\n\\n\";"],"mappings":";AAAA,mBAAe"}
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../../../inline-css:src/define/video/skin.js"],"sourcesContent":["export default \"/* ==========================================================================\\n   Icon State Visibility for Video Skins\\n\\n   Data-attribute-driven visibility rules for multi-state icon buttons.\\n   Uses :is() with both element selectors (for HTML custom element wrappers)\\n   and class selectors (for React rendered SVG elements).\\n   ========================================================================== */\\n\\n/* --- All icons hidden by default --- */\\n\\n.media-button--play .media-icon--restart,\\n.media-button--play .media-icon--play,\\n.media-button--play .media-icon--pause,\\n.media-button--mute .media-icon--volume-off,\\n.media-button--mute .media-icon--volume-low,\\n.media-button--mute .media-icon--volume-high,\\n.media-button--fullscreen .media-icon--fullscreen-enter,\\n.media-button--fullscreen .media-icon--fullscreen-exit,\\n.media-button--captions .media-icon--captions-off,\\n.media-button--captions .media-icon--captions-on {\\n  display: none;\\n  opacity: 0;\\n}\\n\\n/* --- Active icon per state --- */\\n\\n/* Play: ended → restart */\\n.media-button--play[data-ended] .media-icon--restart,\\n/* Play: paused (not ended) → play */\\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\\n/* Play: playing (not paused, not ended) → pause */\\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\\n/* Mute: muted → volume off */\\n.media-button--mute[data-muted] .media-icon--volume-off,\\n/* Mute: volume low (not muted) → volume low */\\n.media-button--mute:not([data-muted])[data-volume-level=\\\"low\\\"] .media-icon--volume-low,\\n/* Mute: volume high (not muted, not low) → volume high */\\n.media-button--mute:not([data-muted]):not([data-volume-level=\\\"low\\\"]) .media-icon--volume-high,\\n/* Fullscreen: not fullscreen → enter */\\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\\n/* Fullscreen: fullscreen → exit */\\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\\n/* Captions: not active → captions off */\\n.media-button--captions:not([data-active]) .media-icon--captions-off,\\n/* Captions: active → captions on */\\n.media-button--captions[data-active] .media-icon--captions-on {\\n  display: block;\\n  opacity: 1;\\n}\\n\\n/* ==========================================================================\\n   Tooltip Label State Visibility for Video Skins\\n\\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\\n   Uses adjacent sibling selectors to match button state → tooltip content.\\n   ========================================================================== */\\n\\n/* --- All multi-state labels hidden by default --- */\\n\\n.media-tooltip-label {\\n  display: none;\\n}\\n\\n/* --- Active label per state --- */\\n\\n/* Play: ended → replay */\\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\\n/* Play: paused (not ended) → play */\\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\\n  .media-tooltip-label--play,\\n/* Play: playing (not paused, not ended) → pause */\\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\\n  .media-tooltip-label--pause,\\n/* Fullscreen: not fullscreen → enter */\\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\\n  .media-tooltip-label--enter-fullscreen,\\n/* Fullscreen: fullscreen → exit */\\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\\n  .media-tooltip-label--exit-fullscreen,\\n/* Captions: not active → enable */\\n  .media-button--captions:not([data-active]) + .media-tooltip\\n  .media-tooltip-label--enable-captions,\\n/* Captions: active → disable */\\n  .media-button--captions[data-active] + .media-tooltip\\n  .media-tooltip-label--disable-captions,\\n/* PiP: not in pip → enter */\\n  .media-button--pip:not([data-pip]) + .media-tooltip\\n  .media-tooltip-label--enter-pip,\\n/* PiP: in pip → exit */\\n  .media-button--pip[data-pip] + .media-tooltip\\n  .media-tooltip-label--exit-pip {\\n  display: block;\\n}\\n\\n/* ==========================================================================\\n   Reset\\n   ========================================================================== */\\n\\n.media-default-skin *,\\n.media-default-skin *::before,\\n.media-default-skin *::after {\\n  box-sizing: border-box;\\n  margin: 0;\\n}\\n.media-default-skin img,\\n.media-default-skin video,\\n.media-default-skin svg {\\n  display: block;\\n  max-width: 100%;\\n}\\n.media-default-skin button {\\n  font: inherit;\\n}\\n@media (prefers-reduced-motion: no-preference) {\\n  .media-default-skin {\\n    interpolate-size: allow-keywords;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Root Container\\n   ========================================================================== */\\n\\n.media-default-skin {\\n  position: relative;\\n  isolation: isolate;\\n  display: block;\\n  height: 100%;\\n  width: 100%;\\n  container: media-root / inline-size;\\n  border-radius: var(--media-border-radius, 2rem);\\n  font-family:\\n    Inter Variable,\\n    Inter,\\n    ui-sans-serif,\\n    system-ui,\\n    sans-serif;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  letter-spacing: normal;\\n  -webkit-font-smoothing: auto;\\n  -moz-osx-font-smoothing: auto;\\n\\n  &:fullscreen {\\n    border-radius: 0;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Surface (shared glass effect for tooltips, popovers, controls)\\n   ========================================================================== */\\n\\n.media-default-skin .media-surface {\\n  background-color: var(--media-surface-background-color);\\n  backdrop-filter: var(--media-surface-backdrop-filter);\\n  box-shadow:\\n    inset 0 0 0 1px var(--media-surface-inner-border-color),\\n    0 1px 3px 0 var(--media-surface-shadow-color),\\n    0 1px 2px -1px var(--media-surface-shadow-color);\\n\\n  /* Inner border ring */\\n  &::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    inset: 0;\\n    z-index: 10;\\n    border-radius: inherit;\\n    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);\\n    pointer-events: none;\\n  }\\n\\n  @media (prefers-reduced-transparency: reduce) {\\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.7);\\n  }\\n\\n  @media (prefers-contrast: more) {\\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.9);\\n  }\\n}\\n\\n/* ==========================================================================\\n   Media Element\\n   ========================================================================== */\\n\\n.media-default-skin ::slotted(video),\\n.media-default-skin video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  border-radius: var(--media-border-radius, 2rem);\\n}\\n\\n/* ==========================================================================\\n   Poster Image\\n   ========================================================================== */\\n\\n.media-default-skin > img {\\n  position: absolute;\\n  inset: 0;\\n  width: 100%;\\n  height: 100%;\\n  border-radius: inherit;\\n  object-fit: cover;\\n  transition: opacity 0.25s;\\n  pointer-events: none;\\n\\n  &:not([data-visible]) {\\n    opacity: 0;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Overlay / Scrim\\n   ========================================================================== */\\n\\n.media-default-skin .media-overlay {\\n  position: absolute;\\n  inset: 0;\\n  border-radius: inherit;\\n  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));\\n  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);\\n  opacity: 0;\\n  transition-property: opacity, backdrop-filter;\\n  transition-duration: 300ms;\\n  transition-delay: 500ms;\\n  transition-timing-function: ease-out;\\n  pointer-events: none;\\n\\n  @media (prefers-reduced-motion: reduce) {\\n    transition-duration: 100ms;\\n  }\\n}\\n\\n.media-default-skin .media-controls[data-visible] ~ .media-overlay,\\n.media-default-skin .media-error[data-open] ~ .media-overlay {\\n  opacity: 1;\\n  transition-duration: 150ms;\\n  transition-delay: 0ms;\\n}\\n\\n.media-default-skin .media-error[data-open] ~ .media-overlay {\\n  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);\\n}\\n\\n/* ==========================================================================\\n   Buffering Indicator\\n   ========================================================================== */\\n\\n.media-default-skin .media-buffering-indicator {\\n  position: absolute;\\n  inset: 0;\\n  display: none;\\n  align-items: center;\\n  justify-content: center;\\n  color: oklch(1 0 0);\\n  pointer-events: none;\\n\\n  &[data-visible] {\\n    display: flex;\\n  }\\n\\n  .media-surface {\\n    padding: 0.25rem;\\n    border-radius: 100%;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Error Dialog\\n   ========================================================================== */\\n\\n.media-default-skin .media-error {\\n  position: absolute;\\n  inset: 0;\\n  z-index: 20;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\\n.media-default-skin .media-error__dialog {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 0.75rem;\\n  max-width: 18rem;\\n  padding: 0.75rem;\\n  border-radius: 1.75rem;\\n  color: oklch(1 0 0);\\n  font-size: 0.875rem;\\n  transition-property: opacity, transform;\\n  transition-duration: 500ms;\\n  transition-delay: 100ms;\\n  transition-timing-function: linear(\\n    0,\\n    0.034 1.5%,\\n    0.763 9.7%,\\n    1.066 13.9%,\\n    1.198 19.9%,\\n    1.184 21.8%,\\n    0.963 37.5%,\\n    0.997 50.9%,\\n    1\\n  );\\n\\n  /* Simple, fast transition for reduced motion users */\\n  @media (prefers-reduced-motion: reduce) {\\n    transition-duration: 100ms;\\n    transition-delay: 0ms;\\n    transition-timing-function: ease-out;\\n  }\\n}\\n\\n.media-default-skin .media-error[data-starting-style] .media-error__dialog,\\n.media-default-skin .media-error[data-ending-style] .media-error__dialog {\\n  opacity: 0;\\n  transform: scale(0.5);\\n}\\n\\n.media-default-skin .media-error__content {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 0.5rem;\\n  padding: 0.5rem 0.5rem 0.375rem;\\n}\\n\\n.media-default-skin .media-error__title {\\n  font-weight: 600;\\n  line-height: 1.25;\\n}\\n\\n.media-default-skin .media-error__description {\\n  opacity: 0.7;\\n}\\n\\n.media-default-skin .media-error__actions {\\n  display: flex;\\n  gap: 0.5rem;\\n\\n  & > * {\\n    flex: 1;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Controls\\n   ========================================================================== */\\n\\n.media-default-skin .media-controls {\\n  container: media-controls / inline-size;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.075rem;\\n  padding: 0.175rem;\\n  border-radius: calc(infinity * 1px);\\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));\\n  --media-controls-current-shadow-color-subtle: oklch(\\n    from var(--media-controls-current-shadow-color) l c h /\\n    calc(alpha * 0.4)\\n  );\\n  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);\\n\\n  @container media-root (width > 40rem) {\\n    gap: 0.125rem;\\n    padding: 0.25rem;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Time Display\\n   ========================================================================== */\\n\\n.media-default-skin .media-time {\\n  container: media-time / inline-size;\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  gap: 0.75rem;\\n  padding-inline: 0.5rem;\\n\\n  & .media-time__value:first-child {\\n    display: none;\\n\\n    @container media-time (width > 18rem) {\\n      display: block;\\n    }\\n  }\\n}\\n\\n.media-default-skin .media-time__value {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* ==========================================================================\\n   Buttons\\n   ========================================================================== */\\n\\n/* Base button */\\n.media-default-skin .media-button {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  padding: 0.5rem 1rem;\\n  background: oklch(1 0 0);\\n  border: none;\\n  border-radius: calc(infinity * 1px);\\n  outline: 2px solid transparent;\\n  outline-offset: -2px;\\n  color: oklch(0 0 0);\\n  font-weight: 500;\\n  text-align: center;\\n  transition-property: background-color, color, outline-offset, transform;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n  cursor: pointer;\\n  user-select: none;\\n\\n  &:focus-visible {\\n    outline-color: oklch(62.3% 0.214 259.815);\\n    outline-offset: 2px;\\n  }\\n\\n  &[disabled] {\\n    opacity: 0.5;\\n    filter: grayscale(1);\\n    cursor: not-allowed;\\n  }\\n\\n  &[data-availability=\\\"unavailable\\\"] {\\n    display: none;\\n  }\\n}\\n\\n/* Icon button variant */\\n.media-default-skin .media-button--icon {\\n  display: grid;\\n  width: 2.125rem;\\n  padding: 0;\\n  aspect-ratio: 1;\\n  background: transparent;\\n  color: inherit;\\n  text-shadow: inherit;\\n\\n  &:hover,\\n  &:focus-visible,\\n  &[aria-expanded=\\\"true\\\"] {\\n    background-color: oklch(from currentColor l c h / 0.1);\\n    text-decoration: none;\\n  }\\n\\n  &:active {\\n    transform: scale(0.9);\\n  }\\n\\n  & .media-icon {\\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\\n  }\\n}\\n\\n/* Seek button */\\n.media-default-skin .media-button--seek {\\n  & .media-icon__label {\\n    position: absolute;\\n    right: -1px;\\n    bottom: -3px;\\n    font-size: 0.75em;\\n    font-weight: 480;\\n    font-variant-numeric: tabular-nums;\\n  }\\n\\n  &:has(.media-icon--flipped) .media-icon__label {\\n    right: unset;\\n    left: -1px;\\n  }\\n\\n  @container media-controls (width < 28rem) {\\n    display: none;\\n  }\\n}\\n\\n/* Playback rate button */\\n.media-default-skin .media-button--playback-rate {\\n  padding: 0;\\n\\n  &::after {\\n    content: attr(data-rate) \\\"\\\\00D7\\\";\\n    width: 4ch;\\n    font-variant-numeric: tabular-nums;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Icons\\n   ========================================================================== */\\n\\n.media-default-skin .media-icon__container {\\n  position: relative;\\n}\\n.media-default-skin .media-icon {\\n  display: block;\\n  flex-shrink: 0;\\n  grid-area: 1 / 1;\\n  width: 18px;\\n  height: 18px;\\n  transition-behavior: allow-discrete;\\n  transition-property: display, opacity;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.media-default-skin .media-icon--flipped {\\n  scale: -1 1;\\n}\\n\\n/* ==========================================================================\\n   Slider\\n   ========================================================================== */\\n\\n.media-default-skin .media-slider {\\n  position: relative;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex: 1;\\n  border-radius: calc(infinity * 1px);\\n  outline: none;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    min-width: 5rem;\\n    width: 100%;\\n    height: 1.25rem;\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    width: 1.25rem;\\n    height: 5rem;\\n  }\\n}\\n\\n/* Track */\\n.media-default-skin .media-slider__track {\\n  position: relative;\\n  isolation: isolate;\\n  overflow: hidden;\\n  border-radius: inherit;\\n  user-select: none;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    width: 100%;\\n    height: 0.25rem;\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    width: 0.25rem;\\n    height: 100%;\\n  }\\n}\\n\\n/* Thumb */\\n.media-default-skin .media-slider__thumb {\\n  z-index: 10;\\n  position: absolute;\\n  transform: translate(-50%, -50%);\\n  width: 0.625rem;\\n  height: 0.625rem;\\n  background-color: currentColor;\\n  border-radius: calc(infinity * 1px);\\n  box-shadow:\\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\\n  opacity: 0;\\n  transition-property: opacity, height, width, outline-offset;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n  user-select: none;\\n  outline: 4px solid transparent;\\n  outline-offset: -4px;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    top: 50%;\\n    left: var(--media-slider-fill);\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    left: 50%;\\n    top: calc(100% - var(--media-slider-fill));\\n  }\\n\\n  &:hover,\\n  &:focus {\\n    outline-color: oklch(from currentColor l c h / 0.25);\\n    outline-offset: 0;\\n  }\\n}\\n\\n.media-default-skin .media-slider:active .media-slider__thumb,\\n.media-default-skin .media-slider__thumb--persistent {\\n  width: 0.75rem;\\n  height: 0.75rem;\\n}\\n\\n.media-default-skin .media-slider:hover .media-slider__thumb,\\n.media-default-skin .media-slider__thumb:focus-visible,\\n.media-default-skin .media-slider__thumb--persistent {\\n  opacity: 1;\\n}\\n\\n/* Shared track fills */\\n.media-default-skin .media-slider__buffer,\\n.media-default-skin .media-slider__fill {\\n  position: absolute;\\n  border-radius: inherit;\\n  pointer-events: none;\\n}\\n\\n.media-default-skin .media-slider__buffer[data-orientation=\\\"horizontal\\\"],\\n.media-default-skin .media-slider__fill[data-orientation=\\\"horizontal\\\"] {\\n  inset-block: 0;\\n  left: 0;\\n}\\n\\n.media-default-skin .media-slider__buffer[data-orientation=\\\"vertical\\\"],\\n.media-default-skin .media-slider__fill[data-orientation=\\\"vertical\\\"] {\\n  inset-inline: 0;\\n  bottom: 0;\\n}\\n\\n/* Buffer */\\n.media-default-skin .media-slider__buffer {\\n  background-color: oklch(from currentColor l c h / 0.2);\\n  transition-duration: 0.25s;\\n  transition-timing-function: ease-out;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    width: var(--media-slider-buffer);\\n    transition-property: width;\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    height: var(--media-slider-buffer);\\n    transition-property: height;\\n  }\\n}\\n\\n/* Fill */\\n.media-default-skin .media-slider__fill {\\n  background-color: currentColor;\\n\\n  &[data-orientation=\\\"horizontal\\\"] {\\n    width: var(--media-slider-fill);\\n  }\\n\\n  &[data-orientation=\\\"vertical\\\"] {\\n    height: var(--media-slider-fill);\\n  }\\n}\\n\\n/* Time display within slider */\\n.media-default-skin .media-slider__time-display {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* ==========================================================================\\n   Popups & Tooltips\\n   ========================================================================== */\\n\\n.media-default-skin .media-popover,\\n.media-default-skin .media-tooltip {\\n  margin: 0;\\n  border: 0;\\n  color: inherit;\\n  overflow: visible;\\n  transition-property: transform, scale, opacity, filter;\\n  transition-duration: 200ms;\\n\\n  &[data-starting-style],\\n  &[data-ending-style] {\\n    opacity: 0;\\n    transform: scale(0);\\n    filter: blur(8px);\\n  }\\n\\n  &[data-instant] {\\n    transition-duration: 0ms;\\n  }\\n\\n  &[data-side=\\\"top\\\"] {\\n    transform-origin: bottom;\\n  }\\n  &[data-side=\\\"bottom\\\"] {\\n    transform-origin: top;\\n  }\\n  &[data-side=\\\"left\\\"] {\\n    transform-origin: right;\\n  }\\n  &[data-side=\\\"right\\\"] {\\n    transform-origin: left;\\n  }\\n}\\n\\n.media-default-skin .media-popover {\\n  --media-popover-side-offset: 0.5rem;\\n}\\n.media-default-skin .media-popover--volume {\\n  padding: 0.625rem 0.25rem;\\n  border-radius: calc(infinity * 1px);\\n}\\n\\n.media-default-skin .media-tooltip {\\n  padding: 0.25rem 0.625rem;\\n  border-radius: calc(infinity * 1px);\\n  font-size: 0.75rem;\\n  white-space: nowrap;\\n  --media-tooltip-side-offset: 0.5rem;\\n}\\n\\n/* ==========================================================================\\n   Native Caption Track\\n   ========================================================================== */\\n\\n.media-default-skin {\\n  --media-caption-track-delay: 600ms;\\n  --media-caption-track-y: -0.5rem;\\n\\n  &:has(.media-controls[data-visible]) {\\n    --media-caption-track-delay: 25ms;\\n    --media-caption-track-y: -3.5rem;\\n  }\\n}\\n\\n.media-default-skin video::-webkit-media-text-track-container {\\n  /* NOTE: The delay must account for the controls delay/duration */\\n  transition: transform 150ms ease-out;\\n  transition-delay: var(--media-caption-track-delay);\\n  transform: translateY(var(--media-caption-track-y)) scale(0.98);\\n  z-index: 1;\\n  font-family: inherit;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n  .media-default-skin video::-webkit-media-text-track-container {\\n    transition-duration: 50ms;\\n  }\\n}\\n\\n\\n/* ==========================================================================\\n   Root\\n   ========================================================================== */\\n\\n.media-default-skin--video {\\n  background: oklch(0 0 0);\\n  --media-border-color: oklch(0 0 0 / 0.1);\\n  --media-surface-background-color: oklch(1 0 0 / 0.1);\\n  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);\\n  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);\\n  --media-surface-shadow-color: oklch(0 0 0 / 0.15);\\n  --media-surface-backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n\\n  @media (prefers-color-scheme: dark) {\\n    --media-border-color: oklch(1 0 0 / 0.1);\\n  }\\n\\n  /* Inner border ring */\\n  &::after {\\n    content: \\\"\\\";\\n    position: absolute;\\n    inset: 0;\\n    z-index: 10;\\n    border-radius: inherit;\\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\\n    pointer-events: none;\\n  }\\n}\\n\\n/* ==========================================================================\\n   Controls (hide/show behavior)\\n   ========================================================================== */\\n\\n.media-default-skin--video .media-controls {\\n  position: absolute;\\n  bottom: 0.75rem;\\n  inset-inline: 0.75rem;\\n  z-index: 10;\\n  will-change: scale, transform, filter, opacity;\\n  transition-property: scale, transform, filter, opacity;\\n  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n  transition-timing-function: ease-out;\\n  transform-origin: bottom;\\n  color: oklch(1 0 0);\\n\\n  &:not([data-visible]) {\\n    opacity: 0;\\n    scale: 0.9;\\n    filter: blur(8px);\\n    transition-duration: 300ms;\\n    transition-delay: 500ms;\\n    pointer-events: none;\\n\\n    @media (prefers-reduced-motion: reduce) {\\n      scale: 1;\\n      filter: blur(0);\\n      transition-duration: 100ms;\\n    }\\n  }\\n}\\n\\n/* ==========================================================================\\n   Sliders\\n   ========================================================================== */\\n\\n.media-default-skin--video .media-slider__track {\\n  background-color: oklch(1 0 0 / 0.2);\\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\\n}\\n\\n\";"],"mappings":";AAAA,mBAAe"}

package/dist/dev/define/audio/skin.css

@@ -95,6 +95,8 @@
   position: relative;
   isolation: isolate;
   display: block;
+  height: 100%;
+  width: 100%;
   container: media-root / inline-size;
   border-radius: var(--media-border-radius, 2rem);
   font-family:

package/dist/dev/define/base.css

@@ -0,0 +1,25 @@
+video-player {
+  display: contents;
+}
+
+video-player video,
+video-player hls-video,
+video-player simple-hls-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+video-player video::-webkit-media-text-track-container {
+  transition: transform var(--media-caption-track-duration, 150ms) ease-out;
+  transition-delay: var(--media-caption-track-delay, 600ms);
+  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
+  z-index: var(--media-caption-track-z, 1);
+  font-family: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  video-player video::-webkit-media-text-track-container {
+    transition-duration: 50ms;
+  }
+}

package/dist/dev/define/skin-mixin.d.ts

@@ -7,8 +7,8 @@ import { Constructor } from "@videojs/utils/types";
  * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
  * handle light DOM projection automatically.
  *
- * When `static styles` is set, the stylesheet is adopted into the shadow
- * root via `adoptedStyleSheets`.
+ * When `static styles` is set, the stylesheet is adopted into the
+ * shadow root via `adoptedStyleSheets`.
  */
 declare function SkinMixin<Base extends Constructor<ReactiveElement>>(BaseClass: Base): Base & {
   shadowRootOptions: ShadowRootInit;

package/dist/dev/define/skin-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin-mixin.d.ts","names":[],"sources":["../../../src/define/skin-mixin.ts"],"mappings":";;;;;;AA6CA;;;;;;iBAAgB,SAAA,cAAuB,WAAA,CAAY,eAAA,EAAA,CACjD,SAAA,EAAW,IAAA,GACV,IAAA;EAAS,iBAAA,EAAmB,cAAA;EAAgB,MAAA,GAAS,aAAA;AAAA;;iBA8BxC,YAAA,CAAa,GAAA,WAAc,aAAA"}
+{"version":3,"file":"skin-mixin.d.ts","names":[],"sources":["../../../src/define/skin-mixin.ts"],"mappings":";;;;;;AAsBA;;;;;;iBAAgB,SAAA,cAAuB,WAAA,CAAY,eAAA,EAAA,CACjD,SAAA,EAAW,IAAA,GACV,IAAA;EAAS,iBAAA,EAAmB,cAAA;EAAgB,MAAA,GAAS,aAAA;AAAA;;iBA6BxC,YAAA,CAAa,GAAA,WAAc,aAAA"}

package/dist/dev/define/skin-mixin.js

@@ -1,33 +1,12 @@
-//#region src/define/skin-mixin.ts
-/**
-* Light DOM stylesheet that bridges CSS custom properties set by skins
-* to native WebKit text track pseudo-elements on the slotted `<video>`.
-*
-* `::slotted(video)::-webkit-media-text-track-container` is invalid per
-* CSS spec, so this bridge lives in light DOM where it can directly
-* target the video element's pseudo-elements.
-*/
-const NATIVE_CAPTION_BRIDGE_CSS = `
-.media-skin > video::-webkit-media-text-track-container {
-  transition: transform var(--media-caption-track-duration, 150ms) ease-out;
-  transition-delay: var(--media-caption-track-delay, 600ms);
-  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
-  z-index: var(--media-caption-track-z, 1);
-  font-family: inherit;
-}
+import base_default from "../_virtual/inline-css_src/define/base.js";
 
-@media (prefers-reduced-motion: reduce) {
-  .media-skin > video::-webkit-media-text-track-container {
-    transition-duration: 50ms;
-  }
-}
-`;
-const BRIDGE_ID = "media-caption-bridge";
-function ensureCaptionBridge() {
-	if (document.getElementById(BRIDGE_ID)) return;
+//#region src/define/skin-mixin.ts
+const STYLES_ID = "__media-styles";
+function ensureStyles() {
+	if (document.getElementById(STYLES_ID)) return;
 	const style = document.createElement("style");
-	style.id = BRIDGE_ID;
-	style.textContent = NATIVE_CAPTION_BRIDGE_CSS;
+	style.id = STYLES_ID;
+	style.textContent = base_default;
 	document.head.appendChild(style);
 }
 /**
@@ -35,8 +14,8 @@ function ensureCaptionBridge() {
 * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
 * handle light DOM projection automatically.
 *
-* When `static styles` is set, the stylesheet is adopted into the shadow
-* root via `adoptedStyleSheets`.
+* When `static styles` is set, the stylesheet is adopted into the
+* shadow root via `adoptedStyleSheets`.
 */
 function SkinMixin(BaseClass) {
 	class SkinElement extends BaseClass {
@@ -45,8 +24,7 @@ function SkinMixin(BaseClass) {
 		}
 		constructor(...args) {
 			super(...args);
-			this.classList.add("media-skin");
-			ensureCaptionBridge();
+			ensureStyles();
 			if (!this.shadowRoot) {
 				const ctor = this.constructor;
 				this.attachShadow(ctor.shadowRootOptions);

package/dist/dev/define/skin-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin-mixin.js","names":[],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/**\n * Light DOM stylesheet that bridges CSS custom properties set by skins\n * to native WebKit text track pseudo-elements on the slotted `<video>`.\n *\n * `::slotted(video)::-webkit-media-text-track-container` is invalid per\n * CSS spec, so this bridge lives in light DOM where it can directly\n * target the video element's pseudo-elements.\n */\nconst NATIVE_CAPTION_BRIDGE_CSS = /* css */ `\n.media-skin > video::-webkit-media-text-track-container {\n  transition: transform var(--media-caption-track-duration, 150ms) ease-out;\n  transition-delay: var(--media-caption-track-delay, 600ms);\n  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);\n  z-index: var(--media-caption-track-z, 1);\n  font-family: inherit;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .media-skin > video::-webkit-media-text-track-container {\n    transition-duration: 50ms;\n  }\n}\n`;\n\nconst BRIDGE_ID = 'media-caption-bridge';\n\nfunction ensureCaptionBridge(): void {\n  if (document.getElementById(BRIDGE_ID)) return;\n  const style = document.createElement('style');\n  style.id = BRIDGE_ID;\n  style.textContent = NATIVE_CAPTION_BRIDGE_CSS;\n  document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the shadow\n * root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n  BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n    static styles?: CSSStyleSheet;\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      this.classList.add('media-skin');\n      ensureCaptionBridge();\n\n      if (!this.shadowRoot) {\n        const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n        this.attachShadow(ctor.shadowRootOptions);\n\n        if (ctor.styles) {\n          this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n        }\n\n        if (ctor.getTemplateHTML) {\n          this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n        }\n      }\n    }\n  }\n\n  return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(css);\n  return sheet;\n}\n"],"mappings":";;;;;;;;;AAWA,MAAM,4BAAsC;;;;;;;;;;;;;;;AAgB5C,MAAM,YAAY;AAElB,SAAS,sBAA4B;AACnC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;;;;;;;;;AAWlC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,QAAK,UAAU,IAAI,aAAa;AAChC,wBAAqB;AAErB,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;AAEzC,QAAI,KAAK,OACP,MAAK,WAAY,qBAAqB,CAAC,KAAK,OAAO;AAGrD,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}
+{"version":3,"file":"skin-mixin.js","names":["styles"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport styles from './base.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ensureStyles(): void {\n  if (document.getElementById(STYLES_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLES_ID;\n  style.textContent = styles;\n  document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n  BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n  class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n    static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n    static styles?: CSSStyleSheet;\n\n    constructor(...args: any[]) {\n      super(...args);\n\n      ensureStyles();\n\n      if (!this.shadowRoot) {\n        const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n        this.attachShadow(ctor.shadowRootOptions);\n\n        if (ctor.styles) {\n          this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n        }\n\n        if (ctor.getTemplateHTML) {\n          this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n        }\n      }\n    }\n  }\n\n  return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(css);\n  return sheet;\n}\n"],"mappings":";;;AAIA,MAAM,YAAY;AAElB,SAAS,eAAqB;AAC5B,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;;;;;;;;;AAWlC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,iBAAc;AAEd,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;AAEzC,QAAI,KAAK,OACP,MAAK,WAAY,qBAAqB,CAAC,KAAK,OAAO;AAGrD,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}

package/dist/dev/define/video/minimal-skin.css

@@ -693,62 +693,9 @@
 }
 
 /* ==========================================================================
-   Captions
+   Native Caption Track
    ========================================================================== */
 
-.media-minimal-skin .media-captions {
-  position: absolute;
-  inset: auto 1rem 1.5rem 1rem;
-  z-index: 20;
-  font-size: 1rem;
-  text-wrap: balance;
-  pointer-events: none;
-
-  @container media-root (width > 20rem) {
-    font-size: 1.5rem;
-  }
-
-  @container media-root (width > 48rem) {
-    font-size: 1.875rem;
-  }
-
-  @container media-root (width > 80rem) {
-    font-size: 2.25rem;
-  }
-}
-
-.media-minimal-skin .media-captions__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 42ch;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.media-minimal-skin .media-captions__text {
-  display: block;
-  padding: 0.125rem 0.5rem;
-  color: oklch(1 0 0);
-  text-shadow:
-    0 0 1px oklch(0 0 0 / 0.7),
-    0 0 8px oklch(0 0 0 / 0.7);
-  text-align: center;
-  white-space: pre-wrap;
-  line-height: 1.2;
-
-  @media (prefers-contrast: more) {
-    background: oklch(0 0 0 / 0.7);
-    text-shadow: none;
-    box-decoration-break: clone;
-  }
-
-  & > * {
-    display: inline;
-  }
-}
-
-/* Caption shifting styles (custom and native) */
 .media-minimal-skin {
   --media-caption-track-delay: 600ms;
   --media-caption-track-y: -0.5rem;
@@ -759,26 +706,16 @@
   }
 }
 
-.media-minimal-skin .media-captions,
 .media-minimal-skin video::-webkit-media-text-track-container {
   /* NOTE: The delay must account for the controls delay/duration */
   transition: transform 150ms ease-out;
   transition-delay: var(--media-caption-track-delay);
-}
-
-.media-minimal-skin video::-webkit-media-text-track-container {
   transform: translateY(var(--media-caption-track-y)) scale(0.98);
   z-index: 1;
   font-family: inherit;
 }
 
-/* When controls are visible, shift captions up to avoid overlap */
-.media-minimal-skin .media-controls[data-visible] ~ .media-captions {
-  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .media-minimal-skin .media-captions,
   .media-minimal-skin video::-webkit-media-text-track-container {
     transition-duration: 50ms;
   }

package/dist/dev/define/video/minimal-skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;iBAuBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cA4HX,uBAAA,SAAgC,4BAAA;EAAA,gBAC3B,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.ts"],"mappings":";;;iBAuBS,eAAA,CAAA;AAAA,cAAe,4BAAA;;;;cAgHX,uBAAA,SAAgC,4BAAA;EAAA,gBAC3B,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}

package/dist/dev/define/video/minimal-skin.js

@@ -28,18 +28,6 @@ function getTemplateHTML() {
         ${renderIcon("spinner", { class: "media-icon" })}
       </media-buffering-indicator>
 
-      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="media-error__dialog">
-          <div class="media-error__content">
-            <p id="media-error-title" class="media-error__title">Something went wrong.</p>
-            <p id="media-error-description" class="media-error__description">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="media-error__actions">
-            <button type="button" class="media-button">OK</button>
-          </div>
-        </div>
-      </div>-->
-
       <media-controls class="media-controls">
         <span class="media-button-group">
           <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">

package/dist/dev/define/video/minimal-skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <!--<div class=\"media-error\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"media-error__dialog\">\n          <div class=\"media-error__content\">\n            <p id=\"media-error-title\" class=\"media-error__title\">Something went wrong.</p>\n            <p id=\"media-error-description\" class=\"media-error__description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"media-error__actions\">\n            <button type=\"button\" class=\"media-button\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls class=\"media-controls\">\n        <span class=\"media-button-group\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n            ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n            <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n            <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n        </span>\n\n        <span class=\"media-time-controls\">\n          <media-time-group class=\"media-time\">\n            <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n            <media-time-separator class=\"media-time__separator\"></media-time-separator>\n            <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n          </media-time-group>\n\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n        </span>\n\n        <span class=\"media-button-group\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popover media-popover--volume\">\n            <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle captions\n          </media-tooltip>\n\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n            ${renderIcon('pip', { class: 'media-icon' })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n          </media-tooltip>\n\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;cAkB3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;cAO3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;cAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;AAcjG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}
+{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/video/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-controls class=\"media-controls\">\n        <span class=\"media-button-group\">\n          <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--icon media-button--play\">\n            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n            ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n          </media-play-button>\n          <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n            <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n            <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n            <span class=\"media-icon__container\">\n              ${renderIcon('seek', { class: 'media-icon' })}\n              <span class=\"media-icon__label\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n        </span>\n\n        <span class=\"media-time-controls\">\n          <media-time-group class=\"media-time\">\n            <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n            <media-time-separator class=\"media-time__separator\"></media-time-separator>\n            <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n          </media-time-group>\n\n          <media-time-slider class=\"media-slider\">\n            <media-slider-track class=\"media-slider__track\">\n              <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n          </media-time-slider>\n        </span>\n\n        <span class=\"media-button-group\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--icon media-button--mute\">\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popover media-popover--volume\">\n            <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--icon media-button--captions\">\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n          </media-captions-button>\n          <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n            Toggle captions\n          </media-tooltip>\n\n          <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--icon\">\n            ${renderIcon('pip', { class: 'media-icon' })}\n          </media-pip-button>\n          <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-pip\">Enter picture-in-picture</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-pip\">Exit picture-in-picture</span>\n          </media-tooltip>\n\n          <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--icon media-button--fullscreen\">\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n          </media-fullscreen-button>\n          <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n            <span class=\"media-tooltip-label media-tooltip-label--enter-fullscreen\">Enter fullscreen</span>\n            <span class=\"media-tooltip-label media-tooltip-label--exit-fullscreen\">Exit fullscreen</span>\n          </media-tooltip>\n        </span>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin';\n  static styles = createStyles(styles);\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinElement.tagName, MinimalVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinElement.tagName]: MinimalVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;UAKR,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;cAM3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;cACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;cAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;;;;;2EAQF,CAAC,UAAU;;gBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;gDAChC,UAAU;;;;4BAI9B,UAAU;;;0EAGoC,UAAU;;gBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;gDACZ,UAAU;;;;2BAI/B,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BvB,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;cACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;cAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;cAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;cAO3E,WAAW,OAAO,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;cAQ3C,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;cACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;AAcjG,IAAa,0BAAb,cAA6C,UAAU,gBAAgB,CAAC;;iBAC5C;;;gBACV,aAAaA,qBAAO;;;yBACX;;;AAG3B,eAAe,OAAO,wBAAwB,SAAS,wBAAwB"}

package/dist/dev/define/video/minimal-skin.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;iBA2CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cAsIX,+BAAA,SAAwC,oCAAA;EAAA,gBACnC,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,+BAAA,CAAgC,OAAA,GAAU,+BAAA;EAAA;AAAA"}
+{"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"mappings":";;;iBA0CS,eAAA,CAAA;AAAA,cAAe,oCAAA;;;;cA0HX,+BAAA,SAAwC,oCAAA;EAAA,gBACnC,OAAA;EAAA,OACT,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,+BAAA,CAAgC,OAAA,GAAU,+BAAA;EAAA;AAAA"}

package/dist/dev/define/video/minimal-skin.tailwind.js

@@ -3,7 +3,6 @@ import { renderIcon } from "../../icons/dist/render/minimal/index.js";
 import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
 import { button } from "../../skins/dist/default/minimal/tailwind/components/button.js";
 import { buttonGroup } from "../../skins/dist/default/minimal/tailwind/components/button-group.js";
-import { error } from "../../skins/dist/default/minimal/tailwind/components/error.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
@@ -41,18 +40,6 @@ function getTemplateHTML() {
         ${renderIcon("spinner")}
       </media-buffering-indicator>
 
-      <!--<div class="${error.root}" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="${error.dialog}">
-          <div class="${error.content}">
-            <p id="media-error-title" class="${error.title}">Something went wrong.</p>
-            <p id="media-error-description">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="${error.actions}">
-            <button type="button" class="${cn(button.base, button.default)}">OK</button>
-          </div>
-        </div>
-      </div>-->
-
       <media-controls data-controls="" class="${controls}">
         <span class="${buttonGroup}">
           <span class="${tooltipState.play.wrapper}">

package/dist/dev/define/video/minimal-skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\nimport { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <!--<div class=\"${error.root}\" role=\"alertdialog\" aria-labelledby=\"media-error-title\" aria-describedby=\"media-error-description\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <p id=\"media-error-title\" class=\"${error.title}\">Something went wrong.</p>\n            <p id=\"media-error-description\">An error occurred while trying to play the video. Please try again.</p>\n          </div>\n          <div class=\"${error.actions}\">\n            <button type=\"button\" class=\"${cn(button.base, button.default)}\">OK</button>\n          </div>\n        </div>\n      </div>-->\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${buttonGroup}\">\n          <span class=\"${tooltipState.play.wrapper}\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.play.replay}\">Replay</span>\n              <span class=\"${tooltipState.play.play}\">Play</span>\n              <span class=\"${tooltipState.play.pause}\">Pause</span>\n            </media-tooltip>\n          </span>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n              <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: icon })}\n              <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n        </span>\n\n        <span class=\"${time.controls}\">\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-separator class=\"${time.separator}\"></media-time-separator>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\n          <media-time-slider class=\"${slider.root}\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n          </media-time-slider>\n        </span>\n\n        <span class=\"${buttonGroup}\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n          </media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.volume)}\">\n            <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n              ${renderIcon('pip', { class: icon })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinTailwindElement.tagName, MinimalVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinTailwindElement.tagName]: MinimalVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/video/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n  tooltipState,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/buffering-indicator';\nimport '../ui/captions-button';\nimport '../ui/controls';\nimport '../ui/fullscreen-button';\nimport '../ui/mute-button';\nimport '../ui/pip-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/volume-slider';\nimport { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${root(true)}\">\n      <slot name=\"media\"></slot>\n\n      <media-buffering-indicator class=\"${bufferingIndicator}\">\n        ${renderIcon('spinner')}\n      </media-buffering-indicator>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <span class=\"${buttonGroup}\">\n          <span class=\"${tooltipState.play.wrapper}\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.icon, iconState.play.button)}\">\n              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.play.replay}\">Replay</span>\n              <span class=\"${tooltipState.play.play}\">Play</span>\n              <span class=\"${tooltipState.play.pause}\">Pause</span>\n            </media-tooltip>\n          </span>\n\n          <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n              <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek backward ${SEEK_TIME} seconds\n          </media-tooltip>\n\n          <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\n            <span class=\"${iconContainer}\">\n              ${renderIcon('seek', { class: icon })}\n              <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n            </span>\n          </media-seek-button>\n          <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Seek forward ${SEEK_TIME} seconds\n          </media-tooltip>\n        </span>\n\n        <span class=\"${time.controls}\">\n          <media-time-group class=\"${time.group}\">\n            <media-time type=\"current\" class=\"${time.current}\"></media-time>\n            <media-time-separator class=\"${time.separator}\"></media-time-separator>\n            <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n          </media-time-group>\n\n          <media-time-slider class=\"${slider.root}\">\n            <media-slider-track class=\"${slider.track}\">\n              <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n            </media-slider-track>\n            <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n          </media-time-slider>\n        </span>\n\n        <span class=\"${buttonGroup}\">\n          <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n          </media-playback-rate-button>\n          <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n            Toggle playback rate\n          </media-tooltip>\n\n          <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.icon, iconState.mute.button)}\">\n            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n          </media-mute-button>\n\n          <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.volume)}\">\n            <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n              <media-slider-track class=\"${slider.track}\">\n                <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n              </media-slider-track>\n              <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n            </media-volume-slider>\n          </media-popover>\n\n          <span class=\"${tooltipState.captions.wrapper}\">\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.icon, iconState.captions.button)}\">\n              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.captions.enable}\">Enable captions</span>\n              <span class=\"${tooltipState.captions.disable}\">Disable captions</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.pip.wrapper}\">\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.icon)}\">\n              ${renderIcon('pip', { class: icon })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.pip.enter}\">Enter picture-in-picture</span>\n              <span class=\"${tooltipState.pip.exit}\">Exit picture-in-picture</span>\n            </media-tooltip>\n          </span>\n\n          <span class=\"${tooltipState.fullscreen.wrapper}\">\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.icon, iconState.fullscreen.button)}\">\n              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n              <span class=\"${tooltipState.fullscreen.enter}\">Enter fullscreen</span>\n              <span class=\"${tooltipState.fullscreen.exit}\">Exit fullscreen</span>\n            </media-tooltip>\n          </span>\n        </span>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n    </media-container>\n  `;\n}\n\nexport class MinimalVideoSkinTailwindElement extends SkinMixin(ReactiveElement) {\n  static readonly tagName = 'video-minimal-skin-tailwind';\n  static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalVideoSkinTailwindElement.tagName, MinimalVideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalVideoSkinTailwindElement.tagName]: MinimalVideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/define/video/skin.css

@@ -125,6 +125,8 @@
   position: relative;
   isolation: isolate;
   display: block;
+  height: 100%;
+  width: 100%;
   container: media-root / inline-size;
   border-radius: var(--media-border-radius, 2rem);
   font-family:
@@ -713,62 +715,9 @@
 }
 
 /* ==========================================================================
-   Captions
+   Native Caption Track
    ========================================================================== */
 
-.media-default-skin .media-captions {
-  position: absolute;
-  inset: auto 1rem 1.5rem 1rem;
-  z-index: 20;
-  font-size: 1rem;
-  text-wrap: balance;
-  pointer-events: none;
-
-  @container media-root (width > 20rem) {
-    font-size: 1.5rem;
-  }
-
-  @container media-root (width > 48rem) {
-    font-size: 1.875rem;
-  }
-
-  @container media-root (width > 80rem) {
-    font-size: 2.25rem;
-  }
-}
-
-.media-default-skin .media-captions__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 42ch;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.media-default-skin .media-captions__text {
-  display: block;
-  padding: 0.125rem 0.5rem;
-  color: oklch(1 0 0);
-  text-shadow:
-    0 0 1px oklch(0 0 0 / 0.7),
-    0 0 8px oklch(0 0 0 / 0.7);
-  text-align: center;
-  white-space: pre-wrap;
-  line-height: 1.2;
-
-  @media (prefers-contrast: more) {
-    background: oklch(0 0 0 / 0.7);
-    text-shadow: none;
-    box-decoration-break: clone;
-  }
-
-  & > * {
-    display: inline;
-  }
-}
-
-/* Caption shifting styles (custom and native) */
 .media-default-skin {
   --media-caption-track-delay: 600ms;
   --media-caption-track-y: -0.5rem;
@@ -779,26 +728,16 @@
   }
 }
 
-.media-default-skin .media-captions,
 .media-default-skin video::-webkit-media-text-track-container {
   /* NOTE: The delay must account for the controls delay/duration */
   transition: transform 150ms ease-out;
   transition-delay: var(--media-caption-track-delay);
-}
-
-.media-default-skin video::-webkit-media-text-track-container {
   transform: translateY(var(--media-caption-track-y)) scale(0.98);
   z-index: 1;
   font-family: inherit;
 }
 
-/* When controls are visible, shift captions up to avoid overlap */
-.media-default-skin .media-controls[data-visible] ~ .media-captions {
-  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .media-default-skin .media-captions,
   .media-default-skin video::-webkit-media-text-track-container {
     transition-duration: 50ms;
   }

package/dist/dev/define/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;iBAwBS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cAuHX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;iBAwBS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cA2GX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}