@mux/mux-player 3.1.0 → 3.2.0

package/dist/themes/minimal/index.mjs

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// ../../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",
@@ -39,42 +39,47 @@ var MediaStateReceiverAttributes = {
 };
 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
@@ -154,7 +159,28 @@ var WebkitPresentationModes = {
   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",
@@ -214,7 +240,7 @@ var labels_default = {
   ...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(" ");
 }
@@ -269,7 +295,7 @@ function isNumericString(str) {
 }
 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",
@@ -347,7 +373,7 @@ var emptyTimeRanges = Object.freeze({
   }
 });
 
-// ../../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() {
   }
@@ -384,12 +410,7 @@ var documentShim = {
   },
   removeEventListener() {
   },
-  /**
-   *
-   * @param {Event} event
-   * @returns {boolean}
-   */
-  dispatchEvent(event) {
+  dispatchEvent(_event) {
     return false;
   }
 };
@@ -418,26 +439,13 @@ var globalThisShim = {
     }
   },
   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() {
   },
@@ -449,9 +457,6 @@ var globalThisShim = {
       return "";
     }
   },
-  /**
-   * @param {string} media
-   */
   matchMedia(media) {
     return {
       matches: false,
@@ -464,7 +469,7 @@ var isShimmed = Object.keys(globalThisShim).every((key) => key in globalThis);
 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);
@@ -493,7 +498,14 @@ function unobserveResize(element, callback) {
   }
 }
 
-// ../../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");
@@ -558,17 +570,17 @@ function getDocumentOrShadowRoot(node) {
   }
   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;
