@muibook/components 18.0.0 → 18.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  # NPM Package 📦 – @muibook/components
4
4
 
5
+ [![Sponsor](https://img.shields.io/badge/Sponsor-GitHub-ff69b4?logo=githubsponsors)](https://github.com/sponsors/michaeltrilford)
6
+
5
7
  Leverage reusable vanilla Web Components built with the Mui (MichaelUI) Design System in your project. Simply install the [@muibook/components](https://www.npmjs.com/package/@muibook/components?activeTab=readme) package to access a framework-agnostic, accessible, and customizable component library.
6
8
 
7
9
  ## Usage Policy (Summary)
@@ -381,11 +381,6 @@ class h extends HTMLElement {
381
381
  border-radius: var(--radius-000);
382
382
  }
383
383
 
384
- :host([dropdown-slot]) button:hover,
385
- :host([dropdown-slot]) button:focus {
386
- background: var(--dropdown-button-background-hover);
387
- }
388
-
389
384
  :host([size][dropdown-slot-first]) button {
390
385
  border-top-left-radius: calc(var(--radius-100) / 2);
391
386
  border-top-right-radius: calc(var(--radius-100) / 2);
@@ -1,4 +1,4 @@
1
- const s = class s extends HTMLElement {
1
+ const o = class o extends HTMLElement {
2
2
  constructor() {
3
3
  super(), this.button = null, this.menu = null, this.handleResize = () => {
4
4
  var t;
@@ -8,13 +8,13 @@ const s = class s extends HTMLElement {
8
8
  (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
9
9
  }, this.handleFocusOut = (t) => {
10
10
  var e;
11
- this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
11
+ this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
12
12
  }, this.attachShadow({ mode: "open" });
13
13
  }
14
14
  handleKeyDown(t) {
15
15
  if (t.key === "Escape") {
16
16
  if (!this.menu) return;
17
- this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
17
+ this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(
18
18
  new CustomEvent("dropdown-toggle", {
19
19
  detail: { open: !1 },
20
20
  bubbles: !0
@@ -43,14 +43,14 @@ const s = class s extends HTMLElement {
43
43
  const d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
44
44
  if (d) {
45
45
  const u = () => {
46
- const c = d.assignedElements({ flatten: !0 });
47
- c.forEach((o) => {
48
- o.removeAttribute("dropdown-slot"), o.removeAttribute("dropdown-slot-first"), o.removeAttribute("dropdown-slot-last");
49
- }), c.forEach((o, w) => {
50
- o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
51
- var f, p;
52
- this.persistent || ((f = this.menu) == null || f.classList.remove("show"), (p = this.menu) == null || p.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
53
- }), o._dropdownListenerAdded = !0);
46
+ const c = d.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "mui-button");
47
+ c.forEach((s) => {
48
+ s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
49
+ }), c.forEach((s, w) => {
50
+ s.setAttribute("dropdown-slot", ""), w === 0 && s.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
51
+ var p, f;
52
+ this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
53
+ }), s._dropdownListenerAdded = !0);
54
54
  });
55
55
  };
56
56
  d.addEventListener("slotchange", u), u();
@@ -71,23 +71,23 @@ const s = class s extends HTMLElement {
71
71
  var n;
72
72
  if (t.stopPropagation(), !this.menu) return;
73
73
  const e = this.menu.classList.contains("show");
74
- !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
74
+ !e && o.openDropdown && o.openDropdown !== this && o.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
75
75
  var d, i;
76
76
  (d = this.menu) == null || d.classList.add("show"), (i = this.menu) == null || i.removeAttribute("inert"), this.adjustPosition();
77
- }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
77
+ }), o.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
78
78
  }
79
79
  closeMenu(t) {
80
80
  var n;
81
81
  const e = t.composedPath();
82
- this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
82
+ this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
83
83
  }
84
84
  adjustPosition() {
85
85
  if (!this.menu) return;
86
86
  const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, i = n.endsWith("rem") ? parseFloat(n) * d : parseFloat(n) || 8;
87
87
  t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
88
- const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, c = (this.getAttribute("vertical-position") || "auto").toLowerCase(), o = u - r.bottom, w = r.top, f = a + i, p = o >= f, g = w >= f;
88
+ const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, v = (this.getAttribute("vertical-position") || "auto").toLowerCase(), c = u - r.bottom, s = r.top, w = a + i, p = c >= w, f = s >= w;
89
89
  let b = r.height + i;
90
- c === "up" ? b = g || !p ? -(a + i) : r.height + i : c === "down" ? b = p || !g ? r.height + i : -(a + i) : !p && w > o && (b = -(a + i));
90
+ v === "up" ? b = f || !p ? -(a + i) : r.height + i : v === "down" ? b = p || !f ? r.height + i : -(a + i) : !p && s > c && (b = -(a + i));
91
91
  let m = 0;
92
92
  switch (this.getAttribute("position") || "left") {
93
93
  case "left":
@@ -168,6 +168,6 @@ const s = class s extends HTMLElement {
168
168
  `;
169
169
  }
170
170
  };
171
- s.openDropdown = null;
172
- let v = s;
173
- customElements.get("mui-dropdown") || customElements.define("mui-dropdown", v);
171
+ o.openDropdown = null;
172
+ let g = o;
173
+ customElements.get("mui-dropdown") || customElements.define("mui-dropdown", g);
@@ -794,9 +794,9 @@ class S extends HTMLElement {
794
794
  .surface::before {
795
795
  content: "";
796
796
  position: absolute;
797
- inset: var(--stroke-size-200);
797
+ inset: 0;
798
798
  pointer-events: none;
799
- border-radius: calc(var(--radius-300) - var(--stroke-size-200));
799
+ border-radius: var(--radius-300);
800
800
  z-index: 1;
801
801
  opacity: 1;
802
802
  background: var(--surface-elevated-100);
@@ -839,7 +839,7 @@ class S extends HTMLElement {
839
839
  transition: opacity var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1), filter var(--speed-200) ease;
840
840
  }
841
841
  .surface:hover {
842
- overflow: hidden;
842
+ overflow: visible;
843
843
  background: var(--surface-elevated-100);
844
844
  animation: promptBorderHoverPulse var(--prompt-hover-border-pulse-speed, var(--speed-500)) ease-in-out infinite;
845
845
  }
@@ -873,9 +873,7 @@ class S extends HTMLElement {
873
873
  var(--surface-elevated-100);
874
874
  mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
875
875
  filter: none;
876
- animation:
877
- promptMeshHoverPulse var(--prompt-hover-sweep-speed, var(--speed-500)) ease-in-out infinite alternate,
878
- promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
876
+ animation: promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
879
877
  }
880
878
  .surface:hover::after {
881
879
  opacity: 0;
@@ -1246,7 +1244,7 @@ class S extends HTMLElement {
1246
1244
  }
1247
1245
  .actions-slot {
1248
1246
  position: absolute;
1249
- z-index: 2;
1247
+ z-index: 4;
1250
1248
  bottom: var(--space-300);
1251
1249
  display: inline-flex;
1252
1250
  align-items: center;
@@ -164,7 +164,7 @@ class E extends HTMLElement {
164
164
  return !!(s && this.contains(s));
165
165
  }
166
166
  render() {
167
- var o, n, d, h, y, f, p, g, c, v, b, S, u, m, a;
167
+ var o, n, d, h, S, f, p, m, g, c, v, b, u, l, y;
168
168
  if (!this.shadowRoot) return;
169
169
  const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), s = this.escapeHtml(e), i = this.escapeHtml(t);
170
170
  this.shadowRoot.innerHTML = /*html*/
@@ -388,8 +388,7 @@ class E extends HTMLElement {
388
388
 
389
389
  :host([fullscreen]) .notes,
390
390
  :host(:fullscreen) .notes {
391
- border: none;
392
- border-radius: 0;
391
+ display: none !important;
393
392
  }
394
393
 
395
394
  :host([present]) .stage {
@@ -454,7 +453,7 @@ class E extends HTMLElement {
454
453
  id="slideFrameRatioSelect"
455
454
  size="x-small"
456
455
  style="width: 7rem; margin-right: var(--space-025)"
457
- options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"1:1","value":"1:1"}]'
456
+ options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"3:2","value":"3:2"},{"label":"1:1","value":"1:1"},{"label":"9:16","value":"9:16"}]'
458
457
  value="${this.getAttribute("ratio") || "16:9"}"
459
458
  aria-label="Slide ratio">
460
459
  </mui-select>
@@ -468,13 +467,13 @@ class E extends HTMLElement {
468
467
  </div>
469
468
  <div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
470
469
  </div>
471
- `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (o = this.defaultSlot) == null || o.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), (y = this.footerSlot) == null || y.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerAfterSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (p = this.footerDescriptionSlot) == null || p.addEventListener("slotchange", this.onChromeSlotChange), (g = this.notesSlot) == null || g.addEventListener("slotchange", this.onChromeSlotChange), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (c = this.shadowRoot.querySelector("#notesActionBtn")) == null || c.addEventListener("click", () => {
470
+ `, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (o = this.defaultSlot) == null || o.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), (S = this.footerSlot) == null || S.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerAfterSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (p = this.footerDescriptionSlot) == null || p.addEventListener("slotchange", this.onChromeSlotChange), (m = this.notesSlot) == null || m.addEventListener("slotchange", this.onChromeSlotChange), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (g = this.shadowRoot.querySelector("#notesActionBtn")) == null || g.addEventListener("click", () => {
472
471
  this.toggleNotes();
473
- }), (v = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || v.addEventListener("click", () => {
472
+ }), (c = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || c.addEventListener("click", () => {
474
473
  this.prevSection();
475
- }), (b = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || b.addEventListener("click", () => {
474
+ }), (v = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || v.addEventListener("click", () => {
476
475
  this.nextSection();
477
- }), (S = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || S.addEventListener("click", () => {
476
+ }), (b = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || b.addEventListener("click", () => {
478
477
  if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
479
478
  this.resetPresentationState(), this.exitFullscreen();
480
479
  return;
@@ -484,29 +483,25 @@ class E extends HTMLElement {
484
483
  });
485
484
  }), (u = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || u.addEventListener("click", () => {
486
485
  this.resetPresentationState(), this.exitFullscreen();
487
- }), (m = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || m.addEventListener("click", () => {
486
+ }), (l = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || l.addEventListener("click", () => {
488
487
  this.toggleNotes();
489
- }), (a = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || a.addEventListener("change", (l) => {
488
+ }), (y = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || y.addEventListener("change", (a) => {
490
489
  var w;
491
- const r = l.currentTarget, x = (r == null ? void 0 : r.value) || ((w = r == null ? void 0 : r.getAttribute) == null ? void 0 : w.call(r, "value")) || "16:9";
490
+ const r = a.currentTarget, x = (r == null ? void 0 : r.value) || ((w = r == null ? void 0 : r.getAttribute) == null ? void 0 : w.call(r, "value")) || "16:9";
492
491
  this.setAttribute("ratio", x);
493
492
  }), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
494
493
  }
495
494
  syncChromeState() {
496
495
  if (!this.shadowRoot) return;
497
496
  const e = (a) => ((a == null ? void 0 : a.assignedNodes({ flatten: !0 })) || []).some(
498
- (l) => l.nodeType === Node.ELEMENT_NODE || (l.textContent || "").trim().length > 0
499
- ), t = !!(this.getAttribute("title") || "").trim(), s = !!(this.getAttribute("footer-text") || "").trim(), i = this.hasAttribute("hide-header"), o = this.hasAttribute("hide-footer"), n = !o && this.getSections().length > 0, d = !i && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !o && (s || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || n || this.hasAttribute("present") || this.hasAttribute("fullscreen")), y = e(this.notesSlot), f = this.hasAttribute("notes-open"), p = this.shadowRoot.querySelector("#headerRegion"), g = this.shadowRoot.querySelector("#footerRegion"), c = this.shadowRoot.querySelector("#footerCounter"), v = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), b = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), S = this.shadowRoot.querySelector(".present-controls"), u = Math.max(this.getSections().length, 1), m = this.getActiveSectionIndex() + 1;
500
- if (S) {
501
- const a = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
502
- S.hidden = a;
503
- }
504
- if (c) {
497
+ (r) => r.nodeType === Node.ELEMENT_NODE || (r.textContent || "").trim().length > 0
498
+ ), t = !!(this.getAttribute("title") || "").trim(), s = !!(this.getAttribute("footer-text") || "").trim(), i = this.hasAttribute("hide-header"), o = this.hasAttribute("hide-footer"), n = !o && this.getSections().length > 0, d = !i && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !o && (s || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || n || this.hasAttribute("present") || this.hasAttribute("fullscreen")), S = e(this.notesSlot), f = this.hasAttribute("fullscreen") || document.fullscreenElement === this, p = this.hasAttribute("notes-open") && !f, m = this.shadowRoot.querySelector("#headerRegion"), g = this.shadowRoot.querySelector("#footerRegion"), c = this.shadowRoot.querySelector("#footerCounter"), v = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), b = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), u = this.shadowRoot.querySelector(".present-controls"), l = Math.max(this.getSections().length, 1), y = this.getActiveSectionIndex() + 1;
499
+ if (u && (u.hidden = f), c) {
505
500
  c.hidden = !n;
506
- const a = Math.min(m, u), l = String(u).length;
507
- 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>`;
501
+ const a = Math.min(y, l), r = String(l).length;
502
+ c.style.setProperty("--slide-frame-counter-digits", String(r)), c.setAttribute("aria-label", `Section ${a} of ${l}`), c.innerHTML = `Section <span class="counter-value">${a}</span>/<span class="counter-value">${l}</span>`;
508
503
  }
509
- v && (v.hidden = !this.hasAttribute("fullscreen")), b && (b.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), p && (p.hidden = !d), g && (g.hidden = !h), this.toggleAttribute("has-header", d), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", y), this.toggleAttribute("notes-visible", f), this.toggleAttribute("has-chrome", d || h || f), this.updateFullscreenSurfaceFit();
504
+ v && (v.hidden = !this.hasAttribute("fullscreen")), b && (b.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), m && (m.hidden = !d), g && (g.hidden = !h), this.toggleAttribute("has-header", d), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", S), this.toggleAttribute("notes-visible", p), this.toggleAttribute("has-chrome", d || h || p), this.updateFullscreenSurfaceFit();
510
505
  }
511
506
  handleFullscreenChange() {
512
507
  const e = document.fullscreenElement === this, t = this.hasAttribute("fullscreen");
@@ -539,9 +534,9 @@ class E extends HTMLElement {
539
534
  }
540
535
  const t = this.shadowRoot.querySelector(".frame"), s = this.shadowRoot.querySelector(".present-controls"), i = this.shadowRoot.querySelector(".notes");
541
536
  if (!t) return;
542
- const o = t.getBoundingClientRect(), n = getComputedStyle(t), d = parseFloat(n.paddingTop || "0") || 0, h = parseFloat(n.paddingBottom || "0") || 0, y = parseFloat(n.paddingLeft || "0") || 0, f = parseFloat(n.paddingRight || "0") || 0, p = parseFloat(n.rowGap || n.gap || "0") || 0, g = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, c = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, v = [g > 0, !0, c > 0].filter(Boolean).length, b = Math.max(0, v - 1), S = Math.max(0, o.width - y - f), u = Math.max(0, o.height - d - h - g - c - p * b), m = this.resolveRatioParts(), a = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
543
- let l, r;
544
- a ? (r = u, l = r * (m.width / m.height)) : (l = S, r = l * (m.height / m.width), r > u && (r = u, l = r * (m.width / m.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(l))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(r))}px`;
537
+ const o = t.getBoundingClientRect(), n = getComputedStyle(t), d = parseFloat(n.paddingTop || "0") || 0, h = parseFloat(n.paddingBottom || "0") || 0, S = parseFloat(n.paddingLeft || "0") || 0, f = parseFloat(n.paddingRight || "0") || 0, p = parseFloat(n.rowGap || n.gap || "0") || 0, m = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, g = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, c = [m > 0, !0, g > 0].filter(Boolean).length, v = Math.max(0, c - 1), b = Math.max(0, o.width - S - f), u = Math.max(0, o.height - d - h - m - g - p * v), l = this.resolveRatioParts(), y = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
538
+ let a, r;
539
+ y ? (r = u, a = r * (l.width / l.height)) : (a = b, r = a * (l.height / l.width), r > u && (r = u, a = r * (l.width / l.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(a))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(r))}px`;
545
540
  }
546
541
  escapeHtml(e) {
547
542
  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -1,6 +1,6 @@
1
1
 
2
2
  /* ================================================================================================== */
3
- /* Don't edit directly • Generated on Sat, 28 Feb 2026 08:25:27 GMT • muibook.com */
3
+ /* Don't edit directly • Generated on Thu, 19 Mar 2026 13:05:27 GMT • muibook.com */
4
4
  /* ================================================================================================== */
5
5
 
6
6
  /* ================================================================================================== */