@mux/mux-player 3.3.3-canary.0 → 3.3.3-canary.2

package/dist/themes/microvideo/index.js

@@ -106,7 +106,7 @@ var mediaThemeMicrovideo = (() => {
     {}
   );
   var AdditionalStateChangeEvents = {
-    USER_INACTIVE: "userinactivechange",
+    USER_INACTIVE_CHANGE: "userinactivechange",
     BREAKPOINTS_CHANGE: "breakpointchange",
     BREAKPOINTS_COMPUTED: "breakpointscomputed"
   };
@@ -369,16 +369,17 @@ var mediaThemeMicrovideo = (() => {
   };
 
   // ../../node_modules/media-chrome/dist/utils/i18n.js
+  var _a;
   var translationsLanguages = {
     en: En
   };
-  var getBrowserLanguage = () => {
-    var _a3;
-    return ((_a3 = globalThis.navigator) == null ? void 0 : _a3.language.split("-")[0]) || "en";
+  var currentLanguage = ((_a = globalThis.navigator) == null ? void 0 : _a.language.split("-")[0]) || "en";
+  var setLanguage = (langCode) => {
+    currentLanguage = langCode;
   };
   var t = (key, variables = {}) => {
-    var _a3;
-    const result = ((_a3 = translationsLanguages[getBrowserLanguage()]) == null ? void 0 : _a3[key]) || En[key];
+    var _a22;
+    const result = ((_a22 = translationsLanguages[currentLanguage]) == null ? void 0 : _a22[key]) || En[key];
     return result.replace(
       /\{(\w+)\}/g,
       (_, varName) => variables[varName] !== void 0 ? String(variables[varName]) : `{${varName}}`
@@ -519,15 +520,15 @@ var mediaThemeMicrovideo = (() => {
     return obj;
   }
   function getMediaController(host) {
-    var _a3;
-    return (_a3 = getAttributeMediaController(host)) != null ? _a3 : closestComposedNode(host, "media-controller");
+    var _a4;
+    return (_a4 = getAttributeMediaController(host)) != null ? _a4 : closestComposedNode(host, "media-controller");
   }
   function getAttributeMediaController(host) {
-    var _a3;
+    var _a4;
     const { MEDIA_CONTROLLER } = MediaStateReceiverAttributes;
     const mediaControllerId = host.getAttribute(MEDIA_CONTROLLER);
     if (mediaControllerId) {
-      return (_a3 = getDocumentOrShadowRoot(host)) == null ? void 0 : _a3.getElementById(
+      return (_a4 = getDocumentOrShadowRoot(host)) == null ? void 0 : _a4.getElementById(
         mediaControllerId
       );
     }
@@ -568,15 +569,15 @@ var mediaThemeMicrovideo = (() => {
     );
   };
   function getActiveElement(root = document) {
-    var _a3;
+    var _a4;
     const activeEl = root == null ? void 0 : root.activeElement;
     if (!activeEl)
       return null;
-    return (_a3 = getActiveElement(activeEl.shadowRoot)) != null ? _a3 : activeEl;
+    return (_a4 = getActiveElement(activeEl.shadowRoot)) != null ? _a4 : activeEl;
   }
   function getDocumentOrShadowRoot(node) {
-    var _a3;
-    const rootNode = (_a3 = node == null ? void 0 : node.getRootNode) == null ? void 0 : _a3.call(node);
+    var _a4;
+    const rootNode = (_a4 = node == null ? void 0 : node.getRootNode) == null ? void 0 : _a4.call(node);
     if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
       return rootNode;
     }
@@ -601,16 +602,13 @@ var mediaThemeMicrovideo = (() => {
     return true;
   }
   function getPointProgressOnLine(x, y, p1, p2) {
-    const segment = distance(p1, p2);
-    const toStart = distance(p1, { x, y });
-    const toEnd = distance(p2, { x, y });
-    if (toStart > segment || toEnd > segment) {
-      return toStart > toEnd ? 1 : 0;
-    }
-    return toStart / segment;
-  }
-  function distance(p1, p2) {
-    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0)
+      return 0;
+    const projection = ((x - p1.x) * dx + (y - p1.y) * dy) / lengthSquared;
+    return Math.max(0, Math.min(1, projection));
   }
   function getOrInsertCSSRule(styleParent, selectorText) {
     const cssRule = getCSSRule(styleParent, (st) => st === selectorText);
@@ -619,9 +617,9 @@ var mediaThemeMicrovideo = (() => {
     return insertCSSRule(styleParent, selectorText);
   }
   function getCSSRule(styleParent, predicate) {
-    var _a3, _b2;
+    var _a4, _b2;
     let style;
-    for (style of (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : []) {
+    for (style of (_a4 = styleParent.querySelectorAll("style:not([media])")) != null ? _a4 : []) {
       let cssRules;
       try {
         cssRules = (_b2 = style.sheet) == null ? void 0 : _b2.cssRules;
@@ -635,8 +633,8 @@ var mediaThemeMicrovideo = (() => {
     }
   }
   function insertCSSRule(styleParent, selectorText) {
-    var _a3, _b2;
-    const styles = (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : [];
+    var _a4, _b2;
+    const styles = (_a4 = styleParent.querySelectorAll("style:not([media])")) != null ? _a4 : [];
     const style = styles == null ? void 0 : styles[styles.length - 1];
     if (!(style == null ? void 0 : style.sheet)) {
       console.warn(
@@ -690,8 +688,8 @@ var mediaThemeMicrovideo = (() => {
     el.toggleAttribute(attrName, value);
   }
   function getStringAttr(el, attrName, defaultValue = null) {
-    var _a3;
-    return (_a3 = el.getAttribute(attrName)) != null ? _a3 : defaultValue;
+    var _a4;
+    return (_a4 = el.getAttribute(attrName)) != null ? _a4 : defaultValue;
   }
   function setStringAttr(el, attrName, value) {
     if (value == null) {
@@ -762,10 +760,10 @@ var mediaThemeMicrovideo = (() => {
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet(this, _mediaController)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet(this, _mediaController)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet(this, _mediaController, null);
         }
         if (newValue && this.isConnected) {
@@ -775,28 +773,28 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      var _a3, _b2, _c, _d;
+      var _a4, _b2, _c, _d;
       this.tabIndex = -1;
       this.setAttribute("aria-hidden", "true");
       __privateSet(this, _mediaController, getMediaControllerEl(this));
       if (this.getAttribute(MediaStateReceiverAttributes.MEDIA_CONTROLLER)) {
-        (_b2 = (_a3 = __privateGet(this, _mediaController)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
+        (_b2 = (_a4 = __privateGet(this, _mediaController)) == null ? void 0 : _a4.associateElement) == null ? void 0 : _b2.call(_a4, this);
       }
       (_c = __privateGet(this, _mediaController)) == null ? void 0 : _c.addEventListener("pointerdown", this);
       (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.addEventListener("click", this);
     }
     disconnectedCallback() {
-      var _a3, _b2, _c, _d;
+      var _a4, _b2, _c, _d;
       if (this.getAttribute(MediaStateReceiverAttributes.MEDIA_CONTROLLER)) {
-        (_b2 = (_a3 = __privateGet(this, _mediaController)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+        (_b2 = (_a4 = __privateGet(this, _mediaController)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       }
       (_c = __privateGet(this, _mediaController)) == null ? void 0 : _c.removeEventListener("pointerdown", this);
       (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.removeEventListener("click", this);
       __privateSet(this, _mediaController, null);
     }
     handleEvent(event) {
-      var _a3;
-      const composedTarget = (_a3 = event.composedPath()) == null ? void 0 : _a3[0];
+      var _a4;
+      const composedTarget = (_a4 = event.composedPath()) == null ? void 0 : _a4[0];
       const allowList = ["video", "media-controller"];
       if (!allowList.includes(composedTarget == null ? void 0 : composedTarget.localName))
         return;
@@ -850,12 +848,12 @@ var mediaThemeMicrovideo = (() => {
   };
   _mediaController = /* @__PURE__ */ new WeakMap();
   function getMediaControllerEl(controlEl) {
-    var _a3;
+    var _a4;
     const mediaControllerId = controlEl.getAttribute(
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
     );
     if (mediaControllerId) {
-      return (_a3 = controlEl.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId);
+      return (_a4 = controlEl.getRootNode()) == null ? void 0 : _a4.getElementById(mediaControllerId);
     }
     return closestComposedNode(controlEl, "media-controller");
   }
@@ -915,7 +913,8 @@ var mediaThemeMicrovideo = (() => {
     GESTURES_DISABLED: "gesturesdisabled",
     KEYBOARD_CONTROL: "keyboardcontrol",
     NO_AUTOHIDE: "noautohide",
-    USER_INACTIVE: "userinactive"
+    USER_INACTIVE: "userinactive",
+    AUTOHIDE_OVER_CONTROLS: "autohideovercontrols"
   };
   var template2 = Document2.createElement("template");
   template2.innerHTML = /*html*/
@@ -1046,10 +1045,16 @@ var mediaThemeMicrovideo = (() => {
       transition: var(--media-control-transition-out, opacity 1s);
     }
 
-    :host([${Attributes.USER_INACTIVE}]:not([${MediaUIAttributes.MEDIA_PAUSED}]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) ::slotted([slot=media]) {
+    :host([${Attributes.USER_INACTIVE}]:not([${Attributes.NO_AUTOHIDE}]):not([${MediaUIAttributes.MEDIA_PAUSED}]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) ::slotted([slot=media]) {
       cursor: none;
     }
 
+    :host([${Attributes.USER_INACTIVE}][${Attributes.AUTOHIDE_OVER_CONTROLS}]:not([${Attributes.NO_AUTOHIDE}]):not([${MediaUIAttributes.MEDIA_PAUSED}]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) * {
+     --media-cursor: none;
+     cursor: none;
+    }
+
+
     ::slotted(media-control-bar)  {
       align-self: stretch;
     }
@@ -1092,10 +1097,10 @@ var mediaThemeMicrovideo = (() => {
     setBreakpoints(entry.target, entry.contentRect.width);
   }
   function setBreakpoints(container, width) {
-    var _a3;
+    var _a4;
     if (!container.isConnected)
       return;
-    const breakpoints = (_a3 = container.getAttribute(Attributes.BREAKPOINTS)) != null ? _a3 : defaultBreakpoints;
+    const breakpoints = (_a4 = container.getAttribute(Attributes.BREAKPOINTS)) != null ? _a4 : defaultBreakpoints;
     const ranges = createBreakpointMap(breakpoints);
     const activeBreakpoints = getBreakpoints(ranges, width);
     let changed = false;
@@ -1218,7 +1223,7 @@ var mediaThemeMicrovideo = (() => {
       this.mediaSetCallback(media);
     }
     connectedCallback() {
-      var _a3;
+      var _a4;
       __privateGet2(this, _mutationObserver).observe(this, { childList: true, subtree: true });
       observeResize(this, __privateGet2(this, _handleResize));
       const isAudioChrome = this.getAttribute(Attributes.AUDIO) != null;
@@ -1233,16 +1238,16 @@ var mediaThemeMicrovideo = (() => {
       this.addEventListener("pointerup", this);
       this.addEventListener("mouseleave", this);
       this.addEventListener("keyup", this);
-      (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("mouseup", this);
+      (_a4 = GlobalThis.window) == null ? void 0 : _a4.addEventListener("mouseup", this);
     }
     disconnectedCallback() {
-      var _a3;
+      var _a4;
       __privateGet2(this, _mutationObserver).disconnect();
       unobserveResize(this, __privateGet2(this, _handleResize));
       if (this.media) {
         this.mediaUnsetCallback(this.media);
       }
-      (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("mouseup", this);
+      (_a4 = GlobalThis.window) == null ? void 0 : _a4.removeEventListener("mouseup", this);
     }
     /**
      * @abstract
@@ -1312,6 +1317,12 @@ var mediaThemeMicrovideo = (() => {
     set noAutohide(value) {
       setBooleanAttr(this, Attributes.NO_AUTOHIDE, value);
     }
+    get autohideOverControls() {
+      return getBooleanAttr(this, Attributes.AUTOHIDE_OVER_CONTROLS);
+    }
+    set autohideOverControls(value) {
+      setBooleanAttr(this, Attributes.AUTOHIDE_OVER_CONTROLS, value);
+    }
     get userInteractive() {
       return getBooleanAttr(this, Attributes.USER_INACTIVE);
     }
@@ -1366,7 +1377,10 @@ var mediaThemeMicrovideo = (() => {
     }
     __privateMethod(this, _setActive, setActive_fn).call(this);
     clearTimeout(__privateGet2(this, _inactiveTimeout));
-    if ([this, this.media].includes(event.target)) {
+    const autohideOverControls = this.hasAttribute(
+      Attributes.AUTOHIDE_OVER_CONTROLS
+    );
+    if ([this, this.media].includes(event.target) || autohideOverControls) {
       __privateMethod(this, _scheduleInactive, scheduleInactive_fn).call(this);
     }
   };
@@ -1395,7 +1409,7 @@ var mediaThemeMicrovideo = (() => {
       return;
     this.setAttribute(Attributes.USER_INACTIVE, "");
     const evt = new GlobalThis.CustomEvent(
-      MediaStateChangeEvents.USER_INACTIVE,
+      MediaStateChangeEvents.USER_INACTIVE_CHANGE,
       { composed: true, bubbles: true, detail: true }
     );
     this.dispatchEvent(evt);
@@ -1406,7 +1420,7 @@ var mediaThemeMicrovideo = (() => {
       return;
     this.removeAttribute(Attributes.USER_INACTIVE);
     const evt = new GlobalThis.CustomEvent(
-      MediaStateChangeEvents.USER_INACTIVE,
+      MediaStateChangeEvents.USER_INACTIVE_CHANGE,
       { composed: true, bubbles: true, detail: false }
     );
     this.dispatchEvent(evt);
@@ -1469,15 +1483,15 @@ var mediaThemeMicrovideo = (() => {
       return __privateGet3(this, _tokens, tokens_get).size;
     }
     get value() {
-      var _a3;
-      return (_a3 = [...__privateGet3(this, _tokens, tokens_get)].join(" ")) != null ? _a3 : "";
+      var _a4;
+      return (_a4 = [...__privateGet3(this, _tokens, tokens_get)].join(" ")) != null ? _a4 : "";
     }
     set value(val) {
-      var _a3;
+      var _a4;
       if (val === this.value)
         return;
       __privateSet3(this, _tokenSet, /* @__PURE__ */ new Set());
-      this.add(...(_a3 = val == null ? void 0 : val.split(" ")) != null ? _a3 : []);
+      this.add(...(_a4 = val == null ? void 0 : val.split(" ")) != null ? _a4 : []);
     }
     toString() {
       return this.value;
@@ -1492,17 +1506,17 @@ var mediaThemeMicrovideo = (() => {
       __privateGet3(this, _tokens, tokens_get).forEach(callback, thisArg);
     }
     add(...tokens) {
-      var _a3, _b2;
+      var _a4, _b2;
       tokens.forEach((t2) => __privateGet3(this, _tokenSet).add(t2));
-      if (this.value === "" && !((_a3 = __privateGet3(this, _el)) == null ? void 0 : _a3.hasAttribute(`${__privateGet3(this, _attr)}`))) {
+      if (this.value === "" && !((_a4 = __privateGet3(this, _el)) == null ? void 0 : _a4.hasAttribute(`${__privateGet3(this, _attr)}`))) {
         return;
       }
       (_b2 = __privateGet3(this, _el)) == null ? void 0 : _b2.setAttribute(`${__privateGet3(this, _attr)}`, `${this.value}`);
     }
     remove(...tokens) {
-      var _a3;
+      var _a4;
       tokens.forEach((t2) => __privateGet3(this, _tokenSet).delete(t2));
-      (_a3 = __privateGet3(this, _el)) == null ? void 0 : _a3.setAttribute(`${__privateGet3(this, _attr)}`, `${this.value}`);
+      (_a4 = __privateGet3(this, _el)) == null ? void 0 : _a4.setAttribute(`${__privateGet3(this, _attr)}`, `${this.value}`);
     }
     contains(token) {
       return __privateGet3(this, _tokens, tokens_get).has(token);
@@ -1608,18 +1622,18 @@ var mediaThemeMicrovideo = (() => {
     return Array.from(media.textTracks).filter(filterPred);
   };
   var areSubsOn = (el) => {
-    var _a3;
-    const showingSubtitles = !!((_a3 = el.mediaSubtitlesShowing) == null ? void 0 : _a3.length) || el.hasAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
+    var _a4;
+    const showingSubtitles = !!((_a4 = el.mediaSubtitlesShowing) == null ? void 0 : _a4.length) || el.hasAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
     return showingSubtitles;
   };
 
   // ../../node_modules/media-chrome/dist/utils/fullscreen-api.js
   var enterFullscreen = (stateOwners) => {
-    var _a3;
+    var _a4;
     const { media, fullscreenElement } = stateOwners;
     const enterFullscreenKey = fullscreenElement && "requestFullscreen" in fullscreenElement ? "requestFullscreen" : fullscreenElement && "webkitRequestFullScreen" in fullscreenElement ? "webkitRequestFullScreen" : void 0;
     if (enterFullscreenKey) {
-      const maybePromise = (_a3 = fullscreenElement[enterFullscreenKey]) == null ? void 0 : _a3.call(fullscreenElement);
+      const maybePromise = (_a4 = fullscreenElement[enterFullscreenKey]) == null ? void 0 : _a4.call(fullscreenElement);
       if (maybePromise instanceof Promise) {
         return maybePromise.catch(() => {
         });
@@ -1632,10 +1646,10 @@ var mediaThemeMicrovideo = (() => {
   };
   var exitFullscreenKey = "exitFullscreen" in Document2 ? "exitFullscreen" : "webkitExitFullscreen" in Document2 ? "webkitExitFullscreen" : "webkitCancelFullScreen" in Document2 ? "webkitCancelFullScreen" : void 0;
   var exitFullscreen = (stateOwners) => {
-    var _a3;
+    var _a4;
     const { documentElement } = stateOwners;
     if (exitFullscreenKey) {
-      const maybePromise = (_a3 = documentElement == null ? void 0 : documentElement[exitFullscreenKey]) == null ? void 0 : _a3.call(documentElement);
+      const maybePromise = (_a4 = documentElement == null ? void 0 : documentElement[exitFullscreenKey]) == null ? void 0 : _a4.call(documentElement);
       if (maybePromise instanceof Promise) {
         return maybePromise.catch(() => {
         });
@@ -1652,7 +1666,7 @@ var mediaThemeMicrovideo = (() => {
     return docFullscreenElement;
   };
   var isFullscreen = (stateOwners) => {
-    var _a3;
+    var _a4;
     const { media, documentElement, fullscreenElement = media } = stateOwners;
     if (!media || !documentElement)
       return false;
@@ -1675,7 +1689,7 @@ var mediaThemeMicrovideo = (() => {
       while (currentRoot == null ? void 0 : currentRoot[fullscreenElementKey]) {
         if (currentRoot[fullscreenElementKey] === fullscreenElement)
           return true;
-        currentRoot = (_a3 = currentRoot[fullscreenElementKey]) == null ? void 0 : _a3.shadowRoot;
+        currentRoot = (_a4 = currentRoot[fullscreenElementKey]) == null ? void 0 : _a4.shadowRoot;
       }
     }
     return false;
@@ -1689,10 +1703,10 @@ var mediaThemeMicrovideo = (() => {
   // ../../node_modules/media-chrome/dist/utils/platform-tests.js
   var testMediaEl;
   var getTestMediaEl = () => {
-    var _a3, _b2;
+    var _a4, _b2;
     if (testMediaEl)
       return testMediaEl;
-    testMediaEl = (_b2 = (_a3 = Document2) == null ? void 0 : _a3.createElement) == null ? void 0 : _b2.call(_a3, "video");
+    testMediaEl = (_b2 = (_a4 = Document2) == null ? void 0 : _a4.createElement) == null ? void 0 : _b2.call(_a4, "video");
     return testMediaEl;
   };
   var hasVolumeSupportAsync = async (mediaEl = getTestMediaEl()) => {
@@ -1858,55 +1872,55 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaErrorCode: {
       get(stateOwners, event) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
         if ((event == null ? void 0 : event.type) === "playing")
           return;
-        return (_a3 = media == null ? void 0 : media.error) == null ? void 0 : _a3.code;
+        return (_a4 = media == null ? void 0 : media.error) == null ? void 0 : _a4.code;
       },
       mediaEvents: ["emptied", "error", "playing"]
     },
     mediaErrorMessage: {
       get(stateOwners, event) {
-        var _a3, _b2;
+        var _a4, _b2;
         const { media } = stateOwners;
         if ((event == null ? void 0 : event.type) === "playing")
           return;
-        return (_b2 = (_a3 = media == null ? void 0 : media.error) == null ? void 0 : _a3.message) != null ? _b2 : "";
+        return (_b2 = (_a4 = media == null ? void 0 : media.error) == null ? void 0 : _a4.message) != null ? _b2 : "";
       },
       mediaEvents: ["emptied", "error", "playing"]
     },
     mediaWidth: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.videoWidth) != null ? _a3 : 0;
+        return (_a4 = media == null ? void 0 : media.videoWidth) != null ? _a4 : 0;
       },
       mediaEvents: ["resize"]
     },
     mediaHeight: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.videoHeight) != null ? _a3 : 0;
+        return (_a4 = media == null ? void 0 : media.videoHeight) != null ? _a4 : 0;
       },
       mediaEvents: ["resize"]
     },
     mediaPaused: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.paused) != null ? _a3 : true;
+        return (_a4 = media == null ? void 0 : media.paused) != null ? _a4 : true;
       },
       set(value, stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
         if (!media)
           return;
         if (value) {
           media.pause();
         } else {
-          (_a3 = media.play()) == null ? void 0 : _a3.catch(() => {
+          (_a4 = media.play()) == null ? void 0 : _a4.catch(() => {
           });
         }
       },
@@ -1928,17 +1942,17 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaEnded: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.ended) != null ? _a3 : false;
+        return (_a4 = media == null ? void 0 : media.ended) != null ? _a4 : false;
       },
       mediaEvents: ["seeked", "ended", "emptied"]
     },
     mediaPlaybackRate: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.playbackRate) != null ? _a3 : 1;
+        return (_a4 = media == null ? void 0 : media.playbackRate) != null ? _a4 : 1;
       },
       set(value, stateOwners) {
         const { media } = stateOwners;
@@ -1952,9 +1966,9 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaMuted: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.muted) != null ? _a3 : false;
+        return (_a4 = media == null ? void 0 : media.muted) != null ? _a4 : false;
       },
       set(value, stateOwners) {
         const { media } = stateOwners;
@@ -1991,9 +2005,9 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaVolume: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.volume) != null ? _a3 : 1;
+        return (_a4 = media == null ? void 0 : media.volume) != null ? _a4 : 1;
       },
       set(value, stateOwners) {
         const { media } = stateOwners;
@@ -2060,9 +2074,9 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaCurrentTime: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return (_a3 = media == null ? void 0 : media.currentTime) != null ? _a3 : 0;
+        return (_a4 = media == null ? void 0 : media.currentTime) != null ? _a4 : 0;
       },
       set(value, stateOwners) {
         const { media } = stateOwners;
@@ -2091,9 +2105,9 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaSeekable: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        if (!((_a3 = media == null ? void 0 : media.seekable) == null ? void 0 : _a3.length))
+        if (!((_a4 = media == null ? void 0 : media.seekable) == null ? void 0 : _a4.length))
           return void 0;
         const start = media.seekable.start(0);
         const end = media.seekable.end(media.seekable.length - 1);
@@ -2105,9 +2119,9 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaBuffered: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        const timeRanges = (_a3 = media == null ? void 0 : media.buffered) != null ? _a3 : [];
+        const timeRanges = (_a4 = media == null ? void 0 : media.buffered) != null ? _a4 : [];
         return Array.from(timeRanges).map((_, i) => [
           Number(timeRanges.start(i).toFixed(3)),
           Number(timeRanges.end(i).toFixed(3))
@@ -2213,7 +2227,7 @@ var mediaThemeMicrovideo = (() => {
       textTracksEvents: ["addtrack", "removetrack", "change"],
       stateOwnersUpdateHandlers: [
         (_handler, stateOwners) => {
-          var _a3, _b2;
+          var _a4, _b2;
           const { media, options } = stateOwners;
           if (!media)
             return;
@@ -2229,7 +2243,11 @@ var mediaThemeMicrovideo = (() => {
               return;
             toggleSubtitleTracks(stateOwners, true);
           };
-          (_a3 = media.textTracks) == null ? void 0 : _a3.addEventListener(
+          media.addEventListener(
+            "loadstart",
+            updateDefaultSubtitlesCallback
+          );
+          (_a4 = media.textTracks) == null ? void 0 : _a4.addEventListener(
             "addtrack",
             updateDefaultSubtitlesCallback
           );
@@ -2237,9 +2255,12 @@ var mediaThemeMicrovideo = (() => {
             "removetrack",
             updateDefaultSubtitlesCallback
           );
-          updateDefaultSubtitlesCallback();
           return () => {
             var _a22, _b22;
+            media.removeEventListener(
+              "loadstart",
+              updateDefaultSubtitlesCallback
+            );
             (_a22 = media.textTracks) == null ? void 0 : _a22.removeEventListener(
               "addtrack",
               updateDefaultSubtitlesCallback
@@ -2254,14 +2275,14 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaChaptersCues: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
         if (!media)
           return [];
         const [chaptersTrack] = getTextTracksList(media, {
           kind: TextTrackKinds.CHAPTERS
         });
-        return Array.from((_a3 = chaptersTrack == null ? void 0 : chaptersTrack.cues) != null ? _a3 : []).map(
+        return Array.from((_a4 = chaptersTrack == null ? void 0 : chaptersTrack.cues) != null ? _a4 : []).map(
           ({ text, startTime, endTime }) => ({
             text,
             startTime,
@@ -2273,14 +2294,14 @@ var mediaThemeMicrovideo = (() => {
       textTracksEvents: ["addtrack", "removetrack", "change"],
       stateOwnersUpdateHandlers: [
         (handler, stateOwners) => {
-          var _a3;
+          var _a4;
           const { media } = stateOwners;
           if (!media)
             return;
           const chaptersTrack = media.querySelector(
             'track[kind="chapters"][default][src]'
           );
-          const shadowChaptersTrack = (_a3 = media.shadowRoot) == null ? void 0 : _a3.querySelector(
+          const shadowChaptersTrack = (_a4 = media.shadowRoot) == null ? void 0 : _a4.querySelector(
             ':is(video,audio) > track[kind="chapters"][default][src]'
           );
           chaptersTrack == null ? void 0 : chaptersTrack.addEventListener("load", handler);
@@ -2295,7 +2316,7 @@ var mediaThemeMicrovideo = (() => {
     // Modeling state tied to root node
     mediaIsPip: {
       get(stateOwners) {
-        var _a3, _b2;
+        var _a4, _b2;
         const { media, documentElement } = stateOwners;
         if (!media || !documentElement)
           return false;
@@ -2304,7 +2325,7 @@ var mediaThemeMicrovideo = (() => {
         if (documentElement.pictureInPictureElement === media)
           return true;
         if (documentElement.pictureInPictureElement instanceof HTMLMediaElement) {
-          if (!((_a3 = media.localName) == null ? void 0 : _a3.includes("-")))
+          if (!((_a4 = media.localName) == null ? void 0 : _a4.includes("-")))
             return false;
           return containsComposedNode(
             media,
@@ -2380,9 +2401,9 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaRenditionList: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return [...(_a3 = media == null ? void 0 : media.videoRenditions) != null ? _a3 : []].map((videoRendition) => ({
+        return [...(_a4 = media == null ? void 0 : media.videoRenditions) != null ? _a4 : []].map((videoRendition) => ({
           ...videoRendition
         }));
       },
@@ -2392,9 +2413,9 @@ var mediaThemeMicrovideo = (() => {
     /** @TODO Model this as a derived value? (CJP) */
     mediaRenditionSelected: {
       get(stateOwners) {
-        var _a3, _b2, _c;
+        var _a4, _b2, _c;
         const { media } = stateOwners;
-        return (_c = (_b2 = media == null ? void 0 : media.videoRenditions) == null ? void 0 : _b2[(_a3 = media.videoRenditions) == null ? void 0 : _a3.selectedIndex]) == null ? void 0 : _c.id;
+        return (_c = (_b2 = media == null ? void 0 : media.videoRenditions) == null ? void 0 : _b2[(_a4 = media.videoRenditions) == null ? void 0 : _a4.selectedIndex]) == null ? void 0 : _c.id;
       },
       set(value, stateOwners) {
         const { media } = stateOwners;
@@ -2418,18 +2439,18 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaAudioTrackList: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        return [...(_a3 = media == null ? void 0 : media.audioTracks) != null ? _a3 : []];
+        return [...(_a4 = media == null ? void 0 : media.audioTracks) != null ? _a4 : []];
       },
       mediaEvents: ["emptied", "loadstart"],
       audioTracksEvents: ["addtrack", "removetrack"]
     },
     mediaAudioTrackEnabled: {
       get(stateOwners) {
-        var _a3, _b2;
+        var _a4, _b2;
         const { media } = stateOwners;
-        return (_b2 = [...(_a3 = media == null ? void 0 : media.audioTracks) != null ? _a3 : []].find(
+        return (_b2 = [...(_a4 = media == null ? void 0 : media.audioTracks) != null ? _a4 : []].find(
           (audioTrack) => audioTrack.enabled
         )) == null ? void 0 : _b2.id;
       },
@@ -2463,23 +2484,27 @@ var mediaThemeMicrovideo = (() => {
       // older Safari version may require webkit-specific events
       rootEvents: ["fullscreenchange", "webkitfullscreenchange"],
       // iOS requires webkit-specific events on the video.
-      mediaEvents: ["webkitbeginfullscreen", "webkitendfullscreen", "webkitpresentationmodechanged"]
+      mediaEvents: [
+        "webkitbeginfullscreen",
+        "webkitendfullscreen",
+        "webkitpresentationmodechanged"
+      ]
     },
     mediaIsCasting: {
       // Note this relies on a customized castable-video element.
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        if (!(media == null ? void 0 : media.remote) || ((_a3 = media.remote) == null ? void 0 : _a3.state) === "disconnected")
+        if (!(media == null ? void 0 : media.remote) || ((_a4 = media.remote) == null ? void 0 : _a4.state) === "disconnected")
           return false;
         return !!media.remote.state;
       },
       set(value, stateOwners) {
-        var _a3, _b2;
+        var _a4, _b2;
         const { media } = stateOwners;
         if (!media)
           return;
-        if (value && ((_a3 = media.remote) == null ? void 0 : _a3.state) !== "disconnected")
+        if (value && ((_a4 = media.remote) == null ? void 0 : _a4.state) !== "disconnected")
           return;
         if (!value && ((_b2 = media.remote) == null ? void 0 : _b2.state) !== "connected")
           return;
@@ -2553,9 +2578,9 @@ var mediaThemeMicrovideo = (() => {
     mediaCastUnavailable: {
       // @ts-ignore
       get(stateOwners, { availability = "not-available" } = {}) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
-        if (!castSupported || !((_a3 = media == null ? void 0 : media.remote) == null ? void 0 : _a3.state)) {
+        if (!castSupported || !((_a4 = media == null ? void 0 : media.remote) == null ? void 0 : _a4.state)) {
           return AvailabilityStates.UNSUPPORTED;
         }
         if (availability == null || availability === "available")
@@ -2564,13 +2589,13 @@ var mediaThemeMicrovideo = (() => {
       },
       stateOwnersUpdateHandlers: [
         (handler, stateOwners) => {
-          var _a3;
+          var _a4;
           const { media } = stateOwners;
           if (!media)
             return;
           const remotePlaybackDisabled = media.disableRemotePlayback || media.hasAttribute("disableremoteplayback");
           if (!remotePlaybackDisabled) {
-            (_a3 = media == null ? void 0 : media.remote) == null ? void 0 : _a3.watchAvailability((availabilityBool) => {
+            (_a4 = media == null ? void 0 : media.remote) == null ? void 0 : _a4.watchAvailability((availabilityBool) => {
               const availability = availabilityBool ? "available" : "not-available";
               handler({ availability });
             }).catch((error) => {
@@ -2604,13 +2629,13 @@ var mediaThemeMicrovideo = (() => {
       mediaEvents: ["webkitplaybacktargetavailabilitychanged"],
       stateOwnersUpdateHandlers: [
         (handler, stateOwners) => {
-          var _a3;
+          var _a4;
           const { media } = stateOwners;
           if (!media)
             return;
           const remotePlaybackDisabled = media.disableRemotePlayback || media.hasAttribute("disableremoteplayback");
           if (!remotePlaybackDisabled) {
-            (_a3 = media == null ? void 0 : media.remote) == null ? void 0 : _a3.watchAvailability((availabilityBool) => {
+            (_a4 = media == null ? void 0 : media.remote) == null ? void 0 : _a4.watchAvailability((availabilityBool) => {
               const availability = availabilityBool ? "available" : "not-available";
               handler({ availability });
             }).catch((error) => {
@@ -2631,12 +2656,12 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaRenditionUnavailable: {
       get(stateOwners) {
-        var _a3;
+        var _a4;
         const { media } = stateOwners;
         if (!(media == null ? void 0 : media.videoRenditions)) {
           return AvailabilityStates.UNSUPPORTED;
         }
-        if (!((_a3 = media.videoRenditions) == null ? void 0 : _a3.length)) {
+        if (!((_a4 = media.videoRenditions) == null ? void 0 : _a4.length)) {
           return AvailabilityStates.UNAVAILABLE;
         }
         return void 0;
@@ -2646,12 +2671,12 @@ var mediaThemeMicrovideo = (() => {
     },
     mediaAudioTrackUnavailable: {
       get(stateOwners) {
-        var _a3, _b2;
+        var _a4, _b2;
         const { media } = stateOwners;
         if (!(media == null ? void 0 : media.audioTracks)) {
           return AvailabilityStates.UNSUPPORTED;
         }
-        if (((_b2 = (_a3 = media.audioTracks) == null ? void 0 : _a3.length) != null ? _b2 : 0) <= 1) {
+        if (((_b2 = (_a4 = media.audioTracks) == null ? void 0 : _a4.length) != null ? _b2 : 0) <= 1) {
           return AvailabilityStates.UNAVAILABLE;
         }
         return void 0;
@@ -2667,7 +2692,7 @@ var mediaThemeMicrovideo = (() => {
      * @TODO Consider adding state to `StateMediator` for e.g. `mediaThumbnailCues` and use that for derived state here (CJP)
      */
     [MediaUIEvents.MEDIA_PREVIEW_REQUEST](stateMediator2, stateOwners, { detail }) {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const { media } = stateOwners;
       const mediaPreviewTime = detail != null ? detail : void 0;
       let mediaPreviewImage = void 0;
@@ -2677,7 +2702,7 @@ var mediaThemeMicrovideo = (() => {
           kind: TextTrackKinds.METADATA,
           label: "thumbnails"
         });
-        const cue = Array.prototype.find.call((_a3 = track == null ? void 0 : track.cues) != null ? _a3 : [], (c, i, cs) => {
+        const cue = Array.prototype.find.call((_a4 = track == null ? void 0 : track.cues) != null ? _a4 : [], (c, i, cs) => {
           if (i === 0)
             return c.endTime > mediaPreviewTime;
           if (i === cs.length - 1)
@@ -2718,14 +2743,17 @@ var mediaThemeMicrovideo = (() => {
       stateMediator2[key].set(value, stateOwners);
     },
     [MediaUIEvents.MEDIA_PLAY_REQUEST](stateMediator2, stateOwners) {
-      var _a3;
+      var _a4, _b2, _c, _d;
       const key = "mediaPaused";
       const value = false;
-      const live = stateMediator2.mediaStreamType.get(stateOwners) === StreamTypes.LIVE;
-      if (live) {
-        const notDvr = !(stateMediator2.mediaTargetLiveWindow.get(stateOwners) > 0);
-        const liveEdgeTime = (_a3 = stateMediator2.mediaSeekable.get(stateOwners)) == null ? void 0 : _a3[1];
-        if (notDvr && liveEdgeTime) {
+      const isLive = stateMediator2.mediaStreamType.get(stateOwners) === StreamTypes.LIVE;
+      const canAutoSeekToLive = !((_a4 = stateOwners.options) == null ? void 0 : _a4.noAutoSeekToLive);
+      const isDVR = stateMediator2.mediaTargetLiveWindow.get(stateOwners) > 0;
+      if (isLive && canAutoSeekToLive && !isDVR) {
+        const seekableEnd = (_b2 = stateMediator2.mediaSeekable.get(stateOwners)) == null ? void 0 : _b2[1];
+        if (seekableEnd) {
+          const seekToLiveOffset = (_d = (_c = stateOwners.options) == null ? void 0 : _c.seekToLiveOffset) != null ? _d : 0;
+          const liveEdgeTime = seekableEnd - seekToLiveOffset;
           stateMediator2.mediaCurrentTime.set(liveEdgeTime, stateOwners);
         }
       }
@@ -2763,20 +2791,22 @@ var mediaThemeMicrovideo = (() => {
       stateMediator2[key].set(value, stateOwners);
     },
     [MediaUIEvents.MEDIA_SEEK_TO_LIVE_REQUEST](stateMediator2, stateOwners) {
-      var _a3;
+      var _a4, _b2, _c;
       const key = "mediaCurrentTime";
-      const value = (_a3 = stateMediator2.mediaSeekable.get(stateOwners)) == null ? void 0 : _a3[1];
-      if (Number.isNaN(Number(value)))
+      const seekableEnd = (_a4 = stateMediator2.mediaSeekable.get(stateOwners)) == null ? void 0 : _a4[1];
+      if (Number.isNaN(Number(seekableEnd)))
         return;
+      const seekToLiveOffset = (_c = (_b2 = stateOwners.options) == null ? void 0 : _b2.seekToLiveOffset) != null ? _c : 0;
+      const value = seekableEnd - seekToLiveOffset;
       stateMediator2[key].set(value, stateOwners);
     },
     // Text Tracks state change requests
     [MediaUIEvents.MEDIA_SHOW_SUBTITLES_REQUEST](_stateMediator, stateOwners, { detail }) {
-      var _a3;
+      var _a4;
       const { options } = stateOwners;
       const tracks = getSubtitleTracks(stateOwners);
       const tracksToUpdate = parseTracks(detail);
-      const preferredLanguage = (_a3 = tracksToUpdate[0]) == null ? void 0 : _a3.language;
+      const preferredLanguage = (_a4 = tracksToUpdate[0]) == null ? void 0 : _a4.language;
       if (preferredLanguage && !options.noSubtitlesLangPref) {
         GlobalThis.localStorage.setItem(
           "media-chrome-pref-subtitles-lang",
@@ -2898,7 +2928,7 @@ var mediaThemeMicrovideo = (() => {
     const stateUpdateHandlers = {};
     let nextStateOwners = void 0;
     const updateStateOwners = async (nextStateOwnersDelta, nextSubscriberCount) => {
-      var _a3, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      var _a4, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
       const pendingUpdate = !!nextStateOwners;
       nextStateOwners = {
         ...stateOwners,
@@ -2910,7 +2940,7 @@ var mediaThemeMicrovideo = (() => {
       await prepareStateOwners(...Object.values(nextStateOwnersDelta));
       const shouldTeardownFromSubscriberCount = callbacks.length > 0 && nextSubscriberCount === 0 && monitorStateOwnersOnlyWithSubscriptions;
       const mediaChanged = stateOwners.media !== nextStateOwners.media;
-      const textTracksChanged = ((_a3 = stateOwners.media) == null ? void 0 : _a3.textTracks) !== ((_b2 = nextStateOwners.media) == null ? void 0 : _b2.textTracks);
+      const textTracksChanged = ((_a4 = stateOwners.media) == null ? void 0 : _a4.textTracks) !== ((_b2 = nextStateOwners.media) == null ? void 0 : _b2.textTracks);
       const videoRenditionsChanged = ((_c = stateOwners.media) == null ? void 0 : _c.videoRenditions) !== ((_d = nextStateOwners.media) == null ? void 0 : _d.videoRenditions);
       const audioTracksChanged = ((_e = stateOwners.media) == null ? void 0 : _e.audioTracks) !== ((_f = nextStateOwners.media) == null ? void 0 : _f.audioTracks);
       const remoteChanged = ((_g = stateOwners.media) == null ? void 0 : _g.remote) !== ((_h = nextStateOwners.media) == null ? void 0 : _h.remote);
@@ -3177,13 +3207,15 @@ var mediaThemeMicrovideo = (() => {
     HOTKEYS: "hotkeys",
     KEYS_USED: "keysused",
     LIVE_EDGE_OFFSET: "liveedgeoffset",
+    SEEK_TO_LIVE_OFFSET: "seektoliveoffset",
     NO_AUTO_SEEK_TO_LIVE: "noautoseektolive",
     NO_HOTKEYS: "nohotkeys",
     NO_VOLUME_PREF: "novolumepref",
     NO_SUBTITLES_LANG_PREF: "nosubtitleslangpref",
     NO_DEFAULT_STORE: "nodefaultstore",
     KEYBOARD_FORWARD_SEEK_OFFSET: "keyboardforwardseekoffset",
-    KEYBOARD_BACKWARD_SEEK_OFFSET: "keyboardbackwardseekoffset"
+    KEYBOARD_BACKWARD_SEEK_OFFSET: "keyboardbackwardseekoffset",
+    LANG: "lang"
   };
   var MediaController = class extends MediaContainer {
     constructor() {
@@ -3199,8 +3231,8 @@ var mediaThemeMicrovideo = (() => {
       __privateAdd4(this, _mediaStateCallback, void 0);
       __privateAdd4(this, _mediaStoreUnsubscribe, void 0);
       __privateAdd4(this, _mediaStateEventHandler, (event) => {
-        var _a3;
-        (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch(event);
+        var _a4;
+        (_a4 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a4.dispatch(event);
       });
       this.associateElement(this);
       let prevState = {};
@@ -3226,16 +3258,17 @@ var mediaThemeMicrovideo = (() => {
         Attributes2.HOTKEYS,
         Attributes2.DEFAULT_STREAM_TYPE,
         Attributes2.DEFAULT_SUBTITLES,
-        Attributes2.DEFAULT_DURATION
+        Attributes2.DEFAULT_DURATION,
+        Attributes2.LANG
       );
     }
     get mediaStore() {
       return __privateGet4(this, _mediaStore);
     }
     set mediaStore(value) {
-      var _a3, _b2;
+      var _a4, _b2;
       if (__privateGet4(this, _mediaStore)) {
-        (_a3 = __privateGet4(this, _mediaStoreUnsubscribe)) == null ? void 0 : _a3.call(this);
+        (_a4 = __privateGet4(this, _mediaStoreUnsubscribe)) == null ? void 0 : _a4.call(this);
         __privateSet4(this, _mediaStoreUnsubscribe, void 0);
       }
       __privateSet4(this, _mediaStore, value);
@@ -3248,16 +3281,16 @@ var mediaThemeMicrovideo = (() => {
       ));
     }
     get fullscreenElement() {
-      var _a3;
-      return (_a3 = __privateGet4(this, _fullscreenElement)) != null ? _a3 : this;
+      var _a4;
+      return (_a4 = __privateGet4(this, _fullscreenElement)) != null ? _a4 : this;
     }
     set fullscreenElement(element) {
-      var _a3;
+      var _a4;
       if (this.hasAttribute(Attributes2.FULLSCREEN_ELEMENT)) {
         this.removeAttribute(Attributes2.FULLSCREEN_ELEMENT);
       }
       __privateSet4(this, _fullscreenElement, element);
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a4 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a4.dispatch({
         type: "fullscreenelementchangerequest",
         detail: this.fullscreenElement
       });
@@ -3323,7 +3356,7 @@ var mediaThemeMicrovideo = (() => {
       setBooleanAttr(this, Attributes2.NO_DEFAULT_STORE, value);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e, _f;
+      var _a4, _b2, _c, _d, _e, _f, _g, _h;
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === Attributes2.NO_HOTKEYS) {
         if (newValue !== oldValue && newValue === "") {
@@ -3339,7 +3372,7 @@ var mediaThemeMicrovideo = (() => {
       } else if (attrName === Attributes2.HOTKEYS) {
         __privateGet4(this, _hotKeys).value = newValue;
       } else if (attrName === Attributes2.DEFAULT_SUBTITLES && newValue !== oldValue) {
-        (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+        (_a4 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a4.dispatch({
           type: "optionschangerequest",
           detail: {
             defaultSubtitles: this.hasAttribute(Attributes2.DEFAULT_SUBTITLES)
@@ -3356,24 +3389,41 @@ var mediaThemeMicrovideo = (() => {
         (_d = __privateGet4(this, _mediaStore)) == null ? void 0 : _d.dispatch({
           type: "optionschangerequest",
           detail: {
-            liveEdgeOffset: this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0
+            liveEdgeOffset: this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0,
+            seekToLiveOffset: !this.hasAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0
+          }
+        });
+      } else if (attrName === Attributes2.SEEK_TO_LIVE_OFFSET) {
+        (_e = __privateGet4(this, _mediaStore)) == null ? void 0 : _e.dispatch({
+          type: "optionschangerequest",
+          detail: {
+            seekToLiveOffset: this.hasAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) : void 0
+          }
+        });
+      } else if (attrName === Attributes2.NO_AUTO_SEEK_TO_LIVE) {
+        (_f = __privateGet4(this, _mediaStore)) == null ? void 0 : _f.dispatch({
+          type: "optionschangerequest",
+          detail: {
+            noAutoSeekToLive: this.hasAttribute(Attributes2.NO_AUTO_SEEK_TO_LIVE)
           }
         });
       } else if (attrName === Attributes2.FULLSCREEN_ELEMENT) {
-        const el = newValue ? (_e = this.getRootNode()) == null ? void 0 : _e.getElementById(newValue) : void 0;
+        const el = newValue ? (_g = this.getRootNode()) == null ? void 0 : _g.getElementById(newValue) : void 0;
         __privateSet4(this, _fullscreenElement, el);
-        (_f = __privateGet4(this, _mediaStore)) == null ? void 0 : _f.dispatch({
+        (_h = __privateGet4(this, _mediaStore)) == null ? void 0 : _h.dispatch({
           type: "fullscreenelementchangerequest",
           detail: this.fullscreenElement
         });
+      } else if (attrName === Attributes2.LANG && newValue !== oldValue) {
+        setLanguage(newValue);
       }
     }
     connectedCallback() {
-      var _a3, _b2;
+      var _a4, _b2;
       if (!__privateGet4(this, _mediaStore) && !this.hasAttribute(Attributes2.NO_DEFAULT_STORE)) {
         __privateMethod2(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
       }
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a4 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a4.dispatch({
         type: "documentelementchangerequest",
         detail: Document2
       });
@@ -3386,8 +3436,8 @@ var mediaThemeMicrovideo = (() => {
       this.enableHotkeys();
     }
     disconnectedCallback() {
-      var _a3, _b2, _c, _d;
-      (_a3 = super.disconnectedCallback) == null ? void 0 : _a3.call(this);
+      var _a4, _b2, _c, _d;
+      (_a4 = super.disconnectedCallback) == null ? void 0 : _a4.call(this);
       if (__privateGet4(this, _mediaStore)) {
         (_b2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _b2.dispatch({
           type: "documentelementchangerequest",
@@ -3408,9 +3458,9 @@ var mediaThemeMicrovideo = (() => {
      * @param {HTMLMediaElement} media
      */
     mediaSetCallback(media) {
-      var _a3;
+      var _a4;
       super.mediaSetCallback(media);
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a4 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a4.dispatch({
         type: "mediaelementchangerequest",
         detail: media
       });
@@ -3423,9 +3473,9 @@ var mediaThemeMicrovideo = (() => {
      * @param {HTMLMediaElement} media
      */
     mediaUnsetCallback(media) {
-      var _a3;
+      var _a4;
       super.mediaUnsetCallback(media);
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a4 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a4.dispatch({
         type: "mediaelementchangerequest",
         detail: void 0
       });
@@ -3501,9 +3551,9 @@ var mediaThemeMicrovideo = (() => {
       setStringAttr(this, Attributes2.HOTKEYS, value);
     }
     keyboardShortcutHandler(e) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       const target = e.target;
-      const keysUsed = ((_c = (_b2 = (_a3 = target.getAttribute(Attributes2.KEYS_USED)) == null ? void 0 : _a3.split(" ")) != null ? _b2 : target == null ? void 0 : target.keysUsed) != null ? _c : []).map((key) => key === "Space" ? " " : key).filter(Boolean);
+      const keysUsed = ((_c = (_b2 = (_a4 = target.getAttribute(Attributes2.KEYS_USED)) == null ? void 0 : _a4.split(" ")) != null ? _b2 : target == null ? void 0 : target.keysUsed) != null ? _c : []).map((key) => key === "Space" ? " " : key).filter(Boolean);
       if (keysUsed.includes(e.key)) {
         return;
       }
@@ -3594,7 +3644,7 @@ var mediaThemeMicrovideo = (() => {
   _mediaStateEventHandler = /* @__PURE__ */ new WeakMap();
   _setupDefaultStore = /* @__PURE__ */ new WeakSet();
   setupDefaultStore_fn = function() {
-    var _a3;
+    var _a4;
     this.mediaStore = createMediaStore({
       media: this.media,
       fullscreenElement: this.fullscreenElement,
@@ -3603,11 +3653,13 @@ var mediaThemeMicrovideo = (() => {
         defaultDuration: this.hasAttribute(Attributes2.DEFAULT_DURATION) ? +this.getAttribute(Attributes2.DEFAULT_DURATION) : void 0,
         defaultStreamType: (
           /** @type {import('./media-store/state-mediator.js').StreamTypeValue} */
-          (_a3 = this.getAttribute(
+          (_a4 = this.getAttribute(
             Attributes2.DEFAULT_STREAM_TYPE
-          )) != null ? _a3 : void 0
+          )) != null ? _a4 : void 0
         ),
         liveEdgeOffset: this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0,
+        seekToLiveOffset: this.hasAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0,
+        noAutoSeekToLive: this.hasAttribute(Attributes2.NO_AUTO_SEEK_TO_LIVE),
         // NOTE: This wasn't updated if it was changed later. Should it be? (CJP)
         noVolumePref: this.hasAttribute(Attributes2.NO_VOLUME_PREF),
         noSubtitlesLangPref: this.hasAttribute(
@@ -3640,9 +3692,9 @@ var mediaThemeMicrovideo = (() => {
   var MEDIA_UI_ATTRIBUTE_NAMES2 = Object.values(MediaUIAttributes);
   var MEDIA_UI_PROP_NAMES = Object.values(MediaUIProps);
   var getMediaUIAttributesFrom = (child) => {
-    var _a3, _b2, _c, _d;
+    var _a4, _b2, _c, _d;
     let { observedAttributes: observedAttributes2 } = child.constructor;
-    if (!observedAttributes2 && ((_a3 = child.nodeName) == null ? void 0 : _a3.includes("-"))) {
+    if (!observedAttributes2 && ((_a4 = child.nodeName) == null ? void 0 : _a4.includes("-"))) {
       GlobalThis.customElements.upgrade(child);
       ({ observedAttributes: observedAttributes2 } = child.constructor);
     }
@@ -3654,8 +3706,8 @@ var mediaThemeMicrovideo = (() => {
     );
   };
   var hasMediaUIProps = (mediaStateReceiverCandidate) => {
-    var _a3, _b2;
-    if (((_a3 = mediaStateReceiverCandidate.nodeName) == null ? void 0 : _a3.includes("-")) && !!GlobalThis.customElements.get(
+    var _a4, _b2;
+    if (((_a4 = mediaStateReceiverCandidate.nodeName) == null ? void 0 : _a4.includes("-")) && !!GlobalThis.customElements.get(
       (_b2 = mediaStateReceiverCandidate.nodeName) == null ? void 0 : _b2.toLowerCase()
     ) && !(mediaStateReceiverCandidate instanceof GlobalThis.customElements.get(
       mediaStateReceiverCandidate.nodeName.toLowerCase()
@@ -3670,8 +3722,8 @@ var mediaThemeMicrovideo = (() => {
     return hasMediaUIProps(child) || !!getMediaUIAttributesFrom(child).length;
   };
   var serializeTuple = (tuple) => {
-    var _a3;
-    return (_a3 = tuple == null ? void 0 : tuple.join) == null ? void 0 : _a3.call(tuple, ":");
+    var _a4;
+    return (_a4 = tuple == null ? void 0 : tuple.join) == null ? void 0 : _a4.call(tuple, ":");
   };
   var CustomAttrSerializer = {
     [MediaUIAttributes.MEDIA_SUBTITLES_LIST]: stringifyTextTrackList,
@@ -3683,7 +3735,7 @@ var mediaThemeMicrovideo = (() => {
     [MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST]: stringifyAudioTrackList
   };
   var setAttr = async (child, attrName, attrValue) => {
-    var _a3, _b2;
+    var _a4, _b2;
     if (!child.isConnected) {
       await delay(0);
     }
@@ -3699,24 +3751,24 @@ var mediaThemeMicrovideo = (() => {
     if (Array.isArray(attrValue) && !attrValue.length) {
       return child.removeAttribute(attrName);
     }
-    const val = (_b2 = (_a3 = CustomAttrSerializer[attrName]) == null ? void 0 : _a3.call(CustomAttrSerializer, attrValue)) != null ? _b2 : attrValue;
+    const val = (_b2 = (_a4 = CustomAttrSerializer[attrName]) == null ? void 0 : _a4.call(CustomAttrSerializer, attrValue)) != null ? _b2 : attrValue;
     return child.setAttribute(attrName, val);
   };
   var isMediaSlotElementDescendant = (el) => {
-    var _a3;
-    return !!((_a3 = el.closest) == null ? void 0 : _a3.call(el, '*[slot="media"]'));
+    var _a4;
+    return !!((_a4 = el.closest) == null ? void 0 : _a4.call(el, '*[slot="media"]'));
   };
   var traverseForMediaStateReceivers = (rootNode, mediaStateReceiverCallback) => {
     if (isMediaSlotElementDescendant(rootNode)) {
       return;
     }
     const traverseForMediaStateReceiversSync = (rootNode2, mediaStateReceiverCallback2) => {
-      var _a3, _b2;
+      var _a4, _b2;
       if (isMediaStateReceiver(rootNode2)) {
         mediaStateReceiverCallback2(rootNode2);
       }
       const { children = [] } = rootNode2 != null ? rootNode2 : {};
-      const shadowChildren = (_b2 = (_a3 = rootNode2 == null ? void 0 : rootNode2.shadowRoot) == null ? void 0 : _a3.children) != null ? _b2 : [];
+      const shadowChildren = (_b2 = (_a4 = rootNode2 == null ? void 0 : rootNode2.shadowRoot) == null ? void 0 : _a4.children) != null ? _b2 : [];
       const allChildren = [...children, ...shadowChildren];
       allChildren.forEach(
         (child) => traverseForMediaStateReceivers(
@@ -3750,13 +3802,13 @@ var mediaThemeMicrovideo = (() => {
   var monitorForMediaStateReceivers = (rootNode, registerMediaStateReceiver, unregisterMediaStateReceiver) => {
     traverseForMediaStateReceivers(rootNode, registerMediaStateReceiver);
     const registerMediaStateReceiverHandler = (evt) => {
-      var _a3;
-      const el = (_a3 = evt == null ? void 0 : evt.composedPath()[0]) != null ? _a3 : evt.target;
+      var _a4;
+      const el = (_a4 = evt == null ? void 0 : evt.composedPath()[0]) != null ? _a4 : evt.target;
       registerMediaStateReceiver(el);
     };
     const unregisterMediaStateReceiverHandler = (evt) => {
-      var _a3;
-      const el = (_a3 = evt == null ? void 0 : evt.composedPath()[0]) != null ? _a3 : evt.target;
+      var _a4;
+      const el = (_a4 = evt == null ? void 0 : evt.composedPath()[0]) != null ? _a4 : evt.target;
       unregisterMediaStateReceiver(el);
     };
     rootNode.addEventListener(
@@ -3897,7 +3949,7 @@ var mediaThemeMicrovideo = (() => {
     box-sizing: border-box;
     transition: background .15s linear;
     pointer-events: auto;
-    cursor: pointer;
+    cursor: var(--media-cursor, pointer);
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -3964,7 +4016,7 @@ var mediaThemeMicrovideo = (() => {
 `;
   var MediaChromeButton = class extends GlobalThis.HTMLElement {
     constructor(options = {}) {
-      var _a3;
+      var _a4;
       super();
       __privateAdd5(this, _setupTooltip);
       __privateAdd5(this, _mediaController2, void 0);
@@ -3978,8 +4030,8 @@ var mediaThemeMicrovideo = (() => {
         setTimeout(__privateGet5(this, _positionTooltip), 0);
       });
       __privateAdd5(this, _positionTooltip, () => {
-        var _a4, _b2;
-        (_b2 = (_a4 = this.tooltipEl) == null ? void 0 : _a4.updateXOffset) == null ? void 0 : _b2.call(_a4);
+        var _a5, _b2;
+        (_b2 = (_a5 = this.tooltipEl) == null ? void 0 : _a5.updateXOffset) == null ? void 0 : _b2.call(_a5);
       });
       __privateAdd5(this, _keyupListener, (e) => {
         const { key } = e;
@@ -4009,7 +4061,7 @@ var mediaThemeMicrovideo = (() => {
           slotTemplate17.innerHTML = `<slot>${options.defaultContent || ""}</slot>`;
         }
         if (options.tooltipContent) {
-          buttonHTML.querySelector('slot[name="tooltip-content"]').innerHTML = (_a3 = options.tooltipContent) != null ? _a3 : "";
+          buttonHTML.querySelector('slot[name="tooltip-content"]').innerHTML = (_a4 = options.tooltipContent) != null ? _a4 : "";
           this.tooltipContent = options.tooltipContent;
         }
         this.nativeEl.appendChild(slotTemplate17.content.cloneNode(true));
@@ -4036,10 +4088,10 @@ var mediaThemeMicrovideo = (() => {
       this.tabIndex = -1;
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet5(this, _mediaController2, null);
         }
         if (newValue && this.isConnected) {
@@ -4058,7 +4110,7 @@ var mediaThemeMicrovideo = (() => {
       __privateGet5(this, _positionTooltip).call(this);
     }
     connectedCallback() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
       style.setProperty(
         "display",
@@ -4078,16 +4130,16 @@ var mediaThemeMicrovideo = (() => {
           this,
           _mediaController2,
           // @ts-ignore
-          (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId)
+          (_a4 = this.getRootNode()) == null ? void 0 : _a4.getElementById(mediaControllerId)
         );
         (_c = (_b2 = __privateGet5(this, _mediaController2)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
       GlobalThis.customElements.whenDefined("media-tooltip").then(() => __privateMethod3(this, _setupTooltip, setupTooltip_fn).call(this));
     }
     disconnectedCallback() {
-      var _a3, _b2;
+      var _a4, _b2;
       this.disable();
-      (_b2 = (_a3 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a4 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet5(this, _mediaController2, null);
       this.removeEventListener("mouseenter", __privateGet5(this, _positionTooltip));
       this.removeEventListener("focus", __privateGet5(this, _positionTooltip));
@@ -4647,15 +4699,15 @@ var mediaThemeMicrovideo = (() => {
   };
   _handleOpen = /* @__PURE__ */ new WeakSet();
   handleOpen_fn = function() {
-    var _a3;
-    (_a3 = __privateGet6(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
+    var _a4;
+    (_a4 = __privateGet6(this, _invokerElement)) == null ? void 0 : _a4.setAttribute("aria-expanded", "true");
     this.dispatchEvent(new Event("open", { composed: true, bubbles: true }));
     this.addEventListener("transitionend", () => this.focus(), { once: true });
   };
   _handleClosed = /* @__PURE__ */ new WeakSet();
   handleClosed_fn = function() {
-    var _a3;
-    (_a3 = __privateGet6(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    var _a4;
+    (_a4 = __privateGet6(this, _invokerElement)) == null ? void 0 : _a4.setAttribute("aria-expanded", "false");
     this.dispatchEvent(new Event("close", { composed: true, bubbles: true }));
   };
   _handleInvoke = /* @__PURE__ */ new WeakSet();
@@ -4667,9 +4719,9 @@ var mediaThemeMicrovideo = (() => {
   };
   _handleFocusOut = /* @__PURE__ */ new WeakSet();
   handleFocusOut_fn = function(event) {
-    var _a3;
+    var _a4;
     if (!containsComposedNode(this, event.relatedTarget)) {
-      (_a3 = __privateGet6(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
+      (_a4 = __privateGet6(this, _previouslyFocused)) == null ? void 0 : _a4.focus();
       if (__privateGet6(this, _invokerElement) && __privateGet6(this, _invokerElement) !== event.relatedTarget && this.open) {
         this.open = false;
       }
@@ -4677,7 +4729,7 @@ var mediaThemeMicrovideo = (() => {
   };
   _handleKeyDown = /* @__PURE__ */ new WeakSet();
   handleKeyDown_fn = function(event) {
-    var _a3, _b2, _c, _d, _e;
+    var _a4, _b2, _c, _d, _e;
     const { key, ctrlKey, altKey, metaKey } = event;
     if (ctrlKey || altKey || metaKey) {
       return;
@@ -4689,7 +4741,7 @@ var mediaThemeMicrovideo = (() => {
     event.stopPropagation();
     if (key === "Tab") {
       if (event.shiftKey) {
-        (_b2 = (_a3 = this.previousElementSibling) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3);
+        (_b2 = (_a4 = this.previousElementSibling) == null ? void 0 : _a4.focus) == null ? void 0 : _b2.call(_a4);
       } else {
         (_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
       }
@@ -4773,7 +4825,7 @@ var mediaThemeMicrovideo = (() => {
       position: relative;
       width: 100px;
       transition: background .15s linear;
-      cursor: pointer;
+      cursor: var(--media-cursor, pointer);
       pointer-events: auto;
       touch-action: none; ${/* Prevent scrolling when dragging on mobile. */
   ""}
@@ -4829,7 +4881,7 @@ var mediaThemeMicrovideo = (() => {
       height: var(--media-time-range-hover-height, max(100% + 7px, 25px));
       width: 100%;
       position: absolute;
-      cursor: pointer;
+      cursor: var(--media-cursor, pointer);
 
       -webkit-appearance: none; ${/* Hides the slider so that custom slider can be made */
   ""}
@@ -4932,7 +4984,7 @@ var mediaThemeMicrovideo = (() => {
       translate: -50%;
       position: absolute;
       left: 0;
-      cursor: pointer;
+      cursor: var(--media-cursor, pointer);
     }
 
     #thumb {
@@ -5048,10 +5100,10 @@ var mediaThemeMicrovideo = (() => {
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet7(this, _mediaController3, null);
         }
         if (newValue && this.isConnected) {
@@ -5069,7 +5121,7 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
       style.setProperty(
         "display",
@@ -5077,7 +5129,10 @@ var mediaThemeMicrovideo = (() => {
       );
       __privateGet7(this, _cssRules).pointer = getOrInsertCSSRule(this.shadowRoot, "#pointer");
       __privateGet7(this, _cssRules).progress = getOrInsertCSSRule(this.shadowRoot, "#progress");
-      __privateGet7(this, _cssRules).thumb = getOrInsertCSSRule(this.shadowRoot, '#thumb, ::slotted([slot="thumb"])');
+      __privateGet7(this, _cssRules).thumb = getOrInsertCSSRule(
+        this.shadowRoot,
+        '#thumb, ::slotted([slot="thumb"])'
+      );
       __privateGet7(this, _cssRules).activeSegment = getOrInsertCSSRule(
         this.shadowRoot,
         "#segments-clipping rect:nth-child(0)"
@@ -5086,7 +5141,7 @@ var mediaThemeMicrovideo = (() => {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet7(this, _mediaController3, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
+        __privateSet7(this, _mediaController3, (_a4 = this.getRootNode()) == null ? void 0 : _a4.getElementById(
           mediaControllerId
         ));
         (_c = (_b2 = __privateGet7(this, _mediaController3)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
@@ -5098,25 +5153,25 @@ var mediaThemeMicrovideo = (() => {
       observeResize(this.container, __privateGet7(this, _updateComputedStyles));
     }
     disconnectedCallback() {
-      var _a3, _b2;
+      var _a4, _b2;
       __privateMethod5(this, _disableUserEvents, disableUserEvents_fn).call(this);
-      (_b2 = (_a3 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a4 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet7(this, _mediaController3, null);
       this.shadowRoot.removeEventListener("focusin", __privateGet7(this, _onFocusIn));
       this.shadowRoot.removeEventListener("focusout", __privateGet7(this, _onFocusOut));
       unobserveResize(this.container, __privateGet7(this, _updateComputedStyles));
     }
     updatePointerBar(evt) {
-      var _a3;
-      (_a3 = __privateGet7(this, _cssRules).pointer) == null ? void 0 : _a3.style.setProperty(
+      var _a4;
+      (_a4 = __privateGet7(this, _cssRules).pointer) == null ? void 0 : _a4.style.setProperty(
         "width",
         `${this.getPointerRatio(evt) * 100}%`
       );
     }
     updateBar() {
-      var _a3, _b2;
+      var _a4, _b2;
       const rangePercent = this.range.valueAsNumber * 100;
-      (_a3 = __privateGet7(this, _cssRules).progress) == null ? void 0 : _a3.style.setProperty("width", `${rangePercent}%`);
+      (_a4 = __privateGet7(this, _cssRules).progress) == null ? void 0 : _a4.style.setProperty("width", `${rangePercent}%`);
       (_b2 = __privateGet7(this, _cssRules).thumb) == null ? void 0 : _b2.style.setProperty("left", `${rangePercent}%`);
     }
     updateSegments(segments) {
@@ -5153,13 +5208,12 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     getPointerRatio(evt) {
-      const pointerRatio = getPointProgressOnLine(
+      return getPointProgressOnLine(
         evt.clientX,
         evt.clientY,
         __privateGet7(this, _startpoint).getBoundingClientRect(),
         __privateGet7(this, _endpoint).getBoundingClientRect()
       );
-      return Math.max(0, Math.min(1, pointerRatio));
     }
     get dragging() {
       return this.hasAttribute("dragging");
@@ -5228,39 +5282,39 @@ var mediaThemeMicrovideo = (() => {
   };
   _disableUserEvents = /* @__PURE__ */ new WeakSet();
   disableUserEvents_fn = function() {
-    var _a3, _b2;
+    var _a4, _b2;
     this.removeEventListener("input", this);
     this.removeEventListener("pointerdown", this);
     this.removeEventListener("pointerenter", this);
-    (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("pointerup", this);
+    (_a4 = GlobalThis.window) == null ? void 0 : _a4.removeEventListener("pointerup", this);
     (_b2 = GlobalThis.window) == null ? void 0 : _b2.removeEventListener("pointermove", this);
   };
   _handlePointerDown = /* @__PURE__ */ new WeakSet();
   handlePointerDown_fn = function(evt) {
-    var _a3;
+    var _a4;
     __privateSet7(this, _isInputTarget, evt.composedPath().includes(this.range));
-    (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("pointerup", this);
+    (_a4 = GlobalThis.window) == null ? void 0 : _a4.addEventListener("pointerup", this);
   };
   _handlePointerEnter = /* @__PURE__ */ new WeakSet();
   handlePointerEnter_fn = function(evt) {
-    var _a3;
+    var _a4;
     if (evt.pointerType !== "mouse")
       __privateMethod5(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
     this.addEventListener("pointerleave", this);
-    (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("pointermove", this);
+    (_a4 = GlobalThis.window) == null ? void 0 : _a4.addEventListener("pointermove", this);
   };
   _handlePointerUp2 = /* @__PURE__ */ new WeakSet();
   handlePointerUp_fn2 = function() {
-    var _a3;
-    (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("pointerup", this);
+    var _a4;
+    (_a4 = GlobalThis.window) == null ? void 0 : _a4.removeEventListener("pointerup", this);
     this.toggleAttribute("dragging", false);
     this.range.disabled = this.hasAttribute("disabled");
   };
   _handlePointerLeave = /* @__PURE__ */ new WeakSet();
   handlePointerLeave_fn = function() {
-    var _a3, _b2;
+    var _a4, _b2;
     this.removeEventListener("pointerleave", this);
-    (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("pointermove", this);
+    (_a4 = GlobalThis.window) == null ? void 0 : _a4.removeEventListener("pointermove", this);
     this.toggleAttribute("dragging", false);
     this.range.disabled = this.hasAttribute("disabled");
     (_b2 = __privateGet7(this, _cssRules).activeSegment) == null ? void 0 : _b2.style.removeProperty("transform");
@@ -5348,10 +5402,10 @@ var mediaThemeMicrovideo = (() => {
       return [MediaStateReceiverAttributes.MEDIA_CONTROLLER];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet8(this, _mediaController4)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet8(this, _mediaController4)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet8(this, _mediaController4, null);
         }
         if (newValue && this.isConnected) {
@@ -5361,20 +5415,20 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const mediaControllerId = this.getAttribute(
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet8(this, _mediaController4, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
+        __privateSet8(this, _mediaController4, (_a4 = this.getRootNode()) == null ? void 0 : _a4.getElementById(
           mediaControllerId
         ));
         (_c = (_b2 = __privateGet8(this, _mediaController4)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
-      var _a3, _b2;
-      (_b2 = (_a3 = __privateGet8(this, _mediaController4)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      var _a4, _b2;
+      (_b2 = (_a4 = __privateGet8(this, _mediaController4)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet8(this, _mediaController4, null);
     }
   };
@@ -5459,10 +5513,10 @@ var mediaThemeMicrovideo = (() => {
       return [MediaStateReceiverAttributes.MEDIA_CONTROLLER];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet9(this, _mediaController5)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet9(this, _mediaController5)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet9(this, _mediaController5, null);
         }
         if (newValue && this.isConnected) {
@@ -5472,7 +5526,7 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
       style.setProperty(
         "display",
@@ -5482,15 +5536,15 @@ var mediaThemeMicrovideo = (() => {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet9(this, _mediaController5, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
+        __privateSet9(this, _mediaController5, (_a4 = this.getRootNode()) == null ? void 0 : _a4.getElementById(
           mediaControllerId
         ));
         (_c = (_b2 = __privateGet9(this, _mediaController5)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
-      var _a3, _b2;
-      (_b2 = (_a3 = __privateGet9(this, _mediaController5)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      var _a4, _b2;
+      (_b2 = (_a4 = __privateGet9(this, _mediaController5)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet9(this, _mediaController5, null);
     }
   };
@@ -5571,11 +5625,11 @@ var mediaThemeMicrovideo = (() => {
     5: t("The media is encrypted and there are no keys to decrypt it.")
   };
   var formatError = (error) => {
-    var _a3, _b2;
+    var _a4, _b2;
     if (error.code === 1)
       return null;
     return {
-      title: (_a3 = defaultErrorTitles[error.code]) != null ? _a3 : `Error ${error.code}`,
+      title: (_a4 = defaultErrorTitles[error.code]) != null ? _a4 : `Error ${error.code}`,
       message: (_b2 = defaultErrorMessages[error.code]) != null ? _b2 : error.message
     };
   };
@@ -5629,8 +5683,8 @@ var mediaThemeMicrovideo = (() => {
     return error.code && formatError(error) !== null;
   }
   function formatErrorMessage(error) {
-    var _a3;
-    const { title, message } = (_a3 = formatError(error)) != null ? _a3 : {};
+    var _a4;
+    const { title, message } = (_a4 = formatError(error)) != null ? _a4 : {};
     let html = "";
     if (title)
       html += `<slot name="error-${error.code}-title"><h3>${title}</h3></slot>`;
@@ -5654,11 +5708,11 @@ var mediaThemeMicrovideo = (() => {
       return this.constructor.formatErrorMessage(error);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3;
+      var _a4;
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (!observedAttributes.includes(attrName))
         return;
-      const mediaError = (_a3 = this.mediaError) != null ? _a3 : {
+      const mediaError = (_a4 = this.mediaError) != null ? _a4 : {
         code: this.mediaErrorCode,
         message: this.mediaErrorMessage
       };
@@ -5816,7 +5870,7 @@ var mediaThemeMicrovideo = (() => {
   }
 
   :host([${MEDIA_TIME_IS_LIVE}]:not([${MEDIA_PAUSED}])) {
-    cursor: not-allowed;
+    cursor: var(--media-cursor, not-allowed);
   }
 
   slot[name=text]{
@@ -6005,12 +6059,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if (attrName === Attributes5.LOADING_DELAY && oldValue !== newValue) {
         this.loadingDelay = Number(newValue);
       } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet12(this, _mediaController6)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet12(this, _mediaController6)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet12(this, _mediaController6, null);
         }
         if (newValue && this.isConnected) {
@@ -6020,20 +6074,20 @@ svg, img, ::slotted(svg), ::slotted(img) {
       }
     }
     connectedCallback() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const mediaControllerId = this.getAttribute(
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet12(this, _mediaController6, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
+        __privateSet12(this, _mediaController6, (_a4 = this.getRootNode()) == null ? void 0 : _a4.getElementById(
           mediaControllerId
         ));
         (_c = (_b2 = __privateGet12(this, _mediaController6)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
-      var _a3, _b2;
-      (_b2 = (_a3 = __privateGet12(this, _mediaController6)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      var _a4, _b2;
+      (_b2 = (_a4 = __privateGet12(this, _mediaController6)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet12(this, _mediaController6, null);
     }
     /**
@@ -6370,11 +6424,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
       setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
     }
     handleClick() {
-      var _a3, _b2;
+      var _a4, _b2;
       const availableRates = Array.from(this.rates.values(), (str) => +str).sort(
         (a, b) => a - b
       );
-      const detail = (_b2 = (_a3 = availableRates.find((r) => r > this.mediaPlaybackRate)) != null ? _a3 : availableRates[0]) != null ? _b2 : DEFAULT_RATE;
+      const detail = (_b2 = (_a4 = availableRates.find((r) => r > this.mediaPlaybackRate)) != null ? _a4 : availableRates[0]) != null ? _b2 : DEFAULT_RATE;
       const evt = new GlobalThis.CustomEvent(
         MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
         { composed: true, bubbles: true, detail }
@@ -6673,7 +6727,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       ];
     }
     connectedCallback() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const mediaControllerId = this.getAttribute(
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
@@ -6682,18 +6736,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
           this,
           _mediaController7,
           // @ts-ignore
-          (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId)
+          (_a4 = this.getRootNode()) == null ? void 0 : _a4.getElementById(mediaControllerId)
         );
         (_c = (_b2 = __privateGet15(this, _mediaController7)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
-      var _a3, _b2;
-      (_b2 = (_a3 = __privateGet15(this, _mediaController7)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      var _a4, _b2;
+      (_b2 = (_a4 = __privateGet15(this, _mediaController7)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet14(this, _mediaController7, null);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d, _e;
+      var _a4, _b2, _c, _d, _e;
       if ([
         MediaUIAttributes.MEDIA_PREVIEW_IMAGE,
         MediaUIAttributes.MEDIA_PREVIEW_COORDS
@@ -6702,7 +6756,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       }
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet15(this, _mediaController7)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet15(this, _mediaController7)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet14(this, _mediaController7, null);
         }
         if (newValue && this.isConnected) {
@@ -7051,10 +7105,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var ButtonPressedKeys2 = ["Enter", " "];
   var DEFAULT_TIMES_SEP = "&nbsp;/&nbsp;";
   var formatTimesLabel = (el, { timesSep = DEFAULT_TIMES_SEP } = {}) => {
-    var _a3, _b2;
+    var _a4, _b2;
     const showRemaining = el.hasAttribute(Attributes10.REMAINING);
     const showDuration = el.hasAttribute(Attributes10.SHOW_DURATION);
-    const currentTime = (_a3 = el.mediaCurrentTime) != null ? _a3 : 0;
+    const currentTime = (_a4 = el.mediaCurrentTime) != null ? _a4 : 0;
     const [, seekableEnd] = (_b2 = el.mediaSeekable) != null ? _b2 : [];
     let endTime = 0;
     if (Number.isFinite(el.mediaDuration)) {
@@ -7069,9 +7123,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   var DEFAULT_MISSING_TIME_PHRASE = "video not loaded, unknown time.";
   var updateAriaValueText = (el) => {
-    var _a3;
+    var _a4;
     const currentTime = el.mediaCurrentTime;
-    const [, seekableEnd] = (_a3 = el.mediaSeekable) != null ? _a3 : [];
+    const [, seekableEnd] = (_a4 = el.mediaSeekable) != null ? _a4 : [];
     let endTime = null;
     if (Number.isFinite(el.mediaDuration)) {
       endTime = el.mediaDuration;
@@ -7108,7 +7162,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.shadowRoot,
         ":host(:hover:not([notoggle]))"
       );
-      style.setProperty("cursor", "pointer");
+      style.setProperty("cursor", "var(--media-cursor, pointer)");
       style.setProperty(
         "background",
         "var(--media-control-hover-background, rgba(50 50 70 / .7))"
@@ -7715,18 +7769,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
       ];
     }
     connectedCallback() {
-      var _a3;
+      var _a4;
       super.connectedCallback();
       this.range.setAttribute("aria-label", t("seek"));
       __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
       __privateSet18(this, _rootNode, this.getRootNode());
-      (_a3 = __privateGet19(this, _rootNode)) == null ? void 0 : _a3.addEventListener("transitionstart", this);
+      (_a4 = __privateGet19(this, _rootNode)) == null ? void 0 : _a4.addEventListener("transitionstart", this);
     }
     disconnectedCallback() {
-      var _a3;
+      var _a4;
       super.disconnectedCallback();
       __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
-      (_a3 = __privateGet19(this, _rootNode)) == null ? void 0 : _a3.removeEventListener("transitionstart", this);
+      (_a4 = __privateGet19(this, _rootNode)) == null ? void 0 : _a4.removeEventListener("transitionstart", this);
       __privateSet18(this, _rootNode, null);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -7753,10 +7807,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
       return __privateGet19(this, _mediaChaptersCues);
     }
     set mediaChaptersCues(value) {
-      var _a3;
+      var _a4;
       __privateSet18(this, _mediaChaptersCues, value);
       this.updateSegments(
-        (_a3 = __privateGet19(this, _mediaChaptersCues)) == null ? void 0 : _a3.map((c) => ({
+        (_a4 = __privateGet19(this, _mediaChaptersCues)) == null ? void 0 : _a4.map((c) => ({
           start: calcRangeValueFromTime(this, c.startTime),
           end: calcRangeValueFromTime(this, c.endTime)
         }))
@@ -7846,13 +7900,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
      *
      */
     get mediaSeekableEnd() {
-      var _a3;
-      const [, end = this.mediaDuration] = (_a3 = this.mediaSeekable) != null ? _a3 : [];
+      var _a4;
+      const [, end = this.mediaDuration] = (_a4 = this.mediaSeekable) != null ? _a4 : [];
       return end;
     }
     get mediaSeekableStart() {
-      var _a3;
-      const [start = 0] = (_a3 = this.mediaSeekable) != null ? _a3 : [];
+      var _a4;
+      const [start = 0] = (_a4 = this.mediaSeekable) != null ? _a4 : [];
       return start;
     }
     /**
@@ -7889,7 +7943,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       this.updateCurrentBox();
     }
     updateBufferedBar() {
-      var _a3;
+      var _a4;
       const buffered = this.mediaBuffered;
       if (!buffered.length) {
         return;
@@ -7897,9 +7951,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
       let relativeBufferedEnd;
       if (!this.mediaEnded) {
         const currentTime = this.mediaCurrentTime;
-        const [, bufferedEnd = this.mediaSeekableStart] = (_a3 = buffered.find(
+        const [, bufferedEnd = this.mediaSeekableStart] = (_a4 = buffered.find(
           ([start, end]) => start <= currentTime && currentTime <= end
-        )) != null ? _a3 : [];
+        )) != null ? _a4 : [];
         relativeBufferedEnd = calcRangeValueFromTime(this, bufferedEnd);
       } else {
         relativeBufferedEnd = 1;
@@ -7975,8 +8029,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _updateRange = /* @__PURE__ */ new WeakMap();
   _getElementRects = /* @__PURE__ */ new WeakSet();
   getElementRects_fn = function(box) {
-    var _a3;
-    const bounds = (_a3 = this.getAttribute("bounds") ? closestComposedNode(this, `#${this.getAttribute("bounds")}`) : this.parentElement) != null ? _a3 : this;
+    var _a4;
+    const bounds = (_a4 = this.getAttribute("bounds") ? closestComposedNode(this, `#${this.getAttribute("bounds")}`) : this.parentElement) != null ? _a4 : this;
     const boundsRect = bounds.getBoundingClientRect();
     const rangeRect = this.range.getBoundingClientRect();
     const width = box.offsetWidth;
@@ -8203,7 +8257,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     constructor() {
       super();
       this.updateXOffset = () => {
-        var _a3;
+        var _a4;
         if (!isElementVisible(this, { checkOpacity: false, checkVisibilityCSS: false }))
           return;
         const placement = this.placement;
@@ -8212,7 +8266,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
           return;
         }
         const tooltipStyle = getComputedStyle(this);
-        const containingEl = (_a3 = closestComposedNode(this, "#" + this.bounds)) != null ? _a3 : getMediaController(this);
+        const containingEl = (_a4 = closestComposedNode(this, "#" + this.bounds)) != null ? _a4 : getMediaController(this);
         if (!containingEl)
           return;
         const { x: containerX, width: containerWidth } = containingEl.getBoundingClientRect();
@@ -8409,14 +8463,14 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   var TemplateInstance = class extends GlobalThis.DocumentFragment {
     constructor(template18, state, processor2 = defaultProcessor) {
-      var _a3;
+      var _a4;
       super();
       __privateAdd20(this, _parts, void 0);
       __privateAdd20(this, _processor, void 0);
       this.append(template18.content.cloneNode(true));
       __privateSet19(this, _parts, parse(this));
       __privateSet19(this, _processor, processor2);
-      (_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet20(this, _parts), state);
+      (_a4 = processor2.createCallback) == null ? void 0 : _a4.call(processor2, this, __privateGet20(this, _parts), state);
       processor2.processCallback(this, __privateGet20(this, _parts), state);
     }
     update(state) {
@@ -8704,7 +8758,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       state[part.expression] = new PartialTemplate(part.template);
     },
     if: (part, state) => {
-      var _a3;
+      var _a4;
       if (evaluateExpression(part.expression, state)) {
         if (templates.get(part) !== part.template) {
           templates.set(part, part.template);
@@ -8712,7 +8766,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
           part.replace(tpl);
           templateInstances.set(part, tpl);
         } else {
-          (_a3 = templateInstances.get(part)) == null ? void 0 : _a3.update(state);
+          (_a4 = templateInstances.get(part)) == null ? void 0 : _a4.update(state);
         }
       } else {
         part.replace("");
@@ -8724,7 +8778,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var DirectiveNames = Object.keys(Directives);
   var processor = {
     processCallback(instance, parts, state) {
-      var _a3, _b2;
+      var _a4, _b2;
       if (!state)
         return;
       for (const [expression, part] of parts) {
@@ -8738,7 +8792,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
               part.expression = part.template.getAttribute(directive);
             }
           }
-          (_a3 = Directives[part.directive]) == null ? void 0 : _a3.call(Directives, part, state);
+          (_a4 = Directives[part.directive]) == null ? void 0 : _a4.call(Directives, part, state);
           continue;
         }
         let value = evaluateExpression(expression, state);
@@ -8795,8 +8849,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
     "<=": (a, b) => a <= b,
     "??": (a, b) => a != null ? a : b,
     "|": (a, b) => {
-      var _a3;
-      return (_a3 = pipeModifiers[b]) == null ? void 0 : _a3.call(pipeModifiers, a);
+      var _a4;
+      return (_a4 = pipeModifiers[b]) == null ? void 0 : _a4.call(pipeModifiers, a);
     }
   };
   function tokenizeExpression(expr) {
@@ -8810,12 +8864,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }).filter(({ type }) => type !== "ws");
   }
   function evaluateExpression(expr, state = {}) {
-    var _a3, _b2, _c, _d, _e, _f, _g;
+    var _a4, _b2, _c, _d, _e, _f, _g;
     const tokens = tokenizeExpression(expr);
     if (tokens.length === 0 || tokens.some(({ type }) => !type)) {
       return invalidExpression(expr);
     }
-    if (((_a3 = tokens[0]) == null ? void 0 : _a3.token) === ">") {
+    if (((_a4 = tokens[0]) == null ? void 0 : _a4.token) === ">") {
       const partial = state[(_b2 = tokens[1]) == null ? void 0 : _b2.token];
       if (!partial) {
         return invalidExpression(expr);
@@ -8993,8 +9047,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.createRenderer();
       }
       const observer2 = new MutationObserver((mutationList) => {
-        var _a3;
-        if (this.mediaController && !((_a3 = this.mediaController) == null ? void 0 : _a3.breakpointsComputed))
+        var _a4;
+        if (this.mediaController && !((_a4 = this.mediaController) == null ? void 0 : _a4.breakpointsComputed))
           return;
         if (mutationList.some((mutation) => {
           const target = mutation.target;
@@ -9027,8 +9081,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       return this.renderRoot.querySelector("media-controller");
     }
     get template() {
-      var _a3;
-      return (_a3 = __privateGet21(this, _template)) != null ? _a3 : this.constructor.template;
+      var _a4;
+      return (_a4 = __privateGet21(this, _template)) != null ? _a4 : this.constructor.template;
     }
     set template(element) {
       __privateSet20(this, _prevTemplateId, null);
@@ -9036,9 +9090,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
       this.createRenderer();
     }
     get props() {
-      var _a3, _b2, _c;
+      var _a4, _b2, _c;
       const observedAttributes2 = [
-        ...Array.from((_b2 = (_a3 = this.mediaController) == null ? void 0 : _a3.attributes) != null ? _b2 : []).filter(
+        ...Array.from((_b2 = (_a4 = this.mediaController) == null ? void 0 : _a4.attributes) != null ? _b2 : []).filter(
           ({ name }) => {
             return observedMediaAttributes[name] || name.startsWith("breakpoint");
           }
@@ -9085,8 +9139,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       }
     }
     render() {
-      var _a3;
-      (_a3 = this.renderer) == null ? void 0 : _a3.update(this.props);
+      var _a4;
+      (_a4 = this.renderer) == null ? void 0 : _a4.update(this.props);
     }
   };
   _template = /* @__PURE__ */ new WeakMap();
@@ -9102,12 +9156,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _updateTemplate = /* @__PURE__ */ new WeakSet();
   updateTemplate_fn = function() {
-    var _a3;
+    var _a4;
     const templateId = this.getAttribute("template");
     if (!templateId || templateId === __privateGet21(this, _prevTemplateId))
       return;
     const rootNode = this.getRootNode();
-    const template18 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(rootNode, templateId);
+    const template18 = (_a4 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a4.call(rootNode, templateId);
     if (template18) {
       __privateSet20(this, _prevTemplateId, templateId);
       __privateSet20(this, _template, template18);
@@ -9175,9 +9229,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
     };
   }
   function getRectRelativeToOffsetParent(element, offsetParent) {
-    var _a3;
+    var _a4;
     const rect = element.getBoundingClientRect();
-    const offsetRect = (_a3 = offsetParent == null ? void 0 : offsetParent.getBoundingClientRect()) != null ? _a3 : { x: 0, y: 0 };
+    const offsetRect = (_a4 = offsetParent == null ? void 0 : offsetParent.getBoundingClientRect()) != null ? _a4 : { x: 0, y: 0 };
     return {
       x: rect.x - offsetRect.x,
       y: rect.y - offsetRect.y,
@@ -9451,12 +9505,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
     slot[name="header"]::slotted(*) {
       padding: .4em .7em;
       border-bottom: 1px solid rgb(255 255 255 / .25);
-      cursor: default;
+      cursor: var(--media-cursor, default);
     }
 
     slot[name="header"] > button[part~="back"],
     slot[name="header"]::slotted(button[part~="back"]) {
-      cursor: pointer;
+      cursor: var(--media-cursor, pointer);
     }
 
     svg[part~="back"] {
@@ -9648,7 +9702,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       }
     }
     connectedCallback() {
-      var _a3, _b2;
+      var _a4, _b2;
       __privateSet21(this, _cssRule, insertCSSRule(this.shadowRoot, ":host"));
       __privateMethod8(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
       if (!this.hasAttribute("disabled")) {
@@ -9658,22 +9712,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.role = "menu";
       }
       __privateSet21(this, _mediaController8, getAttributeMediaController(this));
-      (_b2 = (_a3 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a4 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a4.associateElement) == null ? void 0 : _b2.call(_a4, this);
       if (!this.hidden) {
         observeResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
         observeResize(this, __privateGet22(this, _handleMenuResize));
       }
     }
     disconnectedCallback() {
-      var _a3, _b2;
+      var _a4, _b2;
       unobserveResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
       unobserveResize(this, __privateGet22(this, _handleMenuResize));
       this.disable();
-      (_b2 = (_a3 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a4 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
       __privateSet21(this, _mediaController8, null);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      var _a3, _b2, _c, _d;
+      var _a4, _b2, _c, _d;
       if (attrName === Attributes12.HIDDEN && newValue !== oldValue) {
         if (!__privateGet22(this, _isPopover))
           __privateSet21(this, _isPopover, true);
@@ -9691,7 +9745,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         );
       } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a4 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a4.unassociateElement) == null ? void 0 : _b2.call(_a4, this);
           __privateSet21(this, _mediaController8, null);
         }
         if (newValue && this.isConnected) {
@@ -9724,9 +9778,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * Returns the anchor element when it is a floating menu.
      */
     get anchorElement() {
-      var _a3;
+      var _a4;
       if (this.anchor) {
-        return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
+        return (_a4 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a4.querySelector(
           `#${this.anchor}`
         );
       }
@@ -9745,8 +9799,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       return this.items.filter((item) => item.checked);
     }
     get value() {
-      var _a3, _b2;
-      return (_b2 = (_a3 = this.checkedItems[0]) == null ? void 0 : _a3.value) != null ? _b2 : "";
+      var _a4, _b2;
+      return (_b2 = (_a4 = this.checkedItems[0]) == null ? void 0 : _a4.value) != null ? _b2 : "";
     }
     set value(newValue) {
       const item = this.items.find((item2) => item2.value === newValue);
@@ -9767,13 +9821,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
       focusable == null ? void 0 : focusable.focus();
     }
     handleSelect(event) {
-      var _a3;
+      var _a4;
       const item = __privateMethod8(this, _getItem, getItem_fn).call(this, event);
       if (!item)
         return;
       __privateMethod8(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
       if (__privateGet22(this, _invokerElement2) && !this.hidden) {
-        (_a3 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+        (_a4 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a4.focus();
         this.hidden = true;
       }
     }
@@ -9790,10 +9844,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
       ];
     }
     handleMove(event) {
-      var _a3, _b2;
+      var _a4, _b2;
       const { key } = event;
       const items = this.items;
-      const currentItem = (_b2 = (_a3 = __privateMethod8(this, _getItem, getItem_fn).call(this, event)) != null ? _a3 : __privateMethod8(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b2 : items[0];
+      const currentItem = (_b2 = (_a4 = __privateMethod8(this, _getItem, getItem_fn).call(this, event)) != null ? _a4 : __privateMethod8(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b2 : items[0];
       const currentIndex = items.indexOf(currentItem);
       let index = Math.max(0, currentIndex);
       if (key === "ArrowDown") {
@@ -9843,9 +9897,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _handleMenuItems = /* @__PURE__ */ new WeakMap();
   _updateLayoutStyle = /* @__PURE__ */ new WeakSet();
   updateLayoutStyle_fn = function() {
-    var _a3;
+    var _a4;
     const layoutRowStyle = this.shadowRoot.querySelector("#layout-row");
-    const menuLayout = (_a3 = getComputedStyle(this).getPropertyValue("--media-menu-layout")) == null ? void 0 : _a3.trim();
+    const menuLayout = (_a4 = getComputedStyle(this).getPropertyValue("--media-menu-layout")) == null ? void 0 : _a4.trim();
     layoutRowStyle.setAttribute("media", menuLayout === "row" ? "" : "width:0");
   };
   _handleInvoke2 = /* @__PURE__ */ new WeakSet();
@@ -9857,16 +9911,16 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _handleOpen2 = /* @__PURE__ */ new WeakSet();
   handleOpen_fn2 = function() {
-    var _a3;
-    (_a3 = __privateGet22(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
+    var _a4;
+    (_a4 = __privateGet22(this, _invokerElement2)) == null ? void 0 : _a4.setAttribute("aria-expanded", "true");
     this.addEventListener("transitionend", () => this.focus(), { once: true });
     observeResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
     observeResize(this, __privateGet22(this, _handleMenuResize));
   };
   _handleClosed2 = /* @__PURE__ */ new WeakSet();
   handleClosed_fn2 = function() {
-    var _a3;
-    (_a3 = __privateGet22(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    var _a4;
+    (_a4 = __privateGet22(this, _invokerElement2)) == null ? void 0 : _a4.setAttribute("aria-expanded", "false");
     unobserveResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
     unobserveResize(this, __privateGet22(this, _handleMenuResize));
   };
@@ -9928,10 +9982,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _handleClick = /* @__PURE__ */ new WeakSet();
   handleClick_fn = function(event) {
-    var _a3;
+    var _a4;
     event.stopPropagation();
     if (event.composedPath().includes(__privateGet22(this, _backButtonElement, backButtonElement_get))) {
-      (_a3 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+      (_a4 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a4.focus();
       this.hidden = true;
       return;
     }
@@ -9943,11 +9997,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _backButtonElement = /* @__PURE__ */ new WeakSet();
   backButtonElement_get = function() {
-    var _a3;
+    var _a4;
     const headerSlot = this.shadowRoot.querySelector(
       'slot[name="header"]'
     );
-    return (_a3 = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a3.find((el) => el.matches('button[part~="back"]'));
+    return (_a4 = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a4.find((el) => el.matches('button[part~="back"]'));
   };
   _handleToggle = /* @__PURE__ */ new WeakSet();
   handleToggle_fn = function(event) {
@@ -9979,10 +10033,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _handleFocusOut2 = /* @__PURE__ */ new WeakSet();
   handleFocusOut_fn2 = function(event) {
-    var _a3;
+    var _a4;
     if (!containsComposedNode(this, event.relatedTarget)) {
       if (__privateGet22(this, _isPopover)) {
-        (_a3 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+        (_a4 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a4.focus();
       }
       if (__privateGet22(this, _invokerElement2) && __privateGet22(this, _invokerElement2) !== event.relatedTarget && !this.hidden) {
         this.hidden = true;
@@ -9991,7 +10045,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _handleKeyDown2 = /* @__PURE__ */ new WeakSet();
   handleKeyDown_fn2 = function(event) {
-    var _a3, _b2, _c, _d, _e;
+    var _a4, _b2, _c, _d, _e;
     const { key, ctrlKey, altKey, metaKey } = event;
     if (ctrlKey || altKey || metaKey) {
       return;
@@ -10007,7 +10061,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         return;
       }
       if (event.shiftKey) {
-        (_b2 = (_a3 = this.previousElementSibling) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3);
+        (_b2 = (_a4 = this.previousElementSibling) == null ? void 0 : _a4.focus) == null ? void 0 : _b2.call(_a4);
       } else {
         (_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
       }
@@ -10065,8 +10119,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
   function getBoundsElement(host) {
-    var _a3;
-    return (_a3 = host.getAttribute("bounds") ? closestComposedNode(host, `#${host.getAttribute("bounds")}`) : getMediaController(host) || host.parentElement) != null ? _a3 : host;
+    var _a4;
+    return (_a4 = host.getAttribute("bounds") ? closestComposedNode(host, `#${host.getAttribute("bounds")}`) : getMediaController(host) || host.parentElement) != null ? _a4 : host;
   }
   if (!GlobalThis.customElements.get("media-chrome-menu")) {
     GlobalThis.customElements.define("media-chrome-menu", MediaChromeMenu);
@@ -10121,7 +10175,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       );
       outline: var(--media-menu-item-outline, 0);
       outline-offset: var(--media-menu-item-outline-offset, -1px);
-      cursor: pointer;
+      cursor: var(--media-cursor, pointer);
       display: flex;
       align-items: center;
       align-self: stretch;
@@ -10139,7 +10193,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
 
     :host(:hover) {
-      cursor: pointer;
+      cursor: var(--media-cursor, pointer);
       background: var(--media-menu-item-hover-background, rgb(92 92 102 / .5));
       outline: var(--media-menu-item-hover-outline);
       outline-offset: var(--media-menu-item-hover-outline-offset,  var(--media-menu-item-outline-offset, -1px));
@@ -10249,12 +10303,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
       __privateAdd23(this, _dirty, false);
       __privateAdd23(this, _ownerElement, void 0);
       __privateAdd23(this, _handleMenuItem, () => {
-        var _a3, _b2;
+        var _a4, _b2;
         this.setAttribute("submenusize", `${this.submenuElement.items.length}`);
         const descriptionSlot = this.shadowRoot.querySelector(
           'slot[name="description"]'
         );
-        const checkedItem = (_a3 = this.submenuElement.checkedItems) == null ? void 0 : _a3[0];
+        const checkedItem = (_a4 = this.submenuElement.checkedItems) == null ? void 0 : _a4[0];
         const description = (_b2 = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b2 : checkedItem == null ? void 0 : checkedItem.text;
         const span = Document2.createElement("span");
         span.textContent = description != null ? description : "";
@@ -10343,9 +10397,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * or the slotted submenu element.
      */
     get invokeTargetElement() {
-      var _a3;
+      var _a4;
       if (this.invokeTarget) {
-        return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
+        return (_a4 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a4.querySelector(
           `#${this.invokeTarget}`
         );
       }
@@ -10363,22 +10417,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
       })[0];
     }
     get type() {
-      var _a3;
-      return (_a3 = this.getAttribute(Attributes13.TYPE)) != null ? _a3 : "";
+      var _a4;
+      return (_a4 = this.getAttribute(Attributes13.TYPE)) != null ? _a4 : "";
     }
     set type(val) {
       this.setAttribute(Attributes13.TYPE, `${val}`);
     }
     get value() {
-      var _a3;
-      return (_a3 = this.getAttribute(Attributes13.VALUE)) != null ? _a3 : this.text;
+      var _a4;
+      return (_a4 = this.getAttribute(Attributes13.VALUE)) != null ? _a4 : this.text;
     }
     set value(val) {
       this.setAttribute(Attributes13.VALUE, val);
     }
     get text() {
-      var _a3;
-      return ((_a3 = this.textContent) != null ? _a3 : "").trim();
+      var _a4;
+      return ((_a4 = this.textContent) != null ? _a4 : "").trim();
     }
     get checked() {
       if (!isCheckable(this))
@@ -10478,8 +10532,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _reset = /* @__PURE__ */ new WeakSet();
   reset_fn = function() {
-    var _a3;
-    const items = (_a3 = __privateGet23(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
+    var _a4;
+    const items = (_a4 = __privateGet23(this, _ownerElement)) == null ? void 0 : _a4.radioGroupItems;
     if (!items)
       return;
     let checkedItem = items.filter((item) => item.getAttribute("aria-checked") === "true").pop();
@@ -10568,7 +10622,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-settings-menu-item.js
-  var _a;
+  var _a2;
   var template15 = Document2.createElement("template");
   template15.innerHTML = MediaChromeMenuItem.template.innerHTML + /*html*/
   `
@@ -10582,7 +10636,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
   </style>
 `;
-  if ((_a = template15.content) == null ? void 0 : _a.querySelector) {
+  if ((_a2 = template15.content) == null ? void 0 : _a2.querySelector) {
     template15.content.querySelector('slot[name="suffix"]').innerHTML = /*html*/
     `
     <svg aria-hidden="true" viewBox="0 0 20 24">
@@ -10619,17 +10673,17 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * @return {HTMLElement | null}
      */
     get invokeTargetElement() {
-      var _a3;
+      var _a4;
       if (this.invokeTarget) {
-        return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
+        return (_a4 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a4.querySelector(
           `#${this.invokeTarget}`
         );
       }
       return null;
     }
     handleClick() {
-      var _a3;
-      (_a3 = this.invokeTargetElement) == null ? void 0 : _a3.dispatchEvent(
+      var _a4;
+      (_a4 = this.invokeTargetElement) == null ? void 0 : _a4.dispatchEvent(
         new InvokeEvent({ relatedTarget: this })
       );
     }
@@ -10750,10 +10804,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * Returns the anchor element when it is a floating menu.
      */
     get anchorElement() {
-      var _a3;
+      var _a4;
       if (this.anchor !== "auto")
         return super.anchorElement;
-      return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector(
+      return (_a4 = getMediaController(this)) == null ? void 0 : _a4.querySelector(
         "media-audio-track-menu-button"
       );
     }
@@ -10768,8 +10822,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * Get enabled audio track id.
      */
     get mediaAudioTrackEnabled() {
-      var _a3;
-      return (_a3 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a3 : "";
+      var _a4;
+      return (_a4 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a4 : "";
     }
     set mediaAudioTrackEnabled(id) {
       setStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
@@ -10858,18 +10912,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * @return {HTMLElement | null}
      */
     get invokeTargetElement() {
-      var _a3;
+      var _a4;
       if (this.invokeTarget != void 0)
         return super.invokeTargetElement;
-      return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector("media-audio-track-menu");
+      return (_a4 = getMediaController(this)) == null ? void 0 : _a4.querySelector("media-audio-track-menu");
     }
     /**
      * Get enabled audio track id.
      * @return {string}
      */
     get mediaAudioTrackEnabled() {
-      var _a3;
-      return (_a3 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a3 : "";
+      var _a4;
+      return (_a4 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a4 : "";
     }
     set mediaAudioTrackEnabled(id) {
       setStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
@@ -10986,7 +11040,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _prevState2 = /* @__PURE__ */ new WeakMap();
   _render2 = /* @__PURE__ */ new WeakSet();
   render_fn2 = function() {
-    var _a3;
+    var _a4;
     if (__privateGet25(this, _prevState2) === JSON.stringify(this.mediaSubtitlesList))
       return;
     __privateSet24(this, _prevState2, JSON.stringify(this.mediaSubtitlesList));
@@ -11009,7 +11063,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         checked: this.value == formatTextTrackObj(subs)
       });
       item2.prepend(createIndicator(this, "checked-indicator"));
-      const type = (_a3 = subs.kind) != null ? _a3 : "subs";
+      const type = (_a4 = subs.kind) != null ? _a4 : "subs";
       if (type === "captions") {
         item2.append(createIndicator(this, "captions-indicator"));
       }
@@ -11145,10 +11199,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * @return {HTMLElement | null}
      */
     get invokeTargetElement() {
-      var _a3;
+      var _a4;
       if (this.invokeTarget != void 0)
         return super.invokeTargetElement;
-      return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector("media-captions-menu");
+      return (_a4 = getMediaController(this)) == null ? void 0 : _a4.querySelector("media-captions-menu");
     }
     /**
      * An array of TextTrack-like objects.
@@ -11670,8 +11724,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
   }
 
   // ../../node_modules/player.style/themes/microvideo/dist/media-theme.js
-  var _a2, _b;
-  var template17 = (_b = (_a2 = GlobalThis.document) == null ? void 0 : _a2.createElement) == null ? void 0 : _b.call(_a2, "template");
+  var _a3, _b;
+  var template17 = (_b = (_a3 = GlobalThis.document) == null ? void 0 : _a3.createElement) == null ? void 0 : _b.call(_a3, "template");
   if (template17) {
     template17.innerHTML = /*html*/
     `