@@ -595,12 +607,12 @@ function getOrInsertCSSRule(styleParent, selectorText) {
   return insertCSSRule(styleParent, selectorText);
 }
 function getCSSRule(styleParent, predicate) {
-  var _a3;
+  var _a3, _b2;
   let style;
-  for (style of styleParent.querySelectorAll("style")) {
+  for (style of (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : []) {
     let cssRules;
     try {
-      cssRules = (_a3 = style.sheet) == null ? void 0 : _a3.cssRules;
+      cssRules = (_b2 = style.sheet) == null ? void 0 : _b2.cssRules;
     } catch {
       continue;
     }
@@ -612,7 +624,7 @@ function getCSSRule(styleParent, predicate) {
 }
 function insertCSSRule(styleParent, selectorText) {
   var _a3, _b2;
-  const styles = (_a3 = styleParent.querySelectorAll("style")) != null ? _a3 : [];
+  const styles = (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : [];
   const style = styles == null ? void 0 : styles[styles.length - 1];
   if (!(style == null ? void 0 : style.sheet)) {
     console.warn(
@@ -682,7 +694,7 @@ function setStringAttr(el, attrName, value) {
   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);
@@ -842,7 +854,7 @@ if (!GlobalThis.customElements.get("media-gesture-receiver")) {
   );
 }
 
-// ../../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);
@@ -958,7 +970,7 @@ template2.innerHTML = /*html*/
 * 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;
     }
 
@@ -1005,14 +1017,14 @@ template2.innerHTML = /*html*/
 
     ${/* 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;
     }
@@ -1031,12 +1043,14 @@ template2.innerHTML = /*html*/
       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>
 
@@ -1053,6 +1067,7 @@ template2.innerHTML = /*html*/
 ""}
     <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";
@@ -1186,36 +1201,27 @@ var MediaContainer = class extends GlobalThis.HTMLElement {
       (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;
@@ -1249,15 +1255,10 @@ var MediaContainer = class extends GlobalThis.HTMLElement {
   }
   /**
    * @abstract
-   * @param {HTMLMediaElement} media
    */
-  mediaSetCallback(media) {
+  mediaSetCallback(_media) {
   }
-  // eslint-disable-line
-  /**
-   * @param {HTMLMediaElement} media
-   */
-  mediaUnsetCallback(media) {
+  mediaUnsetCallback(_media) {
     __privateSet2(this, _currentMedia, null);
   }
   handleEvent(event) {
@@ -1364,7 +1365,7 @@ if (!GlobalThis.customElements.get("media-container")) {
   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);
@@ -1477,7 +1478,7 @@ tokens_get = function() {
   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(":");
@@ -1551,7 +1552,7 @@ var areSubsOn = (el) => {
   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;
@@ -1624,7 +1625,7 @@ var isFullscreenEnabled = (stateOwners) => {
   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;
@@ -1638,7 +1639,25 @@ var hasVolumeSupportAsync = async (mediaEl = getTestMediaEl()) => {
     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(
@@ -1657,7 +1676,7 @@ var pipSupported = hasPipSupport();
 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(
@@ -1715,6 +1734,8 @@ var toggleSubtitleTracks = (stateOwners, force) => {
 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))
@@ -1740,7 +1761,7 @@ var areArraysEq = (xs, ys) => {
   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) => {
@@ -1765,6 +1786,45 @@ var prepareStateOwners = async (...stateOwners) => {
   );
 };
 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;
@@ -1910,7 +1970,7 @@ var stateMediator = {
     },
     set(value, stateOwners) {
       const { media } = stateOwners;
-      if (!media || media.readyState === 0)
+      if (!media || !isValidNumber(value))
         return;
       media.currentTime = value;
     },
@@ -2117,15 +2177,21 @@ var stateMediator = {
     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);
         };
       }
     ]
@@ -2499,7 +2565,7 @@ var stateMediator = {
   }
 };
 
-// ../../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)
@@ -2604,7 +2670,7 @@ var requestMap = {
     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);
   },
@@ -2689,7 +2755,7 @@ var requestMap = {
   }
 };
 
-// ../../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,
@@ -2927,7 +2993,7 @@ var createMediaStore = ({
     // "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;
       }
@@ -2962,7 +3028,7 @@ var createMediaStore = ({
 };
 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);
@@ -3417,15 +3483,15 @@ var MEDIA_UI_ATTRIBUTE_NAMES2 = Object.values(MediaUIAttributes);
 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)
   );
 };
@@ -3617,7 +3683,7 @@ if (!GlobalThis.customElements.get("media-controller")) {
   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);
@@ -3636,10 +3702,17 @@ var __privateSet5 = (obj, member, value, setter) => {
   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"
 };
@@ -3703,13 +3776,19 @@ template3.innerHTML = /*html*/
   }
 
   media-tooltip {
+    ${/** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */
+""}
+    max-width: 0;
+    overflow-x: clip;
     opacity: 0;
-    transition: opacity .3s;
+    transition: opacity .3s, max-width 0s 9s;
   }
 
   :host(:hover) media-tooltip,
   :host(:focus-visible) media-tooltip {
+    max-width: 100vw;
     opacity: 1;
+    transition: opacity .3s;
   }
 
   :host([notooltip]) slot[name="tooltip"] {
@@ -3718,7 +3797,7 @@ template3.innerHTML = /*html*/
 </style>
 
 <slot name="tooltip">
-  <media-tooltip>
+  <media-tooltip part="tooltip" aria-hidden="true">
     <slot name="tooltip-content"></slot>
   </media-tooltip>
 </slot>
@@ -3727,6 +3806,7 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
   constructor(options = {}) {
     var _a3;
     super();
+    __privateAdd5(this, _setupTooltip);
     __privateAdd5(this, _mediaController2, void 0);
     this.preventClick = false;
     this.tooltipEl = null;
@@ -3735,7 +3815,11 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       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;
@@ -3770,8 +3854,8 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       }
       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 [
@@ -3792,7 +3876,7 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
     this.tabIndex = -1;
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
-    var _a3, _b2, _c, _d, _e, _f, _g;
+    var _a3, _b2, _c, _d, _e;
     if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
       if (oldValue) {
         (_b2 = (_a3 = __privateGet5(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
@@ -3811,9 +3895,7 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
     } else if (attrName === Attributes3.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
       this.tooltipEl.placement = newValue;
     }
-    if (this.tooltipEl) {
-      (_g = (_f = this.tooltipEl) == null ? void 0 : _f.updateXOffset) == null ? void 0 : _g.call(_f);
-    }
+    __privateGet5(this, _positionTooltip).call(this);
   }
   connectedCallback() {
     var _a3, _b2, _c;
@@ -3838,17 +3920,16 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       );
       (_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", " "];
@@ -3869,25 +3950,27 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
   handleClick(e) {
   }
   // eslint-disable-line
-  // Called when we know the tooltip is ready / defined
-  setupTooltip() {
-    this.addEventListener("mouseenter", this.tooltipEl.updateXOffset);
-    this.addEventListener("focus", this.tooltipEl.updateXOffset);
-    this.addEventListener("click", __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>
@@ -3982,7 +4065,7 @@ if (!GlobalThis.customElements.get("media-airplay-button")) {
   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>`;
@@ -4102,7 +4185,7 @@ if (!GlobalThis.customElements.get("media-captions-button")) {
   );
 }
 
-// ../../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");
@@ -4191,7 +4274,7 @@ if (!GlobalThis.customElements.get("media-cast-button")) {
   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);
@@ -4210,12 +4293,15 @@ var __privateSet6 = (obj, member, value, setter) => {
   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;
@@ -4226,102 +4312,124 @@ var _handleFocusOut;
 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([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>
-`;
+      :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;
+      }
+
+      #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"]'
     );
@@ -4331,24 +4439,41 @@ var MediaChromeDialog = class extends GlobalThis.HTMLElement {
     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();
@@ -4356,8 +4481,8 @@ handleFocusOut_fn = function(event) {
   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;
     }
   }
 };
@@ -4382,15 +4507,16 @@ handleKeyDown_fn = function(event) {
     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);
@@ -4409,7 +4535,7 @@ var __privateSet7 = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var __privateMethod4 = (obj, member, method) => {
+var __privateMethod5 = (obj, member, method) => {
   __accessCheck7(obj, member, "access private method");
   return method;
 };
@@ -4438,8 +4564,8 @@ var _handlePointerLeave;
 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 {
@@ -4461,8 +4587,6 @@ template5.innerHTML = /*html*/
       cursor: pointer;
       pointer-events: auto;
       touch-action: none; ${/* Prevent scrolling when dragging on mobile. */
-""}
-      z-index: 1; ${/* Apply z-index to overlap buttons below. */
 ""}
     }
 
@@ -4566,32 +4690,22 @@ template5.innerHTML = /*html*/
       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%;
@@ -4643,7 +4757,6 @@ template5.innerHTML = /*html*/
       height: var(--media-range-segment-hover-height, 7px);
     }
 
-    #background,
     #track {
       clip-path: url(#segments-clipping);
     }
@@ -4675,14 +4788,12 @@ template5.innerHTML = /*html*/
   <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">
@@ -4726,7 +4837,7 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     });
     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"));
@@ -4755,10 +4866,10 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     } 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);
       }
     }
   }
@@ -4772,6 +4883,10 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     __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
     );
@@ -4784,12 +4899,12 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     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));
@@ -4815,10 +4930,6 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     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,
@@ -4861,22 +4972,22 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
   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;
     }
   }
