@mux/mux-player 3.0.0 → 3.1.0

package/dist/themes/classic/index.mjs

@@ -1075,12 +1075,12 @@ function getOrInsertCSSRule(styleParent, selectorText) {
   return insertCSSRule(styleParent, selectorText);
 }
 function getCSSRule(styleParent, predicate) {
-  var _a3;
+  var _a3, _b2;
   let style;
-  for (style of styleParent.querySelectorAll("style")) {
+  for (style of (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : []) {
     let cssRules;
     try {
-      cssRules = (_a3 = style.sheet) == null ? void 0 : _a3.cssRules;
+      cssRules = (_b2 = style.sheet) == null ? void 0 : _b2.cssRules;
     } catch {
       continue;
     }
@@ -1092,7 +1092,7 @@ function getCSSRule(styleParent, predicate) {
 }
 function insertCSSRule(styleParent, selectorText) {
   var _a3, _b2;
-  const styles = (_a3 = styleParent.querySelectorAll("style")) != null ? _a3 : [];
+  const styles = (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : [];
   const style = styles == null ? void 0 : styles[styles.length - 1];
   if (!(style == null ? void 0 : style.sheet)) {
     console.warn(
@@ -2032,9 +2032,11 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   render() {
     var _a3;
     (_a3 = this.renderer) == null ? void 0 : _a3.update(this.props);
-    const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
-    if (style.visibility === "hidden") {
-      style.removeProperty("visibility");
+    if (this.renderRoot.isConnected) {
+      const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
+      if (style.visibility === "hidden") {
+        style.removeProperty("visibility");
+      }
     }
   }
 };
@@ -2124,8 +2126,9 @@ function getElementRects({
   };
 }
 function getRectRelativeToOffsetParent(element, offsetParent) {
+  var _a3;
   const rect = element.getBoundingClientRect();
-  const offsetRect = offsetParent.getBoundingClientRect();
+  const offsetRect = (_a3 = offsetParent == null ? void 0 : offsetParent.getBoundingClientRect()) != null ? _a3 : { x: 0, y: 0 };
   return {
     x: rect.x - offsetRect.x,
     y: rect.y - offsetRect.y,
@@ -2254,6 +2257,7 @@ var _invokerElement;
 var _previousItems;
 var _mutationObserver;
 var _isPopover;
+var _cssRule;
 var _handleSlotChange;
 var handleSlotChange_fn;
 var _handleMenuItems;
@@ -2361,6 +2365,7 @@ template.innerHTML = /*html*/
 ""}
       min-height: 0;
       position: relative;
+      bottom: var(--_menu-bottom);
       box-sizing: border-box;
     }
 
@@ -2400,27 +2405,30 @@ template.innerHTML = /*html*/
       transform: translate(-100%, 0);
     }
 
-    slot[name="header"] {
-      display: flex;
-      padding: .4em .7em;
-      border-bottom: 1px solid rgb(255 255 255 / .25);
-      cursor: default;
-    }
-
-    slot[name="header"][hidden] {
-      display: none;
-    }
-
-    button[part~="back"] {
+    button {
       background: none;
       color: inherit;
       border: none;
       padding: 0;
       font: inherit;
-      cursor: pointer;
       outline: inherit;
       display: inline-flex;
       align-items: center;
+    }
+
+    slot[name="header"][hidden] {
+      display: none;
+    }
+
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
+      padding: .4em .7em;
+      border-bottom: 1px solid rgb(255 255 255 / .25);
+      cursor: default;
+    }
+
+    slot[name="header"] > button[part~="back"],
+    slot[name="header"]::slotted(button[part~="back"]) {
       cursor: pointer;
     }
 
@@ -2456,7 +2464,8 @@ template.innerHTML = /*html*/
   </style>
   <style id="layout-row" media="width:0">
 
-    slot[name="header"] {
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
       padding: .4em .5em;
     }
 
@@ -2527,6 +2536,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     __privateAdd4(this, _previousItems, /* @__PURE__ */ new Set());
     __privateAdd4(this, _mutationObserver, void 0);
     __privateAdd4(this, _isPopover, false);
+    __privateAdd4(this, _cssRule, null);
     __privateAdd4(this, _handleMenuItems, () => {
       const previousItems = __privateGet4(this, _previousItems);
       const currentItems = new Set(this.items);
@@ -2543,11 +2553,11 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       __privateSet4(this, _previousItems, currentItems);
     });
     __privateAdd4(this, _handleBoundsResize, () => {
-      __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, false);
+      __privateMethod2(this, _positionMenu, positionMenu_fn).call(this);
       __privateMethod2(this, _resizeMenu, resizeMenu_fn).call(this, false);
     });
     __privateAdd4(this, _handleMenuResize, () => {
-      __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, false);
+      __privateMethod2(this, _positionMenu, positionMenu_fn).call(this);
     });
     if (!this.shadowRoot) {
       this.attachShadow({ mode: "open" });
@@ -2612,6 +2622,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   }
   connectedCallback() {
     var _a3, _b2;
+    __privateSet4(this, _cssRule, insertCSSRule(this.shadowRoot, ":host"));
     __privateMethod2(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
     if (!this.hasAttribute("disabled")) {
       this.enable();
@@ -2778,6 +2789,7 @@ _invokerElement = /* @__PURE__ */ new WeakMap();
 _previousItems = /* @__PURE__ */ new WeakMap();
 _mutationObserver = /* @__PURE__ */ new WeakMap();
 _isPopover = /* @__PURE__ */ new WeakMap();
+_cssRule = /* @__PURE__ */ new WeakMap();
 _handleSlotChange = /* @__PURE__ */ new WeakSet();
 handleSlotChange_fn = function(event) {
   const slot = event.target;
@@ -2815,7 +2827,6 @@ _handleOpen = /* @__PURE__ */ new WeakSet();
 handleOpen_fn = function() {
   var _a3;
   (_a3 = __privateGet4(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
-  requestAnimationFrame(() => __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, false));
   this.addEventListener("transitionend", () => this.focus(), { once: true });
   observeResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
   observeResize(this, __privateGet4(this, _handleMenuResize));
@@ -2830,7 +2841,7 @@ handleClosed_fn = function() {
 _handleBoundsResize = /* @__PURE__ */ new WeakMap();
 _handleMenuResize = /* @__PURE__ */ new WeakMap();
 _positionMenu = /* @__PURE__ */ new WeakSet();
-positionMenu_fn = function(animate, menuWidth) {
+positionMenu_fn = function(menuWidth) {
   if (this.hasAttribute("mediacontroller") && !this.anchor)
     return;
   if (this.hidden || !this.anchorElement)
@@ -2843,19 +2854,17 @@ positionMenu_fn = function(animate, menuWidth) {
   menuWidth != null ? menuWidth : menuWidth = this.offsetWidth;
   const bounds = getBoundsElement(this);
   const boundsRect = bounds.getBoundingClientRect();
-  const anchorRect = this.anchorElement.getBoundingClientRect();
   const right = boundsRect.width - x - menuWidth;
   const bottom = boundsRect.height - y - this.offsetHeight;
-  const maxHeight = boundsRect.height - anchorRect.height;
-  const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
-  if (!animate) {
-    style.setProperty("--media-menu-transition-in", "none");
-  }
+  const { style } = __privateGet4(this, _cssRule);
   style.setProperty("position", "absolute");
   style.setProperty("right", `${Math.max(0, right)}px`);
-  style.setProperty("bottom", `${bottom}px`);
-  style.setProperty("--_menu-max-height", `${maxHeight}px`);
-  style.removeProperty("--media-menu-transition-in");
+  style.setProperty("--_menu-bottom", `${bottom}px`);
+  const computedStyle = getComputedStyle(this);
+  const isBottomCalc = style.getPropertyValue("--_menu-bottom") === computedStyle.bottom;
+  const realBottom = isBottomCalc ? bottom : parseFloat(computedStyle.bottom);
+  const maxHeight = boundsRect.height - realBottom - parseFloat(computedStyle.marginBottom);
+  this.style.setProperty("--_menu-max-height", `${maxHeight}px`);
 };
 _resizeMenu = /* @__PURE__ */ new WeakSet();
 resizeMenu_fn = function(animate) {
@@ -2865,7 +2874,7 @@ resizeMenu_fn = function(animate) {
   const expandedSubmenu = expandedMenuItem == null ? void 0 : expandedMenuItem.querySelector(
     '[role="menu"]'
   );
-  const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
+  const { style } = __privateGet4(this, _cssRule);
   if (!animate) {
     style.setProperty("--media-menu-transition-in", "none");
   }
@@ -2877,11 +2886,11 @@ resizeMenu_fn = function(animate) {
     );
     this.style.setProperty("min-width", `${width}px`);
     this.style.setProperty("min-height", `${height}px`);
-    __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, animate, width);
+    __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, width);
   } else {
     this.style.removeProperty("min-width");
     this.style.removeProperty("min-height");
-    __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, animate);
+    __privateMethod2(this, _positionMenu, positionMenu_fn).call(this);
   }
   style.removeProperty("--media-menu-transition-in");
 };
@@ -2907,7 +2916,7 @@ backButtonElement_get = function() {
     'slot[name="header"]'
   );
   return (_a3 = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a3.find(
-    (el) => el.part.contains("back") && el.part.contains("button")
+    (el) => el.matches('button[part~="back"]')
   );
 };
 _handleToggle = /* @__PURE__ */ new WeakSet();
@@ -3571,10 +3580,17 @@ var __privateSet6 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
+var __privateMethod4 = (obj, member, method) => {
+  __accessCheck6(obj, member, "access private method");
+  return method;
+};
 var _mediaController2;
 var _clickListener;
+var _positionTooltip;
 var _keyupListener;
 var _keydownListener;
+var _setupTooltip;
+var setupTooltip_fn;
 var Attributes3 = {
   TOOLTIP_PLACEMENT: "tooltipplacement"
 };
@@ -3638,13 +3654,19 @@ template5.innerHTML = /*html*/
   }
 
   media-tooltip {
+    ${/** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */
+""}
+    max-width: 0;
+    overflow-x: clip;
     opacity: 0;
-    transition: opacity .3s;
+    transition: opacity .3s, max-width 0s 9s;
   }
 
   :host(:hover) media-tooltip,
   :host(:focus-visible) media-tooltip {
+    max-width: 100vw;
     opacity: 1;
+    transition: opacity .3s;
   }
 
   :host([notooltip]) slot[name="tooltip"] {
@@ -3653,7 +3675,7 @@ template5.innerHTML = /*html*/
 </style>
 
 <slot name="tooltip">
-  <media-tooltip>
+  <media-tooltip part="tooltip" aria-hidden="true">
     <slot name="tooltip-content"></slot>
   </media-tooltip>
 </slot>
@@ -3662,6 +3684,7 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
   constructor(options = {}) {
     var _a3;
     super();
+    __privateAdd6(this, _setupTooltip);
     __privateAdd6(this, _mediaController2, void 0);
     this.preventClick = false;
     this.tooltipEl = null;
@@ -3670,7 +3693,11 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       if (!this.preventClick) {
         this.handleClick(e);
       }
-      setTimeout(this.tooltipEl.updateXOffset, 0);
+      setTimeout(__privateGet6(this, _positionTooltip), 0);
+    });
+    __privateAdd6(this, _positionTooltip, () => {
+      var _a4, _b2;
+      (_b2 = (_a4 = this.tooltipEl) == null ? void 0 : _a4.updateXOffset) == null ? void 0 : _b2.call(_a4);
     });
     __privateAdd6(this, _keyupListener, (e) => {
       const { key } = e;
@@ -3705,8 +3732,8 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       }
       this.nativeEl.appendChild(slotTemplate7.content.cloneNode(true));
       this.shadowRoot.appendChild(buttonHTML);
-      this.tooltipEl = this.shadowRoot.querySelector("media-tooltip");
     }
+    this.tooltipEl = this.shadowRoot.querySelector("media-tooltip");
   }
   static get observedAttributes() {
     return [
@@ -3727,7 +3754,7 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
     this.tabIndex = -1;
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
-    var _a3, _b2, _c, _d, _e, _f, _g;
+    var _a3, _b2, _c, _d, _e;
     if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
       if (oldValue) {
         (_b2 = (_a3 = __privateGet6(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
@@ -3746,9 +3773,7 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
     } else if (attrName === Attributes3.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
       this.tooltipEl.placement = newValue;
     }
-    if (this.tooltipEl) {
-      (_g = (_f = this.tooltipEl) == null ? void 0 : _f.updateXOffset) == null ? void 0 : _g.call(_f);
-    }
+    __privateGet6(this, _positionTooltip).call(this);
   }
   connectedCallback() {
     var _a3, _b2, _c;
@@ -3773,17 +3798,16 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       );
       (_c = (_b2 = __privateGet6(this, _mediaController2)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
     }
-    GlobalThis.customElements.whenDefined("media-tooltip").then(this.setupTooltip.bind(this));
+    GlobalThis.customElements.whenDefined("media-tooltip").then(() => __privateMethod4(this, _setupTooltip, setupTooltip_fn).call(this));
   }
   disconnectedCallback() {
-    var _a3, _b2, _c, _d;
+    var _a3, _b2;
     this.disable();
     (_b2 = (_a3 = __privateGet6(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
     __privateSet6(this, _mediaController2, null);
-    this.removeEventListener("mouseenter", (_c = this.tooltipEl) == null ? void 0 : _c.updateXOffset);
-    this.removeEventListener("focus", (_d = this.tooltipEl) == null ? void 0 : _d.updateXOffset);
+    this.removeEventListener("mouseenter", __privateGet6(this, _positionTooltip));
+    this.removeEventListener("focus", __privateGet6(this, _positionTooltip));
     this.removeEventListener("click", __privateGet6(this, _clickListener));
-    this.tooltipEl = null;
   }
   get keysUsed() {
     return ["Enter", " "];
@@ -3804,20 +3828,22 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
   handleClick(e) {
   }
   // eslint-disable-line
-  // Called when we know the tooltip is ready / defined
-  setupTooltip() {
-    this.addEventListener("mouseenter", this.tooltipEl.updateXOffset);
-    this.addEventListener("focus", this.tooltipEl.updateXOffset);
-    this.addEventListener("click", __privateGet6(this, _clickListener));
-    const initialPlacement = this.tooltipPlacement;
-    if (initialPlacement)
-      this.tooltipEl.placement = initialPlacement;
-  }
 };
 _mediaController2 = /* @__PURE__ */ new WeakMap();
 _clickListener = /* @__PURE__ */ new WeakMap();
+_positionTooltip = /* @__PURE__ */ new WeakMap();
 _keyupListener = /* @__PURE__ */ new WeakMap();
 _keydownListener = /* @__PURE__ */ new WeakMap();
+_setupTooltip = /* @__PURE__ */ new WeakSet();
+setupTooltip_fn = function() {
+  this.addEventListener("mouseenter", __privateGet6(this, _positionTooltip));
+  this.addEventListener("focus", __privateGet6(this, _positionTooltip));
+  this.addEventListener("click", __privateGet6(this, _clickListener));
+  const initialPlacement = this.tooltipPlacement;
+  if (initialPlacement && this.tooltipEl) {
+    this.tooltipEl.placement = initialPlacement;
+  }
+};
 if (!GlobalThis.customElements.get("media-chrome-button")) {
   GlobalThis.customElements.define("media-chrome-button", MediaChromeButton);
 }
@@ -3985,7 +4011,7 @@ var __privateSet7 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var __privateMethod4 = (obj, member, method) => {
+var __privateMethod5 = (obj, member, method) => {
   __accessCheck7(obj, member, "access private method");
   return method;
 };
@@ -4017,16 +4043,16 @@ var MediaAudioTrackMenu = class extends MediaChromeMenu {
       this.value = newValue;
     } else if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST && oldValue !== newValue) {
       __privateSet7(this, _audioTrackList, parseAudioTrackList(newValue != null ? newValue : ""));
-      __privateMethod4(this, _render, render_fn).call(this);
+      __privateMethod5(this, _render, render_fn).call(this);
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("change", __privateMethod4(this, _onChange, onChange_fn));
+    this.addEventListener("change", __privateMethod5(this, _onChange, onChange_fn));
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("change", __privateMethod4(this, _onChange, onChange_fn));
+    this.removeEventListener("change", __privateMethod5(this, _onChange, onChange_fn));
   }
   /**
    * Returns the anchor element when it is a floating menu.
@@ -4044,7 +4070,7 @@ var MediaAudioTrackMenu = class extends MediaChromeMenu {
   }
   set mediaAudioTrackList(list) {
     __privateSet7(this, _audioTrackList, list);
-    __privateMethod4(this, _render, render_fn).call(this);
+    __privateMethod5(this, _render, render_fn).call(this);
   }
   /**
    * Get enabled audio track id.
@@ -4219,7 +4245,7 @@ var __privateSet8 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var __privateMethod5 = (obj, member, method) => {
+var __privateMethod6 = (obj, member, method) => {
   __accessCheck8(obj, member, "access private method");
   return method;
 };
@@ -4256,18 +4282,18 @@ var MediaCaptionsMenu = class extends MediaChromeMenu {
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback(attrName, oldValue, newValue);
     if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_LIST && oldValue !== newValue) {
-      __privateMethod5(this, _render2, render_fn2).call(this);
+      __privateMethod6(this, _render2, render_fn2).call(this);
     } else if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING && oldValue !== newValue) {
       this.value = newValue;
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("change", __privateMethod5(this, _onChange2, onChange_fn2));
+    this.addEventListener("change", __privateMethod6(this, _onChange2, onChange_fn2));
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("change", __privateMethod5(this, _onChange2, onChange_fn2));
+    this.removeEventListener("change", __privateMethod6(this, _onChange2, onChange_fn2));
   }
   /**
    * Returns the anchor element when it is a floating menu.
@@ -4753,7 +4779,7 @@ var __privateAdd12 = (obj, member, value) => {
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
-var __privateMethod6 = (obj, member, method) => {
+var __privateMethod7 = (obj, member, method) => {
   __accessCheck12(obj, member, "access private method");
   return method;
 };
@@ -4773,7 +4799,7 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     __privateAdd12(this, _rates2, new AttributeTokenList(this, Attributes5.RATES, {
       defaultValue: DEFAULT_RATES
     }));
-    __privateMethod6(this, _render3, render_fn3).call(this);
+    __privateMethod7(this, _render3, render_fn3).call(this);
   }
   static get observedAttributes() {
     return [
@@ -4788,16 +4814,16 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
       this.value = newValue;
     } else if (attrName === Attributes5.RATES && oldValue != newValue) {
       __privateGet11(this, _rates2).value = newValue;
-      __privateMethod6(this, _render3, render_fn3).call(this);
+      __privateMethod7(this, _render3, render_fn3).call(this);
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("change", __privateMethod6(this, _onChange3, onChange_fn3));
+    this.addEventListener("change", __privateMethod7(this, _onChange3, onChange_fn3));
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("change", __privateMethod6(this, _onChange3, onChange_fn3));
+    this.removeEventListener("change", __privateMethod7(this, _onChange3, onChange_fn3));
   }
   /**
    * Returns the anchor element when it is a floating menu.
@@ -4822,7 +4848,7 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     } else if (Array.isArray(value)) {
       __privateGet11(this, _rates2).value = value.join(" ");
     }
-    __privateMethod6(this, _render3, render_fn3).call(this);
+    __privateMethod7(this, _render3, render_fn3).call(this);
   }
   /**
    * The current playback rate
@@ -5004,7 +5030,7 @@ var __privateSet11 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var __privateMethod7 = (obj, member, method) => {
+var __privateMethod8 = (obj, member, method) => {
   __accessCheck14(obj, member, "access private method");
   return method;
 };
@@ -5037,18 +5063,18 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
       this.value = newValue != null ? newValue : "auto";
     } else if (attrName === MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
       __privateSet11(this, _renditionList, parseRenditionList(newValue));
-      __privateMethod7(this, _render4, render_fn4).call(this);
+      __privateMethod8(this, _render4, render_fn4).call(this);
     } else if (attrName === MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
-      __privateMethod7(this, _render4, render_fn4).call(this);
+      __privateMethod8(this, _render4, render_fn4).call(this);
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("change", __privateMethod7(this, _onChange4, onChange_fn4));
+    this.addEventListener("change", __privateMethod8(this, _onChange4, onChange_fn4));
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("change", __privateMethod7(this, _onChange4, onChange_fn4));
+    this.removeEventListener("change", __privateMethod8(this, _onChange4, onChange_fn4));
   }
   /**
    * Returns the anchor element when it is a floating menu.
@@ -5065,7 +5091,7 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
   }
   set mediaRenditionList(list) {
     __privateSet11(this, _renditionList, list);
-    __privateMethod7(this, _render4, render_fn4).call(this);
+    __privateMethod8(this, _render4, render_fn4).call(this);
   }
   /**
    * Get selected rendition id.