@mux/mux-player 3.14.1-canary.2 → 3.14.1

package/dist/themes/microvideo/index.js

@@ -230,6 +230,16 @@ var mediaThemeMicrovideo = (() => {
     return !isNaN(str) && !isNaN(parseFloat(str));
   }
   var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+  var htmlEscapes = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  function escapeHTML(value) {
+    return String(value).replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+  }
 
   // ../../node_modules/media-chrome/dist/lang/en.js
   var En = {
@@ -1102,7 +1112,11 @@ var mediaThemeMicrovideo = (() => {
 
       ${/* ::slotted([slot=poster]) doesn't work for slot fallback content so hide parent slot instead */
       ""}
-      :host(:not([${Attributes.AUDIO}])[${MediaUIAttributes.MEDIA_HAS_PLAYED}]) slot[name=poster] {
+      ${/* Hide the poster once playback started: played, or moved off 0 (e.g. seeked while paused).
+      * The current time check only applies to on-demand media, since live streams start off 0. */
+      ""}
+      :host(:not([${Attributes.AUDIO}])[${MediaUIAttributes.MEDIA_HAS_PLAYED}]) slot[name=poster],
+      :host(:not([${Attributes.AUDIO}])[${MediaUIAttributes.MEDIA_STREAM_TYPE}="${StreamTypes.ON_DEMAND}"][${MediaUIAttributes.MEDIA_CURRENT_TIME}]:not([${MediaUIAttributes.MEDIA_CURRENT_TIME}="0"])) slot[name=poster] {
         display: none;
       }
 
@@ -1507,7 +1521,7 @@ var mediaThemeMicrovideo = (() => {
     GlobalThis.customElements.define("media-container", MediaContainer);
   }
 
-  // ../../node_modules/media-chrome/dist/utils/attribute-token-list.js
+  // ../../node_modules/media-chrome/dist/media-chrome-dialog.js
   var __accessCheck3 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -1526,152 +1540,659 @@ var mediaThemeMicrovideo = (() => {
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var _el;
-  var _attr;
-  var _defaultSet;
-  var _tokenSet;
-  var _tokens;
-  var tokens_get;
-  var AttributeTokenList = class {
-    constructor(el, attr, { defaultValue } = { defaultValue: void 0 }) {
-      __privateAdd3(this, _tokens);
-      __privateAdd3(this, _el, void 0);
-      __privateAdd3(this, _attr, void 0);
-      __privateAdd3(this, _defaultSet, void 0);
-      __privateAdd3(this, _tokenSet, /* @__PURE__ */ new Set());
-      __privateSet3(this, _el, el);
-      __privateSet3(this, _attr, attr);
-      __privateSet3(this, _defaultSet, new Set(defaultValue));
-    }
-    [Symbol.iterator]() {
-      return __privateGet3(this, _tokens, tokens_get).values();
-    }
-    get length() {
-      return __privateGet3(this, _tokens, tokens_get).size;
-    }
-    get value() {
-      var _a3;
-      return (_a3 = [...__privateGet3(this, _tokens, tokens_get)].join(" ")) != null ? _a3 : "";
-    }
-    set value(val) {
-      var _a3;
-      if (val === this.value)
-        return;
-      __privateSet3(this, _tokenSet, /* @__PURE__ */ new Set());
-      this.add(...(_a3 = val == null ? void 0 : val.split(" ")) != null ? _a3 : []);
-    }
-    toString() {
-      return this.value;
+  var __privateMethod2 = (obj, member, method) => {
+    __accessCheck3(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;
+  var handleClosed_fn;
+  var _handleInvoke;
+  var handleInvoke_fn;
+  var _handleFocusOut;
+  var handleFocusOut_fn;
+  var _handleKeyDown;
+  var handleKeyDown_fn;
+  function getTemplateHTML3(_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;
+        ${/** The hide transition is defined below after a short delay. */
+      ""}
+        transition-behavior: allow-discrete;
+        visibility: hidden;
+        opacity: 0;
+        transform: translateY(2px) scale(.99);
+        pointer-events: none;
+      }
+
+      :host([open]) {
+        transition: display .2s, visibility 0s, opacity .2s ease-out, transform .15s ease-out;
+        visibility: visible;
+        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 Attributes2 = {
+    OPEN: "open",
+    ANCHOR: "anchor"
+  };
+  var MediaChromeDialog = class extends GlobalThis.HTMLElement {
+    constructor() {
+      super();
+      __privateAdd3(this, _init);
+      __privateAdd3(this, _handleOpen);
+      __privateAdd3(this, _handleClosed);
+      __privateAdd3(this, _handleInvoke);
+      __privateAdd3(this, _handleFocusOut);
+      __privateAdd3(this, _handleKeyDown);
+      __privateAdd3(this, _isInit, false);
+      __privateAdd3(this, _previouslyFocused, null);
+      __privateAdd3(this, _invokerElement, null);
     }
-    item(index) {
-      return [...__privateGet3(this, _tokens, tokens_get)][index];
+    static get observedAttributes() {
+      return [Attributes2.OPEN, Attributes2.ANCHOR];
     }
-    values() {
-      return __privateGet3(this, _tokens, tokens_get).values();
+    get open() {
+      return getBooleanAttr(this, Attributes2.OPEN);
     }
-    forEach(callback, thisArg) {
-      __privateGet3(this, _tokens, tokens_get).forEach(callback, thisArg);
+    set open(value) {
+      setBooleanAttr(this, Attributes2.OPEN, value);
     }
-    add(...tokens) {
-      var _a3, _b2;
-      tokens.forEach((t2) => __privateGet3(this, _tokenSet).add(t2));
-      if (this.value === "" && !((_a3 = __privateGet3(this, _el)) == null ? void 0 : _a3.hasAttribute(`${__privateGet3(this, _attr)}`))) {
-        return;
+    handleEvent(event) {
+      switch (event.type) {
+        case "invoke":
+          __privateMethod2(this, _handleInvoke, handleInvoke_fn).call(this, event);
+          break;
+        case "focusout":
+          __privateMethod2(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
+          break;
+        case "keydown":
+          __privateMethod2(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
+          break;
       }
-      (_b2 = __privateGet3(this, _el)) == null ? void 0 : _b2.setAttribute(`${__privateGet3(this, _attr)}`, `${this.value}`);
     }
-    remove(...tokens) {
-      var _a3;
-      tokens.forEach((t2) => __privateGet3(this, _tokenSet).delete(t2));
-      (_a3 = __privateGet3(this, _el)) == null ? void 0 : _a3.setAttribute(`${__privateGet3(this, _attr)}`, `${this.value}`);
+    connectedCallback() {
+      __privateMethod2(this, _init, init_fn).call(this);
+      if (!this.role) {
+        this.role = "dialog";
+      }
+      this.addEventListener("invoke", this);
+      this.addEventListener("focusout", this);
+      this.addEventListener("keydown", this);
     }
-    contains(token) {
-      return __privateGet3(this, _tokens, tokens_get).has(token);
+    disconnectedCallback() {
+      this.removeEventListener("invoke", this);
+      this.removeEventListener("focusout", this);
+      this.removeEventListener("keydown", this);
     }
-    toggle(token, force) {
-      if (typeof force !== "undefined") {
-        if (force) {
-          this.add(token);
-          return true;
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      __privateMethod2(this, _init, init_fn).call(this);
+      if (attrName === Attributes2.OPEN && newValue !== oldValue) {
+        if (this.open) {
+          __privateMethod2(this, _handleOpen, handleOpen_fn).call(this);
         } else {
-          this.remove(token);
-          return false;
+          __privateMethod2(this, _handleClosed, handleClosed_fn).call(this);
         }
       }
-      if (this.contains(token)) {
-        this.remove(token);
-        return false;
-      }
-      this.add(token);
-      return true;
     }
-    replace(oldToken, newToken) {
-      this.remove(oldToken);
-      this.add(newToken);
-      return oldToken === newToken;
+    focus() {
+      __privateSet3(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"]'
+      );
+      focusable == null ? void 0 : focusable.focus();
+    }
+    get keysUsed() {
+      return ["Escape", "Tab"];
     }
   };
-  _el = /* @__PURE__ */ new WeakMap();
-  _attr = /* @__PURE__ */ new WeakMap();
-  _defaultSet = /* @__PURE__ */ new WeakMap();
-  _tokenSet = /* @__PURE__ */ new WeakMap();
-  _tokens = /* @__PURE__ */ new WeakSet();
-  tokens_get = function() {
-    return __privateGet3(this, _tokenSet).size ? __privateGet3(this, _tokenSet) : __privateGet3(this, _defaultSet);
-  };
-
-  // ../../node_modules/media-chrome/dist/utils/captions.js
-  var splitTextTracksStr = (textTracksStr = "") => textTracksStr.split(/\s+/);
-  var parseTextTrackStr = (textTrackStr = "") => {
-    const [kind, language, encodedLabel] = textTrackStr.split(":");
-    const label = encodedLabel ? decodeURIComponent(encodedLabel) : void 0;
-    return {
-      kind: kind === "cc" ? TextTrackKinds.CAPTIONS : TextTrackKinds.SUBTITLES,
-      language,
-      label
-    };
-  };
-  var parseTextTracksStr = (textTracksStr = "", textTrackLikeObj = {}) => {
-    return splitTextTracksStr(textTracksStr).map((textTrackStr) => {
-      const textTrackObj = parseTextTrackStr(textTrackStr);
-      return {
-        ...textTrackLikeObj,
-        ...textTrackObj
-      };
-    });
-  };
-  var parseTracks = (trackOrTracks) => {
-    if (!trackOrTracks)
-      return [];
-    if (Array.isArray(trackOrTracks)) {
-      return trackOrTracks.map((trackObjOrStr) => {
-        if (typeof trackObjOrStr === "string") {
-          return parseTextTrackStr(trackObjOrStr);
-        }
-        return trackObjOrStr;
+  _isInit = /* @__PURE__ */ new WeakMap();
+  _previouslyFocused = /* @__PURE__ */ new WeakMap();
+  _invokerElement = /* @__PURE__ */ new WeakMap();
+  _init = /* @__PURE__ */ new WeakSet();
+  init_fn = function() {
+    if (__privateGet3(this, _isInit))
+      return;
+    __privateSet3(this, _isInit, true);
+    if (!this.shadowRoot) {
+      this.attachShadow(this.constructor.shadowRootOptions);
+      const attrs = namedNodeMapToObject(this.attributes);
+      this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
+      queueMicrotask(() => {
+        const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
+        style.setProperty(
+          "transition",
+          `display .15s, visibility .15s, opacity .15s ease-in, transform .15s ease-in`
+        );
       });
     }
-    if (typeof trackOrTracks === "string") {
-      return parseTextTracksStr(trackOrTracks);
-    }
-    return [trackOrTracks];
   };
-  var formatTextTrackObj = ({ kind, label, language } = { kind: "subtitles" }) => {
-    if (!label)
-      return language;
-    return `${kind === "captions" ? "cc" : "sb"}:${language}:${encodeURIComponent(
-      label
-    )}`;
+  _handleOpen = /* @__PURE__ */ new WeakSet();
+  handleOpen_fn = function() {
+    var _a3;
+    (_a3 = __privateGet3(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 });
   };
-  var stringifyTextTrackList = (textTracks = []) => {
-    return Array.prototype.map.call(textTracks, formatTextTrackObj).join(" ");
+  _handleClosed = /* @__PURE__ */ new WeakSet();
+  handleClosed_fn = function() {
+    var _a3;
+    (_a3 = __privateGet3(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    this.dispatchEvent(new Event("close", { composed: true, bubbles: true }));
   };
-  var isMatchingPropOf = (key, value) => (obj) => obj[key] === value;
-  var textTrackObjAsPred = (filterObj) => {
-    const preds = Object.entries(filterObj).map(([key, value]) => {
-      return isMatchingPropOf(key, value);
-    });
-    return (textTrack) => preds.every((pred) => pred(textTrack));
+  _handleInvoke = /* @__PURE__ */ new WeakSet();
+  handleInvoke_fn = function(event) {
+    __privateSet3(this, _invokerElement, event.relatedTarget);
+    if (!containsComposedNode(this, event.relatedTarget)) {
+      this.open = !this.open;
+    }
+  };
+  _handleFocusOut = /* @__PURE__ */ new WeakSet();
+  handleFocusOut_fn = function(event) {
+    var _a3;
+    if (!containsComposedNode(this, event.relatedTarget)) {
+      (_a3 = __privateGet3(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
+      if (__privateGet3(this, _invokerElement) && __privateGet3(this, _invokerElement) !== event.relatedTarget && this.open) {
+        this.open = false;
+      }
+    }
+  };
+  _handleKeyDown = /* @__PURE__ */ new WeakSet();
+  handleKeyDown_fn = function(event) {
+    var _a3, _b2, _c, _d, _e;
+    const { key, ctrlKey, altKey, metaKey } = event;
+    if (ctrlKey || altKey || metaKey) {
+      return;
+    }
+    if (!this.keysUsed.includes(key)) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (key === "Tab") {
+      if (event.shiftKey) {
+        (_b2 = (_a3 = this.previousElementSibling) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3);
+      } else {
+        (_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
+      }
+      this.blur();
+    } else if (key === "Escape") {
+      (_e = __privateGet3(this, _previouslyFocused)) == null ? void 0 : _e.focus();
+      this.open = false;
+    }
+  };
+  MediaChromeDialog.shadowRootOptions = { mode: "open" };
+  MediaChromeDialog.getTemplateHTML = getTemplateHTML3;
+  MediaChromeDialog.getSlotTemplateHTML = getSlotTemplateHTML;
+  if (!GlobalThis.customElements.get("media-chrome-dialog")) {
+    GlobalThis.customElements.define("media-chrome-dialog", MediaChromeDialog);
+  }
+
+  // ../../node_modules/media-chrome/dist/media-keyboard-shortcuts-dialog.js
+  var __accessCheck4 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet4 = (obj, member, getter) => {
+    __accessCheck4(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd4 = (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 _clickHandler;
+  var _keyDownHandler;
+  var Attributes3 = {
+    HOTKEYS: "hotkeys"
+  };
+  var shortcuts = [
+    {
+      keys: [{ key: " ", label: "Space" }, { key: "k" }],
+      description: "Toggle Playback"
+    },
+    { keys: [{ key: "m" }], description: "Toggle mute" },
+    { keys: [{ key: "f" }], description: "Toggle fullscreen" },
+    {
+      keys: [{ key: "c" }],
+      description: "Toggle captions or subtitles, if available"
+    },
+    { keys: [{ key: "p" }], description: "Toggle Picture in Picture" },
+    {
+      keys: [{ key: "ArrowLeft", label: "\u2190" }, { key: "j" }],
+      description: "Seek back 10s"
+    },
+    {
+      keys: [{ key: "ArrowRight", label: "\u2192" }, { key: "l" }],
+      description: "Seek forward 10s"
+    },
+    { keys: [{ key: "ArrowUp", label: "\u2191" }], description: "Turn volume up" },
+    { keys: [{ key: "ArrowDown", label: "\u2193" }], description: "Turn volume down" },
+    {
+      keys: [{ key: "<", label: "< (SHIFT+,)" }],
+      description: "Decrease playback rate"
+    },
+    {
+      keys: [{ key: ">", label: "> (SHIFT+.)" }],
+      description: "Increase playback rate"
+    },
+    {
+      keys: [{ key: "shift+/", label: "SHIFT+/" }],
+      description: "Show keyboard shortcuts"
+    }
+  ];
+  function getHotkeyToken(key) {
+    return key === " " ? "nospace" : `no${key.toLowerCase()}`;
+  }
+  function getEnabledShortcuts(hotkeys) {
+    const disabled = new Set(hotkeys == null ? void 0 : hotkeys.split(/\s+/));
+    return shortcuts.map(({ keys, description }) => ({
+      keys: keys.filter(({ key }) => !disabled.has(getHotkeyToken(key))),
+      description
+    })).filter(({ keys }) => keys.length);
+  }
+  function getSlotTemplateHTML2(attrs) {
+    return (
+      /*html*/
+      `
+    <style>
+      :host {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 9999;
+        background: rgb(20 20 30 / .8);
+        backdrop-filter: blur(10px);
+      }
+
+      #content {
+        display: block;
+        width: clamp(400px, 40vw, 700px);
+        max-width: 90vw;
+        text-align: left;
+      }
+
+      h2 {
+        margin: 0 0 1.5rem 0;
+        font-size: 1.5rem;
+        font-weight: 500;
+        text-align: center;
+      }
+
+      .shortcuts-table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      .shortcuts-table tr {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      }
+
+      .shortcuts-table tr:last-child {
+        border-bottom: none;
+      }
+
+      .shortcuts-table td {
+        padding: 0.75rem 0.5rem;
+      }
+
+      .shortcuts-table td:first-child {
+        text-align: right;
+        padding-right: 1rem;
+        width: 40%;
+        min-width: 120px;
+      }
+
+      .shortcuts-table td:last-child {
+        padding-left: 1rem;
+      }
+
+      .key {
+        display: inline-block;
+        background: rgba(255, 255, 255, 0.15);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 4px;
+        padding: 0.25rem 0.5rem;
+        font-family: 'Courier New', monospace;
+        font-size: 0.9rem;
+        font-weight: 500;
+        min-width: 1.5rem;
+        text-align: center;
+        margin: 0 0.2rem;
+      }
+
+      .description {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 0.95rem;
+      }
+
+      .key-combo {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 0.3rem;
+      }
+
+      .key-separator {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 0.9rem;
+      }
+    </style>
+    <slot id="content">
+      ${formatKeyboardShortcuts(attrs[Attributes3.HOTKEYS])}
+    </slot>
+  `
+    );
+  }
+  function formatKeyboardShortcuts(hotkeys) {
+    const rows = getEnabledShortcuts(hotkeys).map(({ keys, description }) => {
+      const keyCombo = keys.map(
+        ({ key, label = key }, index) => index > 0 ? `<span class="key-separator">or</span><span class="key">${label}</span>` : `<span class="key">${label}</span>`
+      ).join("");
+      return `
+        <tr>
+          <td>
+            <div class="key-combo">${keyCombo}</div>
+          </td>
+          <td class="description">${description}</td>
+        </tr>
+      `;
+    }).join("");
+    return `
+    <h2>Keyboard Shortcuts</h2>
+    <table class="shortcuts-table">${rows}</table>
+  `;
+  }
+  var MediaKeyboardShortcutsDialog = class extends MediaChromeDialog {
+    constructor() {
+      super(...arguments);
+      __privateAdd4(this, _clickHandler, (e) => {
+        var _a3;
+        if (!this.open)
+          return;
+        const content = (_a3 = this.shadowRoot) == null ? void 0 : _a3.querySelector("#content");
+        if (!content)
+          return;
+        const path = e.composedPath();
+        const isClickOnHost = path[0] === this || path.includes(this);
+        const isClickInsideContent = path.includes(content);
+        if (isClickOnHost && !isClickInsideContent) {
+          this.open = false;
+        }
+      });
+      __privateAdd4(this, _keyDownHandler, (e) => {
+        if (!this.open)
+          return;
+        const isShiftSlash = e.shiftKey && (e.key === "/" || e.key === "?");
+        if ((e.key === "Escape" || isShiftSlash) && !e.ctrlKey && !e.altKey && !e.metaKey) {
+          this.open = false;
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      });
+    }
+    static get observedAttributes() {
+      return [...super.observedAttributes, Attributes3.HOTKEYS];
+    }
+    get hotkeys() {
+      var _a3;
+      return (_a3 = getStringAttr(this, Attributes3.HOTKEYS)) != null ? _a3 : void 0;
+    }
+    set hotkeys(value) {
+      setStringAttr(this, Attributes3.HOTKEYS, value);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      if (this.open) {
+        this.addEventListener("click", __privateGet4(this, _clickHandler));
+        document.addEventListener("keydown", __privateGet4(this, _keyDownHandler));
+      }
+    }
+    disconnectedCallback() {
+      this.removeEventListener("click", __privateGet4(this, _clickHandler));
+      document.removeEventListener("keydown", __privateGet4(this, _keyDownHandler));
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      var _a3;
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === "open") {
+        if (this.open) {
+          this.addEventListener("click", __privateGet4(this, _clickHandler));
+          document.addEventListener("keydown", __privateGet4(this, _keyDownHandler));
+        } else {
+          this.removeEventListener("click", __privateGet4(this, _clickHandler));
+          document.removeEventListener("keydown", __privateGet4(this, _keyDownHandler));
+        }
+      } else if (attrName === Attributes3.HOTKEYS && newValue !== oldValue) {
+        const content = (_a3 = this.shadowRoot) == null ? void 0 : _a3.querySelector("#content");
+        if (content)
+          content.innerHTML = formatKeyboardShortcuts(newValue);
+      }
+    }
+  };
+  _clickHandler = /* @__PURE__ */ new WeakMap();
+  _keyDownHandler = /* @__PURE__ */ new WeakMap();
+  MediaKeyboardShortcutsDialog.getSlotTemplateHTML = getSlotTemplateHTML2;
+  if (!GlobalThis.customElements.get("media-keyboard-shortcuts-dialog")) {
+    GlobalThis.customElements.define(
+      "media-keyboard-shortcuts-dialog",
+      MediaKeyboardShortcutsDialog
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/utils/attribute-token-list.js
+  var __accessCheck5 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet5 = (obj, member, getter) => {
+    __accessCheck5(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd5 = (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 __privateSet4 = (obj, member, value, setter) => {
+    __accessCheck5(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var _el;
+  var _attr;
+  var _defaultSet;
+  var _tokenSet;
+  var _tokens;
+  var tokens_get;
+  var AttributeTokenList = class {
+    constructor(el, attr, { defaultValue } = { defaultValue: void 0 }) {
+      __privateAdd5(this, _tokens);
+      __privateAdd5(this, _el, void 0);
+      __privateAdd5(this, _attr, void 0);
+      __privateAdd5(this, _defaultSet, void 0);
+      __privateAdd5(this, _tokenSet, /* @__PURE__ */ new Set());
+      __privateSet4(this, _el, el);
+      __privateSet4(this, _attr, attr);
+      __privateSet4(this, _defaultSet, new Set(defaultValue));
+    }
+    [Symbol.iterator]() {
+      return __privateGet5(this, _tokens, tokens_get).values();
+    }
+    get length() {
+      return __privateGet5(this, _tokens, tokens_get).size;
+    }
+    get value() {
+      var _a3;
+      return (_a3 = [...__privateGet5(this, _tokens, tokens_get)].join(" ")) != null ? _a3 : "";
+    }
+    set value(val) {
+      var _a3;
+      if (val === this.value)
+        return;
+      __privateSet4(this, _tokenSet, /* @__PURE__ */ new Set());
+      this.add(...(_a3 = val == null ? void 0 : val.split(" ")) != null ? _a3 : []);
+    }
+    toString() {
+      return this.value;
+    }
+    item(index) {
+      return [...__privateGet5(this, _tokens, tokens_get)][index];
+    }
+    values() {
+      return __privateGet5(this, _tokens, tokens_get).values();
+    }
+    forEach(callback, thisArg) {
+      __privateGet5(this, _tokens, tokens_get).forEach(callback, thisArg);
+    }
+    add(...tokens) {
+      var _a3, _b2;
+      tokens.forEach((t2) => __privateGet5(this, _tokenSet).add(t2));
+      if (this.value === "" && !((_a3 = __privateGet5(this, _el)) == null ? void 0 : _a3.hasAttribute(`${__privateGet5(this, _attr)}`))) {
+        return;
+      }
+      (_b2 = __privateGet5(this, _el)) == null ? void 0 : _b2.setAttribute(`${__privateGet5(this, _attr)}`, `${this.value}`);
+    }
+    remove(...tokens) {
+      var _a3;
+      tokens.forEach((t2) => __privateGet5(this, _tokenSet).delete(t2));
+      (_a3 = __privateGet5(this, _el)) == null ? void 0 : _a3.setAttribute(`${__privateGet5(this, _attr)}`, `${this.value}`);
+    }
+    contains(token) {
+      return __privateGet5(this, _tokens, tokens_get).has(token);
+    }
+    toggle(token, force) {
+      if (typeof force !== "undefined") {
+        if (force) {
+          this.add(token);
+          return true;
+        } else {
+          this.remove(token);
+          return false;
+        }
+      }
+      if (this.contains(token)) {
+        this.remove(token);
+        return false;
+      }
+      this.add(token);
+      return true;
+    }
+    replace(oldToken, newToken) {
+      this.remove(oldToken);
+      this.add(newToken);
+      return oldToken === newToken;
+    }
+  };
+  _el = /* @__PURE__ */ new WeakMap();
+  _attr = /* @__PURE__ */ new WeakMap();
+  _defaultSet = /* @__PURE__ */ new WeakMap();
+  _tokenSet = /* @__PURE__ */ new WeakMap();
+  _tokens = /* @__PURE__ */ new WeakSet();
+  tokens_get = function() {
+    return __privateGet5(this, _tokenSet).size ? __privateGet5(this, _tokenSet) : __privateGet5(this, _defaultSet);
+  };
+
+  // ../../node_modules/media-chrome/dist/utils/captions.js
+  var splitTextTracksStr = (textTracksStr = "") => textTracksStr.split(/\s+/);
+  var parseTextTrackStr = (textTrackStr = "") => {
+    const [kind, language, encodedLabel] = textTrackStr.split(":");
+    const label = encodedLabel ? decodeURIComponent(encodedLabel) : void 0;
+    return {
+      kind: kind === "cc" ? TextTrackKinds.CAPTIONS : TextTrackKinds.SUBTITLES,
+      language,
+      label
+    };
+  };
+  var parseTextTracksStr = (textTracksStr = "", textTrackLikeObj = {}) => {
+    return splitTextTracksStr(textTracksStr).map((textTrackStr) => {
+      const textTrackObj = parseTextTrackStr(textTrackStr);
+      return {
+        ...textTrackLikeObj,
+        ...textTrackObj
+      };
+    });
+  };
+  var parseTracks = (trackOrTracks) => {
+    if (!trackOrTracks)
+      return [];
+    if (Array.isArray(trackOrTracks)) {
+      return trackOrTracks.map((trackObjOrStr) => {
+        if (typeof trackObjOrStr === "string") {
+          return parseTextTrackStr(trackObjOrStr);
+        }
+        return trackObjOrStr;
+      });
+    }
+    if (typeof trackOrTracks === "string") {
+      return parseTextTracksStr(trackOrTracks);
+    }
+    return [trackOrTracks];
+  };
+  var formatTextTrackObj = ({ kind, label, language } = { kind: "subtitles" }) => {
+    if (!label)
+      return language;
+    return `${kind === "captions" ? "cc" : "sb"}:${language}:${encodeURIComponent(
+      label
+    )}`;
+  };
+  var stringifyTextTrackList = (textTracks = []) => {
+    return Array.prototype.map.call(textTracks, formatTextTrackObj).join(" ");
+  };
+  var isMatchingPropOf = (key, value) => (obj) => obj[key] === value;
+  var textTrackObjAsPred = (filterObj) => {
+    const preds = Object.entries(filterObj).map(([key, value]) => {
+      return isMatchingPropOf(key, value);
+    });
+    return (textTrack) => preds.every((pred) => pred(textTrack));
   };
   var updateTracksModeTo = (mode, tracks = [], tracksToUpdate = []) => {
     const preds = parseTracks(tracksToUpdate).map(textTrackObjAsPred);
@@ -3273,26 +3794,26 @@ var mediaThemeMicrovideo = (() => {
   };
 
   // ../../node_modules/media-chrome/dist/media-controller.js
-  var __accessCheck4 = (obj, member, msg) => {
+  var __accessCheck6 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet4 = (obj, member, getter) => {
-    __accessCheck4(obj, member, "read from private field");
+  var __privateGet6 = (obj, member, getter) => {
+    __accessCheck6(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd4 = (obj, member, value) => {
+  var __privateAdd6 = (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 __privateSet4 = (obj, member, value, setter) => {
-    __accessCheck4(obj, member, "write to private field");
+  var __privateSet5 = (obj, member, value, setter) => {
+    __accessCheck6(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod2 = (obj, member, method) => {
-    __accessCheck4(obj, member, "access private method");
+  var __privateMethod3 = (obj, member, method) => {
+    __accessCheck6(obj, member, "access private method");
     return method;
   };
   var _hotKeys;
@@ -3306,8 +3827,10 @@ var mediaThemeMicrovideo = (() => {
   var _setupDefaultStore;
   var setupDefaultStore_fn;
   var _keyUpHandler;
-  var _keyDownHandler;
+  var _keyDownHandler2;
   var keyDownHandler_fn;
+  var _syncKeyboardShortcutsDialog;
+  var syncKeyboardShortcutsDialog_fn;
   var _showKeyboardShortcutsDialog;
   var showKeyboardShortcutsDialog_fn;
   var ButtonPressedKeys = [
@@ -3332,7 +3855,7 @@ var mediaThemeMicrovideo = (() => {
   var DEFAULT_PLAYBACK_RATE_STEP = 0.25;
   var MIN_PLAYBACK_RATE = 0.25;
   var MAX_PLAYBACK_RATE = 2;
-  var Attributes2 = {
+  var Attributes4 = {
     DEFAULT_SUBTITLES: "defaultsubtitles",
     DEFAULT_STREAM_TYPE: "defaultstreamtype",
     DEFAULT_DURATION: "defaultduration",
@@ -3357,35 +3880,36 @@ var mediaThemeMicrovideo = (() => {
   var MediaController = class extends MediaContainer {
     constructor() {
       super();
-      __privateAdd4(this, _setupDefaultStore);
-      __privateAdd4(this, _keyDownHandler);
-      __privateAdd4(this, _showKeyboardShortcutsDialog);
+      __privateAdd6(this, _setupDefaultStore);
+      __privateAdd6(this, _keyDownHandler2);
+      __privateAdd6(this, _syncKeyboardShortcutsDialog);
+      __privateAdd6(this, _showKeyboardShortcutsDialog);
       this.mediaStateReceivers = [];
       this.associatedElementSubscriptions = /* @__PURE__ */ new Map();
-      __privateAdd4(this, _hotKeys, new AttributeTokenList(this, Attributes2.HOTKEYS));
-      __privateAdd4(this, _fullscreenElement, void 0);
-      __privateAdd4(this, _mediaStore, void 0);
-      __privateAdd4(this, _keyboardShortcutsDialog, null);
-      __privateAdd4(this, _mediaStateCallback, void 0);
-      __privateAdd4(this, _mediaStoreUnsubscribe, void 0);
-      __privateAdd4(this, _mediaStateEventHandler, (event) => {
+      __privateAdd6(this, _hotKeys, new AttributeTokenList(this, Attributes4.HOTKEYS));
+      __privateAdd6(this, _fullscreenElement, void 0);
+      __privateAdd6(this, _mediaStore, void 0);
+      __privateAdd6(this, _keyboardShortcutsDialog, null);
+      __privateAdd6(this, _mediaStateCallback, void 0);
+      __privateAdd6(this, _mediaStoreUnsubscribe, void 0);
+      __privateAdd6(this, _mediaStateEventHandler, (event) => {
         var _a3;
-        (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch(event);
+        (_a3 = __privateGet6(this, _mediaStore)) == null ? void 0 : _a3.dispatch(event);
       });
-      __privateAdd4(this, _subtitlesState, void 0);
-      __privateAdd4(this, _keyUpHandler, (e) => {
+      __privateAdd6(this, _subtitlesState, void 0);
+      __privateAdd6(this, _keyUpHandler, (e) => {
         const { key, shiftKey } = e;
         const isShiftSlash = shiftKey && (key === "/" || key === "?");
         const shouldHandle = isShiftSlash || ButtonPressedKeys.includes(key);
         if (!shouldHandle) {
-          this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
+          this.removeEventListener("keyup", __privateGet6(this, _keyUpHandler));
           return;
         }
         this.keyboardShortcutHandler(e);
       });
       this.associateElement(this);
       let prevState = {};
-      __privateSet4(this, _mediaStateCallback, (nextState) => {
+      __privateSet5(this, _mediaStateCallback, (nextState) => {
         Object.entries(nextState).forEach(([stateName, stateValue]) => {
           if (stateName in prevState && prevState[stateName] === stateValue)
             return;
@@ -3402,118 +3926,118 @@ var mediaThemeMicrovideo = (() => {
     }
     static get observedAttributes() {
       return super.observedAttributes.concat(
-        Attributes2.NO_HOTKEYS,
-        Attributes2.HOTKEYS,
-        Attributes2.DEFAULT_STREAM_TYPE,
-        Attributes2.DEFAULT_SUBTITLES,
-        Attributes2.DEFAULT_DURATION,
-        Attributes2.NO_MUTED_PREF,
-        Attributes2.NO_VOLUME_PREF,
-        Attributes2.LANG,
-        Attributes2.LOOP,
-        Attributes2.LIVE_EDGE_OFFSET,
-        Attributes2.SEEK_TO_LIVE_OFFSET,
-        Attributes2.NO_AUTO_SEEK_TO_LIVE
+        Attributes4.NO_HOTKEYS,
+        Attributes4.HOTKEYS,
+        Attributes4.DEFAULT_STREAM_TYPE,
+        Attributes4.DEFAULT_SUBTITLES,
+        Attributes4.DEFAULT_DURATION,
+        Attributes4.NO_MUTED_PREF,
+        Attributes4.NO_VOLUME_PREF,
+        Attributes4.LANG,
+        Attributes4.LOOP,
+        Attributes4.LIVE_EDGE_OFFSET,
+        Attributes4.SEEK_TO_LIVE_OFFSET,
+        Attributes4.NO_AUTO_SEEK_TO_LIVE
       );
     }
     get mediaStore() {
-      return __privateGet4(this, _mediaStore);
+      return __privateGet6(this, _mediaStore);
     }
     set mediaStore(value) {
       var _a3, _b2;
-      if (__privateGet4(this, _mediaStore)) {
-        (_a3 = __privateGet4(this, _mediaStoreUnsubscribe)) == null ? void 0 : _a3.call(this);
-        __privateSet4(this, _mediaStoreUnsubscribe, void 0);
+      if (__privateGet6(this, _mediaStore)) {
+        (_a3 = __privateGet6(this, _mediaStoreUnsubscribe)) == null ? void 0 : _a3.call(this);
+        __privateSet5(this, _mediaStoreUnsubscribe, void 0);
       }
-      __privateSet4(this, _mediaStore, value);
-      if (!__privateGet4(this, _mediaStore) && !this.hasAttribute(Attributes2.NO_DEFAULT_STORE)) {
-        __privateMethod2(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
+      __privateSet5(this, _mediaStore, value);
+      if (!__privateGet6(this, _mediaStore) && !this.hasAttribute(Attributes4.NO_DEFAULT_STORE)) {
+        __privateMethod3(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
         return;
       }
-      __privateSet4(this, _mediaStoreUnsubscribe, (_b2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _b2.subscribe(
-        __privateGet4(this, _mediaStateCallback)
+      __privateSet5(this, _mediaStoreUnsubscribe, (_b2 = __privateGet6(this, _mediaStore)) == null ? void 0 : _b2.subscribe(
+        __privateGet6(this, _mediaStateCallback)
       ));
     }
     get fullscreenElement() {
       var _a3;
-      return (_a3 = __privateGet4(this, _fullscreenElement)) != null ? _a3 : this;
+      return (_a3 = __privateGet6(this, _fullscreenElement)) != null ? _a3 : this;
     }
     set fullscreenElement(element) {
       var _a3;
-      if (this.hasAttribute(Attributes2.FULLSCREEN_ELEMENT)) {
-        this.removeAttribute(Attributes2.FULLSCREEN_ELEMENT);
+      if (this.hasAttribute(Attributes4.FULLSCREEN_ELEMENT)) {
+        this.removeAttribute(Attributes4.FULLSCREEN_ELEMENT);
       }
-      __privateSet4(this, _fullscreenElement, element);
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      __privateSet5(this, _fullscreenElement, element);
+      (_a3 = __privateGet6(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
         type: "fullscreenelementchangerequest",
         detail: this.fullscreenElement
       });
     }
     get defaultSubtitles() {
-      return getBooleanAttr(this, Attributes2.DEFAULT_SUBTITLES);
+      return getBooleanAttr(this, Attributes4.DEFAULT_SUBTITLES);
     }
     set defaultSubtitles(value) {
-      setBooleanAttr(this, Attributes2.DEFAULT_SUBTITLES, value);
+      setBooleanAttr(this, Attributes4.DEFAULT_SUBTITLES, value);
     }
     get defaultStreamType() {
-      return getStringAttr(this, Attributes2.DEFAULT_STREAM_TYPE);
+      return getStringAttr(this, Attributes4.DEFAULT_STREAM_TYPE);
     }
     set defaultStreamType(value) {
-      setStringAttr(this, Attributes2.DEFAULT_STREAM_TYPE, value);
+      setStringAttr(this, Attributes4.DEFAULT_STREAM_TYPE, value);
     }
     get defaultDuration() {
-      return getNumericAttr(this, Attributes2.DEFAULT_DURATION);
+      return getNumericAttr(this, Attributes4.DEFAULT_DURATION);
     }
     set defaultDuration(value) {
-      setNumericAttr(this, Attributes2.DEFAULT_DURATION, value);
+      setNumericAttr(this, Attributes4.DEFAULT_DURATION, value);
     }
     get noHotkeys() {
-      return getBooleanAttr(this, Attributes2.NO_HOTKEYS);
+      return getBooleanAttr(this, Attributes4.NO_HOTKEYS);
     }
     set noHotkeys(value) {
-      setBooleanAttr(this, Attributes2.NO_HOTKEYS, value);
+      setBooleanAttr(this, Attributes4.NO_HOTKEYS, value);
     }
     get keysUsed() {
-      return getStringAttr(this, Attributes2.KEYS_USED);
+      return getStringAttr(this, Attributes4.KEYS_USED);
     }
     set keysUsed(value) {
-      setStringAttr(this, Attributes2.KEYS_USED, value);
+      setStringAttr(this, Attributes4.KEYS_USED, value);
     }
     get liveEdgeOffset() {
-      return getNumericAttr(this, Attributes2.LIVE_EDGE_OFFSET);
+      return getNumericAttr(this, Attributes4.LIVE_EDGE_OFFSET);
     }
     set liveEdgeOffset(value) {
-      setNumericAttr(this, Attributes2.LIVE_EDGE_OFFSET, value);
+      setNumericAttr(this, Attributes4.LIVE_EDGE_OFFSET, value);
     }
     get noAutoSeekToLive() {
-      return getBooleanAttr(this, Attributes2.NO_AUTO_SEEK_TO_LIVE);
+      return getBooleanAttr(this, Attributes4.NO_AUTO_SEEK_TO_LIVE);
     }
     set noAutoSeekToLive(value) {
-      setBooleanAttr(this, Attributes2.NO_AUTO_SEEK_TO_LIVE, value);
+      setBooleanAttr(this, Attributes4.NO_AUTO_SEEK_TO_LIVE, value);
     }
     get noVolumePref() {
-      return getBooleanAttr(this, Attributes2.NO_VOLUME_PREF);
+      return getBooleanAttr(this, Attributes4.NO_VOLUME_PREF);
     }
     set noVolumePref(value) {
-      setBooleanAttr(this, Attributes2.NO_VOLUME_PREF, value);
+      setBooleanAttr(this, Attributes4.NO_VOLUME_PREF, value);
     }
     get noMutedPref() {
-      return getBooleanAttr(this, Attributes2.NO_MUTED_PREF);
+      return getBooleanAttr(this, Attributes4.NO_MUTED_PREF);
     }
     set noMutedPref(value) {
-      setBooleanAttr(this, Attributes2.NO_MUTED_PREF, value);
+      setBooleanAttr(this, Attributes4.NO_MUTED_PREF, value);
     }
     get noSubtitlesLangPref() {
-      return getBooleanAttr(this, Attributes2.NO_SUBTITLES_LANG_PREF);
+      return getBooleanAttr(this, Attributes4.NO_SUBTITLES_LANG_PREF);
     }
     set noSubtitlesLangPref(value) {
-      setBooleanAttr(this, Attributes2.NO_SUBTITLES_LANG_PREF, value);
+      setBooleanAttr(this, Attributes4.NO_SUBTITLES_LANG_PREF, value);
     }
     get noDefaultStore() {
-      return getBooleanAttr(this, Attributes2.NO_DEFAULT_STORE);
+      return getBooleanAttr(this, Attributes4.NO_DEFAULT_STORE);
     }
     set noDefaultStore(value) {
-      setBooleanAttr(this, Attributes2.NO_DEFAULT_STORE, value);
+      setBooleanAttr(this, Attributes4.NO_DEFAULT_STORE, value);
     }
     get resolvedLang() {
       return getResolvedLanguage();
@@ -3521,9 +4045,9 @@ var mediaThemeMicrovideo = (() => {
     attributeChangedCallback(attrName, oldValue, newValue) {
       var _a3, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       super.attributeChangedCallback(attrName, oldValue, newValue);
-      if (attrName === Attributes2.NO_HOTKEYS) {
+      if (attrName === Attributes4.NO_HOTKEYS) {
         if (newValue !== oldValue && newValue === "") {
-          if (this.hasAttribute(Attributes2.HOTKEYS)) {
+          if (this.hasAttribute(Attributes4.HOTKEYS)) {
             console.warn(
               "Media Chrome: Both `hotkeys` and `nohotkeys` have been set. All hotkeys will be disabled."
             );
@@ -3532,78 +4056,80 @@ var mediaThemeMicrovideo = (() => {
         } else if (newValue !== oldValue && newValue === null) {
           this.enableHotkeys();
         }
-      } else if (attrName === Attributes2.HOTKEYS) {
-        __privateGet4(this, _hotKeys).value = newValue;
-      } else if (attrName === Attributes2.DEFAULT_SUBTITLES && newValue !== oldValue) {
-        (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+        __privateMethod3(this, _syncKeyboardShortcutsDialog, syncKeyboardShortcutsDialog_fn).call(this);
+      } else if (attrName === Attributes4.HOTKEYS) {
+        __privateGet6(this, _hotKeys).value = newValue;
+        __privateMethod3(this, _syncKeyboardShortcutsDialog, syncKeyboardShortcutsDialog_fn).call(this);
+      } else if (attrName === Attributes4.DEFAULT_SUBTITLES && newValue !== oldValue) {
+        (_a3 = __privateGet6(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
           type: "optionschangerequest",
           detail: {
-            defaultSubtitles: this.hasAttribute(Attributes2.DEFAULT_SUBTITLES)
+            defaultSubtitles: this.hasAttribute(Attributes4.DEFAULT_SUBTITLES)
           }
         });
-      } else if (attrName === Attributes2.DEFAULT_STREAM_TYPE) {
-        (_c = __privateGet4(this, _mediaStore)) == null ? void 0 : _c.dispatch({
+      } else if (attrName === Attributes4.DEFAULT_STREAM_TYPE) {
+        (_c = __privateGet6(this, _mediaStore)) == null ? void 0 : _c.dispatch({
           type: "optionschangerequest",
           detail: {
-            defaultStreamType: (_b2 = this.getAttribute(Attributes2.DEFAULT_STREAM_TYPE)) != null ? _b2 : void 0
+            defaultStreamType: (_b2 = this.getAttribute(Attributes4.DEFAULT_STREAM_TYPE)) != null ? _b2 : void 0
           }
         });
-      } else if (attrName === Attributes2.LIVE_EDGE_OFFSET && newValue !== oldValue) {
-        (_d = __privateGet4(this, _mediaStore)) == null ? void 0 : _d.dispatch({
+      } else if (attrName === Attributes4.LIVE_EDGE_OFFSET && newValue !== oldValue) {
+        (_d = __privateGet6(this, _mediaStore)) == null ? void 0 : _d.dispatch({
           type: "optionschangerequest",
           detail: {
-            liveEdgeOffset: this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0,
-            seekToLiveOffset: this.hasAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0
+            liveEdgeOffset: this.hasAttribute(Attributes4.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes4.LIVE_EDGE_OFFSET) : void 0,
+            seekToLiveOffset: this.hasAttribute(Attributes4.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes4.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes4.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes4.LIVE_EDGE_OFFSET) : void 0
           }
         });
-      } else if (attrName === Attributes2.SEEK_TO_LIVE_OFFSET && newValue !== oldValue) {
-        (_e = __privateGet4(this, _mediaStore)) == null ? void 0 : _e.dispatch({
+      } else if (attrName === Attributes4.SEEK_TO_LIVE_OFFSET && newValue !== oldValue) {
+        (_e = __privateGet6(this, _mediaStore)) == null ? void 0 : _e.dispatch({
           type: "optionschangerequest",
           detail: {
             // Mirror #setupDefaultStore: prefer seektoliveoffset, fall back to
             // liveedgeoffset, otherwise undefined.
-            seekToLiveOffset: this.hasAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0
+            seekToLiveOffset: this.hasAttribute(Attributes4.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes4.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes4.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes4.LIVE_EDGE_OFFSET) : void 0
           }
         });
-      } else if (attrName === Attributes2.NO_AUTO_SEEK_TO_LIVE) {
-        (_f = __privateGet4(this, _mediaStore)) == null ? void 0 : _f.dispatch({
+      } else if (attrName === Attributes4.NO_AUTO_SEEK_TO_LIVE) {
+        (_f = __privateGet6(this, _mediaStore)) == null ? void 0 : _f.dispatch({
           type: "optionschangerequest",
           detail: {
-            noAutoSeekToLive: this.hasAttribute(Attributes2.NO_AUTO_SEEK_TO_LIVE)
+            noAutoSeekToLive: this.hasAttribute(Attributes4.NO_AUTO_SEEK_TO_LIVE)
           }
         });
-      } else if (attrName === Attributes2.FULLSCREEN_ELEMENT) {
+      } else if (attrName === Attributes4.FULLSCREEN_ELEMENT) {
         const el = newValue ? (_g = this.getRootNode()) == null ? void 0 : _g.getElementById(newValue) : void 0;
-        __privateSet4(this, _fullscreenElement, el);
-        (_h = __privateGet4(this, _mediaStore)) == null ? void 0 : _h.dispatch({
+        __privateSet5(this, _fullscreenElement, el);
+        (_h = __privateGet6(this, _mediaStore)) == null ? void 0 : _h.dispatch({
           type: "fullscreenelementchangerequest",
           detail: this.fullscreenElement
         });
-      } else if (attrName === Attributes2.LANG && newValue !== oldValue) {
+      } else if (attrName === Attributes4.LANG && newValue !== oldValue) {
         setLanguage(newValue);
-        (_i = __privateGet4(this, _mediaStore)) == null ? void 0 : _i.dispatch({
+        (_i = __privateGet6(this, _mediaStore)) == null ? void 0 : _i.dispatch({
           type: "optionschangerequest",
           detail: {
             mediaLang: newValue
           }
         });
-      } else if (attrName === Attributes2.LOOP && newValue !== oldValue) {
-        (_j = __privateGet4(this, _mediaStore)) == null ? void 0 : _j.dispatch({
+      } else if (attrName === Attributes4.LOOP && newValue !== oldValue) {
+        (_j = __privateGet6(this, _mediaStore)) == null ? void 0 : _j.dispatch({
           type: MediaUIEvents.MEDIA_LOOP_REQUEST,
           detail: newValue != null
         });
-      } else if (attrName === Attributes2.NO_VOLUME_PREF && newValue !== oldValue) {
-        (_k = __privateGet4(this, _mediaStore)) == null ? void 0 : _k.dispatch({
+      } else if (attrName === Attributes4.NO_VOLUME_PREF && newValue !== oldValue) {
+        (_k = __privateGet6(this, _mediaStore)) == null ? void 0 : _k.dispatch({
           type: "optionschangerequest",
           detail: {
-            noVolumePref: this.hasAttribute(Attributes2.NO_VOLUME_PREF)
+            noVolumePref: this.hasAttribute(Attributes4.NO_VOLUME_PREF)
           }
         });
-      } else if (attrName === Attributes2.NO_MUTED_PREF && newValue !== oldValue) {
-        (_l = __privateGet4(this, _mediaStore)) == null ? void 0 : _l.dispatch({
+      } else if (attrName === Attributes4.NO_MUTED_PREF && newValue !== oldValue) {
+        (_l = __privateGet6(this, _mediaStore)) == null ? void 0 : _l.dispatch({
           type: "optionschangerequest",
           detail: {
-            noMutedPref: this.hasAttribute(Attributes2.NO_MUTED_PREF)
+            noMutedPref: this.hasAttribute(Attributes4.NO_MUTED_PREF)
           }
         });
       }
@@ -3611,64 +4137,64 @@ var mediaThemeMicrovideo = (() => {
     connectedCallback() {
       var _a3, _b2, _c;
       this.associateElement(this);
-      if (!__privateGet4(this, _mediaStore) && !this.hasAttribute(Attributes2.NO_DEFAULT_STORE)) {
-        __privateMethod2(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
+      if (!__privateGet6(this, _mediaStore) && !this.hasAttribute(Attributes4.NO_DEFAULT_STORE)) {
+        __privateMethod3(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
       }
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a3 = __privateGet6(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
         type: "documentelementchangerequest",
         detail: Document2
       });
-      (_b2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _b2.dispatch({
+      (_b2 = __privateGet6(this, _mediaStore)) == null ? void 0 : _b2.dispatch({
         type: "fullscreenelementchangerequest",
         detail: this.fullscreenElement
       });
       super.connectedCallback();
-      if (__privateGet4(this, _mediaStore) && !__privateGet4(this, _mediaStoreUnsubscribe)) {
-        __privateSet4(this, _mediaStoreUnsubscribe, (_c = __privateGet4(this, _mediaStore)) == null ? void 0 : _c.subscribe(
-          __privateGet4(this, _mediaStateCallback)
+      if (__privateGet6(this, _mediaStore) && !__privateGet6(this, _mediaStoreUnsubscribe)) {
+        __privateSet5(this, _mediaStoreUnsubscribe, (_c = __privateGet6(this, _mediaStore)) == null ? void 0 : _c.subscribe(
+          __privateGet6(this, _mediaStateCallback)
         ));
       }
-      if (__privateGet4(this, _subtitlesState) !== void 0 && __privateGet4(this, _mediaStore) && this.media) {
+      if (__privateGet6(this, _subtitlesState) !== void 0 && __privateGet6(this, _mediaStore) && this.media) {
         setTimeout(() => {
           var _a22, _b22, _c2;
           if ((_b22 = (_a22 = this.media) == null ? void 0 : _a22.textTracks) == null ? void 0 : _b22.length) {
-            (_c2 = __privateGet4(this, _mediaStore)) == null ? void 0 : _c2.dispatch({
+            (_c2 = __privateGet6(this, _mediaStore)) == null ? void 0 : _c2.dispatch({
               type: MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST,
-              detail: __privateGet4(this, _subtitlesState)
+              detail: __privateGet6(this, _subtitlesState)
             });
           }
         }, 0);
       }
-      this.hasAttribute(Attributes2.NO_HOTKEYS) ? this.disableHotkeys() : this.enableHotkeys();
+      this.hasAttribute(Attributes4.NO_HOTKEYS) ? this.disableHotkeys() : this.enableHotkeys();
     }
     disconnectedCallback() {
       var _a3, _b2, _c, _d, _e, _f;
       (_a3 = super.disconnectedCallback) == null ? void 0 : _a3.call(this);
       this.disableHotkeys();
-      if (__privateGet4(this, _mediaStore)) {
-        const currentState = __privateGet4(this, _mediaStore).getState();
-        __privateSet4(this, _subtitlesState, !!((_b2 = currentState.mediaSubtitlesShowing) == null ? void 0 : _b2.length));
-        (_c = __privateGet4(this, _mediaStore)) == null ? void 0 : _c.dispatch({
+      if (__privateGet6(this, _mediaStore)) {
+        const currentState = __privateGet6(this, _mediaStore).getState();
+        __privateSet5(this, _subtitlesState, !!((_b2 = currentState.mediaSubtitlesShowing) == null ? void 0 : _b2.length));
+        (_c = __privateGet6(this, _mediaStore)) == null ? void 0 : _c.dispatch({
           type: "fullscreenelementchangerequest",
           detail: void 0
         });
-        (_d = __privateGet4(this, _mediaStore)) == null ? void 0 : _d.dispatch({
+        (_d = __privateGet6(this, _mediaStore)) == null ? void 0 : _d.dispatch({
           type: "documentelementchangerequest",
           detail: void 0
         });
-        (_e = __privateGet4(this, _mediaStore)) == null ? void 0 : _e.dispatch({
+        (_e = __privateGet6(this, _mediaStore)) == null ? void 0 : _e.dispatch({
           type: MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST,
           detail: false
         });
       }
-      if (__privateGet4(this, _mediaStoreUnsubscribe)) {
-        (_f = __privateGet4(this, _mediaStoreUnsubscribe)) == null ? void 0 : _f.call(this);
-        __privateSet4(this, _mediaStoreUnsubscribe, void 0);
+      if (__privateGet6(this, _mediaStoreUnsubscribe)) {
+        (_f = __privateGet6(this, _mediaStoreUnsubscribe)) == null ? void 0 : _f.call(this);
+        __privateSet5(this, _mediaStoreUnsubscribe, void 0);
       }
       this.unassociateElement(this);
-      if (__privateGet4(this, _keyboardShortcutsDialog)) {
-        __privateGet4(this, _keyboardShortcutsDialog).remove();
-        __privateSet4(this, _keyboardShortcutsDialog, null);
+      if (__privateGet6(this, _keyboardShortcutsDialog)) {
+        __privateGet6(this, _keyboardShortcutsDialog).remove();
+        __privateSet5(this, _keyboardShortcutsDialog, null);
       }
     }
     /**
@@ -3678,7 +4204,7 @@ var mediaThemeMicrovideo = (() => {
     mediaSetCallback(media) {
       var _a3;
       super.mediaSetCallback(media);
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a3 = __privateGet6(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
         type: "mediaelementchangerequest",
         detail: media
       });
@@ -3693,7 +4219,7 @@ var mediaThemeMicrovideo = (() => {
     mediaUnsetCallback(media) {
       var _a3;
       super.mediaUnsetCallback(media);
-      (_a3 = __privateGet4(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
+      (_a3 = __privateGet6(this, _mediaStore)) == null ? void 0 : _a3.dispatch({
         type: "mediaelementchangerequest",
         detail: void 0
       });
@@ -3715,7 +4241,7 @@ var mediaThemeMicrovideo = (() => {
         unregisterMediaStateReceiver
       );
       Object.values(MediaUIEvents).forEach((eventName) => {
-        element.addEventListener(eventName, __privateGet4(this, _mediaStateEventHandler));
+        element.addEventListener(eventName, __privateGet6(this, _mediaStateEventHandler));
       });
       associatedElementSubscriptions.set(element, unsubscribe);
     }
@@ -3729,7 +4255,7 @@ var mediaThemeMicrovideo = (() => {
       unsubscribe();
       associatedElementSubscriptions.delete(element);
       Object.values(MediaUIEvents).forEach((eventName) => {
-        element.removeEventListener(eventName, __privateGet4(this, _mediaStateEventHandler));
+        element.removeEventListener(eventName, __privateGet6(this, _mediaStateEventHandler));
       });
     }
     registerMediaStateReceiver(el) {
@@ -3740,8 +4266,8 @@ var mediaThemeMicrovideo = (() => {
       if (index > -1)
         return;
       els.push(el);
-      if (__privateGet4(this, _mediaStore)) {
-        Object.entries(__privateGet4(this, _mediaStore).getState()).forEach(
+      if (__privateGet6(this, _mediaStore)) {
+        Object.entries(__privateGet6(this, _mediaStore).getState()).forEach(
           ([stateName, stateValue]) => {
             propagateMediaState([el], stateName, stateValue);
           }
@@ -3756,38 +4282,36 @@ var mediaThemeMicrovideo = (() => {
       els.splice(index, 1);
     }
     enableHotkeys() {
-      this.addEventListener("keydown", __privateMethod2(this, _keyDownHandler, keyDownHandler_fn));
+      this.addEventListener("keydown", __privateMethod3(this, _keyDownHandler2, keyDownHandler_fn));
     }
     disableHotkeys() {
-      this.removeEventListener("keydown", __privateMethod2(this, _keyDownHandler, keyDownHandler_fn));
-      this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
+      this.removeEventListener("keydown", __privateMethod3(this, _keyDownHandler2, keyDownHandler_fn));
+      this.removeEventListener("keyup", __privateGet6(this, _keyUpHandler));
     }
     // Added string to support JSX compatibility
     get hotkeys() {
-      return __privateGet4(this, _hotKeys);
+      return __privateGet6(this, _hotKeys);
     }
     set hotkeys(value) {
-      setStringAttr(this, Attributes2.HOTKEYS, value);
+      setStringAttr(this, Attributes4.HOTKEYS, value);
     }
     keyboardShortcutHandler(e) {
       var _a3, _b2, _c, _d, _e, _f, _g, _h, _i;
       const target = e.target;
-      const keysUsed = ((_c = (_b2 = (_a3 = target.getAttribute(Attributes2.KEYS_USED)) == null ? void 0 : _a3.split(" ")) != null ? _b2 : target == null ? void 0 : target.keysUsed) != null ? _c : []).map((key) => key === "Space" ? " " : key).filter(Boolean);
+      const keysUsed = ((_c = (_b2 = (_a3 = target.getAttribute(Attributes4.KEYS_USED)) == null ? void 0 : _a3.split(" ")) != null ? _b2 : target == null ? void 0 : target.keysUsed) != null ? _c : []).map((key) => key === "Space" ? " " : key).filter(Boolean);
       if (keysUsed.includes(e.key)) {
         return;
       }
       let eventName, detail, evt;
-      if (__privateGet4(this, _hotKeys).contains(`no${e.key.toLowerCase()}`))
-        return;
-      if (e.key === " " && __privateGet4(this, _hotKeys).contains(`nospace`))
+      if (__privateGet6(this, _hotKeys).contains(getHotkeyToken(e.key)))
         return;
       const isShiftSlash = e.shiftKey && (e.key === "/" || e.key === "?");
-      if (isShiftSlash && __privateGet4(this, _hotKeys).contains("noshift+/"))
+      if (isShiftSlash && __privateGet6(this, _hotKeys).contains("noshift+/"))
         return;
       switch (e.key) {
         case " ":
         case "k":
-          eventName = __privateGet4(this, _mediaStore).getState().mediaPaused ? MediaUIEvents.MEDIA_PLAY_REQUEST : MediaUIEvents.MEDIA_PAUSE_REQUEST;
+          eventName = __privateGet6(this, _mediaStore).getState().mediaPaused ? MediaUIEvents.MEDIA_PLAY_REQUEST : MediaUIEvents.MEDIA_PAUSE_REQUEST;
           this.dispatchEvent(
             new GlobalThis.CustomEvent(eventName, {
               composed: true,
@@ -3824,8 +4348,8 @@ var mediaThemeMicrovideo = (() => {
         case "ArrowLeft":
         case "j": {
           const offsetValue = this.hasAttribute(
-            Attributes2.KEYBOARD_BACKWARD_SEEK_OFFSET
-          ) ? +this.getAttribute(Attributes2.KEYBOARD_BACKWARD_SEEK_OFFSET) : DEFAULT_SEEK_OFFSET;
+            Attributes4.KEYBOARD_BACKWARD_SEEK_OFFSET
+          ) ? +this.getAttribute(Attributes4.KEYBOARD_BACKWARD_SEEK_OFFSET) : DEFAULT_SEEK_OFFSET;
           detail = Math.max(
             ((_d = this.mediaStore.getState().mediaCurrentTime) != null ? _d : 0) - offsetValue,
             0
@@ -3841,8 +4365,8 @@ var mediaThemeMicrovideo = (() => {
         case "ArrowRight":
         case "l": {
           const offsetValue = this.hasAttribute(
-            Attributes2.KEYBOARD_FORWARD_SEEK_OFFSET
-          ) ? +this.getAttribute(Attributes2.KEYBOARD_FORWARD_SEEK_OFFSET) : DEFAULT_SEEK_OFFSET;
+            Attributes4.KEYBOARD_FORWARD_SEEK_OFFSET
+          ) ? +this.getAttribute(Attributes4.KEYBOARD_FORWARD_SEEK_OFFSET) : DEFAULT_SEEK_OFFSET;
           detail = Math.max(
             ((_e = this.mediaStore.getState().mediaCurrentTime) != null ? _e : 0) + offsetValue,
             0
@@ -3856,7 +4380,7 @@ var mediaThemeMicrovideo = (() => {
           break;
         }
         case "ArrowUp": {
-          const step = this.hasAttribute(Attributes2.KEYBOARD_UP_VOLUME_STEP) ? +this.getAttribute(Attributes2.KEYBOARD_UP_VOLUME_STEP) : DEFAULT_VOLUME_STEP;
+          const step = this.hasAttribute(Attributes4.KEYBOARD_UP_VOLUME_STEP) ? +this.getAttribute(Attributes4.KEYBOARD_UP_VOLUME_STEP) : DEFAULT_VOLUME_STEP;
           detail = Math.min(
             ((_f = this.mediaStore.getState().mediaVolume) != null ? _f : 1) + step,
             1
@@ -3870,7 +4394,7 @@ var mediaThemeMicrovideo = (() => {
           break;
         }
         case "ArrowDown": {
-          const step = this.hasAttribute(Attributes2.KEYBOARD_DOWN_VOLUME_STEP) ? +this.getAttribute(Attributes2.KEYBOARD_DOWN_VOLUME_STEP) : DEFAULT_VOLUME_STEP;
+          const step = this.hasAttribute(Attributes4.KEYBOARD_DOWN_VOLUME_STEP) ? +this.getAttribute(Attributes4.KEYBOARD_DOWN_VOLUME_STEP) : DEFAULT_VOLUME_STEP;
           detail = Math.max(
             ((_g = this.mediaStore.getState().mediaVolume) != null ? _g : 1) - step,
             0
@@ -3914,7 +4438,7 @@ var mediaThemeMicrovideo = (() => {
         case "/":
         case "?": {
           if (e.shiftKey) {
-            __privateMethod2(this, _showKeyboardShortcutsDialog, showKeyboardShortcutsDialog_fn).call(this);
+            __privateMethod3(this, _showKeyboardShortcutsDialog, showKeyboardShortcutsDialog_fn).call(this);
           }
           break;
         }
@@ -3947,56 +4471,66 @@ var mediaThemeMicrovideo = (() => {
       media: this.media,
       fullscreenElement: this.fullscreenElement,
       options: {
-        defaultSubtitles: this.hasAttribute(Attributes2.DEFAULT_SUBTITLES),
-        defaultDuration: this.hasAttribute(Attributes2.DEFAULT_DURATION) ? +this.getAttribute(Attributes2.DEFAULT_DURATION) : void 0,
+        defaultSubtitles: this.hasAttribute(Attributes4.DEFAULT_SUBTITLES),
+        defaultDuration: this.hasAttribute(Attributes4.DEFAULT_DURATION) ? +this.getAttribute(Attributes4.DEFAULT_DURATION) : void 0,
         defaultStreamType: (
           /** @type {import('./media-store/state-mediator.js').StreamTypeValue} */
           (_a3 = this.getAttribute(
-            Attributes2.DEFAULT_STREAM_TYPE
+            Attributes4.DEFAULT_STREAM_TYPE
           )) != null ? _a3 : void 0
         ),
-        liveEdgeOffset: this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0,
-        seekToLiveOffset: this.hasAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes2.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes2.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes2.LIVE_EDGE_OFFSET) : void 0,
-        noAutoSeekToLive: this.hasAttribute(Attributes2.NO_AUTO_SEEK_TO_LIVE),
+        liveEdgeOffset: this.hasAttribute(Attributes4.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes4.LIVE_EDGE_OFFSET) : void 0,
+        seekToLiveOffset: this.hasAttribute(Attributes4.SEEK_TO_LIVE_OFFSET) ? +this.getAttribute(Attributes4.SEEK_TO_LIVE_OFFSET) : this.hasAttribute(Attributes4.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes4.LIVE_EDGE_OFFSET) : void 0,
+        noAutoSeekToLive: this.hasAttribute(Attributes4.NO_AUTO_SEEK_TO_LIVE),
         // NOTE: This wasn't updated if it was changed later. Should it be? (CJP)
-        noVolumePref: this.hasAttribute(Attributes2.NO_VOLUME_PREF),
-        noMutedPref: this.hasAttribute(Attributes2.NO_MUTED_PREF),
+        noVolumePref: this.hasAttribute(Attributes4.NO_VOLUME_PREF),
+        noMutedPref: this.hasAttribute(Attributes4.NO_MUTED_PREF),
         noSubtitlesLangPref: this.hasAttribute(
-          Attributes2.NO_SUBTITLES_LANG_PREF
+          Attributes4.NO_SUBTITLES_LANG_PREF
         )
       }
     });
   };
   _keyUpHandler = /* @__PURE__ */ new WeakMap();
-  _keyDownHandler = /* @__PURE__ */ new WeakSet();
+  _keyDownHandler2 = /* @__PURE__ */ new WeakSet();
   keyDownHandler_fn = function(e) {
     var _a3;
     const { metaKey, altKey, key, shiftKey } = e;
     const isShiftSlash = shiftKey && (key === "/" || key === "?");
-    if (isShiftSlash && ((_a3 = __privateGet4(this, _keyboardShortcutsDialog)) == null ? void 0 : _a3.open)) {
-      this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
+    if (isShiftSlash && ((_a3 = __privateGet6(this, _keyboardShortcutsDialog)) == null ? void 0 : _a3.open)) {
+      this.removeEventListener("keyup", __privateGet6(this, _keyUpHandler));
       return;
     }
     if (metaKey || altKey || !isShiftSlash && !ButtonPressedKeys.includes(key)) {
-      this.removeEventListener("keyup", __privateGet4(this, _keyUpHandler));
+      this.removeEventListener("keyup", __privateGet6(this, _keyUpHandler));
       return;
     }
     const target = e.target;
     const isRangeInput = target instanceof HTMLElement && (target.tagName.toLowerCase() === "media-volume-range" || target.tagName.toLowerCase() === "media-time-range");
-    if ([" ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(key) && !(__privateGet4(this, _hotKeys).contains(`no${key.toLowerCase()}`) || key === " " && __privateGet4(this, _hotKeys).contains("nospace")) && !isRangeInput) {
+    if ([" ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(key) && !__privateGet6(this, _hotKeys).contains(getHotkeyToken(key)) && !isRangeInput) {
       e.preventDefault();
     }
-    this.addEventListener("keyup", __privateGet4(this, _keyUpHandler), { once: true });
+    this.addEventListener("keyup", __privateGet6(this, _keyUpHandler), { once: true });
+  };
+  _syncKeyboardShortcutsDialog = /* @__PURE__ */ new WeakSet();
+  syncKeyboardShortcutsDialog_fn = function() {
+    if (!__privateGet6(this, _keyboardShortcutsDialog))
+      return;
+    __privateGet6(this, _keyboardShortcutsDialog).hotkeys = __privateGet6(this, _hotKeys).value || void 0;
+    if (this.noHotkeys || __privateGet6(this, _hotKeys).contains("noshift+/")) {
+      __privateGet6(this, _keyboardShortcutsDialog).open = false;
+    }
   };
   _showKeyboardShortcutsDialog = /* @__PURE__ */ new WeakSet();
   showKeyboardShortcutsDialog_fn = function() {
-    if (!__privateGet4(this, _keyboardShortcutsDialog)) {
-      __privateSet4(this, _keyboardShortcutsDialog, Document2.createElement(
+    if (!__privateGet6(this, _keyboardShortcutsDialog)) {
+      __privateSet5(this, _keyboardShortcutsDialog, Document2.createElement(
         "media-keyboard-shortcuts-dialog"
       ));
-      this.appendChild(__privateGet4(this, _keyboardShortcutsDialog));
+      __privateMethod3(this, _syncKeyboardShortcutsDialog, syncKeyboardShortcutsDialog_fn).call(this);
+      this.appendChild(__privateGet6(this, _keyboardShortcutsDialog));
     }
-    __privateGet4(this, _keyboardShortcutsDialog).open = true;
+    __privateGet6(this, _keyboardShortcutsDialog).open = true;
   };
   var MEDIA_UI_ATTRIBUTE_NAMES2 = Object.values(MediaUIAttributes);
   var MEDIA_UI_PROP_NAMES = Object.values(MediaUIProps);
@@ -4203,11 +4737,11 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-tooltip.js
-  var Attributes3 = {
+  var Attributes5 = {
     PLACEMENT: "placement",
     BOUNDS: "bounds"
   };
-  function getTemplateHTML3(_attrs) {
+  function getTemplateHTML4(_attrs) {
     return (
       /*html*/
       `
@@ -4375,71 +4909,73 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     static get observedAttributes() {
-      return [Attributes3.PLACEMENT, Attributes3.BOUNDS];
+      return [Attributes5.PLACEMENT, Attributes5.BOUNDS];
     }
     /**
      * Get or set tooltip placement
      */
     get placement() {
-      return getStringAttr(this, Attributes3.PLACEMENT);
+      return getStringAttr(this, Attributes5.PLACEMENT);
     }
     set placement(value) {
-      setStringAttr(this, Attributes3.PLACEMENT, value);
+      setStringAttr(this, Attributes5.PLACEMENT, value);
     }
     /**
      * Get or set tooltip container ID selector that will constrain the tooltips
      * horizontal position.
      */
     get bounds() {
-      return getStringAttr(this, Attributes3.BOUNDS);
+      return getStringAttr(this, Attributes5.BOUNDS);
     }
     set bounds(value) {
-      setStringAttr(this, Attributes3.BOUNDS, value);
+      setStringAttr(this, Attributes5.BOUNDS, value);
     }
   };
   MediaTooltip.shadowRootOptions = { mode: "open" };
-  MediaTooltip.getTemplateHTML = getTemplateHTML3;
+  MediaTooltip.getTemplateHTML = getTemplateHTML4;
   if (!GlobalThis.customElements.get("media-tooltip")) {
     GlobalThis.customElements.define("media-tooltip", MediaTooltip);
   }
   var media_tooltip_default = MediaTooltip;
 
   // ../../node_modules/media-chrome/dist/media-chrome-button.js
-  var __accessCheck5 = (obj, member, msg) => {
+  var __accessCheck7 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet5 = (obj, member, getter) => {
-    __accessCheck5(obj, member, "read from private field");
+  var __privateGet7 = (obj, member, getter) => {
+    __accessCheck7(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd5 = (obj, member, value) => {
+  var __privateAdd7 = (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 __privateSet5 = (obj, member, value, setter) => {
-    __accessCheck5(obj, member, "write to private field");
+  var __privateSet6 = (obj, member, value, setter) => {
+    __accessCheck7(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
-  var __privateMethod3 = (obj, member, method) => {
-    __accessCheck5(obj, member, "access private method");
+  var __privateMethod4 = (obj, member, method) => {
+    __accessCheck7(obj, member, "access private method");
     return method;
   };
   var _mediaController2;
   var _clickListener;
+  var _isTooltipShown;
+  var isTooltipShown_fn;
   var _positionTooltip;
   var _keyupListener;
   var _keydownListener;
   var _setupTooltip;
   var setupTooltip_fn;
-  var Attributes4 = {
+  var Attributes6 = {
     TOOLTIP_PLACEMENT: "tooltipplacement",
     DISABLED: "disabled",
     NO_TOOLTIP: "notooltip"
   };
-  function getTemplateHTML4(_attrs, _props = {}) {
+  function getTemplateHTML5(_attrs, _props = {}) {
     return (
       /*html*/
       `
@@ -4540,7 +5076,7 @@ var mediaThemeMicrovideo = (() => {
   `
     );
   }
-  function getSlotTemplateHTML(_attrs, _props) {
+  function getSlotTemplateHTML3(_attrs, _props) {
     return (
       /*html*/
       `
@@ -4554,37 +5090,38 @@ var mediaThemeMicrovideo = (() => {
   var MediaChromeButton = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd5(this, _setupTooltip);
-      __privateAdd5(this, _mediaController2, void 0);
+      __privateAdd7(this, _isTooltipShown);
+      __privateAdd7(this, _setupTooltip);
+      __privateAdd7(this, _mediaController2, void 0);
       this.preventClick = false;
       this.tooltipEl = null;
-      __privateAdd5(this, _clickListener, (e) => {
+      __privateAdd7(this, _clickListener, (e) => {
         if (!this.preventClick) {
           this.handleClick(e);
         }
-        setTimeout(__privateGet5(this, _positionTooltip), 0);
+        setTimeout(__privateGet7(this, _positionTooltip), 0);
       });
-      __privateAdd5(this, _positionTooltip, () => {
+      __privateAdd7(this, _positionTooltip, () => {
         var _a3, _b2;
         (_b2 = (_a3 = this.tooltipEl) == null ? void 0 : _a3.updateXOffset) == null ? void 0 : _b2.call(_a3);
       });
-      __privateAdd5(this, _keyupListener, (e) => {
+      __privateAdd7(this, _keyupListener, (e) => {
         const { key } = e;
         if (!this.keysUsed.includes(key)) {
-          this.removeEventListener("keyup", __privateGet5(this, _keyupListener));
+          this.removeEventListener("keyup", __privateGet7(this, _keyupListener));
           return;
         }
         if (!this.preventClick) {
           this.handleClick(e);
         }
       });
-      __privateAdd5(this, _keydownListener, (e) => {
+      __privateAdd7(this, _keydownListener, (e) => {
         const { metaKey, altKey, key } = e;
         if (metaKey || altKey || !this.keysUsed.includes(key)) {
-          this.removeEventListener("keyup", __privateGet5(this, _keyupListener));
+          this.removeEventListener("keyup", __privateGet7(this, _keyupListener));
           return;
         }
-        this.addEventListener("keyup", __privateGet5(this, _keyupListener), { once: true });
+        this.addEventListener("keyup", __privateGet7(this, _keyupListener), { once: true });
       });
       if (!this.shadowRoot) {
         this.attachShadow(this.constructor.shadowRootOptions);
@@ -4597,32 +5134,32 @@ var mediaThemeMicrovideo = (() => {
     static get observedAttributes() {
       return [
         "disabled",
-        Attributes4.TOOLTIP_PLACEMENT,
+        Attributes6.TOOLTIP_PLACEMENT,
         MediaStateReceiverAttributes.MEDIA_CONTROLLER,
         MediaUIAttributes.MEDIA_LANG
       ];
     }
     enable() {
-      this.addEventListener("click", __privateGet5(this, _clickListener));
-      this.addEventListener("keydown", __privateGet5(this, _keydownListener));
+      this.addEventListener("click", __privateGet7(this, _clickListener));
+      this.addEventListener("keydown", __privateGet7(this, _keydownListener));
       this.tabIndex = 0;
     }
     disable() {
-      this.removeEventListener("click", __privateGet5(this, _clickListener));
-      this.removeEventListener("keydown", __privateGet5(this, _keydownListener));
-      this.removeEventListener("keyup", __privateGet5(this, _keyupListener));
+      this.removeEventListener("click", __privateGet7(this, _clickListener));
+      this.removeEventListener("keydown", __privateGet7(this, _keydownListener));
+      this.removeEventListener("keyup", __privateGet7(this, _keyupListener));
       this.tabIndex = -1;
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       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);
-          __privateSet5(this, _mediaController2, null);
+          (_b2 = (_a3 = __privateGet7(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          __privateSet6(this, _mediaController2, null);
         }
         if (newValue && this.isConnected) {
-          __privateSet5(this, _mediaController2, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
-          (_e = (_d = __privateGet5(this, _mediaController2)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+          __privateSet6(this, _mediaController2, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
+          (_e = (_d = __privateGet7(this, _mediaController2)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
         }
       } else if (attrName === "disabled" && newValue !== oldValue) {
         if (newValue == null) {
@@ -4630,12 +5167,14 @@ var mediaThemeMicrovideo = (() => {
         } else {
           this.disable();
         }
-      } else if (attrName === Attributes4.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
+      } else if (attrName === Attributes6.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
         this.tooltipEl.placement = newValue;
       } else if (attrName === MediaUIAttributes.MEDIA_LANG) {
         this.shadowRoot.querySelector('slot[name="tooltip-content"]').innerHTML = this.constructor.getTooltipContentHTML();
       }
-      __privateGet5(this, _positionTooltip).call(this);
+      if (__privateMethod4(this, _isTooltipShown, isTooltipShown_fn).call(this)) {
+        __privateGet7(this, _positionTooltip).call(this);
+      }
     }
     connectedCallback() {
       var _a3, _b2, _c;
@@ -4654,24 +5193,24 @@ var mediaThemeMicrovideo = (() => {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       );
       if (mediaControllerId) {
-        __privateSet5(
+        __privateSet6(
           this,
           _mediaController2,
           // @ts-ignore
           (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId)
         );
-        (_c = (_b2 = __privateGet5(this, _mediaController2)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+        (_c = (_b2 = __privateGet7(this, _mediaController2)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
-      GlobalThis.customElements.whenDefined("media-tooltip").then(() => __privateMethod3(this, _setupTooltip, setupTooltip_fn).call(this));
+      GlobalThis.customElements.whenDefined("media-tooltip").then(() => __privateMethod4(this, _setupTooltip, setupTooltip_fn).call(this));
     }
     disconnectedCallback() {
       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", __privateGet5(this, _positionTooltip));
-      this.removeEventListener("focus", __privateGet5(this, _positionTooltip));
-      this.removeEventListener("click", __privateGet5(this, _clickListener));
+      (_b2 = (_a3 = __privateGet7(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet6(this, _mediaController2, null);
+      this.removeEventListener("mouseenter", __privateGet7(this, _positionTooltip));
+      this.removeEventListener("focus", __privateGet7(this, _positionTooltip));
+      this.removeEventListener("click", __privateGet7(this, _clickListener));
     }
     get keysUsed() {
       return ["Enter", " "];
@@ -4680,10 +5219,10 @@ var mediaThemeMicrovideo = (() => {
      * Get or set tooltip placement
      */
     get tooltipPlacement() {
-      return getStringAttr(this, Attributes4.TOOLTIP_PLACEMENT);
+      return getStringAttr(this, Attributes6.TOOLTIP_PLACEMENT);
     }
     set tooltipPlacement(value) {
-      setStringAttr(this, Attributes4.TOOLTIP_PLACEMENT, value);
+      setStringAttr(this, Attributes6.TOOLTIP_PLACEMENT, value);
     }
     get mediaController() {
       return getStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER);
@@ -4692,16 +5231,16 @@ var mediaThemeMicrovideo = (() => {
       setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
     }
     get disabled() {
-      return getBooleanAttr(this, Attributes4.DISABLED);
+      return getBooleanAttr(this, Attributes6.DISABLED);
     }
     set disabled(value) {
-      setBooleanAttr(this, Attributes4.DISABLED, value);
+      setBooleanAttr(this, Attributes6.DISABLED, value);
     }
     get noTooltip() {
-      return getBooleanAttr(this, Attributes4.NO_TOOLTIP);
+      return getBooleanAttr(this, Attributes6.NO_TOOLTIP);
     }
     set noTooltip(value) {
-      setBooleanAttr(this, Attributes4.NO_TOOLTIP, value);
+      setBooleanAttr(this, Attributes6.NO_TOOLTIP, value);
     }
     /**
      * @abstract
@@ -4711,22 +5250,30 @@ var mediaThemeMicrovideo = (() => {
   };
   _mediaController2 = /* @__PURE__ */ new WeakMap();
   _clickListener = /* @__PURE__ */ new WeakMap();
+  _isTooltipShown = /* @__PURE__ */ new WeakSet();
+  isTooltipShown_fn = function() {
+    try {
+      return this.matches(":hover, :focus-visible");
+    } catch {
+      return this.matches(":hover, :focus");
+    }
+  };
   _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));
+    this.addEventListener("mouseenter", __privateGet7(this, _positionTooltip));
+    this.addEventListener("focus", __privateGet7(this, _positionTooltip));
+    this.addEventListener("click", __privateGet7(this, _clickListener));
     const initialPlacement = this.tooltipPlacement;
     if (initialPlacement && this.tooltipEl) {
       this.tooltipEl.placement = initialPlacement;
     }
   };
   MediaChromeButton.shadowRootOptions = { mode: "open" };
-  MediaChromeButton.getTemplateHTML = getTemplateHTML4;
-  MediaChromeButton.getSlotTemplateHTML = getSlotTemplateHTML;
+  MediaChromeButton.getTemplateHTML = getTemplateHTML5;
+  MediaChromeButton.getSlotTemplateHTML = getSlotTemplateHTML3;
   MediaChromeButton.getTooltipContentHTML = getTooltipContentHTML;
   if (!GlobalThis.customElements.get("media-chrome-button")) {
     GlobalThis.customElements.define("media-chrome-button", MediaChromeButton);
@@ -4737,7 +5284,7 @@ var mediaThemeMicrovideo = (() => {
   <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>
 `;
-  function getSlotTemplateHTML2(_attrs) {
+  function getSlotTemplateHTML4(_attrs) {
     return (
       /*html*/
       `
@@ -4825,7 +5372,7 @@ var mediaThemeMicrovideo = (() => {
       this.dispatchEvent(evt);
     }
   };
-  MediaAirplayButton.getSlotTemplateHTML = getSlotTemplateHTML2;
+  MediaAirplayButton.getSlotTemplateHTML = getSlotTemplateHTML4;
   MediaAirplayButton.getTooltipContentHTML = getTooltipContentHTML2;
   if (!GlobalThis.customElements.get("media-airplay-button")) {
     GlobalThis.customElements.define("media-airplay-button", MediaAirplayButton);
@@ -4838,7 +5385,7 @@ var mediaThemeMicrovideo = (() => {
   var ccIconOff = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M17.73 14.09a1.4 1.4 0 0 1-1 .37 1.579 1.579 0 0 1-1.27-.58A3 3 0 0 1 15 12a2.8 2.8 0 0 1 .5-1.85 1.63 1.63 0 0 1 1.29-.57 1.47 1.47 0 0 1 1.51 1.2l1.43-.34A2.89 2.89 0 0 0 19 9.07a3 3 0 0 0-2.14-.78 3.14 3.14 0 0 0-2.42 1 3.91 3.91 0 0 0-.93 2.78 3.74 3.74 0 0 0 .92 2.66 3.07 3.07 0 0 0 2.34 1 3.07 3.07 0 0 0 1.91-.57 3.17 3.17 0 0 0 1.07-1.74l-1.4-.45c-.083.43-.3.822-.62 1.12Zm-7.22 0a1.43 1.43 0 0 1-1 .37 1.58 1.58 0 0 1-1.27-.58A3 3 0 0 1 7.76 12a2.8 2.8 0 0 1 .5-1.85 1.63 1.63 0 0 1 1.29-.57 1.47 1.47 0 0 1 1.51 1.2l1.43-.34a2.81 2.81 0 0 0-.74-1.32 2.94 2.94 0 0 0-2.13-.78 3.18 3.18 0 0 0-2.43 1 4 4 0 0 0-.92 2.78 3.74 3.74 0 0 0 .92 2.66 3.07 3.07 0 0 0 2.34 1 3.07 3.07 0 0 0 1.91-.57 3.23 3.23 0 0 0 1.07-1.74l-1.4-.45a2.06 2.06 0 0 1-.6 1.07Zm12.32-8.41a2.59 2.59 0 0 0-2.3-2.51C18.72 3.05 15.86 3 13 3c-2.86 0-5.72.05-7.53.17a2.59 2.59 0 0 0-2.3 2.51c-.23 4.207-.23 8.423 0 12.63a2.57 2.57 0 0 0 2.3 2.5c1.81.13 4.67.19 7.53.19 2.86 0 5.72-.06 7.53-.19a2.57 2.57 0 0 0 2.3-2.5c.23-4.207.23-8.423 0-12.63Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.14-.21-8.29 0-12.43a1.11 1.11 0 0 1 .91-1.11C7.24 4.56 10 4.49 13 4.49s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.14.21 8.29 0 12.43Z"/>
 </svg>`;
-  function getSlotTemplateHTML3(_attrs) {
+  function getSlotTemplateHTML5(_attrs) {
     return (
       /*html*/
       `
@@ -4930,7 +5477,7 @@ var mediaThemeMicrovideo = (() => {
       );
     }
   };
-  MediaCaptionsButton.getSlotTemplateHTML = getSlotTemplateHTML3;
+  MediaCaptionsButton.getSlotTemplateHTML = getSlotTemplateHTML5;
   MediaCaptionsButton.getTooltipContentHTML = getTooltipContentHTML3;
   var getSubtitlesListAttr = (el, attrName) => {
     const attrVal = el.getAttribute(attrName);
@@ -4957,7 +5504,7 @@ var mediaThemeMicrovideo = (() => {
   // ../../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>`;
-  function getSlotTemplateHTML4(_attrs) {
+  function getSlotTemplateHTML6(_attrs) {
     return (
       /*html*/
       `
@@ -5034,294 +5581,40 @@ var mediaThemeMicrovideo = (() => {
     set mediaCastUnavailable(value) {
       setStringAttr(this, MediaUIAttributes.MEDIA_CAST_UNAVAILABLE, value);
     }
-    handleClick() {
-      const eventName = this.mediaIsCasting ? MediaUIEvents.MEDIA_EXIT_CAST_REQUEST : MediaUIEvents.MEDIA_ENTER_CAST_REQUEST;
-      this.dispatchEvent(
-        new GlobalThis.CustomEvent(eventName, { composed: true, bubbles: true })
-      );
-    }
-  };
-  MediaCastButton.getSlotTemplateHTML = getSlotTemplateHTML4;
-  MediaCastButton.getTooltipContentHTML = getTooltipContentHTML4;
-  if (!GlobalThis.customElements.get("media-cast-button")) {
-    GlobalThis.customElements.define("media-cast-button", MediaCastButton);
-  }
-
-  // ../../node_modules/media-chrome/dist/media-chrome-dialog.js
-  var __accessCheck6 = (obj, member, msg) => {
-    if (!member.has(obj))
-      throw TypeError("Cannot " + msg);
-  };
-  var __privateGet6 = (obj, member, getter) => {
-    __accessCheck6(obj, member, "read from private field");
-    return getter ? getter.call(obj) : member.get(obj);
-  };
-  var __privateAdd6 = (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 __privateSet6 = (obj, member, value, setter) => {
-    __accessCheck6(obj, member, "write to private field");
-    setter ? setter.call(obj, value) : member.set(obj, value);
-    return value;
-  };
-  var __privateMethod4 = (obj, member, method) => {
-    __accessCheck6(obj, member, "access private method");
-    return method;
-  };
-  var _isInit;
-  var _previouslyFocused;
-  var _invokerElement;
-  var _init;
-  var init_fn;
-  var _handleOpen;
-  var handleOpen_fn;
-  var _handleClosed;
-  var handleClosed_fn;
-  var _handleInvoke;
-  var handleInvoke_fn;
-  var _handleFocusOut;
-  var handleFocusOut_fn;
-  var _handleKeyDown;
-  var handleKeyDown_fn;
-  function getTemplateHTML5(_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;
-        ${/** The hide transition is defined below after a short delay. */
-      ""}
-        transition-behavior: allow-discrete;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(2px) scale(.99);
-        pointer-events: none;
-      }
-
-      :host([open]) {
-        transition: display .2s, visibility 0s, opacity .2s ease-out, transform .15s ease-out;
-        visibility: visible;
-        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 getSlotTemplateHTML5(_attrs) {
-    return (
-      /*html*/
-      `
-    <slot id="content"></slot>
-  `
-    );
-  }
-  var Attributes5 = {
-    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);
-    }
-    static get observedAttributes() {
-      return [Attributes5.OPEN, Attributes5.ANCHOR];
-    }
-    get open() {
-      return getBooleanAttr(this, Attributes5.OPEN);
-    }
-    set open(value) {
-      setBooleanAttr(this, Attributes5.OPEN, value);
-    }
-    handleEvent(event) {
-      switch (event.type) {
-        case "invoke":
-          __privateMethod4(this, _handleInvoke, handleInvoke_fn).call(this, event);
-          break;
-        case "focusout":
-          __privateMethod4(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
-          break;
-        case "keydown":
-          __privateMethod4(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
-          break;
-      }
-    }
-    connectedCallback() {
-      __privateMethod4(this, _init, init_fn).call(this);
-      if (!this.role) {
-        this.role = "dialog";
-      }
-      this.addEventListener("invoke", this);
-      this.addEventListener("focusout", this);
-      this.addEventListener("keydown", this);
-    }
-    disconnectedCallback() {
-      this.removeEventListener("invoke", this);
-      this.removeEventListener("focusout", this);
-      this.removeEventListener("keydown", this);
-    }
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      __privateMethod4(this, _init, init_fn).call(this);
-      if (attrName === Attributes5.OPEN && newValue !== oldValue) {
-        if (this.open) {
-          __privateMethod4(this, _handleOpen, handleOpen_fn).call(this);
-        } else {
-          __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"]'
-      );
-      focusable == null ? void 0 : focusable.focus();
-    }
-    get keysUsed() {
-      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(this.constructor.shadowRootOptions);
-      const attrs = namedNodeMapToObject(this.attributes);
-      this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
-      queueMicrotask(() => {
-        const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
-        style.setProperty(
-          "transition",
-          `display .15s, visibility .15s, opacity .15s ease-in, transform .15s ease-in`
-        );
-      });
-    }
-  };
-  _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.open = !this.open;
-    }
-  };
-  _handleFocusOut = /* @__PURE__ */ new WeakSet();
-  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.open) {
-        this.open = false;
-      }
-    }
-  };
-  _handleKeyDown = /* @__PURE__ */ new WeakSet();
-  handleKeyDown_fn = function(event) {
-    var _a3, _b2, _c, _d, _e;
-    const { key, ctrlKey, altKey, metaKey } = event;
-    if (ctrlKey || altKey || metaKey) {
-      return;
-    }
-    if (!this.keysUsed.includes(key)) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    if (key === "Tab") {
-      if (event.shiftKey) {
-        (_b2 = (_a3 = this.previousElementSibling) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3);
-      } else {
-        (_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
-      }
-      this.blur();
-    } else if (key === "Escape") {
-      (_e = __privateGet6(this, _previouslyFocused)) == null ? void 0 : _e.focus();
-      this.open = false;
-    }
+    handleClick() {
+      const eventName = this.mediaIsCasting ? MediaUIEvents.MEDIA_EXIT_CAST_REQUEST : MediaUIEvents.MEDIA_ENTER_CAST_REQUEST;
+      this.dispatchEvent(
+        new GlobalThis.CustomEvent(eventName, { composed: true, bubbles: true })
+      );
+    }
   };
-  MediaChromeDialog.shadowRootOptions = { mode: "open" };
-  MediaChromeDialog.getTemplateHTML = getTemplateHTML5;
-  MediaChromeDialog.getSlotTemplateHTML = getSlotTemplateHTML5;
-  if (!GlobalThis.customElements.get("media-chrome-dialog")) {
-    GlobalThis.customElements.define("media-chrome-dialog", MediaChromeDialog);
+  MediaCastButton.getSlotTemplateHTML = getSlotTemplateHTML6;
+  MediaCastButton.getTooltipContentHTML = getTooltipContentHTML4;
+  if (!GlobalThis.customElements.get("media-cast-button")) {
+    GlobalThis.customElements.define("media-cast-button", MediaCastButton);
   }
 
   // ../../node_modules/media-chrome/dist/media-chrome-range.js
-  var __accessCheck7 = (obj, member, msg) => {
+  var __accessCheck8 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet7 = (obj, member, getter) => {
-    __accessCheck7(obj, member, "read from private field");
+  var __privateGet8 = (obj, member, getter) => {
+    __accessCheck8(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd7 = (obj, member, value) => {
+  var __privateAdd8 = (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 __privateSet7 = (obj, member, value, setter) => {
-    __accessCheck7(obj, member, "write to private field");
+    __accessCheck8(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
   var __privateMethod5 = (obj, member, method) => {
-    __accessCheck7(obj, member, "access private method");
+    __accessCheck8(obj, member, "access private method");
     return method;
   };
   var _mediaController3;
@@ -5611,21 +5904,21 @@ var mediaThemeMicrovideo = (() => {
   var MediaChromeRange = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd7(this, _updateActiveSegment);
-      __privateAdd7(this, _enableUserEvents);
-      __privateAdd7(this, _disableUserEvents);
-      __privateAdd7(this, _handlePointerDown);
-      __privateAdd7(this, _handlePointerEnter);
-      __privateAdd7(this, _handlePointerUp2);
-      __privateAdd7(this, _handlePointerLeave);
-      __privateAdd7(this, _handlePointerMove2);
-      __privateAdd7(this, _mediaController3, void 0);
-      __privateAdd7(this, _isInputTarget, void 0);
-      __privateAdd7(this, _startpoint, void 0);
-      __privateAdd7(this, _endpoint, void 0);
-      __privateAdd7(this, _cssRules, {});
-      __privateAdd7(this, _segments, []);
-      __privateAdd7(this, _onFocusIn, () => {
+      __privateAdd8(this, _updateActiveSegment);
+      __privateAdd8(this, _enableUserEvents);
+      __privateAdd8(this, _disableUserEvents);
+      __privateAdd8(this, _handlePointerDown);
+      __privateAdd8(this, _handlePointerEnter);
+      __privateAdd8(this, _handlePointerUp2);
+      __privateAdd8(this, _handlePointerLeave);
+      __privateAdd8(this, _handlePointerMove2);
+      __privateAdd8(this, _mediaController3, void 0);
+      __privateAdd8(this, _isInputTarget, void 0);
+      __privateAdd8(this, _startpoint, void 0);
+      __privateAdd8(this, _endpoint, void 0);
+      __privateAdd8(this, _cssRules, {});
+      __privateAdd8(this, _segments, []);
+      __privateAdd8(this, _onFocusIn, () => {
         if (this.range.matches(":focus-visible")) {
           const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
           style.setProperty(
@@ -5634,11 +5927,11 @@ var mediaThemeMicrovideo = (() => {
           );
         }
       });
-      __privateAdd7(this, _onFocusOut, () => {
+      __privateAdd8(this, _onFocusOut, () => {
         const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
         style.removeProperty("--_focus-visible-box-shadow");
       });
-      __privateAdd7(this, _updateComputedStyles, () => {
+      __privateAdd8(this, _updateComputedStyles, () => {
         const clipping = this.shadowRoot.querySelector("#segments-clipping");
         if (clipping)
           clipping.parentNode.append(clipping);
@@ -5666,12 +5959,12 @@ var mediaThemeMicrovideo = (() => {
       var _a3, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a3 = __privateGet8(this, _mediaController3)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
           __privateSet7(this, _mediaController3, null);
         }
         if (newValue && this.isConnected) {
           __privateSet7(this, _mediaController3, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
-          (_e = (_d = __privateGet7(this, _mediaController3)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+          (_e = (_d = __privateGet8(this, _mediaController3)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
         }
       } else if (attrName === "disabled" || attrName === "aria-disabled" && oldValue !== newValue) {
         if (newValue == null) {
@@ -5690,13 +5983,13 @@ var mediaThemeMicrovideo = (() => {
         "display",
         `var(--media-control-display, var(--${this.localName}-display, inline-flex))`
       );
-      __privateGet7(this, _cssRules).pointer = getOrInsertCSSRule(this.shadowRoot, "#pointer");
-      __privateGet7(this, _cssRules).progress = getOrInsertCSSRule(this.shadowRoot, "#progress");
-      __privateGet7(this, _cssRules).thumb = getOrInsertCSSRule(
+      __privateGet8(this, _cssRules).pointer = getOrInsertCSSRule(this.shadowRoot, "#pointer");
+      __privateGet8(this, _cssRules).progress = getOrInsertCSSRule(this.shadowRoot, "#progress");
+      __privateGet8(this, _cssRules).thumb = getOrInsertCSSRule(
         this.shadowRoot,
         '#thumb, ::slotted([slot="thumb"])'
       );
-      __privateGet7(this, _cssRules).activeSegment = getOrInsertCSSRule(
+      __privateGet8(this, _cssRules).activeSegment = getOrInsertCSSRule(
         this.shadowRoot,
         "#segments-clipping rect:nth-child(0)"
       );
@@ -5707,26 +6000,26 @@ var mediaThemeMicrovideo = (() => {
         __privateSet7(this, _mediaController3, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
           mediaControllerId
         ));
-        (_c = (_b2 = __privateGet7(this, _mediaController3)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+        (_c = (_b2 = __privateGet8(this, _mediaController3)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
       this.updateBar();
-      this.shadowRoot.addEventListener("focusin", __privateGet7(this, _onFocusIn));
-      this.shadowRoot.addEventListener("focusout", __privateGet7(this, _onFocusOut));
+      this.shadowRoot.addEventListener("focusin", __privateGet8(this, _onFocusIn));
+      this.shadowRoot.addEventListener("focusout", __privateGet8(this, _onFocusOut));
       __privateMethod5(this, _enableUserEvents, enableUserEvents_fn).call(this);
-      observeResize(this.container, __privateGet7(this, _updateComputedStyles));
+      observeResize(this.container, __privateGet8(this, _updateComputedStyles));
     }
     disconnectedCallback() {
       var _a3, _b2;
       __privateMethod5(this, _disableUserEvents, disableUserEvents_fn).call(this);
-      (_b2 = (_a3 = __privateGet7(this, _mediaController3)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a3 = __privateGet8(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));
-      this.shadowRoot.removeEventListener("focusout", __privateGet7(this, _onFocusOut));
-      unobserveResize(this.container, __privateGet7(this, _updateComputedStyles));
+      this.shadowRoot.removeEventListener("focusin", __privateGet8(this, _onFocusIn));
+      this.shadowRoot.removeEventListener("focusout", __privateGet8(this, _onFocusOut));
+      unobserveResize(this.container, __privateGet8(this, _updateComputedStyles));
     }
     updatePointerBar(evt) {
       var _a3;
-      (_a3 = __privateGet7(this, _cssRules).pointer) == null ? void 0 : _a3.style.setProperty(
+      (_a3 = __privateGet8(this, _cssRules).pointer) == null ? void 0 : _a3.style.setProperty(
         "width",
         `${this.getPointerRatio(evt) * 100}%`
       );
@@ -5734,8 +6027,8 @@ var mediaThemeMicrovideo = (() => {
     updateBar() {
       var _a3, _b2;
       const rangePercent = this.range.valueAsNumber * 100;
-      (_a3 = __privateGet7(this, _cssRules).progress) == null ? void 0 : _a3.style.setProperty("width", `${rangePercent}%`);
-      (_b2 = __privateGet7(this, _cssRules).thumb) == null ? void 0 : _b2.style.setProperty("left", `${rangePercent}%`);
+      (_a3 = __privateGet8(this, _cssRules).progress) == null ? void 0 : _a3.style.setProperty("width", `${rangePercent}%`);
+      (_b2 = __privateGet8(this, _cssRules).thumb) == null ? void 0 : _b2.style.setProperty("left", `${rangePercent}%`);
     }
     updateSegments(segments) {
       const clipping = this.shadowRoot.querySelector("#segments-clipping");
@@ -5774,8 +6067,8 @@ var mediaThemeMicrovideo = (() => {
       return getPointProgressOnLine(
         evt.clientX,
         evt.clientY,
-        __privateGet7(this, _startpoint).getBoundingClientRect(),
-        __privateGet7(this, _endpoint).getBoundingClientRect()
+        __privateGet8(this, _startpoint).getBoundingClientRect(),
+        __privateGet8(this, _endpoint).getBoundingClientRect()
       );
     }
     get dragging() {
@@ -5818,11 +6111,11 @@ var mediaThemeMicrovideo = (() => {
   _updateComputedStyles = /* @__PURE__ */ new WeakMap();
   _updateActiveSegment = /* @__PURE__ */ new WeakSet();
   updateActiveSegment_fn = function(evt) {
-    const rule = __privateGet7(this, _cssRules).activeSegment;
+    const rule = __privateGet8(this, _cssRules).activeSegment;
     if (!rule)
       return;
     const pointerRatio = this.getPointerRatio(evt);
-    const segmentIndex = __privateGet7(this, _segments).findIndex((start, i, arr) => {
+    const segmentIndex = __privateGet8(this, _segments).findIndex((start, i, arr) => {
       const end = arr[i + 1];
       return end != null && pointerRatio >= start && pointerRatio <= end;
     });
@@ -5881,7 +6174,7 @@ var mediaThemeMicrovideo = (() => {
     (_a3 = GlobalThis.window) == null ? void 0 : _a3.removeEventListener("pointermove", this);
     this.toggleAttribute("dragging", false);
     this.range.disabled = this.hasAttribute("disabled");
-    (_b2 = __privateGet7(this, _cssRules).activeSegment) == null ? void 0 : _b2.style.removeProperty("transform");
+    (_b2 = __privateGet8(this, _cssRules).activeSegment) == null ? void 0 : _b2.style.removeProperty("transform");
   };
   _handlePointerMove2 = /* @__PURE__ */ new WeakSet();
   handlePointerMove_fn2 = function(evt) {
@@ -5894,7 +6187,7 @@ var mediaThemeMicrovideo = (() => {
     );
     this.updatePointerBar(evt);
     __privateMethod5(this, _updateActiveSegment, updateActiveSegment_fn).call(this, evt);
-    if (this.dragging && (evt.pointerType !== "mouse" || !__privateGet7(this, _isInputTarget))) {
+    if (this.dragging && (evt.pointerType !== "mouse" || !__privateGet8(this, _isInputTarget))) {
       this.range.disabled = true;
       this.range.valueAsNumber = this.getPointerRatio(evt);
       this.range.dispatchEvent(
@@ -5910,21 +6203,21 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-control-bar.js
-  var __accessCheck8 = (obj, member, msg) => {
+  var __accessCheck9 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet8 = (obj, member, getter) => {
-    __accessCheck8(obj, member, "read from private field");
+  var __privateGet9 = (obj, member, getter) => {
+    __accessCheck9(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd8 = (obj, member, value) => {
+  var __privateAdd9 = (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 __privateSet8 = (obj, member, value, setter) => {
-    __accessCheck8(obj, member, "write to private field");
+    __accessCheck9(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -5965,7 +6258,7 @@ var mediaThemeMicrovideo = (() => {
   var MediaControlBar = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd8(this, _mediaController4, void 0);
+      __privateAdd9(this, _mediaController4, void 0);
       if (!this.shadowRoot) {
         this.attachShadow(this.constructor.shadowRootOptions);
         const attrs = namedNodeMapToObject(this.attributes);
@@ -5979,12 +6272,12 @@ var mediaThemeMicrovideo = (() => {
       var _a3, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet8(this, _mediaController4)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a3 = __privateGet9(this, _mediaController4)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
           __privateSet8(this, _mediaController4, null);
         }
         if (newValue && this.isConnected) {
           __privateSet8(this, _mediaController4, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
-          (_e = (_d = __privateGet8(this, _mediaController4)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+          (_e = (_d = __privateGet9(this, _mediaController4)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
         }
       }
     }
@@ -5997,12 +6290,12 @@ var mediaThemeMicrovideo = (() => {
         __privateSet8(this, _mediaController4, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
           mediaControllerId
         ));
-        (_c = (_b2 = __privateGet8(this, _mediaController4)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+        (_c = (_b2 = __privateGet9(this, _mediaController4)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
       var _a3, _b2;
-      (_b2 = (_a3 = __privateGet8(this, _mediaController4)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a3 = __privateGet9(this, _mediaController4)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
       __privateSet8(this, _mediaController4, null);
     }
   };
@@ -6014,21 +6307,21 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-text-display.js
-  var __accessCheck9 = (obj, member, msg) => {
+  var __accessCheck10 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet9 = (obj, member, getter) => {
-    __accessCheck9(obj, member, "read from private field");
+  var __privateGet10 = (obj, member, getter) => {
+    __accessCheck10(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd9 = (obj, member, value) => {
+  var __privateAdd10 = (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 __privateSet9 = (obj, member, value, setter) => {
-    __accessCheck9(obj, member, "write to private field");
+    __accessCheck10(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
@@ -6080,7 +6373,7 @@ var mediaThemeMicrovideo = (() => {
   `
     );
   }
-  function getSlotTemplateHTML6(_attrs, _props) {
+  function getSlotTemplateHTML7(_attrs, _props) {
     return (
       /*html*/
       `
@@ -6091,7 +6384,7 @@ var mediaThemeMicrovideo = (() => {
   var MediaTextDisplay = class extends GlobalThis.HTMLElement {
     constructor() {
       super();
-      __privateAdd9(this, _mediaController5, void 0);
+      __privateAdd10(this, _mediaController5, void 0);
       if (!this.shadowRoot) {
         this.attachShadow(this.constructor.shadowRootOptions);
         const attrs = namedNodeMapToObject(this.attributes);
@@ -6105,12 +6398,12 @@ var mediaThemeMicrovideo = (() => {
       var _a3, _b2, _c, _d, _e;
       if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
-          (_b2 = (_a3 = __privateGet9(this, _mediaController5)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          (_b2 = (_a3 = __privateGet10(this, _mediaController5)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
           __privateSet9(this, _mediaController5, null);
         }
         if (newValue && this.isConnected) {
           __privateSet9(this, _mediaController5, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
-          (_e = (_d = __privateGet9(this, _mediaController5)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+          (_e = (_d = __privateGet10(this, _mediaController5)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
         }
       }
     }
@@ -6128,44 +6421,44 @@ var mediaThemeMicrovideo = (() => {
         __privateSet9(this, _mediaController5, (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(
           mediaControllerId
         ));
-        (_c = (_b2 = __privateGet9(this, _mediaController5)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+        (_c = (_b2 = __privateGet10(this, _mediaController5)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
       }
     }
     disconnectedCallback() {
       var _a3, _b2;
-      (_b2 = (_a3 = __privateGet9(this, _mediaController5)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      (_b2 = (_a3 = __privateGet10(this, _mediaController5)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
       __privateSet9(this, _mediaController5, null);
     }
   };
   _mediaController5 = /* @__PURE__ */ new WeakMap();
   MediaTextDisplay.shadowRootOptions = { mode: "open" };
   MediaTextDisplay.getTemplateHTML = getTemplateHTML8;
-  MediaTextDisplay.getSlotTemplateHTML = getSlotTemplateHTML6;
+  MediaTextDisplay.getSlotTemplateHTML = getSlotTemplateHTML7;
   if (!GlobalThis.customElements.get("media-text-display")) {
     GlobalThis.customElements.define("media-text-display", MediaTextDisplay);
   }
 
   // ../../node_modules/media-chrome/dist/media-duration-display.js
-  var __accessCheck10 = (obj, member, msg) => {
+  var __accessCheck11 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
   };
-  var __privateGet10 = (obj, member, getter) => {
-    __accessCheck10(obj, member, "read from private field");
+  var __privateGet11 = (obj, member, getter) => {
+    __accessCheck11(obj, member, "read from private field");
     return getter ? getter.call(obj) : member.get(obj);
   };
-  var __privateAdd10 = (obj, member, value) => {
+  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 __privateSet10 = (obj, member, value, setter) => {
-    __accessCheck10(obj, member, "write to private field");
+    __accessCheck11(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
   var _slot;
-  function getSlotTemplateHTML7(_attrs, props) {
+  function getSlotTemplateHTML8(_attrs, props) {
     return (
       /*html*/
       `
@@ -6177,16 +6470,16 @@ var mediaThemeMicrovideo = (() => {
     constructor() {
       var _a3;
       super();
-      __privateAdd10(this, _slot, void 0);
+      __privateAdd11(this, _slot, void 0);
       __privateSet10(this, _slot, this.shadowRoot.querySelector("slot"));
-      __privateGet10(this, _slot).textContent = formatTime((_a3 = this.mediaDuration) != null ? _a3 : 0);
+      __privateGet11(this, _slot).textContent = formatTime((_a3 = this.mediaDuration) != null ? _a3 : 0);
     }
     static get observedAttributes() {
       return [...super.observedAttributes, MediaUIAttributes.MEDIA_DURATION];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       if (attrName === MediaUIAttributes.MEDIA_DURATION) {
-        __privateGet10(this, _slot).textContent = formatTime(+newValue);
+        __privateGet11(this, _slot).textContent = formatTime(+newValue);
       }
       super.attributeChangedCallback(attrName, oldValue, newValue);
     }
@@ -6201,7 +6494,7 @@ var mediaThemeMicrovideo = (() => {
     }
   };
   _slot = /* @__PURE__ */ new WeakMap();
-  MediaDurationDisplay.getSlotTemplateHTML = getSlotTemplateHTML7;
+  MediaDurationDisplay.getSlotTemplateHTML = getSlotTemplateHTML8;
   if (!GlobalThis.customElements.get("media-duration-display")) {
     GlobalThis.customElements.define(
       "media-duration-display",
@@ -6237,26 +6530,27 @@ var mediaThemeMicrovideo = (() => {
   };
 
   // ../../node_modules/media-chrome/dist/media-error-dialog.js
-  var __accessCheck11 = (obj, member, msg) => {
+  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");
+    __accessCheck12(obj, member, "write to private field");
     setter ? setter.call(obj, value) : member.set(obj, value);
     return value;
   };
   var _mediaError;
-  function getSlotTemplateHTML8(attrs) {
+  function getSlotTemplateHTML9(attrs) {
+    const code = +attrs.mediaerrorcode;
     return (
       /*html*/
       `
@@ -6275,8 +6569,8 @@ var mediaThemeMicrovideo = (() => {
         margin-block: 0 .3em;
       }
     </style>
-    <slot name="error-${attrs.mediaerrorcode}" id="content">
-      ${formatErrorMessage({ code: +attrs.mediaerrorcode, message: attrs.mediaerrormessage })}
+    <slot name="error-${code}" id="content">
+      ${formatErrorMessage({ code, message: attrs.mediaerrormessage })}
     </slot>
   `
     );
@@ -6287,11 +6581,12 @@ var mediaThemeMicrovideo = (() => {
   function formatErrorMessage(error) {
     var _a3;
     const { title, message } = (_a3 = formatError(error)) != null ? _a3 : {};
+    const code = escapeHTML(error.code);
     let html = "";
     if (title)
-      html += `<slot name="error-${error.code}-title"><h3>${title}</h3></slot>`;
+      html += `<slot name="error-${code}-title"><h3>${escapeHTML(title)}</h3></slot>`;
     if (message)
-      html += `<slot name="error-${error.code}-message"><p>${message}</p></slot>`;
+      html += `<slot name="error-${code}-message"><p>${escapeHTML(message)}</p></slot>`;
     return html;
   }
   var observedAttributes = [
@@ -6301,7 +6596,7 @@ var mediaThemeMicrovideo = (() => {
   var MediaErrorDialog = class extends MediaChromeDialog {
     constructor() {
       super(...arguments);
-      __privateAdd11(this, _mediaError, null);
+      __privateAdd12(this, _mediaError, null);
     }
     static get observedAttributes() {
       return [...super.observedAttributes, ...observedAttributes];
@@ -6330,7 +6625,7 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     get mediaError() {
-      return __privateGet11(this, _mediaError);
+      return __privateGet12(this, _mediaError);
     }
     set mediaError(value) {
       __privateSet11(this, _mediaError, value);
@@ -6349,212 +6644,12 @@ var mediaThemeMicrovideo = (() => {
     }
   };
   _mediaError = /* @__PURE__ */ new WeakMap();
-  MediaErrorDialog.getSlotTemplateHTML = getSlotTemplateHTML8;
+  MediaErrorDialog.getSlotTemplateHTML = getSlotTemplateHTML9;
   MediaErrorDialog.formatErrorMessage = formatErrorMessage;
   if (!GlobalThis.customElements.get("media-error-dialog")) {
     GlobalThis.customElements.define("media-error-dialog", MediaErrorDialog);
   }
 
-  // ../../node_modules/media-chrome/dist/media-keyboard-shortcuts-dialog.js
-  var __accessCheck12 = (obj, member, msg) => {
-    if (!member.has(obj))
-      throw TypeError("Cannot " + msg);
-  };
-  var __privateGet12 = (obj, member, getter) => {
-    __accessCheck12(obj, member, "read from private field");
-    return getter ? getter.call(obj) : member.get(obj);
-  };
-  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 _clickHandler;
-  var _keyDownHandler2;
-  function getSlotTemplateHTML9(_attrs) {
-    return (
-      /*html*/
-      `
-    <style>
-      :host {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 9999;
-        background: rgb(20 20 30 / .8);
-        backdrop-filter: blur(10px);
-      }
-
-      #content {
-        display: block;
-        width: clamp(400px, 40vw, 700px);
-        max-width: 90vw;
-        text-align: left;
-      }
-
-      h2 {
-        margin: 0 0 1.5rem 0;
-        font-size: 1.5rem;
-        font-weight: 500;
-        text-align: center;
-      }
-
-      .shortcuts-table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-
-      .shortcuts-table tr {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      }
-
-      .shortcuts-table tr:last-child {
-        border-bottom: none;
-      }
-
-      .shortcuts-table td {
-        padding: 0.75rem 0.5rem;
-      }
-
-      .shortcuts-table td:first-child {
-        text-align: right;
-        padding-right: 1rem;
-        width: 40%;
-        min-width: 120px;
-      }
-
-      .shortcuts-table td:last-child {
-        padding-left: 1rem;
-      }
-
-      .key {
-        display: inline-block;
-        background: rgba(255, 255, 255, 0.15);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 4px;
-        padding: 0.25rem 0.5rem;
-        font-family: 'Courier New', monospace;
-        font-size: 0.9rem;
-        font-weight: 500;
-        min-width: 1.5rem;
-        text-align: center;
-        margin: 0 0.2rem;
-      }
-
-      .description {
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 0.95rem;
-      }
-
-      .key-combo {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 0.3rem;
-      }
-
-      .key-separator {
-        color: rgba(255, 255, 255, 0.5);
-        font-size: 0.9rem;
-      }
-    </style>
-    <slot id="content">
-      ${formatKeyboardShortcuts()}
-    </slot>
-  `
-    );
-  }
-  function formatKeyboardShortcuts() {
-    const shortcuts = [
-      { keys: ["Space", "k"], description: "Toggle Playback" },
-      { keys: ["m"], description: "Toggle mute" },
-      { keys: ["f"], description: "Toggle fullscreen" },
-      { keys: ["c"], description: "Toggle captions or subtitles, if available" },
-      { keys: ["p"], description: "Toggle Picture in Picture" },
-      { keys: ["\u2190", "j"], description: "Seek back 10s" },
-      { keys: ["\u2192", "l"], description: "Seek forward 10s" },
-      { keys: ["\u2191"], description: "Turn volume up" },
-      { keys: ["\u2193"], description: "Turn volume down" },
-      { keys: ["< (SHIFT+,)"], description: "Decrease playback rate" },
-      { keys: ["> (SHIFT+.)"], description: "Increase playback rate" }
-    ];
-    const rows = shortcuts.map(({ keys, description }) => {
-      const keyCombo = keys.map(
-        (key, index) => index > 0 ? `<span class="key-separator">or</span><span class="key">${key}</span>` : `<span class="key">${key}</span>`
-      ).join("");
-      return `
-      <tr>
-        <td>
-          <div class="key-combo">${keyCombo}</div>
-        </td>
-        <td class="description">${description}</td>
-      </tr>
-    `;
-    }).join("");
-    return `
-    <h2>Keyboard Shortcuts</h2>
-    <table class="shortcuts-table">${rows}</table>
-  `;
-  }
-  var MediaKeyboardShortcutsDialog = class extends MediaChromeDialog {
-    constructor() {
-      super(...arguments);
-      __privateAdd12(this, _clickHandler, (e) => {
-        var _a3;
-        if (!this.open)
-          return;
-        const content = (_a3 = this.shadowRoot) == null ? void 0 : _a3.querySelector("#content");
-        if (!content)
-          return;
-        const path = e.composedPath();
-        const isClickOnHost = path[0] === this || path.includes(this);
-        const isClickInsideContent = path.includes(content);
-        if (isClickOnHost && !isClickInsideContent) {
-          this.open = false;
-        }
-      });
-      __privateAdd12(this, _keyDownHandler2, (e) => {
-        if (!this.open)
-          return;
-        const isShiftSlash = e.shiftKey && (e.key === "/" || e.key === "?");
-        if ((e.key === "Escape" || isShiftSlash) && !e.ctrlKey && !e.altKey && !e.metaKey) {
-          this.open = false;
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      });
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      if (this.open) {
-        this.addEventListener("click", __privateGet12(this, _clickHandler));
-        document.addEventListener("keydown", __privateGet12(this, _keyDownHandler2));
-      }
-    }
-    disconnectedCallback() {
-      this.removeEventListener("click", __privateGet12(this, _clickHandler));
-      document.removeEventListener("keydown", __privateGet12(this, _keyDownHandler2));
-    }
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
-      if (attrName === "open") {
-        if (this.open) {
-          this.addEventListener("click", __privateGet12(this, _clickHandler));
-          document.addEventListener("keydown", __privateGet12(this, _keyDownHandler2));
-        } else {
-          this.removeEventListener("click", __privateGet12(this, _clickHandler));
-          document.removeEventListener("keydown", __privateGet12(this, _keyDownHandler2));
-        }
-      }
-    }
-  };
-  _clickHandler = /* @__PURE__ */ new WeakMap();
-  _keyDownHandler2 = /* @__PURE__ */ new WeakMap();
-  MediaKeyboardShortcutsDialog.getSlotTemplateHTML = getSlotTemplateHTML9;
-  if (!GlobalThis.customElements.get("media-keyboard-shortcuts-dialog")) {
-    GlobalThis.customElements.define("media-keyboard-shortcuts-dialog", MediaKeyboardShortcutsDialog);
-  }
-
   // ../../node_modules/media-chrome/dist/media-fullscreen-button.js
   var __accessCheck13 = (obj, member, msg) => {
     if (!member.has(obj))
@@ -6820,7 +6915,7 @@ var mediaThemeMicrovideo = (() => {
   };
   var _mediaController6;
   var _delay;
-  var Attributes6 = {
+  var Attributes7 = {
     LOADING_DELAY: "loadingdelay",
     NO_AUTOHIDE: "noautohide"
   };
@@ -6908,12 +7003,12 @@ var mediaThemeMicrovideo = (() => {
         MediaStateReceiverAttributes.MEDIA_CONTROLLER,
         MediaUIAttributes.MEDIA_PAUSED,
         MediaUIAttributes.MEDIA_LOADING,
-        Attributes6.LOADING_DELAY
+        Attributes7.LOADING_DELAY
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       var _a3, _b2, _c, _d, _e;
-      if (attrName === Attributes6.LOADING_DELAY && oldValue !== newValue) {
+      if (attrName === Attributes7.LOADING_DELAY && oldValue !== newValue) {
         this.loadingDelay = Number(newValue);
       } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
         if (oldValue) {
@@ -6982,10 +7077,10 @@ var mediaThemeMicrovideo = (() => {
       setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
     }
     get noAutohide() {
-      return getBooleanAttr(this, Attributes6.NO_AUTOHIDE);
+      return getBooleanAttr(this, Attributes7.NO_AUTOHIDE);
     }
     set noAutohide(value) {
-      setBooleanAttr(this, Attributes6.NO_AUTOHIDE, value);
+      setBooleanAttr(this, Attributes7.NO_AUTOHIDE, value);
     }
   };
   _mediaController6 = /* @__PURE__ */ new WeakMap();
@@ -7203,7 +7298,7 @@ var mediaThemeMicrovideo = (() => {
     member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   };
   var _rates;
-  var Attributes7 = {
+  var Attributes8 = {
     RATES: "rates"
   };
   var DEFAULT_RATES = [1, 1.2, 1.5, 1.7, 2];
@@ -7233,7 +7328,7 @@ var mediaThemeMicrovideo = (() => {
     constructor() {
       var _a3;
       super();
-      __privateAdd15(this, _rates, new AttributeTokenList(this, Attributes7.RATES, {
+      __privateAdd15(this, _rates, new AttributeTokenList(this, Attributes8.RATES, {
         defaultValue: DEFAULT_RATES
       }));
       this.container = this.shadowRoot.querySelector('slot[name="icon"]');
@@ -7243,12 +7338,12 @@ var mediaThemeMicrovideo = (() => {
       return [
         ...super.observedAttributes,
         MediaUIAttributes.MEDIA_PLAYBACK_RATE,
-        Attributes7.RATES
+        Attributes8.RATES
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback(attrName, oldValue, newValue);
-      if (attrName === Attributes7.RATES) {
+      if (attrName === Attributes8.RATES) {
         __privateGet15(this, _rates).value = newValue;
       }
       if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
@@ -7402,7 +7497,7 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-poster-image.js
-  var Attributes8 = {
+  var Attributes9 = {
     PLACEHOLDER_SRC: "placeholdersrc",
     SRC: "src"
   };
@@ -7442,7 +7537,7 @@ var mediaThemeMicrovideo = (() => {
   };
   var MediaPosterImage = class extends GlobalThis.HTMLElement {
     static get observedAttributes() {
-      return [Attributes8.PLACEHOLDER_SRC, Attributes8.SRC];
+      return [Attributes9.PLACEHOLDER_SRC, Attributes9.SRC];
     }
     constructor() {
       super();
@@ -7454,14 +7549,14 @@ var mediaThemeMicrovideo = (() => {
       this.image = this.shadowRoot.querySelector("#image");
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      if (attrName === Attributes8.SRC) {
+      if (attrName === Attributes9.SRC) {
         if (newValue == null) {
-          this.image.removeAttribute(Attributes8.SRC);
+          this.image.removeAttribute(Attributes9.SRC);
         } else {
-          this.image.setAttribute(Attributes8.SRC, newValue);
+          this.image.setAttribute(Attributes9.SRC, newValue);
         }
       }
-      if (attrName === Attributes8.PLACEHOLDER_SRC) {
+      if (attrName === Attributes9.PLACEHOLDER_SRC) {
         if (newValue == null) {
           unsetBackgroundImage(this.image);
         } else {
@@ -7473,19 +7568,19 @@ var mediaThemeMicrovideo = (() => {
      *
      */
     get placeholderSrc() {
-      return getStringAttr(this, Attributes8.PLACEHOLDER_SRC);
+      return getStringAttr(this, Attributes9.PLACEHOLDER_SRC);
     }
     set placeholderSrc(value) {
-      setStringAttr(this, Attributes8.SRC, value);
+      setStringAttr(this, Attributes9.SRC, value);
     }
     /**
      *
      */
     get src() {
-      return getStringAttr(this, Attributes8.SRC);
+      return getStringAttr(this, Attributes9.SRC);
     }
     set src(value) {
-      setStringAttr(this, Attributes8.SRC, value);
+      setStringAttr(this, Attributes9.SRC, value);
     }
   };
   MediaPosterImage.shadowRootOptions = { mode: "open" };
@@ -7803,7 +7898,7 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-seek-backward-button.js
-  var Attributes9 = {
+  var Attributes10 = {
     SEEK_OFFSET: "seekoffset"
   };
   var DEFAULT_SEEK_OFFSET2 = 30;
@@ -7835,24 +7930,24 @@ var mediaThemeMicrovideo = (() => {
       return [
         ...super.observedAttributes,
         MediaUIAttributes.MEDIA_CURRENT_TIME,
-        Attributes9.SEEK_OFFSET
+        Attributes10.SEEK_OFFSET
       ];
     }
     connectedCallback() {
       super.connectedCallback();
       this.seekOffset = getNumericAttr(
         this,
-        Attributes9.SEEK_OFFSET,
+        Attributes10.SEEK_OFFSET,
         DEFAULT_SEEK_OFFSET2
       );
     }
     attributeChangedCallback(attrName, _oldValue, newValue) {
       super.attributeChangedCallback(attrName, _oldValue, newValue);
       updateAriaLabel7(this, this.seekOffset);
-      if (attrName === Attributes9.SEEK_OFFSET) {
+      if (attrName === Attributes10.SEEK_OFFSET) {
         this.seekOffset = getNumericAttr(
           this,
-          Attributes9.SEEK_OFFSET,
+          Attributes10.SEEK_OFFSET,
           DEFAULT_SEEK_OFFSET2
         );
       }
@@ -7862,10 +7957,10 @@ var mediaThemeMicrovideo = (() => {
      * Seek amount in seconds
      */
     get seekOffset() {
-      return getNumericAttr(this, Attributes9.SEEK_OFFSET, DEFAULT_SEEK_OFFSET2);
+      return getNumericAttr(this, Attributes10.SEEK_OFFSET, DEFAULT_SEEK_OFFSET2);
     }
     set seekOffset(value) {
-      setNumericAttr(this, Attributes9.SEEK_OFFSET, value);
+      setNumericAttr(this, Attributes10.SEEK_OFFSET, value);
       this.setAttribute(
         "aria-label",
         t("seek back {seekOffset} seconds", { seekOffset: this.seekOffset })
@@ -7906,7 +8001,7 @@ var mediaThemeMicrovideo = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-seek-forward-button.js
-  var Attributes10 = {
+  var Attributes11 = {
     SEEK_OFFSET: "seekoffset"
   };
   var DEFAULT_SEEK_OFFSET3 = 30;
@@ -7938,24 +8033,24 @@ var mediaThemeMicrovideo = (() => {
       return [
         ...super.observedAttributes,
         MediaUIAttributes.MEDIA_CURRENT_TIME,
-        Attributes10.SEEK_OFFSET
+        Attributes11.SEEK_OFFSET
       ];
     }
     connectedCallback() {
       super.connectedCallback();
       this.seekOffset = getNumericAttr(
         this,
-        Attributes10.SEEK_OFFSET,
+        Attributes11.SEEK_OFFSET,
         DEFAULT_SEEK_OFFSET3
       );
     }
     attributeChangedCallback(attrName, _oldValue, newValue) {
       super.attributeChangedCallback(attrName, _oldValue, newValue);
       updateAriaLabel8(this, this.seekOffset);
-      if (attrName === Attributes10.SEEK_OFFSET) {
+      if (attrName === Attributes11.SEEK_OFFSET) {
         this.seekOffset = getNumericAttr(
           this,
-          Attributes10.SEEK_OFFSET,
+          Attributes11.SEEK_OFFSET,
           DEFAULT_SEEK_OFFSET3
         );
       }
@@ -7965,10 +8060,10 @@ var mediaThemeMicrovideo = (() => {
      * Seek amount in seconds
      */
     get seekOffset() {
-      return getNumericAttr(this, Attributes10.SEEK_OFFSET, DEFAULT_SEEK_OFFSET3);
+      return getNumericAttr(this, Attributes11.SEEK_OFFSET, DEFAULT_SEEK_OFFSET3);
     }
     set seekOffset(value) {
-      setNumericAttr(this, Attributes10.SEEK_OFFSET, value);
+      setNumericAttr(this, Attributes11.SEEK_OFFSET, value);
       this.setAttribute(
         "aria-label",
         t("seek forward {seekOffset} seconds", { seekOffset: this.seekOffset })
@@ -8042,13 +8137,13 @@ var mediaThemeMicrovideo = (() => {
   var makeInteractive_fn;
   var _makeNonInteractive;
   var makeNonInteractive_fn;
-  var Attributes11 = {
+  var Attributes12 = {
     REMAINING: "remaining",
     SHOW_DURATION: "showduration",
     NO_TOGGLE: "notoggle"
   };
   var CombinedAttributes = [
-    ...Object.values(Attributes11),
+    ...Object.values(Attributes12),
     MediaUIAttributes.MEDIA_CURRENT_TIME,
     MediaUIAttributes.MEDIA_DURATION,
     MediaUIAttributes.MEDIA_SEEKABLE
@@ -8169,7 +8264,7 @@ var mediaThemeMicrovideo = (() => {
         } else {
           __privateMethod6(this, _makeNonInteractive, makeNonInteractive_fn).call(this);
         }
-      } else if (attrName === Attributes11.NO_TOGGLE && newValue !== oldValue) {
+      } else if (attrName === Attributes12.NO_TOGGLE && newValue !== oldValue) {
         if (this.noToggle) {
           __privateMethod6(this, _makeNonInteractive, makeNonInteractive_fn).call(this);
         } else {
@@ -8191,28 +8286,28 @@ var mediaThemeMicrovideo = (() => {
      * Whether to show the remaining time
      */
     get remaining() {
-      return getBooleanAttr(this, Attributes11.REMAINING);
+      return getBooleanAttr(this, Attributes12.REMAINING);
     }
     set remaining(show) {
-      setBooleanAttr(this, Attributes11.REMAINING, show);
+      setBooleanAttr(this, Attributes12.REMAINING, show);
     }
     /**
      * Whether to show the duration
      */
     get showDuration() {
-      return getBooleanAttr(this, Attributes11.SHOW_DURATION);
+      return getBooleanAttr(this, Attributes12.SHOW_DURATION);
     }
     set showDuration(show) {
-      setBooleanAttr(this, Attributes11.SHOW_DURATION, show);
+      setBooleanAttr(this, Attributes12.SHOW_DURATION, show);
     }
     /**
      * Disable the default behavior that toggles between current and remaining time
      */
     get noToggle() {
-      return getBooleanAttr(this, Attributes11.NO_TOGGLE);
+      return getBooleanAttr(this, Attributes12.NO_TOGGLE);
     }
     set noToggle(noToggle) {
-      setBooleanAttr(this, Attributes11.NO_TOGGLE, noToggle);
+      setBooleanAttr(this, Attributes12.NO_TOGGLE, noToggle);
     }
     // Props derived from media UI attributes
     /**
@@ -10551,7 +10646,7 @@ var mediaThemeMicrovideo = (() => {
   `
     );
   }
-  var Attributes12 = {
+  var Attributes13 = {
     STYLE: "style",
     HIDDEN: "hidden",
     DISABLED: "disabled",
@@ -10620,10 +10715,10 @@ var mediaThemeMicrovideo = (() => {
     }
     static get observedAttributes() {
       return [
-        Attributes12.DISABLED,
-        Attributes12.HIDDEN,
-        Attributes12.STYLE,
-        Attributes12.ANCHOR,
+        Attributes13.DISABLED,
+        Attributes13.HIDDEN,
+        Attributes13.STYLE,
+        Attributes13.ANCHOR,
         MediaStateReceiverAttributes.MEDIA_CONTROLLER
       ];
     }
@@ -10700,7 +10795,7 @@ var mediaThemeMicrovideo = (() => {
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
       var _a3, _b2, _c, _d;
-      if (attrName === Attributes12.HIDDEN && newValue !== oldValue) {
+      if (attrName === Attributes13.HIDDEN && newValue !== oldValue) {
         if (!__privateGet25(this, _isPopover))
           __privateSet22(this, _isPopover, true);
         if (this.hidden) {
@@ -10724,13 +10819,13 @@ var mediaThemeMicrovideo = (() => {
           __privateSet22(this, _mediaController8, getAttributeMediaController(this));
           (_d = (_c = __privateGet25(this, _mediaController8)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
         }
-      } else if (attrName === Attributes12.DISABLED && newValue !== oldValue) {
+      } else if (attrName === Attributes13.DISABLED && newValue !== oldValue) {
         if (newValue == null) {
           this.enable();
         } else {
           this.disable();
         }
-      } else if (attrName === Attributes12.STYLE && newValue !== oldValue) {
+      } else if (attrName === Attributes13.STYLE && newValue !== oldValue) {
         __privateMethod9(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
       }
     }
@@ -11271,7 +11366,7 @@ var mediaThemeMicrovideo = (() => {
   function getSuffixSlotInnerHTML(_attrs) {
     return "";
   }
-  var Attributes13 = {
+  var Attributes14 = {
     TYPE: "type",
     VALUE: "value",
     CHECKED: "checked",
@@ -11324,10 +11419,10 @@ var mediaThemeMicrovideo = (() => {
     }
     static get observedAttributes() {
       return [
-        Attributes13.TYPE,
-        Attributes13.DISABLED,
-        Attributes13.CHECKED,
-        Attributes13.VALUE
+        Attributes14.TYPE,
+        Attributes14.DISABLED,
+        Attributes14.CHECKED,
+        Attributes14.VALUE
       ];
     }
     enable() {
@@ -11363,11 +11458,11 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
-      if (attrName === Attributes13.CHECKED && isCheckable(this) && !__privateGet26(this, _dirty)) {
+      if (attrName === Attributes14.CHECKED && isCheckable(this) && !__privateGet26(this, _dirty)) {
         this.setAttribute("aria-checked", newValue != null ? "true" : "false");
-      } else if (attrName === Attributes13.TYPE && newValue !== oldValue) {
+      } else if (attrName === Attributes14.TYPE && newValue !== oldValue) {
         this.role = "menuitem" + newValue;
-      } else if (attrName === Attributes13.DISABLED && newValue !== oldValue) {
+      } else if (attrName === Attributes14.DISABLED && newValue !== oldValue) {
         if (newValue == null) {
           this.enable();
         } else {
@@ -11376,7 +11471,7 @@ var mediaThemeMicrovideo = (() => {
       }
     }
     connectedCallback() {
-      if (!this.hasAttribute(Attributes13.DISABLED)) {
+      if (!this.hasAttribute(Attributes14.DISABLED)) {
         this.enable();
       }
       this.role = "menuitem" + this.type;
@@ -11425,17 +11520,17 @@ var mediaThemeMicrovideo = (() => {
     }
     get type() {
       var _a3;
-      return (_a3 = this.getAttribute(Attributes13.TYPE)) != null ? _a3 : "";
+      return (_a3 = this.getAttribute(Attributes14.TYPE)) != null ? _a3 : "";
     }
     set type(val) {
-      this.setAttribute(Attributes13.TYPE, `${val}`);
+      this.setAttribute(Attributes14.TYPE, `${val}`);
     }
     get value() {
       var _a3;
-      return (_a3 = this.getAttribute(Attributes13.VALUE)) != null ? _a3 : this.text;
+      return (_a3 = this.getAttribute(Attributes14.VALUE)) != null ? _a3 : this.text;
     }
     set value(val) {
-      this.setAttribute(Attributes13.VALUE, val);
+      this.setAttribute(Attributes14.VALUE, val);
     }
     get text() {
       var _a3;
@@ -12297,7 +12392,7 @@ var mediaThemeMicrovideo = (() => {
   var render_fn3;
   var _onChange3;
   var onChange_fn3;
-  var Attributes14 = {
+  var Attributes15 = {
     RATES: "rates"
   };
   var MediaPlaybackRateMenu = class extends MediaChromeMenu {
@@ -12305,7 +12400,7 @@ var mediaThemeMicrovideo = (() => {
       super();
       __privateAdd29(this, _render3);
       __privateAdd29(this, _onChange3);
-      __privateAdd29(this, _rates2, new AttributeTokenList(this, Attributes14.RATES, {
+      __privateAdd29(this, _rates2, new AttributeTokenList(this, Attributes15.RATES, {
         defaultValue: DEFAULT_RATES
       }));
       __privateMethod13(this, _render3, render_fn3).call(this);
@@ -12314,7 +12409,7 @@ var mediaThemeMicrovideo = (() => {
       return [
         ...super.observedAttributes,
         MediaUIAttributes.MEDIA_PLAYBACK_RATE,
-        Attributes14.RATES
+        Attributes15.RATES
       ];
     }
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -12322,7 +12417,7 @@ var mediaThemeMicrovideo = (() => {
       if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
         this.value = newValue;
         __privateMethod13(this, _render3, render_fn3).call(this);
-      } else if (attrName === Attributes14.RATES && oldValue != newValue) {
+      } else if (attrName === Attributes15.RATES && oldValue != newValue) {
         __privateGet29(this, _rates2).value = newValue;
         __privateMethod13(this, _render3, render_fn3).call(this);
       }