@@ -4939,7 +5050,7 @@ _handlePointerEnter = /* @__PURE__ */ new WeakSet();
 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);
 };
@@ -4966,7 +5077,7 @@ handlePointerMove_fn2 = function(evt) {
     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);
@@ -4979,7 +5090,7 @@ if (!GlobalThis.customElements.get("media-chrome-range")) {
   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);
@@ -4999,8 +5110,8 @@ var __privateSet8 = (obj, member, value, setter) => {
   return value;
 };
 var _mediaController4;
-var template6 = Document2.createElement("template");
-template6.innerHTML = /*html*/
+var template5 = Document2.createElement("template");
+template5.innerHTML = /*html*/
 `
   <style>
     :host {
@@ -5021,6 +5132,10 @@ template6.innerHTML = /*html*/
     ::slotted(media-clip-selector) {
       flex-grow: 1;
     }
+
+    ::slotted([role="menu"]) {
+      position: absolute;
+    }
   </style>
 
   <slot></slot>
@@ -5031,7 +5146,7 @@ var MediaControlBar = class extends GlobalThis.HTMLElement {
     __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() {
@@ -5073,7 +5188,7 @@ if (!GlobalThis.customElements.get("media-control-bar")) {
   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);
@@ -5093,8 +5208,8 @@ var __privateSet9 = (obj, member, value, setter) => {
   return value;
 };
 var _mediaController5;
-var template7 = Document2.createElement("template");
-template7.innerHTML = /*html*/
+var template6 = Document2.createElement("template");
+template6.innerHTML = /*html*/
 `
   <style>
     :host {
@@ -5142,7 +5257,7 @@ var MediaTextDisplay = class extends GlobalThis.HTMLElement {
     __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() {
@@ -5188,9 +5303,8 @@ _mediaController5 = /* @__PURE__ */ new WeakMap();
 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);
@@ -5244,23 +5358,137 @@ if (!GlobalThis.customElements.get("media-duration-display")) {
   );
 }
 
-// ../../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' */
-""}
+// ../../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;
     }
