@rogieking/figui3 1.6.4 → 1.6.5

package/components.css

@@ -664,10 +664,6 @@ select {
   padding-right: 1.5rem;
 }
 
-fig-dialog > *:not(dialog) {
-  display: none !important;
-}
-
 /* Dropdown */
 fig-dropdown,
 .fig-dropdown {
@@ -1938,49 +1934,38 @@ dialog,
     }
   }
 }
-fig-dialog,
-.fig-dialog {
-  display: contents;
+dialog[is="fig-dialog"] {
   --offset: 1rem;
   --translate-x: -50%;
   --translate-y: -50%;
+  --z-index: 999999;
 
-  dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin: 0;
-    z-index: 999999;
-    transform: translate(var(--translate-x), var(--translate-y));
-  }
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  z-index: var(--z-index);
+  transform: translate(var(--translate-x), var(--translate-y));
 
   &[position*="bottom"] {
-    dialog {
-      bottom: var(--offset);
-      top: auto;
-      --translate-y: 0;
-    }
+    bottom: var(--offset);
+    top: auto;
+    --translate-y: 0;
   }
   &[position*="top"] {
-    dialog {
-      top: var(--offset);
-      bottom: auto;
-      --translate-y: 0;
-    }
+    top: var(--offset);
+    bottom: auto;
+    --translate-y: 0;
   }
   &[position*="right"] {
-    dialog {
-      right: var(--offset);
-      left: auto;
-      --translate-x: 0;
-    }
+    right: var(--offset);
+    left: auto;
+    --translate-x: 0;
   }
   &[position*="left"] {
-    dialog {
-      left: var(--offset);
-      right: auto;
-      --translate-: 0;
-    }
+    left: var(--offset);
+    right: auto;
+    --translate-x: 0;
   }
 }
 

package/example.html

@@ -435,8 +435,9 @@
             </fig-tooltip>
         </fig-field>
 
-        <fig-dialog open="true"
-                    position="bottom right">
+        <dialog open="true"
+                position="bottom right"
+                is="fig-dialog">
             <fig-header>
                 <h3>Dialog</h3>
                 <fig-button variant="ghost"
@@ -458,13 +459,25 @@
             </fig-header>
             <fig-content>
                 <p>Some content here</p>
+                <fig-field direction="horizontal">
+                    <label for="colorLevels">Color Levels</label>
+                    <fig-slider id="colorLevels"
+                                min="2"
+                                max="16"
+                                value="4"
+                                variant="minimal"
+                                step="1"
+                                text="true"
+                                style="flex: 1; max-width: 200px;">
+                    </fig-slider>
+                </fig-field>
             </fig-content>
             <footer>
                 <fig-button variant="secondary"
                             close-dialog>Cancel</fig-button>
                 <fig-button>Save</fig-button>
             </footer>
-        </fig-dialog>
+        </dialog>
         <fig-header>
             <h2>Dropdown</h2>
         </fig-header>

package/fig.js

@@ -432,20 +432,10 @@ customElements.define("fig-popover", FigPopover);
  * @attr {boolean} open - Whether the dialog is visible
  * @attr {boolean} modal - Whether the dialog should be modal
  */
-class FigDialog extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.dialog = document.createElement("dialog");
-    this.contentSlot = document.createElement("slot");
-  }
-
+class FigDialog extends HTMLDialogElement {
   connectedCallback() {
     this.modal =
       this.hasAttribute("modal") && this.getAttribute("modal") !== "false";
-    this.appendChild(this.dialog);
-    this.shadowRoot.appendChild(this.contentSlot);
-    this.contentSlot.addEventListener("slotchange", this.slotChange.bind(this));
 
     requestAnimationFrame(() => {
       this.#addCloseListeners();
@@ -453,61 +443,13 @@ class FigDialog extends HTMLElement {
   }
 
   #addCloseListeners() {
-    this.dialog
-      .querySelectorAll("fig-button[close-dialog]")
-      .forEach((button) => {
-        button.removeEventListener("click", this.close);
-        button.addEventListener("click", this.close.bind(this));
-      });
-  }
-
-  disconnectedCallback() {
-    this.contentSlot.removeEventListener("slotchange", this.slotChange);
-  }
-
-  slotChange() {
-    while (this.dialog.firstChild) {
-      this.dialog.firstChild.remove();
-    }
-    this.contentSlot.assignedNodes().forEach((node) => {
-      if (node !== this.dialog) {
-        this.dialog.appendChild(node.cloneNode(true));
-      }
+    this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
+      button.removeEventListener("click", this.close);
+      button.addEventListener("click", this.close.bind(this));
     });
-    this.#addCloseListeners();
-  }
-
-  static get observedAttributes() {
-    return ["open", "modal"];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "open":
-        this.open = newValue === "true" && newValue !== "false";
-        if (this?.show) {
-          this[this.open ? "show" : "close"]();
-        }
-        break;
-      case "modal":
-        this.modal = newValue === "true" && newValue !== "false";
-        break;
-    }
-  }
-
-  /* Public methods */
-  show() {
-    if (this.modal) {
-      this.dialog.showModal();
-    } else {
-      this.dialog.show();
-    }
-  }
-  close() {
-    this.dialog.close();
   }
 }
-customElements.define("fig-dialog", FigDialog);
+customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
 
 class FigPopover2 extends HTMLElement {
   #popover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {