@mux/mux-player 2.3.2 → 2.3.3-canary.0-9c4cb2a

package/dist/themes/classic/index.cjs.js

@@ -62,7 +62,6 @@ var classic_default = `<!-- prettier-ignore -->
       --media-preview-thumbnail-border: 0;
       --media-preview-thumbnail-border-radius: 2px 2px 0 0;
       --media-preview-time-border-radius: 0 0 2px 2px;
-      --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
       --media-listbox-border-radius: 2px;
       --media-listbox-transform-in: translateY(-8px) scale(1);
@@ -77,7 +76,6 @@ var classic_default = `<!-- prettier-ignore -->
 
     :host([audio]) {
       --media-preview-time-border-radius: 3px;
-      --media-preview-time-margin: 0 0 5px;
       --media-preview-time-text-shadow: none;
     }
 
@@ -908,6 +906,7 @@ var MediaUIProps = {
   MEDIA_PREVIEW_TIME: "mediaPreviewTime",
   MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
   MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
+  MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter",
   MEDIA_LOADING: "mediaLoading",
   MEDIA_BUFFERED: "mediaBuffered",
   MEDIA_STREAM_TYPE: "mediaStreamType",
@@ -916,23 +915,38 @@ var MediaUIProps = {
   MEDIA_RENDITION_LIST: "mediaRenditionList",
   MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
   MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
-  MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled"
+  MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
+  MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
 };
-var MediaUIPropsEntries = Object.entries(MediaUIProps);
-var MediaUIAttributes = MediaUIPropsEntries.reduce((dictObj, [key, propName]) => {
-  dictObj[key] = `${propName.toLowerCase()}`;
-  return dictObj;
-}, {});
-var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
-  (dictObj, [key, propName]) => {
-    dictObj[key] = `${propName.toLowerCase()}`;
-    return dictObj;
-  },
-  {
-    USER_INACTIVE: "userinactivechange",
-    BREAKPOINTS_CHANGE: "breakpointchange",
-    BREAKPOINTS_COMPUTED: "breakpointscomputed"
-  }
+var MediaUIPropsEntries = (
+  /** @type {[keyof MediaUIProps, string][]} */
+  Object.entries(MediaUIProps)
+);
+var MediaUIAttributes = (
+  /** @type {{ [k in keyof MediaUIProps]: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps]: string }>} */
+    {}
+  )
+);
+var MediaStateChangeEvents = (
+  /** @type {{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string  }>} */
+    {
+      USER_INACTIVE: "userinactivechange",
+      BREAKPOINTS_CHANGE: "breakpointchange",
+      BREAKPOINTS_COMPUTED: "breakpointscomputed"
+    }
+  )
 );
 var StateChangeEventToAttributeMap = Object.entries(
   MediaStateChangeEvents
@@ -969,6 +983,8 @@ var EventTarget2 = class {
     return true;
   }
 };