@@ -5340,7 +5568,7 @@ if (!GlobalThis.customElements.get("media-fullscreen-button")) {
   );
 }
 
-// ../../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>';
@@ -5441,22 +5669,22 @@ if (!GlobalThis.customElements.get("media-live-button")) {
   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;
 };
@@ -5466,7 +5694,7 @@ var Attributes5 = {
   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">
@@ -5481,7 +5709,7 @@ var loadingIndicatorIcon = `
   </path>
 </svg>
 `;
-template8.innerHTML = /*html*/
+template7.innerHTML = /*html*/
 `
 <style>
 :host {
@@ -5533,11 +5761,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);
     }
   }
@@ -5555,12 +5783,12 @@ var MediaLoadingIndicator = class extends GlobalThis.HTMLElement {
       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);
       }
     }
   }
@@ -5570,25 +5798,25 @@ var MediaLoadingIndicator = class extends GlobalThis.HTMLElement {
       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",
@@ -5623,7 +5851,7 @@ if (!GlobalThis.customElements.get("media-loading-indicator")) {
   );
 }
 
-// ../../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"/>
@@ -5719,7 +5947,7 @@ if (!GlobalThis.customElements.get("media-mute-button")) {
   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>`;
@@ -5809,16 +6037,16 @@ if (!GlobalThis.customElements.get("media-pip-button")) {
   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);
@@ -5847,7 +6075,7 @@ var MediaPlaybackRateButton = class extends MediaChromeButton {
       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"]');
@@ -5863,7 +6091,7 @@ var MediaPlaybackRateButton = class extends MediaChromeButton {
   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;
@@ -5877,13 +6105,13 @@ var MediaPlaybackRateButton = class extends MediaChromeButton {
    * 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(" ");
     }
   }
   /**
@@ -5920,7 +6148,7 @@ if (!GlobalThis.customElements.get("media-playback-rate-button")) {
   );
 }
 
-// ../../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>`;
@@ -5999,13 +6227,13 @@ if (!GlobalThis.customElements.get("media-play-button")) {
   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 {
@@ -6043,7 +6271,7 @@ var MediaPosterImage = class extends GlobalThis.HTMLElement {
     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");
   }
@@ -6086,31 +6314,31 @@ if (!GlobalThis.customElements.get("media-poster-image")) {
   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 [
@@ -6122,7 +6350,7 @@ var MediaPreviewChapterDisplay = class extends media_text_display_default {
     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 {
@@ -6149,28 +6377,28 @@ if (!GlobalThis.customElements.get("media-preview-chapter-display")) {
   );
 }
 
-// ../../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 {
@@ -6189,10 +6417,10 @@ template10.innerHTML = /*html*/
 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() {
@@ -6208,19 +6436,19 @@ var MediaPreviewThumbnail = class extends GlobalThis.HTMLElement {
       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;
@@ -6232,12 +6460,12 @@ var MediaPreviewThumbnail = class extends GlobalThis.HTMLElement {
     }
     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);
       }
     }
   }
@@ -6313,22 +6541,22 @@ if (!GlobalThis.customElements.get("media-preview-thumbnail")) {
   );
 }
 
-// ../../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;
 };
@@ -6336,9 +6564,9 @@ var _slot3;
 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];
@@ -6346,7 +6574,7 @@ var MediaPreviewTimeDisplay = class extends MediaTextDisplay {
   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));
     }
   }
   /**
@@ -6367,7 +6595,7 @@ if (!GlobalThis.customElements.get("media-preview-time-display")) {
   );
 }
 
-// ../../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"
 };
@@ -6457,7 +6685,7 @@ if (!GlobalThis.customElements.get("media-seek-backward-button")) {
   );
 }
 
-// ../../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"
 };
@@ -6547,22 +6775,22 @@ if (!GlobalThis.customElements.get("media-seek-forward-button")) {
   );
 }
 
-// ../../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;
 };
@@ -6626,9 +6854,9 @@ var updateAriaValueText = (el) => {
 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"];
@@ -6766,8 +6994,8 @@ var MediaTimeDisplay = class extends MediaTextDisplay {
   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;
     }
   }
 };
@@ -6776,31 +7004,31 @@ if (!GlobalThis.customElements.get("media-time-display")) {
   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;
@@ -6815,60 +7043,60 @@ var _id;
 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;
   }
@@ -6884,27 +7112,27 @@ _lastRangeIncrease = /* @__PURE__ */ new WeakMap();
 _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;
