@mux/mux-player 3.1.0 → 3.2.0

package/dist/themes/microvideo/index.js

@@ -22,7 +22,7 @@ var mediaThemeMicrovideo = (() => {
   // src/themes/microvideo/index.ts
   var microvideo_exports = {};
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/constants.js
+  // ../../node_modules/media-chrome/dist/constants.js
   var MediaUIEvents = {
     MEDIA_PLAY_REQUEST: "mediaplayrequest",
     MEDIA_PAUSE_REQUEST: "mediapauserequest",
@@ -56,42 +56,47 @@ var mediaThemeMicrovideo = (() => {
   };
   var MediaUIProps = {
     MEDIA_AIRPLAY_UNAVAILABLE: "mediaAirplayUnavailable",
-    MEDIA_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable",
-    MEDIA_PIP_UNAVAILABLE: "mediaPipUnavailable",
-    MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable",
-    MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable",
+    MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
+    MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
     MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable",
-    MEDIA_PAUSED: "mediaPaused",
-    MEDIA_HAS_PLAYED: "mediaHasPlayed",
+    MEDIA_BUFFERED: "mediaBuffered",
+    MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable",
+    MEDIA_CHAPTERS_CUES: "mediaChaptersCues",
+    MEDIA_CURRENT_TIME: "mediaCurrentTime",
+    MEDIA_DURATION: "mediaDuration",
     MEDIA_ENDED: "mediaEnded",
-    MEDIA_MUTED: "mediaMuted",
-    MEDIA_VOLUME_LEVEL: "mediaVolumeLevel",
-    MEDIA_VOLUME: "mediaVolume",
-    MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
-    MEDIA_IS_PIP: "mediaIsPip",
-    MEDIA_IS_CASTING: "mediaIsCasting",
+    MEDIA_ERROR: "mediaError",
+    MEDIA_ERROR_CODE: "mediaErrorCode",
+    MEDIA_ERROR_MESSAGE: "mediaErrorMessage",
+    MEDIA_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable",
+    MEDIA_HAS_PLAYED: "mediaHasPlayed",
+    MEDIA_HEIGHT: "mediaHeight",
     MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
-    MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
-    MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
+    MEDIA_IS_CASTING: "mediaIsCasting",
     MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
+    MEDIA_IS_PIP: "mediaIsPip",
+    MEDIA_LOADING: "mediaLoading",
+    MEDIA_MUTED: "mediaMuted",
+    MEDIA_PAUSED: "mediaPaused",
+    MEDIA_PIP_UNAVAILABLE: "mediaPipUnavailable",
     MEDIA_PLAYBACK_RATE: "mediaPlaybackRate",
-    MEDIA_CURRENT_TIME: "mediaCurrentTime",
-    MEDIA_DURATION: "mediaDuration",
-    MEDIA_SEEKABLE: "mediaSeekable",
-    MEDIA_PREVIEW_TIME: "mediaPreviewTime",
-    MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
-    MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
     MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter",
-    MEDIA_LOADING: "mediaLoading",
-    MEDIA_BUFFERED: "mediaBuffered",
+    MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
+    MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
+    MEDIA_PREVIEW_TIME: "mediaPreviewTime",
+    MEDIA_RENDITION_LIST: "mediaRenditionList",
+    MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
+    MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable",
+    MEDIA_SEEKABLE: "mediaSeekable",
     MEDIA_STREAM_TYPE: "mediaStreamType",
+    MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
+    MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
     MEDIA_TARGET_LIVE_WINDOW: "mediaTargetLiveWindow",
     MEDIA_TIME_IS_LIVE: "mediaTimeIsLive",
-    MEDIA_RENDITION_LIST: "mediaRenditionList",
-    MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
-    MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
-    MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
-    MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
+    MEDIA_VOLUME: "mediaVolume",
+    MEDIA_VOLUME_LEVEL: "mediaVolumeLevel",
+    MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
+    MEDIA_WIDTH: "mediaWidth"
   };
   var MediaUIPropsEntries = Object.entries(
     MediaUIProps
@@ -171,7 +176,28 @@ var mediaThemeMicrovideo = (() => {
     PICTURE_IN_PICTURE: "picture-in-picture"
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/labels/labels.js
+  // ../../node_modules/media-chrome/dist/labels/labels.js
+  var defaultErrorTitles = {
+    2: "Network Error",
+    3: "Decode Error",
+    4: "Source Not Supported",
+    5: "Encryption Error"
+  };
+  var defaultErrorMessages = {
+    2: "A network error caused the media download to fail.",
+    3: "A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.",
+    4: "An unsupported error occurred. The server or network failed, or your browser does not support this format.",
+    5: "The media is encrypted and there are no keys to decrypt it."
+  };
+  var formatError = (error) => {
+    var _a3, _b2;
+    if (error.code === 1)
+      return null;
+    return {
+      title: (_a3 = defaultErrorTitles[error.code]) != null ? _a3 : `Error ${error.code}`,
+      message: (_b2 = defaultErrorMessages[error.code]) != null ? _b2 : error.message
+    };
+  };
   var tooltipLabels = {
     ENTER_AIRPLAY: "Start airplay",
     EXIT_AIRPLAY: "Stop airplay",
@@ -231,7 +257,7 @@ var mediaThemeMicrovideo = (() => {
     ...verbs
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/utils.js
+  // ../../node_modules/media-chrome/dist/utils/utils.js
   function stringifyRenditionList(renditions) {
     return renditions == null ? void 0 : renditions.map(stringifyRendition).join(" ");
   }
@@ -286,7 +312,7 @@ var mediaThemeMicrovideo = (() => {
   }
   var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/time.js
+  // ../../node_modules/media-chrome/dist/utils/time.js
   var UnitLabels = [
     {
       singular: "hour",
@@ -364,7 +390,7 @@ var mediaThemeMicrovideo = (() => {
     }
   });
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/server-safe-globals.js
+  // ../../node_modules/media-chrome/dist/utils/server-safe-globals.js
   var EventTarget = class {
     addEventListener() {
     }
@@ -401,12 +427,7 @@ var mediaThemeMicrovideo = (() => {
     },
     removeEventListener() {
     },
-    /**
-     *
-     * @param {Event} event
-     * @returns {boolean}
-     */
-    dispatchEvent(event) {
+    dispatchEvent(_event) {
       return false;
     }
   };
@@ -435,26 +456,13 @@ var mediaThemeMicrovideo = (() => {
       }
     },
     localStorage: {
-      /**
-       * @param {string} key
-       * @returns {string|null}
-       */
-      getItem(key) {
+      getItem(_key) {
         return null;
       },
-      /**
-       * @param {string} key
-       * @param {string} value
-       */
-      setItem(key, value) {
+      setItem(_key, _value2) {
       },
-      // eslint-disable-line @typescript-eslint/no-unused-vars
-      /**
-       * @param {string} key
-       */
-      removeItem(key) {
+      removeItem(_key) {
       }
-      // eslint-disable-line @typescript-eslint/no-unused-vars
     },
     CustomEvent: function CustomEvent2() {
     },
@@ -466,9 +474,6 @@ var mediaThemeMicrovideo = (() => {
         return "";
       }
     },
-    /**
-     * @param {string} media
-     */
     matchMedia(media) {
       return {
         matches: false,
@@ -481,7 +486,7 @@ var mediaThemeMicrovideo = (() => {
   var GlobalThis = isServer && !isShimmed ? globalThisShim : globalThis;
   var Document2 = isServer && !isShimmed ? documentShim : globalThis.document;
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/resize-observer.js
+  // ../../node_modules/media-chrome/dist/utils/resize-observer.js
   var callbacksMap = /* @__PURE__ */ new WeakMap();
   var getCallbacks = (element) => {
     let callbacks = callbacksMap.get(element);
@@ -510,7 +515,14 @@ var mediaThemeMicrovideo = (() => {
     }
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/element-utils.js
+  // ../../node_modules/media-chrome/dist/utils/element-utils.js
+  function namedNodeMapToObject(namedNodeMap) {
+    const obj = {};
+    for (const attr of namedNodeMap) {
+      obj[attr.name] = attr.value;
+    }
+    return obj;
+  }
   function getMediaController(host) {
     var _a3;
     return (_a3 = getAttributeMediaController(host)) != null ? _a3 : closestComposedNode(host, "media-controller");
@@ -575,17 +587,17 @@ var mediaThemeMicrovideo = (() => {
     }
     return null;
   }
-  function isElementVisible(element, depth = 3) {
+  function isElementVisible(element, { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}) {
     if (element.checkVisibility) {
       return element.checkVisibility({
-        checkOpacity: true,
-        checkVisibilityCSS: true
+        checkOpacity,
+        checkVisibilityCSS
       });
     }
     let el = element;
     while (el && depth > 0) {
       const style = getComputedStyle(el);
-      if (style.opacity === "0" || style.visibility === "hidden" || style.display === "none") {
+      if (checkOpacity && style.opacity === "0" || checkVisibilityCSS && style.visibility === "hidden" || style.display === "none") {
         return false;
       }
       el = el.parentElement;
@@ -612,12 +624,12 @@ var mediaThemeMicrovideo = (() => {
     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;
       }
@@ -629,7 +641,7 @@ var mediaThemeMicrovideo = (() => {
   }
   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(
@@ -699,7 +711,7 @@ var mediaThemeMicrovideo = (() => {
     el.setAttribute(attrName, nextValue);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-gesture-receiver.js
+  // ../../node_modules/media-chrome/dist/media-gesture-receiver.js
   var __accessCheck = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -859,7 +871,7 @@ var mediaThemeMicrovideo = (() => {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-container.js
+  // ../../node_modules/media-chrome/dist/media-container.js
   var __accessCheck2 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -975,7 +987,7 @@ var mediaThemeMicrovideo = (() => {
   * we'll want to add here any slotted elements that shouldn't get pointer-events by default when slotted
   */
   ""}
-    ::slotted(:not([slot=media]):not([slot=poster]):not(media-loading-indicator):not([hidden])) {
+    ::slotted(:not([slot=media]):not([slot=poster]):not(media-loading-indicator):not([role=dialog]):not([hidden])) {
       pointer-events: auto;
     }
 
@@ -1022,14 +1034,14 @@ var mediaThemeMicrovideo = (() => {
 
     ${/* Only add these if auto hide is not disabled */
   ""}
-    ::slotted(:not([slot=media]):not([slot=poster]):not([${Attributes.NO_AUTOHIDE}]):not([hidden])) {
+    ::slotted(:not([slot=media]):not([slot=poster]):not([${Attributes.NO_AUTOHIDE}]):not([hidden]):not([role=dialog])) {
       opacity: 1;
       transition: opacity 0.25s;
     }
 
     ${/* Hide controls when inactive, not paused, not audio and auto hide not disabled */
   ""}
-    :host([${Attributes.USER_INACTIVE}]:not([${MediaUIAttributes.MEDIA_PAUSED}]):not([${MediaUIAttributes.MEDIA_IS_AIRPLAYING}]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) ::slotted(:not([slot=media]):not([slot=poster]):not([${Attributes.NO_AUTOHIDE}])) {
+    :host([${Attributes.USER_INACTIVE}]:not([${MediaUIAttributes.MEDIA_PAUSED}]):not([${MediaUIAttributes.MEDIA_IS_AIRPLAYING}]):not([${MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) ::slotted(:not([slot=media]):not([slot=poster]):not([${Attributes.NO_AUTOHIDE}]):not([role=dialog])) {
       opacity: 0;
       transition: opacity 1s;
     }
@@ -1048,12 +1060,14 @@ var mediaThemeMicrovideo = (() => {
       display: none;
     }
 
-    ::slotted([role="menu"]) {
-      align-self: end;
+    ::slotted([role=dialog]) {
+      width: 100%;
+      height: 100%;
+      align-self: center;
     }
 
-    ::slotted([role="dialog"]) {
-      align-self: center;
+    ::slotted([role=menu]) {
+      align-self: end;
     }
   </style>
 
@@ -1070,6 +1084,7 @@ var mediaThemeMicrovideo = (() => {
   ""}
     <slot part="bottom chrome"></slot>
   </span>
+  <slot name="dialog" part="layer dialog-layer"></slot>
 `;
   var MEDIA_UI_ATTRIBUTE_NAMES = Object.values(MediaUIAttributes);
   var defaultBreakpoints = "sm:384 md:576 lg:768 xl:960";
@@ -1203,36 +1218,27 @@ var mediaThemeMicrovideo = (() => {
         (name) => ![
           MediaUIAttributes.MEDIA_RENDITION_LIST,
           MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
-          MediaUIAttributes.MEDIA_CHAPTERS_CUES
+          MediaUIAttributes.MEDIA_CHAPTERS_CUES,
+          MediaUIAttributes.MEDIA_WIDTH,
+          MediaUIAttributes.MEDIA_HEIGHT,
+          MediaUIAttributes.MEDIA_ERROR,
+          MediaUIAttributes.MEDIA_ERROR_MESSAGE
         ].includes(name)
       );
     }
     // Could share this code with media-chrome-html-element instead
-    attributeChangedCallback(attrName, oldValue, newValue) {
+    attributeChangedCallback(attrName, _oldValue, newValue) {
       if (attrName.toLowerCase() == Attributes.AUTOHIDE) {
         this.autohide = newValue;
       }
     }
     // First direct child with slot=media, or null
-    /**
-     * @returns {HTMLVideoElement &
-     * {buffered,
-     * webkitEnterFullscreen?,
-     * webkitExitFullscreen?,
-     * requestCast?,
-     * webkitShowPlaybackTargetPicker?,
-     * videoTracks?,
-     * }}
-     */
     get media() {
       let media = this.querySelector(":scope > [slot=media]");
       if ((media == null ? void 0 : media.nodeName) == "SLOT")
         media = media.assignedElements({ flatten: true })[0];
       return media;
     }
-    /**
-     * @param {HTMLMediaElement} media
-     */
     async handleMediaUpdated(media) {
       if (!media)
         return;
@@ -1266,15 +1272,10 @@ var mediaThemeMicrovideo = (() => {
     }
     /**
      * @abstract
-     * @param {HTMLMediaElement} media
      */
-    mediaSetCallback(media) {
+    mediaSetCallback(_media) {
     }
-    // eslint-disable-line
-    /**
-     * @param {HTMLMediaElement} media
-     */
-    mediaUnsetCallback(media) {
+    mediaUnsetCallback(_media) {
       __privateSet2(this, _currentMedia, null);
     }
     handleEvent(event) {
@@ -1381,7 +1382,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-container", MediaContainer);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/attribute-token-list.js
+  // ../../node_modules/media-chrome/dist/utils/attribute-token-list.js
   var __accessCheck3 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -1494,7 +1495,7 @@ var mediaThemeMicrovideo = (() => {
     return __privateGet3(this, _tokenSet).size ? __privateGet3(this, _tokenSet) : __privateGet3(this, _defaultSet);
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/captions.js
+  // ../../node_modules/media-chrome/dist/utils/captions.js
   var splitTextTracksStr = (textTracksStr = "") => textTracksStr.split(/\s+/);
   var parseTextTrackStr = (textTrackStr = "") => {
     const [kind, language, encodedLabel] = textTrackStr.split(":");
@@ -1568,7 +1569,7 @@ var mediaThemeMicrovideo = (() => {
     return showingSubtitles;
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/fullscreen-api.js
+  // ../../node_modules/media-chrome/dist/utils/fullscreen-api.js
   var enterFullscreen = (stateOwners) => {
     var _a3;
     const { media, fullscreenElement } = stateOwners;
@@ -1641,7 +1642,7 @@ var mediaThemeMicrovideo = (() => {
     return !!(documentElement == null ? void 0 : documentElement[fullscreenEnabledKey]) || media && "webkitSupportsFullscreen" in media;
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/platform-tests.js
+  // ../../node_modules/media-chrome/dist/utils/platform-tests.js
   var testMediaEl;
   var getTestMediaEl = () => {
     var _a3, _b2;
@@ -1655,7 +1656,25 @@ var mediaThemeMicrovideo = (() => {
       return false;
     const prevVolume = mediaEl.volume;
     mediaEl.volume = prevVolume / 2 + 0.1;
-    await delay(0);
+    const abortController = new AbortController();
+    const volumeSupported2 = await Promise.race([
+      dispatchedVolumeChange(mediaEl, abortController.signal),
+      volumeChanged(mediaEl, prevVolume)
+    ]);
+    abortController.abort();
+    return volumeSupported2;
+  };
+  var dispatchedVolumeChange = (mediaEl, signal) => {
+    return new Promise((resolve) => {
+      mediaEl.addEventListener("volumechange", () => resolve(true), { signal });
+    });
+  };
+  var volumeChanged = async (mediaEl, prevVolume) => {
+    for (let i = 0; i < 10; i++) {
+      if (mediaEl.volume === prevVolume)
+        return false;
+      await delay(10);
+    }
     return mediaEl.volume !== prevVolume;
   };
   var isSafari = /.*Version\/.*Safari\/.*/.test(
@@ -1674,7 +1693,7 @@ var mediaThemeMicrovideo = (() => {
   var airplaySupported = !!GlobalThis.WebKitPlaybackTargetAvailabilityEvent;
   var castSupported = !!GlobalThis.chrome;
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-store/util.js
+  // ../../node_modules/media-chrome/dist/media-store/util.js
   var getSubtitleTracks = (stateOwners) => {
     return getTextTracksList(stateOwners.media, (textTrack) => {
       return [TextTrackKinds.SUBTITLES, TextTrackKinds.CAPTIONS].includes(
@@ -1732,6 +1751,8 @@ var mediaThemeMicrovideo = (() => {
   var areValuesEq = (x, y) => {
     if (x === y)
       return true;
+    if (x == null || y == null)
+      return false;
     if (typeof x !== typeof y)
       return false;
     if (typeof x === "number" && Number.isNaN(x) && Number.isNaN(y))
@@ -1757,7 +1778,7 @@ var mediaThemeMicrovideo = (() => {
     return xs.every((x, i) => areValuesEq(x, ys[i]));
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-store/state-mediator.js
+  // ../../node_modules/media-chrome/dist/media-store/state-mediator.js
   var StreamTypeValues = Object.values(StreamTypes);
   var volumeSupported;
   var volumeSupportPromise = hasVolumeSupportAsync().then((supported) => {
@@ -1782,6 +1803,45 @@ var mediaThemeMicrovideo = (() => {
     );
   };
   var stateMediator = {
+    mediaError: {
+      get(stateOwners) {
+        const { media } = stateOwners;
+        return media == null ? void 0 : media.error;
+      },
+      mediaEvents: ["emptied", "error"]
+    },
+    mediaErrorCode: {
+      get(stateOwners) {
+        var _a3;
+        const { media } = stateOwners;
+        return (_a3 = media == null ? void 0 : media.error) == null ? void 0 : _a3.code;
+      },
+      mediaEvents: ["emptied", "error"]
+    },
+    mediaErrorMessage: {
+      get(stateOwners) {
+        var _a3, _b2;
+        const { media } = stateOwners;
+        return (_b2 = (_a3 = media == null ? void 0 : media.error) == null ? void 0 : _a3.message) != null ? _b2 : "";
+      },
+      mediaEvents: ["emptied", "error"]
+    },
+    mediaWidth: {
+      get(stateOwners) {
+        var _a3;
+        const { media } = stateOwners;
+        return (_a3 = media == null ? void 0 : media.videoWidth) != null ? _a3 : 0;
+      },
+      mediaEvents: ["resize"]
+    },
+    mediaHeight: {
+      get(stateOwners) {
+        var _a3;
+        const { media } = stateOwners;
+        return (_a3 = media == null ? void 0 : media.videoHeight) != null ? _a3 : 0;
+      },
+      mediaEvents: ["resize"]
+    },
     mediaPaused: {
       get(stateOwners) {
         var _a3;
@@ -1927,7 +1987,7 @@ var mediaThemeMicrovideo = (() => {
       },
       set(value, stateOwners) {
         const { media } = stateOwners;
-        if (!media || media.readyState === 0)
+        if (!media || !isValidNumber(value))
           return;
         media.currentTime = value;
       },
@@ -2134,15 +2194,21 @@ var mediaThemeMicrovideo = (() => {
       textTracksEvents: ["addtrack", "removetrack", "change"],
       stateOwnersUpdateHandlers: [
         (handler, stateOwners) => {
+          var _a3;
           const { media } = stateOwners;
           if (!media)
             return;
           const chaptersTrack = media.querySelector(
             'track[kind="chapters"][default][src]'
           );
+          const shadowChaptersTrack = (_a3 = media.shadowRoot) == null ? void 0 : _a3.querySelector(
+            ':is(video,audio) > track[kind="chapters"][default][src]'
+          );
           chaptersTrack == null ? void 0 : chaptersTrack.addEventListener("load", handler);
+          shadowChaptersTrack == null ? void 0 : shadowChaptersTrack.addEventListener("load", handler);
           return () => {
             chaptersTrack == null ? void 0 : chaptersTrack.removeEventListener("load", handler);
+            shadowChaptersTrack == null ? void 0 : shadowChaptersTrack.removeEventListener("load", handler);
           };
         }
       ]
@@ -2516,7 +2582,7 @@ var mediaThemeMicrovideo = (() => {
     }
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-store/request-map.js
+  // ../../node_modules/media-chrome/dist/media-store/request-map.js
   var requestMap = {
     /**
      * @TODO Consider adding state to `StateMediator` for e.g. `mediaThumbnailCues` and use that for derived state here (CJP)
@@ -2621,7 +2687,7 @@ var mediaThemeMicrovideo = (() => {
       var _a3;
       const key = "mediaCurrentTime";
       const value = (_a3 = stateMediator2.mediaSeekable.get(stateOwners)) == null ? void 0 : _a3[1];
-      if (!Number.isNaN(Number(value)))
+      if (Number.isNaN(Number(value)))
         return;
       stateMediator2[key].set(value, stateOwners);
     },
@@ -2706,7 +2772,7 @@ var mediaThemeMicrovideo = (() => {
     }
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-store/media-store.js
+  // ../../node_modules/media-chrome/dist/media-store/media-store.js
   var createMediaStore = ({
     media,
     fullscreenElement,
@@ -2944,7 +3010,7 @@ var mediaThemeMicrovideo = (() => {
       // "heavy lifting" is now moved into the facade `set()`
       dispatch(action) {
         const { type, detail } = action;
-        if (requestMap2[type]) {
+        if (requestMap2[type] && state.mediaErrorCode == null) {
           updateState(requestMap2[type](stateMediator2, stateOwners, action));
           return;
         }
@@ -2979,7 +3045,7 @@ var mediaThemeMicrovideo = (() => {
   };
   var media_store_default = createMediaStore;
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-controller.js
+  // ../../node_modules/media-chrome/dist/media-controller.js
   var __accessCheck4 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -3434,15 +3500,15 @@ var mediaThemeMicrovideo = (() => {
   var MEDIA_UI_PROP_NAMES = Object.values(MediaUIProps);
   var getMediaUIAttributesFrom = (child) => {
     var _a3, _b2, _c, _d;
-    let { observedAttributes } = child.constructor;
-    if (!observedAttributes && ((_a3 = child.nodeName) == null ? void 0 : _a3.includes("-"))) {
+    let { observedAttributes: observedAttributes2 } = child.constructor;
+    if (!observedAttributes2 && ((_a3 = child.nodeName) == null ? void 0 : _a3.includes("-"))) {
       GlobalThis.customElements.upgrade(child);
-      ({ observedAttributes } = child.constructor);
+      ({ observedAttributes: observedAttributes2 } = child.constructor);
     }
     const mediaChromeAttributesList = (_d = (_c = (_b2 = child == null ? void 0 : child.getAttribute) == null ? void 0 : _b2.call(child, MediaStateReceiverAttributes.MEDIA_CHROME_ATTRIBUTES)) == null ? void 0 : _c.split) == null ? void 0 : _d.call(_c, /\s+/);
-    if (!Array.isArray(observedAttributes || mediaChromeAttributesList))
+    if (!Array.isArray(observedAttributes2 || mediaChromeAttributesList))
       return [];
-    return (observedAttributes || mediaChromeAttributesList).filter(
+    return (observedAttributes2 || mediaChromeAttributesList).filter(
       (attrName) => MEDIA_UI_ATTRIBUTE_NAMES2.includes(attrName)
     );
   };
@@ -3634,7 +3700,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-controller", MediaController);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-chrome-button.js
+  // ../../node_modules/media-chrome/dist/media-chrome-button.js
   var __accessCheck5 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -3653,10 +3719,17 @@ var mediaThemeMicrovideo = (() => {
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
+  var __privateMethod3 = (obj, member, method) => {
+    __accessCheck5(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"
   };
@@ -3720,13 +3793,19 @@ var mediaThemeMicrovideo = (() => {
   }
 
   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"] {
@@ -3735,7 +3814,7 @@ var mediaThemeMicrovideo = (() => {
 </style>
 
 <slot name="tooltip">
-  <media-tooltip>
+  <media-tooltip part="tooltip" aria-hidden="true">
     <slot name="tooltip-content"></slot>
   </media-tooltip>
 </slot>
@@ -3744,6 +3823,7 @@ var mediaThemeMicrovideo = (() => {
     constructor(options = {}) {
       var _a3;
       super();
+      __privateAdd5(this, _setupTooltip);
       __privateAdd5(this, _mediaController2, void 0);
       this.preventClick = false;
       this.tooltipEl = null;
@@ -3752,7 +3832,11 @@ var mediaThemeMicrovideo = (() => {
         if (!this.preventClick) {
           this.handleClick(e);
         }
-        setTimeout(this.tooltipEl.updateXOffset, 0);
+        setTimeout(__privateGet5(this, _positionTooltip), 0);
+      });
+      __privateAdd5(this, _positionTooltip, () => {
+        var _a4, _b2;
+        (_b2 = (_a4 = this.tooltipEl) == null ? void 0 : _a4.updateXOffset) == null ? void 0 : _b2.call(_a4);
       });
       __privateAdd5(this, _keyupListener, (e) => {
         const { key } = e;
@@ -3787,8 +3871,8 @@ var mediaThemeMicrovideo = (() => {
         }
         this.nativeEl.appendChild(slotTemplate17.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 [
@@ -3809,7 +3893,7 @@ var mediaThemeMicrovideo = (() => {
       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 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
@@ -3828,9 +3912,7 @@ var mediaThemeMicrovideo = (() => {
       } 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);
-      }
+      __privateGet5(this, _positionTooltip).call(this);
     }
     connectedCallback() {
       var _a3, _b2, _c;
@@ -3855,17 +3937,16 @@ var mediaThemeMicrovideo = (() => {
         );
         (_c = (_b2 = __privateGet5(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(() => __privateMethod3(this, _setupTooltip, setupTooltip_fn).call(this));
     }
     disconnectedCallback() {
-      var _a3, _b2, _c, _d;
+      var _a3, _b2;
       this.disable();
       (_b2 = (_a3 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
       __privateSet5(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", __privateGet5(this, _positionTooltip));
+      this.removeEventListener("focus", __privateGet5(this, _positionTooltip));
       this.removeEventListener("click", __privateGet5(this, _clickListener));
-      this.tooltipEl = null;
     }
     get keysUsed() {
       return ["Enter", " "];
@@ -3886,25 +3967,27 @@ var mediaThemeMicrovideo = (() => {
     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", __privateGet5(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", __privateGet5(this, _positionTooltip));
+    this.addEventListener("focus", __privateGet5(this, _positionTooltip));
+    this.addEventListener("click", __privateGet5(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);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-airplay-button.js
+  // ../../node_modules/media-chrome/dist/media-airplay-button.js
   var airplayIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M22.13 3H3.87a.87.87 0 0 0-.87.87v13.26a.87.87 0 0 0 .87.87h3.4L9 16H5V5h16v11h-4l1.72 2h3.4a.87.87 0 0 0 .87-.87V3.87a.87.87 0 0 0-.86-.87Zm-8.75 11.44a.5.5 0 0 0-.76 0l-4.91 5.73a.5.5 0 0 0 .38.83h9.82a.501.501 0 0 0 .38-.83l-4.91-5.73Z"/>
 </svg>
@@ -3999,7 +4082,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-airplay-button", MediaAirplayButton);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-captions-button.js
+  // ../../node_modules/media-chrome/dist/media-captions-button.js
   var ccIconOn = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <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>`;
@@ -4119,7 +4202,7 @@ var mediaThemeMicrovideo = (() => {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-cast-button.js
+  // ../../node_modules/media-chrome/dist/media-cast-button.js
   var enterIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/></g></svg>`;
   var exitIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/><path class="cast_caf_icon_boxfill" d="M5,7 L5,8.63 C8,8.6 13.37,14 13.37,17 L19,17 L19,7 Z"/></g></svg>`;
   var slotTemplate3 = Document2.createElement("template");
@@ -4208,7 +4291,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-cast-button", MediaCastButton);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-chrome-dialog.js
+  // ../../node_modules/media-chrome/dist/media-chrome-dialog.js
   var __accessCheck6 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -4227,12 +4310,15 @@ var mediaThemeMicrovideo = (() => {
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod3 = (obj, member, method) => {
+  var __privateMethod4 = (obj, member, method) => {
     __accessCheck6(obj, member, "access private method");
     return method;
   };
+  var _isInit;
   var _previouslyFocused;
   var _invokerElement;
+  var _init;
+  var init_fn;
   var _handleOpen;
   var handleOpen_fn;
   var _handleClosed;
@@ -4243,102 +4329,124 @@ var mediaThemeMicrovideo = (() => {
   var handleFocusOut_fn;
   var _handleKeyDown;
   var handleKeyDown_fn;
-  var template4 = Document2.createElement("template");
-  template4.innerHTML = /*html*/
-  `
-  <style>
-    :host {
-      font: var(--media-font,
-        var(--media-font-weight, normal)
-        var(--media-font-size, 14px) /
-        var(--media-text-content-height, var(--media-control-height, 24px))
-        var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
-      color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
-      background: var(--media-dialog-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
-      border-radius: var(--media-dialog-border-radius);
-      border: var(--media-dialog-border, none);
-      display: var(--media-dialog-display, inline-flex);
-      transition: var(--media-dialog-transition-in,
-        visibility 0s,
-        opacity .2s ease-out,
-        transform .15s ease-out
-      ) !important;
-      ${/* ^^Prevent transition override by media-container */
-  ""}
-      visibility: var(--media-dialog-visibility, visible);
-      opacity: var(--media-dialog-opacity, 1);
-      transform: var(--media-dialog-transform-in, translateY(0) scale(1));
-    }
+  function getTemplateHTML(_attrs) {
+    return (
+      /*html*/
+      `
+    <style>
+      :host {
+        font: var(--media-font,
+          var(--media-font-weight, normal)
+          var(--media-font-size, 14px) /
+          var(--media-text-content-height, var(--media-control-height, 24px))
+          var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
+        color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
+        display: var(--media-dialog-display, inline-flex);
+        justify-content: center;
+        align-items: center;
+        transition: display .15s, opacity .15s ease-in, transform .15s ease-in;
+        transition-behavior: allow-discrete;
+        opacity: 0;
+        transform: translateY(2px) scale(.99);
+        pointer-events: none;
+      }
+
+      :host([open]) {
+        transition: display .2s, opacity .2s ease-out, transform .15s ease-out;
+        transition-behavior: allow-discrete;
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
+      }
 
-    :host([hidden]) {
-      transition: var(--media-dialog-transition-out,
-        visibility .15s ease-in,
-        opacity .15s ease-in,
-        transform .15s ease-in
-      ) !important;
-      visibility: var(--media-dialog-hidden-visibility, hidden);
-      opacity: var(--media-dialog-hidden-opacity, 0);
-      transform: var(--media-dialog-transform-out, translateY(2px) scale(.99));
-      pointer-events: none;
-    }
-  </style>
-  <slot></slot>
-`;
+      #content {
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        width: min(320px, 100%);
+        word-wrap: break-word;
+        max-height: 100%;
+        overflow: auto;
+        text-align: center;
+        line-height: 1.4;
+      }
+    </style>
+    ${this.getSlotTemplateHTML(_attrs)}
+  `
+    );
+  }
+  function getSlotTemplateHTML(_attrs) {
+    return (
+      /*html*/
+      `
+    <slot id="content"></slot>
+  `
+    );
+  }
   var Attributes4 = {
-    HIDDEN: "hidden",
+    OPEN: "open",
     ANCHOR: "anchor"
   };
   var MediaChromeDialog = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
+      __privateAdd6(this, _init);
       __privateAdd6(this, _handleOpen);
       __privateAdd6(this, _handleClosed);
       __privateAdd6(this, _handleInvoke);
       __privateAdd6(this, _handleFocusOut);
       __privateAdd6(this, _handleKeyDown);
+      __privateAdd6(this, _isInit, false);
       __privateAdd6(this, _previouslyFocused, null);
       __privateAdd6(this, _invokerElement, null);
-      if (!this.shadowRoot) {
-        this.attachShadow({ mode: "open" });
-        this.nativeEl = this.constructor.template.content.cloneNode(true);
-        this.shadowRoot.append(this.nativeEl);
-      }
       this.addEventListener("invoke", this);
       this.addEventListener("focusout", this);
       this.addEventListener("keydown", this);
     }
     static get observedAttributes() {
-      return [Attributes4.HIDDEN, Attributes4.ANCHOR];
+      return [Attributes4.OPEN, Attributes4.ANCHOR];
+    }
+    get open() {
+      return getBooleanAttr(this, Attributes4.OPEN);
+    }
+    set open(value) {
+      setBooleanAttr(this, Attributes4.OPEN, value);
     }
     handleEvent(event) {
       switch (event.type) {
         case "invoke":
-          __privateMethod3(this, _handleInvoke, handleInvoke_fn).call(this, event);
+          __privateMethod4(this, _handleInvoke, handleInvoke_fn).call(this, event);
           break;
         case "focusout":
-          __privateMethod3(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
+          __privateMethod4(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
           break;
         case "keydown":
-          __privateMethod3(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
+          __privateMethod4(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
           break;
       }
     }
     connectedCallback() {
+      __privateMethod4(this, _init, init_fn).call(this);
       if (!this.role) {
         this.role = "dialog";
       }
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      if (attrName === Attributes4.HIDDEN && newValue !== oldValue) {
-        if (this.hidden) {
-          __privateMethod3(this, _handleClosed, handleClosed_fn).call(this);
+      __privateMethod4(this, _init, init_fn).call(this);
+      if (attrName === Attributes4.OPEN && newValue !== oldValue) {
+        if (this.open) {
+          __privateMethod4(this, _handleOpen, handleOpen_fn).call(this);
         } else {
-          __privateMethod3(this, _handleOpen, handleOpen_fn).call(this);
+          __privateMethod4(this, _handleClosed, handleClosed_fn).call(this);
         }
       }
     }
     focus() {
       __privateSet6(this, _previouslyFocused, getActiveElement());
+      const focusCancelled = !this.dispatchEvent(new Event("focus", { composed: true, cancelable: true }));
+      const focusInCancelled = !this.dispatchEvent(new Event("focusin", { composed: true, bubbles: true, cancelable: true }));
+      if (focusCancelled || focusInCancelled)
+        return;
       const focusable = this.querySelector(
         '[autofocus], [tabindex]:not([tabindex="-1"]), [role="menu"]'
       );
@@ -4348,24 +4456,41 @@ var mediaThemeMicrovideo = (() => {
       return ["Escape", "Tab"];
     }
   };
+  _isInit = /* @__PURE__ */ new WeakMap();
   _previouslyFocused = /* @__PURE__ */ new WeakMap();
   _invokerElement = /* @__PURE__ */ new WeakMap();
+  _init = /* @__PURE__ */ new WeakSet();
+  init_fn = function() {
+    if (__privateGet6(this, _isInit))
+      return;
+    __privateSet6(this, _isInit, true);
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+      const attrs = namedNodeMapToObject(this.attributes);
+      this.shadowRoot.innerHTML = /*html*/
+      `
+        ${this.constructor.getTemplateHTML(attrs)}
+      `;
+    }
+  };
   _handleOpen = /* @__PURE__ */ new WeakSet();
   handleOpen_fn = function() {
     var _a3;
     (_a3 = __privateGet6(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
+    this.dispatchEvent(new Event("open", { composed: true, bubbles: true }));
     this.addEventListener("transitionend", () => this.focus(), { once: true });
   };
   _handleClosed = /* @__PURE__ */ new WeakSet();
   handleClosed_fn = function() {
     var _a3;
     (_a3 = __privateGet6(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    this.dispatchEvent(new Event("close", { composed: true, bubbles: true }));
   };
   _handleInvoke = /* @__PURE__ */ new WeakSet();
   handleInvoke_fn = function(event) {
     __privateSet6(this, _invokerElement, event.relatedTarget);
     if (!containsComposedNode(this, event.relatedTarget)) {
-      this.hidden = !this.hidden;
+      this.open = !this.open;
     }
   };
   _handleFocusOut = /* @__PURE__ */ new WeakSet();
@@ -4373,8 +4498,8 @@ var mediaThemeMicrovideo = (() => {
     var _a3;
     if (!containsComposedNode(this, event.relatedTarget)) {
       (_a3 = __privateGet6(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
-      if (__privateGet6(this, _invokerElement) && __privateGet6(this, _invokerElement) !== event.relatedTarget && !this.hidden) {
-        this.hidden = true;
+      if (__privateGet6(this, _invokerElement) && __privateGet6(this, _invokerElement) !== event.relatedTarget && this.open) {
+        this.open = false;
       }
     }
   };
@@ -4399,15 +4524,16 @@ var mediaThemeMicrovideo = (() => {
       this.blur();
     } else if (key === "Escape") {
       (_e = __privateGet6(this, _previouslyFocused)) == null ? void 0 : _e.focus();
-      this.hidden = true;
+      this.open = false;
     }
   };
-  MediaChromeDialog.template = template4;
+  MediaChromeDialog.getTemplateHTML = getTemplateHTML;
+  MediaChromeDialog.getSlotTemplateHTML = getSlotTemplateHTML;
   if (!GlobalThis.customElements.get("media-chrome-dialog")) {
     GlobalThis.customElements.define("media-chrome-dialog", MediaChromeDialog);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-chrome-range.js
+  // ../../node_modules/media-chrome/dist/media-chrome-range.js
   var __accessCheck7 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -4426,7 +4552,7 @@ var mediaThemeMicrovideo = (() => {
     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;
   };
@@ -4455,8 +4581,8 @@ var mediaThemeMicrovideo = (() => {
   var handlePointerLeave_fn;
   var _handlePointerMove2;
   var handlePointerMove_fn2;
-  var template5 = Document2.createElement("template");
-  template5.innerHTML = /*html*/
+  var template4 = Document2.createElement("template");
+  template4.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -4478,8 +4604,6 @@ var mediaThemeMicrovideo = (() => {
       cursor: pointer;
       pointer-events: auto;
       touch-action: none; ${/* Prevent scrolling when dragging on mobile. */
-  ""}
-      z-index: 1; ${/* Apply z-index to overlap buttons below. */
   ""}
     }
 
@@ -4583,32 +4707,22 @@ var mediaThemeMicrovideo = (() => {
       will-change: transform;
     }
 
-    #background,
     #track {
-      border-radius: var(--media-range-track-border-radius, 1px);
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-
-    #background {
       background: var(--media-range-track-background, rgb(255 255 255 / .2));
-      backdrop-filter: var(--media-range-track-background-backdrop-filter);
-      -webkit-backdrop-filter: var(--media-range-track-background-backdrop-filter);
-    }
-
-    #track {
+      border-radius: var(--media-range-track-border-radius, 1px);
       border: var(--media-range-track-border, none);
       outline: var(--media-range-track-outline);
       outline-offset: var(--media-range-track-outline-offset);
       backdrop-filter: var(--media-range-track-backdrop-filter);
       -webkit-backdrop-filter: var(--media-range-track-backdrop-filter);
       box-shadow: var(--media-range-track-box-shadow, none);
+      position: absolute;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
 
     #progress,
-    #highlight,
     #pointer {
       position: absolute;
       height: 100%;
@@ -4660,7 +4774,6 @@ var mediaThemeMicrovideo = (() => {
       height: var(--media-range-segment-hover-height, 7px);
     }
 
-    #background,
     #track {
       clip-path: url(#segments-clipping);
     }
@@ -4692,14 +4805,12 @@ var mediaThemeMicrovideo = (() => {
   <div id="container">
     <div id="startpoint"></div>
     <div id="endpoint"></div>
-    <div id="appearance" part="appearance">
-      <div id="background"></div>
-      <div id="track">
-        <div id="highlight"></div>
+    <div id="appearance">
+      <div id="track" part="track">
         <div id="pointer"></div>
-        <div id="progress"></div>
+        <div id="progress" part="progress"></div>
       </div>
-      <div id="thumb"></div>
+      <div id="thumb" part="thumb"></div>
       <svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
     </div>
     <input id="range" type="range" min="0" max="1" step="any" value="0">
@@ -4743,7 +4854,7 @@ var mediaThemeMicrovideo = (() => {
       });
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template5.content.cloneNode(true));
+        this.shadowRoot.appendChild(template4.content.cloneNode(true));
       }
       this.container = this.shadowRoot.querySelector("#container");
       __privateSet7(this, _startpoint, this.shadowRoot.querySelector("#startpoint"));
@@ -4772,10 +4883,10 @@ var mediaThemeMicrovideo = (() => {
       } else if (attrName === "disabled" || attrName === "aria-disabled" && oldValue !== newValue) {
         if (newValue == null) {
           this.range.removeAttribute(attrName);
-          __privateMethod4(this, _enableUserEvents, enableUserEvents_fn).call(this);
+          __privateMethod5(this, _enableUserEvents, enableUserEvents_fn).call(this);
         } else {
           this.range.setAttribute(attrName, newValue);
-          __privateMethod4(this, _disableUserEvents, disableUserEvents_fn).call(this);
+          __privateMethod5(this, _disableUserEvents, disableUserEvents_fn).call(this);
         }
       }
     }
@@ -4789,6 +4900,10 @@ var mediaThemeMicrovideo = (() => {
       __privateGet7(this, _cssRules).pointer = getOrInsertCSSRule(this.shadowRoot, "#pointer");
       __privateGet7(this, _cssRules).progress = getOrInsertCSSRule(this.shadowRoot, "#progress");
       __privateGet7(this, _cssRules).thumb = getOrInsertCSSRule(this.shadowRoot, "#thumb");
+      __privateGet7(this, _cssRules).activeSegment = getOrInsertCSSRule(
+        this.shadowRoot,
+        "#segments-clipping rect:nth-child(0)"
+      );
       const mediaControllerId = this.getAttribute(
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
@@ -4801,12 +4916,12 @@ var mediaThemeMicrovideo = (() => {
       this.updateBar();
       this.shadowRoot.addEventListener("focusin", __privateGet7(this, _onFocusIn));
       this.shadowRoot.addEventListener("focusout", __privateGet7(this, _onFocusOut));
-      __privateMethod4(this, _enableUserEvents, enableUserEvents_fn).call(this);
+      __privateMethod5(this, _enableUserEvents, enableUserEvents_fn).call(this);
       observeResize(this.container, __privateGet7(this, _updateComputedStyles));
     }
     disconnectedCallback() {
       var _a3, _b2;
-      __privateMethod4(this, _disableUserEvents, disableUserEvents_fn).call(this);
+      __privateMethod5(this, _disableUserEvents, disableUserEvents_fn).call(this);
       (_b2 = (_a3 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
       __privateSet7(this, _mediaController3, null);
       this.shadowRoot.removeEventListener("focusin", __privateGet7(this, _onFocusIn));
@@ -4832,10 +4947,6 @@ var mediaThemeMicrovideo = (() => {
       this.container.classList.toggle("segments", !!(segments == null ? void 0 : segments.length));
       if (!(segments == null ? void 0 : segments.length))
         return;
-      __privateGet7(this, _cssRules).activeSegment = insertCSSRule(
-        this.shadowRoot,
-        "#segments-clipping rect:nth-child(0)"
-      );
       const normalized = [
         .../* @__PURE__ */ new Set([
           +this.range.min,
@@ -4878,22 +4989,22 @@ var mediaThemeMicrovideo = (() => {
     handleEvent(evt) {
       switch (evt.type) {
         case "pointermove":
-          __privateMethod4(this, _handlePointerMove2, handlePointerMove_fn2).call(this, evt);
+          __privateMethod5(this, _handlePointerMove2, handlePointerMove_fn2).call(this, evt);
           break;
         case "input":
           this.updateBar();
           break;
         case "pointerenter":
-          __privateMethod4(this, _handlePointerEnter, handlePointerEnter_fn).call(this, evt);
+          __privateMethod5(this, _handlePointerEnter, handlePointerEnter_fn).call(this, evt);
           break;
         case "pointerdown":
-          __privateMethod4(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
+          __privateMethod5(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
           break;
         case "pointerup":
-          __privateMethod4(this, _handlePointerUp2, handlePointerUp_fn2).call(this);
+          __privateMethod5(this, _handlePointerUp2, handlePointerUp_fn2).call(this);
           break;
         case "pointerleave":
-          __privateMethod4(this, _handlePointerLeave, handlePointerLeave_fn).call(this);
+          __privateMethod5(this, _handlePointerLeave, handlePointerLeave_fn).call(this);
           break;
       }
     }
@@ -4956,7 +5067,7 @@ var mediaThemeMicrovideo = (() => {
   handlePointerEnter_fn = function(evt) {
     var _a3;
     if (evt.pointerType !== "mouse")
-      __privateMethod4(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
+      __privateMethod5(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
     this.addEventListener("pointerleave", this);
     (_a3 = GlobalThis.window) == null ? void 0 : _a3.addEventListener("pointermove", this);
   };
@@ -4983,7 +5094,7 @@ var mediaThemeMicrovideo = (() => {
       evt.buttons === 1 || evt.pointerType !== "mouse"
     );
     this.updatePointerBar(evt);
-    __privateMethod4(this, _updateActiveSegment, updateActiveSegment_fn).call(this, evt);
+    __privateMethod5(this, _updateActiveSegment, updateActiveSegment_fn).call(this, evt);
     if (this.dragging && (evt.pointerType !== "mouse" || !__privateGet7(this, _isInputTarget))) {
       this.range.disabled = true;
       this.range.valueAsNumber = this.getPointerRatio(evt);
@@ -4996,7 +5107,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-chrome-range", MediaChromeRange);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-control-bar.js
+  // ../../node_modules/media-chrome/dist/media-control-bar.js
   var __accessCheck8 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -5016,8 +5127,8 @@ var mediaThemeMicrovideo = (() => {
     return value;
   };
   var _mediaController4;
-  var template6 = Document2.createElement("template");
-  template6.innerHTML = /*html*/
+  var template5 = Document2.createElement("template");
+  template5.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -5038,6 +5149,10 @@ var mediaThemeMicrovideo = (() => {
     ::slotted(media-clip-selector) {
       flex-grow: 1;
     }
+
+    ::slotted([role="menu"]) {
+      position: absolute;
+    }
   </style>
 
   <slot></slot>
@@ -5048,7 +5163,7 @@ var mediaThemeMicrovideo = (() => {
       __privateAdd8(this, _mediaController4, void 0);
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template6.content.cloneNode(true));
+        this.shadowRoot.appendChild(template5.content.cloneNode(true));
       }
     }
     static get observedAttributes() {
@@ -5090,7 +5205,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-control-bar", MediaControlBar);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-text-display.js
+  // ../../node_modules/media-chrome/dist/media-text-display.js
   var __accessCheck9 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -5110,8 +5225,8 @@ var mediaThemeMicrovideo = (() => {
     return value;
   };
   var _mediaController5;
-  var template7 = Document2.createElement("template");
-  template7.innerHTML = /*html*/
+  var template6 = Document2.createElement("template");
+  template6.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -5159,7 +5274,7 @@ var mediaThemeMicrovideo = (() => {
       __privateAdd9(this, _mediaController5, void 0);
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template7.content.cloneNode(true));
+        this.shadowRoot.appendChild(template6.content.cloneNode(true));
       }
     }
     static get observedAttributes() {
@@ -5205,9 +5320,8 @@ var mediaThemeMicrovideo = (() => {
   if (!GlobalThis.customElements.get("media-text-display")) {
     GlobalThis.customElements.define("media-text-display", MediaTextDisplay);
   }
-  var media_text_display_default = MediaTextDisplay;
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-duration-display.js
+  // ../../node_modules/media-chrome/dist/media-duration-display.js
   var __accessCheck10 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -5261,25 +5375,139 @@ var mediaThemeMicrovideo = (() => {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-fullscreen-button.js
-  var enterFullscreenIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
-  <path d="M16 3v2.5h3.5V9H22V3h-6ZM4 9h2.5V5.5H10V3H4v6Zm15.5 9.5H16V21h6v-6h-2.5v3.5ZM6.5 15H4v6h6v-2.5H6.5V15Z"/>
-</svg>`;
-  var exitFullscreenIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
-  <path d="M18.5 6.5V3H16v6h6V6.5h-3.5ZM16 21h2.5v-3.5H22V15h-6v6ZM4 17.5h3.5V21H10v-6H4v2.5Zm3.5-11H4V9h6V3H7.5v3.5Z"/>
-</svg>`;
-  var slotTemplate4 = Document2.createElement("template");
-  slotTemplate4.innerHTML = /*html*/
-  `
-  <style>
-    :host([${MediaUIAttributes.MEDIA_IS_FULLSCREEN}]) slot[name=icon] slot:not([name=exit]) {
-      display: none !important;
-    }
-
-    ${/* Double negative, but safer if display doesn't equal 'block' */
-  ""}
-    :host(:not([${MediaUIAttributes.MEDIA_IS_FULLSCREEN}])) slot[name=icon] slot:not([name=enter]) {
-      display: none !important;
+  // ../../node_modules/media-chrome/dist/media-error-dialog.js
+  var __accessCheck11 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet11 = (obj, member, getter) => {
+    __accessCheck11(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd11 = (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 __privateSet11 = (obj, member, value, setter) => {
+    __accessCheck11(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var _mediaError;
+  function getSlotTemplateHTML2(attrs) {
+    return (
+      /*html*/
+      `
+    <style>
+      :host {
+        background: rgb(20 20 30 / .8);
+      }
+
+      #content {
+        display: block;
+        padding: 1.2em 1.5em;
+      }
+
+      h3,
+      p {
+        margin-block: 0 .3em;
+      }
+    </style>
+    <slot name="error-${attrs.mediaerrorcode}" id="content">
+      ${formatErrorMessage({ code: +attrs.mediaerrorcode, message: attrs.mediaerrormessage })}
+    </slot>
+  `
+    );
+  }
+  function shouldOpenErrorDialog(error) {
+    return error.code && formatError(error) !== null;
+  }
+  function formatErrorMessage(error) {
+    var _a3;
+    const { title, message } = (_a3 = formatError(error)) != null ? _a3 : {};
+    let html = "";
+    if (title)
+      html += `<slot name="error-${error.code}-title"><h3>${title}</h3></slot>`;
+    if (message)
+      html += `<slot name="error-${error.code}-message"><p>${message}</p></slot>`;
+    return html;
+  }
+  var observedAttributes = [
+    MediaUIAttributes.MEDIA_ERROR_CODE,
+    MediaUIAttributes.MEDIA_ERROR_MESSAGE
+  ];
+  var MediaErrorDialog = class extends MediaChromeDialog {
+    constructor() {
+      super(...arguments);
+      __privateAdd11(this, _mediaError, null);
+    }
+    static get observedAttributes() {
+      return [...super.observedAttributes, ...observedAttributes];
+    }
+    formatErrorMessage(error) {
+      return this.constructor.formatErrorMessage(error);
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      var _a3;
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (!observedAttributes.includes(attrName))
+        return;
+      const mediaError = (_a3 = this.mediaError) != null ? _a3 : {
+        code: this.mediaErrorCode,
+        message: this.mediaErrorMessage
+      };
+      this.open = shouldOpenErrorDialog(mediaError);
+      if (this.open) {
+        this.shadowRoot.querySelector("slot").name = `error-${this.mediaErrorCode}`;
+        this.shadowRoot.querySelector("#content").innerHTML = this.formatErrorMessage(mediaError);
+      }
+    }
+    get mediaError() {
+      return __privateGet11(this, _mediaError);
+    }
+    set mediaError(value) {
+      __privateSet11(this, _mediaError, value);
+    }
+    get mediaErrorCode() {
+      return getNumericAttr(this, "mediaerrorcode");
+    }
+    set mediaErrorCode(value) {
+      setNumericAttr(this, "mediaerrorcode", value);
+    }
+    get mediaErrorMessage() {
+      return getStringAttr(this, "mediaerrormessage");
+    }
+    set mediaErrorMessage(value) {
+      setStringAttr(this, "mediaerrormessage", value);
+    }
+  };
+  _mediaError = /* @__PURE__ */ new WeakMap();
+  MediaErrorDialog.getSlotTemplateHTML = getSlotTemplateHTML2;
+  MediaErrorDialog.formatErrorMessage = formatErrorMessage;
+  if (!GlobalThis.customElements.get("media-error-dialog")) {
+    GlobalThis.customElements.define("media-error-dialog", MediaErrorDialog);
+  }
+
+  // ../../node_modules/media-chrome/dist/media-fullscreen-button.js
+  var enterFullscreenIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
+  <path d="M16 3v2.5h3.5V9H22V3h-6ZM4 9h2.5V5.5H10V3H4v6Zm15.5 9.5H16V21h6v-6h-2.5v3.5ZM6.5 15H4v6h6v-2.5H6.5V15Z"/>
+</svg>`;
+  var exitFullscreenIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
+  <path d="M18.5 6.5V3H16v6h6V6.5h-3.5ZM16 21h2.5v-3.5H22V15h-6v6ZM4 17.5h3.5V21H10v-6H4v2.5Zm3.5-11H4V9h6V3H7.5v3.5Z"/>
+</svg>`;
+  var slotTemplate4 = Document2.createElement("template");
+  slotTemplate4.innerHTML = /*html*/
+  `
+  <style>
+    :host([${MediaUIAttributes.MEDIA_IS_FULLSCREEN}]) slot[name=icon] slot:not([name=exit]) {
+      display: none !important;
+    }
+
+    ${/* Double negative, but safer if display doesn't equal 'block' */
+  ""}
+    :host(:not([${MediaUIAttributes.MEDIA_IS_FULLSCREEN}])) slot[name=icon] slot:not([name=enter]) {
+      display: none !important;
     }
 
     :host([${MediaUIAttributes.MEDIA_IS_FULLSCREEN}]) slot[name=tooltip-enter],
@@ -5357,7 +5585,7 @@ var mediaThemeMicrovideo = (() => {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-live-button.js
+  // ../../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>';
@@ -5458,22 +5686,22 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-live-button", MediaLiveButton);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-loading-indicator.js
-  var __accessCheck11 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-loading-indicator.js
+  var __accessCheck12 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet11 = (obj, member, getter) => {
-    __accessCheck11(obj, member, "read from private field");
+  var __privateGet12 = (obj, member, getter) => {
+    __accessCheck12(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd11 = (obj, member, value) => {
+  var __privateAdd12 = (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 __privateSet11 = (obj, member, value, setter) => {
-    __accessCheck11(obj, member, "write to private field");
+  var __privateSet12 = (obj, member, value, setter) => {
+    __accessCheck12(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -5483,7 +5711,7 @@ var mediaThemeMicrovideo = (() => {
     LOADING_DELAY: "loadingdelay"
   };
   var DEFAULT_LOADING_DELAY = 500;
-  var template8 = Document2.createElement("template");
+  var template7 = Document2.createElement("template");
   var loadingIndicatorIcon = `
 <svg aria-hidden="true" viewBox="0 0 100 100">
   <path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
@@ -5498,7 +5726,7 @@ var mediaThemeMicrovideo = (() => {
   </path>
 </svg>
 `;
-  template8.innerHTML = /*html*/
+  template7.innerHTML = /*html*/
   `
 <style>
 :host {
@@ -5550,11 +5778,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaLoadingIndicator = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd11(this, _mediaController6, void 0);
-      __privateAdd11(this, _delay, DEFAULT_LOADING_DELAY);
+      __privateAdd12(this, _mediaController6, void 0);
+      __privateAdd12(this, _delay, DEFAULT_LOADING_DELAY);
       if (!this.shadowRoot) {
         const shadow = this.attachShadow({ mode: "open" });
-        const indicatorHTML = template8.content.cloneNode(true);
+        const indicatorHTML = template7.content.cloneNode(true);
         shadow.appendChild(indicatorHTML);
       }
     }
@@ -5572,12 +5800,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.loadingDelay = Number(newValue);
       } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet11(this, _mediaController6)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
-          __privateSet11(this, _mediaController6, null);
+          (_b2 = (_a3 = __privateGet12(this, _mediaController6)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          __privateSet12(this, _mediaController6, null);
         }
         if (newValue && this.isConnected) {
-          __privateSet11(this, _mediaController6, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
-          (_e = (_d = __privateGet11(this, _mediaController6)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+          __privateSet12(this, _mediaController6, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
+          (_e = (_d = __privateGet12(this, _mediaController6)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
         }
       }
     }
@@ -5587,25 +5815,25 @@ svg, img, ::slotted(svg), ::slotted(img) {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet11(this, _mediaController6, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
+        __privateSet12(this, _mediaController6, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
           mediaControllerId
         ));
-        (_c = (_b2 = __privateGet11(this, _mediaController6)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+        (_c = (_b2 = __privateGet12(this, _mediaController6)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
       var _a3, _b2;
-      (_b2 = (_a3 = __privateGet11(this, _mediaController6)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
-      __privateSet11(this, _mediaController6, null);
+      (_b2 = (_a3 = __privateGet12(this, _mediaController6)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet12(this, _mediaController6, null);
     }
     /**
      * Delay in ms
      */
     get loadingDelay() {
-      return __privateGet11(this, _delay);
+      return __privateGet12(this, _delay);
     }
     set loadingDelay(delay2) {
-      __privateSet11(this, _delay, delay2);
+      __privateSet12(this, _delay, delay2);
       const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
       style.setProperty(
         "--_loading-indicator-delay",
@@ -5640,7 +5868,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-mute-button.js
+  // ../../node_modules/media-chrome/dist/media-mute-button.js
   var { MEDIA_VOLUME_LEVEL } = MediaUIAttributes;
   var offIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
   <path d="M16.5 12A4.5 4.5 0 0 0 14 8v2.18l2.45 2.45a4.22 4.22 0 0 0 .05-.63Zm2.5 0a6.84 6.84 0 0 1-.54 2.64L20 16.15A8.8 8.8 0 0 0 21 12a9 9 0 0 0-7-8.77v2.06A7 7 0 0 1 19 12ZM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25A6.92 6.92 0 0 1 14 18.7v2.06A9 9 0 0 0 17.69 19l2 2.05L21 19.73l-9-9L4.27 3ZM12 4 9.91 6.09 12 8.18V4Z"/>
@@ -5736,7 +5964,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-mute-button", MediaMuteButton);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-pip-button.js
+  // ../../node_modules/media-chrome/dist/media-pip-button.js
   var pipIcon = `<svg aria-hidden="true" viewBox="0 0 28 24">
   <path d="M24 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Zm-1 16H5V5h18v14Zm-3-8h-7v5h7v-5Z"/>
 </svg>`;
@@ -5826,16 +6054,16 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-pip-button", MediaPipButton);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-playback-rate-button.js
-  var __accessCheck12 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-playback-rate-button.js
+  var __accessCheck13 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet12 = (obj, member, getter) => {
-    __accessCheck12(obj, member, "read from private field");
+  var __privateGet13 = (obj, member, getter) => {
+    __accessCheck13(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd12 = (obj, member, value) => {
+  var __privateAdd13 = (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);
@@ -5864,7 +6092,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         tooltipContent: tooltipLabels.PLAYBACK_RATE,
         ...options
       });
-      __privateAdd12(this, _rates, new AttributeTokenList(this, Attributes6.RATES, {
+      __privateAdd13(this, _rates, new AttributeTokenList(this, Attributes6.RATES, {
         defaultValue: DEFAULT_RATES
       }));
       this.container = this.shadowRoot.querySelector('slot[name="icon"]');
@@ -5880,7 +6108,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === Attributes6.RATES) {
-        __privateGet12(this, _rates).value = newValue;
+        __privateGet13(this, _rates).value = newValue;
       }
       if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
         const newPlaybackRate = newValue ? +newValue : Number.NaN;
@@ -5894,13 +6122,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * Setting a value will accept an array of numbers.
      */
     get rates() {
-      return __privateGet12(this, _rates);
+      return __privateGet13(this, _rates);
     }
     set rates(value) {
       if (!value) {
-        __privateGet12(this, _rates).value = "";
+        __privateGet13(this, _rates).value = "";
       } else if (Array.isArray(value)) {
-        __privateGet12(this, _rates).value = value.join(" ");
+        __privateGet13(this, _rates).value = value.join(" ");
       }
     }
     /**
@@ -5937,7 +6165,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-play-button.js
+  // ../../node_modules/media-chrome/dist/media-play-button.js
   var playIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
   <path d="m6 21 15-9L6 3v18Z"/>
 </svg>`;
@@ -6016,13 +6244,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-play-button", MediaPlayButton);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-poster-image.js
+  // ../../node_modules/media-chrome/dist/media-poster-image.js
   var Attributes7 = {
     PLACEHOLDER_SRC: "placeholdersrc",
     SRC: "src"
   };
-  var template9 = Document2.createElement("template");
-  template9.innerHTML = /*html*/
+  var template8 = Document2.createElement("template");
+  template8.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -6060,7 +6288,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       super();
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template9.content.cloneNode(true));
+        this.shadowRoot.appendChild(template8.content.cloneNode(true));
       }
       this.image = this.shadowRoot.querySelector("#image");
     }
@@ -6103,31 +6331,31 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-poster-image", MediaPosterImage);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-preview-chapter-display.js
-  var __accessCheck13 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-preview-chapter-display.js
+  var __accessCheck14 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet13 = (obj, member, getter) => {
-    __accessCheck13(obj, member, "read from private field");
+  var __privateGet14 = (obj, member, getter) => {
+    __accessCheck14(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd13 = (obj, member, value) => {
+  var __privateAdd14 = (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 __privateSet12 = (obj, member, value, setter) => {
-    __accessCheck13(obj, member, "write to private field");
+  var __privateSet13 = (obj, member, value, setter) => {
+    __accessCheck14(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
   var _slot2;
-  var MediaPreviewChapterDisplay = class extends media_text_display_default {
+  var MediaPreviewChapterDisplay = class extends MediaTextDisplay {
     constructor() {
       super();
-      __privateAdd13(this, _slot2, void 0);
-      __privateSet12(this, _slot2, this.shadowRoot.querySelector("slot"));
+      __privateAdd14(this, _slot2, void 0);
+      __privateSet13(this, _slot2, this.shadowRoot.querySelector("slot"));
     }
     static get observedAttributes() {
       return [
@@ -6139,7 +6367,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === MediaUIAttributes.MEDIA_PREVIEW_CHAPTER) {
         if (newValue !== oldValue && newValue != null) {
-          __privateGet13(this, _slot2).textContent = newValue;
+          __privateGet14(this, _slot2).textContent = newValue;
           if (newValue !== "") {
             this.setAttribute("aria-valuetext", `chapter: ${newValue}`);
           } else {
@@ -6166,28 +6394,28 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-preview-thumbnail.js
-  var __accessCheck14 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-preview-thumbnail.js
+  var __accessCheck15 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet14 = (obj, member, getter) => {
-    __accessCheck14(obj, member, "read from private field");
+  var __privateGet15 = (obj, member, getter) => {
+    __accessCheck15(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd14 = (obj, member, value) => {
+  var __privateAdd15 = (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 __privateSet13 = (obj, member, value, setter) => {
-    __accessCheck14(obj, member, "write to private field");
+  var __privateSet14 = (obj, member, value, setter) => {
+    __accessCheck15(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
   var _mediaController7;
-  var template10 = Document2.createElement("template");
-  template10.innerHTML = /*html*/
+  var template9 = Document2.createElement("template");
+  template9.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -6206,10 +6434,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaPreviewThumbnail = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd14(this, _mediaController7, void 0);
+      __privateAdd15(this, _mediaController7, void 0);
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template10.content.cloneNode(true));
+        this.shadowRoot.appendChild(template9.content.cloneNode(true));
       }
     }
     static get observedAttributes() {
@@ -6225,19 +6453,19 @@ svg, img, ::slotted(svg), ::slotted(img) {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet13(
+        __privateSet14(
           this,
           _mediaController7,
           // @ts-ignore
           (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId)
         );
-        (_c = (_b2 = __privateGet14(this, _mediaController7)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+        (_c = (_b2 = __privateGet15(this, _mediaController7)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
       var _a3, _b2;
-      (_b2 = (_a3 = __privateGet14(this, _mediaController7)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
-      __privateSet13(this, _mediaController7, null);
+      (_b2 = (_a3 = __privateGet15(this, _mediaController7)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet14(this, _mediaController7, null);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       var _a3, _b2, _c, _d, _e;
@@ -6249,12 +6477,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
       }
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet14(this, _mediaController7)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
-          __privateSet13(this, _mediaController7, null);
+          (_b2 = (_a3 = __privateGet15(this, _mediaController7)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          __privateSet14(this, _mediaController7, null);
         }
         if (newValue && this.isConnected) {
-          __privateSet13(this, _mediaController7, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
-          (_e = (_d = __privateGet14(this, _mediaController7)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+          __privateSet14(this, _mediaController7, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
+          (_e = (_d = __privateGet15(this, _mediaController7)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
         }
       }
     }
@@ -6330,22 +6558,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-preview-time-display.js
-  var __accessCheck15 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-preview-time-display.js
+  var __accessCheck16 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet15 = (obj, member, getter) => {
-    __accessCheck15(obj, member, "read from private field");
+  var __privateGet16 = (obj, member, getter) => {
+    __accessCheck16(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd15 = (obj, member, value) => {
+  var __privateAdd16 = (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 __privateSet14 = (obj, member, value, setter) => {
-    __accessCheck15(obj, member, "write to private field");
+  var __privateSet15 = (obj, member, value, setter) => {
+    __accessCheck16(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -6353,9 +6581,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaPreviewTimeDisplay = class extends MediaTextDisplay {
     constructor() {
       super();
-      __privateAdd15(this, _slot3, void 0);
-      __privateSet14(this, _slot3, this.shadowRoot.querySelector("slot"));
-      __privateGet15(this, _slot3).textContent = formatTime(0);
+      __privateAdd16(this, _slot3, void 0);
+      __privateSet15(this, _slot3, this.shadowRoot.querySelector("slot"));
+      __privateGet16(this, _slot3).textContent = formatTime(0);
     }
     static get observedAttributes() {
       return [...super.observedAttributes, MediaUIAttributes.MEDIA_PREVIEW_TIME];
@@ -6363,7 +6591,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === MediaUIAttributes.MEDIA_PREVIEW_TIME && newValue != null) {
-        __privateGet15(this, _slot3).textContent = formatTime(parseFloat(newValue));
+        __privateGet16(this, _slot3).textContent = formatTime(parseFloat(newValue));
       }
     }
     /**
@@ -6384,7 +6612,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-seek-backward-button.js
+  // ../../node_modules/media-chrome/dist/media-seek-backward-button.js
   var Attributes8 = {
     SEEK_OFFSET: "seekoffset"
   };
@@ -6474,7 +6702,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-seek-forward-button.js
+  // ../../node_modules/media-chrome/dist/media-seek-forward-button.js
   var Attributes9 = {
     SEEK_OFFSET: "seekoffset"
   };
@@ -6564,22 +6792,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-time-display.js
-  var __accessCheck16 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-time-display.js
+  var __accessCheck17 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet16 = (obj, member, getter) => {
-    __accessCheck16(obj, member, "read from private field");
+  var __privateGet17 = (obj, member, getter) => {
+    __accessCheck17(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd16 = (obj, member, value) => {
+  var __privateAdd17 = (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 __privateSet15 = (obj, member, value, setter) => {
-    __accessCheck16(obj, member, "write to private field");
+  var __privateSet16 = (obj, member, value, setter) => {
+    __accessCheck17(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -6643,9 +6871,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaTimeDisplay = class extends MediaTextDisplay {
     constructor() {
       super();
-      __privateAdd16(this, _slot4, void 0);
-      __privateSet15(this, _slot4, this.shadowRoot.querySelector("slot"));
-      __privateGet16(this, _slot4).innerHTML = `${formatTimesLabel(this)}`;
+      __privateAdd17(this, _slot4, void 0);
+      __privateSet16(this, _slot4, this.shadowRoot.querySelector("slot"));
+      __privateGet17(this, _slot4).innerHTML = `${formatTimesLabel(this)}`;
     }
     static get observedAttributes() {
       return [...super.observedAttributes, ...CombinedAttributes, "disabled"];
@@ -6783,8 +7011,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
     update() {
       const timesLabel = formatTimesLabel(this);
       updateAriaValueText(this);
-      if (timesLabel !== __privateGet16(this, _slot4).innerHTML) {
-        __privateGet16(this, _slot4).innerHTML = timesLabel;
+      if (timesLabel !== __privateGet17(this, _slot4).innerHTML) {
+        __privateGet17(this, _slot4).innerHTML = timesLabel;
       }
     }
   };
@@ -6793,31 +7021,31 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-time-display", MediaTimeDisplay);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/range-animation.js
-  var __accessCheck17 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/utils/range-animation.js
+  var __accessCheck18 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet17 = (obj, member, getter) => {
-    __accessCheck17(obj, member, "read from private field");
+  var __privateGet18 = (obj, member, getter) => {
+    __accessCheck18(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd17 = (obj, member, value) => {
+  var __privateAdd18 = (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 __privateSet16 = (obj, member, value, setter) => {
-    __accessCheck17(obj, member, "write to private field");
+  var __privateSet17 = (obj, member, value, setter) => {
+    __accessCheck18(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
   var __privateWrapper = (obj, member, setter, getter) => ({
     set _(value) {
-      __privateSet16(obj, member, value, setter);
+      __privateSet17(obj, member, value, setter);
     },
     get _() {
-      return __privateGet17(obj, member, getter);
+      return __privateGet18(obj, member, getter);
     }
   });
   var _range;
@@ -6832,60 +7060,60 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var _animate;
   var RangeAnimation = class {
     constructor(range, callback, fps) {
-      __privateAdd17(this, _range, void 0);
-      __privateAdd17(this, _startTime, void 0);
-      __privateAdd17(this, _previousTime, void 0);
-      __privateAdd17(this, _deltaTime, void 0);
-      __privateAdd17(this, _frameCount, void 0);
-      __privateAdd17(this, _updateTimestamp, void 0);
-      __privateAdd17(this, _updateStartValue, void 0);
-      __privateAdd17(this, _lastRangeIncrease, void 0);
-      __privateAdd17(this, _id, 0);
-      __privateAdd17(this, _animate, (now = performance.now()) => {
-        __privateSet16(this, _id, requestAnimationFrame(__privateGet17(this, _animate)));
-        __privateSet16(this, _deltaTime, performance.now() - __privateGet17(this, _previousTime));
+      __privateAdd18(this, _range, void 0);
+      __privateAdd18(this, _startTime, void 0);
+      __privateAdd18(this, _previousTime, void 0);
+      __privateAdd18(this, _deltaTime, void 0);
+      __privateAdd18(this, _frameCount, void 0);
+      __privateAdd18(this, _updateTimestamp, void 0);
+      __privateAdd18(this, _updateStartValue, void 0);
+      __privateAdd18(this, _lastRangeIncrease, void 0);
+      __privateAdd18(this, _id, 0);
+      __privateAdd18(this, _animate, (now = performance.now()) => {
+        __privateSet17(this, _id, requestAnimationFrame(__privateGet18(this, _animate)));
+        __privateSet17(this, _deltaTime, performance.now() - __privateGet18(this, _previousTime));
         const fpsInterval = 1e3 / this.fps;
-        if (__privateGet17(this, _deltaTime) > fpsInterval) {
-          __privateSet16(this, _previousTime, now - __privateGet17(this, _deltaTime) % fpsInterval);
-          const fps2 = 1e3 / ((now - __privateGet17(this, _startTime)) / ++__privateWrapper(this, _frameCount)._);
-          const delta = (now - __privateGet17(this, _updateTimestamp)) / 1e3 / this.duration;
-          let value = __privateGet17(this, _updateStartValue) + delta * this.playbackRate;
-          const increase = value - __privateGet17(this, _range).valueAsNumber;
+        if (__privateGet18(this, _deltaTime) > fpsInterval) {
+          __privateSet17(this, _previousTime, now - __privateGet18(this, _deltaTime) % fpsInterval);
+          const fps2 = 1e3 / ((now - __privateGet18(this, _startTime)) / ++__privateWrapper(this, _frameCount)._);
+          const delta = (now - __privateGet18(this, _updateTimestamp)) / 1e3 / this.duration;
+          let value = __privateGet18(this, _updateStartValue) + delta * this.playbackRate;
+          const increase = value - __privateGet18(this, _range).valueAsNumber;
           if (increase > 0) {
-            __privateSet16(this, _lastRangeIncrease, this.playbackRate / this.duration / fps2);
+            __privateSet17(this, _lastRangeIncrease, this.playbackRate / this.duration / fps2);
           } else {
-            __privateSet16(this, _lastRangeIncrease, 0.995 * __privateGet17(this, _lastRangeIncrease));
-            value = __privateGet17(this, _range).valueAsNumber + __privateGet17(this, _lastRangeIncrease);
+            __privateSet17(this, _lastRangeIncrease, 0.995 * __privateGet18(this, _lastRangeIncrease));
+            value = __privateGet18(this, _range).valueAsNumber + __privateGet18(this, _lastRangeIncrease);
           }
           this.callback(value);
         }
       });
-      __privateSet16(this, _range, range);
+      __privateSet17(this, _range, range);
       this.callback = callback;
       this.fps = fps;
     }
     start() {
-      if (__privateGet17(this, _id) !== 0)
+      if (__privateGet18(this, _id) !== 0)
         return;
-      __privateSet16(this, _previousTime, performance.now());
-      __privateSet16(this, _startTime, __privateGet17(this, _previousTime));
-      __privateSet16(this, _frameCount, 0);
-      __privateGet17(this, _animate).call(this);
+      __privateSet17(this, _previousTime, performance.now());
+      __privateSet17(this, _startTime, __privateGet18(this, _previousTime));
+      __privateSet17(this, _frameCount, 0);
+      __privateGet18(this, _animate).call(this);
     }
     stop() {
-      if (__privateGet17(this, _id) === 0)
+      if (__privateGet18(this, _id) === 0)
         return;
-      cancelAnimationFrame(__privateGet17(this, _id));
-      __privateSet16(this, _id, 0);
+      cancelAnimationFrame(__privateGet18(this, _id));
+      __privateSet17(this, _id, 0);
     }
     update({ start, duration, playbackRate }) {
-      const increase = start - __privateGet17(this, _range).valueAsNumber;
+      const increase = start - __privateGet18(this, _range).valueAsNumber;
       const durationDelta = Math.abs(duration - this.duration);
       if (increase > 0 || increase < -0.03 || durationDelta >= 0.5) {
         this.callback(start);
       }
-      __privateSet16(this, _updateStartValue, start);
-      __privateSet16(this, _updateTimestamp, performance.now());
+      __privateSet17(this, _updateStartValue, start);
+      __privateSet17(this, _updateTimestamp, performance.now());
       this.duration = duration;
       this.playbackRate = playbackRate;
     }
@@ -6901,27 +7129,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _id = /* @__PURE__ */ new WeakMap();
   _animate = /* @__PURE__ */ new WeakMap();
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-time-range.js
-  var __accessCheck18 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-time-range.js
+  var __accessCheck19 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet18 = (obj, member, getter) => {
-    __accessCheck18(obj, member, "read from private field");
+  var __privateGet19 = (obj, member, getter) => {
+    __accessCheck19(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd18 = (obj, member, value) => {
+  var __privateAdd19 = (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 __privateSet17 = (obj, member, value, setter) => {
-    __accessCheck18(obj, member, "write to private field");
+  var __privateSet18 = (obj, member, value, setter) => {
+    __accessCheck19(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod5 = (obj, member, method) => {
-    __accessCheck18(obj, member, "access private method");
+  var __privateMethod6 = (obj, member, method) => {
+    __accessCheck19(obj, member, "access private method");
     return method;
   };
   var _rootNode;
@@ -6958,8 +7186,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
     const fullPhrase = !(currentTimePhrase && totalTimePhrase) ? DEFAULT_MISSING_TIME_PHRASE2 : `${currentTimePhrase} of ${totalTimePhrase}`;
     range.setAttribute("aria-valuetext", fullPhrase);
   };
-  var template11 = Document2.createElement("template");
-  template11.innerHTML = /*html*/
+  var template10 = Document2.createElement("template");
+  template10.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -6977,8 +7205,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
       contain: layout;
     }
 
-    #highlight {
+    #buffered {
       background: var(--media-time-range-buffered-color, rgb(255 255 255 / .4));
+      position: absolute;
+      height: 100%;
+      will-change: width;
     }
 
     #preview-rail,
@@ -7199,41 +7430,45 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaTimeRange = class extends MediaChromeRange {
     constructor() {
       super();
-      __privateAdd18(this, _toggleRangeAnimation);
-      __privateAdd18(this, _shouldRangeAnimate);
-      __privateAdd18(this, _getElementRects);
-      __privateAdd18(this, _getBoxPosition);
-      __privateAdd18(this, _getBoxShiftPosition);
-      __privateAdd18(this, _handlePointerMove3);
-      __privateAdd18(this, _previewRequest);
-      __privateAdd18(this, _seekRequest);
-      __privateAdd18(this, _rootNode, void 0);
-      __privateAdd18(this, _animation, void 0);
-      __privateAdd18(this, _boxes, void 0);
-      __privateAdd18(this, _previewTime, void 0);
-      __privateAdd18(this, _previewBox, void 0);
-      __privateAdd18(this, _currentBox, void 0);
-      __privateAdd18(this, _boxPaddingLeft, void 0);
-      __privateAdd18(this, _boxPaddingRight, void 0);
-      __privateAdd18(this, _mediaChaptersCues, void 0);
-      __privateAdd18(this, _updateRange, (value) => {
+      __privateAdd19(this, _toggleRangeAnimation);
+      __privateAdd19(this, _shouldRangeAnimate);
+      __privateAdd19(this, _getElementRects);
+      __privateAdd19(this, _getBoxPosition);
+      __privateAdd19(this, _getBoxShiftPosition);
+      __privateAdd19(this, _handlePointerMove3);
+      __privateAdd19(this, _previewRequest);
+      __privateAdd19(this, _seekRequest);
+      __privateAdd19(this, _rootNode, void 0);
+      __privateAdd19(this, _animation, void 0);
+      __privateAdd19(this, _boxes, void 0);
+      __privateAdd19(this, _previewTime, void 0);
+      __privateAdd19(this, _previewBox, void 0);
+      __privateAdd19(this, _currentBox, void 0);
+      __privateAdd19(this, _boxPaddingLeft, void 0);
+      __privateAdd19(this, _boxPaddingRight, void 0);
+      __privateAdd19(this, _mediaChaptersCues, void 0);
+      __privateAdd19(this, _updateRange, (value) => {
         if (this.dragging)
           return;
-        this.range.valueAsNumber = value;
+        if (isValidNumber(value)) {
+          this.range.valueAsNumber = value;
+        }
         this.updateBar();
       });
-      this.container.appendChild(template11.content.cloneNode(true));
-      __privateSet17(this, _boxes, this.shadowRoot.querySelectorAll('[part~="box"]'));
-      __privateSet17(this, _previewBox, this.shadowRoot.querySelector('[part~="preview-box"]'));
-      __privateSet17(this, _currentBox, this.shadowRoot.querySelector('[part~="current-box"]'));
+      this.container.appendChild(template10.content.cloneNode(true));
+      const track = this.shadowRoot.querySelector("#track");
+      track.insertAdjacentHTML("afterbegin", '<div id="buffered" part="buffered"></div>');
+      __privateSet18(this, _boxes, this.shadowRoot.querySelectorAll('[part~="box"]'));
+      __privateSet18(this, _previewBox, this.shadowRoot.querySelector('[part~="preview-box"]'));
+      __privateSet18(this, _currentBox, this.shadowRoot.querySelector('[part~="current-box"]'));
       const computedStyle = getComputedStyle(this);
-      __privateSet17(this, _boxPaddingLeft, parseInt(
+      __privateSet18(this, _boxPaddingLeft, parseInt(
         computedStyle.getPropertyValue("--media-box-padding-left")
       ));
-      __privateSet17(this, _boxPaddingRight, parseInt(
+      __privateSet18(this, _boxPaddingRight, parseInt(
         computedStyle.getPropertyValue("--media-box-padding-right")
       ));
-      __privateSet17(this, _animation, new RangeAnimation(this.range, __privateGet18(this, _updateRange), 60));
+      __privateSet18(this, _animation, new RangeAnimation(this.range, __privateGet19(this, _updateRange), 60));
     }
     static get observedAttributes() {
       return [
@@ -7255,45 +7490,45 @@ svg, img, ::slotted(svg), ::slotted(img) {
       var _a3;
       super.connectedCallback();
       this.range.setAttribute("aria-label", nouns.SEEK());
-      __privateMethod5(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
-      __privateSet17(this, _rootNode, this.getRootNode());
-      (_a3 = __privateGet18(this, _rootNode)) == null ? void 0 : _a3.addEventListener("transitionstart", this);
+      __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
+      __privateSet18(this, _rootNode, this.getRootNode());
+      (_a3 = __privateGet19(this, _rootNode)) == null ? void 0 : _a3.addEventListener("transitionstart", this);
     }
     disconnectedCallback() {
       var _a3;
       super.disconnectedCallback();
-      __privateMethod5(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
-      (_a3 = __privateGet18(this, _rootNode)) == null ? void 0 : _a3.removeEventListener("transitionstart", this);
-      __privateSet17(this, _rootNode, null);
+      __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
+      (_a3 = __privateGet19(this, _rootNode)) == null ? void 0 : _a3.removeEventListener("transitionstart", this);
+      __privateSet18(this, _rootNode, null);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (oldValue == newValue)
         return;
       if (attrName === MediaUIAttributes.MEDIA_CURRENT_TIME || attrName === MediaUIAttributes.MEDIA_PAUSED || attrName === MediaUIAttributes.MEDIA_ENDED || attrName === MediaUIAttributes.MEDIA_LOADING || attrName === MediaUIAttributes.MEDIA_DURATION || attrName === MediaUIAttributes.MEDIA_SEEKABLE) {
-        __privateGet18(this, _animation).update({
+        __privateGet19(this, _animation).update({
           start: calcRangeValueFromTime(this),
           duration: this.mediaSeekableEnd - this.mediaSeekableStart,
           playbackRate: this.mediaPlaybackRate
         });
-        __privateMethod5(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
+        __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
         updateAriaValueText2(this);
       } else if (attrName === MediaUIAttributes.MEDIA_BUFFERED) {
         this.updateBufferedBar();
       }
       if (attrName === MediaUIAttributes.MEDIA_DURATION || attrName === MediaUIAttributes.MEDIA_SEEKABLE) {
-        this.mediaChaptersCues = __privateGet18(this, _mediaChaptersCues);
+        this.mediaChaptersCues = __privateGet19(this, _mediaChaptersCues);
         this.updateBar();
       }
     }
     get mediaChaptersCues() {
-      return __privateGet18(this, _mediaChaptersCues);
+      return __privateGet19(this, _mediaChaptersCues);
     }
     set mediaChaptersCues(value) {
       var _a3;
-      __privateSet17(this, _mediaChaptersCues, value);
+      __privateSet18(this, _mediaChaptersCues, value);
       this.updateSegments(
-        (_a3 = __privateGet18(this, _mediaChaptersCues)) == null ? void 0 : _a3.map((c) => ({
+        (_a3 = __privateGet19(this, _mediaChaptersCues)) == null ? void 0 : _a3.map((c) => ({
           start: calcRangeValueFromTime(this, c.startTime),
           end: calcRangeValueFromTime(this, c.endTime)
         }))
@@ -7441,7 +7676,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       } else {
         relativeBufferedEnd = 1;
       }
-      const { style } = getOrInsertCSSRule(this.shadowRoot, "#highlight");
+      const { style } = getOrInsertCSSRule(this.shadowRoot, "#buffered");
       style.setProperty("width", `${relativeBufferedEnd * 100}%`);
     }
     updateCurrentBox() {
@@ -7458,9 +7693,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.shadowRoot,
         '[part~="current-box"]'
       );
-      const rects = __privateMethod5(this, _getElementRects, getElementRects_fn).call(this, __privateGet18(this, _currentBox));
-      const boxPos = __privateMethod5(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, this.range.valueAsNumber);
-      const boxShift = __privateMethod5(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, this.range.valueAsNumber);
+      const rects = __privateMethod6(this, _getElementRects, getElementRects_fn).call(this, __privateGet19(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);
       currentRailRule.style.transform = `translateX(${boxPos})`;
       currentRailRule.style.setProperty("--_range-width", `${rects.range.width}`);
       currentBoxRule.style.setProperty("--_box-shift", `${boxShift}`);
@@ -7471,18 +7706,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
       super.handleEvent(evt);
       switch (evt.type) {
         case "input":
-          __privateMethod5(this, _seekRequest, seekRequest_fn).call(this);
+          __privateMethod6(this, _seekRequest, seekRequest_fn).call(this);
           break;
         case "pointermove":
-          __privateMethod5(this, _handlePointerMove3, handlePointerMove_fn3).call(this, evt);
+          __privateMethod6(this, _handlePointerMove3, handlePointerMove_fn3).call(this, evt);
           break;
         case "pointerup":
         case "pointerleave":
-          __privateMethod5(this, _previewRequest, previewRequest_fn).call(this, null);
+          __privateMethod6(this, _previewRequest, previewRequest_fn).call(this, null);
           break;
         case "transitionstart":
           if (containsComposedNode(evt.target, this)) {
-            setTimeout(() => __privateMethod5(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this), 0);
+            setTimeout(() => __privateMethod6(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this), 0);
           }
           break;
       }
@@ -7499,10 +7734,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _mediaChaptersCues = /* @__PURE__ */ new WeakMap();
   _toggleRangeAnimation = /* @__PURE__ */ new WeakSet();
   toggleRangeAnimation_fn = function() {
-    if (__privateMethod5(this, _shouldRangeAnimate, shouldRangeAnimate_fn).call(this)) {
-      __privateGet18(this, _animation).start();
+    if (__privateMethod6(this, _shouldRangeAnimate, shouldRangeAnimate_fn).call(this)) {
+      __privateGet19(this, _animation).start();
     } else {
-      __privateGet18(this, _animation).stop();
+      __privateGet19(this, _animation).stop();
     }
   };
   _shouldRangeAnimate = /* @__PURE__ */ new WeakSet();
@@ -7547,23 +7782,23 @@ svg, img, ::slotted(svg), ::slotted(img) {
   getBoxShiftPosition_fn = function(rects, ratio) {
     const { width, min, max } = rects.box;
     const pointerX = ratio * rects.range.width;
-    if (pointerX < min + __privateGet18(this, _boxPaddingLeft)) {
-      const offset = rects.range.left - rects.bounds.left - __privateGet18(this, _boxPaddingLeft);
+    if (pointerX < min + __privateGet19(this, _boxPaddingLeft)) {
+      const offset = rects.range.left - rects.bounds.left - __privateGet19(this, _boxPaddingLeft);
       return `${pointerX - width / 2 + offset}px`;
     }
-    if (pointerX > max - __privateGet18(this, _boxPaddingRight)) {
-      const offset = rects.bounds.right - rects.range.right - __privateGet18(this, _boxPaddingRight);
+    if (pointerX > max - __privateGet19(this, _boxPaddingRight)) {
+      const offset = rects.bounds.right - rects.range.right - __privateGet19(this, _boxPaddingRight);
       return `${pointerX + width / 2 - offset - rects.range.width}px`;
     }
     return 0;
   };
   _handlePointerMove3 = /* @__PURE__ */ new WeakSet();
   handlePointerMove_fn3 = function(evt) {
-    const isOverBoxes = [...__privateGet18(this, _boxes)].some(
+    const isOverBoxes = [...__privateGet19(this, _boxes)].some(
       (b) => evt.composedPath().includes(b)
     );
     if (!this.dragging && (isOverBoxes || !evt.composedPath().includes(this))) {
-      __privateMethod5(this, _previewRequest, previewRequest_fn).call(this, null);
+      __privateMethod6(this, _previewRequest, previewRequest_fn).call(this, null);
       return;
     }
     const duration = this.mediaSeekableEnd;
@@ -7577,20 +7812,20 @@ svg, img, ::slotted(svg), ::slotted(img) {
       this.shadowRoot,
       '[part~="preview-box"]'
     );
-    const rects = __privateMethod5(this, _getElementRects, getElementRects_fn).call(this, __privateGet18(this, _previewBox));
+    const rects = __privateMethod6(this, _getElementRects, getElementRects_fn).call(this, __privateGet19(this, _previewBox));
     let pointerRatio = (evt.clientX - rects.range.left) / rects.range.width;
     pointerRatio = Math.max(0, Math.min(1, pointerRatio));
-    const boxPos = __privateMethod5(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, pointerRatio);
-    const boxShift = __privateMethod5(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, pointerRatio);
+    const boxPos = __privateMethod6(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, pointerRatio);
+    const boxShift = __privateMethod6(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}`);
     previewBoxRule.style.setProperty("--_box-width", `${rects.box.width}px`);
-    const diff = Math.round(__privateGet18(this, _previewTime)) - Math.round(pointerRatio * duration);
+    const diff = Math.round(__privateGet19(this, _previewTime)) - Math.round(pointerRatio * duration);
     if (Math.abs(diff) < 1 && pointerRatio > 0.01 && pointerRatio < 0.99)
       return;
-    __privateSet17(this, _previewTime, pointerRatio * duration);
-    __privateMethod5(this, _previewRequest, previewRequest_fn).call(this, __privateGet18(this, _previewTime));
+    __privateSet18(this, _previewTime, pointerRatio * duration);
+    __privateMethod6(this, _previewRequest, previewRequest_fn).call(this, __privateGet19(this, _previewTime));
   };
   _previewRequest = /* @__PURE__ */ new WeakSet();
   previewRequest_fn = function(detail) {
@@ -7604,7 +7839,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _seekRequest = /* @__PURE__ */ new WeakSet();
   seekRequest_fn = function() {
-    __privateGet18(this, _animation).stop();
+    __privateGet19(this, _animation).stop();
     const detail = calcTimeFromRangeValue(this);
     this.dispatchEvent(
       new GlobalThis.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
@@ -7618,13 +7853,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-time-range", MediaTimeRange);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-tooltip.js
+  // ../../node_modules/media-chrome/dist/media-tooltip.js
   var Attributes11 = {
     PLACEMENT: "placement",
     BOUNDS: "bounds"
   };
-  var template12 = Document2.createElement("template");
-  template12.innerHTML = /*html*/
+  var template11 = Document2.createElement("template");
+  template11.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -7741,6 +7976,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       super();
       this.updateXOffset = () => {
         var _a3;
+        if (!isElementVisible(this, { checkOpacity: false, checkVisibilityCSS: false }))
+          return;
         const placement = this.placement;
         if (placement === "left" || placement === "right") {
           this.style.removeProperty("--media-tooltip-offset-x");
@@ -7776,7 +8013,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       };
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
-        this.shadowRoot.appendChild(template12.content.cloneNode(true));
+        this.shadowRoot.appendChild(template11.content.cloneNode(true));
       }
       this.arrowEl = this.shadowRoot.querySelector("#arrow");
       if (Object.prototype.hasOwnProperty.call(this, "placement")) {
@@ -7812,14 +8049,14 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-tooltip", MediaTooltip);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-volume-range.js
+  // ../../node_modules/media-chrome/dist/media-volume-range.js
   var DEFAULT_VOLUME = 1;
   var toVolume = (el) => {
     if (el.mediaMuted)
       return 0;
     return el.mediaVolume;
   };
-  var formatAsPercentString = ({ value }) => `${Math.round(value * 100)}%`;
+  var formatAsPercentString = (value) => `${Math.round(value * 100)}%`;
   var MediaVolumeRange = class extends MediaChromeRange {
     static get observedAttributes() {
       return [
@@ -7854,7 +8091,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.range.valueAsNumber = toVolume(this);
         this.range.setAttribute(
           "aria-valuetext",
-          formatAsPercentString(this.range)
+          formatAsPercentString(this.range.valueAsNumber)
         );
         this.updateBar();
       }
@@ -7891,22 +8128,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-volume-range", MediaVolumeRange);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/template-parts.js
-  var __accessCheck19 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/utils/template-parts.js
+  var __accessCheck20 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet19 = (obj, member, getter) => {
-    __accessCheck19(obj, member, "read from private field");
+  var __privateGet20 = (obj, member, getter) => {
+    __accessCheck20(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd19 = (obj, member, value) => {
+  var __privateAdd20 = (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 __privateSet18 = (obj, member, value, setter) => {
-    __accessCheck19(obj, member, "write to private field");
+  var __privateSet19 = (obj, member, value, setter) => {
+    __accessCheck20(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -7943,19 +8180,19 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
   };
   var TemplateInstance = class extends GlobalThis.DocumentFragment {
-    constructor(template19, state, processor2 = defaultProcessor) {
+    constructor(template18, state, processor2 = defaultProcessor) {
       var _a3;
       super();
-      __privateAdd19(this, _parts, void 0);
-      __privateAdd19(this, _processor, void 0);
-      this.append(template19.content.cloneNode(true));
-      __privateSet18(this, _parts, parse(this));
-      __privateSet18(this, _processor, processor2);
-      (_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet19(this, _parts), state);
-      processor2.processCallback(this, __privateGet19(this, _parts), state);
+      __privateAdd20(this, _parts, void 0);
+      __privateAdd20(this, _processor, void 0);
+      this.append(template18.content.cloneNode(true));
+      __privateSet19(this, _parts, parse(this));
+      __privateSet19(this, _processor, processor2);
+      (_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet20(this, _parts), state);
+      processor2.processCallback(this, __privateGet20(this, _parts), state);
     }
     update(state) {
-      __privateGet19(this, _processor).processCallback(this, __privateGet19(this, _parts), state);
+      __privateGet20(this, _processor).processCallback(this, __privateGet20(this, _parts), state);
     }
   };
   _parts = /* @__PURE__ */ new WeakMap();
@@ -8044,87 +8281,87 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var attrPartToList = /* @__PURE__ */ new WeakMap();
   var AttrPartList = class {
     constructor() {
-      __privateAdd19(this, _items, []);
+      __privateAdd20(this, _items, []);
     }
     [Symbol.iterator]() {
-      return __privateGet19(this, _items).values();
+      return __privateGet20(this, _items).values();
     }
     get length() {
-      return __privateGet19(this, _items).length;
+      return __privateGet20(this, _items).length;
     }
     item(index) {
-      return __privateGet19(this, _items)[index];
+      return __privateGet20(this, _items)[index];
     }
     append(...items) {
       for (const item of items) {
         if (item instanceof AttrPart) {
           attrPartToList.set(item, this);
         }
-        __privateGet19(this, _items).push(item);
+        __privateGet20(this, _items).push(item);
       }
     }
     toString() {
-      return __privateGet19(this, _items).join("");
+      return __privateGet20(this, _items).join("");
     }
   };
   _items = /* @__PURE__ */ new WeakMap();
   var AttrPart = class extends Part {
     constructor(element, attributeName, namespaceURI) {
       super();
-      __privateAdd19(this, _list);
-      __privateAdd19(this, _value, "");
-      __privateAdd19(this, _element, void 0);
-      __privateAdd19(this, _attributeName, void 0);
-      __privateAdd19(this, _namespaceURI, void 0);
-      __privateSet18(this, _element, element);
-      __privateSet18(this, _attributeName, attributeName);
-      __privateSet18(this, _namespaceURI, namespaceURI);
+      __privateAdd20(this, _list);
+      __privateAdd20(this, _value, "");
+      __privateAdd20(this, _element, void 0);
+      __privateAdd20(this, _attributeName, void 0);
+      __privateAdd20(this, _namespaceURI, void 0);
+      __privateSet19(this, _element, element);
+      __privateSet19(this, _attributeName, attributeName);
+      __privateSet19(this, _namespaceURI, namespaceURI);
     }
     get attributeName() {
-      return __privateGet19(this, _attributeName);
+      return __privateGet20(this, _attributeName);
     }
     get attributeNamespace() {
-      return __privateGet19(this, _namespaceURI);
+      return __privateGet20(this, _namespaceURI);
     }
     get element() {
-      return __privateGet19(this, _element);
+      return __privateGet20(this, _element);
     }
     get value() {
-      return __privateGet19(this, _value);
+      return __privateGet20(this, _value);
     }
     set value(newValue) {
-      if (__privateGet19(this, _value) === newValue)
+      if (__privateGet20(this, _value) === newValue)
         return;
-      __privateSet18(this, _value, newValue);
-      if (!__privateGet19(this, _list, list_get) || __privateGet19(this, _list, list_get).length === 1) {
+      __privateSet19(this, _value, newValue);
+      if (!__privateGet20(this, _list, list_get) || __privateGet20(this, _list, list_get).length === 1) {
         if (newValue == null) {
-          __privateGet19(this, _element).removeAttributeNS(
-            __privateGet19(this, _namespaceURI),
-            __privateGet19(this, _attributeName)
+          __privateGet20(this, _element).removeAttributeNS(
+            __privateGet20(this, _namespaceURI),
+            __privateGet20(this, _attributeName)
           );
         } else {
-          __privateGet19(this, _element).setAttributeNS(
-            __privateGet19(this, _namespaceURI),
-            __privateGet19(this, _attributeName),
+          __privateGet20(this, _element).setAttributeNS(
+            __privateGet20(this, _namespaceURI),
+            __privateGet20(this, _attributeName),
             newValue
           );
         }
       } else {
-        __privateGet19(this, _element).setAttributeNS(
-          __privateGet19(this, _namespaceURI),
-          __privateGet19(this, _attributeName),
-          __privateGet19(this, _list, list_get).toString()
+        __privateGet20(this, _element).setAttributeNS(
+          __privateGet20(this, _namespaceURI),
+          __privateGet20(this, _attributeName),
+          __privateGet20(this, _list, list_get).toString()
         );
       }
     }
     get booleanValue() {
-      return __privateGet19(this, _element).hasAttributeNS(
-        __privateGet19(this, _namespaceURI),
-        __privateGet19(this, _attributeName)
+      return __privateGet20(this, _element).hasAttributeNS(
+        __privateGet20(this, _namespaceURI),
+        __privateGet20(this, _attributeName)
       );
     }
     set booleanValue(value) {
-      if (!__privateGet19(this, _list, list_get) || __privateGet19(this, _list, list_get).length === 1)
+      if (!__privateGet20(this, _list, list_get) || __privateGet20(this, _list, list_get).length === 1)
         this.value = value ? "" : null;
       else
         throw new DOMException("Value is not fully templatized");
@@ -8141,26 +8378,26 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var ChildNodePart = class extends Part {
     constructor(parentNode, nodes) {
       super();
-      __privateAdd19(this, _parentNode, void 0);
-      __privateAdd19(this, _nodes, void 0);
-      __privateSet18(this, _parentNode, parentNode);
-      __privateSet18(this, _nodes, nodes ? [...nodes] : [new Text()]);
+      __privateAdd20(this, _parentNode, void 0);
+      __privateAdd20(this, _nodes, void 0);
+      __privateSet19(this, _parentNode, parentNode);
+      __privateSet19(this, _nodes, nodes ? [...nodes] : [new Text()]);
     }
     get replacementNodes() {
-      return __privateGet19(this, _nodes);
+      return __privateGet20(this, _nodes);
     }
     get parentNode() {
-      return __privateGet19(this, _parentNode);
+      return __privateGet20(this, _parentNode);
     }
     get nextSibling() {
-      return __privateGet19(this, _nodes)[__privateGet19(this, _nodes).length - 1].nextSibling;
+      return __privateGet20(this, _nodes)[__privateGet20(this, _nodes).length - 1].nextSibling;
     }
     get previousSibling() {
-      return __privateGet19(this, _nodes)[0].previousSibling;
+      return __privateGet20(this, _nodes)[0].previousSibling;
     }
     // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
     get value() {
-      return __privateGet19(this, _nodes).map((node) => node.textContent).join("");
+      return __privateGet20(this, _nodes).map((node) => node.textContent).join("");
     }
     set value(newValue) {
       this.replace(newValue);
@@ -8171,9 +8408,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
       );
       if (!normalisedNodes.length)
         normalisedNodes.push(new Text());
-      __privateSet18(this, _nodes, swapdom(
-        __privateGet19(this, _nodes)[0].parentNode,
-        __privateGet19(this, _nodes),
+      __privateSet19(this, _nodes, swapdom(
+        __privateGet20(this, _nodes)[0].parentNode,
+        __privateGet20(this, _nodes),
         normalisedNodes,
         this.nextSibling
       ));
@@ -8182,14 +8419,14 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _parentNode = /* @__PURE__ */ new WeakMap();
   _nodes = /* @__PURE__ */ new WeakMap();
   var InnerTemplatePart = class extends ChildNodePart {
-    constructor(parentNode, template19) {
-      const directive = template19.getAttribute("directive") || template19.getAttribute("type");
-      let expression = template19.getAttribute("expression") || template19.getAttribute(directive) || "";
+    constructor(parentNode, template18) {
+      const directive = template18.getAttribute("directive") || template18.getAttribute("type");
+      let expression = template18.getAttribute("expression") || template18.getAttribute(directive) || "";
       if (expression.startsWith("{{"))
         expression = expression.trim().slice(2, -2).trim();
       super(parentNode);
       this.expression = expression;
-      this.template = template19;
+      this.template = template18;
       this.directive = directive;
     }
   };
@@ -8222,13 +8459,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
     return b;
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/template-processor.js
+  // ../../node_modules/media-chrome/dist/utils/template-processor.js
   var pipeModifiers = {
     string: (value) => String(value)
   };
   var PartialTemplate = class {
-    constructor(template19) {
-      this.template = template19;
+    constructor(template18) {
+      this.template = template18;
       this.state = void 0;
     }
   };
@@ -8449,27 +8686,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
     return tokens;
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/media-theme-element.js
-  var __accessCheck20 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/media-theme-element.js
+  var __accessCheck21 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet20 = (obj, member, getter) => {
-    __accessCheck20(obj, member, "read from private field");
+  var __privateGet21 = (obj, member, getter) => {
+    __accessCheck21(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd20 = (obj, member, value) => {
+  var __privateAdd21 = (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 __privateSet19 = (obj, member, value, setter) => {
-    __accessCheck20(obj, member, "write to private field");
+  var __privateSet20 = (obj, member, value, setter) => {
+    __accessCheck21(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod6 = (obj, member, method) => {
-    __accessCheck20(obj, member, "access private method");
+  var __privateMethod7 = (obj, member, method) => {
+    __accessCheck21(obj, member, "access private method");
     return method;
   };
   var _template;
@@ -8519,11 +8756,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaThemeElement = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd20(this, _upgradeProperty);
-      __privateAdd20(this, _updateTemplate);
-      __privateAdd20(this, _template, void 0);
-      __privateAdd20(this, _prevTemplate, void 0);
-      __privateAdd20(this, _prevTemplateId, void 0);
+      __privateAdd21(this, _upgradeProperty);
+      __privateAdd21(this, _updateTemplate);
+      __privateAdd21(this, _template, void 0);
+      __privateAdd21(this, _prevTemplate, void 0);
+      __privateAdd21(this, _prevTemplateId, void 0);
       if (this.shadowRoot) {
         this.renderRoot = this.shadowRoot;
       } else {
@@ -8558,7 +8795,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
         this.render
       );
-      __privateMethod6(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
+      __privateMethod7(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
     }
     /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
     get mediaController() {
@@ -8566,16 +8803,16 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
     get template() {
       var _a3;
-      return (_a3 = __privateGet20(this, _template)) != null ? _a3 : this.constructor.template;
+      return (_a3 = __privateGet21(this, _template)) != null ? _a3 : this.constructor.template;
     }
     set template(element) {
-      __privateSet19(this, _prevTemplateId, null);
-      __privateSet19(this, _template, element);
+      __privateSet20(this, _prevTemplateId, null);
+      __privateSet20(this, _template, element);
       this.createRenderer();
     }
     get props() {
       var _a3, _b2, _c;
-      const observedAttributes = [
+      const observedAttributes2 = [
         ...Array.from((_b2 = (_a3 = this.mediaController) == null ? void 0 : _a3.attributes) != null ? _b2 : []).filter(
           ({ name }) => {
             return observedMediaAttributes[name] || name.startsWith("breakpoint");
@@ -8584,7 +8821,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         ...Array.from(this.attributes)
       ];
       const props = {};
-      for (const attr of observedAttributes) {
+      for (const attr of observedAttributes2) {
         const name = (_c = observedMediaAttributes[attr.name]) != null ? _c : camelCase(attr.name);
         let { value } = attr;
         if (value != null) {
@@ -8600,15 +8837,15 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       if (attrName === "template" && oldValue != newValue) {
-        __privateMethod6(this, _updateTemplate, updateTemplate_fn).call(this);
+        __privateMethod7(this, _updateTemplate, updateTemplate_fn).call(this);
       }
     }
     connectedCallback() {
-      __privateMethod6(this, _updateTemplate, updateTemplate_fn).call(this);
+      __privateMethod7(this, _updateTemplate, updateTemplate_fn).call(this);
     }
     createRenderer() {
-      if (this.template && this.template !== __privateGet20(this, _prevTemplate)) {
-        __privateSet19(this, _prevTemplate, this.template);
+      if (this.template && this.template !== __privateGet21(this, _prevTemplate)) {
+        __privateSet20(this, _prevTemplate, this.template);
         this.renderer = new TemplateInstance(
           this.template,
           this.props,
@@ -8625,9 +8862,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
     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");
+        }
       }
     }
   };
@@ -8646,22 +8885,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
   updateTemplate_fn = function() {
     var _a3;
     const templateId = this.getAttribute("template");
-    if (!templateId || templateId === __privateGet20(this, _prevTemplateId))
+    if (!templateId || templateId === __privateGet21(this, _prevTemplateId))
       return;
     const rootNode = this.getRootNode();
-    const template19 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(rootNode, templateId);
-    if (template19) {
-      __privateSet19(this, _prevTemplateId, templateId);
-      __privateSet19(this, _template, template19);
+    const template18 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(rootNode, templateId);
+    if (template18) {
+      __privateSet20(this, _prevTemplateId, templateId);
+      __privateSet20(this, _template, template18);
       this.createRenderer();
       return;
     }
     if (isValidUrl(templateId)) {
-      __privateSet19(this, _prevTemplateId, templateId);
+      __privateSet20(this, _prevTemplateId, templateId);
       request(templateId).then((data) => {
         const template22 = Document2.createElement("template");
         template22.innerHTML = data;
-        __privateSet19(this, _template, template22);
+        __privateSet20(this, _template, template22);
         this.createRenderer();
       }).catch(console.error);
     }
@@ -8692,7 +8931,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-theme", MediaThemeElement);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/anchor-utils.js
+  // ../../node_modules/media-chrome/dist/utils/anchor-utils.js
   function computePosition({
     anchor,
     floating,
@@ -8717,8 +8956,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
     };
   }
   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,
@@ -8767,7 +9007,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/utils/events.js
+  // ../../node_modules/media-chrome/dist/utils/events.js
   var InvokeEvent = class extends Event {
     /**
      * @param init - The event options.
@@ -8789,37 +9029,36 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
   };
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-chrome-menu.js
-  var __accessCheck21 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-chrome-menu.js
+  var __accessCheck22 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet21 = (obj, member, getter) => {
-    __accessCheck21(obj, member, "read from private field");
+  var __privateGet22 = (obj, member, getter) => {
+    __accessCheck22(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd21 = (obj, member, value) => {
+  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 __privateSet20 = (obj, member, value, setter) => {
-    __accessCheck21(obj, member, "write to private field");
+  var __privateSet21 = (obj, member, value, setter) => {
+    __accessCheck22(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod7 = (obj, member, method) => {
-    __accessCheck21(obj, member, "access private method");
+  var __privateMethod8 = (obj, member, method) => {
+    __accessCheck22(obj, member, "access private method");
     return method;
   };
   var _mediaController8;
   var _previouslyFocused2;
   var _invokerElement2;
-  var _keysSoFar;
-  var _clearKeysTimeout;
   var _previousItems;
   var _mutationObserver;
   var _isPopover;
+  var _cssRule;
   var _handleSlotChange;
   var handleSlotChange_fn;
   var _handleMenuItems;
@@ -8893,8 +9132,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
     return "";
   }
-  var template13 = Document2.createElement("template");
-  template13.innerHTML = /*html*/
+  var template12 = Document2.createElement("template");
+  template12.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -8927,6 +9166,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   ""}
       min-height: 0;
       position: relative;
+      bottom: var(--_menu-bottom);
       box-sizing: border-box;
     }
 
@@ -8966,27 +9206,30 @@ svg, img, ::slotted(svg), ::slotted(img) {
       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;
     }
 
@@ -9022,7 +9265,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
   </style>
   <style id="layout-row" media="width:0">
 
-    slot[name="header"] {
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
       padding: .4em .5em;
     }
 
@@ -9070,33 +9314,32 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd21(this, _handleSlotChange);
-      __privateAdd21(this, _updateLayoutStyle);
-      __privateAdd21(this, _handleInvoke2);
-      __privateAdd21(this, _handleOpen2);
-      __privateAdd21(this, _handleClosed2);
-      __privateAdd21(this, _positionMenu);
-      __privateAdd21(this, _resizeMenu);
-      __privateAdd21(this, _handleClick);
-      __privateAdd21(this, _backButtonElement);
-      __privateAdd21(this, _handleToggle);
-      __privateAdd21(this, _checkSubmenuHasExpanded);
-      __privateAdd21(this, _handleFocusOut2);
-      __privateAdd21(this, _handleKeyDown2);
-      __privateAdd21(this, _getItem);
-      __privateAdd21(this, _getTabItem);
-      __privateAdd21(this, _setTabItem);
-      __privateAdd21(this, _selectItem);
-      __privateAdd21(this, _mediaController8, null);
-      __privateAdd21(this, _previouslyFocused2, null);
-      __privateAdd21(this, _invokerElement2, null);
-      __privateAdd21(this, _keysSoFar, "");
-      __privateAdd21(this, _clearKeysTimeout, null);
-      __privateAdd21(this, _previousItems, /* @__PURE__ */ new Set());
-      __privateAdd21(this, _mutationObserver, void 0);
-      __privateAdd21(this, _isPopover, false);
-      __privateAdd21(this, _handleMenuItems, () => {
-        const previousItems = __privateGet21(this, _previousItems);
+      __privateAdd22(this, _handleSlotChange);
+      __privateAdd22(this, _updateLayoutStyle);
+      __privateAdd22(this, _handleInvoke2);
+      __privateAdd22(this, _handleOpen2);
+      __privateAdd22(this, _handleClosed2);
+      __privateAdd22(this, _positionMenu);
+      __privateAdd22(this, _resizeMenu);
+      __privateAdd22(this, _handleClick);
+      __privateAdd22(this, _backButtonElement);
+      __privateAdd22(this, _handleToggle);
+      __privateAdd22(this, _checkSubmenuHasExpanded);
+      __privateAdd22(this, _handleFocusOut2);
+      __privateAdd22(this, _handleKeyDown2);
+      __privateAdd22(this, _getItem);
+      __privateAdd22(this, _getTabItem);
+      __privateAdd22(this, _setTabItem);
+      __privateAdd22(this, _selectItem);
+      __privateAdd22(this, _mediaController8, null);
+      __privateAdd22(this, _previouslyFocused2, null);
+      __privateAdd22(this, _invokerElement2, null);
+      __privateAdd22(this, _previousItems, /* @__PURE__ */ new Set());
+      __privateAdd22(this, _mutationObserver, void 0);
+      __privateAdd22(this, _isPopover, false);
+      __privateAdd22(this, _cssRule, null);
+      __privateAdd22(this, _handleMenuItems, () => {
+        const previousItems = __privateGet22(this, _previousItems);
         const currentItems = new Set(this.items);
         for (const item of previousItems) {
           if (!currentItems.has(item)) {
@@ -9108,14 +9351,14 @@ svg, img, ::slotted(svg), ::slotted(img) {
             this.dispatchEvent(new CustomEvent("addmenuitem", { detail: item }));
           }
         }
-        __privateSet20(this, _previousItems, currentItems);
+        __privateSet21(this, _previousItems, currentItems);
       });
-      __privateAdd21(this, _handleBoundsResize, () => {
-        __privateMethod7(this, _positionMenu, positionMenu_fn).call(this, false);
-        __privateMethod7(this, _resizeMenu, resizeMenu_fn).call(this, false);
+      __privateAdd22(this, _handleBoundsResize, () => {
+        __privateMethod8(this, _positionMenu, positionMenu_fn).call(this);
+        __privateMethod8(this, _resizeMenu, resizeMenu_fn).call(this, false);
       });
-      __privateAdd21(this, _handleMenuResize, () => {
-        __privateMethod7(this, _positionMenu, positionMenu_fn).call(this, false);
+      __privateAdd22(this, _handleMenuResize, () => {
+        __privateMethod8(this, _positionMenu, positionMenu_fn).call(this);
       });
       if (!this.shadowRoot) {
         this.attachShadow({ mode: "open" });
@@ -9127,8 +9370,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
         "slot:not([name])"
       );
       this.shadowRoot.addEventListener("slotchange", this);
-      __privateSet20(this, _mutationObserver, new MutationObserver(__privateGet21(this, _handleMenuItems)));
-      __privateGet21(this, _mutationObserver).observe(this.defaultSlot, { childList: true });
+      __privateSet21(this, _mutationObserver, new MutationObserver(__privateGet22(this, _handleMenuItems)));
+      __privateGet22(this, _mutationObserver).observe(this.defaultSlot, { childList: true });
     }
     static get observedAttributes() {
       return [
@@ -9139,7 +9382,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       ];
     }
-    static formatMenuItemText(text) {
+    static formatMenuItemText(text, _data) {
       return text;
     }
     enable() {
@@ -9159,58 +9402,59 @@ svg, img, ::slotted(svg), ::slotted(img) {
     handleEvent(event) {
       switch (event.type) {
         case "slotchange":
-          __privateMethod7(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
+          __privateMethod8(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
           break;
         case "invoke":
-          __privateMethod7(this, _handleInvoke2, handleInvoke_fn2).call(this, event);
+          __privateMethod8(this, _handleInvoke2, handleInvoke_fn2).call(this, event);
           break;
         case "click":
-          __privateMethod7(this, _handleClick, handleClick_fn).call(this, event);
+          __privateMethod8(this, _handleClick, handleClick_fn).call(this, event);
           break;
         case "toggle":
-          __privateMethod7(this, _handleToggle, handleToggle_fn).call(this, event);
+          __privateMethod8(this, _handleToggle, handleToggle_fn).call(this, event);
           break;
         case "focusout":
-          __privateMethod7(this, _handleFocusOut2, handleFocusOut_fn2).call(this, event);
+          __privateMethod8(this, _handleFocusOut2, handleFocusOut_fn2).call(this, event);
           break;
         case "keydown":
-          __privateMethod7(this, _handleKeyDown2, handleKeyDown_fn2).call(this, event);
+          __privateMethod8(this, _handleKeyDown2, handleKeyDown_fn2).call(this, event);
           break;
       }
     }
     connectedCallback() {
       var _a3, _b2;
-      __privateMethod7(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
+      __privateSet21(this, _cssRule, insertCSSRule(this.shadowRoot, ":host"));
+      __privateMethod8(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
       if (!this.hasAttribute("disabled")) {
         this.enable();
       }
       if (!this.role) {
         this.role = "menu";
       }
-      __privateSet20(this, _mediaController8, getAttributeMediaController(this));
-      (_b2 = (_a3 = __privateGet21(this, _mediaController8)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet21(this, _mediaController8, getAttributeMediaController(this));
+      (_b2 = (_a3 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
       if (!this.hidden) {
-        observeResize(getBoundsElement(this), __privateGet21(this, _handleBoundsResize));
-        observeResize(this, __privateGet21(this, _handleMenuResize));
+        observeResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
+        observeResize(this, __privateGet22(this, _handleMenuResize));
       }
     }
     disconnectedCallback() {
       var _a3, _b2;
-      unobserveResize(getBoundsElement(this), __privateGet21(this, _handleBoundsResize));
-      unobserveResize(this, __privateGet21(this, _handleMenuResize));
+      unobserveResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
+      unobserveResize(this, __privateGet22(this, _handleMenuResize));
       this.disable();
-      (_b2 = (_a3 = __privateGet21(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
-      __privateSet20(this, _mediaController8, null);
+      (_b2 = (_a3 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet21(this, _mediaController8, null);
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       var _a3, _b2, _c, _d;
       if (attrName === Attributes12.HIDDEN && newValue !== oldValue) {
-        if (!__privateGet21(this, _isPopover))
-          __privateSet20(this, _isPopover, true);
+        if (!__privateGet22(this, _isPopover))
+          __privateSet21(this, _isPopover, true);
         if (this.hidden) {
-          __privateMethod7(this, _handleClosed2, handleClosed_fn2).call(this);
+          __privateMethod8(this, _handleClosed2, handleClosed_fn2).call(this);
         } else {
-          __privateMethod7(this, _handleOpen2, handleOpen_fn2).call(this);
+          __privateMethod8(this, _handleOpen2, handleOpen_fn2).call(this);
         }
         this.dispatchEvent(
           new ToggleEvent({
@@ -9221,12 +9465,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
         );
       } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet21(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
-          __privateSet20(this, _mediaController8, null);
+          (_b2 = (_a3 = __privateGet22(this, _mediaController8)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          __privateSet21(this, _mediaController8, null);
         }
         if (newValue && this.isConnected) {
-          __privateSet20(this, _mediaController8, getAttributeMediaController(this));
-          (_d = (_c = __privateGet21(this, _mediaController8)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
+          __privateSet21(this, _mediaController8, getAttributeMediaController(this));
+          (_d = (_c = __privateGet22(this, _mediaController8)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
         }
       } else if (attrName === Attributes12.DISABLED && newValue !== oldValue) {
         if (newValue == null) {
@@ -9235,7 +9479,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
           this.disable();
         }
       } else if (attrName === Attributes12.STYLE && newValue !== oldValue) {
-        __privateMethod7(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
+        __privateMethod8(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
       }
     }
     formatMenuItemText(text, data) {
@@ -9277,12 +9521,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
       const item = this.items.find((item2) => item2.value === newValue);
       if (!item)
         return;
-      __privateMethod7(this, _selectItem, selectItem_fn).call(this, item);
+      __privateMethod8(this, _selectItem, selectItem_fn).call(this, item);
     }
     focus() {
-      __privateSet20(this, _previouslyFocused2, getActiveElement());
+      __privateSet21(this, _previouslyFocused2, getActiveElement());
       if (this.items.length) {
-        __privateMethod7(this, _setTabItem, setTabItem_fn).call(this, this.items[0]);
+        __privateMethod8(this, _setTabItem, setTabItem_fn).call(this, this.items[0]);
         this.items[0].focus();
         return;
       }
@@ -9293,12 +9537,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
     handleSelect(event) {
       var _a3;
-      const item = __privateMethod7(this, _getItem, getItem_fn).call(this, event);
+      const item = __privateMethod8(this, _getItem, getItem_fn).call(this, event);
       if (!item)
         return;
-      __privateMethod7(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
-      if (__privateGet21(this, _invokerElement2) && !this.hidden) {
-        (_a3 = __privateGet21(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+      __privateMethod8(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
+      if (__privateGet22(this, _invokerElement2) && !this.hidden) {
+        (_a3 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
         this.hidden = true;
       }
     }
@@ -9318,7 +9562,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       var _a3, _b2;
       const { key } = event;
       const items = this.items;
-      const currentItem = (_b2 = (_a3 = __privateMethod7(this, _getItem, getItem_fn).call(this, event)) != null ? _a3 : __privateMethod7(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b2 : items[0];
+      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 currentIndex = items.indexOf(currentItem);
       let index = Math.max(0, currentIndex);
       if (key === "ArrowDown") {
@@ -9336,18 +9580,17 @@ svg, img, ::slotted(svg), ::slotted(img) {
       if (index > items.length - 1) {
         index = 0;
       }
-      __privateMethod7(this, _setTabItem, setTabItem_fn).call(this, items[index]);
+      __privateMethod8(this, _setTabItem, setTabItem_fn).call(this, items[index]);
       items[index].focus();
     }
   };
   _mediaController8 = /* @__PURE__ */ new WeakMap();
   _previouslyFocused2 = /* @__PURE__ */ new WeakMap();
   _invokerElement2 = /* @__PURE__ */ new WeakMap();
-  _keysSoFar = /* @__PURE__ */ new WeakMap();
-  _clearKeysTimeout = /* @__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;
@@ -9363,7 +9606,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       header.hidden = slot.assignedNodes().length === 0;
     }
     if (!slot.name) {
-      __privateGet21(this, _handleMenuItems).call(this);
+      __privateGet22(this, _handleMenuItems).call(this);
     }
   };
   _handleMenuItems = /* @__PURE__ */ new WeakMap();
@@ -9376,7 +9619,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   };
   _handleInvoke2 = /* @__PURE__ */ new WeakSet();
   handleInvoke_fn2 = function(event) {
-    __privateSet20(this, _invokerElement2, event.relatedTarget);
+    __privateSet21(this, _invokerElement2, event.relatedTarget);
     if (!containsComposedNode(this, event.relatedTarget)) {
       this.hidden = !this.hidden;
     }
@@ -9384,23 +9627,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _handleOpen2 = /* @__PURE__ */ new WeakSet();
   handleOpen_fn2 = function() {
     var _a3;
-    (_a3 = __privateGet21(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
-    requestAnimationFrame(() => __privateMethod7(this, _positionMenu, positionMenu_fn).call(this, false));
+    (_a3 = __privateGet22(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
     this.addEventListener("transitionend", () => this.focus(), { once: true });
-    observeResize(getBoundsElement(this), __privateGet21(this, _handleBoundsResize));
-    observeResize(this, __privateGet21(this, _handleMenuResize));
+    observeResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
+    observeResize(this, __privateGet22(this, _handleMenuResize));
   };
   _handleClosed2 = /* @__PURE__ */ new WeakSet();
   handleClosed_fn2 = function() {
     var _a3;
-    (_a3 = __privateGet21(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
-    unobserveResize(getBoundsElement(this), __privateGet21(this, _handleBoundsResize));
-    unobserveResize(this, __privateGet21(this, _handleMenuResize));
+    (_a3 = __privateGet22(this, _invokerElement2)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    unobserveResize(getBoundsElement(this), __privateGet22(this, _handleBoundsResize));
+    unobserveResize(this, __privateGet22(this, _handleMenuResize));
   };
   _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)
@@ -9413,19 +9655,17 @@ svg, img, ::slotted(svg), ::slotted(img) {
     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 } = __privateGet22(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) {
@@ -9435,7 +9675,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     const expandedSubmenu = expandedMenuItem == null ? void 0 : expandedMenuItem.querySelector(
       '[role="menu"]'
     );
-    const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
+    const { style } = __privateGet22(this, _cssRule);
     if (!animate) {
       style.setProperty("--media-menu-transition-in", "none");
     }
@@ -9447,11 +9687,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
       );
       this.style.setProperty("min-width", `${width}px`);
       this.style.setProperty("min-height", `${height}px`);
-      __privateMethod7(this, _positionMenu, positionMenu_fn).call(this, animate, width);
+      __privateMethod8(this, _positionMenu, positionMenu_fn).call(this, width);
     } else {
       this.style.removeProperty("min-width");
       this.style.removeProperty("min-height");
-      __privateMethod7(this, _positionMenu, positionMenu_fn).call(this, animate);
+      __privateMethod8(this, _positionMenu, positionMenu_fn).call(this);
     }
     style.removeProperty("--media-menu-transition-in");
   };
@@ -9459,15 +9699,15 @@ svg, img, ::slotted(svg), ::slotted(img) {
   handleClick_fn = function(event) {
     var _a3;
     event.stopPropagation();
-    if (event.composedPath().includes(__privateGet21(this, _backButtonElement, backButtonElement_get))) {
-      (_a3 = __privateGet21(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+    if (event.composedPath().includes(__privateGet22(this, _backButtonElement, backButtonElement_get))) {
+      (_a3 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
       this.hidden = true;
       return;
     }
-    const item = __privateMethod7(this, _getItem, getItem_fn).call(this, event);
+    const item = __privateMethod8(this, _getItem, getItem_fn).call(this, event);
     if (!item || item.hasAttribute("disabled"))
       return;
-    __privateMethod7(this, _setTabItem, setTabItem_fn).call(this, item);
+    __privateMethod8(this, _setTabItem, setTabItem_fn).call(this, item);
     this.handleSelect(event);
   };
   _backButtonElement = /* @__PURE__ */ new WeakSet();
@@ -9477,14 +9717,14 @@ svg, img, ::slotted(svg), ::slotted(img) {
       '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();
   handleToggle_fn = function(event) {
     if (event.target === this)
       return;
-    __privateMethod7(this, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn).call(this);
+    __privateMethod8(this, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn).call(this);
     const menuItemsWithSubmenu = Array.from(
       this.querySelectorAll('[role="menuitem"][aria-haspopup]')
     );
@@ -9500,7 +9740,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     for (const item of menuItemsWithSubmenu) {
       item.setAttribute("aria-expanded", `${!item.submenuElement.hidden}`);
     }
-    __privateMethod7(this, _resizeMenu, resizeMenu_fn).call(this, true);
+    __privateMethod8(this, _resizeMenu, resizeMenu_fn).call(this, true);
   };
   _checkSubmenuHasExpanded = /* @__PURE__ */ new WeakSet();
   checkSubmenuHasExpanded_fn = function() {
@@ -9512,10 +9752,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   handleFocusOut_fn2 = function(event) {
     var _a3;
     if (!containsComposedNode(this, event.relatedTarget)) {
-      if (__privateGet21(this, _isPopover)) {
-        (_a3 = __privateGet21(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
+      if (__privateGet22(this, _isPopover)) {
+        (_a3 = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _a3.focus();
       }
-      if (__privateGet21(this, _invokerElement2) && __privateGet21(this, _invokerElement2) !== event.relatedTarget && !this.hidden) {
+      if (__privateGet22(this, _invokerElement2) && __privateGet22(this, _invokerElement2) !== event.relatedTarget && !this.hidden) {
         this.hidden = true;
       }
     }
@@ -9533,7 +9773,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     event.preventDefault();
     event.stopPropagation();
     if (key === "Tab") {
-      if (__privateGet21(this, _isPopover)) {
+      if (__privateGet22(this, _isPopover)) {
         this.hidden = true;
         return;
       }
@@ -9544,8 +9784,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       }
       this.blur();
     } else if (key === "Escape") {
-      (_e = __privateGet21(this, _previouslyFocused2)) == null ? void 0 : _e.focus();
-      if (__privateGet21(this, _isPopover)) {
+      (_e = __privateGet22(this, _previouslyFocused2)) == null ? void 0 : _e.focus();
+      if (__privateGet22(this, _isPopover)) {
         this.hidden = true;
       }
     } else if (key === "Enter" || key === " ") {
@@ -9589,7 +9829,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       );
     }
   };
-  MediaChromeMenu.template = template13;
+  MediaChromeMenu.template = template12;
   function isMenuItem(element) {
     return ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
       element == null ? void 0 : element.role
@@ -9603,27 +9843,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-chrome-menu", MediaChromeMenu);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-chrome-menu-item.js
-  var __accessCheck22 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-chrome-menu-item.js
+  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 __privateSet21 = (obj, member, value, setter) => {
-    __accessCheck22(obj, member, "write to private field");
+  var __privateSet22 = (obj, member, value, setter) => {
+    __accessCheck23(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod8 = (obj, member, method) => {
-    __accessCheck22(obj, member, "access private method");
+  var __privateMethod9 = (obj, member, method) => {
+    __accessCheck23(obj, member, "access private method");
     return method;
   };
   var _dirty;
@@ -9641,8 +9881,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var handleKeyDown_fn3;
   var _reset;
   var reset_fn;
-  var template14 = Document2.createElement("template");
-  template14.innerHTML = /*html*/
+  var template13 = Document2.createElement("template");
+  template13.innerHTML = /*html*/
   `
   <style>
     :host {
@@ -9771,21 +10011,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd22(this, _handleSlotChange2);
-      __privateAdd22(this, _submenuConnected);
-      __privateAdd22(this, _submenuDisconnected);
-      __privateAdd22(this, _handleKeyUp);
-      __privateAdd22(this, _handleKeyDown3);
-      __privateAdd22(this, _reset);
-      __privateAdd22(this, _dirty, false);
-      __privateAdd22(this, _ownerElement, void 0);
-      __privateAdd22(this, _handleMenuItem, () => {
+      __privateAdd23(this, _handleSlotChange2);
+      __privateAdd23(this, _submenuConnected);
+      __privateAdd23(this, _submenuDisconnected);
+      __privateAdd23(this, _handleKeyUp);
+      __privateAdd23(this, _handleKeyDown3);
+      __privateAdd23(this, _reset);
+      __privateAdd23(this, _dirty, false);
+      __privateAdd23(this, _ownerElement, void 0);
+      __privateAdd23(this, _handleMenuItem, () => {
         var _a3, _b2;
         this.setAttribute("submenusize", `${this.submenuElement.items.length}`);
         const descriptionSlot = this.shadowRoot.querySelector(
           'slot[name="description"]'
         );
-        const description = (_b2 = (_a3 = this.submenuElement.checkedItems) == null ? void 0 : _a3[0]) == null ? void 0 : _b2.text;
+        const checkedItem = (_a3 = this.submenuElement.checkedItems) == null ? void 0 : _a3[0];
+        const description = (_b2 = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b2 : checkedItem == null ? void 0 : checkedItem.text;
         const span = Document2.createElement("span");
         span.textContent = description != null ? description : "";
         descriptionSlot.replaceChildren(span);
@@ -9823,21 +10064,21 @@ svg, img, ::slotted(svg), ::slotted(img) {
     handleEvent(event) {
       switch (event.type) {
         case "slotchange":
-          __privateMethod8(this, _handleSlotChange2, handleSlotChange_fn2).call(this, event);
+          __privateMethod9(this, _handleSlotChange2, handleSlotChange_fn2).call(this, event);
           break;
         case "click":
           this.handleClick(event);
           break;
         case "keydown":
-          __privateMethod8(this, _handleKeyDown3, handleKeyDown_fn3).call(this, event);
+          __privateMethod9(this, _handleKeyDown3, handleKeyDown_fn3).call(this, event);
           break;
         case "keyup":
-          __privateMethod8(this, _handleKeyUp, handleKeyUp_fn).call(this, event);
+          __privateMethod9(this, _handleKeyUp, handleKeyUp_fn).call(this, event);
           break;
       }
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      if (attrName === Attributes13.CHECKED && isCheckable(this) && !__privateGet22(this, _dirty)) {
+      if (attrName === Attributes13.CHECKED && isCheckable(this) && !__privateGet23(this, _dirty)) {
         this.setAttribute("aria-checked", newValue != null ? "true" : "false");
       } else if (attrName === Attributes13.TYPE && newValue !== oldValue) {
         this.role = "menuitem" + newValue;
@@ -9854,13 +10095,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
         this.enable();
       }
       this.role = "menuitem" + this.type;
-      __privateSet21(this, _ownerElement, closestMenuItemsContainer(this, this.parentNode));
-      __privateMethod8(this, _reset, reset_fn).call(this);
+      __privateSet22(this, _ownerElement, closestMenuItemsContainer(this, this.parentNode));
+      __privateMethod9(this, _reset, reset_fn).call(this);
     }
     disconnectedCallback() {
       this.disable();
-      __privateMethod8(this, _reset, reset_fn).call(this);
-      __privateSet21(this, _ownerElement, null);
+      __privateMethod9(this, _reset, reset_fn).call(this);
+      __privateSet22(this, _ownerElement, null);
     }
     get invokeTarget() {
       return this.getAttribute("invoketarget");
@@ -9918,7 +10159,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     set checked(value) {
       if (!isCheckable(this))
         return;
-      __privateSet21(this, _dirty, true);
+      __privateSet22(this, _dirty, true);
       this.setAttribute("aria-checked", value ? "true" : "false");
       if (value) {
         this.part.add("checked");
@@ -9954,9 +10195,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
     if (slot.name === "submenu") {
       if (this.submenuElement) {
-        __privateMethod8(this, _submenuConnected, submenuConnected_fn).call(this);
+        __privateMethod9(this, _submenuConnected, submenuConnected_fn).call(this);
       } else {
-        __privateMethod8(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
+        __privateMethod9(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
       }
     }
   };
@@ -9964,35 +10205,35 @@ svg, img, ::slotted(svg), ::slotted(img) {
   submenuConnected_fn = async function() {
     this.setAttribute("aria-haspopup", "menu");
     this.setAttribute("aria-expanded", `${!this.submenuElement.hidden}`);
-    this.submenuElement.addEventListener("change", __privateGet22(this, _handleMenuItem));
-    this.submenuElement.addEventListener("addmenuitem", __privateGet22(this, _handleMenuItem));
+    this.submenuElement.addEventListener("change", __privateGet23(this, _handleMenuItem));
+    this.submenuElement.addEventListener("addmenuitem", __privateGet23(this, _handleMenuItem));
     this.submenuElement.addEventListener(
       "removemenuitem",
-      __privateGet22(this, _handleMenuItem)
+      __privateGet23(this, _handleMenuItem)
     );
-    __privateGet22(this, _handleMenuItem).call(this);
+    __privateGet23(this, _handleMenuItem).call(this);
   };
   _submenuDisconnected = /* @__PURE__ */ new WeakSet();
   submenuDisconnected_fn = function() {
     this.removeAttribute("aria-haspopup");
     this.removeAttribute("aria-expanded");
-    this.submenuElement.removeEventListener("change", __privateGet22(this, _handleMenuItem));
+    this.submenuElement.removeEventListener("change", __privateGet23(this, _handleMenuItem));
     this.submenuElement.removeEventListener(
       "addmenuitem",
-      __privateGet22(this, _handleMenuItem)
+      __privateGet23(this, _handleMenuItem)
     );
     this.submenuElement.removeEventListener(
       "removemenuitem",
-      __privateGet22(this, _handleMenuItem)
+      __privateGet23(this, _handleMenuItem)
     );
-    __privateGet22(this, _handleMenuItem).call(this);
+    __privateGet23(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", __privateMethod8(this, _handleKeyUp, handleKeyUp_fn));
+      this.removeEventListener("keyup", __privateMethod9(this, _handleKeyUp, handleKeyUp_fn));
       return;
     }
     this.handleClick(event);
@@ -10001,15 +10242,15 @@ svg, img, ::slotted(svg), ::slotted(img) {
   handleKeyDown_fn3 = function(event) {
     const { metaKey, altKey, key } = event;
     if (metaKey || altKey || !this.keysUsed.includes(key)) {
-      this.removeEventListener("keyup", __privateMethod8(this, _handleKeyUp, handleKeyUp_fn));
+      this.removeEventListener("keyup", __privateMethod9(this, _handleKeyUp, handleKeyUp_fn));
       return;
     }
-    this.addEventListener("keyup", __privateMethod8(this, _handleKeyUp, handleKeyUp_fn), { once: true });
+    this.addEventListener("keyup", __privateMethod9(this, _handleKeyUp, handleKeyUp_fn), { once: true });
   };
   _reset = /* @__PURE__ */ new WeakSet();
   reset_fn = function() {
     var _a3;
-    const items = (_a3 = __privateGet22(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
+    const items = (_a3 = __privateGet23(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
     if (!items)
       return;
     let checkedItem = items.filter((item) => item.getAttribute("aria-checked") === "true").pop();
@@ -10020,7 +10261,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
     checkedItem == null ? void 0 : checkedItem.setAttribute("aria-checked", "true");
   };
-  MediaChromeMenuItem.template = template14;
+  MediaChromeMenuItem.template = template13;
   function isCheckable(item) {
     return item.type === "radio" || item.type === "checkbox";
   }
@@ -10041,9 +10282,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-settings-menu.js
-  var template15 = Document2.createElement("template");
-  template15.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
+  // ../../node_modules/media-chrome/dist/menu/media-settings-menu.js
+  var template14 = Document2.createElement("template");
+  template14.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
   `
   <style>
     :host {
@@ -10051,7 +10292,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         var(--media-menu-background,
         var(--media-control-background,
         var(--media-secondary-color, rgb(20 20 30 / .8)))));
-      min-width: var(--media-settings-menu-min-width, 160px);
+      min-width: var(--media-settings-menu-min-width, 170px);
       border-radius: 2px 2px 0 0;
       overflow: hidden;
     }
@@ -10083,15 +10324,15 @@ svg, img, ::slotted(svg), ::slotted(img) {
       return getMediaController(this).querySelector("media-settings-menu-button");
     }
   };
-  MediaSettingsMenu.template = template15;
+  MediaSettingsMenu.template = template14;
   if (!GlobalThis.customElements.get("media-settings-menu")) {
     GlobalThis.customElements.define("media-settings-menu", MediaSettingsMenu);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-settings-menu-item.js
+  // ../../node_modules/media-chrome/dist/menu/media-settings-menu-item.js
   var _a;
-  var template16 = Document2.createElement("template");
-  template16.innerHTML = MediaChromeMenuItem.template.innerHTML + /*html*/
+  var template15 = Document2.createElement("template");
+  template15.innerHTML = MediaChromeMenuItem.template.innerHTML + /*html*/
   `
   <style>
     slot:not([name="submenu"]) {
@@ -10103,8 +10344,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
     }
   </style>
 `;
-  if ((_a = template16.content) == null ? void 0 : _a.querySelector) {
-    template16.content.querySelector('slot[name="suffix"]').innerHTML = /*html*/
+  if ((_a = template15.content) == null ? void 0 : _a.querySelector) {
+    template15.content.querySelector('slot[name="suffix"]').innerHTML = /*html*/
     `
     <svg aria-hidden="true" viewBox="0 0 20 24">
       <path d="m8.12 17.585-.742-.669 4.2-4.665-4.2-4.666.743-.669 4.803 5.335-4.803 5.334Z"/>
@@ -10113,7 +10354,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   }
   var MediaSettingsMenuItem = class extends MediaChromeMenuItem {
   };
-  MediaSettingsMenuItem.template = template16;
+  MediaSettingsMenuItem.template = template15;
   if (!GlobalThis.customElements.get("media-settings-menu-item")) {
     GlobalThis.customElements.define(
       "media-settings-menu-item",
@@ -10121,7 +10362,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-chrome-menu-button.js
+  // ../../node_modules/media-chrome/dist/menu/media-chrome-menu-button.js
   var MediaChromeMenuButton = class extends MediaChromeButton {
     connectedCallback() {
       super.connectedCallback();
@@ -10162,7 +10403,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-settings-menu-button.js
+  // ../../node_modules/media-chrome/dist/menu/media-settings-menu-button.js
   var slotTemplate12 = Document2.createElement("template");
   slotTemplate12.innerHTML = /*html*/
   `
@@ -10205,27 +10446,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-audio-track-menu.js
-  var __accessCheck23 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-audio-track-menu.js
+  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 __privateSet22 = (obj, member, value, setter) => {
-    __accessCheck23(obj, member, "write to private field");
+  var __privateSet23 = (obj, member, value, setter) => {
+    __accessCheck24(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod9 = (obj, member, method) => {
-    __accessCheck23(obj, member, "access private method");
+  var __privateMethod10 = (obj, member, method) => {
+    __accessCheck24(obj, member, "access private method");
     return method;
   };
   var _audioTrackList;
@@ -10237,10 +10478,10 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaAudioTrackMenu = class extends MediaChromeMenu {
     constructor() {
       super(...arguments);
-      __privateAdd23(this, _render);
-      __privateAdd23(this, _onChange);
-      __privateAdd23(this, _audioTrackList, []);
-      __privateAdd23(this, _prevState, void 0);
+      __privateAdd24(this, _render);
+      __privateAdd24(this, _onChange);
+      __privateAdd24(this, _audioTrackList, []);
+      __privateAdd24(this, _prevState, void 0);
     }
     static get observedAttributes() {
       return [
@@ -10255,17 +10496,17 @@ svg, img, ::slotted(svg), ::slotted(img) {
       if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED && oldValue !== newValue) {
         this.value = newValue;
       } else if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST && oldValue !== newValue) {
-        __privateSet22(this, _audioTrackList, parseAudioTrackList(newValue != null ? newValue : ""));
-        __privateMethod9(this, _render, render_fn).call(this);
+        __privateSet23(this, _audioTrackList, parseAudioTrackList(newValue != null ? newValue : ""));
+        __privateMethod10(this, _render, render_fn).call(this);
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod9(this, _onChange, onChange_fn));
+      this.addEventListener("change", __privateMethod10(this, _onChange, onChange_fn));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod9(this, _onChange, onChange_fn));
+      this.removeEventListener("change", __privateMethod10(this, _onChange, onChange_fn));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -10279,11 +10520,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
       );
     }
     get mediaAudioTrackList() {
-      return __privateGet23(this, _audioTrackList);
+      return __privateGet24(this, _audioTrackList);
     }
     set mediaAudioTrackList(list) {
-      __privateSet22(this, _audioTrackList, list);
-      __privateMethod9(this, _render, render_fn).call(this);
+      __privateSet23(this, _audioTrackList, list);
+      __privateMethod10(this, _render, render_fn).call(this);
     }
     /**
      * Get enabled audio track id.
@@ -10300,9 +10541,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _prevState = /* @__PURE__ */ new WeakMap();
   _render = /* @__PURE__ */ new WeakSet();
   render_fn = function() {
-    if (__privateGet23(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
+    if (__privateGet24(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
       return;
-    __privateSet22(this, _prevState, JSON.stringify(this.mediaAudioTrackList));
+    __privateSet23(this, _prevState, JSON.stringify(this.mediaAudioTrackList));
     const audioTrackList = this.mediaAudioTrackList;
     this.defaultSlot.textContent = "";
     for (const audioTrack of audioTrackList) {
@@ -10338,7 +10579,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-audio-track-menu-button.js
+  // ../../node_modules/media-chrome/dist/menu/media-audio-track-menu-button.js
   var audioTrackIcon = (
     /*html*/
     `<svg aria-hidden="true" viewBox="0 0 24 24">
@@ -10403,27 +10644,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-captions-menu.js
-  var __accessCheck24 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-captions-menu.js
+  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 __privateSet23 = (obj, member, value, setter) => {
-    __accessCheck24(obj, member, "write to private field");
+  var __privateSet24 = (obj, member, value, setter) => {
+    __accessCheck25(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod10 = (obj, member, method) => {
-    __accessCheck24(obj, member, "access private method");
+  var __privateMethod11 = (obj, member, method) => {
+    __accessCheck25(obj, member, "access private method");
     return method;
   };
   var _prevState2;
@@ -10438,16 +10679,16 @@ svg, img, ::slotted(svg), ::slotted(img) {
     <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>`
   );
-  var template17 = Document2.createElement("template");
-  template17.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
+  var template16 = Document2.createElement("template");
+  template16.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
   `
   <slot name="captions-indicator" hidden>${ccIcon}</slot>`;
   var MediaCaptionsMenu = class extends MediaChromeMenu {
     constructor() {
       super(...arguments);
-      __privateAdd24(this, _render2);
-      __privateAdd24(this, _onChange2);
-      __privateAdd24(this, _prevState2, void 0);
+      __privateAdd25(this, _render2);
+      __privateAdd25(this, _onChange2);
+      __privateAdd25(this, _prevState2, void 0);
     }
     static get observedAttributes() {
       return [
@@ -10459,18 +10700,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_LIST && oldValue !== newValue) {
-        __privateMethod10(this, _render2, render_fn2).call(this);
+        __privateMethod11(this, _render2, render_fn2).call(this);
       } else if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING && oldValue !== newValue) {
         this.value = newValue;
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod10(this, _onChange2, onChange_fn2));
+      this.addEventListener("change", __privateMethod11(this, _onChange2, onChange_fn2));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod10(this, _onChange2, onChange_fn2));
+      this.removeEventListener("change", __privateMethod11(this, _onChange2, onChange_fn2));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -10508,9 +10749,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
   _render2 = /* @__PURE__ */ new WeakSet();
   render_fn2 = function() {
     var _a3;
-    if (__privateGet24(this, _prevState2) === JSON.stringify(this.mediaSubtitlesList))
+    if (__privateGet25(this, _prevState2) === JSON.stringify(this.mediaSubtitlesList))
       return;
-    __privateSet23(this, _prevState2, JSON.stringify(this.mediaSubtitlesList));
+    __privateSet24(this, _prevState2, JSON.stringify(this.mediaSubtitlesList));
     this.defaultSlot.textContent = "";
     const isOff = !this.value;
     const item = createMenuItem({
@@ -10568,7 +10809,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
     this.dispatchEvent(event);
   };
-  MediaCaptionsMenu.template = template17;
+  MediaCaptionsMenu.template = template16;
   var getSubtitlesListAttr2 = (el, attrName) => {
     const attrVal = el.getAttribute(attrName);
     return attrVal ? parseTextTracksStr(attrVal) : [];
@@ -10588,18 +10829,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-captions-menu", MediaCaptionsMenu);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-captions-menu-button.js
-  var __accessCheck25 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-captions-menu-button.js
+  var __accessCheck26 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  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 __privateSet24 = (obj, member, value, setter) => {
-    __accessCheck25(obj, member, "write to private field");
+  var __privateSet25 = (obj, member, value, setter) => {
+    __accessCheck26(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -10640,8 +10881,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
     constructor(options = {}) {
       super({ slotTemplate: slotTemplate14, tooltipContent: tooltipLabels.CAPTIONS, ...options });
-      __privateAdd25(this, _captionsReady, void 0);
-      __privateSet24(this, _captionsReady, false);
+      __privateAdd26(this, _captionsReady, void 0);
+      __privateSet25(this, _captionsReady, false);
     }
     static get observedAttributes() {
       return [
@@ -10718,22 +10959,22 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-playback-rate-menu.js
-  var __accessCheck26 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu.js
+  var __accessCheck27 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet25 = (obj, member, getter) => {
-    __accessCheck26(obj, member, "read from private field");
+  var __privateGet26 = (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 __privateMethod11 = (obj, member, method) => {
-    __accessCheck26(obj, member, "access private method");
+  var __privateMethod12 = (obj, member, method) => {
+    __accessCheck27(obj, member, "access private method");
     return method;
   };
   var _rates2;
@@ -10747,12 +10988,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     constructor() {
       super();
-      __privateAdd26(this, _render3);
-      __privateAdd26(this, _onChange3);
-      __privateAdd26(this, _rates2, new AttributeTokenList(this, Attributes14.RATES, {
+      __privateAdd27(this, _render3);
+      __privateAdd27(this, _onChange3);
+      __privateAdd27(this, _rates2, new AttributeTokenList(this, Attributes14.RATES, {
         defaultValue: DEFAULT_RATES
       }));
-      __privateMethod11(this, _render3, render_fn3).call(this);
+      __privateMethod12(this, _render3, render_fn3).call(this);
     }
     static get observedAttributes() {
       return [
@@ -10766,17 +11007,17 @@ svg, img, ::slotted(svg), ::slotted(img) {
       if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
         this.value = newValue;
       } else if (attrName === Attributes14.RATES && oldValue != newValue) {
-        __privateGet25(this, _rates2).value = newValue;
-        __privateMethod11(this, _render3, render_fn3).call(this);
+        __privateGet26(this, _rates2).value = newValue;
+        __privateMethod12(this, _render3, render_fn3).call(this);
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod11(this, _onChange3, onChange_fn3));
+      this.addEventListener("change", __privateMethod12(this, _onChange3, onChange_fn3));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod11(this, _onChange3, onChange_fn3));
+      this.removeEventListener("change", __privateMethod12(this, _onChange3, onChange_fn3));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -10793,15 +11034,15 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * Setting a value will accept an array of numbers.
      */
     get rates() {
-      return __privateGet25(this, _rates2);
+      return __privateGet26(this, _rates2);
     }
     set rates(value) {
       if (!value) {
-        __privateGet25(this, _rates2).value = "";
+        __privateGet26(this, _rates2).value = "";
       } else if (Array.isArray(value)) {
-        __privateGet25(this, _rates2).value = value.join(" ");
+        __privateGet26(this, _rates2).value = value.join(" ");
       }
-      __privateMethod11(this, _render3, render_fn3).call(this);
+      __privateMethod12(this, _render3, render_fn3).call(this);
     }
     /**
      * The current playback rate
@@ -10853,16 +11094,16 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-playback-rate-menu-button.js
-  var __accessCheck27 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu-button.js
+  var __accessCheck28 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet26 = (obj, member, getter) => {
-    __accessCheck27(obj, member, "read from private field");
+  var __privateGet27 = (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);
@@ -10895,7 +11136,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
         tooltipContent: tooltipLabels.PLAYBACK_RATE,
         ...options
       });
-      __privateAdd27(this, _rates3, new AttributeTokenList(this, Attributes15.RATES, {
+      __privateAdd28(this, _rates3, new AttributeTokenList(this, Attributes15.RATES, {
         defaultValue: DEFAULT_RATES2
       }));
       this.container = this.shadowRoot.querySelector('slot[name="icon"]');
@@ -10911,7 +11152,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
       if (attrName === Attributes15.RATES) {
-        __privateGet26(this, _rates3).value = newValue;
+        __privateGet27(this, _rates3).value = newValue;
       }
       if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
         const newPlaybackRate = newValue ? +newValue : Number.NaN;
@@ -10933,13 +11174,13 @@ svg, img, ::slotted(svg), ::slotted(img) {
      * Setting a value will accept an array of numbers.
      */
     get rates() {
-      return __privateGet26(this, _rates3);
+      return __privateGet27(this, _rates3);
     }
     set rates(value) {
       if (!value) {
-        __privateGet26(this, _rates3).value = "";
+        __privateGet27(this, _rates3).value = "";
       } else if (Array.isArray(value)) {
-        __privateGet26(this, _rates3).value = value.join(" ");
+        __privateGet27(this, _rates3).value = value.join(" ");
       }
     }
     /**
@@ -10964,27 +11205,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
     );
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-rendition-menu.js
-  var __accessCheck28 = (obj, member, msg) => {
+  // ../../node_modules/media-chrome/dist/menu/media-rendition-menu.js
+  var __accessCheck29 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet27 = (obj, member, getter) => {
-    __accessCheck28(obj, member, "read from private field");
+  var __privateGet28 = (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 __privateSet25 = (obj, member, value, setter) => {
-    __accessCheck28(obj, member, "write to private field");
+  var __privateSet26 = (obj, member, value, setter) => {
+    __accessCheck29(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return 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 _renditionList;
@@ -10996,17 +11237,18 @@ svg, img, ::slotted(svg), ::slotted(img) {
   var MediaRenditionMenu = class extends MediaChromeMenu {
     constructor() {
       super(...arguments);
-      __privateAdd28(this, _render4);
-      __privateAdd28(this, _onChange4);
-      __privateAdd28(this, _renditionList, []);
-      __privateAdd28(this, _prevState3, void 0);
+      __privateAdd29(this, _render4);
+      __privateAdd29(this, _onChange4);
+      __privateAdd29(this, _renditionList, []);
+      __privateAdd29(this, _prevState3, {});
     }
     static get observedAttributes() {
       return [
         ...super.observedAttributes,
         MediaUIAttributes.MEDIA_RENDITION_LIST,
         MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-        MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+        MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+        MediaUIAttributes.MEDIA_HEIGHT
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -11014,17 +11256,19 @@ svg, img, ::slotted(svg), ::slotted(img) {
       if (attrName === MediaUIAttributes.MEDIA_RENDITION_SELECTED && oldValue !== newValue) {
         this.value = newValue != null ? newValue : "auto";
       } else if (attrName === MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
-        __privateSet25(this, _renditionList, parseRenditionList(newValue));
-        __privateMethod12(this, _render4, render_fn4).call(this);
+        __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);
       }
     }
     connectedCallback() {
       super.connectedCallback();
-      this.addEventListener("change", __privateMethod12(this, _onChange4, onChange_fn4));
+      this.addEventListener("change", __privateMethod13(this, _onChange4, onChange_fn4));
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.removeEventListener("change", __privateMethod12(this, _onChange4, onChange_fn4));
+      this.removeEventListener("change", __privateMethod13(this, _onChange4, onChange_fn4));
     }
     /**
      * Returns the anchor element when it is a floating menu.
@@ -11037,11 +11281,11 @@ svg, img, ::slotted(svg), ::slotted(img) {
       );
     }
     get mediaRenditionList() {
-      return __privateGet27(this, _renditionList);
+      return __privateGet28(this, _renditionList);
     }
     set mediaRenditionList(list) {
-      __privateSet25(this, _renditionList, list);
-      __privateMethod12(this, _render4, render_fn4).call(this);
+      __privateSet26(this, _renditionList, list);
+      __privateMethod13(this, _render4, render_fn4).call(this);
     }
     /**
      * Get selected rendition id.
@@ -11052,17 +11296,27 @@ svg, img, ::slotted(svg), ::slotted(img) {
     set mediaRenditionSelected(id) {
       setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
     }
+    get mediaHeight() {
+      return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+    }
+    set mediaHeight(height) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+    }
   };
   _renditionList = /* @__PURE__ */ new WeakMap();
   _prevState3 = /* @__PURE__ */ new WeakMap();
   _render4 = /* @__PURE__ */ new WeakSet();
   render_fn4 = function() {
-    if (__privateGet27(this, _prevState3) === JSON.stringify(this.mediaRenditionList))
+    if (__privateGet28(this, _prevState3).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet28(this, _prevState3).mediaHeight === this.mediaHeight)
       return;
-    __privateSet25(this, _prevState3, JSON.stringify(this.mediaRenditionList));
+    __privateGet28(this, _prevState3).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
+    __privateGet28(this, _prevState3).mediaHeight = this.mediaHeight;
     const renditionList = this.mediaRenditionList.sort(
       (a, b) => b.height - a.height
     );
+    for (const rendition of renditionList) {
+      rendition.selected = rendition.id === this.mediaRenditionSelected;
+    }
     this.defaultSlot.textContent = "";
     const isAuto = !this.mediaRenditionSelected;
     for (const rendition of renditionList) {
@@ -11085,6 +11339,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       value: "auto",
       checked: isAuto
     });
+    const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : "Auto";
+    item.dataset.description = autoDescription;
     item.prepend(createIndicator(this, "checked-indicator"));
     this.defaultSlot.append(item);
   };
@@ -11106,7 +11362,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
     GlobalThis.customElements.define("media-rendition-menu", MediaRenditionMenu);
   }
 
-  // ../../node_modules/player.style/node_modules/media-chrome/dist/menu/media-rendition-menu-button.js
+  // ../../node_modules/media-chrome/dist/menu/media-rendition-menu-button.js
   var renditionIcon = (
     /*html*/
     `<svg aria-hidden="true" viewBox="0 0 24 24">
@@ -11128,7 +11384,8 @@ svg, img, ::slotted(svg), ::slotted(img) {
       return [
         ...super.observedAttributes,
         MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-        MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+        MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+        MediaUIAttributes.MEDIA_HEIGHT
       ];
     }
     constructor() {
@@ -11155,6 +11412,12 @@ svg, img, ::slotted(svg), ::slotted(img) {
     set mediaRenditionSelected(id) {
       setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
     }
+    get mediaHeight() {
+      return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+    }
+    set mediaHeight(height) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+    }
   };
   if (!GlobalThis.customElements.get("media-rendition-menu-button")) {
     GlobalThis.customElements.define(
@@ -11165,9 +11428,9 @@ svg, img, ::slotted(svg), ::slotted(img) {
 
   // ../../node_modules/player.style/themes/microvideo/dist/media-theme.js
   var _a2, _b;
-  var template18 = (_b = (_a2 = GlobalThis.document) == null ? void 0 : _a2.createElement) == null ? void 0 : _b.call(_a2, "template");
-  if (template18) {
-    template18.innerHTML = /*html*/
+  var template17 = (_b = (_a2 = GlobalThis.document) == null ? void 0 : _a2.createElement) == null ? void 0 : _b.call(_a2, "template");
+  if (template17) {
+    template17.innerHTML = /*html*/
     `
     <style>
       :host {
@@ -11595,6 +11858,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
       <slot name="media" slot="media"></slot>
       <slot name="poster" slot="poster"></slot>
       <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
+      <media-error-dialog slot="dialog"></media-error-dialog>
 
       <template if="streamtype == 'on-demand'">
 
@@ -11672,7 +11936,7 @@ svg, img, ::slotted(svg), ::slotted(img) {
   }
   var MediaThemeMicrovideoElement = class extends MediaThemeElement {
   };
-  __publicField(MediaThemeMicrovideoElement, "template", template18);
+  __publicField(MediaThemeMicrovideoElement, "template", template17);
   if (GlobalThis.customElements && !GlobalThis.customElements.get("media-theme-microvideo")) {
     GlobalThis.customElements.define("media-theme-microvideo", MediaThemeMicrovideoElement);
   }