@videojs/html 10.0.0-rc.1 → 10.0.0-rc.2

package/dist/dev/define/ui/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":[],"sources":["../../../../src/define/ui/time.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TimeElement } from '../../ui/time/time-element';\n\nsafeDefine(TimeElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeElement.tagName]: TimeElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,WAAW"}
+{"version":3,"file":"time.js","names":[],"sources":["../../../../src/define/ui/time.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TimeElement } from '../../ui/time/element';\n\nsafeDefine(TimeElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeElement.tagName]: TimeElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,WAAW"}

package/dist/dev/define/ui/title.d.ts

@@ -1,4 +1,4 @@
-import { TitleElement } from "../../ui/title/title-element.js";
+import { TitleElement } from "../../ui/title/element.js";
 //#region src/define/ui/title.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/title.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { TitleElement } from "../../ui/title/title-element.js";
+import { TitleElement } from "../../ui/title/element.js";
 //#region src/define/ui/title.ts
 safeDefine(TitleElement);
 //#endregion

package/dist/dev/define/ui/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","names":[],"sources":["../../../../src/define/ui/title.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TitleElement } from '../../ui/title/title-element';\n\nsafeDefine(TitleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TitleElement.tagName]: TitleElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,YAAY"}
+{"version":3,"file":"title.js","names":[],"sources":["../../../../src/define/ui/title.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TitleElement } from '../../ui/title/element';\n\nsafeDefine(TitleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TitleElement.tagName]: TitleElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,YAAY"}

package/dist/dev/define/ui/tooltip-group.d.ts

@@ -1,4 +1,4 @@
-import { TooltipGroupElement } from "../../ui/tooltip/tooltip-group-element.js";
+import { TooltipGroupElement } from "../../ui/tooltip/group.js";
 //#region src/define/ui/tooltip-group.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/tooltip-group.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { TooltipGroupElement } from "../../ui/tooltip/tooltip-group-element.js";
+import { TooltipGroupElement } from "../../ui/tooltip/group.js";
 //#region src/define/ui/tooltip-group.ts
 safeDefine(TooltipGroupElement);
 //#endregion

package/dist/dev/define/ui/tooltip-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-group.js","names":[],"sources":["../../../../src/define/ui/tooltip-group.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\n\nsafeDefine(TooltipGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipGroupElement.tagName]: TooltipGroupElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,mBAAmB"}
+{"version":3,"file":"tooltip-group.js","names":[],"sources":["../../../../src/define/ui/tooltip-group.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipGroupElement } from '../../ui/tooltip/group';\n\nsafeDefine(TooltipGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipGroupElement.tagName]: TooltipGroupElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,mBAAmB"}

package/dist/dev/define/ui/tooltip-label.d.ts

@@ -1,4 +1,4 @@
-import { TooltipLabelElement } from "../../ui/tooltip/tooltip-label-element.js";
+import { TooltipLabelElement } from "../../ui/tooltip/label.js";
 //#region src/define/ui/tooltip-label.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/tooltip-label.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { TooltipLabelElement } from "../../ui/tooltip/tooltip-label-element.js";
+import { TooltipLabelElement } from "../../ui/tooltip/label.js";
 //#region src/define/ui/tooltip-label.ts
 safeDefine(TooltipLabelElement);
 //#endregion

package/dist/dev/define/ui/tooltip-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-label.js","names":[],"sources":["../../../../src/define/ui/tooltip-label.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipLabelElement } from '../../ui/tooltip/tooltip-label-element';\n\nsafeDefine(TooltipLabelElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipLabelElement.tagName]: TooltipLabelElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,mBAAmB"}
+{"version":3,"file":"tooltip-label.js","names":[],"sources":["../../../../src/define/ui/tooltip-label.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipLabelElement } from '../../ui/tooltip/label';\n\nsafeDefine(TooltipLabelElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipLabelElement.tagName]: TooltipLabelElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,mBAAmB"}

package/dist/dev/define/ui/tooltip-shortcut.d.ts

@@ -1,4 +1,4 @@
-import { TooltipShortcutElement } from "../../ui/tooltip/tooltip-shortcut-element.js";
+import { TooltipShortcutElement } from "../../ui/tooltip/shortcut.js";
 //#region src/define/ui/tooltip-shortcut.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/tooltip-shortcut.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { TooltipShortcutElement } from "../../ui/tooltip/tooltip-shortcut-element.js";
+import { TooltipShortcutElement } from "../../ui/tooltip/shortcut.js";
 //#region src/define/ui/tooltip-shortcut.ts
 safeDefine(TooltipShortcutElement);
 //#endregion

package/dist/dev/define/ui/tooltip-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/define/ui/tooltip-shortcut.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipShortcutElement } from '../../ui/tooltip/tooltip-shortcut-element';\n\nsafeDefine(TooltipShortcutElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipShortcutElement.tagName]: TooltipShortcutElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,sBAAsB"}
+{"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/define/ui/tooltip-shortcut.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipShortcutElement } from '../../ui/tooltip/shortcut';\n\nsafeDefine(TooltipShortcutElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipShortcutElement.tagName]: TooltipShortcutElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,sBAAsB"}

package/dist/dev/define/ui/tooltip.d.ts

@@ -1,4 +1,4 @@
-import { TooltipElement } from "../../ui/tooltip/tooltip-element.js";
+import { TooltipElement } from "../../ui/tooltip/element.js";
 //#region src/define/ui/tooltip.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/tooltip.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { TooltipElement } from "../../ui/tooltip/tooltip-element.js";
+import { TooltipElement } from "../../ui/tooltip/element.js";
 //#region src/define/ui/tooltip.ts
 safeDefine(TooltipElement);
 //#endregion

package/dist/dev/define/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../src/define/ui/tooltip.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipElement } from '../../ui/tooltip/tooltip-element';\n\nsafeDefine(TooltipElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipElement.tagName]: TooltipElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,cAAc"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../src/define/ui/tooltip.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { TooltipElement } from '../../ui/tooltip/element';\n\nsafeDefine(TooltipElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipElement.tagName]: TooltipElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,cAAc"}

package/dist/dev/define/ui/volume-indicator-fill.d.ts

@@ -1,4 +1,4 @@
-import { VolumeIndicatorFillElement } from "../../ui/volume-indicator/volume-indicator-fill-element.js";
+import { VolumeIndicatorFillElement } from "../../ui/volume-indicator/fill.js";
 //#region src/define/ui/volume-indicator-fill.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/volume-indicator-fill.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { VolumeIndicatorFillElement } from "../../ui/volume-indicator/volume-indicator-fill-element.js";
+import { VolumeIndicatorFillElement } from "../../ui/volume-indicator/fill.js";
 //#region src/define/ui/volume-indicator-fill.ts
 safeDefine(VolumeIndicatorFillElement);
 //#endregion

package/dist/dev/define/ui/volume-indicator-fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/define/ui/volume-indicator-fill.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeIndicatorFillElement } from '../../ui/volume-indicator/volume-indicator-fill-element';\n\nsafeDefine(VolumeIndicatorFillElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeIndicatorFillElement.tagName]: VolumeIndicatorFillElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,0BAA0B"}
+{"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/define/ui/volume-indicator-fill.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeIndicatorFillElement } from '../../ui/volume-indicator/fill';\n\nsafeDefine(VolumeIndicatorFillElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeIndicatorFillElement.tagName]: VolumeIndicatorFillElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,0BAA0B"}

package/dist/dev/define/ui/volume-indicator-value.d.ts

@@ -1,4 +1,4 @@
-import { VolumeIndicatorValueElement } from "../../ui/volume-indicator/volume-indicator-value-element.js";
+import { VolumeIndicatorValueElement } from "../../ui/volume-indicator/value.js";
 //#region src/define/ui/volume-indicator-value.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/volume-indicator-value.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { VolumeIndicatorValueElement } from "../../ui/volume-indicator/volume-indicator-value-element.js";
+import { VolumeIndicatorValueElement } from "../../ui/volume-indicator/value.js";
 //#region src/define/ui/volume-indicator-value.ts
 safeDefine(VolumeIndicatorValueElement);
 //#endregion

package/dist/dev/define/ui/volume-indicator-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/define/ui/volume-indicator-value.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeIndicatorValueElement } from '../../ui/volume-indicator/volume-indicator-value-element';\n\nsafeDefine(VolumeIndicatorValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeIndicatorValueElement.tagName]: VolumeIndicatorValueElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,2BAA2B"}
+{"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/define/ui/volume-indicator-value.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeIndicatorValueElement } from '../../ui/volume-indicator/value';\n\nsafeDefine(VolumeIndicatorValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeIndicatorValueElement.tagName]: VolumeIndicatorValueElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,2BAA2B"}

package/dist/dev/define/ui/volume-indicator.d.ts

@@ -1,4 +1,4 @@
-import { VolumeIndicatorElement } from "../../ui/volume-indicator/volume-indicator-element.js";
+import { VolumeIndicatorElement } from "../../ui/volume-indicator/element.js";
 //#region src/define/ui/volume-indicator.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/volume-indicator.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { VolumeIndicatorElement } from "../../ui/volume-indicator/volume-indicator-element.js";
+import { VolumeIndicatorElement } from "../../ui/volume-indicator/element.js";
 //#region src/define/ui/volume-indicator.ts
 safeDefine(VolumeIndicatorElement);
 //#endregion

package/dist/dev/define/ui/volume-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-indicator.js","names":[],"sources":["../../../../src/define/ui/volume-indicator.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeIndicatorElement } from '../../ui/volume-indicator/volume-indicator-element';\n\nsafeDefine(VolumeIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeIndicatorElement.tagName]: VolumeIndicatorElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,sBAAsB"}
+{"version":3,"file":"volume-indicator.js","names":[],"sources":["../../../../src/define/ui/volume-indicator.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeIndicatorElement } from '../../ui/volume-indicator/element';\n\nsafeDefine(VolumeIndicatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeIndicatorElement.tagName]: VolumeIndicatorElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,sBAAsB"}

package/dist/dev/define/ui/volume-popover.d.ts

@@ -1,4 +1,4 @@
-import { VolumePopoverElement } from "../../ui/volume-popover/volume-popover-element.js";
+import { VolumePopoverElement } from "../../ui/volume-popover/element.js";
 //#region src/define/ui/volume-popover.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/volume-popover.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { VolumePopoverElement } from "../../ui/volume-popover/volume-popover-element.js";
+import { VolumePopoverElement } from "../../ui/volume-popover/element.js";
 //#region src/define/ui/volume-popover.ts
 safeDefine(VolumePopoverElement);
 //#endregion

package/dist/dev/define/ui/volume-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-popover.js","names":[],"sources":["../../../../src/define/ui/volume-popover.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumePopoverElement } from '../../ui/volume-popover/volume-popover-element';\n\nsafeDefine(VolumePopoverElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumePopoverElement.tagName]: VolumePopoverElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,oBAAoB"}
+{"version":3,"file":"volume-popover.js","names":[],"sources":["../../../../src/define/ui/volume-popover.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumePopoverElement } from '../../ui/volume-popover/element';\n\nsafeDefine(VolumePopoverElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumePopoverElement.tagName]: VolumePopoverElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,oBAAoB"}

package/dist/dev/define/ui/volume-slider.d.ts

@@ -1,4 +1,4 @@
-import { VolumeSliderElement } from "../../ui/volume-slider/volume-slider-element.js";
+import { VolumeSliderElement } from "../../ui/volume-slider/element.js";
 //#region src/define/ui/volume-slider.d.ts
 declare global {
   interface HTMLElementTagNameMap {

package/dist/dev/define/ui/volume-slider.js

@@ -1,5 +1,5 @@
 import { safeDefine } from "../../registration/safe-define.js";
-import { VolumeSliderElement } from "../../ui/volume-slider/volume-slider-element.js";
+import { VolumeSliderElement } from "../../ui/volume-slider/element.js";
 //#region src/define/ui/volume-slider.ts
 safeDefine(VolumeSliderElement);
 //#endregion

package/dist/dev/define/ui/volume-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\n\nsafeDefine(VolumeSliderElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,mBAAmB"}
+{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { safeDefine } from '../../registration/safe-define';\nimport { VolumeSliderElement } from '../../ui/volume-slider/element';\n\nsafeDefine(VolumeSliderElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,mBAAmB"}

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

@@ -466,8 +466,6 @@ media-container {
     .media-poster {
       pointer-events: none;
       border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
       width: 100%;
       height: 100%;
       transition-property: opacity;
@@ -482,7 +480,7 @@ media-container {
       opacity: 0;
     }
 
-    .media-poster img {
+    .media-poster-image {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -492,7 +490,7 @@ media-container {
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
@@ -507,8 +505,38 @@ media-container {
     inset: 0;
   }
 
-  .media-poster > slot::slotted(img:not([src]):not([srcset])),
-  .media-poster > slot > img:not([src]):not([srcset]) {
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster {
+    pointer-events: none;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--media-duration-slower);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster-image {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-poster-image:not([src]):not([srcset]) {
     visibility: hidden;
   }
 
@@ -1116,6 +1144,26 @@ media-container {
     }
   }
 
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-popup-surface:after {
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    content: "";
+    display: none;
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="minimal"][data-preset="video"]) {
     .media-captions-button-off-icon {
       opacity: 0;
@@ -1305,6 +1353,7 @@ media-container {
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1337,6 +1386,7 @@ media-container {
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1395,6 +1445,14 @@ media-container {
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -1472,6 +1530,10 @@ media-container {
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
       min-width: calc(var(--media-spacing) * 20);
@@ -1631,6 +1693,7 @@ media-container {
       pointer-events: none;
       bottom: calc(100% + var(--media-slider-preview-offset));
       left: var(--media-preview-left, var(--media-slider-pointer));
+      max-height: var(--media-slider-preview-max-height);
       border-radius: var(--media-popup-radius);
       background-color: var(--media-backdrop);
       overflow: hidden;
@@ -1642,12 +1705,27 @@ media-container {
       }
     }
 
-    .media-slider-thumbnail:has([data-loading]) {
+    .media-slider-thumbnail[data-loading] {
       aspect-ratio: 16 / 9;
       width: var(--media-slider-preview-max-width);
     }
 
+    .media-slider-thumbnail-image {
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: block;
+    }
+
+    @scope (.media-slider-thumbnail) {
+      &[data-loading] .media-slider-thumbnail-image {
+        opacity: 0;
+      }
+    }
+
     .media-slider-thumbnail-spinner-icon {
+      z-index: 10;
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       opacity: 0;
@@ -1663,13 +1741,13 @@ media-container {
     }
 
     @scope (.media-slider-thumbnail) {
-      &:not(:has([role="img"][data-loading])) .media-slider-thumbnail-spinner-icon {
+      &:not([data-loading]) .media-slider-thumbnail-spinner-icon {
         --media-spinner-animation: none;
       }
     }
 
     @scope (.media-slider-thumbnail) {
-      &:has([role="img"][data-loading]) .media-slider-thumbnail-spinner-icon {
+      &[data-loading] .media-slider-thumbnail-spinner-icon {
         opacity: 1;
       }
     }
@@ -1801,21 +1879,92 @@ media-container {
     }
   }
 
-  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-image {
-    max-height: var(--media-slider-preview-max-height);
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-preview-content {
     max-width: var(--media-slider-preview-max-width);
-    border-radius: inherit;
+    transform-origin: bottom;
+    translate: -50% var(--media-hidden-preview-offset);
+    scale: var(--media-hidden-preview-scale) var(--media-hidden-preview-scale);
+    opacity: 0;
+    filter: blur(var(--media-hidden-blur));
+    transition-property: filter, opacity, scale;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider):has(:focus-visible)
+    .media-slider-preview-content,
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-preview)[data-pointing]
+    .media-slider-preview-content {
+    opacity: 1;
+    filter: none;
+    scale: 1;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail {
+    pointer-events: none;
+    bottom: calc(100% + var(--media-slider-preview-offset));
+    left: var(--media-preview-left, var(--media-slider-pointer));
+    max-height: var(--media-slider-preview-max-height);
+    border-radius: var(--media-popup-radius);
+    background-color: var(--media-backdrop);
+    overflow: hidden;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail {
+      background-color: color-mix(in oklab, var(--media-backdrop) 90%, transparent);
+    }
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail[data-loading] {
+    aspect-ratio: 16 / 9;
+    width: var(--media-slider-preview-max-width);
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-image {
     transition-property: opacity;
     transition-duration: 0.15s;
     transition-duration: var(--media-duration);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     display: block;
-    position: relative;
-    overflow: clip;
   }
 
-  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-image[data-loading] {
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-image {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"]) .media-slider-thumbnail-spinner-icon {
+    z-index: 10;
+    width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
     opacity: 0;
+    filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-thumbnail):not([data-loading])
+    .media-slider-thumbnail-spinner-icon {
+    --media-spinner-animation: none;
+  }
+
+  :where(.media-skin[data-theme="minimal"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-spinner-icon {
+    opacity: 1;
   }
 
   @scope (.media-skin[data-theme="minimal"][data-preset="video"]) {
@@ -2475,10 +2624,16 @@ media-container {
       opacity: 0;
     }
 
+    @container media-root (width < 20rem) {
+      .video-controls-captions-button {
+        display: none;
+      }
+    }
+
     .video-controls-content {
       inset-inline: calc(var(--media-spacing) * 1);
       bottom: calc(var(--media-spacing) * 1);
-      z-index: 20;
+      z-index: 30;
       align-items: center;
       column-gap: calc(var(--media-spacing) * 2);
       border-radius: var(--media-controls-radius);
@@ -2628,6 +2783,14 @@ media-container {
 
     .media-time-duration-value {
       font-variant-numeric: tabular-nums;
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration-slow);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .media-time-duration-value[data-unavailable] {
+      opacity: 0.5;
     }
 
     @container media-root (width >= 42rem) {
@@ -2682,6 +2845,11 @@ media-container {
       outline-color: var(--media-ring);
     }
 
+    .media-time-toggle[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     @supports (corner-shape: squircle) {
       .media-time-toggle {
         corner-shape: squircle;
@@ -2738,7 +2906,7 @@ media-container {
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);