@@ -6941,8 +7169,8 @@ var updateAriaValueText2 = (el) => {
   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 {
@@ -6960,8 +7188,11 @@ prevent the horizontal overflow as well. */
       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,
@@ -7182,41 +7413,45 @@ var calcTimeFromRangeValue = (el, value = el.range.valueAsNumber) => {
 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 [
@@ -7238,45 +7473,45 @@ var MediaTimeRange = class extends MediaChromeRange {
     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)
       }))
@@ -7424,7 +7659,7 @@ var MediaTimeRange = class extends MediaChromeRange {
     } else {
       relativeBufferedEnd = 1;
     }
-    const { style } = getOrInsertCSSRule(this.shadowRoot, "#highlight");
+    const { style } = getOrInsertCSSRule(this.shadowRoot, "#buffered");
     style.setProperty("width", `${relativeBufferedEnd * 100}%`);
   }
   updateCurrentBox() {
@@ -7441,9 +7676,9 @@ var MediaTimeRange = class extends MediaChromeRange {
       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}`);
@@ -7454,18 +7689,18 @@ var MediaTimeRange = class extends MediaChromeRange {
     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;
     }
@@ -7482,10 +7717,10 @@ _boxPaddingRight = /* @__PURE__ */ new WeakMap();
 _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();
@@ -7530,23 +7765,23 @@ _getBoxShiftPosition = /* @__PURE__ */ new WeakSet();
 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;
@@ -7560,20 +7795,20 @@ handlePointerMove_fn3 = function(evt) {
     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) {
@@ -7587,7 +7822,7 @@ previewRequest_fn = function(detail) {
 };
 _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, {
@@ -7601,13 +7836,13 @@ if (!GlobalThis.customElements.get("media-time-range")) {
   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 {
@@ -7724,6 +7959,8 @@ var MediaTooltip = class extends GlobalThis.HTMLElement {
     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");
@@ -7759,7 +7996,7 @@ var MediaTooltip = class extends GlobalThis.HTMLElement {
     };
     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")) {
@@ -7795,14 +8032,14 @@ if (!GlobalThis.customElements.get("media-tooltip")) {
   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 [
@@ -7837,7 +8074,7 @@ var MediaVolumeRange = class extends MediaChromeRange {
       this.range.valueAsNumber = toVolume(this);
       this.range.setAttribute(
         "aria-valuetext",
-        formatAsPercentString(this.range)
+        formatAsPercentString(this.range.valueAsNumber)
       );
       this.updateBar();
     }
@@ -7874,22 +8111,22 @@ if (!GlobalThis.customElements.get("media-volume-range")) {
   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;
 };
@@ -7926,19 +8163,19 @@ var defaultProcessor = {
   }
 };
 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();
@@ -8027,87 +8264,87 @@ var Part = class {
 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");
@@ -8124,26 +8361,26 @@ list_get = function() {
 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);
@@ -8154,9 +8391,9 @@ var ChildNodePart = class extends Part {
     );
     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
     ));
@@ -8165,14 +8402,14 @@ var ChildNodePart = class extends Part {
 _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;
   }
 };
@@ -8205,13 +8442,13 @@ function swapdom(parent, a, b, end = null) {
   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;
   }
 };
@@ -8432,27 +8669,27 @@ function tokenize2(str, parsers) {
   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;
@@ -8502,11 +8739,11 @@ prependTemplate.innerHTML = /*html*/
 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 {
@@ -8541,7 +8778,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       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() {
@@ -8549,16 +8786,16 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   }
   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");
@@ -8567,7 +8804,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       ...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) {
@@ -8583,15 +8820,15 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   }
   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,
@@ -8608,9 +8845,11 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
   render() {
     var _a3;
     (_a3 = this.renderer) == null ? void 0 : _a3.update(this.props);
-    const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
-    if (style.visibility === "hidden") {
-      style.removeProperty("visibility");
+    if (this.renderRoot.isConnected) {
+      const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
+      if (style.visibility === "hidden") {
+        style.removeProperty("visibility");
+      }
     }
   }
 };
@@ -8629,22 +8868,22 @@ _updateTemplate = /* @__PURE__ */ new WeakSet();
 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);
   }
@@ -8675,7 +8914,7 @@ if (!GlobalThis.customElements.get("media-theme")) {
   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,
@@ -8700,8 +8939,9 @@ function getElementRects({
   };
 }
 function getRectRelativeToOffsetParent(element, offsetParent) {
+  var _a3;
   const rect = element.getBoundingClientRect();
-  const offsetRect = offsetParent.getBoundingClientRect();
+  const offsetRect = (_a3 = offsetParent == null ? void 0 : offsetParent.getBoundingClientRect()) != null ? _a3 : { x: 0, y: 0 };
   return {
     x: rect.x - offsetRect.x,
     y: rect.y - offsetRect.y,
@@ -8750,7 +8990,7 @@ function getSideAxis(placement) {
   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.
@@ -8772,37 +9012,36 @@ var ToggleEvent = class extends Event {
   }
 };
 
-// ../../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;
@@ -8876,8 +9115,8 @@ function createIndicator(el, name) {
   }
   return "";
 }
-var template13 = Document2.createElement("template");
-template13.innerHTML = /*html*/
+var template12 = Document2.createElement("template");
+template12.innerHTML = /*html*/
 `
   <style>
     :host {
@@ -8910,6 +9149,7 @@ template13.innerHTML = /*html*/
 ""}
       min-height: 0;
       position: relative;
+      bottom: var(--_menu-bottom);
       box-sizing: border-box;
     }
 
