@ugfoundation/swaralipi-js 0.7.3 → 0.7.4

package/dist/viewer/index.js

@@ -540,6 +540,14 @@ var FONT_FACES = Object.entries(NOTATION_FONT_URLS).map(
 var SWARALIPI_CSS = `
 ${FONT_FACES}
 
+/* A custom element is display:inline by default, and Resize Observer
+   "Observations do not fire for non-replaced inline Elements" \u2014 they report
+   one empty content rect and nothing after
+   (https://drafts.csswg.org/resize-observer/). The element's re-fit-on-resize
+   is that observer, so without this rule the sheet is fitted once, to whatever
+   width it happened to have, and never again. */
+:host { display: block; }
+
 .sw-sheet {
   font-family: var(--sw-font, 'Noto Sans Bengali', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', sans-serif);
   font-size: var(--sw-size, 1.125rem);
@@ -1223,11 +1231,16 @@ function createElementClass() {
         });
         this.#resize.observe(this);
       }
+      document.fonts?.addEventListener("loadingdone", this.#onFontsLoaded);
     }
+    #onFontsLoaded = () => {
+      if (this.#doc !== void 0) this.fit();
+    };
     disconnectedCallback() {
       this.#abort?.abort();
       this.#resize?.disconnect();
       this.#resize = void 0;
+      document.fonts?.removeEventListener("loadingdone", this.#onFontsLoaded);
     }
     /** Scale the notation to fit the available width, times the zoom factor. */
     #fit() {
@@ -1326,9 +1339,6 @@ function createElementClass() {
       });
       this.#root.innerHTML = this.#styleFallback() + html;
       this.#fit();
-      void document.fonts?.ready.then(() => {
-        if (seq === this.#renderSeq) this.fit();
-      });
     }
     #renderError(message) {
       const div = document.createElement("div");