drab 6.5.1 → 7.0.0

package/dist/dialog/index.js

@@ -1,4 +1,4 @@
-import { Base } from "../base/index.js";
+import { Content, Lifecycle, Trigger, } from "../base/index.js";
 /**
  * Provides triggers for the `HTMLDialogElement`.
  *
@@ -18,62 +18,62 @@ import { Base } from "../base/index.js";
  * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
  * is open.
  */
-export class Dialog extends Base {
-    #initialBodyMarginRight = parseInt(getComputedStyle(document.body).marginRight);
+export class Dialog extends Lifecycle(Trigger(Content())) {
     constructor() {
         super();
     }
     /** The `HTMLDialogElement` within the element. */
-    get dialog() {
-        return this.getContent(HTMLDialogElement);
+    get #dialog() {
+        return this.content(HTMLDialogElement);
+    }
+    get #removeBodyScroll() {
+        return this.hasAttribute("remove-body-scroll");
+    }
+    get #clickOutsideClose() {
+        return this.hasAttribute("click-outside-close");
     }
     /** Remove scroll from the body when open with the `remove-body-scroll` attribute. */
     #toggleBodyScroll(show) {
-        if (this.hasAttribute("remove-body-scroll")) {
-            document.body.style.marginRight = `${show
-                ? this.#initialBodyMarginRight +
-                    // scrollbar width
-                    window.innerWidth -
-                    document.documentElement.clientWidth
-                : this.#initialBodyMarginRight}px`;
+        if (this.#removeBodyScroll) {
+            document.documentElement.style.scrollbarGutter = "stable";
             document.body.style.overflow = show ? "hidden" : "";
         }
     }
     /** Wraps `HTMLDialogElement.showModal()`. */
     show() {
-        this.dialog.showModal();
+        this.#dialog.showModal();
         this.#toggleBodyScroll(true);
     }
     /** Wraps `HTMLDialogElement.close()`. */
     close() {
         this.#toggleBodyScroll(false);
-        this.dialog.close();
+        this.#dialog.close();
     }
     /** `show` or `close` depending on the dialog's `open` attribute. */
     toggle() {
-        if (this.dialog.open)
+        if (this.#dialog.open)
             this.close();
         else
             this.show();
     }
     mount() {
-        this.triggerListener(() => this.toggle());
+        this.listener(() => this.toggle());
         this.safeListener("keydown", (e) => {
-            if (e.key === "Escape" && this.dialog.open) {
+            if (e.key === "Escape" && this.#dialog.open) {
                 e.preventDefault();
                 this.close();
             }
         });
-        if (this.hasAttribute("click-outside-close")) {
+        if (this.#clickOutsideClose) {
             // https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
-            this.dialog.addEventListener("click", (e) => {
-                let rect = this.dialog.getBoundingClientRect();
+            this.#dialog.addEventListener("click", (e) => {
+                let rect = this.#dialog.getBoundingClientRect();
                 // If dialog covers full viewport (with a small tolerance), use first child element for hit testing
                 // Example: https://picocss.com/docs/modal
                 if (rect.width - window.innerWidth <= 5 && // 5px tolerance for rounding issues
                     rect.height - window.innerHeight <= 5 &&
-                    this.dialog.firstElementChild) {
-                    rect = this.dialog.firstElementChild.getBoundingClientRect();
+                    this.#dialog.firstElementChild) {
+                    rect = this.#dialog.firstElementChild.getBoundingClientRect();
                 }
                 if (e.clientX < rect.left ||
                     e.clientX > rect.right ||