@@ -8949,27 +9189,30 @@ template13.innerHTML = /*html*/
       transform: translate(-100%, 0);
     }
 
-    slot[name="header"] {
-      display: flex;
-      padding: .4em .7em;
-      border-bottom: 1px solid rgb(255 255 255 / .25);
-      cursor: default;
-    }
-
-    slot[name="header"][hidden] {
-      display: none;
-    }
-
-    button[part~="back"] {
+    button {
       background: none;
       color: inherit;
       border: none;
       padding: 0;
       font: inherit;
-      cursor: pointer;
       outline: inherit;
       display: inline-flex;
       align-items: center;
+    }
+
+    slot[name="header"][hidden] {
+      display: none;
+    }
+
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
+      padding: .4em .7em;
+      border-bottom: 1px solid rgb(255 255 255 / .25);
+      cursor: default;
+    }
+
+    slot[name="header"] > button[part~="back"],
+    slot[name="header"]::slotted(button[part~="back"]) {
       cursor: pointer;
     }
 
@@ -9005,7 +9248,8 @@ template13.innerHTML = /*html*/
   </style>
   <style id="layout-row" media="width:0">
 
-    slot[name="header"] {
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
       padding: .4em .5em;
     }
 
@@ -9053,33 +9297,32 @@ var Attributes12 = {
 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)) {
@@ -9091,14 +9334,14 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
           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" });
@@ -9110,8 +9353,8 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       "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 [
@@ -9122,7 +9365,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
     ];
   }
-  static formatMenuItemText(text) {
+  static formatMenuItemText(text, _data) {
     return text;
   }
   enable() {
@@ -9142,58 +9385,59 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   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({
@@ -9204,12 +9448,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
       );
     } 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) {
@@ -9218,7 +9462,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
         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) {
@@ -9260,12 +9504,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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;
     }
@@ -9276,12 +9520,12 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   }
   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;
     }
   }
@@ -9301,7 +9545,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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") {
@@ -9319,18 +9563,17 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
     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;
@@ -9346,7 +9589,7 @@ handleSlotChange_fn = function(event) {
     header.hidden = slot.assignedNodes().length === 0;
   }
   if (!slot.name) {
-    __privateGet21(this, _handleMenuItems).call(this);
+    __privateGet22(this, _handleMenuItems).call(this);
   }
 };
 _handleMenuItems = /* @__PURE__ */ new WeakMap();
@@ -9359,7 +9602,7 @@ updateLayoutStyle_fn = function() {
 };
 _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;
   }
@@ -9367,23 +9610,22 @@ handleInvoke_fn2 = function(event) {
 _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)
@@ -9396,19 +9638,17 @@ positionMenu_fn = function(animate, menuWidth) {
   menuWidth != null ? menuWidth : menuWidth = this.offsetWidth;
   const bounds = getBoundsElement(this);
   const boundsRect = bounds.getBoundingClientRect();
-  const anchorRect = this.anchorElement.getBoundingClientRect();
   const right = boundsRect.width - x - menuWidth;
   const bottom = boundsRect.height - y - this.offsetHeight;
-  const maxHeight = boundsRect.height - anchorRect.height;
-  const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
-  if (!animate) {
-    style.setProperty("--media-menu-transition-in", "none");
-  }
+  const { style } = __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) {
@@ -9418,7 +9658,7 @@ resizeMenu_fn = function(animate) {
   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");
   }
@@ -9430,11 +9670,11 @@ resizeMenu_fn = function(animate) {
     );
     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");
 };
@@ -9442,15 +9682,15 @@ _handleClick = /* @__PURE__ */ new WeakSet();
 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();
@@ -9460,14 +9700,14 @@ backButtonElement_get = function() {
     'slot[name="header"]'
   );
   return (_a3 = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a3.find(
-    (el) => el.part.contains("back") && el.part.contains("button")
+    (el) => el.matches('button[part~="back"]')
   );
 };
 _handleToggle = /* @__PURE__ */ new WeakSet();
 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]')
   );
@@ -9483,7 +9723,7 @@ handleToggle_fn = function(event) {
   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() {
@@ -9495,10 +9735,10 @@ _handleFocusOut2 = /* @__PURE__ */ new WeakSet();
 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;
     }
   }
@@ -9516,7 +9756,7 @@ handleKeyDown_fn2 = function(event) {
   event.preventDefault();
   event.stopPropagation();
   if (key === "Tab") {
-    if (__privateGet21(this, _isPopover)) {
+    if (__privateGet22(this, _isPopover)) {
       this.hidden = true;
       return;
     }
@@ -9527,8 +9767,8 @@ handleKeyDown_fn2 = function(event) {
     }
     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 === " ") {
@@ -9572,7 +9812,7 @@ selectItem_fn = function(item, toggle) {
     );
   }
 };
-MediaChromeMenu.template = template13;
+MediaChromeMenu.template = template12;
 function isMenuItem(element) {
   return ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
     element == null ? void 0 : element.role
@@ -9586,27 +9826,27 @@ if (!GlobalThis.customElements.get("media-chrome-menu")) {
   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;
@@ -9624,8 +9864,8 @@ var _handleKeyDown3;
 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 {
@@ -9754,21 +9994,22 @@ var Attributes13 = {
 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);
@@ -9806,21 +10047,21 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
   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;
@@ -9837,13 +10078,13 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
       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");
@@ -9901,7 +10142,7 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
   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");
@@ -9937,9 +10178,9 @@ handleSlotChange_fn2 = function(event) {
   }
   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);
     }
   }
 };
@@ -9947,35 +10188,35 @@ _submenuConnected = /* @__PURE__ */ new WeakSet();
 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);
@@ -9984,15 +10225,15 @@ _handleKeyDown3 = /* @__PURE__ */ new WeakSet();
 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();
@@ -10003,7 +10244,7 @@ reset_fn = function() {
   }
   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";
 }
@@ -10024,9 +10265,9 @@ if (!GlobalThis.customElements.get("media-chrome-menu-item")) {
   );
 }
 
-// ../../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 {
@@ -10034,7 +10275,7 @@ template15.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
         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;
     }
@@ -10066,15 +10307,15 @@ var MediaSettingsMenu = class extends MediaChromeMenu {
     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"]) {
@@ -10086,8 +10327,8 @@ template16.innerHTML = MediaChromeMenuItem.template.innerHTML + /*html*/
     }
   </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"/>
@@ -10096,7 +10337,7 @@ if ((_a = template16.content) == null ? void 0 : _a.querySelector) {
 }
 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",
@@ -10104,7 +10345,7 @@ if (!GlobalThis.customElements.get("media-settings-menu-item")) {
   );
 }
 
-// ../../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();
@@ -10145,7 +10386,7 @@ if (!GlobalThis.customElements.get("media-chrome-menu-button")) {
   );
 }
 
-// ../../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*/
 `
@@ -10188,27 +10429,27 @@ if (!GlobalThis.customElements.get("media-settings-menu-button")) {
   );
 }
 
-// ../../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;
@@ -10220,10 +10461,10 @@ var onChange_fn;
 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 [
@@ -10238,17 +10479,17 @@ var MediaAudioTrackMenu = class extends MediaChromeMenu {
     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.
@@ -10262,11 +10503,11 @@ var MediaAudioTrackMenu = class extends MediaChromeMenu {
     );
   }
   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.
@@ -10283,9 +10524,9 @@ _audioTrackList = /* @__PURE__ */ new WeakMap();
 _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) {
@@ -10321,7 +10562,7 @@ if (!GlobalThis.customElements.get("media-audio-track-menu")) {
   );
 }
 
-// ../../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">
@@ -10386,27 +10627,27 @@ if (!GlobalThis.customElements.get("media-audio-track-menu-button")) {
   );
 }
 
-// ../../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;
@@ -10421,16 +10662,16 @@ var ccIcon = (
     <path d="M22.83 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
   </svg>`
 );
-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 [
@@ -10442,18 +10683,18 @@ var MediaCaptionsMenu = class extends MediaChromeMenu {
   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.
@@ -10491,9 +10732,9 @@ _prevState2 = /* @__PURE__ */ new WeakMap();
 _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({
@@ -10551,7 +10792,7 @@ onChange_fn2 = function() {
   );
   this.dispatchEvent(event);
 };
-MediaCaptionsMenu.template = template17;
+MediaCaptionsMenu.template = template16;
 var getSubtitlesListAttr2 = (el, attrName) => {
   const attrVal = el.getAttribute(attrName);
   return attrVal ? parseTextTracksStr(attrVal) : [];
@@ -10571,18 +10812,18 @@ if (!GlobalThis.customElements.get("media-captions-menu")) {
   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;
 };
@@ -10623,8 +10864,8 @@ var updateAriaChecked2 = (el) => {
 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 [
@@ -10701,22 +10942,22 @@ if (!GlobalThis.customElements.get("media-captions-menu-button")) {
   );
 }
 
-// ../../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;
@@ -10730,12 +10971,12 @@ var Attributes14 = {
 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 [
@@ -10749,17 +10990,17 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     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.
@@ -10776,15 +11017,15 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
    * 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
@@ -10836,16 +11077,16 @@ if (!GlobalThis.customElements.get("media-playback-rate-menu")) {
   );
 }
 
-// ../../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);
@@ -10878,7 +11119,7 @@ var MediaPlaybackRateMenuButton = class extends MediaChromeMenuButton {
       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"]');
@@ -10894,7 +11135,7 @@ var MediaPlaybackRateMenuButton = class extends MediaChromeMenuButton {
   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;
@@ -10916,13 +11157,13 @@ var MediaPlaybackRateMenuButton = class extends MediaChromeMenuButton {
    * 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(" ");
     }
   }
   /**
@@ -10947,27 +11188,27 @@ if (!GlobalThis.customElements.get("media-playback-rate-menu-button")) {
   );
 }
 
-// ../../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;
@@ -10979,17 +11220,18 @@ var onChange_fn4;
 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) {
@@ -10997,17 +11239,19 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
     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.
@@ -11020,11 +11264,11 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
     );
   }
   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.
@@ -11035,17 +11279,27 @@ var MediaRenditionMenu = class extends MediaChromeMenu {
   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) {
@@ -11068,6 +11322,8 @@ render_fn4 = function() {
     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);
 };
@@ -11089,7 +11345,7 @@ if (!GlobalThis.customElements.get("media-rendition-menu")) {
   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">
@@ -11111,7 +11367,8 @@ var MediaRenditionMenuButton = class extends MediaChromeMenuButton {
     return [
       ...super.observedAttributes,
       MediaUIAttributes.MEDIA_RENDITION_SELECTED,
-      MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE
+      MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+      MediaUIAttributes.MEDIA_HEIGHT
     ];
   }
   constructor() {
@@ -11138,6 +11395,12 @@ var MediaRenditionMenuButton = class extends MediaChromeMenuButton {
   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(
@@ -11148,9 +11411,9 @@ if (!GlobalThis.customElements.get("media-rendition-menu-button")) {
 
 // ../../node_modules/player.style/themes/minimal/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 {
@@ -11418,6 +11681,7 @@ if (template18) {
       <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="title">
         <div slot="top-chrome">
@@ -11472,7 +11736,7 @@ if (template18) {
 }
 var MediaThemeMinimalElement = class extends MediaThemeElement {
 };
-__publicField(MediaThemeMinimalElement, "template", template18);
+__publicField(MediaThemeMinimalElement, "template", template17);
 if (GlobalThis.customElements && !GlobalThis.customElements.get("media-theme-minimal")) {
   GlobalThis.customElements.define("media-theme-minimal", MediaThemeMinimalElement);
 }