+var Node = class extends EventTarget2 {
+};
 var ResizeObserver = class {
   observe() {
   }
@@ -981,15 +997,28 @@ var documentShim = {
   createElement: function() {
     return new globalThisShim2.HTMLElement();
   },
+  createElementNS: function() {
+    return new globalThisShim2.HTMLElement();
+  },
   addEventListener() {
   },
   removeEventListener() {
+  },
+  /**
+   *
+   * @param {Event} event
+   * @returns {boolean}
+   */
+  dispatchEvent(event) {
+    return false;
   }
+  // eslint-disable-line no-unused-vars
 };
 var globalThisShim2 = {
   ResizeObserver,
   document: documentShim,
-  HTMLElement: class HTMLElement2 extends EventTarget2 {
+  Node,
+  HTMLElement: class HTMLElement2 extends Node {
   },
   DocumentFragment: class DocumentFragment2 extends EventTarget2 {
   },
@@ -1001,12 +1030,47 @@ var globalThisShim2 = {
     whenDefined: function() {
     }
   },
+  localStorage: {
+    /**
+     * @param {string} key
+     * @returns {string|null}
+    */
+    getItem(key) {
+      return null;
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+     * @param {string} value
+     */
+    setItem(key, value) {
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+    */
+    removeItem(key) {
+    }
+    // eslint-disable-line no-unused-vars
+  },
   CustomEvent: function CustomEvent2() {
   },
   getComputedStyle: function() {
   },
   navigator: {
-    languages: []
+    languages: [],
+    get userAgent() {
+      return "";
+    }
+  },
+  /**
+   * @param {string} media
+   */
+  matchMedia(media) {
+    return {
+      matches: false,
+      media
+    };
   }
 };
 var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
@@ -1245,6 +1309,7 @@ var AttrPart = class extends Part {
       );
     }
   }
+  /** @type boolean */
   get booleanValue() {
     return __privateGet2(this, _element).hasAttributeNS(
       __privateGet2(this, _namespaceURI),
@@ -1286,6 +1351,7 @@ var ChildNodePart = class extends Part {
   get previousSibling() {
     return __privateGet2(this, _nodes)[0].previousSibling;
   }
+  // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
   get value() {
     return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
   }
@@ -1629,7 +1695,8 @@ var observedMediaAttributes = {
   mediastreamtype: "streamtype"
 };
 var prependTemplate = Document.createElement("template");
-prependTemplate.innerHTML = `
+prependTemplate.innerHTML = /*html*/
+`
   <style>
     :host {
       display: inline-block;
@@ -1675,7 +1742,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       if (this.mediaController && !((_a2 = this.mediaController) == null ? void 0 : _a2.breakpointsComputed))
         return;
       if (mutationList.some((mutation) => {
-        const target = mutation.target;
+        const target = (
+          /** @type {HTMLElement} */
+          mutation.target
+        );
         if (target === this)
           return true;
         if (target.localName !== "media-controller")
@@ -1697,6 +1767,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
     this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
+  /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
   get mediaController() {
     return this.renderRoot.querySelector("media-controller");
   }
@@ -1746,6 +1817,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       this.renderer = new TemplateInstance(
         this.template,
         this.props,
+        // @ts-ignore
         this.constructor.processor
       );
       this.renderRoot.textContent = "";
@@ -1777,7 +1849,10 @@ updateTemplate_fn = function() {
   const templateId = this.getAttribute("template");
   if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
     return;
-  const rootNode = this.getRootNode();
+  const rootNode = (
+    /** @type HTMLDocument | ShadowRoot */
+    this.getRootNode()
+  );
   const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
   if (template2) {
     __privateSet3(this, _prevTemplateId, templateId);

package/dist/themes/classic/index.js

@@ -62,7 +62,6 @@ var mediaThemeClassic = (() => {
       --media-preview-thumbnail-border: 0;
       --media-preview-thumbnail-border-radius: 2px 2px 0 0;
       --media-preview-time-border-radius: 0 0 2px 2px;
-      --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
       --media-listbox-border-radius: 2px;
       --media-listbox-transform-in: translateY(-8px) scale(1);
@@ -77,7 +76,6 @@ var mediaThemeClassic = (() => {
 
     :host([audio]) {
       --media-preview-time-border-radius: 3px;
-      --media-preview-time-margin: 0 0 5px;
       --media-preview-time-text-shadow: none;
     }
 
@@ -908,6 +906,7 @@ var mediaThemeClassic = (() => {
     MEDIA_PREVIEW_TIME: "mediaPreviewTime",
     MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
     MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
+    MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter",
     MEDIA_LOADING: "mediaLoading",
     MEDIA_BUFFERED: "mediaBuffered",
     MEDIA_STREAM_TYPE: "mediaStreamType",
@@ -916,23 +915,38 @@ var mediaThemeClassic = (() => {
     MEDIA_RENDITION_LIST: "mediaRenditionList",
     MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
     MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
-    MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled"
+    MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
+    MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
   };
-  var MediaUIPropsEntries = Object.entries(MediaUIProps);
-  var MediaUIAttributes = MediaUIPropsEntries.reduce((dictObj, [key, propName]) => {
-    dictObj[key] = `${propName.toLowerCase()}`;
-    return dictObj;
-  }, {});
-  var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
-    (dictObj, [key, propName]) => {
-      dictObj[key] = `${propName.toLowerCase()}`;
-      return dictObj;
-    },
-    {
-      USER_INACTIVE: "userinactivechange",
-      BREAKPOINTS_CHANGE: "breakpointchange",
-      BREAKPOINTS_COMPUTED: "breakpointscomputed"
-    }
+  var MediaUIPropsEntries = (
+    /** @type {[keyof MediaUIProps, string][]} */
+    Object.entries(MediaUIProps)
+  );
+  var MediaUIAttributes = (
+    /** @type {{ [k in keyof MediaUIProps]: string }} */
+    MediaUIPropsEntries.reduce(
+      (dictObj, [key, propName]) => {
+        dictObj[key] = `${propName.toLowerCase()}`;
+        return dictObj;
+      },
+      /** @type {Partial<{ [k in keyof MediaUIProps]: string }>} */
+      {}
+    )
+  );
+  var MediaStateChangeEvents = (
+    /** @type {{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string }} */
+    MediaUIPropsEntries.reduce(
+      (dictObj, [key, propName]) => {
+        dictObj[key] = `${propName.toLowerCase()}`;
+        return dictObj;
+      },
+      /** @type {Partial<{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string  }>} */
+      {
+        USER_INACTIVE: "userinactivechange",
+        BREAKPOINTS_CHANGE: "breakpointchange",
+        BREAKPOINTS_COMPUTED: "breakpointscomputed"
+      }
+    )
   );
   var StateChangeEventToAttributeMap = Object.entries(
     MediaStateChangeEvents
@@ -969,6 +983,8 @@ var mediaThemeClassic = (() => {
       return true;
     }
   };
+  var Node = class extends EventTarget2 {
+  };
   var ResizeObserver = class {
     observe() {
     }
@@ -981,15 +997,28 @@ var mediaThemeClassic = (() => {
     createElement: function() {
       return new globalThisShim2.HTMLElement();
     },
+    createElementNS: function() {
+      return new globalThisShim2.HTMLElement();
+    },
     addEventListener() {
     },
     removeEventListener() {
+    },
+    /**
+     *
+     * @param {Event} event
+     * @returns {boolean}
+     */
+    dispatchEvent(event) {
+      return false;
     }
+    // eslint-disable-line no-unused-vars
   };
   var globalThisShim2 = {
     ResizeObserver,
     document: documentShim,
-    HTMLElement: class HTMLElement2 extends EventTarget2 {
+    Node,
+    HTMLElement: class HTMLElement2 extends Node {
     },
     DocumentFragment: class DocumentFragment2 extends EventTarget2 {
     },
@@ -1001,12 +1030,47 @@ var mediaThemeClassic = (() => {
       whenDefined: function() {
       }
     },
+    localStorage: {
+      /**
+       * @param {string} key
+       * @returns {string|null}
+      */
+      getItem(key) {
+        return null;
+      },
+      // eslint-disable-line no-unused-vars
+      /**
+       * @param {string} key
+       * @param {string} value
+       */
+      setItem(key, value) {
+      },
+      // eslint-disable-line no-unused-vars
+      /**
+       * @param {string} key
+      */
+      removeItem(key) {
+      }
+      // eslint-disable-line no-unused-vars
+    },
     CustomEvent: function CustomEvent2() {
     },
     getComputedStyle: function() {
     },
     navigator: {
-      languages: []
+      languages: [],
+      get userAgent() {
+        return "";
+      }
+    },
+    /**
+     * @param {string} media
+     */
+    matchMedia(media) {
+      return {
+        matches: false,
+        media
+      };
     }
   };
   var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
@@ -1245,6 +1309,7 @@ var mediaThemeClassic = (() => {
         );
       }
     }
+    /** @type boolean */
     get booleanValue() {
       return __privateGet2(this, _element).hasAttributeNS(
         __privateGet2(this, _namespaceURI),
@@ -1286,6 +1351,7 @@ var mediaThemeClassic = (() => {
     get previousSibling() {
       return __privateGet2(this, _nodes)[0].previousSibling;
     }
+    // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
     get value() {
       return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
     }
@@ -1629,7 +1695,8 @@ var mediaThemeClassic = (() => {
     mediastreamtype: "streamtype"
   };
   var prependTemplate = Document.createElement("template");
-  prependTemplate.innerHTML = `
+  prependTemplate.innerHTML = /*html*/
+  `
   <style>
     :host {
       display: inline-block;
@@ -1675,7 +1742,10 @@ var mediaThemeClassic = (() => {
         if (this.mediaController && !((_a2 = this.mediaController) == null ? void 0 : _a2.breakpointsComputed))
           return;
         if (mutationList.some((mutation) => {
-          const target = mutation.target;
+          const target = (
+            /** @type {HTMLElement} */
+            mutation.target
+          );
           if (target === this)
             return true;
           if (target.localName !== "media-controller")
@@ -1697,6 +1767,7 @@ var mediaThemeClassic = (() => {
       this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
       __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
     }
+    /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
     get mediaController() {
       return this.renderRoot.querySelector("media-controller");
     }
@@ -1746,6 +1817,7 @@ var mediaThemeClassic = (() => {
         this.renderer = new TemplateInstance(
           this.template,
           this.props,
+          // @ts-ignore
           this.constructor.processor
         );
         this.renderRoot.textContent = "";
@@ -1777,7 +1849,10 @@ var mediaThemeClassic = (() => {
     const templateId = this.getAttribute("template");
     if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
       return;
-    const rootNode = this.getRootNode();
+    const rootNode = (
+      /** @type HTMLDocument | ShadowRoot */
+      this.getRootNode()
+    );
     const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
     if (template2) {
       __privateSet3(this, _prevTemplateId, templateId);

package/dist/themes/classic/index.mjs

@@ -37,7 +37,6 @@ var classic_default = `<!-- prettier-ignore -->
       --media-preview-thumbnail-border: 0;
       --media-preview-thumbnail-border-radius: 2px 2px 0 0;
       --media-preview-time-border-radius: 0 0 2px 2px;
-      --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
       --media-listbox-border-radius: 2px;
       --media-listbox-transform-in: translateY(-8px) scale(1);
@@ -52,7 +51,6 @@ var classic_default = `<!-- prettier-ignore -->
 
     :host([audio]) {
       --media-preview-time-border-radius: 3px;
-      --media-preview-time-margin: 0 0 5px;
       --media-preview-time-text-shadow: none;
     }
 
@@ -883,6 +881,7 @@ var MediaUIProps = {
   MEDIA_PREVIEW_TIME: "mediaPreviewTime",
   MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
   MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
+  MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter",
   MEDIA_LOADING: "mediaLoading",
   MEDIA_BUFFERED: "mediaBuffered",
   MEDIA_STREAM_TYPE: "mediaStreamType",
@@ -891,23 +890,38 @@ var MediaUIProps = {
   MEDIA_RENDITION_LIST: "mediaRenditionList",
   MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
   MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
-  MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled"
+  MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
+  MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
 };
-var MediaUIPropsEntries = Object.entries(MediaUIProps);
-var MediaUIAttributes = MediaUIPropsEntries.reduce((dictObj, [key, propName]) => {
-  dictObj[key] = `${propName.toLowerCase()}`;
-  return dictObj;
-}, {});
-var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
-  (dictObj, [key, propName]) => {
-    dictObj[key] = `${propName.toLowerCase()}`;
-    return dictObj;
-  },
-  {
-    USER_INACTIVE: "userinactivechange",
-    BREAKPOINTS_CHANGE: "breakpointchange",
-    BREAKPOINTS_COMPUTED: "breakpointscomputed"
-  }
+var MediaUIPropsEntries = (
+  /** @type {[keyof MediaUIProps, string][]} */
+  Object.entries(MediaUIProps)
+);
+var MediaUIAttributes = (
+  /** @type {{ [k in keyof MediaUIProps]: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps]: string }>} */
+    {}
+  )
+);
+var MediaStateChangeEvents = (
+  /** @type {{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string }} */
+  MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = `${propName.toLowerCase()}`;
+      return dictObj;
+    },
+    /** @type {Partial<{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string  }>} */
+    {
+      USER_INACTIVE: "userinactivechange",
+      BREAKPOINTS_CHANGE: "breakpointchange",
+      BREAKPOINTS_COMPUTED: "breakpointscomputed"
+    }
+  )
 );
 var StateChangeEventToAttributeMap = Object.entries(
   MediaStateChangeEvents
@@ -944,6 +958,8 @@ var EventTarget2 = class {
     return true;
   }
 };
+var Node = class extends EventTarget2 {
+};
 var ResizeObserver = class {
   observe() {
   }
@@ -956,15 +972,28 @@ var documentShim = {
   createElement: function() {
     return new globalThisShim2.HTMLElement();
   },
+  createElementNS: function() {
+    return new globalThisShim2.HTMLElement();
+  },
   addEventListener() {
   },
   removeEventListener() {
+  },
+  /**
+   *
+   * @param {Event} event
+   * @returns {boolean}
+   */
+  dispatchEvent(event) {
+    return false;
   }
+  // eslint-disable-line no-unused-vars
 };
 var globalThisShim2 = {
   ResizeObserver,
   document: documentShim,
-  HTMLElement: class HTMLElement2 extends EventTarget2 {
+  Node,
+  HTMLElement: class HTMLElement2 extends Node {
   },
   DocumentFragment: class DocumentFragment2 extends EventTarget2 {
   },
@@ -976,12 +1005,47 @@ var globalThisShim2 = {
     whenDefined: function() {
     }
   },
+  localStorage: {
+    /**
+     * @param {string} key
+     * @returns {string|null}
+    */
+    getItem(key) {
+      return null;
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+     * @param {string} value
+     */
+    setItem(key, value) {
+    },
+    // eslint-disable-line no-unused-vars
+    /**
+     * @param {string} key
+    */
+    removeItem(key) {
+    }
+    // eslint-disable-line no-unused-vars
+  },
   CustomEvent: function CustomEvent2() {
   },
   getComputedStyle: function() {
   },
   navigator: {
-    languages: []
+    languages: [],
+    get userAgent() {
+      return "";
+    }
+  },
+  /**
+   * @param {string} media
+   */
+  matchMedia(media) {
+    return {
+      matches: false,
+      media
+    };
   }
 };
 var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
@@ -1220,6 +1284,7 @@ var AttrPart = class extends Part {
       );
     }
   }
+  /** @type boolean */
   get booleanValue() {
     return __privateGet2(this, _element).hasAttributeNS(
       __privateGet2(this, _namespaceURI),
@@ -1261,6 +1326,7 @@ var ChildNodePart = class extends Part {
   get previousSibling() {
     return __privateGet2(this, _nodes)[0].previousSibling;
   }
+  // FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
   get value() {
     return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
   }
@@ -1604,7 +1670,8 @@ var observedMediaAttributes = {
   mediastreamtype: "streamtype"
 };
 var prependTemplate = Document.createElement("template");
-prependTemplate.innerHTML = `
+prependTemplate.innerHTML = /*html*/
+`
   <style>
     :host {
       display: inline-block;
@@ -1650,7 +1717,10 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       if (this.mediaController && !((_a2 = this.mediaController) == null ? void 0 : _a2.breakpointsComputed))
         return;
       if (mutationList.some((mutation) => {
-        const target = mutation.target;
+        const target = (
+          /** @type {HTMLElement} */
+          mutation.target
+        );
         if (target === this)
           return true;
         if (target.localName !== "media-controller")
@@ -1672,6 +1742,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
     this.addEventListener(MediaStateChangeEvents.BREAKPOINTS_COMPUTED, this.render);
     __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
   }
+  /** @type {HTMLElement & { breakpointsComputed?: boolean }} */
   get mediaController() {
     return this.renderRoot.querySelector("media-controller");
   }
@@ -1721,6 +1792,7 @@ var MediaThemeElement = class extends GlobalThis.HTMLElement {
       this.renderer = new TemplateInstance(
         this.template,
         this.props,
+        // @ts-ignore
         this.constructor.processor
       );
       this.renderRoot.textContent = "";
@@ -1752,7 +1824,10 @@ updateTemplate_fn = function() {
   const templateId = this.getAttribute("template");
   if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
     return;
-  const rootNode = this.getRootNode();
+  const rootNode = (
+    /** @type HTMLDocument | ShadowRoot */
+    this.getRootNode()
+  );
   const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
   if (template2) {
     __privateSet3(this, _prevTemplateId, templateId);