@muibook/components 15.0.0 → 15.0.1

package/dist/esm/components/mui-slide-frame/index.js

@@ -4,11 +4,10 @@ import "../mui-stack/vstack/index.js";
 import "../mui-stack/hstack/index.js";
 import "../mui-button/index.js";
 import "../mui-icons/warning/index.js";
-import "../mui-dialog/index.js";
 import "../mui-select/index.js";
-class R extends HTMLElement {
+class C extends HTMLElement {
   constructor() {
-    super(), this.defaultSlot = null, this.headerSlot = null, this.headerAfterSlot = null, this.headerDescriptionSlot = null, this.footerSlot = null, this.footerAfterSlot = null, this.footerDescriptionSlot = null, this.notesSlot = null, this.imageSlot = null, this.stageEl = null, this.surfaceEl = null, this.nativeFullscreenActive = !1, this.pointerStartX = null, this.pointerStartY = null, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), this.onSurfaceClick = (e) => this.handleSurfaceClick(e), this.onPointerDown = (e) => this.handlePointerDown(e), this.onPointerUp = (e) => this.handlePointerUp(e), this.onKeyDown = (e) => this.handleArrowNavigation(e), this.onFullscreenChange = () => this.handleFullscreenChange(), this.onFullscreenError = () => this.handleFullscreenError(), this.onWindowResize = () => this.updateFullscreenSurfaceFit(), this.onDocumentKeyDown = (e) => {
+    super(), this.defaultSlot = null, this.headerSlot = null, this.headerAfterSlot = null, this.headerDescriptionSlot = null, this.footerSlot = null, this.footerAfterSlot = null, this.footerDescriptionSlot = null, this.notesSlot = null, this.stageEl = null, this.surfaceEl = null, this.nativeFullscreenActive = !1, this.pointerStartX = null, this.pointerStartY = null, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), this.onPointerDown = (e) => this.handlePointerDown(e), this.onPointerUp = (e) => this.handlePointerUp(e), this.onKeyDown = (e) => this.handleArrowNavigation(e), this.onFullscreenChange = () => this.handleFullscreenChange(), this.onFullscreenError = () => this.handleFullscreenError(), this.onWindowResize = () => this.updateFullscreenSurfaceFit(), this.onDocumentKeyDown = (e) => {
       const t = document.fullscreenElement === this;
       if (e.key === "Escape" && this.hasAttribute("present") && !t) {
         e.preventDefault(), this.resetPresentationState();
@@ -33,8 +32,6 @@ class R extends HTMLElement {
       "hide-header",
       "hide-footer",
       "hide-counter",
-      "preview",
-      "lightbox",
       "scroll",
       "fullscreen"
     ];
@@ -43,8 +40,8 @@ class R extends HTMLElement {
     this.hasAttribute("ratio") || this.setAttribute("ratio", "16:9"), this.hasAttribute("padding") || this.setAttribute("padding", "medium"), this.hasAttribute("active-section") || this.setAttribute("active-section", "0"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("radius") || this.setAttribute("radius", "default"), this.render(), this.syncSections(), this.syncChromeState(), this.addEventListener("keydown", this.onKeyDown), document.addEventListener("keydown", this.onDocumentKeyDown), document.addEventListener("fullscreenchange", this.onFullscreenChange), document.addEventListener("fullscreenerror", this.onFullscreenError), window.addEventListener("resize", this.onWindowResize);
   }
   disconnectedCallback() {
-    var e, t, i, s, r, o, n, h, b, m, f, d;
-    (e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (i = this.headerAfterSlot) == null || i.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.headerDescriptionSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (r = this.footerSlot) == null || r.removeEventListener("slotchange", this.onChromeSlotChange), (o = this.footerAfterSlot) == null || o.removeEventListener("slotchange", this.onChromeSlotChange), (n = this.footerDescriptionSlot) == null || n.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.notesSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), (b = this.imageSlot) == null || b.removeEventListener("slotchange", this.onChromeSlotChange), (m = this.surfaceEl) == null || m.removeEventListener("click", this.onSurfaceClick), (f = this.surfaceEl) == null || f.removeEventListener("pointerdown", this.onPointerDown), (d = this.surfaceEl) == null || d.removeEventListener("pointerup", this.onPointerUp), this.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keydown", this.onDocumentKeyDown), document.removeEventListener("fullscreenchange", this.onFullscreenChange), document.removeEventListener("fullscreenerror", this.onFullscreenError), window.removeEventListener("resize", this.onWindowResize);
+    var e, t, i, s, a, r, l, h, p, m;
+    (e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (i = this.headerAfterSlot) == null || i.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.headerDescriptionSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (a = this.footerSlot) == null || a.removeEventListener("slotchange", this.onChromeSlotChange), (r = this.footerAfterSlot) == null || r.removeEventListener("slotchange", this.onChromeSlotChange), (l = this.footerDescriptionSlot) == null || l.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.notesSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), (p = this.surfaceEl) == null || p.removeEventListener("pointerdown", this.onPointerDown), (m = this.surfaceEl) == null || m.removeEventListener("pointerup", this.onPointerUp), this.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keydown", this.onDocumentKeyDown), document.removeEventListener("fullscreenchange", this.onFullscreenChange), document.removeEventListener("fullscreenerror", this.onFullscreenError), window.removeEventListener("resize", this.onWindowResize);
   }
   attributeChangedCallback(e, t, i) {
     t !== i && (this.render(), this.syncSections(), this.syncChromeState());
@@ -160,8 +157,8 @@ class R extends HTMLElement {
   syncSections() {
     if (!this.shadowRoot) return;
     const e = this.getSections(), t = this.getActiveSectionIndex(), i = this.hasAttribute("present") || e.length > 1;
-    e.forEach((s, r) => {
-      s.setAttribute("data-slide-section", ""), r === t ? (s.removeAttribute("slide-hidden"), s.setAttribute("slide-active", "")) : (s.removeAttribute("slide-active"), i ? s.setAttribute("slide-hidden", "") : s.removeAttribute("slide-hidden"));
+    e.forEach((s, a) => {
+      s.setAttribute("data-slide-section", ""), a === t ? (s.removeAttribute("slide-hidden"), s.setAttribute("slide-active", "")) : (s.removeAttribute("slide-active"), i ? s.setAttribute("slide-hidden", "") : s.removeAttribute("slide-hidden"));
     }), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), this.updateFullscreenSurfaceFit();
   }
   handleArrowNavigation(e) {
@@ -188,7 +185,7 @@ class R extends HTMLElement {
     return !!(i && this.contains(i));
   }
   render() {
-    var r, o, n, h, b, m, f, d, c, S, w, y, u, g, a, l, p, x, E, A;
+    var a, r, l, h, p, m, b, v, d, S, w, y, c, u, o, n, g, E;
     if (!this.shadowRoot) return;
     const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), i = this.escapeHtml(e), s = this.escapeHtml(t);
     this.shadowRoot.innerHTML = /*html*/
@@ -313,21 +310,11 @@ class R extends HTMLElement {
         :host([present]) .surface {
           overflow: auto !important;
         }
-        :host([preview]) .stage {
-          border-color: var(--slide-frame-preview-border-color, var(--text-color-warning));
-        }
-        :host([preview]:not([variant="plain"]):not([variant="ghost"])) .stage {
-          box-shadow:
-            var(--slide-frame-shadow),
-            0 0 0 var(--stroke-size-100) color-mix(in srgb, var(--slide-frame-preview-border-color, var(--text-color-warning)) 45%, transparent);
-        }
-        :host([preview][variant="plain"]) .stage,
-        :host([preview][variant="ghost"]) .stage {
-          box-shadow: 0 0 0 var(--stroke-size-100) color-mix(in srgb, var(--slide-frame-preview-border-color, var(--text-color-warning)) 45%, transparent);
-        }
         .header,
         .footer {
           display: block;
+          width: 100%;
+          box-sizing: border-box;
         }
         .header {
           padding:
@@ -402,14 +389,6 @@ class R extends HTMLElement {
         :host([present]) .stage {
           background: var(--slide-frame-background-present, var(--slide-frame-background));
         }
-        .lightbox-image {
-          display: block;
-          width: 100%;
-          max-height: 75vh;
-          height: auto;
-          object-fit: contain;
-        }
-
         .present-controls {
           display: grid;
         }
@@ -488,62 +467,47 @@ class R extends HTMLElement {
         </div>
         <div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
       </div>
-      <mui-dialog id="lightboxDialog" width="min(94vw, 1200px)" content-padding="none">
-        <mui-heading slot="title" size="5" level="3">Image Preview</mui-heading>
-        <img id="lightboxImage" class="lightbox-image" alt="Slide image preview" />
-      </mui-dialog>
-    `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (r = this.defaultSlot) == null || r.addEventListener("slotchange", this.onSlotChange), this.headerSlot = this.shadowRoot.querySelector('slot[name="header"]'), this.headerAfterSlot = this.shadowRoot.querySelector('slot[name="header-after"]'), this.headerDescriptionSlot = this.shadowRoot.querySelector('slot[name="header-description"]'), this.footerSlot = this.shadowRoot.querySelector('slot[name="footer"]'), this.footerAfterSlot = this.shadowRoot.querySelector('slot[name="footer-after"]'), this.notesSlot = this.shadowRoot.querySelector('slot[name="notes"]'), this.imageSlot = this.shadowRoot.querySelector('slot[name="image"]'), this.stageEl = this.shadowRoot.querySelector(".stage"), this.surfaceEl = this.shadowRoot.querySelector(".surface"), (o = this.headerSlot) == null || o.addEventListener("slotchange", this.onChromeSlotChange), (n = this.headerAfterSlot) == null || n.addEventListener("slotchange", this.onChromeSlotChange), (h = this.headerDescriptionSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (b = this.footerSlot) == null || b.addEventListener("slotchange", this.onChromeSlotChange), (m = this.footerAfterSlot) == null || m.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerDescriptionSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (d = this.notesSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (c = this.surfaceEl) == null || c.addEventListener("click", this.onSurfaceClick), (S = this.surfaceEl) == null || S.addEventListener("pointerdown", this.onPointerDown), (w = this.surfaceEl) == null || w.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (y = this.shadowRoot.querySelector("#lightboxDialog")) == null || y.addEventListener("mui-dialog-close", () => {
-      this.dispatchEvent(new CustomEvent("lightbox-close", { bubbles: !0, composed: !0 }));
-    }), (u = this.shadowRoot.querySelector("#notesActionBtn")) == null || u.addEventListener("click", () => {
+    `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (a = this.defaultSlot) == null || a.addEventListener("slotchange", this.onSlotChange), this.headerSlot = this.shadowRoot.querySelector('slot[name="header"]'), this.headerAfterSlot = this.shadowRoot.querySelector('slot[name="header-after"]'), this.headerDescriptionSlot = this.shadowRoot.querySelector('slot[name="header-description"]'), this.footerSlot = this.shadowRoot.querySelector('slot[name="footer"]'), this.footerAfterSlot = this.shadowRoot.querySelector('slot[name="footer-after"]'), this.notesSlot = this.shadowRoot.querySelector('slot[name="notes"]'), this.stageEl = this.shadowRoot.querySelector(".stage"), this.surfaceEl = this.shadowRoot.querySelector(".surface"), (r = this.headerSlot) == null || r.addEventListener("slotchange", this.onChromeSlotChange), (l = this.headerAfterSlot) == null || l.addEventListener("slotchange", this.onChromeSlotChange), (h = this.headerDescriptionSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (p = this.footerSlot) == null || p.addEventListener("slotchange", this.onChromeSlotChange), (m = this.footerAfterSlot) == null || m.addEventListener("slotchange", this.onChromeSlotChange), (b = this.footerDescriptionSlot) == null || b.addEventListener("slotchange", this.onChromeSlotChange), (v = this.notesSlot) == null || v.addEventListener("slotchange", this.onChromeSlotChange), (d = this.surfaceEl) == null || d.addEventListener("pointerdown", this.onPointerDown), (S = this.surfaceEl) == null || S.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (w = this.shadowRoot.querySelector("#notesActionBtn")) == null || w.addEventListener("click", () => {
       this.toggleNotes();
-    }), (g = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || g.addEventListener("click", () => {
+    }), (y = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || y.addEventListener("click", () => {
       this.addSection(`Section ${(this.getSections().length + 1).toString()}: New`);
-    }), (a = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || a.addEventListener("click", () => {
+    }), (c = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || c.addEventListener("click", () => {
       this.prevSection();
-    }), (l = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || l.addEventListener("click", () => {
+    }), (u = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || u.addEventListener("click", () => {
       this.nextSection();
-    }), (p = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || p.addEventListener("click", () => {
+    }), (o = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || o.addEventListener("click", () => {
       if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
         this.resetPresentationState(), this.exitFullscreen();
         return;
       }
-      this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((v) => {
-        v && this.syncChromeState();
+      this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((f) => {
+        f && this.syncChromeState();
       });
-    }), (x = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || x.addEventListener("click", () => {
+    }), (n = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || n.addEventListener("click", () => {
       this.resetPresentationState(), this.exitFullscreen();
-    }), (E = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || E.addEventListener("click", () => {
+    }), (g = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || g.addEventListener("click", () => {
       this.toggleNotes();
-    }), (A = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || A.addEventListener("change", (F) => {
-      var C;
-      const v = F.currentTarget, k = (v == null ? void 0 : v.value) || ((C = v == null ? void 0 : v.getAttribute) == null ? void 0 : C.call(v, "value")) || "16:9";
-      this.setAttribute("ratio", k);
+    }), (E = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || E.addEventListener("change", (A) => {
+      var x;
+      const f = A.currentTarget, F = (f == null ? void 0 : f.value) || ((x = f == null ? void 0 : f.getAttribute) == null ? void 0 : x.call(f, "value")) || "16:9";
+      this.setAttribute("ratio", F);
     }), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
   }
   syncChromeState() {
     if (!this.shadowRoot) return;
-    const e = (a) => ((a == null ? void 0 : a.assignedNodes({ flatten: !0 })) || []).some(
-      (l) => l.nodeType === Node.ELEMENT_NODE || (l.textContent || "").trim().length > 0
-    ), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"), r = this.hasAttribute("hide-footer"), o = !this.hasAttribute("hide-counter") && this.getSections().length > 0, n = !s && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !r && (i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || o || this.hasAttribute("present") || this.hasAttribute("fullscreen")), b = e(this.notesSlot), m = this.hasAttribute("notes-open"), f = this.shadowRoot.querySelector("#headerRegion"), d = this.shadowRoot.querySelector("#footerRegion"), c = this.shadowRoot.querySelector("#footerCounter"), S = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), w = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), y = this.shadowRoot.querySelector(".present-controls"), u = Math.max(this.getSections().length, 1), g = this.getActiveSectionIndex() + 1;
+    const e = (o) => ((o == null ? void 0 : o.assignedNodes({ flatten: !0 })) || []).some(
+      (n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent || "").trim().length > 0
+    ), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"), a = this.hasAttribute("hide-footer"), r = !this.hasAttribute("hide-counter") && this.getSections().length > 0, l = !s && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !a && (i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || r || this.hasAttribute("present") || this.hasAttribute("fullscreen")), p = e(this.notesSlot), m = this.hasAttribute("notes-open"), b = this.shadowRoot.querySelector("#headerRegion"), v = this.shadowRoot.querySelector("#footerRegion"), d = this.shadowRoot.querySelector("#footerCounter"), S = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), w = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), y = this.shadowRoot.querySelector(".present-controls"), c = Math.max(this.getSections().length, 1), u = this.getActiveSectionIndex() + 1;
     if (y) {
-      const a = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
-      y.hidden = a;
+      const o = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
+      y.hidden = o;
     }
-    if (c) {
-      c.hidden = !o;
-      const a = Math.min(g, u), l = String(u).length;
-      c.style.setProperty("--slide-frame-counter-digits", String(l)), c.setAttribute("aria-label", `Section ${a} of ${u}`), c.innerHTML = `Section <span class="counter-value">${a}</span>/<span class="counter-value">${u}</span>`;
+    if (d) {
+      d.hidden = !r;
+      const o = Math.min(u, c), n = String(c).length;
+      d.style.setProperty("--slide-frame-counter-digits", String(n)), d.setAttribute("aria-label", `Section ${o} of ${c}`), d.innerHTML = `Section <span class="counter-value">${o}</span>/<span class="counter-value">${c}</span>`;
     }
-    S && (S.hidden = !this.hasAttribute("fullscreen")), w && (w.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), f && (f.hidden = !n), d && (d.hidden = !h), this.toggleAttribute("has-header", n), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", b), this.toggleAttribute("notes-visible", m), this.toggleAttribute("has-chrome", n || h || m), this.updateFullscreenSurfaceFit();
-  }
-  handleSurfaceClick(e) {
-    if (!this.hasAttribute("lightbox") || !this.imageSlot) return;
-    const t = this.imageSlot.assignedElements({ flatten: !0 });
-    if (t.length === 0) return;
-    const i = e.composedPath();
-    if (!t.some((o) => i.includes(o))) return;
-    const r = this.resolveLightboxImage(i, t);
-    !r || !r.src || this.openLightbox(r.src, r.alt || "Slide image preview");
+    S && (S.hidden = !this.hasAttribute("fullscreen")), w && (w.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), b && (b.hidden = !l), v && (v.hidden = !h), this.toggleAttribute("has-header", l), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", p), this.toggleAttribute("notes-visible", m), this.toggleAttribute("has-chrome", l || h || m), this.updateFullscreenSurfaceFit();
   }
   handlePointerDown(e) {
     this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
@@ -584,34 +548,12 @@ class R extends HTMLElement {
     }
     const t = this.shadowRoot.querySelector(".frame"), i = this.shadowRoot.querySelector(".present-controls"), s = this.shadowRoot.querySelector(".notes");
     if (!t) return;
-    const r = t.getBoundingClientRect(), o = getComputedStyle(t), n = parseFloat(o.paddingTop || "0") || 0, h = parseFloat(o.paddingBottom || "0") || 0, b = parseFloat(o.paddingLeft || "0") || 0, m = parseFloat(o.paddingRight || "0") || 0, f = parseFloat(o.rowGap || o.gap || "0") || 0, d = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, c = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, S = [d > 0, !0, c > 0].filter(Boolean).length, w = Math.max(0, S - 1), y = Math.max(0, r.width - b - m), u = Math.max(0, r.height - n - h - d - c - f * w), g = this.resolveRatioParts(), a = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
-    let l, p;
-    a ? (p = u, l = p * (g.width / g.height)) : (l = y, p = l * (g.height / g.width), p > u && (p = u, l = p * (g.width / g.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(l))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(p))}px`;
-  }
-  resolveLightboxImage(e, t) {
-    var s;
-    const i = e.find((r) => r instanceof HTMLImageElement);
-    if (i instanceof HTMLImageElement) return i;
-    for (const r of t) {
-      if (r instanceof HTMLImageElement) return r;
-      const o = (s = r.querySelector) == null ? void 0 : s.call(r, "img");
-      if (o instanceof HTMLImageElement) return o;
-    }
-    return null;
-  }
-  openLightbox(e, t) {
-    var r, o, n;
-    const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("#lightboxDialog"), s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("#lightboxImage");
-    !i || !s || (s.src = e, s.alt = t, (n = i.open) == null || n.call(i), this.dispatchEvent(
-      new CustomEvent("lightbox-open", {
-        detail: { src: e, alt: t },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
+    const a = t.getBoundingClientRect(), r = getComputedStyle(t), l = parseFloat(r.paddingTop || "0") || 0, h = parseFloat(r.paddingBottom || "0") || 0, p = parseFloat(r.paddingLeft || "0") || 0, m = parseFloat(r.paddingRight || "0") || 0, b = parseFloat(r.rowGap || r.gap || "0") || 0, v = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, d = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, S = [v > 0, !0, d > 0].filter(Boolean).length, w = Math.max(0, S - 1), y = Math.max(0, a.width - p - m), c = Math.max(0, a.height - l - h - v - d - b * w), u = this.resolveRatioParts(), o = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
+    let n, g;
+    o ? (g = c, n = g * (u.width / u.height)) : (n = y, g = n * (u.height / u.width), g > c && (g = c, n = g * (u.width / u.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(n))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(g))}px`;
   }
   escapeHtml(e) {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
 }
-customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", R);
+customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", C);

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Fri, 27 Feb 2026 13:01:27 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Fri, 27 Feb 2026 13:59:34 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */