@muibook/components 16.0.0 → 17.0.0

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

@@ -1,13 +1,14 @@
 import "../mui-heading/index.js";
 import "../mui-body/index.js";
+import "../mui-slide-section/index.js";
 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-select/index.js";
-class C extends HTMLElement {
+class x 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.stageEl = null, this.surfaceEl = null, this.activeSectionEl = 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) => {
+    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.activeSectionEl = null, this.nativeFullscreenActive = !1, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), 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();
@@ -39,8 +40,8 @@ class C 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, n, o, l, d, f, c;
-    (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), (n = this.footerSlot) == null || n.removeEventListener("slotchange", this.onChromeSlotChange), (o = this.footerAfterSlot) == null || o.removeEventListener("slotchange", this.onChromeSlotChange), (l = this.footerDescriptionSlot) == null || l.removeEventListener("slotchange", this.onChromeSlotChange), (d = this.notesSlot) == null || d.removeEventListener("slotchange", this.onChromeSlotChange), (f = this.surfaceEl) == null || f.removeEventListener("pointerdown", this.onPointerDown), (c = this.surfaceEl) == null || c.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, r, n, d, h;
+    (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), (n = this.footerAfterSlot) == null || n.removeEventListener("slotchange", this.onChromeSlotChange), (d = this.footerDescriptionSlot) == null || d.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.notesSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), 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());
@@ -71,8 +72,9 @@ class C extends HTMLElement {
     this.nativeFullscreenActive = !1, this.removeAttribute("present"), this.removeAttribute("fullscreen"), this.syncChromeState();
   }
   getSections() {
-    var t;
-    return (((t = this.defaultSlot) == null ? void 0 : t.assignedElements({ flatten: !0 })) || []).filter((i) => !["header", "footer"].includes(i.getAttribute("slot") || ""));
+    var s;
+    const t = (((s = this.defaultSlot) == null ? void 0 : s.assignedElements({ flatten: !0 })) || []).filter((r) => !["header", "footer"].includes(r.getAttribute("slot") || "")), i = t.filter((r) => r.tagName.toLowerCase() === "mui-slide-section");
+    return i.length > 0 ? i : t;
   }
   getActiveSectionIndex() {
     const e = this.getSections(), t = parseInt(this.getAttribute("active-section") || "0", 10);
@@ -105,22 +107,37 @@ class C extends HTMLElement {
       })
     );
   }
+  createDefaultSection(e) {
+    const t = document.createElement("mui-slide-section"), i = document.createElement("mui-v-stack");
+    i.setAttribute("space", "var(--space-400)"), i.setAttribute("alignx", "center"), i.setAttribute("aligny", "center");
+    const s = document.createElement("mui-body");
+    return s.setAttribute("size", "large"), s.textContent = e, i.appendChild(s), t.appendChild(i), t;
+  }
   addSection(e) {
-    const t = document.createElement("mui-v-stack");
-    if (t.setAttribute("space", "var(--space-400)"), t.setAttribute("alignx", "center"), t.setAttribute("aligny", "center"), t.setAttribute("data-slide-section", ""), typeof e == "string") {
-      const n = document.createElement("mui-body");
-      n.setAttribute("size", "large"), n.textContent = e, t.appendChild(n);
-    } else e instanceof HTMLElement && t.appendChild(e);
-    this.appendChild(t);
-    const i = this.getSections(), s = Math.max(0, i.length - 1);
-    this.setActiveSectionIndex(s), this.syncSections(), this.dispatchEvent(
+    const t = `Section ${(this.getSections().length + 1).toString()}`;
+    let i;
+    typeof e == "string" ? i = this.createDefaultSection(e) : e instanceof HTMLElement ? e.tagName.toLowerCase() === "mui-slide-section" ? i = e : (i = document.createElement("mui-slide-section"), i.appendChild(e)) : i = this.createDefaultSection(t), this.appendChild(i);
+    const s = this.getSections(), r = Math.max(0, s.length - 1);
+    this.setActiveSectionIndex(r), this.syncSections(), this.dispatchEvent(
       new CustomEvent("section-add", {
-        detail: { index: s, total: i.length },
+        detail: { index: r, total: s.length },
         bubbles: !0,
         composed: !0
       })
     );
   }
+  requestAddSection() {
+    const e = this.getSections().length, t = new CustomEvent("section-add-request", {
+      detail: {
+        index: e,
+        total: e + 1
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    this.dispatchEvent(t) && this.addSection(`Section ${(e + 1).toString()}`);
+  }
   toggleNotes(e) {
     const t = typeof e == "boolean" ? e : !this.hasAttribute("notes-open");
     this.toggleAttribute("notes-open", t), this.dispatchEvent(
@@ -153,8 +170,8 @@ class C extends HTMLElement {
     let t = this.getActiveSectionIndex();
     this.activeSectionEl && e.includes(this.activeSectionEl) && (t = e.indexOf(this.activeSectionEl)), t = Math.max(0, Math.min(t, Math.max(0, e.length - 1))), (this.getAttribute("active-section") || "0") !== String(t) && this.setAttribute("active-section", String(t));
     const i = this.hasAttribute("present") || e.length > 1;
-    e.forEach((s, n) => {
-      s.setAttribute("data-slide-section", ""), n === 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, 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"));
     }), this.activeSectionEl = e[t] ?? null, this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), this.updateFullscreenSurfaceFit();
   }
   handleArrowNavigation(e) {
@@ -181,7 +198,7 @@ class C extends HTMLElement {
     return !!(i && this.contains(i));
   }
   render() {
-    var n, o, l, d, f, c, b, v, h, S, y, w, u, a, p, m, r, E;
+    var r, n, d, h, w, p, v, f, c, b, S, y, u, l, g, m;
     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*/
@@ -459,59 +476,51 @@ class C extends HTMLElement {
         </div>
         <div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
       </div>
-    `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (n = this.defaultSlot) == null || n.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"), (o = this.headerSlot) == null || o.addEventListener("slotchange", this.onChromeSlotChange), (l = this.headerAfterSlot) == null || l.addEventListener("slotchange", this.onChromeSlotChange), (d = this.headerDescriptionSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (c = this.footerAfterSlot) == null || c.addEventListener("slotchange", this.onChromeSlotChange), (b = this.footerDescriptionSlot) == null || b.addEventListener("slotchange", this.onChromeSlotChange), (v = this.notesSlot) == null || v.addEventListener("slotchange", this.onChromeSlotChange), (h = this.surfaceEl) == null || h.addEventListener("pointerdown", this.onPointerDown), (S = this.surfaceEl) == null || S.addEventListener("pointerup", this.onPointerUp), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (y = this.shadowRoot.querySelector("#notesActionBtn")) == null || y.addEventListener("click", () => {
+    `, 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.stageEl = this.shadowRoot.querySelector(".stage"), (n = this.headerSlot) == null || n.addEventListener("slotchange", this.onChromeSlotChange), (d = this.headerAfterSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (h = this.headerDescriptionSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (w = this.footerSlot) == null || w.addEventListener("slotchange", this.onChromeSlotChange), (p = this.footerAfterSlot) == null || p.addEventListener("slotchange", this.onChromeSlotChange), (v = this.footerDescriptionSlot) == null || v.addEventListener("slotchange", this.onChromeSlotChange), (f = this.notesSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (c = this.shadowRoot.querySelector("#notesActionBtn")) == null || c.addEventListener("click", () => {
       this.toggleNotes();
-    }), (w = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || w.addEventListener("click", () => {
-      this.addSection(`Section ${(this.getSections().length + 1).toString()}`);
-    }), (u = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || u.addEventListener("click", () => {
+    }), (b = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || b.addEventListener("click", () => {
+      this.requestAddSection();
+    }), (S = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || S.addEventListener("click", () => {
       this.prevSection();
-    }), (a = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || a.addEventListener("click", () => {
+    }), (y = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || y.addEventListener("click", () => {
       this.nextSection();
-    }), (p = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || p.addEventListener("click", () => {
+    }), (u = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || u.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((g) => {
-        g && this.syncChromeState();
+      this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((a) => {
+        a && this.syncChromeState();
       });
-    }), (m = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || m.addEventListener("click", () => {
+    }), (l = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || l.addEventListener("click", () => {
       this.resetPresentationState(), this.exitFullscreen();
-    }), (r = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || r.addEventListener("click", () => {
+    }), (g = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || g.addEventListener("click", () => {
       this.toggleNotes();
-    }), (E = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || E.addEventListener("change", (A) => {
-      var x;
-      const g = A.currentTarget, F = (g == null ? void 0 : g.value) || ((x = g == null ? void 0 : g.getAttribute) == null ? void 0 : x.call(g, "value")) || "16:9";
-      this.setAttribute("ratio", F);
+    }), (m = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || m.addEventListener("change", (o) => {
+      var A;
+      const a = o.currentTarget, E = (a == null ? void 0 : a.value) || ((A = a == null ? void 0 : a.getAttribute) == null ? void 0 : A.call(a, "value")) || "16:9";
+      this.setAttribute("ratio", E);
     }), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
   }
   syncChromeState() {
     if (!this.shadowRoot) return;
-    const e = (r) => ((r == null ? void 0 : r.assignedNodes({ flatten: !0 })) || []).some(
-      (E) => E.nodeType === Node.ELEMENT_NODE || (E.textContent || "").trim().length > 0
-    ), t = !!(this.getAttribute("title") || "").trim(), i = !!(this.getAttribute("footer-text") || "").trim(), s = this.hasAttribute("hide-header"), n = this.hasAttribute("hide-footer"), o = !this.hasAttribute("hide-counter") && this.getSections().length > 0, l = !s && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), d = !n && (i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || o || this.hasAttribute("present") || this.hasAttribute("fullscreen")), f = e(this.notesSlot), c = this.hasAttribute("notes-open"), b = this.shadowRoot.querySelector("#headerRegion"), v = this.shadowRoot.querySelector("#footerRegion"), h = this.shadowRoot.querySelector("#footerCounter"), S = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), y = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), w = this.shadowRoot.querySelector(".present-controls"), u = this.shadowRoot.querySelector("#slideFrameAddSectionBtn"), a = this.shadowRoot.querySelector("#slideFrameAddSectionRule"), p = Math.max(this.getSections().length, 1), m = this.getActiveSectionIndex() + 1;
-    if (w) {
-      const r = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
-      w.hidden = r;
+    const e = (o) => ((o == null ? void 0 : o.assignedNodes({ flatten: !0 })) || []).some(
+      (a) => a.nodeType === Node.ELEMENT_NODE || (a.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"), n = !this.hasAttribute("hide-counter") && this.getSections().length > 0, d = !s && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !r && (i || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || n || this.hasAttribute("present") || this.hasAttribute("fullscreen")), w = e(this.notesSlot), p = this.hasAttribute("notes-open"), v = this.shadowRoot.querySelector("#headerRegion"), f = this.shadowRoot.querySelector("#footerRegion"), c = this.shadowRoot.querySelector("#footerCounter"), b = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), S = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), y = this.shadowRoot.querySelector(".present-controls"), u = this.shadowRoot.querySelector("#slideFrameAddSectionBtn"), l = this.shadowRoot.querySelector("#slideFrameAddSectionRule"), g = Math.max(this.getSections().length, 1), m = this.getActiveSectionIndex() + 1;
+    if (y) {
+      const o = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
+      y.hidden = o;
     }
     if (u) {
-      const r = this.hasAttribute("allow-add-section");
-      u.hidden = !r, u.style.display = r ? "" : "none", a && (a.hidden = !r), a && (a.style.display = r ? "" : "none");
+      const o = this.hasAttribute("allow-add-section");
+      u.hidden = !o, u.style.display = o ? "" : "none", l && (l.hidden = !o), l && (l.style.display = o ? "" : "none");
     }
-    if (h) {
-      h.hidden = !o;
-      const r = Math.min(m, p), E = String(p).length;
-      h.style.setProperty("--slide-frame-counter-digits", String(E)), h.setAttribute("aria-label", `Section ${r} of ${p}`), h.innerHTML = `Section <span class="counter-value">${r}</span>/<span class="counter-value">${p}</span>`;
+    if (c) {
+      c.hidden = !n;
+      const o = Math.min(m, g), a = String(g).length;
+      c.style.setProperty("--slide-frame-counter-digits", String(a)), c.setAttribute("aria-label", `Section ${o} of ${g}`), c.innerHTML = `Section <span class="counter-value">${o}</span>/<span class="counter-value">${g}</span>`;
     }
-    S && (S.hidden = !this.hasAttribute("fullscreen")), y && (y.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), b && (b.hidden = !l), v && (v.hidden = !d), this.toggleAttribute("has-header", l), this.toggleAttribute("has-footer", d), this.toggleAttribute("has-notes", f), this.toggleAttribute("notes-visible", c), this.toggleAttribute("has-chrome", l || d || c), this.updateFullscreenSurfaceFit();
-  }
-  handlePointerDown(e) {
-    this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
-  }
-  handlePointerUp(e) {
-    if (this.pointerStartX == null || this.pointerStartY == null || this.getSections().length < 2) return;
-    const t = e.clientX - this.pointerStartX, i = e.clientY - this.pointerStartY;
-    this.pointerStartX = null, this.pointerStartY = null, !(Math.abs(t) < 40 || Math.abs(t) <= Math.abs(i)) && (t < 0 ? this.nextSection() : this.prevSection());
+    b && (b.hidden = !this.hasAttribute("fullscreen")), S && (S.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), v && (v.hidden = !d), f && (f.hidden = !h), this.toggleAttribute("has-header", d), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", w), this.toggleAttribute("notes-visible", p), this.toggleAttribute("has-chrome", d || h || p), this.updateFullscreenSurfaceFit();
   }
   handleFullscreenChange() {
     const e = document.fullscreenElement === this, t = this.hasAttribute("fullscreen");
@@ -544,12 +553,12 @@ class C extends HTMLElement {
     }
     const t = this.shadowRoot.querySelector(".frame"), i = this.shadowRoot.querySelector(".present-controls"), s = this.shadowRoot.querySelector(".notes");
     if (!t) return;
-    const n = t.getBoundingClientRect(), o = getComputedStyle(t), l = parseFloat(o.paddingTop || "0") || 0, d = parseFloat(o.paddingBottom || "0") || 0, f = parseFloat(o.paddingLeft || "0") || 0, c = parseFloat(o.paddingRight || "0") || 0, b = parseFloat(o.rowGap || o.gap || "0") || 0, v = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, h = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, S = [v > 0, !0, h > 0].filter(Boolean).length, y = Math.max(0, S - 1), w = Math.max(0, n.width - f - c), u = Math.max(0, n.height - l - d - v - h - b * y), a = this.resolveRatioParts(), p = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
-    let m, r;
-    p ? (r = u, m = r * (a.width / a.height)) : (m = w, r = m * (a.height / a.width), r > u && (r = u, m = r * (a.width / a.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(m))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(r))}px`;
+    const r = t.getBoundingClientRect(), n = getComputedStyle(t), d = parseFloat(n.paddingTop || "0") || 0, h = parseFloat(n.paddingBottom || "0") || 0, w = parseFloat(n.paddingLeft || "0") || 0, p = parseFloat(n.paddingRight || "0") || 0, v = parseFloat(n.rowGap || n.gap || "0") || 0, f = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, c = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, b = [f > 0, !0, c > 0].filter(Boolean).length, S = Math.max(0, b - 1), y = Math.max(0, r.width - w - p), u = Math.max(0, r.height - d - h - f - c - v * S), l = this.resolveRatioParts(), g = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
+    let m, o;
+    g ? (o = u, m = o * (l.width / l.height)) : (m = y, o = m * (l.height / l.width), o > u && (o = u, m = o * (l.width / l.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(m))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(o))}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", C);
+customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", x);

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

@@ -0,0 +1,23 @@
+class e extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.get("mui-slide-section") || customElements.define("mui-slide-section", e);

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

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Sat, 28 Feb 2026 04:44:42 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Sat, 28 Feb 2026 05:07:44 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */