@videojs/html 10.0.0-beta.28 → 10.0.0-beta.29

package/docs/how-to/customize-skins.md

@@ -92,12 +92,12 @@ CSS
 <script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-ui.js"></script>
 <link rel="stylesheet" href="./player.css">
 
-<video-player>
+<video-player poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp">
   <media-container class="media-default-skin media-default-skin--video">
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
 
     <media-poster>
-      <img src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp" />
+      <img alt="" decoding="async" />
     </media-poster>
 
     <media-buffering-indicator class="media-buffering-indicator">
@@ -1033,7 +1033,7 @@ media-container {
     position: relative;
     display: block;
     max-width: var(--thumbnail-max-width);
-    max-height: var(--max-height);
+    max-height: var(--thumbnail-max-height);
     overflow: clip;
     border-radius: inherit;
 
@@ -1088,8 +1088,7 @@ media-container {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
   --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
+  --thumb-size: calc(var(--spacing) * 3);
   --chapter-gap: calc(var(--spacing) * 1);
   --chapter-inset-start: calc(var(--chapter-gap) / 2);
   --chapter-inset-end: calc(var(--chapter-gap) / 2);
@@ -1142,13 +1141,22 @@ media-container {
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -1175,6 +1183,14 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -1256,45 +1272,6 @@ media-container {
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
-    }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, height, width, outline-offset, left, top;
-    }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
-    }
-    .media-slider__buffer {
-      transition-timing-function: ease-out;
-      transition-duration: 250ms;
-    }
-  }
-
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
-    }
-  }
-
   /* Thumb */
   .media-slider__thumb {
     position: absolute;
@@ -1311,10 +1288,8 @@ media-container {
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
+    scale: 0.8;
     translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-    transition-property: opacity, height, width, outline-offset;
 
     &[data-orientation="horizontal"] {
       top: 50%;
@@ -1331,22 +1306,12 @@ media-container {
       opacity: 1;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        outline-color: oklch(from currentColor l c h / 0.15);
-        outline-offset: 0;
-      }
-    }
-
     &::after {
       position: absolute;
       inset: -4px;
       content: "";
       border-radius: inherit;
       box-shadow: 0 0 0 2px currentColor;
-      transition-timing-function: ease-out;
-      transition-duration: 150ms;
-      transition-property: opacity, scale;
     }
 
     &:not(:focus-visible)::after {
@@ -1355,37 +1320,70 @@ media-container {
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-timing-function: ease-out;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
+
+      &::after {
+        transition-timing-function: ease-out;
+        transition-duration: 150ms;
+        transition-property: opacity, scale;
+      }
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover .media-slider__thumb {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 36;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
-    min-width: var(--max-width);
+    min-width: var(--max-size);
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -1396,7 +1394,8 @@ media-container {
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
       bottom: calc(100% + (var(--spacing) * 9));
     }
 
@@ -1410,7 +1409,7 @@ media-container {
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2157,8 +2156,8 @@ media-container {
    still in the DOM — just `display: none` — so its animations would keep
    running. Set the variables to `none` to short-circuit the keyframes. */
 .media-button--airplay:not([data-airplay-state="connected"]) {
-  --media-icon--airplay__fill-animation: none;
-  --media-icon--airplay__triangle-animation: none;
+  --media-icon-airplay-fill-animation: none;
+  --media-icon-airplay-triangle-animation: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2325,6 +2324,12 @@ media-container {
   .media-controls--primary,
   .media-controls--secondary {
     position: absolute;
+  }
+  /* Primary must be higher for the preview/thumbnail */
+  .media-controls--primary {
+    z-index: 20;
+  }
+  .media-controls--secondary {
     z-index: 10;
   }
 
@@ -2341,6 +2346,11 @@ media-container {
     transform-origin: top;
   }
 
+  .media-time-controls {
+    flex: 1;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   @container media-root (width < 32rem) {
     .media-controls--primary,
     .media-controls--secondary {
@@ -2391,6 +2401,10 @@ media-container {
         }
       }
     }
+
+    .media-button--captions {
+      display: none;
+    }
   }
 
   @container media-root (width >= 32rem) {
@@ -2427,11 +2441,10 @@ media-container {
         translate: 0 4px;
       }
     }
-  }
 
-  .media-time-controls {
-    flex: 1;
-    padding-inline: calc(var(--spacing) * 3);
+    .media-time-controls {
+      padding-inline: calc(var(--spacing) * 3);
+    }
   }
 
   @media (pointer: fine) {
@@ -3098,8 +3111,7 @@ media-container {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
   --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
+  --thumb-size: calc(var(--spacing) * 3);
   --chapter-gap: calc(var(--spacing) * 1);
   --chapter-inset-start: calc(var(--chapter-gap) / 2);
   --chapter-inset-end: calc(var(--chapter-gap) / 2);
@@ -3152,13 +3164,22 @@ media-container {
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -3185,6 +3206,14 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -3266,45 +3295,6 @@ media-container {
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
-    }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, height, width, outline-offset, left, top;
-    }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
-    }
-    .media-slider__buffer {
-      transition-timing-function: ease-out;
-      transition-duration: 250ms;
-    }
-  }
-
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
-    }
-  }
-
   /* Thumb */
   .media-slider__thumb {
     position: absolute;
@@ -3321,10 +3311,8 @@ media-container {
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
+    scale: 0.8;
     translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-    transition-property: opacity, height, width, outline-offset;
 
     &[data-orientation="horizontal"] {
       top: 50%;
@@ -3341,22 +3329,12 @@ media-container {
       opacity: 1;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        outline-color: oklch(from currentColor l c h / 0.15);
-        outline-offset: 0;
-      }
-    }
-
     &::after {
       position: absolute;
       inset: -4px;
       content: "";
       border-radius: inherit;
       box-shadow: 0 0 0 2px currentColor;
-      transition-timing-function: ease-out;
-      transition-duration: 150ms;
-      transition-property: opacity, scale;
     }
 
     &:not(:focus-visible)::after {
@@ -3365,37 +3343,70 @@ media-container {
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-timing-function: ease-out;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
+
+      &::after {
+        transition-timing-function: ease-out;
+        transition-duration: 150ms;
+        transition-property: opacity, scale;
+      }
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover .media-slider__thumb {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 36;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
-    min-width: var(--max-width);
+    min-width: var(--max-size);
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -3406,7 +3417,8 @@ media-container {
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
       bottom: calc(100% + (var(--spacing) * 9));
     }
 
@@ -3420,7 +3432,7 @@ media-container {
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -4000,12 +4012,12 @@ CSS
 <script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video-minimal-ui.js"></script>
 <link rel="stylesheet" href="./player.css">
 
-<video-player>
+<video-player poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp">
   <media-container class="media-minimal-skin media-minimal-skin--video">
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
 
     <media-poster>
-      <img src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp" />
+      <img alt="" decoding="async" />
     </media-poster>
 
     <media-buffering-indicator class="media-buffering-indicator">
@@ -4964,7 +4976,7 @@ media-container {
     position: relative;
     display: block;
     max-width: var(--thumbnail-max-width);
-    max-height: var(--max-height);
+    max-height: var(--thumbnail-max-height);
     overflow: clip;
     border-radius: inherit;
   }
@@ -5008,9 +5020,13 @@ media-container {
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -5042,86 +5058,41 @@ media-container {
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
+  /* Shared track fills */
+  .media-slider__buffer,
+  .media-slider__fill {
     position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
+    pointer-events: none;
+    border-radius: inherit;
 
     &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
+      inset-block: 0;
+      left: 0;
+      width: 100%;
     }
     &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
+      inset-inline: 0;
+      bottom: 0;
+      height: 100%;
     }
 
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
     }
   }
-
-  &:focus-within .media-slider__thumb,
-  .media-slider__thumb--persistent {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
-    opacity: 1;
-    scale: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  /* Shared track fills */
-  .media-slider__buffer,
-  .media-slider__fill {
-    position: absolute;
-    pointer-events: none;
-    border-radius: inherit;
-
-    &[data-orientation="horizontal"] {
-      inset-block: 0;
-      left: 0;
-      width: 100%;
-      transition-property: clip-path;
-    }
-    &[data-orientation="vertical"] {
-      inset-inline: 0;
-      bottom: 0;
-      height: 100%;
-      transition-property: clip-path;
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -5148,6 +5119,14 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -5171,9 +5150,6 @@ media-container {
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -5190,8 +5166,6 @@ media-container {
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -5204,7 +5178,7 @@ media-container {
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -5212,7 +5186,7 @@ media-container {
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -5220,7 +5194,7 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -5228,63 +5202,102 @@ media-container {
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .media-slider__thumb {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -5296,8 +5309,9 @@ media-container {
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {
@@ -6097,8 +6111,8 @@ media-container {
    still in the DOM — just `display: none` — so its animations would keep
    running. Set the variables to `none` to short-circuit the keyframes. */
 .media-button--airplay:not([data-airplay-state="connected"]) {
-  --media-icon--airplay__fill-animation: none;
-  --media-icon--airplay__triangle-animation: none;
+  --media-icon-airplay-fill-animation: none;
+  --media-icon-airplay-triangle-animation: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -6260,6 +6274,7 @@ media-container {
   --base-boundary-offset: 1;
   --inset-factor: 1;
   --inset: calc(var(--spacing) * var(--inset-factor));
+  --volume-mask: linear-gradient(to right, transparent 10%, #000 25%, #000 100%);
 
   position: absolute;
   inset-inline: var(--inset);
@@ -6315,6 +6330,37 @@ media-container {
     justify-content: end;
   }
 
+  :is(.media-time-controls, .media-button-group:last-child) {
+    mask-image: var(--volume-mask-image, none);
+    mask-repeat: no-repeat;
+    mask-position: var(--volume-mask-position, 100% 0);
+    mask-size: var(--volume-mask-size, 200% 100%);
+    transition: mask-position 50ms ease-out;
+  }
+
+  @container media-root (width <= 42rem) {
+    .media-popover--volume {
+      --media-popover-side-offset: calc(var(--spacing) * 3);
+    }
+  }
+
+  &:has(.media-button--mute[aria-expanded="true"]) {
+    @container media-root (width <= 42rem) {
+      .media-button-group:last-child {
+        --volume-mask-image: var(--volume-mask);
+        --volume-mask-position: 0 0;
+        --volume-mask-size: 400% 100%;
+      }
+    }
+
+    @container media-root (width > 42rem) {
+      .media-time-controls {
+        --volume-mask-image: var(--volume-mask);
+        --volume-mask-position: 0 0;
+      }
+    }
+  }
+
   @container media-root (width > 42rem) {
     --inset-factor: 2;
     --base-side-offset: 2;
@@ -6332,20 +6378,6 @@ media-container {
     .media-button-group:last-child {
       flex: 0 0 auto;
     }
-
-    .media-time-controls {
-      mask-position: 100% 0;
-      mask-size: 200% 100%;
-      transition: mask-position 50ms ease-out;
-    }
-
-    &:has(.media-button--mute[aria-expanded="true"]) .media-time-controls {
-      mask-image: linear-gradient(to right, transparent 10%, #000 25%, #000 100%);
-    }
-
-    &:has(.media-button--mute[aria-expanded="true"]) .media-time-controls {
-      mask-position: 0 0;
-    }
   }
 }
 
@@ -6370,9 +6402,9 @@ media-container {
 .media-minimal-skin--video .media-slider .media-slider__preview {
   --preview-end-inset: calc(100cqi - 100%);
   --preview-left: clamp(
-    calc(var(--max-width) / 2),
+    calc(var(--max-size) / 2),
     var(--media-slider-pointer),
-    calc(100% - var(--max-width) / 2 + var(--preview-end-inset))
+    calc(100% - var(--max-size) / 2 + var(--preview-end-inset))
   );
 
   @container media-root (width > 42rem) {
@@ -7025,9 +7057,13 @@ media-container {
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -7059,68 +7095,14 @@ media-container {
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
-    position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-
-    &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
-    }
-    &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
-    }
-
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:focus-within .media-slider__thumb,
-  .media-slider__thumb--persistent {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
-    opacity: 1;
-    scale: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
   /* Shared track fills */
   .media-slider__buffer,
   .media-slider__fill {
@@ -7132,13 +7114,22 @@ media-container {
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -7165,6 +7156,14 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -7188,9 +7187,6 @@ media-container {
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -7207,8 +7203,6 @@ media-container {
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -7221,7 +7215,7 @@ media-container {
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -7229,7 +7223,7 @@ media-container {
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -7237,7 +7231,7 @@ media-container {
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -7245,63 +7239,102 @@ media-container {
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .media-slider__thumb {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -7313,8 +7346,9 @@ media-container {
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {