@mux/mux-player 3.11.9-canary.2 → 3.12.0

package/dist/themes/microvideo/index.js

@@ -231,84 +231,6 @@ var mediaThemeMicrovideo = (() => {
   }
   var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
-  // ../../node_modules/media-chrome/dist/utils/time.js
-  var UnitLabels = [
-    {
-      singular: "hour",
-      plural: "hours"
-    },
-    {
-      singular: "minute",
-      plural: "minutes"
-    },
-    {
-      singular: "second",
-      plural: "seconds"
-    }
-  ];
-  var toTimeUnitPhrase = (timeUnitValue, unitIndex) => {
-    const unitLabel = timeUnitValue === 1 ? UnitLabels[unitIndex].singular : UnitLabels[unitIndex].plural;
-    return `${timeUnitValue} ${unitLabel}`;
-  };
-  var formatAsTimePhrase = (seconds) => {
-    if (!isValidNumber(seconds))
-      return "";
-    const positiveSeconds = Math.abs(seconds);
-    const negative = positiveSeconds !== seconds;
-    const secondsDateTime = new Date(0, 0, 0, 0, 0, positiveSeconds, 0);
-    const timeParts = [
-      secondsDateTime.getHours(),
-      secondsDateTime.getMinutes(),
-      secondsDateTime.getSeconds()
-    ];
-    const timeString = timeParts.map(
-      (timeUnitValue, index) => timeUnitValue && toTimeUnitPhrase(timeUnitValue, index)
-    ).filter((x) => x).join(", ");
-    const negativeSuffix = negative ? " remaining" : "";
-    return `${timeString}${negativeSuffix}`;
-  };
-  function formatTime(seconds, guide) {
-    let negative = false;
-    if (seconds < 0) {
-      negative = true;
-      seconds = 0 - seconds;
-    }
-    seconds = seconds < 0 ? 0 : seconds;
-    let s = Math.floor(seconds % 60);
-    let m = Math.floor(seconds / 60 % 60);
-    let h = Math.floor(seconds / 3600);
-    const gm = Math.floor(guide / 60 % 60);
-    const gh = Math.floor(guide / 3600);
-    if (isNaN(seconds) || seconds === Infinity) {
-      h = m = s = "0";
-    }
-    h = h > 0 || gh > 0 ? h + ":" : "";
-    m = ((h || gm >= 10) && m < 10 ? "0" + m : m) + ":";
-    s = s < 10 ? "0" + s : s;
-    return (negative ? "-" : "") + h + m + s;
-  }
-  var emptyTimeRanges = Object.freeze({
-    length: 0,
-    start(index) {
-      const unsignedIdx = index >>> 0;
-      if (unsignedIdx >= this.length) {
-        throw new DOMException(
-          `Failed to execute 'start' on 'TimeRanges': The index provided (${unsignedIdx}) is greater than or equal to the maximum bound (${this.length}).`
-        );
-      }
-      return 0;
-    },
-    end(index) {
-      const unsignedIdx = index >>> 0;
-      if (unsignedIdx >= this.length) {
-        throw new DOMException(
-          `Failed to execute 'end' on 'TimeRanges': The index provided (${unsignedIdx}) is greater than or equal to the maximum bound (${this.length}).`
-        );
-      }
-      return 0;
-    }
-  });
-
   // ../../node_modules/media-chrome/dist/lang/en.js
   var En = {
     "Start airplay": "Start airplay",
@@ -372,7 +294,16 @@ var mediaThemeMicrovideo = (() => {
     "A network error caused the media download to fail.": "A network error caused the media download to fail.",
     "A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.": "A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.",
     "An unsupported error occurred. The server or network failed, or your browser does not support this format.": "An unsupported error occurred. The server or network failed, or your browser does not support this format.",
-    "The media is encrypted and there are no keys to decrypt it.": "The media is encrypted and there are no keys to decrypt it."
+    "The media is encrypted and there are no keys to decrypt it.": "The media is encrypted and there are no keys to decrypt it.",
+    hour: "hour",
+    hours: "hours",
+    minute: "minute",
+    minutes: "minutes",
+    second: "second",
+    seconds: "seconds",
+    "{time} remaining": "{time} remaining",
+    "{currentTime} of {totalTime}": "{currentTime} of {totalTime}",
+    "video not loaded, unknown time.": "video not loaded, unknown time."
   };
 
   // ../../node_modules/media-chrome/dist/utils/i18n.js
@@ -394,6 +325,86 @@ var mediaThemeMicrovideo = (() => {
     (_, v) => v in vars ? String(vars[v]) : `{${v}}`
   );
 
+  // ../../node_modules/media-chrome/dist/utils/time.js
+  var UnitLabels = [
+    {
+      singular: "hour",
+      plural: "hours"
+    },
+    {
+      singular: "minute",
+      plural: "minutes"
+    },
+    {
+      singular: "second",
+      plural: "seconds"
+    }
+  ];
+  var toTimeUnitPhrase = (timeUnitValue, unitIndex) => {
+    const unitLabel = timeUnitValue === 1 ? t(UnitLabels[unitIndex].singular) : t(UnitLabels[unitIndex].plural);
+    return `${timeUnitValue} ${unitLabel}`;
+  };
+  var formatAsTimePhrase = (seconds) => {
+    if (!isValidNumber(seconds))
+      return "";
+    const positiveSeconds = Math.abs(seconds);
+    const negative = positiveSeconds !== seconds;
+    const secondsDateTime = new Date(0, 0, 0, 0, 0, positiveSeconds, 0);
+    const timeParts = [
+      secondsDateTime.getHours(),
+      secondsDateTime.getMinutes(),
+      secondsDateTime.getSeconds()
+    ];
+    const timeString = timeParts.map(
+      (timeUnitValue, index) => timeUnitValue && toTimeUnitPhrase(timeUnitValue, index)
+    ).filter((x) => x).join(", ");
+    if (negative) {
+      return t("{time} remaining", { time: timeString });
+    }
+    return timeString;
+  };
+  function formatTime(seconds, guide) {
+    let negative = false;
+    if (seconds < 0) {
+      negative = true;
+      seconds = 0 - seconds;
+    }
+    seconds = seconds < 0 ? 0 : seconds;
+    let s = Math.floor(seconds % 60);
+    let m = Math.floor(seconds / 60 % 60);
+    let h = Math.floor(seconds / 3600);
+    const gm = Math.floor(guide / 60 % 60);
+    const gh = Math.floor(guide / 3600);
+    if (isNaN(seconds) || seconds === Infinity) {
+      h = m = s = "0";
+    }
+    h = h > 0 || gh > 0 ? h + ":" : "";
+    m = ((h || gm >= 10) && m < 10 ? "0" + m : m) + ":";
+    s = s < 10 ? "0" + s : s;
+    return (negative ? "-" : "") + h + m + s;
+  }
+  var emptyTimeRanges = Object.freeze({
+    length: 0,
+    start(index) {
+      const unsignedIdx = index >>> 0;
+      if (unsignedIdx >= this.length) {
+        throw new DOMException(
+          `Failed to execute 'start' on 'TimeRanges': The index provided (${unsignedIdx}) is greater than or equal to the maximum bound (${this.length}).`
+        );
+      }
+      return 0;
+    },
+    end(index) {
+      const unsignedIdx = index >>> 0;
+      if (unsignedIdx >= this.length) {
+        throw new DOMException(
+          `Failed to execute 'end' on 'TimeRanges': The index provided (${unsignedIdx}) is greater than or equal to the maximum bound (${this.length}).`
+        );
+      }
+      return 0;
+    }
+  });
+
   // ../../node_modules/media-chrome/dist/utils/server-safe-globals.js
   var EventTarget = class {
     addEventListener() {
@@ -669,11 +680,8 @@ var mediaThemeMicrovideo = (() => {
         }
       };
     }
-    style == null ? void 0 : style.sheet.insertRule(`${selectorText}{}`, style.sheet.cssRules.length);
-    return (
-      /** @type {CSSStyleRule} */
-      (_b2 = style.sheet.cssRules) == null ? void 0 : _b2[style.sheet.cssRules.length - 1]
-    );
+    const cssRuleId = style == null ? void 0 : style.sheet.insertRule(`${selectorText}{}`, style.sheet.cssRules.length);
+    return (_b2 = style.sheet.cssRules) == null ? void 0 : _b2[cssRuleId];
   }
   function getNumericAttr(el, attrName, defaultValue = Number.NaN) {
     const attrVal = el.getAttribute(attrName);
@@ -787,15 +795,20 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      var _a3, _b2, _c, _d;
+      var _a3, _b2;
       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);
       }
-      (_c = __privateGet(this, _mediaController)) == null ? void 0 : _c.addEventListener("pointerdown", this);
-      (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.addEventListener("click", this);
+      if (!__privateGet(this, _mediaController))
+        return;
+      __privateGet(this, _mediaController).addEventListener("pointerdown", this);
+      __privateGet(this, _mediaController).addEventListener("click", this);
+      if (!__privateGet(this, _mediaController).hasAttribute("tabindex")) {
+        __privateGet(this, _mediaController).tabIndex = 0;
+      }
     }
     disconnectedCallback() {
       var _a3, _b2, _c, _d;
@@ -904,13 +917,12 @@ var mediaThemeMicrovideo = (() => {
     __accessCheck2(obj, member, "access private method");
     return method;
   };
+  var _mutationObserver;
   var _pointerDownTimeStamp;
   var _currentMedia;
   var _inactiveTimeout;
   var _autohide;
-  var _mutationObserver;
   var _handleMutation;
-  var handleMutation_fn;
   var _isResizePending;
   var _handleResize;
   var _handlePointerMove;
@@ -923,6 +935,8 @@ var mediaThemeMicrovideo = (() => {
   var setActive_fn;
   var _scheduleInactive;
   var scheduleInactive_fn;
+  var _chainedSlot;
+  var _handleSlotChange;
   var Attributes = {
     AUDIO: "audio",
     AUTOHIDE: "autohide",
@@ -1170,18 +1184,47 @@ var mediaThemeMicrovideo = (() => {
   var MediaContainer = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd2(this, _handleMutation);
       __privateAdd2(this, _handlePointerMove);
       __privateAdd2(this, _handlePointerUp);
       __privateAdd2(this, _setInactive);
       __privateAdd2(this, _setActive);
       __privateAdd2(this, _scheduleInactive);
+      __privateAdd2(this, _mutationObserver, void 0);
       __privateAdd2(this, _pointerDownTimeStamp, 0);
       __privateAdd2(this, _currentMedia, null);
       __privateAdd2(this, _inactiveTimeout, null);
       __privateAdd2(this, _autohide, void 0);
       this.breakpointsComputed = false;
-      __privateAdd2(this, _mutationObserver, new MutationObserver(__privateMethod(this, _handleMutation, handleMutation_fn).bind(this)));
+      __privateAdd2(this, _handleMutation, (mutationsList) => {
+        const media = this.media;
+        for (const mutation of mutationsList) {
+          if (mutation.type !== "childList")
+            continue;
+          const removedNodes = mutation.removedNodes;
+          for (const node of removedNodes) {
+            if (node.slot != "media" || mutation.target != this)
+              continue;
+            let previousSibling = mutation.previousSibling && mutation.previousSibling.previousElementSibling;
+            if (!previousSibling || !media) {
+              this.mediaUnsetCallback(node);
+            } else {
+              let wasFirst = previousSibling.slot !== "media";
+              while ((previousSibling = previousSibling.previousSibling) !== null) {
+                if (previousSibling.slot == "media")
+                  wasFirst = false;
+              }
+              if (wasFirst)
+                this.mediaUnsetCallback(node);
+            }
+          }
+          if (media) {
+            for (const node of mutation.addedNodes) {
+              if (node === media)
+                this.handleMediaUpdated(media);
+            }
+          }
+        }
+      });
       __privateAdd2(this, _isResizePending, false);
       __privateAdd2(this, _handleResize, (entry) => {
         if (__privateGet2(this, _isResizePending))
@@ -1192,27 +1235,24 @@ var mediaThemeMicrovideo = (() => {
         }, 0);
         __privateSet2(this, _isResizePending, true);
       });
+      __privateAdd2(this, _chainedSlot, void 0);
+      __privateAdd2(this, _handleSlotChange, () => {
+        const slotEls = __privateGet2(this, _chainedSlot).assignedElements({ flatten: true });
+        if (!slotEls.length) {
+          if (__privateGet2(this, _currentMedia)) {
+            this.mediaUnsetCallback(__privateGet2(this, _currentMedia));
+          }
+          return;
+        }
+        this.handleMediaUpdated(this.media);
+      });
       if (!this.shadowRoot) {
         this.attachShadow(this.constructor.shadowRootOptions);
         const attrs = namedNodeMapToObject(this.attributes);
         const html = this.constructor.getTemplateHTML(attrs);
         this.shadowRoot.setHTMLUnsafe ? this.shadowRoot.setHTMLUnsafe(html) : this.shadowRoot.innerHTML = html;
       }
-      const chainedSlot = this.querySelector(
-        ":scope > slot[slot=media]"
-      );
-      if (chainedSlot) {
-        chainedSlot.addEventListener("slotchange", () => {
-          const slotEls = chainedSlot.assignedElements({ flatten: true });
-          if (!slotEls.length) {
-            if (__privateGet2(this, _currentMedia)) {
-              this.mediaUnsetCallback(__privateGet2(this, _currentMedia));
-            }
-            return;
-          }
-          this.handleMediaUpdated(this.media);
-        });
-      }
+      __privateSet2(this, _mutationObserver, new MutationObserver(__privateGet2(this, _handleMutation)));
     }
     static get observedAttributes() {
       return [Attributes.AUTOHIDE, Attributes.GESTURES_DISABLED].concat(MEDIA_UI_ATTRIBUTE_NAMES).filter(
@@ -1260,6 +1300,13 @@ var mediaThemeMicrovideo = (() => {
       this.handleMediaUpdated(this.media);
       this.setAttribute(Attributes.USER_INACTIVE, "");
       setBreakpoints(this, this.getBoundingClientRect().width);
+      const chainedSlot = this.querySelector(
+        ":scope > slot[slot=media]"
+      );
+      if (chainedSlot) {
+        __privateSet2(this, _chainedSlot, chainedSlot);
+        __privateGet2(this, _chainedSlot).addEventListener("slotchange", __privateGet2(this, _handleSlotChange));
+      }
       this.addEventListener("pointerdown", this);
       this.addEventListener("pointermove", this);
       this.addEventListener("pointerup", this);
@@ -1269,12 +1316,23 @@ var mediaThemeMicrovideo = (() => {
     }
     disconnectedCallback() {
       var _a3;
-      __privateGet2(this, _mutationObserver).disconnect();
       unobserveResize(this, __privateGet2(this, _handleResize));
+      clearTimeout(__privateGet2(this, _inactiveTimeout));
+      __privateGet2(this, _mutationObserver).disconnect();
       if (this.media) {
         this.mediaUnsetCallback(this.media);
       }
       (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("mouseup", this);
+      this.removeEventListener("pointerdown", this);
+      this.removeEventListener("pointermove", this);
+      this.removeEventListener("pointerup", this);
+      this.removeEventListener("mouseleave", this);
+      this.removeEventListener("keyup", this);
+      if (__privateGet2(this, _chainedSlot)) {
+        __privateGet2(this, _chainedSlot).removeEventListener("slotchange", __privateGet2(this, _handleSlotChange));
+        __privateSet2(this, _chainedSlot, null);
+      }
+      __privateSet2(this, _isResizePending, false);
     }
     /**
      * @abstract
@@ -1357,42 +1415,12 @@ var mediaThemeMicrovideo = (() => {
       setBooleanAttr(this, Attributes.USER_INACTIVE, value);
     }
   };
+  _mutationObserver = /* @__PURE__ */ new WeakMap();
   _pointerDownTimeStamp = /* @__PURE__ */ new WeakMap();
   _currentMedia = /* @__PURE__ */ new WeakMap();
   _inactiveTimeout = /* @__PURE__ */ new WeakMap();
   _autohide = /* @__PURE__ */ new WeakMap();
-  _mutationObserver = /* @__PURE__ */ new WeakMap();
-  _handleMutation = /* @__PURE__ */ new WeakSet();
-  handleMutation_fn = function(mutationsList) {
-    const media = this.media;
-    for (const mutation of mutationsList) {
-      if (mutation.type !== "childList")
-        continue;
-      const removedNodes = mutation.removedNodes;
-      for (const node of removedNodes) {
-        if (node.slot != "media" || mutation.target != this)
-          continue;
-        let previousSibling = mutation.previousSibling && mutation.previousSibling.previousElementSibling;
-        if (!previousSibling || !media) {
-          this.mediaUnsetCallback(node);
-        } else {
-          let wasFirst = previousSibling.slot !== "media";
-          while ((previousSibling = previousSibling.previousSibling) !== null) {
-            if (previousSibling.slot == "media")
-              wasFirst = false;
-          }
-          if (wasFirst)
-            this.mediaUnsetCallback(node);
-        }
-      }
-      if (media) {
-        for (const node of mutation.addedNodes) {
-          if (node === media)
-            this.handleMediaUpdated(media);
-        }
-      }
-    }
-  };
+  _handleMutation = /* @__PURE__ */ new WeakMap();
   _isResizePending = /* @__PURE__ */ new WeakMap();
   _handleResize = /* @__PURE__ */ new WeakMap();
   _handlePointerMove = /* @__PURE__ */ new WeakSet();
@@ -1463,6 +1491,8 @@ var mediaThemeMicrovideo = (() => {
       __privateMethod(this, _setInactive, setInactive_fn).call(this);
     }, autohide * 1e3));
   };
+  _chainedSlot = /* @__PURE__ */ new WeakMap();
+  _handleSlotChange = /* @__PURE__ */ new WeakMap();
   MediaContainer.shadowRootOptions = { mode: "open" };
   MediaContainer.getTemplateHTML = getTemplateHTML2;
   if (!GlobalThis.customElements.get("media-container")) {
@@ -1811,10 +1841,10 @@ var mediaThemeMicrovideo = (() => {
       let subTrack = tracks[0];
       const { options } = stateOwners;
       if (!(options == null ? void 0 : options.noSubtitlesLangPref)) {
-        const subtitlesPref = globalThis.localStorage.getItem(
+        const subtitlesPref = GlobalThis.localStorage.getItem(
           "media-chrome-pref-subtitles-lang"
         );
-        const userLangPrefs = subtitlesPref ? [subtitlesPref, ...globalThis.navigator.languages] : globalThis.navigator.languages;
+        const userLangPrefs = subtitlesPref ? [subtitlesPref, ...GlobalThis.navigator.languages] : GlobalThis.navigator.languages;
         const preferredAvailableSubs = tracks.filter((textTrack) => {
           return userLangPrefs.some(
             (lang) => textTrack.language.toLowerCase().startsWith(lang.split("-")[0])
@@ -2533,14 +2563,14 @@ var mediaThemeMicrovideo = (() => {
         return isFullscreen(stateOwners);
       },
       set(value, stateOwners, event) {
-        var _a3;
+        var _a3, _b2;
         if (!value) {
           exitFullscreen(stateOwners);
         } else {
           enterFullscreen(stateOwners);
           const isPointer = event.detail;
-          if (isPointer)
-            (_a3 = stateOwners.media) == null ? void 0 : _a3.focus();
+          if (isPointer && !((_a3 = stateOwners.media) == null ? void 0 : _a3.inert))
+            (_b2 = stateOwners.media) == null ? void 0 : _b2.focus();
         }
       },
       // older Safari version may require webkit-specific events
@@ -3264,10 +3294,10 @@ var mediaThemeMicrovideo = (() => {
   var _mediaStateCallback;
   var _mediaStoreUnsubscribe;
   var _mediaStateEventHandler;
+  var _subtitlesState;
   var _setupDefaultStore;
   var setupDefaultStore_fn;
   var _keyUpHandler;
-  var keyUpHandler_fn;
   var _keyDownHandler;
   var keyDownHandler_fn;
   var _showKeyboardShortcutsDialog;
@@ -3320,7 +3350,6 @@ var mediaThemeMicrovideo = (() => {
     constructor() {
       super();
       __privateAdd4(this, _setupDefaultStore);
-      __privateAdd4(this, _keyUpHandler);
       __privateAdd4(this, _keyDownHandler);
       __privateAdd4(this, _showKeyboardShortcutsDialog);
       this.mediaStateReceivers = [];
@@ -3335,6 +3364,17 @@ var mediaThemeMicrovideo = (() => {
         var _a3;
         (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch(event);
       });
+      __privateAdd4(this, _subtitlesState, void 0);
+      __privateAdd4(this, _keyUpHandler, (e) => {
+        const { key, shiftKey } = e;
+        const isShiftSlash = shiftKey && (key === "/" || key === "?");
+        const shouldHandle = isShiftSlash || ButtonPressedKeys.includes(key);
+        if (!shouldHandle) {
+          this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
+          return;
+        }
+        this.keyboardShortcutHandler(e);
+      });
       this.associateElement(this);
       let prevState = {};
       __privateSet4(this, _mediaStateCallback, (nextState) => {
@@ -3351,7 +3391,6 @@ var mediaThemeMicrovideo = (() => {
         });
         prevState = nextState;
       });
-      this.hasAttribute(Attributes2.NO_HOTKEYS) ? this.disableHotkeys() : this.enableHotkeys();
     }
     static get observedAttributes() {
       return super.observedAttributes.concat(
@@ -3363,7 +3402,10 @@ var mediaThemeMicrovideo = (() => {
         Attributes2.NO_MUTED_PREF,
         Attributes2.NO_VOLUME_PREF,
         Attributes2.LANG,
-        Attributes2.LOOP
+        Attributes2.LOOP,
+        Attributes2.LIVE_EDGE_OFFSET,
+        Attributes2.SEEK_TO_LIVE_OFFSET,
+        Attributes2.NO_AUTO_SEEK_TO_LIVE
       );
     }
     get mediaStore() {
@@ -3495,19 +3537,21 @@ var mediaThemeMicrovideo = (() => {
             defaultStreamType: (_b2 = this.getAttribute(Attributes2.DEFAULT_STREAM_TYPE)) != null ? _b2 : void 0
           }
         });
-      } else if (attrName === Attributes2.LIVE_EDGE_OFFSET) {
+      } else if (attrName === Attributes2.LIVE_EDGE_OFFSET && newValue !== oldValue) {
         (_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,
-            seekToLiveOffset: !this.hasAttribute(Attributes2.SEEK_TO_LIVE_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
           }
         });
-      } else if (attrName === Attributes2.SEEK_TO_LIVE_OFFSET) {
+      } else if (attrName === Attributes2.SEEK_TO_LIVE_OFFSET && newValue !== oldValue) {
         (_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
+            // Mirror #setupDefaultStore: prefer seektoliveoffset, fall back to
+            // liveedgeoffset, otherwise undefined.
+            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
           }
         });
       } else if (attrName === Attributes2.NO_AUTO_SEEK_TO_LIVE) {
@@ -3554,7 +3598,8 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      var _a3, _b2;
+      var _a3, _b2, _c;
+      this.associateElement(this);
       if (!__privateGet4(this, _mediaStore) && !this.hasAttribute(Attributes2.NO_DEFAULT_STORE)) {
         __privateMethod2(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
       }
@@ -3562,31 +3607,58 @@ var mediaThemeMicrovideo = (() => {
         type: "documentelementchangerequest",
         detail: Document2
       });
+      (_b2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _b2.dispatch({
+        type: "fullscreenelementchangerequest",
+        detail: this.fullscreenElement
+      });
       super.connectedCallback();
       if (__privateGet4(this, _mediaStore) && !__privateGet4(this, _mediaStoreUnsubscribe)) {
-        __privateSet4(this, _mediaStoreUnsubscribe, (_b2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _b2.subscribe(
+        __privateSet4(this, _mediaStoreUnsubscribe, (_c = __privateGet4(this, _mediaStore)) == null ? void 0 : _c.subscribe(
           __privateGet4(this, _mediaStateCallback)
         ));
       }
+      if (__privateGet4(this, _subtitlesState) !== void 0 && __privateGet4(this, _mediaStore) && this.media) {
+        setTimeout(() => {
+          var _a22, _b22, _c2;
+          if ((_b22 = (_a22 = this.media) == null ? void 0 : _a22.textTracks) == null ? void 0 : _b22.length) {
+            (_c2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _c2.dispatch({
+              type: MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+              detail: __privateGet4(this, _subtitlesState)
+            });
+          }
+        }, 0);
+      }
       this.hasAttribute(Attributes2.NO_HOTKEYS) ? this.disableHotkeys() : this.enableHotkeys();
     }
     disconnectedCallback() {
-      var _a3, _b2, _c, _d;
+      var _a3, _b2, _c, _d, _e, _f;
       (_a3 = super.disconnectedCallback) == null ? void 0 : _a3.call(this);
+      this.disableHotkeys();
       if (__privateGet4(this, _mediaStore)) {
-        (_b2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _b2.dispatch({
+        const currentState = __privateGet4(this, _mediaStore).getState();
+        __privateSet4(this, _subtitlesState, !!((_b2 = currentState.mediaSubtitlesShowing) == null ? void 0 : _b2.length));
+        (_c = __privateGet4(this, _mediaStore)) == null ? void 0 : _c.dispatch({
+          type: "fullscreenelementchangerequest",
+          detail: void 0
+        });
+        (_d = __privateGet4(this, _mediaStore)) == null ? void 0 : _d.dispatch({
           type: "documentelementchangerequest",
           detail: void 0
         });
-        (_c = __privateGet4(this, _mediaStore)) == null ? void 0 : _c.dispatch({
+        (_e = __privateGet4(this, _mediaStore)) == null ? void 0 : _e.dispatch({
           type: MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST,
           detail: false
         });
       }
       if (__privateGet4(this, _mediaStoreUnsubscribe)) {
-        (_d = __privateGet4(this, _mediaStoreUnsubscribe)) == null ? void 0 : _d.call(this);
+        (_f = __privateGet4(this, _mediaStoreUnsubscribe)) == null ? void 0 : _f.call(this);
         __privateSet4(this, _mediaStoreUnsubscribe, void 0);
       }
+      this.unassociateElement(this);
+      if (__privateGet4(this, _keyboardShortcutsDialog)) {
+        __privateGet4(this, _keyboardShortcutsDialog).remove();
+        __privateSet4(this, _keyboardShortcutsDialog, null);
+      }
     }
     /**
      * @override
@@ -3677,10 +3749,11 @@ var mediaThemeMicrovideo = (() => {
     }
     disableHotkeys() {
       this.removeEventListener("keydown", __privateMethod2(this, _keyDownHandler, keyDownHandler_fn));
-      this.removeEventListener("keyup", __privateMethod2(this, _keyUpHandler, keyUpHandler_fn));
+      this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
     }
+    // Added string to support JSX compatibility
     get hotkeys() {
-      return getStringAttr(this, Attributes2.HOTKEYS);
+      return __privateGet4(this, _hotKeys);
     }
     set hotkeys(value) {
       setStringAttr(this, Attributes2.HOTKEYS, value);
@@ -3855,6 +3928,7 @@ var mediaThemeMicrovideo = (() => {
   _mediaStateCallback = /* @__PURE__ */ new WeakMap();
   _mediaStoreUnsubscribe = /* @__PURE__ */ new WeakMap();
   _mediaStateEventHandler = /* @__PURE__ */ new WeakMap();
+  _subtitlesState = /* @__PURE__ */ new WeakMap();
   _setupDefaultStore = /* @__PURE__ */ new WeakSet();
   setupDefaultStore_fn = function() {
     var _a3;
@@ -3882,28 +3956,18 @@ var mediaThemeMicrovideo = (() => {
       }
     });
   };
-  _keyUpHandler = /* @__PURE__ */ new WeakSet();
-  keyUpHandler_fn = function(e) {
-    const { key, shiftKey } = e;
-    const isShiftSlash = shiftKey && (key === "/" || key === "?");
-    const shouldHandle = isShiftSlash || ButtonPressedKeys.includes(key);
-    if (!shouldHandle) {
-      this.removeEventListener("keyup", __privateMethod2(this, _keyUpHandler, keyUpHandler_fn));
-      return;
-    }
-    this.keyboardShortcutHandler(e);
-  };
+  _keyUpHandler = /* @__PURE__ */ new WeakMap();
   _keyDownHandler = /* @__PURE__ */ new WeakSet();
   keyDownHandler_fn = function(e) {
     var _a3;
     const { metaKey, altKey, key, shiftKey } = e;
     const isShiftSlash = shiftKey && (key === "/" || key === "?");
     if (isShiftSlash && ((_a3 = __privateGet4(this, _keyboardShortcutsDialog)) == null ? void 0 : _a3.open)) {
-      this.removeEventListener("keyup", __privateMethod2(this, _keyUpHandler, keyUpHandler_fn));
+      this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
       return;
     }
     if (metaKey || altKey || !isShiftSlash && !ButtonPressedKeys.includes(key)) {
-      this.removeEventListener("keyup", __privateMethod2(this, _keyUpHandler, keyUpHandler_fn));
+      this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
       return;
     }
     const target = e.target;
@@ -3911,7 +3975,7 @@ var mediaThemeMicrovideo = (() => {
     if ([" ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(key) && !(__privateGet4(this, _hotKeys).contains(`no${key.toLowerCase()}`) || key === " " && __privateGet4(this, _hotKeys).contains("nospace")) && !isRangeInput) {
       e.preventDefault();
     }
-    this.addEventListener("keyup", __privateMethod2(this, _keyUpHandler, keyUpHandler_fn), { once: true });
+    this.addEventListener("keyup", __privateGet4(this, _keyUpHandler), { once: true });
   };
   _showKeyboardShortcutsDialog = /* @__PURE__ */ new WeakSet();
   showKeyboardShortcutsDialog_fn = function() {
@@ -4625,11 +4689,9 @@ var mediaThemeMicrovideo = (() => {
     }
     /**
      * @abstract
-     * @argument {Event} e
      */
-    handleClick(e) {
+    handleClick(_e) {
     }
-    // eslint-disable-line
   };
   _mediaController2 = /* @__PURE__ */ new WeakMap();
   _clickListener = /* @__PURE__ */ new WeakMap();
@@ -4810,7 +4872,7 @@ var mediaThemeMicrovideo = (() => {
     }
     connectedCallback() {
       super.connectedCallback();
-      this.setAttribute("role", "switch");
+      this.setAttribute("role", "button");
       this.setAttribute("aria-label", t("closed captions"));
       updateAriaChecked(this);
     }
@@ -5079,9 +5141,6 @@ var mediaThemeMicrovideo = (() => {
       __privateAdd6(this, _isInit, false);
       __privateAdd6(this, _previouslyFocused, null);
       __privateAdd6(this, _invokerElement, null);
-      this.addEventListener("invoke", this);
-      this.addEventListener("focusout", this);
-      this.addEventListener("keydown", this);
     }
     static get observedAttributes() {
       return [Attributes5.OPEN, Attributes5.ANCHOR];
@@ -5110,6 +5169,14 @@ var mediaThemeMicrovideo = (() => {
       if (!this.role) {
         this.role = "dialog";
       }
+      this.addEventListener("invoke", this);
+      this.addEventListener("focusout", this);
+      this.addEventListener("keydown", this);
+    }
+    disconnectedCallback() {
+      this.removeEventListener("invoke", this);
+      this.removeEventListener("focusout", this);
+      this.removeEventListener("keydown", this);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       __privateMethod4(this, _init, init_fn).call(this);
@@ -5490,6 +5557,14 @@ var mediaThemeMicrovideo = (() => {
         transform: var(--media-range-segment-transform, scaleY(1));
         transform-origin: center;
       }
+
+      /* Visible label for accessibility - positioned off-screen but technically visible (Firefox requires visible labels) */
+      #range-label {
+        position: absolute;
+        left: -10000px;
+        background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
+        pointer-events: none;
+      }
     </style>
     <div id="leftgap"></div>
     <div id="container">
@@ -5503,14 +5578,20 @@ var mediaThemeMicrovideo = (() => {
         <slot name="thumb">
           <div id="thumb" part="thumb"></div>
         </slot>
-        <svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
+        <svg id="segments" aria-hidden="true"><clipPath id="segments-clipping"></clipPath></svg>
       </div>
-      <input id="range" type="range" min="0" max="1" step="any" value="0">
+        <input id="range" type="range" min="0" max="1" step="any" value="0">
+        <label for="range" id="range-label"></label>
+
+      ${this.getContainerTemplateHTML(_attrs)}
     </div>
     <div id="rightgap"></div>
   `
     );
   }
+  function getContainerTemplateHTML(_attrs) {
+    return "";
+  }
   var MediaChromeRange = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
@@ -5740,7 +5821,7 @@ var mediaThemeMicrovideo = (() => {
   };
   _enableUserEvents = /* @__PURE__ */ new WeakSet();
   enableUserEvents_fn = function() {
-    if (this.hasAttribute("disabled"))
+    if (this.hasAttribute("disabled") || !this.isConnected)
       return;
     this.addEventListener("input", this);
     this.addEventListener("pointerdown", this);
@@ -5752,6 +5833,7 @@ var mediaThemeMicrovideo = (() => {
     this.removeEventListener("input", this);
     this.removeEventListener("pointerdown", this);
     this.removeEventListener("pointerenter", this);
+    this.removeEventListener("pointerleave", this);
     (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("pointerup", this);
     (_b2 = GlobalThis.window) == null ? void 0 : _b2.removeEventListener("pointermove", this);
   };
@@ -5759,14 +5841,14 @@ var mediaThemeMicrovideo = (() => {
   handlePointerDown_fn = function(evt) {
     var _a3;
     __privateSet7(this, _isInputTarget, evt.composedPath().includes(this.range));
-    (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("pointerup", this);
+    (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("pointerup", this, { once: true });
   };
   _handlePointerEnter = /* @__PURE__ */ new WeakSet();
   handlePointerEnter_fn = function(evt) {
     var _a3;
     if (evt.pointerType !== "mouse")
       __privateMethod5(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
-    this.addEventListener("pointerleave", this);
+    this.addEventListener("pointerleave", this, { once: true });
     (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("pointermove", this);
   };
   _handlePointerUp2 = /* @__PURE__ */ new WeakSet();
@@ -5806,6 +5888,7 @@ var mediaThemeMicrovideo = (() => {
   };
   MediaChromeRange.shadowRootOptions = { mode: "open" };
   MediaChromeRange.getTemplateHTML = getTemplateHTML6;
+  MediaChromeRange.getContainerTemplateHTML = getContainerTemplateHTML;
   if (!GlobalThis.customElements.get("media-chrome-range")) {
     GlobalThis.customElements.define("media-chrome-range", MediaChromeRange);
   }
@@ -5963,7 +6046,7 @@ var mediaThemeMicrovideo = (() => {
       */
       ""}
       :host(:focus-visible) {
-        box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9);
+        box-shadow: var(--media-focus-box-shadow, inset 0 0 0 2px rgb(27 127 204 / .9));
         outline: 0;
       }
 
@@ -6223,6 +6306,11 @@ var mediaThemeMicrovideo = (() => {
       if (this.open) {
         this.shadowRoot.querySelector("slot").name = `error-${this.mediaErrorCode}`;
         this.shadowRoot.querySelector("#content").innerHTML = this.formatErrorMessage(mediaError);
+        if (!this.hasAttribute("aria-label")) {
+          const { title } = formatError(mediaError);
+          if (title)
+            this.setAttribute("aria-label", title);
+        }
       }
     }
     get mediaError() {
@@ -6584,7 +6672,7 @@ var mediaThemeMicrovideo = (() => {
   // ../../node_modules/media-chrome/dist/media-live-button.js
   var { MEDIA_TIME_IS_LIVE, MEDIA_PAUSED } = MediaUIAttributes;
   var { MEDIA_SEEK_TO_LIVE_REQUEST, MEDIA_PLAY_REQUEST } = MediaUIEvents;
-  var indicatorSVG = '<svg viewBox="0 0 6 12"><circle cx="3" cy="6" r="2"></circle></svg>';
+  var indicatorSVG = '<svg viewBox="0 0 6 12" aria-hidden="true"><circle cx="3" cy="6" r="2"></circle></svg>';
   function getSlotTemplateHTML11(_attrs) {
     return (
       /*html*/
@@ -7581,21 +7669,36 @@ var mediaThemeMicrovideo = (() => {
       const src = previewImage.split("#")[0];
       const computedStyle = getComputedStyle(this);
       const { maxWidth, maxHeight, minWidth, minHeight } = computedStyle;
-      const maxRatio = Math.min(parseInt(maxWidth) / w, parseInt(maxHeight) / h);
-      const minRatio = Math.max(parseInt(minWidth) / w, parseInt(minHeight) / h);
-      const isScalingDown = maxRatio < 1;
-      const scale = isScalingDown ? maxRatio : minRatio > 1 ? minRatio : 1;
+      const objectFit = computedStyle.getPropertyValue("--media-preview-thumbnail-object-fit").trim() || "contain";
+      let scaleX;
+      let scaleY;
+      if (objectFit === "fill") {
+        const maxRatioX = parseInt(maxWidth) / w;
+        const maxRatioY = parseInt(maxHeight) / h;
+        const minRatioX = parseInt(minWidth) / w;
+        const minRatioY = parseInt(minHeight) / h;
+        scaleX = maxRatioX < 1 ? maxRatioX : Math.max(maxRatioX, minRatioX);
+        scaleY = maxRatioY < 1 ? maxRatioY : Math.max(maxRatioY, minRatioY);
+      } else {
+        const maxRatio = Math.min(parseInt(maxWidth) / w, parseInt(maxHeight) / h);
+        const minRatio = Math.max(parseInt(minWidth) / w, parseInt(minHeight) / h);
+        const isScalingDown2 = maxRatio < 1;
+        const scale = isScalingDown2 ? maxRatio : minRatio > 1 ? minRatio : 1;
+        scaleX = scale;
+        scaleY = scale;
+      }
       const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
       const imgStyle = getOrInsertCSSRule(this.shadowRoot, "img").style;
       const img = this.shadowRoot.querySelector("img");
+      const isScalingDown = Math.min(scaleX, scaleY) < 1;
       const extremum = isScalingDown ? "min" : "max";
       style.setProperty(`${extremum}-width`, "initial", "important");
       style.setProperty(`${extremum}-height`, "initial", "important");
-      style.width = `${w * scale}px`;
-      style.height = `${h * scale}px`;
+      style.width = `${w * scaleX}px`;
+      style.height = `${h * scaleY}px`;
       const resize = () => {
-        imgStyle.width = `${this.imgWidth * scale}px`;
-        imgStyle.height = `${this.imgHeight * scale}px`;
+        imgStyle.width = `${this.imgWidth * scaleX}px`;
+        imgStyle.height = `${this.imgHeight * scaleY}px`;
         imgStyle.display = "block";
       };
       if (img.src !== src) {
@@ -7603,12 +7706,13 @@ var mediaThemeMicrovideo = (() => {
           this.imgWidth = img.naturalWidth;
           this.imgHeight = img.naturalHeight;
           resize();
+          img.onload = null;
         };
         img.src = src;
         resize();
       }
       resize();
-      imgStyle.transform = `translate(-${x * scale}px, -${y * scale}px)`;
+      imgStyle.transform = `translate(-${x * scaleX}px, -${y * scaleY}px)`;
     }
   };
   _mediaController7 = /* @__PURE__ */ new WeakMap();
@@ -7697,6 +7801,9 @@ var mediaThemeMicrovideo = (() => {
   `
     );
   }
+  var updateAriaLabel7 = (el, seekOffset) => {
+    el.setAttribute("aria-label", t("seek back {seekOffset} seconds", { seekOffset }));
+  };
   function getTooltipContentHTML10() {
     return t("Seek backward");
   }
@@ -7719,6 +7826,7 @@ var mediaThemeMicrovideo = (() => {
     }
     attributeChangedCallback(attrName, _oldValue, newValue) {
       super.attributeChangedCallback(attrName, _oldValue, newValue);
+      updateAriaLabel7(this, this.seekOffset);
       if (attrName === Attributes9.SEEK_OFFSET) {
         this.seekOffset = getNumericAttr(
           this,
@@ -7796,6 +7904,9 @@ var mediaThemeMicrovideo = (() => {
   `
     );
   }
+  var updateAriaLabel8 = (el, seekOffset) => {
+    el.setAttribute("aria-label", t("seek forward {seekOffset} seconds", { seekOffset }));
+  };
   function getTooltipContentHTML11() {
     return t("Seek forward");
   }
@@ -7818,6 +7929,7 @@ var mediaThemeMicrovideo = (() => {
     }
     attributeChangedCallback(attrName, _oldValue, newValue) {
       super.attributeChangedCallback(attrName, _oldValue, newValue);
+      updateAriaLabel8(this, this.seekOffset);
       if (attrName === Attributes10.SEEK_OFFSET) {
         this.seekOffset = getNumericAttr(
           this,
@@ -7893,7 +8005,21 @@ var mediaThemeMicrovideo = (() => {
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
+  var __privateMethod6 = (obj, member, method) => {
+    __accessCheck19(obj, member, "access private method");
+    return method;
+  };
   var _slot4;
+  var _keyUpHandler2;
+  var _keyDownHandler3;
+  var _setupEventListeners;
+  var setupEventListeners_fn;
+  var _removeEventListeners;
+  var removeEventListeners_fn;
+  var _makeInteractive;
+  var makeInteractive_fn;
+  var _makeNonInteractive;
+  var makeNonInteractive_fn;
   var Attributes11 = {
     REMAINING: "remaining",
     SHOW_DURATION: "showduration",
@@ -7922,8 +8048,7 @@ var mediaThemeMicrovideo = (() => {
       return timeLabel;
     return `${timeLabel}${timesSep}${formatTime(endTime)}`;
   };
-  var DEFAULT_MISSING_TIME_PHRASE = "video not loaded, unknown time.";
-  var updateAriaValueText = (el) => {
+  var updateAriaDescription = (el) => {
     var _a3;
     const currentTime = el.mediaCurrentTime;
     const [, seekableEnd] = (_a3 = el.mediaSeekable) != null ? _a3 : [];
@@ -7934,17 +8059,20 @@ var mediaThemeMicrovideo = (() => {
       endTime = seekableEnd;
     }
     if (currentTime == null || endTime === null) {
-      el.setAttribute("aria-valuetext", DEFAULT_MISSING_TIME_PHRASE);
+      el.setAttribute("aria-description", t("video not loaded, unknown time."));
       return;
     }
     const currentTimePhrase = el.remaining ? formatAsTimePhrase(0 - (endTime - currentTime)) : formatAsTimePhrase(currentTime);
     if (!el.showDuration) {
-      el.setAttribute("aria-valuetext", currentTimePhrase);
+      el.setAttribute("aria-description", currentTimePhrase);
       return;
     }
     const totalTimePhrase = formatAsTimePhrase(endTime);
-    const fullPhrase = `${currentTimePhrase} of ${totalTimePhrase}`;
-    el.setAttribute("aria-valuetext", fullPhrase);
+    const fullPhrase = t("{currentTime} of {totalTime}", {
+      currentTime: currentTimePhrase,
+      totalTime: totalTimePhrase
+    });
+    el.setAttribute("aria-description", fullPhrase);
   };
   function getSlotTemplateHTML18(_attrs, props) {
     return (
@@ -7954,10 +8082,26 @@ var mediaThemeMicrovideo = (() => {
   `
     );
   }
+  var updateAriaLabel9 = (el) => {
+    el.setAttribute("aria-label", t("playback time"));
+  };
   var MediaTimeDisplay = class extends MediaTextDisplay {
     constructor() {
       super();
+      __privateAdd19(this, _setupEventListeners);
+      __privateAdd19(this, _removeEventListeners);
+      __privateAdd19(this, _makeInteractive);
+      __privateAdd19(this, _makeNonInteractive);
       __privateAdd19(this, _slot4, void 0);
+      __privateAdd19(this, _keyUpHandler2, null);
+      __privateAdd19(this, _keyDownHandler3, (evt) => {
+        const { metaKey, altKey, key } = evt;
+        if (metaKey || altKey || !ButtonPressedKeys2.includes(key)) {
+          this.removeEventListener("keyup", __privateGet19(this, _keyUpHandler2));
+          return;
+        }
+        this.addEventListener("keyup", __privateGet19(this, _keyUpHandler2));
+      });
       __privateSet17(this, _slot4, this.shadowRoot.querySelector("slot"));
       __privateGet19(this, _slot4).innerHTML = `${formatTimesLabel(this)}`;
     }
@@ -7974,28 +8118,8 @@ var mediaThemeMicrovideo = (() => {
         "background",
         "var(--media-control-hover-background, rgba(50 50 70 / .7))"
       );
-      if (!this.hasAttribute("disabled")) {
-        this.enable();
-      }
-      this.setAttribute("role", "progressbar");
       this.setAttribute("aria-label", t("playback time"));
-      const keyUpHandler = (evt) => {
-        const { key } = evt;
-        if (!ButtonPressedKeys2.includes(key)) {
-          this.removeEventListener("keyup", keyUpHandler);
-          return;
-        }
-        this.toggleTimeDisplay();
-      };
-      this.addEventListener("keydown", (evt) => {
-        const { metaKey, altKey, key } = evt;
-        if (metaKey || altKey || !ButtonPressedKeys2.includes(key)) {
-          this.removeEventListener("keyup", keyUpHandler);
-          return;
-        }
-        this.addEventListener("keyup", keyUpHandler);
-      });
-      this.addEventListener("click", this.toggleTimeDisplay);
+      __privateMethod6(this, _makeInteractive, makeInteractive_fn).call(this);
       super.connectedCallback();
     }
     toggleTimeDisplay() {
@@ -8010,22 +8134,32 @@ var mediaThemeMicrovideo = (() => {
     }
     disconnectedCallback() {
       this.disable();
+      __privateMethod6(this, _removeEventListeners, removeEventListeners_fn).call(this);
       super.disconnectedCallback();
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
+      updateAriaLabel9(this);
       if (CombinedAttributes.includes(attrName)) {
         this.update();
       } else if (attrName === "disabled" && newValue !== oldValue) {
         if (newValue == null) {
-          this.enable();
+          __privateMethod6(this, _makeInteractive, makeInteractive_fn).call(this);
         } else {
-          this.disable();
+          __privateMethod6(this, _makeNonInteractive, makeNonInteractive_fn).call(this);
+        }
+      } else if (attrName === Attributes11.NO_TOGGLE && newValue !== oldValue) {
+        if (this.noToggle) {
+          __privateMethod6(this, _makeNonInteractive, makeNonInteractive_fn).call(this);
+        } else {
+          __privateMethod6(this, _makeInteractive, makeInteractive_fn).call(this);
         }
       }
       super.attributeChangedCallback(attrName, oldValue, newValue);
     }
     enable() {
-      this.tabIndex = 0;
+      if (!this.noToggle) {
+        this.tabIndex = 0;
+      }
     }
     disable() {
       this.tabIndex = -1;
@@ -8096,13 +8230,54 @@ var mediaThemeMicrovideo = (() => {
     }
     update() {
       const timesLabel = formatTimesLabel(this);
-      updateAriaValueText(this);
+      updateAriaDescription(this);
       if (timesLabel !== __privateGet19(this, _slot4).innerHTML) {
         __privateGet19(this, _slot4).innerHTML = timesLabel;
       }
     }
   };
   _slot4 = /* @__PURE__ */ new WeakMap();
+  _keyUpHandler2 = /* @__PURE__ */ new WeakMap();
+  _keyDownHandler3 = /* @__PURE__ */ new WeakMap();
+  _setupEventListeners = /* @__PURE__ */ new WeakSet();
+  setupEventListeners_fn = function() {
+    if (__privateGet19(this, _keyUpHandler2)) {
+      return;
+    }
+    __privateSet17(this, _keyUpHandler2, (evt) => {
+      const { key } = evt;
+      if (!ButtonPressedKeys2.includes(key)) {
+        this.removeEventListener("keyup", __privateGet19(this, _keyUpHandler2));
+        return;
+      }
+      this.toggleTimeDisplay();
+    });
+    this.addEventListener("keydown", __privateGet19(this, _keyDownHandler3));
+    this.addEventListener("click", this.toggleTimeDisplay);
+  };
+  _removeEventListeners = /* @__PURE__ */ new WeakSet();
+  removeEventListeners_fn = function() {
+    if (__privateGet19(this, _keyUpHandler2)) {
+      this.removeEventListener("keyup", __privateGet19(this, _keyUpHandler2));
+      this.removeEventListener("keydown", __privateGet19(this, _keyDownHandler3));
+      this.removeEventListener("click", this.toggleTimeDisplay);
+      __privateSet17(this, _keyUpHandler2, null);
+    }
+  };
+  _makeInteractive = /* @__PURE__ */ new WeakSet();
+  makeInteractive_fn = function() {
+    if (!this.noToggle && !this.hasAttribute("disabled")) {
+      this.setAttribute("role", "button");
+      this.enable();
+      __privateMethod6(this, _setupEventListeners, setupEventListeners_fn).call(this);
+    }
+  };
+  _makeNonInteractive = /* @__PURE__ */ new WeakSet();
+  makeNonInteractive_fn = function() {
+    this.removeAttribute("role");
+    this.disable();
+    __privateMethod6(this, _removeEventListeners, removeEventListeners_fn).call(this);
+  };
   MediaTimeDisplay.getSlotTemplateHTML = getSlotTemplateHTML18;
   if (!GlobalThis.customElements.get("media-time-display")) {
     GlobalThis.customElements.define("media-time-display", MediaTimeDisplay);
@@ -8235,7 +8410,7 @@ var mediaThemeMicrovideo = (() => {
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod6 = (obj, member, method) => {
+  var __privateMethod7 = (obj, member, method) => {
     __accessCheck21(obj, member, "access private method");
     return method;
   };
@@ -8250,7 +8425,6 @@ var mediaThemeMicrovideo = (() => {
   var _mediaChaptersCues;
   var _isPointerDown;
   var _toggleRangeAnimation;
-  var toggleRangeAnimation_fn;
   var _shouldRangeAnimate;
   var shouldRangeAnimate_fn;
   var _updateRange;
@@ -8266,19 +8440,20 @@ var mediaThemeMicrovideo = (() => {
   var previewRequest_fn;
   var _seekRequest;
   var seekRequest_fn;
-  var DEFAULT_MISSING_TIME_PHRASE2 = "video not loaded, unknown time.";
-  var updateAriaValueText2 = (el) => {
+  var updateAriaValueText = (el) => {
     const range = el.range;
     const currentTimePhrase = formatAsTimePhrase(+calcTimeFromRangeValue(el));
     const totalTimePhrase = formatAsTimePhrase(+el.mediaSeekableEnd);
-    const fullPhrase = !(currentTimePhrase && totalTimePhrase) ? DEFAULT_MISSING_TIME_PHRASE2 : `${currentTimePhrase} of ${totalTimePhrase}`;
+    const fullPhrase = !(currentTimePhrase && totalTimePhrase) ? t("video not loaded, unknown time.") : t("{currentTime} of {totalTime}", {
+      currentTime: currentTimePhrase,
+      totalTime: totalTimePhrase
+    });
     range.setAttribute("aria-valuetext", fullPhrase);
   };
-  function getTemplateHTML12(_attrs) {
+  function getContainerTemplateHTML2(_attrs) {
     return (
       /*html*/
       `
-    ${MediaChromeRange.getTemplateHTML(_attrs)}
     <style>
       :host {
         --media-box-border-radius: 4px;
@@ -8526,7 +8701,6 @@ var mediaThemeMicrovideo = (() => {
   var MediaTimeRange = class extends MediaChromeRange {
     constructor() {
       super();
-      __privateAdd21(this, _toggleRangeAnimation);
       __privateAdd21(this, _shouldRangeAnimate);
       __privateAdd21(this, _getElementRects);
       __privateAdd21(this, _getBoxPosition);
@@ -8534,7 +8708,7 @@ var mediaThemeMicrovideo = (() => {
       __privateAdd21(this, _handlePointerMove3);
       __privateAdd21(this, _previewRequest);
       __privateAdd21(this, _seekRequest);
-      __privateAdd21(this, _rootNode, void 0);
+      __privateAdd21(this, _rootNode, null);
       __privateAdd21(this, _animation, void 0);
       __privateAdd21(this, _boxes, void 0);
       __privateAdd21(this, _previewTime, void 0);
@@ -8544,6 +8718,13 @@ var mediaThemeMicrovideo = (() => {
       __privateAdd21(this, _boxPaddingRight, void 0);
       __privateAdd21(this, _mediaChaptersCues, void 0);
       __privateAdd21(this, _isPointerDown, void 0);
+      __privateAdd21(this, _toggleRangeAnimation, () => {
+        if (__privateMethod7(this, _shouldRangeAnimate, shouldRangeAnimate_fn).call(this)) {
+          __privateGet21(this, _animation).start();
+        } else {
+          __privateGet21(this, _animation).stop();
+        }
+      });
       __privateAdd21(this, _updateRange, (value) => {
         if (this.dragging)
           return;
@@ -8591,14 +8772,14 @@ var mediaThemeMicrovideo = (() => {
       var _a3;
       super.connectedCallback();
       this.range.setAttribute("aria-label", t("seek"));
-      __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
+      __privateGet21(this, _toggleRangeAnimation).call(this);
       __privateSet19(this, _rootNode, this.getRootNode());
       (_a3 = __privateGet21(this, _rootNode)) == null ? void 0 : _a3.addEventListener("transitionstart", this);
     }
     disconnectedCallback() {
       var _a3;
       super.disconnectedCallback();
-      __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
+      __privateGet21(this, _animation).stop();
       (_a3 = __privateGet21(this, _rootNode)) == null ? void 0 : _a3.removeEventListener("transitionstart", this);
       __privateSet19(this, _rootNode, null);
     }
@@ -8612,8 +8793,8 @@ var mediaThemeMicrovideo = (() => {
           duration: this.mediaSeekableEnd - this.mediaSeekableStart,
           playbackRate: this.mediaPlaybackRate
         });
-        __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
-        updateAriaValueText2(this);
+        __privateGet21(this, _toggleRangeAnimation).call(this);
+        updateAriaValueText(this);
       } else if (attrName === MediaUIAttributes.MEDIA_BUFFERED) {
         this.updateBufferedBar();
       }
@@ -8794,9 +8975,9 @@ var mediaThemeMicrovideo = (() => {
         this.shadowRoot,
         '[part~="current-box"]'
       );
-      const rects = __privateMethod6(this, _getElementRects, getElementRects_fn).call(this, __privateGet21(this, _currentBox));
-      const boxPos = __privateMethod6(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, this.range.valueAsNumber);
-      const boxShift = __privateMethod6(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, this.range.valueAsNumber);
+      const rects = __privateMethod7(this, _getElementRects, getElementRects_fn).call(this, __privateGet21(this, _currentBox));
+      const boxPos = __privateMethod7(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, this.range.valueAsNumber);
+      const boxShift = __privateMethod7(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, this.range.valueAsNumber);
       currentRailRule.style.transform = `translateX(${boxPos})`;
       currentRailRule.style.setProperty("--_range-width", `${rects.range.width}`);
       currentBoxRule.style.setProperty("--_box-shift", `${boxShift}`);
@@ -8807,10 +8988,10 @@ var mediaThemeMicrovideo = (() => {
       super.handleEvent(evt);
       switch (evt.type) {
         case "input":
-          __privateMethod6(this, _seekRequest, seekRequest_fn).call(this);
+          __privateMethod7(this, _seekRequest, seekRequest_fn).call(this);
           break;
         case "pointermove":
-          __privateMethod6(this, _handlePointerMove3, handlePointerMove_fn3).call(this, evt);
+          __privateMethod7(this, _handlePointerMove3, handlePointerMove_fn3).call(this, evt);
           break;
         case "pointerup":
           if (__privateGet21(this, _isPointerDown))
@@ -8820,11 +9001,11 @@ var mediaThemeMicrovideo = (() => {
           __privateSet19(this, _isPointerDown, true);
           break;
         case "pointerleave":
-          __privateMethod6(this, _previewRequest, previewRequest_fn).call(this, null);
+          __privateMethod7(this, _previewRequest, previewRequest_fn).call(this, null);
           break;
         case "transitionstart":
           if (containsComposedNode(evt.target, this)) {
-            setTimeout(() => __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this), 0);
+            setTimeout(() => __privateGet21(this, _toggleRangeAnimation).call(this), 0);
           }
           break;
       }
@@ -8840,14 +9021,7 @@ var mediaThemeMicrovideo = (() => {
   _boxPaddingRight = /* @__PURE__ */ new WeakMap();
   _mediaChaptersCues = /* @__PURE__ */ new WeakMap();
   _isPointerDown = /* @__PURE__ */ new WeakMap();
-  _toggleRangeAnimation = /* @__PURE__ */ new WeakSet();
-  toggleRangeAnimation_fn = function() {
-    if (__privateMethod6(this, _shouldRangeAnimate, shouldRangeAnimate_fn).call(this)) {
-      __privateGet21(this, _animation).start();
-    } else {
-      __privateGet21(this, _animation).stop();
-    }
-  };
+  _toggleRangeAnimation = /* @__PURE__ */ new WeakMap();
   _shouldRangeAnimate = /* @__PURE__ */ new WeakSet();
   shouldRangeAnimate_fn = function() {
     return this.isConnected && !this.mediaPaused && !this.mediaLoading && !this.mediaEnded && this.mediaSeekableEnd > 0 && isElementVisible(this);
@@ -8906,7 +9080,7 @@ var mediaThemeMicrovideo = (() => {
       (b) => evt.composedPath().includes(b)
     );
     if (!this.dragging && (isOverBoxes || !evt.composedPath().includes(this))) {
-      __privateMethod6(this, _previewRequest, previewRequest_fn).call(this, null);
+      __privateMethod7(this, _previewRequest, previewRequest_fn).call(this, null);
       return;
     }
     const duration = this.mediaSeekableEnd;
@@ -8920,11 +9094,11 @@ var mediaThemeMicrovideo = (() => {
       this.shadowRoot,
       '[part~="preview-box"]'
     );
-    const rects = __privateMethod6(this, _getElementRects, getElementRects_fn).call(this, __privateGet21(this, _previewBox));
+    const rects = __privateMethod7(this, _getElementRects, getElementRects_fn).call(this, __privateGet21(this, _previewBox));
     let pointerRatio = (evt.clientX - rects.range.left) / rects.range.width;
     pointerRatio = Math.max(0, Math.min(1, pointerRatio));
-    const boxPos = __privateMethod6(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, pointerRatio);
-    const boxShift = __privateMethod6(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, pointerRatio);
+    const boxPos = __privateMethod7(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, pointerRatio);
+    const boxShift = __privateMethod7(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, pointerRatio);
     previewRailRule.style.transform = `translateX(${boxPos})`;
     previewRailRule.style.setProperty("--_range-width", `${rects.range.width}`);
     previewBoxRule.style.setProperty("--_box-shift", `${boxShift}`);
@@ -8933,7 +9107,7 @@ var mediaThemeMicrovideo = (() => {
     if (Math.abs(diff) < 1 && pointerRatio > 0.01 && pointerRatio < 0.99)
       return;
     __privateSet19(this, _previewTime, pointerRatio * duration);
-    __privateMethod6(this, _previewRequest, previewRequest_fn).call(this, __privateGet21(this, _previewTime));
+    __privateMethod7(this, _previewRequest, previewRequest_fn).call(this, __privateGet21(this, _previewTime));
   };
   _previewRequest = /* @__PURE__ */ new WeakSet();
   previewRequest_fn = function(detail) {
@@ -8958,12 +9132,26 @@ var mediaThemeMicrovideo = (() => {
     );
   };
   MediaTimeRange.shadowRootOptions = { mode: "open" };
-  MediaTimeRange.getTemplateHTML = getTemplateHTML12;
+  MediaTimeRange.getContainerTemplateHTML = getContainerTemplateHTML2;
   if (!GlobalThis.customElements.get("media-time-range")) {
     GlobalThis.customElements.define("media-time-range", MediaTimeRange);
   }
 
   // ../../node_modules/media-chrome/dist/media-volume-range.js
+  var __accessCheck22 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet22 = (obj, member, getter) => {
+    __accessCheck22(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd22 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var _handleRangeInput;
   var DEFAULT_VOLUME = 1;
   var toVolume = (el) => {
     if (el.mediaMuted)
@@ -8972,17 +9160,9 @@ var mediaThemeMicrovideo = (() => {
   };
   var formatAsPercentString = (value) => `${Math.round(value * 100)}%`;
   var MediaVolumeRange = class extends MediaChromeRange {
-    static get observedAttributes() {
-      return [
-        ...super.observedAttributes,
-        MediaUIAttributes.MEDIA_VOLUME,
-        MediaUIAttributes.MEDIA_MUTED,
-        MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE
-      ];
-    }
     constructor() {
-      super();
-      this.range.addEventListener("input", () => {
+      super(...arguments);
+      __privateAdd22(this, _handleRangeInput, () => {
         const detail = this.range.value;
         const evt = new GlobalThis.CustomEvent(
           MediaUIEvents.MEDIA_VOLUME_REQUEST,
@@ -8995,9 +9175,22 @@ var mediaThemeMicrovideo = (() => {
         this.dispatchEvent(evt);
       });
     }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_VOLUME,
+        MediaUIAttributes.MEDIA_MUTED,
+        MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE
+      ];
+    }
     connectedCallback() {
       super.connectedCallback();
       this.range.setAttribute("aria-label", t("volume"));
+      this.range.addEventListener("input", __privateGet22(this, _handleRangeInput));
+    }
+    disconnectedCallback() {
+      this.range.removeEventListener("input", __privateGet22(this, _handleRangeInput));
+      super.disconnectedCallback();
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -9038,6 +9231,7 @@ var mediaThemeMicrovideo = (() => {
       setStringAttr(this, MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE, value);
     }
   };
+  _handleRangeInput = /* @__PURE__ */ new WeakMap();
   if (!GlobalThis.customElements.get("media-volume-range")) {
     GlobalThis.customElements.define("media-volume-range", MediaVolumeRange);
   }
@@ -9129,21 +9323,21 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/utils/template-parts.js
-  var __accessCheck22 = (obj, member, msg) => {
+  var __accessCheck23 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet22 = (obj, member, getter) => {
-    __accessCheck22(obj, member, "read from private field");
+  var __privateGet23 = (obj, member, getter) => {
+    __accessCheck23(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd22 = (obj, member, value) => {
+  var __privateAdd23 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet20 = (obj, member, value, setter) => {
-    __accessCheck22(obj, member, "write to private field");
+    __accessCheck23(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -9183,16 +9377,16 @@ var mediaThemeMicrovideo = (() => {
     constructor(template2, state, processor2 = defaultProcessor) {
       var _a3;
       super();
-      __privateAdd22(this, _parts, void 0);
-      __privateAdd22(this, _processor, void 0);
+      __privateAdd23(this, _parts, void 0);
+      __privateAdd23(this, _processor, void 0);
       this.append(template2.content.cloneNode(true));
       __privateSet20(this, _parts, parse(this));
       __privateSet20(this, _processor, processor2);
-      (_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet22(this, _parts), state);
-      processor2.processCallback(this, __privateGet22(this, _parts), state);
+      (_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet23(this, _parts), state);
+      processor2.processCallback(this, __privateGet23(this, _parts), state);
     }
     update(state) {
-      __privateGet22(this, _processor).processCallback(this, __privateGet22(this, _parts), state);
+      __privateGet23(this, _processor).processCallback(this, __privateGet23(this, _parts), state);
     }
   };
   _parts = /* @__PURE__ */ new WeakMap();
@@ -9281,87 +9475,87 @@ var mediaThemeMicrovideo = (() => {
   var attrPartToList = /* @__PURE__ */ new WeakMap();
   var AttrPartList = class {
     constructor() {
-      __privateAdd22(this, _items, []);
+      __privateAdd23(this, _items, []);
     }
     [Symbol.iterator]() {
-      return __privateGet22(this, _items).values();
+      return __privateGet23(this, _items).values();
     }
     get length() {
-      return __privateGet22(this, _items).length;
+      return __privateGet23(this, _items).length;
     }
     item(index) {
-      return __privateGet22(this, _items)[index];
+      return __privateGet23(this, _items)[index];
     }
     append(...items) {
       for (const item of items) {
         if (item instanceof AttrPart) {
           attrPartToList.set(item, this);
         }
-        __privateGet22(this, _items).push(item);
+        __privateGet23(this, _items).push(item);
       }
     }
     toString() {
-      return __privateGet22(this, _items).join("");
+      return __privateGet23(this, _items).join("");
     }
   };
   _items = /* @__PURE__ */ new WeakMap();
   var AttrPart = class extends Part {
     constructor(element, attributeName, namespaceURI) {
       super();
-      __privateAdd22(this, _list);
-      __privateAdd22(this, _value, "");
-      __privateAdd22(this, _element, void 0);
-      __privateAdd22(this, _attributeName, void 0);
-      __privateAdd22(this, _namespaceURI, void 0);
+      __privateAdd23(this, _list);
+      __privateAdd23(this, _value, "");
+      __privateAdd23(this, _element, void 0);
+      __privateAdd23(this, _attributeName, void 0);
+      __privateAdd23(this, _namespaceURI, void 0);
       __privateSet20(this, _element, element);
       __privateSet20(this, _attributeName, attributeName);
       __privateSet20(this, _namespaceURI, namespaceURI);
     }
     get attributeName() {
-      return __privateGet22(this, _attributeName);
+      return __privateGet23(this, _attributeName);
     }
     get attributeNamespace() {
-      return __privateGet22(this, _namespaceURI);
+      return __privateGet23(this, _namespaceURI);
     }
     get element() {
-      return __privateGet22(this, _element);
+      return __privateGet23(this, _element);
     }
     get value() {
-      return __privateGet22(this, _value);
+      return __privateGet23(this, _value);
     }
     set value(newValue) {
-      if (__privateGet22(this, _value) === newValue)
+      if (__privateGet23(this, _value) === newValue)
         return;
       __privateSet20(this, _value, newValue);
-      if (!__privateGet22(this, _list, list_get) || __privateGet22(this, _list, list_get).length === 1) {
+      if (!__privateGet23(this, _list, list_get) || __privateGet23(this, _list, list_get).length === 1) {
         if (newValue == null) {
-          __privateGet22(this, _element).removeAttributeNS(
-            __privateGet22(this, _namespaceURI),
-            __privateGet22(this, _attributeName)
+          __privateGet23(this, _element).removeAttributeNS(
+            __privateGet23(this, _namespaceURI),
+            __privateGet23(this, _attributeName)
           );
         } else {
-          __privateGet22(this, _element).setAttributeNS(
-            __privateGet22(this, _namespaceURI),
-            __privateGet22(this, _attributeName),
+          __privateGet23(this, _element).setAttributeNS(
+            __privateGet23(this, _namespaceURI),
+            __privateGet23(this, _attributeName),
             newValue
           );
         }
       } else {
-        __privateGet22(this, _element).setAttributeNS(
-          __privateGet22(this, _namespaceURI),
-          __privateGet22(this, _attributeName),
-          __privateGet22(this, _list, list_get).toString()
+        __privateGet23(this, _element).setAttributeNS(
+          __privateGet23(this, _namespaceURI),
+          __privateGet23(this, _attributeName),
+          __privateGet23(this, _list, list_get).toString()
         );
       }
     }
     get booleanValue() {
-      return __privateGet22(this, _element).hasAttributeNS(
-        __privateGet22(this, _namespaceURI),
-        __privateGet22(this, _attributeName)
+      return __privateGet23(this, _element).hasAttributeNS(
+        __privateGet23(this, _namespaceURI),
+        __privateGet23(this, _attributeName)
       );
     }
     set booleanValue(value) {
-      if (!__privateGet22(this, _list, list_get) || __privateGet22(this, _list, list_get).length === 1)
+      if (!__privateGet23(this, _list, list_get) || __privateGet23(this, _list, list_get).length === 1)
         this.value = value ? "" : null;
       else
         throw new DOMException("Value is not fully templatized");
@@ -9378,26 +9572,26 @@ var mediaThemeMicrovideo = (() => {
   var ChildNodePart = class extends Part {
     constructor(parentNode, nodes) {
       super();
-      __privateAdd22(this, _parentNode, void 0);
-      __privateAdd22(this, _nodes, void 0);
+      __privateAdd23(this, _parentNode, void 0);
+      __privateAdd23(this, _nodes, void 0);
       __privateSet20(this, _parentNode, parentNode);
       __privateSet20(this, _nodes, nodes ? [...nodes] : [new Text()]);
     }
     get replacementNodes() {
-      return __privateGet22(this, _nodes);
+      return __privateGet23(this, _nodes);
     }
     get parentNode() {
-      return __privateGet22(this, _parentNode);
+      return __privateGet23(this, _parentNode);
     }
     get nextSibling() {
-      return __privateGet22(this, _nodes)[__privateGet22(this, _nodes).length - 1].nextSibling;
+      return __privateGet23(this, _nodes)[__privateGet23(this, _nodes).length - 1].nextSibling;
     }
     get previousSibling() {
-      return __privateGet22(this, _nodes)[0].previousSibling;
+      return __privateGet23(this, _nodes)[0].previousSibling;
     }
     // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
     get value() {
-      return __privateGet22(this, _nodes).map((node) => node.textContent).join("");
+      return __privateGet23(this, _nodes).map((node) => node.textContent).join("");
     }
     set value(newValue) {
       this.replace(newValue);
@@ -9409,8 +9603,8 @@ var mediaThemeMicrovideo = (() => {
       if (!normalisedNodes.length)
         normalisedNodes.push(new Text());
       __privateSet20(this, _nodes, swapdom(
-        __privateGet22(this, _nodes)[0].parentNode,
-        __privateGet22(this, _nodes),
+        __privateGet23(this, _nodes)[0].parentNode,
+        __privateGet23(this, _nodes),
         normalisedNodes,
         this.nextSibling
       ));
@@ -9687,35 +9881,37 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-theme-element.js
-  var __accessCheck23 = (obj, member, msg) => {
+  var __accessCheck24 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet23 = (obj, member, getter) => {
-    __accessCheck23(obj, member, "read from private field");
+  var __privateGet24 = (obj, member, getter) => {
+    __accessCheck24(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd23 = (obj, member, value) => {
+  var __privateAdd24 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet21 = (obj, member, value, setter) => {
-    __accessCheck23(obj, member, "write to private field");
+    __accessCheck24(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod7 = (obj, member, method) => {
-    __accessCheck23(obj, member, "access private method");
+  var __privateMethod8 = (obj, member, method) => {
+    __accessCheck24(obj, member, "access private method");
     return method;
   };
   var _template;
   var _prevTemplate;
   var _prevTemplateId;
+  var _observer;
   var _upgradeProperty;
   var upgradeProperty_fn;
   var _updateTemplate;
   var updateTemplate_fn;
+  var _renderBind;
   var observedMediaAttributes = {
     mediatargetlivewindow: "targetlivewindow",
     mediastreamtype: "streamtype"
@@ -9753,18 +9949,20 @@ var mediaThemeMicrovideo = (() => {
   var MediaThemeElement = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd23(this, _upgradeProperty);
-      __privateAdd23(this, _updateTemplate);
-      __privateAdd23(this, _template, void 0);
-      __privateAdd23(this, _prevTemplate, void 0);
-      __privateAdd23(this, _prevTemplateId, void 0);
+      __privateAdd24(this, _upgradeProperty);
+      __privateAdd24(this, _updateTemplate);
+      __privateAdd24(this, _template, void 0);
+      __privateAdd24(this, _prevTemplate, void 0);
+      __privateAdd24(this, _prevTemplateId, void 0);
+      __privateAdd24(this, _observer, void 0);
+      __privateAdd24(this, _renderBind, void 0);
       if (this.shadowRoot) {
         this.renderRoot = this.shadowRoot;
       } else {
         this.renderRoot = this.attachShadow({ mode: "open" });
         this.createRenderer();
       }
-      const observer2 = new MutationObserver((mutationList) => {
+      __privateSet21(this, _observer, new MutationObserver((mutationList) => {
         var _a3;
         if (this.mediaController && !((_a3 = this.mediaController) == null ? void 0 : _a3.breakpointsComputed))
           return;
@@ -9782,17 +9980,9 @@ var mediaThemeMicrovideo = (() => {
         })) {
           this.render();
         }
-      });
-      observer2.observe(this, { attributes: true });
-      observer2.observe(this.renderRoot, {
-        attributes: true,
-        subtree: true
-      });
-      this.addEventListener(
-        MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
-        this.render
-      );
-      __privateMethod7(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
+      }));
+      __privateSet21(this, _renderBind, this.render.bind(this));
+      __privateMethod8(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
     }
     /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
     get mediaController() {
@@ -9800,7 +9990,7 @@ var mediaThemeMicrovideo = (() => {
     }
     get template() {
       var _a3;
-      return (_a3 = __privateGet23(this, _template)) != null ? _a3 : this.constructor.template;
+      return (_a3 = __privateGet24(this, _template)) != null ? _a3 : this.constructor.template;
     }
     set template(value) {
       if (value === null) {
@@ -9842,14 +10032,30 @@ var mediaThemeMicrovideo = (() => {
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       if (attrName === "template" && oldValue != newValue) {
-        __privateMethod7(this, _updateTemplate, updateTemplate_fn).call(this);
+        __privateMethod8(this, _updateTemplate, updateTemplate_fn).call(this);
       }
     }
     connectedCallback() {
-      __privateMethod7(this, _updateTemplate, updateTemplate_fn).call(this);
+      this.addEventListener(
+        MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+        __privateGet24(this, _renderBind)
+      );
+      __privateGet24(this, _observer).observe(this, { attributes: true });
+      __privateGet24(this, _observer).observe(this.renderRoot, {
+        attributes: true,
+        subtree: true
+      });
+      __privateMethod8(this, _updateTemplate, updateTemplate_fn).call(this);
+    }
+    disconnectedCallback() {
+      this.removeEventListener(
+        MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
+        __privateGet24(this, _renderBind)
+      );
+      __privateGet24(this, _observer).disconnect();
     }
     createRenderer() {
-      if (this.template instanceof HTMLTemplateElement && this.template !== __privateGet23(this, _prevTemplate)) {
+      if (this.template instanceof HTMLTemplateElement && this.template !== __privateGet24(this, _prevTemplate)) {
         __privateSet21(this, _prevTemplate, this.template);
         this.renderer = new TemplateInstance(
           this.template,
@@ -9872,6 +10078,7 @@ var mediaThemeMicrovideo = (() => {
   _template = /* @__PURE__ */ new WeakMap();
   _prevTemplate = /* @__PURE__ */ new WeakMap();
   _prevTemplateId = /* @__PURE__ */ new WeakMap();
+  _observer = /* @__PURE__ */ new WeakMap();
   _upgradeProperty = /* @__PURE__ */ new WeakSet();
   upgradeProperty_fn = function(prop) {
     if (Object.prototype.hasOwnProperty.call(this, prop)) {
@@ -9884,7 +10091,7 @@ var mediaThemeMicrovideo = (() => {
   updateTemplate_fn = function() {
     var _a3;
     const templateId = this.getAttribute("template");
-    if (!templateId || templateId === __privateGet23(this, _prevTemplateId))
+    if (!templateId || templateId === __privateGet24(this, _prevTemplateId))
       return;
     const rootNode = this.getRootNode();
     const template2 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(
@@ -9907,6 +10114,7 @@ var mediaThemeMicrovideo = (() => {
       }).catch(console.error);
     }
   };
+  _renderBind = /* @__PURE__ */ new WeakMap();
   MediaThemeElement.observedAttributes = ["template"];
   MediaThemeElement.processor = processor;
   function isValidUrl(url) {
@@ -10032,26 +10240,26 @@ var mediaThemeMicrovideo = (() => {
   };
 
   // ../../node_modules/media-chrome/dist/menu/media-chrome-menu.js
-  var __accessCheck24 = (obj, member, msg) => {
+  var __accessCheck25 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet24 = (obj, member, getter) => {
-    __accessCheck24(obj, member, "read from private field");
+  var __privateGet25 = (obj, member, getter) => {
+    __accessCheck25(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd24 = (obj, member, value) => {
+  var __privateAdd25 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet22 = (obj, member, value, setter) => {
-    __accessCheck24(obj, member, "write to private field");
+    __accessCheck25(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod8 = (obj, member, method) => {
-    __accessCheck24(obj, member, "access private method");
+  var __privateMethod9 = (obj, member, method) => {
+    __accessCheck25(obj, member, "access private method");
     return method;
   };
   var _mediaController8;
@@ -10061,7 +10269,7 @@ var mediaThemeMicrovideo = (() => {
   var _mutationObserver2;
   var _isPopover;
   var _cssRule;
-  var _handleSlotChange;
+  var _handleSlotChange2;
   var handleSlotChange_fn;
   var _toggleHeader;
   var toggleHeader_fn;
@@ -10136,7 +10344,7 @@ var mediaThemeMicrovideo = (() => {
     }
     return "";
   }
-  function getTemplateHTML13(_attrs) {
+  function getTemplateHTML12(_attrs) {
     return (
       /*html*/
       `
@@ -10330,33 +10538,33 @@ var mediaThemeMicrovideo = (() => {
   var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd24(this, _handleSlotChange);
-      __privateAdd24(this, _toggleHeader);
-      __privateAdd24(this, _updateLayoutStyle);
-      __privateAdd24(this, _handleInvoke2);
-      __privateAdd24(this, _handleOpen2);
-      __privateAdd24(this, _handleClosed2);
-      __privateAdd24(this, _positionMenu);
-      __privateAdd24(this, _resizeMenu);
-      __privateAdd24(this, _handleClick);
-      __privateAdd24(this, _backButtonElement);
-      __privateAdd24(this, _handleToggle);
-      __privateAdd24(this, _checkSubmenuHasExpanded);
-      __privateAdd24(this, _handleFocusOut2);
-      __privateAdd24(this, _handleKeyDown2);
-      __privateAdd24(this, _getItem);
-      __privateAdd24(this, _getTabItem);
-      __privateAdd24(this, _setTabItem);
-      __privateAdd24(this, _selectItem);
-      __privateAdd24(this, _mediaController8, null);
-      __privateAdd24(this, _previouslyFocused2, null);
-      __privateAdd24(this, _invokerElement2, null);
-      __privateAdd24(this, _previousItems, /* @__PURE__ */ new Set());
-      __privateAdd24(this, _mutationObserver2, void 0);
-      __privateAdd24(this, _isPopover, false);
-      __privateAdd24(this, _cssRule, null);
-      __privateAdd24(this, _handleMenuItems, () => {
-        const previousItems = __privateGet24(this, _previousItems);
+      __privateAdd25(this, _handleSlotChange2);
+      __privateAdd25(this, _toggleHeader);
+      __privateAdd25(this, _updateLayoutStyle);
+      __privateAdd25(this, _handleInvoke2);
+      __privateAdd25(this, _handleOpen2);
+      __privateAdd25(this, _handleClosed2);
+      __privateAdd25(this, _positionMenu);
+      __privateAdd25(this, _resizeMenu);
+      __privateAdd25(this, _handleClick);
+      __privateAdd25(this, _backButtonElement);
+      __privateAdd25(this, _handleToggle);
+      __privateAdd25(this, _checkSubmenuHasExpanded);
+      __privateAdd25(this, _handleFocusOut2);
+      __privateAdd25(this, _handleKeyDown2);
+      __privateAdd25(this, _getItem);
+      __privateAdd25(this, _getTabItem);
+      __privateAdd25(this, _setTabItem);
+      __privateAdd25(this, _selectItem);
+      __privateAdd25(this, _mediaController8, null);
+      __privateAdd25(this, _previouslyFocused2, null);
+      __privateAdd25(this, _invokerElement2, null);
+      __privateAdd25(this, _previousItems, /* @__PURE__ */ new Set());
+      __privateAdd25(this, _mutationObserver2, void 0);
+      __privateAdd25(this, _isPopover, false);
+      __privateAdd25(this, _cssRule, null);
+      __privateAdd25(this, _handleMenuItems, () => {
+        const previousItems = __privateGet25(this, _previousItems);
         const currentItems = new Set(this.items);
         for (const item of previousItems) {
           if (!currentItems.has(item)) {
@@ -10370,12 +10578,12 @@ var mediaThemeMicrovideo = (() => {
         }
         __privateSet22(this, _previousItems, currentItems);
       });
-      __privateAdd24(this, _handleBoundsResize, () => {
-        __privateMethod8(this, _positionMenu, positionMenu_fn).call(this);
-        __privateMethod8(this, _resizeMenu, resizeMenu_fn).call(this, false);
+      __privateAdd25(this, _handleBoundsResize, () => {
+        __privateMethod9(this, _positionMenu, positionMenu_fn).call(this);
+        __privateMethod9(this, _resizeMenu, resizeMenu_fn).call(this, false);
       });
-      __privateAdd24(this, _handleMenuResize, () => {
-        __privateMethod8(this, _positionMenu, positionMenu_fn).call(this);
+      __privateAdd25(this, _handleMenuResize, () => {
+        __privateMethod9(this, _positionMenu, positionMenu_fn).call(this);
       });
       if (!this.shadowRoot) {
         this.attachShadow(this.constructor.shadowRootOptions);
@@ -10386,9 +10594,7 @@ var mediaThemeMicrovideo = (() => {
       this.defaultSlot = this.shadowRoot.querySelector(
         "slot:not([name])"
       );
-      this.shadowRoot.addEventListener("slotchange", this);
-      __privateSet22(this, _mutationObserver2, new MutationObserver(__privateGet24(this, _handleMenuItems)));
-      __privateGet24(this, _mutationObserver2).observe(this.defaultSlot, { childList: true });
+      __privateSet22(this, _mutationObserver2, new MutationObserver(__privateGet25(this, _handleMenuItems)));
     }
     static get observedAttributes() {
       return [
@@ -10419,29 +10625,30 @@ var mediaThemeMicrovideo = (() => {
     handleEvent(event) {
       switch (event.type) {
         case "slotchange":
-          __privateMethod8(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
+          __privateMethod9(this, _handleSlotChange2, handleSlotChange_fn).call(this, event);
           break;
         case "invoke":
-          __privateMethod8(this, _handleInvoke2, handleInvoke_fn2).call(this, event);
+          __privateMethod9(this, _handleInvoke2, handleInvoke_fn2).call(this, event);
           break;
         case "click":
-          __privateMethod8(this, _handleClick, handleClick_fn).call(this, event);
+          __privateMethod9(this, _handleClick, handleClick_fn).call(this, event);
           break;
         case "toggle":
-          __privateMethod8(this, _handleToggle, handleToggle_fn).call(this, event);
+          __privateMethod9(this, _handleToggle, handleToggle_fn).call(this, event);
           break;
         case "focusout":
-          __privateMethod8(this, _handleFocusOut2, handleFocusOut_fn2).call(this, event);
+          __privateMethod9(this, _handleFocusOut2, handleFocusOut_fn2).call(this, event);
           break;
         case "keydown":
-          __privateMethod8(this, _handleKeyDown2, handleKeyDown_fn2).call(this, event);
+          __privateMethod9(this, _handleKeyDown2, handleKeyDown_fn2).call(this, event);
           break;
       }
     }
     connectedCallback() {
       var _a3, _b2;
+      __privateGet25(this, _mutationObserver2).observe(this.defaultSlot, { childList: true });
       __privateSet22(this, _cssRule, insertCSSRule(this.shadowRoot, ":host"));
-      __privateMethod8(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
+      __privateMethod9(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
       if (!this.hasAttribute("disabled")) {
         this.enable();
       }
@@ -10449,30 +10656,35 @@ var mediaThemeMicrovideo = (() => {
         this.role = "menu";
       }
       __privateSet22(this, _mediaController8, getAttributeMediaController(this));
-      (_b2 = (_a3 = __privateGet24(this, _mediaController8)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a3 = __privateGet25(this, _mediaController8)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
       if (!this.hidden) {
-        observeResize(getBoundsElement(this), __privateGet24(this, _handleBoundsResize));
-        observeResize(this, __privateGet24(this, _handleMenuResize));
+        observeResize(getBoundsElement(this), __privateGet25(this, _handleBoundsResize));
+        observeResize(this, __privateGet25(this, _handleMenuResize));
       }
-      __privateMethod8(this, _toggleHeader, toggleHeader_fn).call(this);
+      __privateMethod9(this, _toggleHeader, toggleHeader_fn).call(this);
+      this.shadowRoot.addEventListener("slotchange", this);
     }
     disconnectedCallback() {
       var _a3, _b2;
-      unobserveResize(getBoundsElement(this), __privateGet24(this, _handleBoundsResize));
-      unobserveResize(this, __privateGet24(this, _handleMenuResize));
+      __privateGet25(this, _mutationObserver2).disconnect();
+      unobserveResize(getBoundsElement(this), __privateGet25(this, _handleBoundsResize));
+      unobserveResize(this, __privateGet25(this, _handleMenuResize));
       this.disable();
-      (_b2 = (_a3 = __privateGet24(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a3 = __privateGet25(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
       __privateSet22(this, _mediaController8, null);
+      __privateSet22(this, _previouslyFocused2, null);
+      __privateSet22(this, _invokerElement2, null);
+      this.shadowRoot.removeEventListener("slotchange", this);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       var _a3, _b2, _c, _d;
       if (attrName === Attributes12.HIDDEN && newValue !== oldValue) {
-        if (!__privateGet24(this, _isPopover))
+        if (!__privateGet25(this, _isPopover))
           __privateSet22(this, _isPopover, true);
         if (this.hidden) {
-          __privateMethod8(this, _handleClosed2, handleClosed_fn2).call(this);
+          __privateMethod9(this, _handleClosed2, handleClosed_fn2).call(this);
         } else {
-          __privateMethod8(this, _handleOpen2, handleOpen_fn2).call(this);
+          __privateMethod9(this, _handleOpen2, handleOpen_fn2).call(this);
         }
         this.dispatchEvent(
           new ToggleEvent({
@@ -10483,12 +10695,12 @@ var mediaThemeMicrovideo = (() => {
         );
       } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet24(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a3 = __privateGet25(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
           __privateSet22(this, _mediaController8, null);
         }
         if (newValue && this.isConnected) {
           __privateSet22(this, _mediaController8, getAttributeMediaController(this));
-          (_d = (_c = __privateGet24(this, _mediaController8)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
+          (_d = (_c = __privateGet25(this, _mediaController8)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
         }
       } else if (attrName === Attributes12.DISABLED && newValue !== oldValue) {
         if (newValue == null) {
@@ -10497,7 +10709,7 @@ var mediaThemeMicrovideo = (() => {
           this.disable();
         }
       } else if (attrName === Attributes12.STYLE && newValue !== oldValue) {
-        __privateMethod8(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
+        __privateMethod9(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
       }
     }
     formatMenuItemText(text, data) {
@@ -10544,12 +10756,12 @@ var mediaThemeMicrovideo = (() => {
       const item = this.items.find((item2) => item2.value === newValue);
       if (!item)
         return;
-      __privateMethod8(this, _selectItem, selectItem_fn).call(this, item);
+      __privateMethod9(this, _selectItem, selectItem_fn).call(this, item);
     }
     focus() {
       __privateSet22(this, _previouslyFocused2, getActiveElement());
       if (this.items.length) {
-        __privateMethod8(this, _setTabItem, setTabItem_fn).call(this, this.items[0]);
+        __privateMethod9(this, _setTabItem, setTabItem_fn).call(this, this.items[0]);
         this.items[0].focus();
         return;
       }
@@ -10560,12 +10772,12 @@ var mediaThemeMicrovideo = (() => {
     }
     handleSelect(event) {
       var _a3;
-      const item = __privateMethod8(this, _getItem, getItem_fn).call(this, event);
+      const item = __privateMethod9(this, _getItem, getItem_fn).call(this, event);
       if (!item)
         return;
-      __privateMethod8(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
-      if (__privateGet24(this, _invokerElement2) && !this.hidden) {
-        (_a3 = __privateGet24(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+      __privateMethod9(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
+      if (__privateGet25(this, _invokerElement2) && !this.hidden) {
+        (_a3 = __privateGet25(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
         this.hidden = true;
       }
     }
@@ -10585,7 +10797,7 @@ var mediaThemeMicrovideo = (() => {
       var _a3, _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 = (_a3 = __privateMethod9(this, _getItem, getItem_fn).call(this, event)) != null ? _a3 : __privateMethod9(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b2 : items[0];
       const currentIndex = items.indexOf(currentItem);
       let index = Math.max(0, currentIndex);
       if (key === "ArrowDown") {
@@ -10603,7 +10815,7 @@ var mediaThemeMicrovideo = (() => {
       if (index > items.length - 1) {
         index = 0;
       }
-      __privateMethod8(this, _setTabItem, setTabItem_fn).call(this, items[index]);
+      __privateMethod9(this, _setTabItem, setTabItem_fn).call(this, items[index]);
       items[index].focus();
     }
   };
@@ -10614,7 +10826,7 @@ var mediaThemeMicrovideo = (() => {
   _mutationObserver2 = /* @__PURE__ */ new WeakMap();
   _isPopover = /* @__PURE__ */ new WeakMap();
   _cssRule = /* @__PURE__ */ new WeakMap();
-  _handleSlotChange = /* @__PURE__ */ new WeakSet();
+  _handleSlotChange2 = /* @__PURE__ */ new WeakSet();
   handleSlotChange_fn = function(event) {
     const slot = event.target;
     for (const node of slot.assignedNodes({ flatten: true })) {
@@ -10623,10 +10835,10 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     if (["header", "title"].includes(slot.name)) {
-      __privateMethod8(this, _toggleHeader, toggleHeader_fn).call(this);
+      __privateMethod9(this, _toggleHeader, toggleHeader_fn).call(this);
     }
     if (!slot.name) {
-      __privateGet24(this, _handleMenuItems).call(this);
+      __privateGet25(this, _handleMenuItems).call(this);
     }
   };
   _toggleHeader = /* @__PURE__ */ new WeakSet();
@@ -10657,17 +10869,17 @@ var mediaThemeMicrovideo = (() => {
   _handleOpen2 = /* @__PURE__ */ new WeakSet();
   handleOpen_fn2 = function() {
     var _a3;
-    (_a3 = __privateGet24(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
+    (_a3 = __privateGet25(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
     this.addEventListener("transitionend", () => this.focus(), { once: true });
-    observeResize(getBoundsElement(this), __privateGet24(this, _handleBoundsResize));
-    observeResize(this, __privateGet24(this, _handleMenuResize));
+    observeResize(getBoundsElement(this), __privateGet25(this, _handleBoundsResize));
+    observeResize(this, __privateGet25(this, _handleMenuResize));
   };
   _handleClosed2 = /* @__PURE__ */ new WeakSet();
   handleClosed_fn2 = function() {
     var _a3;
-    (_a3 = __privateGet24(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
-    unobserveResize(getBoundsElement(this), __privateGet24(this, _handleBoundsResize));
-    unobserveResize(this, __privateGet24(this, _handleMenuResize));
+    (_a3 = __privateGet25(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    unobserveResize(getBoundsElement(this), __privateGet25(this, _handleBoundsResize));
+    unobserveResize(this, __privateGet25(this, _handleMenuResize));
   };
   _handleBoundsResize = /* @__PURE__ */ new WeakMap();
   _handleMenuResize = /* @__PURE__ */ new WeakMap();
@@ -10687,7 +10899,7 @@ var mediaThemeMicrovideo = (() => {
     const boundsRect = bounds.getBoundingClientRect();
     const right = boundsRect.width - x - menuWidth;
     const bottom = boundsRect.height - y - this.offsetHeight;
-    const { style } = __privateGet24(this, _cssRule);
+    const { style } = __privateGet25(this, _cssRule);
     style.setProperty("position", "absolute");
     style.setProperty("right", `${Math.max(0, right)}px`);
     style.setProperty("--_menu-bottom", `${bottom}px`);
@@ -10705,7 +10917,7 @@ var mediaThemeMicrovideo = (() => {
     const expandedSubmenu = expandedMenuItem == null ? void 0 : expandedMenuItem.querySelector(
       '[role="menu"]'
     );
-    const { style } = __privateGet24(this, _cssRule);
+    const { style } = __privateGet25(this, _cssRule);
     if (!animate) {
       style.setProperty("--media-menu-transition-in", "none");
     }
@@ -10717,11 +10929,11 @@ var mediaThemeMicrovideo = (() => {
       );
       this.style.setProperty("min-width", `${width}px`);
       this.style.setProperty("min-height", `${height}px`);
-      __privateMethod8(this, _positionMenu, positionMenu_fn).call(this, width);
+      __privateMethod9(this, _positionMenu, positionMenu_fn).call(this, width);
     } else {
       this.style.removeProperty("min-width");
       this.style.removeProperty("min-height");
-      __privateMethod8(this, _positionMenu, positionMenu_fn).call(this);
+      __privateMethod9(this, _positionMenu, positionMenu_fn).call(this);
     }
     style.removeProperty("--media-menu-transition-in");
   };
@@ -10729,15 +10941,15 @@ var mediaThemeMicrovideo = (() => {
   handleClick_fn = function(event) {
     var _a3;
     event.stopPropagation();
-    if (event.composedPath().includes(__privateGet24(this, _backButtonElement, backButtonElement_get))) {
-      (_a3 = __privateGet24(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+    if (event.composedPath().includes(__privateGet25(this, _backButtonElement, backButtonElement_get))) {
+      (_a3 = __privateGet25(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
       this.hidden = true;
       return;
     }
-    const item = __privateMethod8(this, _getItem, getItem_fn).call(this, event);
+    const item = __privateMethod9(this, _getItem, getItem_fn).call(this, event);
     if (!item || item.hasAttribute("disabled"))
       return;
-    __privateMethod8(this, _setTabItem, setTabItem_fn).call(this, item);
+    __privateMethod9(this, _setTabItem, setTabItem_fn).call(this, item);
     this.handleSelect(event);
   };
   _backButtonElement = /* @__PURE__ */ new WeakSet();
@@ -10752,7 +10964,7 @@ var mediaThemeMicrovideo = (() => {
   handleToggle_fn = function(event) {
     if (event.target === this)
       return;
-    __privateMethod8(this, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn).call(this);
+    __privateMethod9(this, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn).call(this);
     const menuItemsWithSubmenu = Array.from(
       this.querySelectorAll('[role="menuitem"][aria-haspopup]')
     );
@@ -10768,7 +10980,7 @@ var mediaThemeMicrovideo = (() => {
     for (const item of menuItemsWithSubmenu) {
       item.setAttribute("aria-expanded", `${!item.submenuElement.hidden}`);
     }
-    __privateMethod8(this, _resizeMenu, resizeMenu_fn).call(this, true);
+    __privateMethod9(this, _resizeMenu, resizeMenu_fn).call(this, true);
   };
   _checkSubmenuHasExpanded = /* @__PURE__ */ new WeakSet();
   checkSubmenuHasExpanded_fn = function() {
@@ -10780,10 +10992,10 @@ var mediaThemeMicrovideo = (() => {
   handleFocusOut_fn2 = function(event) {
     var _a3;
     if (!containsComposedNode(this, event.relatedTarget)) {
-      if (__privateGet24(this, _isPopover)) {
-        (_a3 = __privateGet24(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+      if (__privateGet25(this, _isPopover)) {
+        (_a3 = __privateGet25(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
       }
-      if (__privateGet24(this, _invokerElement2) && __privateGet24(this, _invokerElement2) !== event.relatedTarget && !this.hidden) {
+      if (__privateGet25(this, _invokerElement2) && __privateGet25(this, _invokerElement2) !== event.relatedTarget && !this.hidden) {
         this.hidden = true;
       }
     }
@@ -10801,7 +11013,7 @@ var mediaThemeMicrovideo = (() => {
     event.preventDefault();
     event.stopPropagation();
     if (key === "Tab") {
-      if (__privateGet24(this, _isPopover)) {
+      if (__privateGet25(this, _isPopover)) {
         this.hidden = true;
         return;
       }
@@ -10812,8 +11024,8 @@ var mediaThemeMicrovideo = (() => {
       }
       this.blur();
     } else if (key === "Escape") {
-      (_e = __privateGet24(this, _previouslyFocused2)) == null ? void 0 : _e.focus();
-      if (__privateGet24(this, _isPopover)) {
+      (_e = __privateGet25(this, _previouslyFocused2)) == null ? void 0 : _e.focus();
+      if (__privateGet25(this, _isPopover)) {
         this.hidden = true;
       }
     } else if (key === "Enter" || key === " ") {
@@ -10858,7 +11070,7 @@ var mediaThemeMicrovideo = (() => {
     }
   };
   MediaChromeMenu.shadowRootOptions = { mode: "open" };
-  MediaChromeMenu.getTemplateHTML = getTemplateHTML13;
+  MediaChromeMenu.getTemplateHTML = getTemplateHTML12;
   function isMenuItem(element) {
     return ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
       element == null ? void 0 : element.role
@@ -10873,31 +11085,31 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-chrome-menu-item.js
-  var __accessCheck25 = (obj, member, msg) => {
+  var __accessCheck26 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet25 = (obj, member, getter) => {
-    __accessCheck25(obj, member, "read from private field");
+  var __privateGet26 = (obj, member, getter) => {
+    __accessCheck26(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd25 = (obj, member, value) => {
+  var __privateAdd26 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet23 = (obj, member, value, setter) => {
-    __accessCheck25(obj, member, "write to private field");
+    __accessCheck26(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod9 = (obj, member, method) => {
-    __accessCheck25(obj, member, "access private method");
+  var __privateMethod10 = (obj, member, method) => {
+    __accessCheck26(obj, member, "access private method");
     return method;
   };
   var _dirty;
   var _ownerElement;
-  var _handleSlotChange2;
+  var _handleSlotChange3;
   var handleSlotChange_fn2;
   var _submenuConnected;
   var submenuConnected_fn;
@@ -10905,12 +11117,10 @@ var mediaThemeMicrovideo = (() => {
   var submenuDisconnected_fn;
   var _handleMenuItem;
   var _handleKeyUp;
-  var handleKeyUp_fn;
   var _handleKeyDown3;
-  var handleKeyDown_fn3;
   var _reset;
   var reset_fn;
-  function getTemplateHTML14(_attrs) {
+  function getTemplateHTML13(_attrs) {
     return (
       /*html*/
       `
@@ -11048,15 +11258,13 @@ var mediaThemeMicrovideo = (() => {
   var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd25(this, _handleSlotChange2);
-      __privateAdd25(this, _submenuConnected);
-      __privateAdd25(this, _submenuDisconnected);
-      __privateAdd25(this, _handleKeyUp);
-      __privateAdd25(this, _handleKeyDown3);
-      __privateAdd25(this, _reset);
-      __privateAdd25(this, _dirty, false);
-      __privateAdd25(this, _ownerElement, void 0);
-      __privateAdd25(this, _handleMenuItem, () => {
+      __privateAdd26(this, _handleSlotChange3);
+      __privateAdd26(this, _submenuConnected);
+      __privateAdd26(this, _submenuDisconnected);
+      __privateAdd26(this, _reset);
+      __privateAdd26(this, _dirty, false);
+      __privateAdd26(this, _ownerElement, void 0);
+      __privateAdd26(this, _handleMenuItem, () => {
         var _a3, _b2;
         if (this.submenuElement.items) {
           this.setAttribute("submenusize", `${this.submenuElement.items.length}`);
@@ -11070,12 +11278,27 @@ var mediaThemeMicrovideo = (() => {
         span.textContent = description != null ? description : "";
         descriptionSlot.replaceChildren(span);
       });
+      __privateAdd26(this, _handleKeyUp, (event) => {
+        const { key } = event;
+        if (!this.keysUsed.includes(key)) {
+          this.removeEventListener("keyup", __privateGet26(this, _handleKeyUp));
+          return;
+        }
+        this.handleClick(event);
+      });
+      __privateAdd26(this, _handleKeyDown3, (event) => {
+        const { metaKey, altKey, key } = event;
+        if (metaKey || altKey || !this.keysUsed.includes(key)) {
+          this.removeEventListener("keyup", __privateGet26(this, _handleKeyUp));
+          return;
+        }
+        this.addEventListener("keyup", __privateGet26(this, _handleKeyUp), { once: true });
+      });
       if (!this.shadowRoot) {
         this.attachShadow(this.constructor.shadowRootOptions);
         const attrs = namedNodeMapToObject(this.attributes);
         this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
       }
-      this.shadowRoot.addEventListener("slotchange", this);
     }
     static get observedAttributes() {
       return [
@@ -11104,21 +11327,21 @@ var mediaThemeMicrovideo = (() => {
     handleEvent(event) {
       switch (event.type) {
         case "slotchange":
-          __privateMethod9(this, _handleSlotChange2, handleSlotChange_fn2).call(this, event);
+          __privateMethod10(this, _handleSlotChange3, handleSlotChange_fn2).call(this, event);
           break;
         case "click":
           this.handleClick(event);
           break;
         case "keydown":
-          __privateMethod9(this, _handleKeyDown3, handleKeyDown_fn3).call(this, event);
+          __privateGet26(this, _handleKeyDown3).call(this, event);
           break;
         case "keyup":
-          __privateMethod9(this, _handleKeyUp, handleKeyUp_fn).call(this, event);
+          __privateGet26(this, _handleKeyUp).call(this, event);
           break;
       }
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      if (attrName === Attributes13.CHECKED && isCheckable(this) && !__privateGet25(this, _dirty)) {
+      if (attrName === Attributes13.CHECKED && isCheckable(this) && !__privateGet26(this, _dirty)) {
         this.setAttribute("aria-checked", newValue != null ? "true" : "false");
       } else if (attrName === Attributes13.TYPE && newValue !== oldValue) {
         this.role = "menuitem" + newValue;
@@ -11136,15 +11359,17 @@ var mediaThemeMicrovideo = (() => {
       }
       this.role = "menuitem" + this.type;
       __privateSet23(this, _ownerElement, closestMenuItemsContainer(this, this.parentNode));
-      __privateMethod9(this, _reset, reset_fn).call(this);
+      __privateMethod10(this, _reset, reset_fn).call(this);
       if (this.submenuElement) {
-        __privateMethod9(this, _submenuConnected, submenuConnected_fn).call(this);
+        __privateMethod10(this, _submenuConnected, submenuConnected_fn).call(this);
       }
+      this.shadowRoot.addEventListener("slotchange", this);
     }
     disconnectedCallback() {
       this.disable();
-      __privateMethod9(this, _reset, reset_fn).call(this);
+      __privateMethod10(this, _reset, reset_fn).call(this);
       __privateSet23(this, _ownerElement, null);
+      this.shadowRoot.removeEventListener("slotchange", this);
     }
     get invokeTarget() {
       return this.getAttribute("invoketarget");
@@ -11225,7 +11450,7 @@ var mediaThemeMicrovideo = (() => {
   };
   _dirty = /* @__PURE__ */ new WeakMap();
   _ownerElement = /* @__PURE__ */ new WeakMap();
-  _handleSlotChange2 = /* @__PURE__ */ new WeakSet();
+  _handleSlotChange3 = /* @__PURE__ */ new WeakSet();
   handleSlotChange_fn2 = function(event) {
     const slot = event.target;
     const isDefaultSlot = !(slot == null ? void 0 : slot.name);
@@ -11238,9 +11463,9 @@ var mediaThemeMicrovideo = (() => {
     }
     if (slot.name === "submenu") {
       if (this.submenuElement) {
-        __privateMethod9(this, _submenuConnected, submenuConnected_fn).call(this);
+        __privateMethod10(this, _submenuConnected, submenuConnected_fn).call(this);
       } else {
-        __privateMethod9(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
+        __privateMethod10(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
       }
     }
   };
@@ -11248,52 +11473,36 @@ var mediaThemeMicrovideo = (() => {
   submenuConnected_fn = async function() {
     this.setAttribute("aria-haspopup", "menu");
     this.setAttribute("aria-expanded", `${!this.submenuElement.hidden}`);
-    this.submenuElement.addEventListener("change", __privateGet25(this, _handleMenuItem));
-    this.submenuElement.addEventListener("addmenuitem", __privateGet25(this, _handleMenuItem));
+    this.submenuElement.addEventListener("change", __privateGet26(this, _handleMenuItem));
+    this.submenuElement.addEventListener("addmenuitem", __privateGet26(this, _handleMenuItem));
     this.submenuElement.addEventListener(
       "removemenuitem",
-      __privateGet25(this, _handleMenuItem)
+      __privateGet26(this, _handleMenuItem)
     );
-    __privateGet25(this, _handleMenuItem).call(this);
+    __privateGet26(this, _handleMenuItem).call(this);
   };
   _submenuDisconnected = /* @__PURE__ */ new WeakSet();
   submenuDisconnected_fn = function() {
     this.removeAttribute("aria-haspopup");
     this.removeAttribute("aria-expanded");
-    this.submenuElement.removeEventListener("change", __privateGet25(this, _handleMenuItem));
+    this.submenuElement.removeEventListener("change", __privateGet26(this, _handleMenuItem));
     this.submenuElement.removeEventListener(
       "addmenuitem",
-      __privateGet25(this, _handleMenuItem)
+      __privateGet26(this, _handleMenuItem)
     );
     this.submenuElement.removeEventListener(
       "removemenuitem",
-      __privateGet25(this, _handleMenuItem)
+      __privateGet26(this, _handleMenuItem)
     );
-    __privateGet25(this, _handleMenuItem).call(this);
+    __privateGet26(this, _handleMenuItem).call(this);
   };
   _handleMenuItem = /* @__PURE__ */ new WeakMap();
-  _handleKeyUp = /* @__PURE__ */ new WeakSet();
-  handleKeyUp_fn = function(event) {
-    const { key } = event;
-    if (!this.keysUsed.includes(key)) {
-      this.removeEventListener("keyup", __privateMethod9(this, _handleKeyUp, handleKeyUp_fn));
-      return;
-    }
-    this.handleClick(event);
-  };
-  _handleKeyDown3 = /* @__PURE__ */ new WeakSet();
-  handleKeyDown_fn3 = function(event) {
-    const { metaKey, altKey, key } = event;
-    if (metaKey || altKey || !this.keysUsed.includes(key)) {
-      this.removeEventListener("keyup", __privateMethod9(this, _handleKeyUp, handleKeyUp_fn));
-      return;
-    }
-    this.addEventListener("keyup", __privateMethod9(this, _handleKeyUp, handleKeyUp_fn), { once: true });
-  };
+  _handleKeyUp = /* @__PURE__ */ new WeakMap();
+  _handleKeyDown3 = /* @__PURE__ */ new WeakMap();
   _reset = /* @__PURE__ */ new WeakSet();
   reset_fn = function() {
     var _a3;
-    const items = (_a3 = __privateGet25(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
+    const items = (_a3 = __privateGet26(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
     if (!items)
       return;
     let checkedItem = items.filter((item) => item.getAttribute("aria-checked") === "true").pop();
@@ -11305,7 +11514,7 @@ var mediaThemeMicrovideo = (() => {
     checkedItem == null ? void 0 : checkedItem.setAttribute("aria-checked", "true");
   };
   MediaChromeMenuItem.shadowRootOptions = { mode: "open" };
-  MediaChromeMenuItem.getTemplateHTML = getTemplateHTML14;
+  MediaChromeMenuItem.getTemplateHTML = getTemplateHTML13;
   MediaChromeMenuItem.getSuffixSlotInnerHTML = getSuffixSlotInnerHTML;
   function isCheckable(item) {
     return item.type === "radio" || item.type === "checkbox";
@@ -11328,7 +11537,7 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-settings-menu.js
-  function getTemplateHTML15(_attrs) {
+  function getTemplateHTML14(_attrs) {
     return (
       /*html*/
       `
@@ -11382,13 +11591,13 @@ var mediaThemeMicrovideo = (() => {
       );
     }
   };
-  MediaSettingsMenu.getTemplateHTML = getTemplateHTML15;
+  MediaSettingsMenu.getTemplateHTML = getTemplateHTML14;
   if (!GlobalThis.customElements.get("media-settings-menu")) {
     GlobalThis.customElements.define("media-settings-menu", MediaSettingsMenu);
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-settings-menu-item.js
-  function getTemplateHTML16(_attrs) {
+  function getTemplateHTML15(_attrs) {
     return (
       /*html*/
       `
@@ -11418,7 +11627,7 @@ var mediaThemeMicrovideo = (() => {
   var MediaSettingsMenuItem = class extends MediaChromeMenuItem {
   };
   MediaSettingsMenuItem.shadowRootOptions = { mode: "open" };
-  MediaSettingsMenuItem.getTemplateHTML = getTemplateHTML16;
+  MediaSettingsMenuItem.getTemplateHTML = getTemplateHTML15;
   MediaSettingsMenuItem.getSuffixSlotInnerHTML = getSuffixSlotInnerHTML2;
   if (!GlobalThis.customElements.get("media-settings-menu-item")) {
     GlobalThis.customElements.define(
@@ -11517,26 +11726,26 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-audio-track-menu.js
-  var __accessCheck26 = (obj, member, msg) => {
+  var __accessCheck27 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet26 = (obj, member, getter) => {
-    __accessCheck26(obj, member, "read from private field");
+  var __privateGet27 = (obj, member, getter) => {
+    __accessCheck27(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd26 = (obj, member, value) => {
+  var __privateAdd27 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet24 = (obj, member, value, setter) => {
-    __accessCheck26(obj, member, "write to private field");
+    __accessCheck27(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod10 = (obj, member, method) => {
-    __accessCheck26(obj, member, "access private method");
+  var __privateMethod11 = (obj, member, method) => {
+    __accessCheck27(obj, member, "access private method");
     return method;
   };
   var _audioTrackList;
@@ -11548,10 +11757,10 @@ var mediaThemeMicrovideo = (() => {
   var MediaAudioTrackMenu = class extends MediaChromeMenu {
     constructor() {
       super(...arguments);
-      __privateAdd26(this, _render);
-      __privateAdd26(this, _onChange);
-      __privateAdd26(this, _audioTrackList, []);
-      __privateAdd26(this, _prevState, void 0);
+      __privateAdd27(this, _render);
+      __privateAdd27(this, _onChange);
+      __privateAdd27(this, _audioTrackList, []);
+      __privateAdd27(this, _prevState, void 0);
     }
     static get observedAttributes() {
       return [
@@ -11567,16 +11776,16 @@ var mediaThemeMicrovideo = (() => {
         this.value = newValue;
       } else if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST && oldValue !== newValue) {
         __privateSet24(this, _audioTrackList, parseAudioTrackList(newValue != null ? newValue : ""));
-        __privateMethod10(this, _render, render_fn).call(this);
+        __privateMethod11(this, _render, render_fn).call(this);
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod10(this, _onChange, onChange_fn));
+      this.addEventListener("change", __privateMethod11(this, _onChange, onChange_fn));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod10(this, _onChange, onChange_fn));
+      this.removeEventListener("change", __privateMethod11(this, _onChange, onChange_fn));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -11590,11 +11799,11 @@ var mediaThemeMicrovideo = (() => {
       );
     }
     get mediaAudioTrackList() {
-      return __privateGet26(this, _audioTrackList);
+      return __privateGet27(this, _audioTrackList);
     }
     set mediaAudioTrackList(list) {
       __privateSet24(this, _audioTrackList, list);
-      __privateMethod10(this, _render, render_fn).call(this);
+      __privateMethod11(this, _render, render_fn).call(this);
     }
     /**
      * Get enabled audio track id.
@@ -11611,7 +11820,7 @@ var mediaThemeMicrovideo = (() => {
   _prevState = /* @__PURE__ */ new WeakMap();
   _render = /* @__PURE__ */ new WeakSet();
   render_fn = function() {
-    if (__privateGet26(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
+    if (__privateGet27(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
       return;
     __privateSet24(this, _prevState, JSON.stringify(this.mediaAudioTrackList));
     const audioTrackList = this.mediaAudioTrackList;
@@ -11674,7 +11883,7 @@ var mediaThemeMicrovideo = (() => {
   function getTooltipContentHTML14() {
     return t("Audio");
   }
-  var updateAriaLabel7 = (el) => {
+  var updateAriaLabel10 = (el) => {
     const label = t("Audio");
     el.setAttribute("aria-label", label);
   };
@@ -11688,12 +11897,12 @@ var mediaThemeMicrovideo = (() => {
     }
     connectedCallback() {
       super.connectedCallback();
-      updateAriaLabel7(this);
+      updateAriaLabel10(this);
     }
     attributeChangedCallback(attrName, _oldValue, newValue) {
       super.attributeChangedCallback(attrName, _oldValue, newValue);
       if (attrName === MediaUIAttributes.MEDIA_LANG) {
-        updateAriaLabel7(this);
+        updateAriaLabel10(this);
       }
     }
     /**
@@ -11728,26 +11937,26 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-captions-menu.js
-  var __accessCheck27 = (obj, member, msg) => {
+  var __accessCheck28 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet27 = (obj, member, getter) => {
-    __accessCheck27(obj, member, "read from private field");
+  var __privateGet28 = (obj, member, getter) => {
+    __accessCheck28(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd27 = (obj, member, value) => {
+  var __privateAdd28 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet25 = (obj, member, value, setter) => {
-    __accessCheck27(obj, member, "write to private field");
+    __accessCheck28(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod11 = (obj, member, method) => {
-    __accessCheck27(obj, member, "access private method");
+  var __privateMethod12 = (obj, member, method) => {
+    __accessCheck28(obj, member, "access private method");
     return method;
   };
   var _prevState2;
@@ -11762,7 +11971,7 @@ var mediaThemeMicrovideo = (() => {
     <path d="M22.83 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
   </svg>`
   );
-  function getTemplateHTML17(_attrs) {
+  function getTemplateHTML16(_attrs) {
     return (
       /*html*/
       `
@@ -11774,9 +11983,9 @@ var mediaThemeMicrovideo = (() => {
   var MediaCaptionsMenu = class extends MediaChromeMenu {
     constructor() {
       super(...arguments);
-      __privateAdd27(this, _render2);
-      __privateAdd27(this, _onChange2);
-      __privateAdd27(this, _prevState2, void 0);
+      __privateAdd28(this, _render2);
+      __privateAdd28(this, _onChange2);
+      __privateAdd28(this, _prevState2, void 0);
     }
     static get observedAttributes() {
       return [
@@ -11788,19 +11997,19 @@ var mediaThemeMicrovideo = (() => {
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_LIST && oldValue !== newValue) {
-        __privateMethod11(this, _render2, render_fn2).call(this);
+        __privateMethod12(this, _render2, render_fn2).call(this);
       } else if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING && oldValue !== newValue) {
         this.value = newValue || "";
-        __privateMethod11(this, _render2, render_fn2).call(this);
+        __privateMethod12(this, _render2, render_fn2).call(this);
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod11(this, _onChange2, onChange_fn2));
+      this.addEventListener("change", __privateMethod12(this, _onChange2, onChange_fn2));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod11(this, _onChange2, onChange_fn2));
+      this.removeEventListener("change", __privateMethod12(this, _onChange2, onChange_fn2));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -11838,7 +12047,7 @@ var mediaThemeMicrovideo = (() => {
   _render2 = /* @__PURE__ */ new WeakSet();
   render_fn2 = function() {
     var _a3;
-    const hasListChanged = __privateGet27(this, _prevState2) !== JSON.stringify(this.mediaSubtitlesList);
+    const hasListChanged = __privateGet28(this, _prevState2) !== JSON.stringify(this.mediaSubtitlesList);
     const hasShowingChanged = this.value !== this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
     if (!hasListChanged && !hasShowingChanged)
       return;
@@ -11900,7 +12109,7 @@ var mediaThemeMicrovideo = (() => {
     );
     this.dispatchEvent(event);
   };
-  MediaCaptionsMenu.getTemplateHTML = getTemplateHTML17;
+  MediaCaptionsMenu.getTemplateHTML = getTemplateHTML16;
   var getSubtitlesListAttr2 = (el, attrName) => {
     const attrVal = el.getAttribute(attrName);
     return attrVal ? parseTextTracksStr(attrVal) : [];
@@ -11960,7 +12169,7 @@ var mediaThemeMicrovideo = (() => {
   var updateAriaChecked2 = (el) => {
     el.setAttribute("data-captions-enabled", areSubsOn(el).toString());
   };
-  var updateAriaLabel8 = (el) => {
+  var updateAriaLabel11 = (el) => {
     el.setAttribute("aria-label", t("closed captions"));
   };
   var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
@@ -11974,7 +12183,7 @@ var mediaThemeMicrovideo = (() => {
     }
     connectedCallback() {
       super.connectedCallback();
-      updateAriaLabel8(this);
+      updateAriaLabel11(this);
       updateAriaChecked2(this);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -11982,7 +12191,7 @@ var mediaThemeMicrovideo = (() => {
       if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) {
         updateAriaChecked2(this);
       } else if (attrName === MediaUIAttributes.MEDIA_LANG) {
-        updateAriaLabel8(this);
+        updateAriaLabel11(this);
       }
     }
     /**
@@ -12044,21 +12253,21 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu.js
-  var __accessCheck28 = (obj, member, msg) => {
+  var __accessCheck29 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet28 = (obj, member, getter) => {
-    __accessCheck28(obj, member, "read from private field");
+  var __privateGet29 = (obj, member, getter) => {
+    __accessCheck29(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd28 = (obj, member, value) => {
+  var __privateAdd29 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
-  var __privateMethod12 = (obj, member, method) => {
-    __accessCheck28(obj, member, "access private method");
+  var __privateMethod13 = (obj, member, method) => {
+    __accessCheck29(obj, member, "access private method");
     return method;
   };
   var _rates2;
@@ -12072,12 +12281,12 @@ var mediaThemeMicrovideo = (() => {
   var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     constructor() {
       super();
-      __privateAdd28(this, _render3);
-      __privateAdd28(this, _onChange3);
-      __privateAdd28(this, _rates2, new AttributeTokenList(this, Attributes14.RATES, {
+      __privateAdd29(this, _render3);
+      __privateAdd29(this, _onChange3);
+      __privateAdd29(this, _rates2, new AttributeTokenList(this, Attributes14.RATES, {
         defaultValue: DEFAULT_RATES
       }));
-      __privateMethod12(this, _render3, render_fn3).call(this);
+      __privateMethod13(this, _render3, render_fn3).call(this);
     }
     static get observedAttributes() {
       return [
@@ -12090,19 +12299,19 @@ var mediaThemeMicrovideo = (() => {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
         this.value = newValue;
-        __privateMethod12(this, _render3, render_fn3).call(this);
+        __privateMethod13(this, _render3, render_fn3).call(this);
       } else if (attrName === Attributes14.RATES && oldValue != newValue) {
-        __privateGet28(this, _rates2).value = newValue;
-        __privateMethod12(this, _render3, render_fn3).call(this);
+        __privateGet29(this, _rates2).value = newValue;
+        __privateMethod13(this, _render3, render_fn3).call(this);
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod12(this, _onChange3, onChange_fn3));
+      this.addEventListener("change", __privateMethod13(this, _onChange3, onChange_fn3));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod12(this, _onChange3, onChange_fn3));
+      this.removeEventListener("change", __privateMethod13(this, _onChange3, onChange_fn3));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -12118,7 +12327,7 @@ var mediaThemeMicrovideo = (() => {
      * Get the playback rates for the button.
      */
     get rates() {
-      return __privateGet28(this, _rates2);
+      return __privateGet29(this, _rates2);
     }
     /**
      * Set the playback rates for the button.
@@ -12126,13 +12335,13 @@ var mediaThemeMicrovideo = (() => {
      */
     set rates(value) {
       if (!value) {
-        __privateGet28(this, _rates2).value = "";
+        __privateGet29(this, _rates2).value = "";
       } else if (Array.isArray(value)) {
-        __privateGet28(this, _rates2).value = value.join(" ");
+        __privateGet29(this, _rates2).value = value.join(" ");
       } else if (typeof value === "string") {
-        __privateGet28(this, _rates2).value = value;
+        __privateGet29(this, _rates2).value = value;
       }
-      __privateMethod12(this, _render3, render_fn3).call(this);
+      __privateMethod13(this, _render3, render_fn3).call(this);
     }
     /**
      * The current playback rate
@@ -12153,7 +12362,7 @@ var mediaThemeMicrovideo = (() => {
   render_fn3 = function() {
     this.defaultSlot.textContent = "";
     const currentRate = this.mediaPlaybackRate;
-    const ratesSet = new Set(Array.from(__privateGet28(this, _rates2)).map((rate) => Number(rate)));
+    const ratesSet = new Set(Array.from(__privateGet29(this, _rates2)).map((rate) => Number(rate)));
     if (currentRate > 0 && !ratesSet.has(currentRate)) {
       ratesSet.add(currentRate);
     }
@@ -12202,6 +12411,10 @@ var mediaThemeMicrovideo = (() => {
         padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
       }
       
+      :host([aria-expanded="true"]) slot {
+        display: block;
+      }
+
       :host([aria-expanded="true"]) slot[name=tooltip] {
         display: none;
       }
@@ -12270,26 +12483,26 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-rendition-menu.js
-  var __accessCheck29 = (obj, member, msg) => {
+  var __accessCheck30 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet29 = (obj, member, getter) => {
-    __accessCheck29(obj, member, "read from private field");
+  var __privateGet30 = (obj, member, getter) => {
+    __accessCheck30(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd29 = (obj, member, value) => {
+  var __privateAdd30 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet26 = (obj, member, value, setter) => {
-    __accessCheck29(obj, member, "write to private field");
+    __accessCheck30(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod13 = (obj, member, method) => {
-    __accessCheck29(obj, member, "access private method");
+  var __privateMethod14 = (obj, member, method) => {
+    __accessCheck30(obj, member, "access private method");
     return method;
   };
   var _renditionList;
@@ -12301,10 +12514,10 @@ var mediaThemeMicrovideo = (() => {
   var MediaRenditionMenu = class extends MediaChromeMenu {
     constructor() {
       super(...arguments);
-      __privateAdd29(this, _render4);
-      __privateAdd29(this, _onChange4);
-      __privateAdd29(this, _renditionList, []);
-      __privateAdd29(this, _prevState3, {});
+      __privateAdd30(this, _render4);
+      __privateAdd30(this, _onChange4);
+      __privateAdd30(this, _renditionList, []);
+      __privateAdd30(this, _prevState3, {});
     }
     static get observedAttributes() {
       return [
@@ -12312,7 +12525,8 @@ var mediaThemeMicrovideo = (() => {
         MediaUIAttributes.MEDIA_RENDITION_LIST,
         MediaUIAttributes.MEDIA_RENDITION_SELECTED,
         MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
-        MediaUIAttributes.MEDIA_HEIGHT
+        MediaUIAttributes.MEDIA_HEIGHT,
+        MediaUIAttributes.MEDIA_WIDTH
       ];
     }
     static formatMenuItemText(text, rendition) {
@@ -12336,23 +12550,30 @@ var mediaThemeMicrovideo = (() => {
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
-      if (attrName === MediaUIAttributes.MEDIA_RENDITION_SELECTED && oldValue !== newValue) {
-        this.value = newValue != null ? newValue : "auto";
-        __privateMethod13(this, _render4, render_fn4).call(this);
-      } else if (attrName === MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
-        __privateSet26(this, _renditionList, parseRenditionList(newValue));
-        __privateMethod13(this, _render4, render_fn4).call(this);
-      } else if (attrName === MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
-        __privateMethod13(this, _render4, render_fn4).call(this);
+      if (oldValue !== newValue) {
+        switch (attrName) {
+          case MediaUIAttributes.MEDIA_RENDITION_SELECTED:
+            this.value = newValue != null ? newValue : "auto";
+            __privateMethod14(this, _render4, render_fn4).call(this);
+            break;
+          case MediaUIAttributes.MEDIA_RENDITION_LIST:
+            __privateSet26(this, _renditionList, parseRenditionList(newValue));
+            __privateMethod14(this, _render4, render_fn4).call(this);
+            break;
+          case MediaUIAttributes.MEDIA_HEIGHT:
+          case MediaUIAttributes.MEDIA_WIDTH:
+            __privateMethod14(this, _render4, render_fn4).call(this);
+            break;
+        }
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod13(this, _onChange4, onChange_fn4));
+      this.addEventListener("change", __privateMethod14(this, _onChange4, onChange_fn4));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod13(this, _onChange4, onChange_fn4));
+      this.removeEventListener("change", __privateMethod14(this, _onChange4, onChange_fn4));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -12365,11 +12586,11 @@ var mediaThemeMicrovideo = (() => {
       );
     }
     get mediaRenditionList() {
-      return __privateGet29(this, _renditionList);
+      return __privateGet30(this, _renditionList);
     }
     set mediaRenditionList(list) {
       __privateSet26(this, _renditionList, list);
-      __privateMethod13(this, _render4, render_fn4).call(this);
+      __privateMethod14(this, _render4, render_fn4).call(this);
     }
     /**
      * Get selected rendition id.
@@ -12386,6 +12607,12 @@ var mediaThemeMicrovideo = (() => {
     set mediaHeight(height) {
       setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
     }
+    get mediaWidth() {
+      return getNumericAttr(this, MediaUIAttributes.MEDIA_WIDTH);
+    }
+    set mediaWidth(width) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_WIDTH, width);
+    }
     compareRendition(a, b) {
       const ctor = this.constructor;
       return ctor.compareRendition(a, b);
@@ -12408,12 +12635,15 @@ var mediaThemeMicrovideo = (() => {
   _prevState3 = /* @__PURE__ */ new WeakMap();
   _render4 = /* @__PURE__ */ new WeakSet();
   render_fn4 = function() {
-    if (__privateGet29(this, _prevState3).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet29(this, _prevState3).mediaHeight === this.mediaHeight)
+    const isAuto = !this.mediaRenditionSelected;
+    if (__privateGet30(this, _prevState3).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet30(this, _prevState3).mediaHeight === this.mediaHeight && __privateGet30(this, _prevState3).mediaWidth === this.mediaWidth && __privateGet30(this, _prevState3).isAuto === isAuto)
       return;
-    __privateGet29(this, _prevState3).mediaRenditionList = JSON.stringify(
+    __privateGet30(this, _prevState3).mediaRenditionList = JSON.stringify(
       this.mediaRenditionList
     );
-    __privateGet29(this, _prevState3).mediaHeight = this.mediaHeight;
+    __privateGet30(this, _prevState3).mediaHeight = this.mediaHeight;
+    __privateGet30(this, _prevState3).mediaWidth = this.mediaWidth;
+    __privateGet30(this, _prevState3).isAuto = isAuto;
     const renditionList = this.mediaRenditionList.sort(
       this.compareRendition.bind(this)
     );
@@ -12424,7 +12654,6 @@ var mediaThemeMicrovideo = (() => {
       rendition.selected = rendition === selectedRendition;
     }
     this.defaultSlot.textContent = "";
-    const isAuto = !this.mediaRenditionSelected;
     for (const rendition of renditionList) {
       const text = this.formatRendition(rendition, {
         showBitrate: this.showRenditionBitrate(rendition)
@@ -12439,15 +12668,22 @@ var mediaThemeMicrovideo = (() => {
       this.defaultSlot.append(item2);
     }
     const showSelectedBitrate = selectedRendition && this.showRenditionBitrate(selectedRendition);
-    const autoText = isAuto ? (
-      // Auto • 1080p (4 Mbps)
-      selectedRendition ? this.formatMenuItemText(
-        `${t("Auto")} \u2022 ${this.formatRendition(selectedRendition, {
-          showBitrate: showSelectedBitrate
-        })}`,
-        selectedRendition
-      ) : this.formatMenuItemText(`${t("Auto")} (${this.mediaHeight}p)`)
-    ) : this.formatMenuItemText(t("Auto"));
+    let autoText = void 0;
+    if (isAuto) {
+      if (selectedRendition) {
+        autoText = this.formatMenuItemText(
+          `${t("Auto")} \u2022 ${this.formatRendition(selectedRendition, {
+            showBitrate: showSelectedBitrate
+          })}`,
+          selectedRendition
+        );
+      } else if (this.mediaHeight > 0 && this.mediaWidth > 0) {
+        autoText = this.formatMenuItemText(`${t("Auto")} (${Math.min(this.mediaWidth, this.mediaHeight)}p)`);
+      }
+    }
+    if (!autoText) {
+      autoText = this.formatMenuItemText(t("Auto"));
+    }
     const item = createMenuItem({
       type: "radio",
       text: autoText,
@@ -12546,26 +12782,26 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-context-menu.js
-  var __accessCheck30 = (obj, member, msg) => {
+  var __accessCheck31 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet30 = (obj, member, getter) => {
-    __accessCheck30(obj, member, "read from private field");
+  var __privateGet31 = (obj, member, getter) => {
+    __accessCheck31(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd30 = (obj, member, value) => {
+  var __privateAdd31 = (obj, member, value) => {
     if (member.has(obj))
       throw TypeError("Cannot add the same private member more than once");
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var __privateSet27 = (obj, member, value, setter) => {
-    __accessCheck30(obj, member, "write to private field");
+    __accessCheck31(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod14 = (obj, member, method) => {
-    __accessCheck30(obj, member, "access private method");
+  var __privateMethod15 = (obj, member, method) => {
+    __accessCheck31(obj, member, "access private method");
     return method;
   };
   var _isContextMenuOpen;
@@ -12583,7 +12819,7 @@ var mediaThemeMicrovideo = (() => {
   var _onDocumentClick;
   var _onKeyDown;
   var _onMenuClick;
-  function getTemplateHTML18(_attrs) {
+  function getTemplateHTML17(_attrs) {
     return (
       /*html*/
       `
@@ -12606,30 +12842,30 @@ var mediaThemeMicrovideo = (() => {
   var MediaContextMenu = class extends MediaChromeMenu {
     constructor() {
       super();
-      __privateAdd30(this, _updateVisibility);
-      __privateAdd30(this, _closeContextMenu);
-      __privateAdd30(this, _closeOtherContextMenus);
-      __privateAdd30(this, _isVideoContainer);
-      __privateAdd30(this, _onContextMenu);
-      __privateAdd30(this, _isContextMenuOpen, false);
-      __privateAdd30(this, _onControllerContextMenu, (event) => {
+      __privateAdd31(this, _updateVisibility);
+      __privateAdd31(this, _closeContextMenu);
+      __privateAdd31(this, _closeOtherContextMenus);
+      __privateAdd31(this, _isVideoContainer);
+      __privateAdd31(this, _onContextMenu);
+      __privateAdd31(this, _isContextMenuOpen, false);
+      __privateAdd31(this, _onControllerContextMenu, (event) => {
         const target = event.target;
         const isVideoElement = (target == null ? void 0 : target.nodeName) === "VIDEO";
-        const isVideoContainer = __privateMethod14(this, _isVideoContainer, isVideoContainer_fn).call(this, target);
+        const isVideoContainer = __privateMethod15(this, _isVideoContainer, isVideoContainer_fn).call(this, target);
         if (isVideoElement || isVideoContainer) {
-          if (!__privateGet30(this, _isContextMenuOpen)) {
-            __privateMethod14(this, _onContextMenu, onContextMenu_fn).call(this, event);
+          if (!__privateGet31(this, _isContextMenuOpen)) {
+            __privateMethod15(this, _onContextMenu, onContextMenu_fn).call(this, event);
           } else {
-            __privateMethod14(this, _closeContextMenu, closeContextMenu_fn).call(this);
+            __privateMethod15(this, _closeContextMenu, closeContextMenu_fn).call(this);
           }
         }
       });
-      __privateAdd30(this, _onDocumentClick, (event) => {
+      __privateAdd31(this, _onDocumentClick, (event) => {
         const target = event.target;
         const isInsideMenu = this.contains(target);
         const isRightClick = event.button === 2;
         const isVideo = (target == null ? void 0 : target.nodeName) === "VIDEO";
-        const isVideoContainer = __privateMethod14(this, _isVideoContainer, isVideoContainer_fn).call(this, target);
+        const isVideoContainer = __privateMethod15(this, _isVideoContainer, isVideoContainer_fn).call(this, target);
         if (isInsideMenu) {
           return;
         }
@@ -12637,53 +12873,53 @@ var mediaThemeMicrovideo = (() => {
         if (isRightClickOnVideo) {
           return;
         }
-        __privateMethod14(this, _closeContextMenu, closeContextMenu_fn).call(this);
+        __privateMethod15(this, _closeContextMenu, closeContextMenu_fn).call(this);
       });
-      __privateAdd30(this, _onKeyDown, (event) => {
+      __privateAdd31(this, _onKeyDown, (event) => {
         if (event.key === "Escape") {
-          __privateMethod14(this, _closeContextMenu, closeContextMenu_fn).call(this);
+          __privateMethod15(this, _closeContextMenu, closeContextMenu_fn).call(this);
         }
       });
-      __privateAdd30(this, _onMenuClick, (event) => {
+      __privateAdd31(this, _onMenuClick, (event) => {
         var _a3, _b2;
         const target = event.target;
         if ((_a3 = target.matches) == null ? void 0 : _a3.call(target, 'button[invoke="copy"]')) {
           const input = (_b2 = target.closest("media-context-menu-item")) == null ? void 0 : _b2.querySelector('input[slot="copy"]');
           input && navigator.clipboard.writeText(input.value);
         }
-        __privateMethod14(this, _closeContextMenu, closeContextMenu_fn).call(this);
+        __privateMethod15(this, _closeContextMenu, closeContextMenu_fn).call(this);
       });
       this.setAttribute("noautohide", "");
-      __privateMethod14(this, _updateVisibility, updateVisibility_fn).call(this);
+      __privateMethod15(this, _updateVisibility, updateVisibility_fn).call(this);
     }
     connectedCallback() {
       super.connectedCallback();
       getMediaController(this).addEventListener(
         "contextmenu",
-        __privateGet30(this, _onControllerContextMenu)
+        __privateGet31(this, _onControllerContextMenu)
       );
-      this.addEventListener("click", __privateGet30(this, _onMenuClick));
+      this.addEventListener("click", __privateGet31(this, _onMenuClick));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
       getMediaController(this).removeEventListener(
         "contextmenu",
-        __privateGet30(this, _onControllerContextMenu)
+        __privateGet31(this, _onControllerContextMenu)
       );
-      this.removeEventListener("click", __privateGet30(this, _onMenuClick));
-      document.removeEventListener("mousedown", __privateGet30(this, _onDocumentClick));
-      document.removeEventListener("keydown", __privateGet30(this, _onKeyDown));
+      this.removeEventListener("click", __privateGet31(this, _onMenuClick));
+      document.removeEventListener("mousedown", __privateGet31(this, _onDocumentClick));
+      document.removeEventListener("keydown", __privateGet31(this, _onKeyDown));
     }
   };
   _isContextMenuOpen = /* @__PURE__ */ new WeakMap();
   _updateVisibility = /* @__PURE__ */ new WeakSet();
   updateVisibility_fn = function() {
-    this.hidden = !__privateGet30(this, _isContextMenuOpen);
+    this.hidden = !__privateGet31(this, _isContextMenuOpen);
   };
   _closeContextMenu = /* @__PURE__ */ new WeakSet();
   closeContextMenu_fn = function() {
     __privateSet27(this, _isContextMenuOpen, false);
-    __privateMethod14(this, _updateVisibility, updateVisibility_fn).call(this);
+    __privateMethod15(this, _updateVisibility, updateVisibility_fn).call(this);
   };
   _closeOtherContextMenus = /* @__PURE__ */ new WeakSet();
   closeOtherContextMenus_fn = function() {
@@ -12691,7 +12927,7 @@ var mediaThemeMicrovideo = (() => {
     allContextMenus.forEach((menu) => {
       var _a3;
       if (menu !== this) {
-        __privateMethod14(_a3 = menu, _closeContextMenu, closeContextMenu_fn).call(_a3);
+        __privateMethod15(_a3 = menu, _closeContextMenu, closeContextMenu_fn).call(_a3);
       }
     });
   };
@@ -12712,27 +12948,27 @@ var mediaThemeMicrovideo = (() => {
   _onContextMenu = /* @__PURE__ */ new WeakSet();
   onContextMenu_fn = function(event) {
     event.preventDefault();
-    __privateMethod14(this, _closeOtherContextMenus, closeOtherContextMenus_fn).call(this);
+    __privateMethod15(this, _closeOtherContextMenus, closeOtherContextMenus_fn).call(this);
     __privateSet27(this, _isContextMenuOpen, true);
     this.style.position = "fixed";
     this.style.left = `${event.clientX}px`;
     this.style.top = `${event.clientY}px`;
-    __privateMethod14(this, _updateVisibility, updateVisibility_fn).call(this);
-    document.addEventListener("mousedown", __privateGet30(this, _onDocumentClick), {
+    __privateMethod15(this, _updateVisibility, updateVisibility_fn).call(this);
+    document.addEventListener("mousedown", __privateGet31(this, _onDocumentClick), {
       once: true
     });
-    document.addEventListener("keydown", __privateGet30(this, _onKeyDown), { once: true });
+    document.addEventListener("keydown", __privateGet31(this, _onKeyDown), { once: true });
   };
   _onDocumentClick = /* @__PURE__ */ new WeakMap();
   _onKeyDown = /* @__PURE__ */ new WeakMap();
   _onMenuClick = /* @__PURE__ */ new WeakMap();
-  MediaContextMenu.getTemplateHTML = getTemplateHTML18;
+  MediaContextMenu.getTemplateHTML = getTemplateHTML17;
   if (!GlobalThis.customElements.get("media-context-menu")) {
     GlobalThis.customElements.define("media-context-menu", MediaContextMenu);
   }
 
   // ../../node_modules/media-chrome/dist/menu/media-context-menu-item.js
-  function getTemplateHTML19(_attrs) {
+  function getTemplateHTML18(_attrs) {
     return (
       /*html*/
       `
@@ -12754,7 +12990,7 @@ var mediaThemeMicrovideo = (() => {
   var MediaContextMenuItem = class extends MediaChromeMenuItem {
   };
   MediaContextMenuItem.shadowRootOptions = { mode: "open" };
-  MediaContextMenuItem.getTemplateHTML = getTemplateHTML19;
+  MediaContextMenuItem.getTemplateHTML = getTemplateHTML18;
   if (!GlobalThis.customElements.get("media-context-menu-item")) {
     GlobalThis.customElements.define(
       "media-context-menu-item",
@@ -12769,7 +13005,7 @@ var mediaThemeMicrovideo = (() => {
     template.innerHTML = String.raw`
     <style>
       :host {
-        --_primary-color: var(--media-primary-color, rgb(255 255 255 / .9));
+        --_primary-color: var(--media-primary-color, rgb(255 255 255 / 0.9));
         --_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));
         --_volume-range-expand-width: 70px;
         --_volume-range-expand-height: 42px;
@@ -12853,6 +13089,7 @@ var mediaThemeMicrovideo = (() => {
 
       :host([controlbarvertical]) :is(media-control-bar, .control-group) {
         flex-direction: column;
+        width: 40px;
       }
 
       .volume-group {
@@ -12862,7 +13099,7 @@ var mediaThemeMicrovideo = (() => {
       }
 
       :host([controlbarplace$="end"]) .volume-group {
-        flex-direction: row-reverse;
+        flex-direction: row;
       }
 
       :host([controlbarplace$="end"]) .volume-group:first-child .volume-range-span {
@@ -12886,6 +13123,7 @@ var mediaThemeMicrovideo = (() => {
         position: relative;
         overflow: hidden;
         width: 0;
+        transition: width .2s ease-in-out , height .2s ease-in-out;
       }
 
       .volume-group:hover .volume-range-span,
@@ -12925,7 +13163,7 @@ var mediaThemeMicrovideo = (() => {
       media-control-bar:has(.volume-group:hover),
       [keyboardcontrol] media-control-bar:has(.volume-group:focus-within) {
         top: var(--_control-bar-offset-top, 0);
-        left: var(--_control-bar-offset-left, calc(var(--_volume-range-expand-width) / 2));
+        left: var(--_control-bar-offset-left, - var(--_volume-range-expand-width));
       }
 
       :host([controlbarplace$="start"]),
@@ -12938,7 +13176,7 @@ var mediaThemeMicrovideo = (() => {
       }
 
       :host([controlbarvertical][controlbarplace^="center"]) {
-        --_control-bar-offset-top: calc(var(--_volume-range-expand-height) / 2);
+        --_control-bar-offset-top: - var(--_volume-range-expand-height);
       }
 
       media-time-range {