@videojs/html 10.1.0 → 10.3.0

package/dist/default/internal/skins/neutral-video/skin.css

@@ -11,6 +11,8 @@
     --media-text-shadow-dialog: 0 1px 0 #00000080;
     --media-backdrop-filter-dialog: blur(16px) saturate(120%);
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2);
+    --media-filter-feedback: drop-shadow(0 0 1px oklch(0% 0 0 / .3)) drop-shadow(0 1px 3px oklch(0% 0 0 / .2))
+      drop-shadow(0 2px 12px oklch(0% 0 0 / .15));
     --media-duration-dialog: var(--media-duration);
     --media-duration-indicator: .4s;
     --media-hidden-offset: 100%;
@@ -38,7 +40,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
     --media-border: oklch(0% 0 0 / .1);
     --media-ring: oklch(100% 0 0);
     --media-backdrop: oklch(0% 0 0);
@@ -51,9 +53,9 @@
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
     --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -153,10 +155,20 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
+    --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 40%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
@@ -168,9 +180,17 @@
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
 
@@ -185,9 +205,20 @@
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
+    --media-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: 40%;
     --media-controls-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
+    --media-controls-top-gradient: linear-gradient(to bottom,
+      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+      transparent);
     --media-indicator-gradient: linear-gradient(to bottom,
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
@@ -197,6 +228,7 @@
   }
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
 
@@ -208,7 +240,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
 
@@ -529,6 +570,11 @@
     transition-duration: var(--media-duration-instant);
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop[data-scope="document"] {
+    border-radius: 0;
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
     opacity: 0;
   }
@@ -599,6 +645,11 @@
     transition-duration: var(--media-duration-instant);
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 1rem);
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
     opacity: 0;
@@ -712,11 +763,10 @@
     transition-duration: .15s;
     transition-duration: calc(var(--media-duration-controls) / 2);
     text-shadow: 0 1px 0 var(--media-shadow-current-color);
-    inset-inline: 0;
     font-weight: 400;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
-    top: 0;
+    inset: 0;
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
@@ -725,6 +775,16 @@
     transition-duration: var(--media-duration-controls);
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-title:before {
+    z-index: -1;
+    height: var(--media-controls-gradient-height);
+    content: "";
+    background-image: var(--media-controls-top-gradient);
+    inset-inline: 0;
+    position: absolute;
+    top: 0;
+  }
+
   @media (pointer: fine) {
     :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
       filter: blur(var(--media-hidden-blur));
@@ -792,9 +852,9 @@
     object-position: var(--media-object-position, center);
     width: 100%;
     max-width: 100%;
-    height: 100%;
     margin: 0;
     display: block;
+    height: 100% !important;
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-status-announcer {
@@ -814,6 +874,7 @@
     gap: var(--media-spacing);
     padding: calc(var(--media-spacing) * 4);
     text-align: center;
+    filter: var(--media-filter-feedback);
     grid-row-start: 1;
     grid-column-start: 2;
     display: grid;
@@ -934,6 +995,7 @@
   :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator {
     padding: calc(var(--media-spacing) * 4);
     text-align: center;
+    filter: var(--media-filter-feedback);
     transition-property: opacity, scale;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
@@ -2127,6 +2189,10 @@
     opacity: .5;
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unavailable"], :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unsupported"] {
     display: none;
   }
@@ -2535,9 +2601,12 @@
     z-index: 10;
     border-radius: inherit;
     background-image: var(--media-controls-gradient);
+    background-size: 100% var(--media-controls-bottom-gradient-height);
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-controls);
+    background-position: bottom;
+    background-repeat: no-repeat;
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;
@@ -2722,22 +2791,13 @@
     }
   }
 
-  :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-current-value {
-    display: none;
-  }
-
-  @container media-root (width >= 42rem) {
-    :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-current-value {
-      display: inline;
-    }
-  }
-
   :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value {
     font-variant-numeric: tabular-nums;
     transition-property: opacity;
     transition-duration: .15s;
     transition-duration: var(--media-duration-slow);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: none;
   }
 
   :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value[data-unavailable] {
@@ -2747,6 +2807,7 @@
   @container media-root (width >= 42rem) {
     :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value {
       color: var(--media-controls-foreground);
+      display: inline;
     }
 
     @supports (color: color-mix(in lab, red, red)) {

package/dist/default/internal/skins/neutral-video/template.js

@@ -78,7 +78,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-controls-group>
 <media-controls-group class="video-time-slider-group">
 <media-time-group class="media-time-group">
-<media-time class="media-time-toggle media-time-current-value" type="current" toggle>
+<media-time class="media-time-toggle" type="current" toggle>
 </media-time>
 <media-time-separator class="media-time-separator">
 </media-time-separator>

package/dist/default/internal/skins/scaffold-audio/register.js

@@ -1,9 +1,5 @@
 import "../../../define/i18n.js";
 import { registerIcons } from "../../../icons/element/register/index.js";
-import { airPlayEnterIcon } from "../../../icons/dist/html/scaffold/airplay-enter.js";
-import { airPlayExitIcon } from "../../../icons/dist/html/scaffold/airplay-exit.js";
-import { captionsOffIcon } from "../../../icons/dist/html/scaffold/captions-off.js";
-import { captionsOnIcon } from "../../../icons/dist/html/scaffold/captions-on.js";
 import { checkIcon } from "../../../icons/dist/html/scaffold/check.js";
 import { pauseIcon } from "../../../icons/dist/html/scaffold/pause.js";
 import { playIcon } from "../../../icons/dist/html/scaffold/play.js";
@@ -24,7 +20,6 @@ import "../../../define/ui/controls.js";
 import "../../../define/ui/controls-content.js";
 import "../../../define/ui/tooltip-group.js";
 import "../../../define/ui/controls-group.js";
-import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/tooltip.js";
 import "../../../define/ui/tooltip-label.js";
 import "../../../define/ui/tooltip-shortcut.js";
@@ -46,7 +41,6 @@ import "../../../define/ui/volume-slider.js";
 import "../../../define/ui/time-group.js";
 import "../../../define/ui/time.js";
 import "../../../define/ui/time-separator.js";
-import "../../../define/ui/captions-button.js";
 import "../../../define/ui/menu.js";
 import "../../../define/ui/menu-content.js";
 import "../../../define/ui/menu-radio-item.js";
@@ -57,10 +51,6 @@ import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/playback-rate-button.js";
 //#region src/internal/skins/scaffold-audio/register.ts
 registerIcons("scaffold", {
-	"airplay-enter": airPlayEnterIcon,
-	"airplay-exit": airPlayExitIcon,
-	"captions-off": captionsOffIcon,
-	"captions-on": captionsOnIcon,
 	check: checkIcon,
 	pause: pauseIcon,
 	play: playIcon,

package/dist/default/internal/skins/scaffold-audio/skin.css

@@ -187,6 +187,10 @@
     display: none;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -204,8 +208,8 @@
 
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-dialog-popup {
     z-index: 50;
-    width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
+    max-height: calc(100% - var(--media-spacing) * 8);
+    width: calc(100% - var(--media-spacing) * 8);
     max-width: calc(var(--media-spacing) * 80);
     gap: calc(var(--media-spacing) * 3);
     background-color: var(--media-popover);
@@ -232,6 +236,11 @@
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - var(--media-spacing) * 8);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -245,8 +254,8 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-dialog-title {
-    font-size: 1.125rem;
-    line-height: 1.55556;
+    font-size: calc(var(--media-spacing) * 4.5);
+    line-height: calc(var(--media-spacing) * 7);
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-status-announcer {
@@ -258,6 +267,30 @@
     overflow: hidden;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-live-button {
+    align-items: center;
+    gap: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    grid-auto-flow: column;
+    width: auto !important;
+    padding-inline: calc(var(--media-spacing) * 2.5) !important;
+  }
+
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-live-button-dot {
+    width: calc(var(--media-spacing) * 2);
+    height: calc(var(--media-spacing) * 2);
+    opacity: .4;
+    background-color: currentColor;
+    border-radius: 0;
+    flex-shrink: 0;
+    display: inline-block;
+  }
+
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
+    opacity: 1;
+    background-color: #f43f5e;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-popup {
     color: inherit;
     border-style: solid;
@@ -369,55 +402,25 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-tooltip-shortcut {
+    text-align: center;
+    min-width: 1.5em;
     font-family: inherit;
     font-size: calc(var(--media-spacing) * 2.75);
+    background-color: oklab(100% 0 5.96046e-8 / .1);
+    padding: .1em;
+    line-height: 1.25;
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
+  .media-poster > slot::slotted(img) {
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
     display: block;
+    height: 100% !important;
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-button-icon {
-    width: calc(var(--media-spacing) * 4.5);
-    height: calc(var(--media-spacing) * 4.5);
-    grid-row-start: 1;
-    grid-column-start: 1;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-captions-button-on-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-captions-button)[data-active] .media-captions-button-on-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-live-button {
-    align-items: center;
-    gap: calc(var(--media-spacing) * 1.5);
-    font-size: calc(var(--media-spacing) * 2.75);
-    grid-auto-flow: column;
-    width: auto !important;
-    padding-inline: calc(var(--media-spacing) * 2.5) !important;
-  }
-
-  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-live-button-dot {
-    width: calc(var(--media-spacing) * 2);
-    height: calc(var(--media-spacing) * 2);
-    opacity: .4;
-    background-color: currentColor;
-    border-radius: 0;
-    flex-shrink: 0;
-    display: inline-block;
-  }
-
-  :where(:where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
-    opacity: 1;
-    background-color: #f43f5e;
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-poster {
@@ -766,6 +769,13 @@
     display: block;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-button-icon {
+    width: calc(var(--media-spacing) * 4.5);
+    height: calc(var(--media-spacing) * 4.5);
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-mute-button-high-icon {
     display: none;
   }
@@ -1241,6 +1251,10 @@
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -1263,6 +1277,20 @@
     font-variant-numeric: tabular-nums;
   }
 
+  @supports not (text-fit: shrink) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-playback-rate-button {
+      font-size: min(1em, calc(4em / (var(--media-playback-rate-length, 3) + 1)));
+    }
+  }
+
+  :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-playback-rate-button-label {
+    text-align: center;
+    white-space: nowrap;
+    text-fit: shrink;
+    width: 80%;
+    min-width: 0;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-menu-content {
     overscroll-behavior: none;
     max-height: 100%;
@@ -1383,7 +1411,6 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-audio, :where(.media-skin[data-theme="scaffold"][data-preset="audio"]).media-audio {
-    aspect-ratio: auto;
     background-color: var(--media-background);
     box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000;
     overflow: visible !important;
@@ -1392,6 +1419,9 @@
   :where(.media-skin[data-theme="scaffold"][data-preset="audio"]) .media-container, :where(.media-skin[data-theme="scaffold"][data-preset="audio"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     font-family: var(--media-font-family, inherit);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1409,6 +1439,17 @@
     outline-style: solid;
     outline-color: var(--media-ring);
   }
+
+  .media-container > slot::slotted(video), :scope.media-container > slot::slotted(video) {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    display: block;
+    height: 100% !important;
+  }
 }
 
 @layer utilities;
@@ -1426,7 +1467,7 @@
     --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
     --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
+    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
     --media-border: oklch(0% 0 0 / .1);
     --media-ring: oklch(100% 0 0);
     --media-backdrop: oklch(0% 0 0);
@@ -1439,9 +1480,9 @@
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
     --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
@@ -1546,6 +1587,7 @@
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
+    --media-muted: oklch(0% 0 0 / .1);
     --media-surface-border: oklch(0% 0 0 / .05);
     --media-primary: var(--media-accent-color, var(--media-foreground));
     --media-border: oklch(0% 0 0 / .1);
@@ -1564,6 +1606,7 @@
       --media-foreground: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-controls: light-dark(oklch(100% 0 0 / .5), oklch(0% 0 0 / .4));
       --media-border: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
+      --media-muted: light-dark(oklch(0% 0 0 / .1), oklch(100% 0 0 / .1));
       --media-default-accent-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
       --media-default-accent-text-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
       --media-internal-accent-text-fallback: light-dark(oklch(100% 0 0), oklch(0% 0 0));
@@ -1591,7 +1634,6 @@
   }
 
   .media-skin[data-theme="scaffold"] {
-    --media-spacing: calc(var(--media-scale-unit, 16px) / 4);
     --media-background: transparent;
     --media-foreground: white;
     --media-accent: var(--media-accent-color, var(--media-default-accent-color));

package/dist/default/internal/skins/scaffold-audio/template.js

@@ -99,8 +99,20 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
+<media-time-group class="media-time-group">
+<media-time class="media-time-toggle" type="current" toggle>
+</media-time>
+<media-time class="media-time-current-value" type="current">
+</media-time>
+<media-time-separator class="media-time-separator">
+</media-time-separator>
+<media-time class="media-time-duration-value" type="duration">
+</media-time>
+</media-time-group>
+</media-controls-group>
+<media-controls-group class="video-controls-group">
 <media-playback-rate-button commandfor="vjs-yjowDGCc-0-popup" class="media-button media-playback-rate-button" id="vjs-0AT5ugaw-0-4-trigger">
-<span data-part="value">
+<span data-part="value" class="media-playback-rate-button-label">
 </span>
 </media-playback-rate-button>
 <media-tooltip trigger="vjs-0AT5ugaw-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
@@ -122,37 +134,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-playback-rate-radio-group>
 </media-menu-content>
 </media-menu>
-<media-time-group class="media-time-group">
-<media-time class="media-time-toggle" type="current" toggle>
-</media-time>
-<media-time class="media-time-current-value" type="current">
-</media-time>
-<media-time-separator class="media-time-separator">
-</media-time-separator>
-<media-time class="media-time-duration-value" type="duration">
-</media-time>
-</media-time-group>
-</media-controls-group>
-<media-controls-group class="video-controls-group">
-<media-captions-button class="media-button media-captions-button" id="vjs-0AT5ugaw-0-5-trigger">
-<media-icon family="scaffold" name="captions-off" class="media-button-icon media-captions-button-off-icon">
-</media-icon>
-<media-icon family="scaffold" name="captions-on" class="media-button-icon media-captions-button-on-icon">
-</media-icon>
-</media-captions-button>
-<media-tooltip trigger="vjs-0AT5ugaw-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
-<media-tooltip-label>
-</media-tooltip-label>
-<media-tooltip-shortcut class="media-tooltip-shortcut">
-</media-tooltip-shortcut>
-</media-tooltip>
-<media-mute-button commandfor="vjs-vBvsq6ay-0-popup" class="media-button media-mute-button" id="vjs-0AT5ugaw-0-6-trigger">
+<media-mute-button commandfor="vjs-vBvsq6ay-0-popup" class="media-button media-mute-button" id="vjs-0AT5ugaw-0-5-trigger">
 <media-icon family="scaffold" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="scaffold" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-0AT5ugaw-0-6-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-tooltip-popup">
+<media-tooltip trigger="vjs-0AT5ugaw-0-5-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
@@ -168,18 +156,6 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-0AT5ugaw-0-7-trigger">
-<media-icon family="scaffold" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
-</media-icon>
-<media-icon family="scaffold" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
-</media-icon>
-</media-airplay-button>
-<media-tooltip trigger="vjs-0AT5ugaw-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
-<media-tooltip-label>
-</media-tooltip-label>
-<media-tooltip-shortcut class="media-tooltip-shortcut">
-</media-tooltip-shortcut>
-</media-tooltip>
 </media-controls-group>
 </media-controls-group>
 </div>