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

package/dist/themes/microvideo/index.mjs

@@ -214,84 +214,6 @@ function isNumericString(str) {
 }
 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",
@@ -355,7 +277,16 @@ var En = {
   "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
@@ -377,6 +308,86 @@ var t = (key, vars = {}) => resolveTranslation(key).replace(
   (_, 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() {
@@ -652,11 +663,8 @@ function insertCSSRule(styleParent, selectorText) {
       }
     };
   }
-  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);
@@ -770,15 +778,20 @@ var MediaGestureReceiver = class extends GlobalThis.HTMLElement {
     }
   }
   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;
@@ -887,13 +900,12 @@ var __privateMethod = (obj, member, method) => {
   __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;
@@ -906,6 +918,8 @@ var _setActive;
 var setActive_fn;
 var _scheduleInactive;
 var scheduleInactive_fn;
+var _chainedSlot;
+var _handleSlotChange;
 var Attributes = {
   AUDIO: "audio",
   AUTOHIDE: "autohide",
@@ -1153,18 +1167,47 @@ function getBreakpoints(breakpoints, width) {
 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))
@@ -1175,27 +1218,24 @@ var MediaContainer = class extends GlobalThis.HTMLElement {
       }, 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(
@@ -1243,6 +1283,13 @@ var MediaContainer = class extends GlobalThis.HTMLElement {
     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);
@@ -1252,12 +1299,23 @@ var MediaContainer = class extends GlobalThis.HTMLElement {
   }
   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
@@ -1340,42 +1398,12 @@ var MediaContainer = class extends GlobalThis.HTMLElement {
     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();
@@ -1446,6 +1474,8 @@ scheduleInactive_fn = function() {
     __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")) {
@@ -1794,10 +1824,10 @@ var toggleSubtitleTracks = (stateOwners, force) => {
     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])
@@ -2516,14 +2546,14 @@ var stateMediator = {
       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
@@ -3247,10 +3277,10 @@ var _keyboardShortcutsDialog;
 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;
@@ -3303,7 +3333,6 @@ var MediaController = class extends MediaContainer {
   constructor() {
     super();
     __privateAdd4(this, _setupDefaultStore);
-    __privateAdd4(this, _keyUpHandler);
     __privateAdd4(this, _keyDownHandler);
     __privateAdd4(this, _showKeyboardShortcutsDialog);
     this.mediaStateReceivers = [];
@@ -3318,6 +3347,17 @@ var MediaController = class extends MediaContainer {
       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) => {
@@ -3334,7 +3374,6 @@ var MediaController = class extends MediaContainer {
       });
       prevState = nextState;
     });
-    this.hasAttribute(Attributes2.NO_HOTKEYS) ? this.disableHotkeys() : this.enableHotkeys();
   }
   static get observedAttributes() {
     return super.observedAttributes.concat(
@@ -3346,7 +3385,10 @@ var MediaController = class extends MediaContainer {
       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() {
@@ -3478,19 +3520,21 @@ var MediaController = class extends MediaContainer {
           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) {
@@ -3537,7 +3581,8 @@ var MediaController = class extends MediaContainer {
     }
   }
   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);
     }
@@ -3545,31 +3590,58 @@ var MediaController = class extends MediaContainer {
       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
@@ -3660,10 +3732,11 @@ var MediaController = class extends MediaContainer {
   }
   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);
@@ -3838,6 +3911,7 @@ _keyboardShortcutsDialog = /* @__PURE__ */ new WeakMap();
 _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;
@@ -3865,28 +3939,18 @@ setupDefaultStore_fn = function() {
     }
   });
 };
-_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;
@@ -3894,7 +3958,7 @@ keyDownHandler_fn = function(e) {
   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() {
@@ -4608,11 +4672,9 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
   }
   /**
    * @abstract
-   * @argument {Event} e
    */
-  handleClick(e) {
+  handleClick(_e) {
   }
-  // eslint-disable-line
 };
 _mediaController2 = /* @__PURE__ */ new WeakMap();
 _clickListener = /* @__PURE__ */ new WeakMap();
@@ -4793,7 +4855,7 @@ var MediaCaptionsButton = class extends MediaChromeButton {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "switch");
+    this.setAttribute("role", "button");
     this.setAttribute("aria-label", t("closed captions"));
     updateAriaChecked(this);
   }
@@ -5062,9 +5124,6 @@ var MediaChromeDialog = class extends GlobalThis.HTMLElement {
     __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];
@@ -5093,6 +5152,14 @@ var MediaChromeDialog = class extends GlobalThis.HTMLElement {
     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);
@@ -5473,6 +5540,14 @@ function getTemplateHTML6(_attrs) {
         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">
@@ -5486,14 +5561,20 @@ function getTemplateHTML6(_attrs) {
         <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();
@@ -5723,7 +5804,7 @@ updateActiveSegment_fn = function(evt) {
 };
 _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);
@@ -5735,6 +5816,7 @@ disableUserEvents_fn = function() {
   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);
 };
@@ -5742,14 +5824,14 @@ _handlePointerDown = /* @__PURE__ */ new WeakSet();
 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();
@@ -5789,6 +5871,7 @@ handlePointerMove_fn2 = function(evt) {
 };
 MediaChromeRange.shadowRootOptions = { mode: "open" };
 MediaChromeRange.getTemplateHTML = getTemplateHTML6;
+MediaChromeRange.getContainerTemplateHTML = getContainerTemplateHTML;
 if (!GlobalThis.customElements.get("media-chrome-range")) {
   GlobalThis.customElements.define("media-chrome-range", MediaChromeRange);
 }
@@ -5946,7 +6029,7 @@ function getTemplateHTML8(_attrs, _props = {}) {
     */
     ""}
       :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;
       }
 
@@ -6206,6 +6289,11 @@ var MediaErrorDialog = class extends MediaChromeDialog {
     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() {
@@ -6567,7 +6655,7 @@ if (!GlobalThis.customElements.get("media-fullscreen-button")) {
 // ../../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*/
@@ -7564,21 +7652,36 @@ var MediaPreviewThumbnail = class extends GlobalThis.HTMLElement {
     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) {
@@ -7586,12 +7689,13 @@ var MediaPreviewThumbnail = class extends GlobalThis.HTMLElement {
         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();
@@ -7680,6 +7784,9 @@ function getSlotTemplateHTML16(_attrs, props) {
   `
   );
 }
+var updateAriaLabel7 = (el, seekOffset) => {
+  el.setAttribute("aria-label", t("seek back {seekOffset} seconds", { seekOffset }));
+};
 function getTooltipContentHTML10() {
   return t("Seek backward");
 }
@@ -7702,6 +7809,7 @@ var MediaSeekBackwardButton = class extends MediaChromeButton {
   }
   attributeChangedCallback(attrName, _oldValue, newValue) {
     super.attributeChangedCallback(attrName, _oldValue, newValue);
+    updateAriaLabel7(this, this.seekOffset);
     if (attrName === Attributes9.SEEK_OFFSET) {
       this.seekOffset = getNumericAttr(
         this,
@@ -7779,6 +7887,9 @@ function getSlotTemplateHTML17(_attrs, props) {
   `
   );
 }
+var updateAriaLabel8 = (el, seekOffset) => {
+  el.setAttribute("aria-label", t("seek forward {seekOffset} seconds", { seekOffset }));
+};
 function getTooltipContentHTML11() {
   return t("Seek forward");
 }
@@ -7801,6 +7912,7 @@ var MediaSeekForwardButton = class extends MediaChromeButton {
   }
   attributeChangedCallback(attrName, _oldValue, newValue) {
     super.attributeChangedCallback(attrName, _oldValue, newValue);
+    updateAriaLabel8(this, this.seekOffset);
     if (attrName === Attributes10.SEEK_OFFSET) {
       this.seekOffset = getNumericAttr(
         this,
@@ -7876,7 +7988,21 @@ var __privateSet17 = (obj, member, value, setter) => {
   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",
@@ -7905,8 +8031,7 @@ var formatTimesLabel = (el, { timesSep = DEFAULT_TIMES_SEP } = {}) => {
     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 : [];
@@ -7917,17 +8042,20 @@ var updateAriaValueText = (el) => {
     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 (
@@ -7937,10 +8065,26 @@ function getSlotTemplateHTML18(_attrs, props) {
   `
   );
 }
+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)}`;
   }
@@ -7957,28 +8101,8 @@ var MediaTimeDisplay = class extends MediaTextDisplay {
       "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() {
@@ -7993,22 +8117,32 @@ var MediaTimeDisplay = class extends MediaTextDisplay {
   }
   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;
@@ -8079,13 +8213,54 @@ var MediaTimeDisplay = class extends MediaTextDisplay {
   }
   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);
@@ -8218,7 +8393,7 @@ var __privateSet19 = (obj, member, value, setter) => {
   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;
 };
@@ -8233,7 +8408,6 @@ var _boxPaddingRight;
 var _mediaChaptersCues;
 var _isPointerDown;
 var _toggleRangeAnimation;
-var toggleRangeAnimation_fn;
 var _shouldRangeAnimate;
 var shouldRangeAnimate_fn;
 var _updateRange;
@@ -8249,19 +8423,20 @@ var _previewRequest;
 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;
@@ -8509,7 +8684,6 @@ var calcTimeFromRangeValue = (el, value = el.range.valueAsNumber) => {
 var MediaTimeRange = class extends MediaChromeRange {
   constructor() {
     super();
-    __privateAdd21(this, _toggleRangeAnimation);
     __privateAdd21(this, _shouldRangeAnimate);
     __privateAdd21(this, _getElementRects);
     __privateAdd21(this, _getBoxPosition);
@@ -8517,7 +8691,7 @@ var MediaTimeRange = class extends MediaChromeRange {
     __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);
@@ -8527,6 +8701,13 @@ var MediaTimeRange = class extends MediaChromeRange {
     __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;
@@ -8574,14 +8755,14 @@ var MediaTimeRange = class extends MediaChromeRange {
     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);
   }
@@ -8595,8 +8776,8 @@ var MediaTimeRange = class extends MediaChromeRange {
         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();
     }
@@ -8777,9 +8958,9 @@ var MediaTimeRange = class extends MediaChromeRange {
       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}`);
@@ -8790,10 +8971,10 @@ var MediaTimeRange = class extends MediaChromeRange {
     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))
@@ -8803,11 +8984,11 @@ var MediaTimeRange = class extends MediaChromeRange {
         __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;
     }
@@ -8823,14 +9004,7 @@ _boxPaddingLeft = /* @__PURE__ */ new WeakMap();
 _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);
@@ -8889,7 +9063,7 @@ handlePointerMove_fn3 = function(evt) {
     (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;
@@ -8903,11 +9077,11 @@ handlePointerMove_fn3 = function(evt) {
     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}`);
@@ -8916,7 +9090,7 @@ handlePointerMove_fn3 = function(evt) {
   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) {
@@ -8941,12 +9115,26 @@ seekRequest_fn = function() {
   );
 };
 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)
@@ -8955,17 +9143,9 @@ var toVolume = (el) => {
 };
 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,
@@ -8978,9 +9158,22 @@ var MediaVolumeRange = class extends MediaChromeRange {
       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);
@@ -9021,6 +9214,7 @@ var MediaVolumeRange = class extends MediaChromeRange {
     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);
 }
@@ -9112,21 +9306,21 @@ if (!GlobalThis.customElements.get("media-loop-button")) {
 }
 
 // ../../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;
 };
@@ -9166,16 +9360,16 @@ var TemplateInstance = class extends GlobalThis.DocumentFragment {
   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();
@@ -9264,87 +9458,87 @@ var Part = class {
 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");
@@ -9361,26 +9555,26 @@ list_get = function() {
 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);
@@ -9392,8 +9586,8 @@ var ChildNodePart = class extends Part {
     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
     ));
@@ -9670,35 +9864,37 @@ function tokenize2(str, parsers) {
 }
 
 // ../../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"
@@ -9736,18 +9932,20 @@ prependTemplate.innerHTML = /*html*/
 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;
@@ -9765,17 +9963,9 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       })) {
         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() {
@@ -9783,7 +9973,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   }
   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) {
@@ -9825,14 +10015,30 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   }
   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,
@@ -9855,6 +10061,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
 _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)) {
@@ -9867,7 +10074,7 @@ _updateTemplate = /* @__PURE__ */ new WeakSet();
 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(
@@ -9890,6 +10097,7 @@ updateTemplate_fn = function() {
     }).catch(console.error);
   }
 };
+_renderBind = /* @__PURE__ */ new WeakMap();
 MediaThemeElement.observedAttributes = ["template"];
 MediaThemeElement.processor = processor;
 function isValidUrl(url) {
@@ -10015,26 +10223,26 @@ var ToggleEvent = class extends Event {
 };
 
 // ../../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;
@@ -10044,7 +10252,7 @@ var _previousItems;
 var _mutationObserver2;
 var _isPopover;
 var _cssRule;
-var _handleSlotChange;
+var _handleSlotChange2;
 var handleSlotChange_fn;
 var _toggleHeader;
 var toggleHeader_fn;
@@ -10119,7 +10327,7 @@ function createIndicator(el, name) {
   }
   return "";
 }
-function getTemplateHTML13(_attrs) {
+function getTemplateHTML12(_attrs) {
   return (
     /*html*/
     `
@@ -10313,33 +10521,33 @@ var Attributes12 = {
 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)) {
@@ -10353,12 +10561,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       }
       __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);
@@ -10369,9 +10577,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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 [
@@ -10402,29 +10608,30 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   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();
     }
@@ -10432,30 +10639,35 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       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({
@@ -10466,12 +10678,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       );
     } 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) {
@@ -10480,7 +10692,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
         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) {
@@ -10527,12 +10739,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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;
     }
@@ -10543,12 +10755,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   }
   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;
     }
   }
@@ -10568,7 +10780,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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") {
@@ -10586,7 +10798,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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();
   }
 };
@@ -10597,7 +10809,7 @@ _previousItems = /* @__PURE__ */ new WeakMap();
 _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 })) {
@@ -10606,10 +10818,10 @@ handleSlotChange_fn = function(event) {
     }
   }
   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();
@@ -10640,17 +10852,17 @@ handleInvoke_fn2 = function(event) {
 _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();
@@ -10670,7 +10882,7 @@ positionMenu_fn = function(menuWidth) {
   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`);
@@ -10688,7 +10900,7 @@ resizeMenu_fn = function(animate) {
   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");
   }
@@ -10700,11 +10912,11 @@ resizeMenu_fn = function(animate) {
     );
     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");
 };
@@ -10712,15 +10924,15 @@ _handleClick = /* @__PURE__ */ new WeakSet();
 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();
@@ -10735,7 +10947,7 @@ _handleToggle = /* @__PURE__ */ new WeakSet();
 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]')
   );
@@ -10751,7 +10963,7 @@ handleToggle_fn = function(event) {
   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() {
@@ -10763,10 +10975,10 @@ _handleFocusOut2 = /* @__PURE__ */ new WeakSet();
 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;
     }
   }
@@ -10784,7 +10996,7 @@ handleKeyDown_fn2 = function(event) {
   event.preventDefault();
   event.stopPropagation();
   if (key === "Tab") {
-    if (__privateGet24(this, _isPopover)) {
+    if (__privateGet25(this, _isPopover)) {
       this.hidden = true;
       return;
     }
@@ -10795,8 +11007,8 @@ handleKeyDown_fn2 = function(event) {
     }
     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 === " ") {
@@ -10841,7 +11053,7 @@ selectItem_fn = function(item, toggle) {
   }
 };
 MediaChromeMenu.shadowRootOptions = { mode: "open" };
-MediaChromeMenu.getTemplateHTML = getTemplateHTML13;
+MediaChromeMenu.getTemplateHTML = getTemplateHTML12;
 function isMenuItem(element) {
   return ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
     element == null ? void 0 : element.role
@@ -10856,31 +11068,31 @@ if (!GlobalThis.customElements.get("media-chrome-menu")) {
 }
 
 // ../../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;
@@ -10888,12 +11100,10 @@ var _submenuDisconnected;
 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*/
     `
@@ -11031,15 +11241,13 @@ var Attributes13 = {
 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}`);
@@ -11053,12 +11261,27 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
       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 [
@@ -11087,21 +11310,21 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
   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;
@@ -11119,15 +11342,17 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
     }
     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");
@@ -11208,7 +11433,7 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
 };
 _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);
@@ -11221,9 +11446,9 @@ handleSlotChange_fn2 = function(event) {
   }
   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);
     }
   }
 };
@@ -11231,52 +11456,36 @@ _submenuConnected = /* @__PURE__ */ new WeakSet();
 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();
@@ -11288,7 +11497,7 @@ reset_fn = function() {
   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";
@@ -11311,7 +11520,7 @@ if (!GlobalThis.customElements.get("media-chrome-menu-item")) {
 }
 
 // ../../node_modules/media-chrome/dist/menu/media-settings-menu.js
-function getTemplateHTML15(_attrs) {
+function getTemplateHTML14(_attrs) {
   return (
     /*html*/
     `
@@ -11365,13 +11574,13 @@ var MediaSettingsMenu = class extends MediaChromeMenu {
     );
   }
 };
-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*/
     `
@@ -11401,7 +11610,7 @@ function getSuffixSlotInnerHTML2(_attrs) {
 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(
@@ -11500,26 +11709,26 @@ if (!GlobalThis.customElements.get("media-settings-menu-button")) {
 }
 
 // ../../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;
@@ -11531,10 +11740,10 @@ var onChange_fn;
 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 [
@@ -11550,16 +11759,16 @@ var MediaAudioTrackMenu = class extends MediaChromeMenu {
       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.
@@ -11573,11 +11782,11 @@ var MediaAudioTrackMenu = class extends MediaChromeMenu {
     );
   }
   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.
@@ -11594,7 +11803,7 @@ _audioTrackList = /* @__PURE__ */ new WeakMap();
 _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;
@@ -11657,7 +11866,7 @@ function getSlotTemplateHTML21() {
 function getTooltipContentHTML14() {
   return t("Audio");
 }
-var updateAriaLabel7 = (el) => {
+var updateAriaLabel10 = (el) => {
   const label = t("Audio");
   el.setAttribute("aria-label", label);
 };
@@ -11671,12 +11880,12 @@ var MediaAudioTrackMenuButton = class extends MediaChromeMenuButton {
   }
   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);
     }
   }
   /**
@@ -11711,26 +11920,26 @@ if (!GlobalThis.customElements.get("media-audio-track-menu-button")) {
 }
 
 // ../../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;
@@ -11745,7 +11954,7 @@ var ccIcon = (
     <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*/
     `
@@ -11757,9 +11966,9 @@ function getTemplateHTML17(_attrs) {
 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 [
@@ -11771,19 +11980,19 @@ var MediaCaptionsMenu = class extends MediaChromeMenu {
   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.
@@ -11821,7 +12030,7 @@ _prevState2 = /* @__PURE__ */ new WeakMap();
 _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;
@@ -11883,7 +12092,7 @@ onChange_fn2 = function() {
   );
   this.dispatchEvent(event);
 };
-MediaCaptionsMenu.getTemplateHTML = getTemplateHTML17;
+MediaCaptionsMenu.getTemplateHTML = getTemplateHTML16;
 var getSubtitlesListAttr2 = (el, attrName) => {
   const attrVal = el.getAttribute(attrName);
   return attrVal ? parseTextTracksStr(attrVal) : [];
@@ -11943,7 +12152,7 @@ function getTooltipContentHTML15() {
 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 {
@@ -11957,7 +12166,7 @@ var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
   }
   connectedCallback() {
     super.connectedCallback();
-    updateAriaLabel8(this);
+    updateAriaLabel11(this);
     updateAriaChecked2(this);
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -11965,7 +12174,7 @@ var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
     if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) {
       updateAriaChecked2(this);
     } else if (attrName === MediaUIAttributes.MEDIA_LANG) {
-      updateAriaLabel8(this);
+      updateAriaLabel11(this);
     }
   }
   /**
@@ -12027,21 +12236,21 @@ if (!GlobalThis.customElements.get("media-captions-menu-button")) {
 }
 
 // ../../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;
@@ -12055,12 +12264,12 @@ var Attributes14 = {
 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 [
@@ -12073,19 +12282,19 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     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.
@@ -12101,7 +12310,7 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
    * Get the playback rates for the button.
    */
   get rates() {
-    return __privateGet28(this, _rates2);
+    return __privateGet29(this, _rates2);
   }
   /**
    * Set the playback rates for the button.
@@ -12109,13 +12318,13 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
    */
   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
@@ -12136,7 +12345,7 @@ _render3 = /* @__PURE__ */ new WeakSet();
 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);
   }
@@ -12185,6 +12394,10 @@ function getSlotTemplateHTML23(attrs) {
         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;
       }
@@ -12253,26 +12466,26 @@ if (!GlobalThis.customElements.get("media-playback-rate-menu-button")) {
 }
 
 // ../../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;
@@ -12284,10 +12497,10 @@ var onChange_fn4;
 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 [
@@ -12295,7 +12508,8 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
       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) {
@@ -12319,23 +12533,30 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
   }
   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.
@@ -12348,11 +12569,11 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
     );
   }
   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.
@@ -12369,6 +12590,12 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
   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);
@@ -12391,12 +12618,15 @@ _renditionList = /* @__PURE__ */ new WeakMap();
 _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)
   );
@@ -12407,7 +12637,6 @@ render_fn4 = function() {
     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)
@@ -12422,15 +12651,22 @@ render_fn4 = function() {
     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,
@@ -12529,26 +12765,26 @@ if (!GlobalThis.customElements.get("media-rendition-menu-button")) {
 }
 
 // ../../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;
@@ -12566,7 +12802,7 @@ var onContextMenu_fn;
 var _onDocumentClick;
 var _onKeyDown;
 var _onMenuClick;
-function getTemplateHTML18(_attrs) {
+function getTemplateHTML17(_attrs) {
   return (
     /*html*/
     `
@@ -12589,30 +12825,30 @@ function getTemplateHTML18(_attrs) {
 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;
       }
@@ -12620,53 +12856,53 @@ var MediaContextMenu = class extends MediaChromeMenu {
       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() {
@@ -12674,7 +12910,7 @@ closeOtherContextMenus_fn = function() {
   allContextMenus.forEach((menu) => {
     var _a3;
     if (menu !== this) {
-      __privateMethod14(_a3 = menu, _closeContextMenu, closeContextMenu_fn).call(_a3);
+      __privateMethod15(_a3 = menu, _closeContextMenu, closeContextMenu_fn).call(_a3);
     }
   });
 };
@@ -12695,27 +12931,27 @@ _onControllerContextMenu = /* @__PURE__ */ new WeakMap();
 _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*/
     `
@@ -12737,7 +12973,7 @@ function getTemplateHTML19(_attrs) {
 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",
@@ -12752,7 +12988,7 @@ if (template) {
   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;
@@ -12836,6 +13072,7 @@ if (template) {
 
       :host([controlbarvertical]) :is(media-control-bar, .control-group) {
         flex-direction: column;
+        width: 40px;
       }
 
       .volume-group {
@@ -12845,7 +13082,7 @@ if (template) {
       }
 
       :host([controlbarplace$="end"]) .volume-group {
-        flex-direction: row-reverse;
+        flex-direction: row;
       }
 
       :host([controlbarplace$="end"]) .volume-group:first-child .volume-range-span {
@@ -12869,6 +13106,7 @@ if (template) {
         position: relative;
         overflow: hidden;
         width: 0;
+        transition: width .2s ease-in-out , height .2s ease-in-out;
       }
 
       .volume-group:hover .volume-range-span,
@@ -12908,7 +13146,7 @@ if (template) {
       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"]),
@@ -12921,7 +13159,7 @@ if (template) {
       }
 
       :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 {