@videojs/html 10.2.0 → 10.4.0

package/dist/default/ui/radio-options/controller.js

@@ -4,6 +4,7 @@ import { MenuItemIndicatorElement } from "../menu/item-indicator.js";
 import { applyElementProps } from "@videojs/core/dom";
 import { translateText } from "@videojs/core/i18n";
 import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/radio-options/controller.ts
 /** Renders normalized options into menu radio items and manages their interaction lifecycle. */
 var RadioOptionsController = class {
@@ -37,14 +38,12 @@ var RadioOptionsController = class {
 		const template = getTemplateElement(this.#host);
 		const templateRoot = template ? getTemplateRoot(template) : null;
 		const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;
-		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
+		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${cacheKey(option.ariaLabel ?? "", option.ariaLabelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
 		if (contentKey !== this.#contentKey || translator !== this.#translator) {
 			this.#contentKey = contentKey;
 			this.#translator = translator;
-			for (const child of [...this.#host.children]) {
-				if (child === template) continue;
-				child.remove();
-			}
+			const staleChildren = [...this.#host.children].filter((child) => child !== template);
+			const focusedValue = this.#getFocusedItem()?.value;
 			const items = state.options.map((option) => {
 				const item = itemRoot ? cloneTemplateRoot(itemRoot, this.#host.ownerDocument) : this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName);
 				item.value = option.value;
@@ -52,9 +51,19 @@ var RadioOptionsController = class {
 				const label = translateText(option.label, translator, option.labelParams);
 				if (this.#config.renderItem) this.#config.renderItem(item, label, option);
 				else this.#setItemLabel(item, label);
+				if (!isUndefined(option.ariaLabel)) item.setAttribute("aria-label", translateText(option.ariaLabel, translator, option.ariaLabelParams));
 				return item;
 			});
 			this.#host.append(...items);
+			const removeStale = () => {
+				for (const child of staleChildren) child.remove();
+			};
+			const replacement = isUndefined(focusedValue) ? void 0 : items.find((item) => item.value === focusedValue) ?? items.find((item) => item.value === state.value);
+			if (replacement) replacement.updateComplete.then(() => {
+				replacement.focus();
+				removeStale();
+			});
+			else removeStale();
 		}
 		const optionsByValue = new Map(state.options.map((option) => [option.value, option]));
 		for (const item of this.#host.querySelectorAll(MenuRadioItemElement.tagName)) {
@@ -69,6 +78,10 @@ var RadioOptionsController = class {
 		const { value } = event.detail;
 		this.#config.onValueChange(value);
 	};
+	#getFocusedItem() {
+		const active = this.#host.getRootNode().activeElement;
+		return active instanceof MenuRadioItemElement && active.parentElement === this.#host ? active : null;
+	}
 	#setItemLabel(item, label) {
 		const labelPart = item.querySelector("[data-part~=\"label\"]");
 		if (labelPart) labelPart.textContent = label;

package/dist/default/ui/time-slider/markers.js

@@ -0,0 +1,160 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { UIElement } from "../ui-element.js";
+import { sliderContext } from "../slider/context.js";
+import { TimeSliderMarkerCSSVars, TimeSliderMarkerDataAttrs, TimeSliderMarkersCore, getActiveTextCues, getTextCues } from "@videojs/core";
+import { applyStateDataAttrs, selectBuffer, selectTextCues, selectTime } from "@videojs/core/dom";
+import { getTimeRangeEnd } from "@videojs/media";
+import { ContextConsumer } from "@videojs/element/context";
+import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+import { isNil } from "@videojs/utils/predicate";
+//#region src/ui/time-slider/markers.ts
+/**
+* Draws a marker on the time slider for each cue on the text tracks a filter matches, such as ad breaks. Pick tracks
+* with the `kind`, `label`, and `language` attributes, or with the `filter` property; with neither, nothing is drawn.
+* The store reads the matching tracks while the element is connected, so tracks it doesn't read by default work too.
+*
+* Each marker clones the light-DOM template, which must contain exactly one HTML root element, or is a `<div>` without
+* one. Markers are decorative: the slider's own value is what assistive technology reads.
+*/
+var TimeSliderMarkersElement = class extends UIElement {
+	static {
+		this.tagName = "media-time-slider-markers";
+	}
+	static {
+		this.properties = {
+			kind: { type: String },
+			label: { type: String },
+			language: { type: String }
+		};
+	}
+	#core = new TimeSliderMarkersCore();
+	#slider = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#textCues = new PlayerController(this, playerContext, selectTextCues);
+	#time = new PlayerController(this, playerContext, selectTime);
+	#buffer = new PlayerController(this, playerContext, selectBuffer);
+	#rendered = /* @__PURE__ */ new Map();
+	#filter;
+	#attributeFilter;
+	#watching = null;
+	#templateRoot = null;
+	#templateChecked = false;
+	/**
+	* Picks the tracks whose cues are drawn: a filter object, a function, or a track definition. Takes priority over the
+	* `kind`, `label`, and `language` attributes. Set as a JavaScript property; it has no attribute.
+	*/
+	get filter() {
+		return this.#filter;
+	}
+	set filter(value) {
+		this.#filter = value;
+		this.requestUpdate();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-hidden", "true");
+	}
+	disconnectedCallback() {
+		this.#unwatch();
+		super.disconnectedCallback();
+	}
+	destroyCallback() {
+		this.#unwatch();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("kind") || changed.has("label") || changed.has("language")) this.#attributeFilter = this.#getAttributeFilter();
+		this.#watch(this.#getFilter());
+	}
+	update(changed) {
+		super.update(changed);
+		const slider = this.#slider.value;
+		const templateRoot = this.#getTemplateRoot();
+		if (!slider) return;
+		applyStateDataAttrs(this, slider.state, slider.stateAttrMap);
+		const filter = this.#getFilter();
+		const textCues = this.#textCues.value;
+		const time = this.#time.value;
+		const max = getTimeRangeEnd({
+			duration: time?.duration ?? 0,
+			seekable: this.#buffer.value?.seekable ?? []
+		});
+		const markers = filter && textCues ? this.#core.getMarkers({
+			cues: getTextCues(textCues, filter),
+			activeCues: getActiveTextCues(textCues, filter),
+			min: 0,
+			max,
+			orientation: slider.state.orientation
+		}) : [];
+		const next = /* @__PURE__ */ new Map();
+		for (const marker of markers) {
+			const root = this.#rendered.get(marker.key) ?? this.#createMarker(templateRoot);
+			root.style.setProperty(TimeSliderMarkerCSSVars.start, marker.startPercent);
+			root.style.setProperty(TimeSliderMarkerCSSVars.end, marker.endPercent);
+			root.style.setProperty(TimeSliderMarkerCSSVars.width, marker.width ?? marker.height ?? "0%");
+			applyStateDataAttrs(root, slider.state, slider.stateAttrMap);
+			applyStateDataAttrs(root, marker, TimeSliderMarkerDataAttrs);
+			next.set(marker.key, root);
+		}
+		for (const [key, root] of this.#rendered) if (!next.has(key)) root.remove();
+		let before = null;
+		for (const root of [...next.values()].reverse()) {
+			if (root.parentNode !== this || root.nextSibling !== before) this.insertBefore(root, before);
+			before = root;
+		}
+		this.#rendered.clear();
+		for (const [key, rendered] of next) this.#rendered.set(key, rendered);
+	}
+	#getFilter() {
+		return this.#filter ?? this.#attributeFilter;
+	}
+	/** A filter from the attributes that are present, or none when no attribute is. */
+	#getAttributeFilter() {
+		const { kind, label, language } = this;
+		if (isNil(kind) && isNil(label) && isNil(language)) return void 0;
+		return {
+			kind: kind ?? void 0,
+			label: label ?? void 0,
+			language: language ?? void 0
+		};
+	}
+	/** Ask the store to read the tracks the filter matches while the element is connected. */
+	#watch(filter) {
+		const watch = this.isConnected ? this.#textCues.value?.watchTextCues : void 0;
+		if (this.#watching?.watch === watch && this.#watching?.filter === filter) return;
+		this.#unwatch();
+		if (watch && filter) this.#watching = {
+			watch,
+			filter,
+			stop: watch(filter)
+		};
+	}
+	#unwatch() {
+		this.#watching?.stop();
+		this.#watching = null;
+	}
+	#createMarker(templateRoot) {
+		return templateRoot ? cloneTemplateRoot(templateRoot, this.ownerDocument) : this.ownerDocument.createElement("div");
+	}
+	/** The template's root, found once; until there is a template, other content is cleared and markers are `<div>`s. */
+	#getTemplateRoot() {
+		if (this.#templateChecked) return this.#templateRoot;
+		const template = getTemplateElement(this);
+		const rendered = new Set(this.#rendered.values());
+		for (const node of [...this.childNodes]) if (node !== template && !rendered.has(node)) node.remove();
+		if (!template) return null;
+		this.#templateChecked = true;
+		for (const node of rendered) node.remove();
+		this.#rendered.clear();
+		const root = getTemplateRoot(template);
+		if (root?.namespaceURI !== "http://www.w3.org/1999/xhtml") return null;
+		this.#templateRoot = root;
+		return this.#templateRoot;
+	}
+};
+//#endregion
+export { TimeSliderMarkersElement };

package/dist/default/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.2.0";
+		return "10.4.0";
 	} catch {}
 	return "UNKNOWN";
 };

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

@@ -226,7 +226,11 @@ media-container video::-webkit-media-text-track-container {
 
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop {
     z-index: 40;
+    transition-property: opacity;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration-slower);
     background-color: #000000bf;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;
   }
@@ -235,6 +239,18 @@ media-container video::-webkit-media-text-track-container {
     display: none;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop[data-ending-style] {
+    transition-duration: var(--media-duration);
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style]) {
+    opacity: 0;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -259,8 +275,12 @@ media-container video::-webkit-media-text-track-container {
     background-color: var(--media-popover);
     padding: calc(var(--media-spacing) * 5);
     color: var(--media-popover-foreground);
+    transition-property: opacity, scale;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration-slower);
     border-radius: .5rem;
     outline-style: none;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
     display: grid;
     position: absolute;
     top: 50%;
@@ -280,6 +300,15 @@ media-container video::-webkit-media-text-track-container {
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup[data-ending-style] {
+    transition-duration: var(--media-duration);
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - 2rem);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -292,6 +321,11 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-popup:is([data-starting-style], [data-ending-style]) {
+    scale: var(--media-hidden-popup-scale) var(--media-hidden-popup-scale);
+    opacity: 0;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-dialog-title {
     font-size: 1.125rem;
     font-weight: 700;
@@ -934,11 +968,15 @@ media-container video::-webkit-media-text-track-container {
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop {
     pointer-events: none;
     z-index: 10;
-    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
+    background-image: var(--media-controls-gradient);
     position: absolute;
     inset: 0;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering):not([data-visible]) .video-controls-backdrop:not([data-visible]) {
     display: none;
   }
@@ -1007,7 +1045,7 @@ media-container video::-webkit-media-text-track-container {
     transition-duration: .15s;
     transition-duration: var(--media-duration-instant);
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
-    display: none;
+    display: flex;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -1053,24 +1091,18 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
-  @container media-root (width >= 22.5rem) {
-    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center {
-      display: flex;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-button {
     background-color: #0006 !important;
   }
 
   @media (hover: hover) {
     :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-button:hover {
-      background-color: #000000d9 !important;
+      background-color: #0009 !important;
     }
   }
 
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-button:focus-visible, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-button[aria-expanded="true"] {
-    background-color: #000000d9 !important;
+    background-color: #0009 !important;
   }
 
   @media (forced-colors: active) {
@@ -1110,11 +1142,25 @@ media-container video::-webkit-media-text-track-container {
     height: calc(var(--media-spacing) * 14.5) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 10) !important;
+      height: calc(var(--media-spacing) * 10) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-play-icon {
     width: calc(var(--media-spacing) * 7) !important;
     height: calc(var(--media-spacing) * 7) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5) !important;
+      height: calc(var(--media-spacing) * 5) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-content {
     pointer-events: none;
     z-index: 30;
@@ -1161,6 +1207,10 @@ media-container video::-webkit-media-text-track-container {
     position: absolute;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-top:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-content):not([data-visible]) .video-controls-top {
     pointer-events: none;
     opacity: 0;
@@ -1215,6 +1265,16 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-top:not([data-started]) {
+      opacity: 0;
+    }
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-video-bottom {
       padding-inline: calc(var(--media-spacing) * 2);
@@ -1225,6 +1285,12 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+      opacity: 0;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-time-current-value {
     display: none;
   }
@@ -1358,6 +1424,10 @@ media-container video::-webkit-media-text-track-container {
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -1380,6 +1450,20 @@ media-container video::-webkit-media-text-track-container {
     font-variant-numeric: tabular-nums;
   }
 
+  @supports not (text-fit: shrink) {
+    :where(.media-skin[data-theme="compat"][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="compat"][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="compat"][data-preset="audio"]) .media-menu-content {
     overscroll-behavior: none;
     max-height: 100%;
@@ -1540,7 +1624,6 @@ media-container video::-webkit-media-text-track-container {
   }
 
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-audio, :where(.media-skin[data-theme="compat"][data-preset="audio"]).media-audio {
-    aspect-ratio: auto;
     background-color: var(--media-background);
     box-shadow: 0 0 #0000,
       0 0 #0000,
@@ -1553,6 +1636,9 @@ media-container video::-webkit-media-text-track-container {
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-container, :where(.media-skin[data-theme="compat"][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, "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1582,45 +1668,56 @@ media-container video::-webkit-media-text-track-container {
     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;
 
 @layer base.theme {
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --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-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --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-shadow-subtle-current-color: 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);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -1657,16 +1754,31 @@ media-container video::-webkit-media-text-track-container {
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
 
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
+
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
 
@@ -1713,19 +1825,20 @@ media-container video::-webkit-media-text-track-container {
 
 @layer base.preset {
   .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
-    --media-background: oklch(100% 0 0);
-    --media-foreground: oklch(0% 0 0);
-    --media-controls: oklch(100% 0 0 / .5);
+    --media-background: #fff;
+    --media-foreground: #000;
+    --media-controls: #ffffff80;
     --media-controls-foreground: var(--media-foreground);
     --media-popover: var(--media-controls);
     --media-popover-foreground: var(--media-foreground);
-    --media-surface-border: oklch(0% 0 0 / .05);
+    --media-muted: #0000001a;
+    --media-surface-border: #0000000d;
     --media-primary: var(--media-accent-color, var(--media-foreground));
-    --media-border: oklch(0% 0 0 / .1);
+    --media-border: #0000001a;
     --media-ring: var(--media-foreground);
-    --media-default-accent-color: oklch(0% 0 0);
-    --media-default-accent-text-color: oklch(100% 0 0);
-    --media-internal-accent-text-fallback: oklch(100% 0 0);
+    --media-default-accent-color: #000;
+    --media-default-accent-text-color: #fff;
+    --media-internal-accent-text-fallback: #fff;
     --media-popover-boundary-offset: calc(var(--media-spacing) * 2);
     --media-popover-side-offset: calc(var(--media-spacing) * 3);
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10);
@@ -1737,6 +1850,7 @@ media-container video::-webkit-media-text-track-container {
       --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));
@@ -1753,7 +1867,7 @@ media-container video::-webkit-media-text-track-container {
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin:is([data-preset="audio"], [data-preset="live-audio"]) {
       --media-controls: var(--media-background);
-      --media-surface-border: oklch(0% 0 0 / .05);
+      --media-surface-border: #0000000d;
     }
 
     @supports (color: light-dark(red, red)) {
@@ -1921,7 +2035,7 @@ media-container video::-webkit-media-text-track-container {
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -1929,6 +2043,12 @@ media-container video::-webkit-media-text-track-container {
       scrollbar-width: auto;
     }
 
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
+
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);