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

package/dist/themes/minimal/index.mjs

@@ -213,6 +213,16 @@ function isNumericString(str) {
   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 = {
@@ -1085,7 +1095,11 @@ function getTemplateHTML2(_attrs) {
 
       ${/* ::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;
       }
 
@@ -1490,7 +1504,7 @@ if (!GlobalThis.customElements.get("media-container")) {
   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);
@@ -1509,152 +1523,659 @@ var __privateSet3 = (obj, member, value, setter) => {
   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);
@@ -3256,26 +3777,26 @@ var createMediaStore = ({
 };
 
 // ../../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;
@@ -3289,8 +3810,10 @@ var _subtitlesState;
 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 = [
@@ -3315,7 +3838,7 @@ var DEFAULT_VOLUME_STEP = 0.025;
 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",
@@ -3340,35 +3863,36 @@ var Attributes2 = {
 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;
@@ -3385,118 +3909,118 @@ var MediaController = class extends MediaContainer {
   }
   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();
@@ -3504,9 +4028,9 @@ var MediaController = class extends MediaContainer {
   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."
           );
@@ -3515,78 +4039,80 @@ var MediaController = class extends MediaContainer {
       } 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)
         }
       });
     }
@@ -3594,64 +4120,64 @@ var MediaController = class extends MediaContainer {
   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);
     }
   }
   /**
@@ -3661,7 +4187,7 @@ var MediaController = class extends MediaContainer {
   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
     });
@@ -3676,7 +4202,7 @@ var MediaController = class extends MediaContainer {
   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
     });
@@ -3698,7 +4224,7 @@ var MediaController = class extends MediaContainer {
       unregisterMediaStateReceiver
     );
     Object.values(MediaUIEvents).forEach((eventName) => {
-      element.addEventListener(eventName, __privateGet4(this, _mediaStateEventHandler));
+      element.addEventListener(eventName, __privateGet6(this, _mediaStateEventHandler));
     });
     associatedElementSubscriptions.set(element, unsubscribe);
   }
@@ -3712,7 +4238,7 @@ var MediaController = class extends MediaContainer {
     unsubscribe();
     associatedElementSubscriptions.delete(element);
     Object.values(MediaUIEvents).forEach((eventName) => {
-      element.removeEventListener(eventName, __privateGet4(this, _mediaStateEventHandler));
+      element.removeEventListener(eventName, __privateGet6(this, _mediaStateEventHandler));
     });
   }
   registerMediaStateReceiver(el) {
@@ -3723,8 +4249,8 @@ var MediaController = class extends MediaContainer {
     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);
         }
@@ -3739,38 +4265,36 @@ var MediaController = class extends MediaContainer {
     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,
@@ -3807,8 +4331,8 @@ var MediaController = class extends MediaContainer {
       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
@@ -3824,8 +4348,8 @@ var MediaController = class extends MediaContainer {
       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
@@ -3839,7 +4363,7 @@ var MediaController = class extends MediaContainer {
         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
@@ -3853,7 +4377,7 @@ var MediaController = class extends MediaContainer {
         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
@@ -3897,7 +4421,7 @@ var MediaController = class extends MediaContainer {
       case "/":
       case "?": {
         if (e.shiftKey) {
-          __privateMethod2(this, _showKeyboardShortcutsDialog, showKeyboardShortcutsDialog_fn).call(this);
+          __privateMethod3(this, _showKeyboardShortcutsDialog, showKeyboardShortcutsDialog_fn).call(this);
         }
         break;
       }
@@ -3930,56 +4454,66 @@ setupDefaultStore_fn = function() {
     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);
@@ -4186,11 +4720,11 @@ if (!GlobalThis.customElements.get("media-controller")) {
 }
 
 // ../../node_modules/media-chrome/dist/media-tooltip.js
-var Attributes3 = {
+var Attributes5 = {
   PLACEMENT: "placement",
   BOUNDS: "bounds"
 };
-function getTemplateHTML3(_attrs) {
+function getTemplateHTML4(_attrs) {
   return (
     /*html*/
     `
@@ -4358,71 +4892,73 @@ var MediaTooltip = class extends GlobalThis.HTMLElement {
     }
   }
   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*/
     `
@@ -4523,7 +5059,7 @@ function getTemplateHTML4(_attrs, _props = {}) {
   `
   );
 }
-function getSlotTemplateHTML(_attrs, _props) {
+function getSlotTemplateHTML3(_attrs, _props) {
   return (
     /*html*/
     `
@@ -4537,37 +5073,38 @@ function getTooltipContentHTML() {
 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);
@@ -4580,32 +5117,32 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
   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) {
@@ -4613,12 +5150,14 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       } 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;
@@ -4637,24 +5176,24 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
       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", " "];
@@ -4663,10 +5202,10 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
    * 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);
@@ -4675,16 +5214,16 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
     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
@@ -4694,22 +5233,30 @@ var MediaChromeButton = class extends GlobalThis.HTMLElement {
 };
 _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);
@@ -4720,7 +5267,7 @@ var airplayIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M22.13 3H3.87a.87.87 0 0 0-.87.87v13.26a.87.87 0 0 0 .87.87h3.4L9 16H5V5h16v11h-4l1.72 2h3.4a.87.87 0 0 0 .87-.87V3.87a.87.87 0 0 0-.86-.87Zm-8.75 11.44a.5.5 0 0 0-.76 0l-4.91 5.73a.5.5 0 0 0 .38.83h9.82a.501.501 0 0 0 .38-.83l-4.91-5.73Z"/>
 </svg>
 `;
-function getSlotTemplateHTML2(_attrs) {
+function getSlotTemplateHTML4(_attrs) {
   return (
     /*html*/
     `
@@ -4808,7 +5355,7 @@ var MediaAirplayButton = class extends MediaChromeButton {
     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);
@@ -4821,7 +5368,7 @@ var ccIconOn = `<svg aria-hidden="true" viewBox="0 0 26 24">
 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*/
     `
@@ -4913,7 +5460,7 @@ var MediaCaptionsButton = class extends MediaChromeButton {
     );
   }
 };
-MediaCaptionsButton.getSlotTemplateHTML = getSlotTemplateHTML3;
+MediaCaptionsButton.getSlotTemplateHTML = getSlotTemplateHTML5;
 MediaCaptionsButton.getTooltipContentHTML = getTooltipContentHTML3;
 var getSubtitlesListAttr = (el, attrName) => {
   const attrVal = el.getAttribute(attrName);
@@ -4940,7 +5487,7 @@ if (!GlobalThis.customElements.get("media-captions-button")) {
 // ../../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*/
     `
@@ -5017,294 +5564,40 @@ var MediaCastButton = class extends MediaChromeButton {
   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;
@@ -5594,21 +5887,21 @@ function getContainerTemplateHTML(_attrs) {
 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(
@@ -5617,11 +5910,11 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
         );
       }
     });
-    __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);
@@ -5649,12 +5942,12 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     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) {
@@ -5673,13 +5966,13 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
       "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)"
     );
@@ -5690,26 +5983,26 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
       __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}%`
     );
@@ -5717,8 +6010,8 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
   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");
@@ -5757,8 +6050,8 @@ var MediaChromeRange = class extends GlobalThis.HTMLElement {
     return getPointProgressOnLine(
       evt.clientX,
       evt.clientY,
-      __privateGet7(this, _startpoint).getBoundingClientRect(),
-      __privateGet7(this, _endpoint).getBoundingClientRect()
+      __privateGet8(this, _startpoint).getBoundingClientRect(),
+      __privateGet8(this, _endpoint).getBoundingClientRect()
     );
   }
   get dragging() {
@@ -5801,11 +6094,11 @@ _onFocusOut = /* @__PURE__ */ new WeakMap();
 _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;
   });
@@ -5864,7 +6157,7 @@ handlePointerLeave_fn = function() {
   (_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) {
@@ -5877,7 +6170,7 @@ handlePointerMove_fn2 = function(evt) {
   );
   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(
@@ -5893,21 +6186,21 @@ if (!GlobalThis.customElements.get("media-chrome-range")) {
 }
 
 // ../../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;
 };
@@ -5948,7 +6241,7 @@ function getTemplateHTML7(_attrs) {
 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);
@@ -5962,12 +6255,12 @@ var MediaControlBar = class extends GlobalThis.HTMLElement {
     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);
       }
     }
   }
@@ -5980,12 +6273,12 @@ var MediaControlBar = class extends GlobalThis.HTMLElement {
       __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);
   }
 };
@@ -5997,21 +6290,21 @@ if (!GlobalThis.customElements.get("media-control-bar")) {
 }
 
 // ../../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;
 };
@@ -6063,7 +6356,7 @@ function getTemplateHTML8(_attrs, _props = {}) {
   `
   );
 }
-function getSlotTemplateHTML6(_attrs, _props) {
+function getSlotTemplateHTML7(_attrs, _props) {
   return (
     /*html*/
     `
@@ -6074,7 +6367,7 @@ function getSlotTemplateHTML6(_attrs, _props) {
 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);
@@ -6088,12 +6381,12 @@ var MediaTextDisplay = class extends GlobalThis.HTMLElement {
     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);
       }
     }
   }
@@ -6111,44 +6404,44 @@ var MediaTextDisplay = class extends GlobalThis.HTMLElement {
       __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*/
     `
@@ -6160,16 +6453,16 @@ var MediaDurationDisplay = class extends MediaTextDisplay {
   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);
   }
@@ -6184,7 +6477,7 @@ var MediaDurationDisplay = class extends MediaTextDisplay {
   }
 };
 _slot = /* @__PURE__ */ new WeakMap();
-MediaDurationDisplay.getSlotTemplateHTML = getSlotTemplateHTML7;
+MediaDurationDisplay.getSlotTemplateHTML = getSlotTemplateHTML8;
 if (!GlobalThis.customElements.get("media-duration-display")) {
   GlobalThis.customElements.define(
     "media-duration-display",
@@ -6220,26 +6513,27 @@ var formatError = (error) => {
 };
 
 // ../../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*/
     `
@@ -6258,8 +6552,8 @@ function getSlotTemplateHTML8(attrs) {
         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>
   `
   );
@@ -6270,11 +6564,12 @@ function shouldOpenErrorDialog(error) {
 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 = [
@@ -6284,7 +6579,7 @@ var observedAttributes = [
 var MediaErrorDialog = class extends MediaChromeDialog {
   constructor() {
     super(...arguments);
-    __privateAdd11(this, _mediaError, null);
+    __privateAdd12(this, _mediaError, null);
   }
   static get observedAttributes() {
     return [...super.observedAttributes, ...observedAttributes];
@@ -6313,7 +6608,7 @@ var MediaErrorDialog = class extends MediaChromeDialog {
     }
   }
   get mediaError() {
-    return __privateGet11(this, _mediaError);
+    return __privateGet12(this, _mediaError);
   }
   set mediaError(value) {
     __privateSet11(this, _mediaError, value);
@@ -6332,212 +6627,12 @@ var MediaErrorDialog = class extends MediaChromeDialog {
   }
 };
 _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))
@@ -6803,7 +6898,7 @@ var __privateSet13 = (obj, member, value, setter) => {
 };
 var _mediaController6;
 var _delay;
-var Attributes6 = {
+var Attributes7 = {
   LOADING_DELAY: "loadingdelay",
   NO_AUTOHIDE: "noautohide"
 };
@@ -6891,12 +6986,12 @@ var MediaLoadingIndicator = class extends GlobalThis.HTMLElement {
       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) {
@@ -6965,10 +7060,10 @@ var MediaLoadingIndicator = class extends GlobalThis.HTMLElement {
     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();
@@ -7186,7 +7281,7 @@ var __privateAdd15 = (obj, member, value) => {
   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];
@@ -7216,7 +7311,7 @@ var MediaPlaybackRateButton = class extends MediaChromeButton {
   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"]');
@@ -7226,12 +7321,12 @@ var MediaPlaybackRateButton = class extends MediaChromeButton {
     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) {
@@ -7385,7 +7480,7 @@ if (!GlobalThis.customElements.get("media-play-button")) {
 }
 
 // ../../node_modules/media-chrome/dist/media-poster-image.js
-var Attributes8 = {
+var Attributes9 = {
   PLACEHOLDER_SRC: "placeholdersrc",
   SRC: "src"
 };
@@ -7425,7 +7520,7 @@ var setBackgroundImage = (el, image) => {
 };
 var MediaPosterImage = class extends GlobalThis.HTMLElement {
   static get observedAttributes() {
-    return [Attributes8.PLACEHOLDER_SRC, Attributes8.SRC];
+    return [Attributes9.PLACEHOLDER_SRC, Attributes9.SRC];
   }
   constructor() {
     super();
@@ -7437,14 +7532,14 @@ var MediaPosterImage = class extends GlobalThis.HTMLElement {
     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 {
@@ -7456,19 +7551,19 @@ var MediaPosterImage = class extends GlobalThis.HTMLElement {
    *
    */
   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" };
@@ -7786,7 +7881,7 @@ if (!GlobalThis.customElements.get("media-preview-time-display")) {
 }
 
 // ../../node_modules/media-chrome/dist/media-seek-backward-button.js
-var Attributes9 = {
+var Attributes10 = {
   SEEK_OFFSET: "seekoffset"
 };
 var DEFAULT_SEEK_OFFSET2 = 30;
@@ -7818,24 +7913,24 @@ var MediaSeekBackwardButton = class extends MediaChromeButton {
     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
       );
     }
@@ -7845,10 +7940,10 @@ var MediaSeekBackwardButton = class extends MediaChromeButton {
    * 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 })
@@ -7889,7 +7984,7 @@ if (!GlobalThis.customElements.get("media-seek-backward-button")) {
 }
 
 // ../../node_modules/media-chrome/dist/media-seek-forward-button.js
-var Attributes10 = {
+var Attributes11 = {
   SEEK_OFFSET: "seekoffset"
 };
 var DEFAULT_SEEK_OFFSET3 = 30;
@@ -7921,24 +8016,24 @@ var MediaSeekForwardButton = class extends MediaChromeButton {
     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
       );
     }
@@ -7948,10 +8043,10 @@ var MediaSeekForwardButton = class extends MediaChromeButton {
    * 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 })
@@ -8025,13 +8120,13 @@ var _makeInteractive;
 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
@@ -8152,7 +8247,7 @@ var MediaTimeDisplay = class extends MediaTextDisplay {
       } 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 {
@@ -8174,28 +8269,28 @@ var MediaTimeDisplay = class extends MediaTextDisplay {
    * 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
   /**
@@ -10534,7 +10629,7 @@ function getTemplateHTML12(_attrs) {
   `
   );
 }
-var Attributes12 = {
+var Attributes13 = {
   STYLE: "style",
   HIDDEN: "hidden",
   DISABLED: "disabled",
@@ -10603,10 +10698,10 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   }
   static get observedAttributes() {
     return [
-      Attributes12.DISABLED,
-      Attributes12.HIDDEN,
-      Attributes12.STYLE,
-      Attributes12.ANCHOR,
+      Attributes13.DISABLED,
+      Attributes13.HIDDEN,
+      Attributes13.STYLE,
+      Attributes13.ANCHOR,
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
     ];
   }
@@ -10683,7 +10778,7 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
   }
   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) {
@@ -10707,13 +10802,13 @@ var MediaChromeMenu = class extends GlobalThis.HTMLElement {
         __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);
     }
   }
@@ -11254,7 +11349,7 @@ function getTemplateHTML13(_attrs) {
 function getSuffixSlotInnerHTML(_attrs) {
   return "";
 }
-var Attributes13 = {
+var Attributes14 = {
   TYPE: "type",
   VALUE: "value",
   CHECKED: "checked",
@@ -11307,10 +11402,10 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
   }
   static get observedAttributes() {
     return [
-      Attributes13.TYPE,
-      Attributes13.DISABLED,
-      Attributes13.CHECKED,
-      Attributes13.VALUE
+      Attributes14.TYPE,
+      Attributes14.DISABLED,
+      Attributes14.CHECKED,
+      Attributes14.VALUE
     ];
   }
   enable() {
@@ -11346,11 +11441,11 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
     }
   }
   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 {
@@ -11359,7 +11454,7 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
     }
   }
   connectedCallback() {
-    if (!this.hasAttribute(Attributes13.DISABLED)) {
+    if (!this.hasAttribute(Attributes14.DISABLED)) {
       this.enable();
     }
     this.role = "menuitem" + this.type;
@@ -11408,17 +11503,17 @@ var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
   }
   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;
@@ -12280,7 +12375,7 @@ var _render3;
 var render_fn3;
 var _onChange3;
 var onChange_fn3;
-var Attributes14 = {
+var Attributes15 = {
   RATES: "rates"
 };
 var MediaPlaybackRateMenu = class extends MediaChromeMenu {
@@ -12288,7 +12383,7 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     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);
@@ -12297,7 +12392,7 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     return [
       ...super.observedAttributes,
       MediaUIAttributes.MEDIA_PLAYBACK_RATE,
-      Attributes14.RATES
+      Attributes15.RATES
     ];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -12305,7 +12400,7 @@ var MediaPlaybackRateMenu = class extends MediaChromeMenu {
     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);
     }