@muibook/components 15.0.1 → 17.0.0

package/dist/esm/components/mui-prompt-message/index.js

@@ -1,29 +1,28 @@
 import "../mui-body/index.js";
-class u extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
-    super(), this.resizeObserver = null, this.avatarSlotEl = null, this.contentSlotEl = null, this.attachShadow({ mode: "open" });
+    super(), this.avatarSlotEl = null, this.contentSlotEl = null, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
     return ["size", "variant", "density"];
   }
   connectedCallback() {
-    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("density") || this.setAttribute("density", "default"), this.render(), this.bindLayoutSync(), this.bindSlotSync();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.hasAttribute("density") || this.setAttribute("density", "default"), this.render(), this.bindSlotSync();
   }
-  attributeChangedCallback(t, e, s) {
-    e !== s && (this.render(), this.bindLayoutSync(), this.bindSlotSync());
+  attributeChangedCallback(a, t, e) {
+    t !== e && (this.render(), this.bindSlotSync());
   }
   disconnectedCallback() {
-    var t;
-    (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null, this.avatarSlotEl = null, this.contentSlotEl = null;
+    this.avatarSlotEl = null, this.contentSlotEl = null;
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("size") || "medium", e = {
+    const a = this.getAttribute("size") || "medium", t = {
       "x-small": { gap: "var(--space-100)", padding: "var(--space-200)" },
       small: { gap: "var(--space-200)", padding: "var(--space-300)" },
       medium: { gap: "var(--space-300)", padding: "var(--space-400)" },
       large: { gap: "var(--space-400)", padding: "var(--space-500)" }
-    }, s = e[t] || e.medium;
+    }, e = t[a] || t.medium;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -33,11 +32,11 @@ class u extends HTMLElement {
         .bubble {
           display: grid;
           grid-template-columns: auto 1fr;
-          align-items: center;
-          gap: ${s.gap};
+          align-items: start;
+          gap: ${e.gap};
           width: 100%;
           box-sizing: border-box;
-          padding: ${s.padding};
+          padding: ${e.padding};
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
           border-radius: var(--radius-300);
@@ -55,12 +54,10 @@ class u extends HTMLElement {
         .content {
           min-width: 0;
         }
-        :host([multi-line]) .bubble {
-          align-items: start;
-        }
-        :host([multi-line]) .content {
-          margin-top: var(--space-050);
-        }
+        :host([size="x-small"]) .content { margin-top: calc(var(--space-025) + var(--stroke-size-100)); }
+        :host([size="small"]) .content { margin-top: var(--space-200); }
+        :host([size="medium"]) .content { margin-top: var(--space-200); }
+        :host([size="large"]) .content { margin-top: var(--space-300); }
       </style>
 
       <div class="bubble">
@@ -75,40 +72,26 @@ class u extends HTMLElement {
   }
   bindSlotSync() {
     if (!this.shadowRoot || (this.avatarSlotEl = this.shadowRoot.querySelector("#avatarSlot"), this.contentSlotEl = this.shadowRoot.querySelector("#contentSlot"), !this.avatarSlotEl || !this.contentSlotEl)) return;
-    const t = () => {
-      var r, o;
-      const e = this.getAttribute("size") || "medium", s = {
+    const a = () => {
+      var i, o;
+      const t = this.getAttribute("size") || "medium", e = {
         "x-small": "x-small",
         small: "small",
         medium: "small",
         large: "medium"
-      }, i = {
+      }, r = {
         "x-small": "x-small",
         small: "small",
         medium: "small",
         large: "medium"
-      }, d = s[e] || "small", l = i[e] || "small";
-      (((r = this.avatarSlotEl) == null ? void 0 : r.assignedElements({ flatten: !0 })) || []).forEach((a) => {
-        a.tagName.toLowerCase() === "mui-avatar" && a.setAttribute("size", d);
-      }), (((o = this.contentSlotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || []).forEach((a) => {
-        a.tagName.toLowerCase() === "mui-body" && a.setAttribute("size", l);
-      });
-    };
-    this.avatarSlotEl.addEventListener("slotchange", t), this.contentSlotEl.addEventListener("slotchange", t), t();
-  }
-  bindLayoutSync() {
-    var i;
-    if (!this.shadowRoot) return;
-    (i = this.resizeObserver) == null || i.disconnect(), this.resizeObserver = null;
-    const t = this.shadowRoot.querySelector(".content"), e = this.shadowRoot.querySelector("#contentSlot");
-    if (!t || !e) return;
-    const s = () => {
-      requestAnimationFrame(() => {
-        const l = e.assignedElements({ flatten: !0 })[0] || t, c = getComputedStyle(l).lineHeight || "0", n = Number.parseFloat(c), r = Number.isFinite(n) && n > 0 ? n : 20, o = Math.round(t.getBoundingClientRect().height / r);
-        this.toggleAttribute("multi-line", o > 1);
+      }, l = e[t] || "small", n = r[t] || "small";
+      (((i = this.avatarSlotEl) == null ? void 0 : i.assignedElements({ flatten: !0 })) || []).forEach((s) => {
+        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", l);
+      }), (((o = this.contentSlotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || []).forEach((s) => {
+        s.tagName.toLowerCase() === "mui-body" && s.setAttribute("size", n);
       });
     };
-    e.addEventListener("slotchange", s), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => s()), this.resizeObserver.observe(t), this.resizeObserver.observe(this)), s();
+    this.avatarSlotEl.addEventListener("slotchange", a), this.contentSlotEl.addEventListener("slotchange", a), a();
   }
 }
-customElements.get("mui-prompt-message") || customElements.define("mui-prompt-message", u);
+customElements.get("mui-prompt-message") || customElements.define("mui-prompt-message", d);

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.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();
@@ -19,8 +20,6 @@ class C extends HTMLElement {
   static get observedAttributes() {
     return [
       "ratio",
-      "ratio-width",
-      "ratio-height",
       "present",
       "active-section",
       "padding",
@@ -32,6 +31,7 @@ class C extends HTMLElement {
       "hide-header",
       "hide-footer",
       "hide-counter",
+      "allow-add-section",
       "scroll",
       "fullscreen"
     ];
@@ -40,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, 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);
+    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());
@@ -72,15 +72,16 @@ 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);
     return !Number.isFinite(t) || e.length === 0 ? 0 : Math.max(0, Math.min(t, e.length - 1));
   }
   setActiveSectionIndex(e) {
-    this.setAttribute("active-section", String(e));
+    this.activeSectionEl = null, this.setAttribute("active-section", String(e));
   }
   nextSection() {
     const e = this.getSections();
@@ -106,18 +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("div");
-    t.setAttribute("data-slide-section", ""), typeof e == "string" ? t.textContent = e : 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(
@@ -129,12 +149,7 @@ class C extends HTMLElement {
     );
   }
   resolveRatio() {
-    const e = (this.getAttribute("ratio") || "16:9").trim();
-    if (e === "custom") {
-      const i = parseFloat(this.getAttribute("ratio-width") || "16"), s = parseFloat(this.getAttribute("ratio-height") || "9");
-      return i > 0 && s > 0 ? `${i} / ${s}` : "16 / 9";
-    }
-    const t = e.split(":");
+    const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
     if (t.length === 2) {
       const i = parseFloat(t[0]), s = parseFloat(t[1]);
       if (i > 0 && s > 0) return `${i} / ${s}`;
@@ -142,12 +157,7 @@ class C extends HTMLElement {
     return "16 / 9";
   }
   resolveRatioParts() {
-    const e = (this.getAttribute("ratio") || "16:9").trim();
-    if (e === "custom") {
-      const i = parseFloat(this.getAttribute("ratio-width") || "16"), s = parseFloat(this.getAttribute("ratio-height") || "9");
-      return i > 0 && s > 0 ? { width: i, height: s } : { width: 16, height: 9 };
-    }
-    const t = e.split(":");
+    const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
     if (t.length === 2) {
       const i = parseFloat(t[0]), s = parseFloat(t[1]);
       if (i > 0 && s > 0) return { width: i, height: s };
@@ -156,10 +166,13 @@ class C extends HTMLElement {
   }
   syncSections() {
     if (!this.shadowRoot) return;
-    const e = this.getSections(), t = this.getActiveSectionIndex(), i = this.hasAttribute("present") || e.length > 1;
-    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();
+    const e = this.getSections();
+    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, 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) {
     const t = document.fullscreenElement === this;
@@ -185,7 +198,7 @@ class C extends HTMLElement {
     return !!(i && this.contains(i));
   }
   render() {
-    var a, r, l, h, p, m, b, v, d, S, w, y, c, u, o, n, g, 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*/
@@ -204,7 +217,7 @@ class C extends HTMLElement {
           --slide-frame-footer-padding-inline: var(--slide-frame-surface-padding-active);
           --slide-frame-footer-padding-block: var(--slide-frame-surface-padding-active);
           --slide-frame-footer-padding-top: 0;
-          --slide-frame-footer-padding-bottom: var(--space-200);
+          --slide-frame-footer-padding-bottom: var(--space-400);
         }
         :host([padding="none"]) { --slide-frame-surface-padding-active: 0; }
         :host([padding="small"]) { --slide-frame-surface-padding-active: var(--slide-frame-padding-small); }
@@ -408,15 +421,11 @@ class C extends HTMLElement {
         <mui-grid col="1fr auto" class="present-controls" aligny="center">
           <mui-h-stack space="var(--space-050)" aligny="center">
             <mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
-            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
             <mui-button id="slideFrameToggleFullscreenBtn" variant="tertiary" size="x-small">Full Screen</mui-button>
-            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
             <mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
-            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
           </mui-h-stack>
           <mui-h-stack space="var(--space-050)" aligny="center">
             <mui-button id="slideFramePrevSectionBtn" variant="tertiary" size="x-small"><mui-icon-left-chevron slot="before"></mui-icon-left-chevron>Previous</mui-button>
-            <mui-rule direction="vertical" length="var(--space-300)"></mui-rule>
             <mui-button id="slideFrameNextSectionBtn" variant="tertiary" size="x-small">Next<mui-icon-right-chevron slot="after"></mui-icon-right-chevron></mui-button>
           </mui-h-stack>
         </mui-grid>
@@ -467,55 +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])"), (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.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();
-    }), (y = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || y.addEventListener("click", () => {
-      this.addSection(`Section ${(this.getSections().length + 1).toString()}: New`);
-    }), (c = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || c.addEventListener("click", () => {
+    }), (b = this.shadowRoot.querySelector("#slideFrameAddSectionBtn")) == null || b.addEventListener("click", () => {
+      this.requestAddSection();
+    }), (S = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || S.addEventListener("click", () => {
       this.prevSection();
-    }), (u = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || u.addEventListener("click", () => {
+    }), (y = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || y.addEventListener("click", () => {
       this.nextSection();
-    }), (o = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || o.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((f) => {
-        f && this.syncChromeState();
+      this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((a) => {
+        a && this.syncChromeState();
       });
-    }), (n = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || n.addEventListener("click", () => {
+    }), (l = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || l.addEventListener("click", () => {
       this.resetPresentationState(), this.exitFullscreen();
     }), (g = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || g.addEventListener("click", () => {
       this.toggleNotes();
-    }), (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);
+    }), (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 = (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;
+      (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 (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>`;
+    if (u) {
+      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");
     }
-    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;
-  }
-  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());
+    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>`;
+    }
+    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");
@@ -548,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 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`;
+    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 Fri, 27 Feb 2026 13:59:34 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Sat, 28 Feb 2026 05:07:44 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */