@rogieking/figui3 1.0.67 → 1.0.68

package/example.html

@@ -17,6 +17,11 @@
         <h3>UI3 Components</h3>
     </fig-header>
     <br />
+    <details>
+        <summary>Details</summary>
+        <p>Some more content here</p>
+    </details>
+    <br />
     <fig-field direction="horizontal">
         <label>Opacity</label>
         <fig-slider type="opacity"
@@ -99,7 +104,11 @@
                 src="https://avatars.githubusercontent.com/u/12345678?v=4"
                 name="John Doe"></fig-avatar>
     <fig-avatar name="John Doe"></fig-avatar>
+    <fig-avatar size="large"
+                src="data:image/png;base64,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"
+                name="Rogie King"></fig-avatar>
     <fig-content>
+
         <fig-tabs>
             <fig-tab selected>Tab #1</fig-tab>
             <fig-tab>Tab #2</fig-tab>
@@ -124,6 +133,36 @@
             <fig-button>Primary</fig-button>
             <fig-button variant="secondary">Secondary</fig-button>
             <fig-button variant="ghost">Ghost</fig-button>
+            <fig-dialog open="true"
+                        position="bottom right">
+                <fig-header>
+                    <h3>Dialog</h3>
+                    <fig-button variant="ghost"
+                                icon="true"
+                                close-dialog>
+                        <svg width="24"
+                             height="24"
+                             viewBox="0 0 24 24"
+                             fill="none"
+                             xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd"
+                                  clip-rule="evenodd"
+                                  d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
+                                  fill="currentColor"
+                                  fill-opacity="0.9" />
+                        </svg>
+
+                    </fig-button>
+                </fig-header>
+                <fig-content>
+                    <p>Some content here</p>
+                </fig-content>
+                <footer>
+                    <fig-button variant="secondary"
+                                close-dialog>Cancel</fig-button>
+                    <fig-button>Save</fig-button>
+                </footer>
+            </fig-dialog>
 
             <fig-button-combo>
                 <fig-button>Primary</fig-button>
@@ -272,7 +311,7 @@
                       value="#00FF00"></fig-chit>
             <fig-chit type="color"
                       disabled="true"
-                      value="#FF0000"></fig-chit>
+                      value="#000000"></fig-chit>
             <fig-chit type="gradient"
                       variant="linear"
                       size="large"

package/fig.css

@@ -418,6 +418,8 @@
   --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
     0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
 
+  --figma-elevation-500-modal-window: box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
+
   color-scheme: light dark;
   /* Icons */
   --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
@@ -437,7 +439,7 @@
       0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
     --figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
     --figma-color-bordertranslucent: rgba(255, 255, 255, 0.1);
-    --elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
+    --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
       0px 3px 5px rgba(0, 0, 0, 0.35),
       inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
     --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
@@ -446,6 +448,7 @@
   }
 }
 
+
 html {
   width: 100%;
   height: 100%;
@@ -860,15 +863,19 @@ fig-avatar,
   background: var(--figma-color-bg-brand);
   overflow: hidden;
   color: var(--figma-color-icon-onbrand);
-  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
   img {
     width: var(--size);
     height: var(--size);
     position: absolute;
-    background: var(--checkerboard);
     border-radius: 100%;
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    &:not([src]) {
+      background: var(--checkerboard);
+    }
+  }
+  &[borderless] {
+    box-shadow: none;
   }
 
   &:has(img[src]) {
@@ -902,40 +909,43 @@ input[type="color"] {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
     outline: 0;
   }
-}
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border: 0;
-  border-radius: 0.125rem;
-  background: var(--checkerboard);
-  overflow: hidden;
-  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-}
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+    border: 0;
+    border-radius: 0.125rem;
+    background: var(--checkerboard);
+    overflow: hidden;
+    outline: 1px solid var(--figma-color-bordertranslucent);
+    outline-offset: -1px;
+  }
 
-input[type="color"]::-moz-color-swatch {
-  border-radius: 0.125rem;
-  padding: 0;
-  border: 0;
-  mask-image: linear-gradient(
-    to right,
-    black 0%,
-    black 50%,
-    rgba(0, 0, 0, var(--alpha)) 50%
-  );
-}
+  &::-moz-color-swatch {
+    border-radius: 0.125rem;
+    padding: 0;
+    border: 0;
+    mask-image: linear-gradient(
+      to right,
+      black 0%,
+      black 50%,
+      rgba(0, 0, 0, var(--alpha)) 50%
+    );
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+  }
 
-input[type="color"]::-webkit-color-swatch {
-  padding: 0;
-  border: 0;
-  mask-image: linear-gradient(
-    to right,
-    black 0%,
-    black 50%,
-    rgba(0, 0, 0, var(--alpha)) 50%
-  );
+  &::-webkit-color-swatch {
+    padding: 0;
+    border: 0;
+    mask-image: linear-gradient(
+      to right,
+      black 0%,
+      black 50%,
+      rgba(0, 0, 0, var(--alpha)) 50%
+    );
+  }
 }
 
+
 fig-chit {
   --gradient-color-1: #ff90ff;
   --gradient-color-2: #0000ff;
@@ -1718,7 +1728,17 @@ dialog,
   background: var(--figma-color-bg);
   min-width: var(--popover-min-width);
 
-  box-shadow: var(--figma-elevation-100);
+  box-shadow: var(--figma-elevation-500-modal-window);
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--spacer-2);
+    gap: var(--spacer-2);
+  }
+  p {
+    padding: 0 var(--spacer-3);
+  }
 
   &:popover-open {
     display: block;
@@ -1781,25 +1801,59 @@ dialog,
     }
   }
 }
+fig-dialog,
+.fig-dialog {
+  display: contents;
+  --offset: 1rem;
+  --translate-x: -50%;
+  --translate-y: -50%;
 
-dialog {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  margin: 0;
-  transform: translate(-50%, -50%);
+  dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin: 0;
+    z-index: 999999;
+    transform: translate(var(--translate-x), var(--translate-y));
+  }
 
   &[position*="bottom"] {
-    bottom: 0.5rem;
-    top: auto;
-    transform: translate(-50%, 0);
+    dialog {
+      bottom: var(--offset);
+      top: auto;
+      --translate-y: 0;
+    }
+  }
+  &[position*="top"] {
+    dialog {
+      top: var(--offset);
+      bottom: auto;
+      --translate-y: 0;
+    }
+  }
+  &[position*="right"] {
+    dialog {
+      right: var(--offset);
+      left: auto;
+      --translate-x: 0;
+    }
+  }
+  &[position*="left"] {
+    dialog {
+      left: var(--offset);
+      right: auto;
+      --translate-: 0;
+    }
   }
 }
 
 /* Tooltip */
+fig-tooltip{
+  display: contents;
+}
 .fig-tooltip {
   inset: unset;
-  display: contents;
+  display: block;
   color: var(--color-tooltip);
   background-color: var(--bg-tooltip);
   padding: var(--spacer-1) var(--spacer-2);
@@ -1882,7 +1936,6 @@ fig-icon.close {
 /* Web Components */
 fig-button,
 fig-popover,
-fig-dialog,
 fig-content,
 fig-slider,
 fig-switch,
@@ -1949,7 +2002,7 @@ fig-header {
   gap: 0.25rem;
 
   & h3 {
-    padding-left: var(--spacer-1);
+    padding-left: var(--spacer-2);
     font-weight: var(--body-medium-strong-fontWeight);
     flex-grow: 1;
   }

package/fig.js

@@ -209,6 +209,7 @@ class FigTooltip extends HTMLElement {
     this.popup.setAttribute("class", "fig-tooltip");
     this.popup.style.position = "fixed";
     this.popup.style.visibility = "hidden";
+    this.popup.style.display = "inline-flex";
     this.popup.style.pointerEvents = "none";
     this.popup.innerText = this.getAttribute("text");
     document.body.append(this.popup);
@@ -216,7 +217,7 @@ class FigTooltip extends HTMLElement {
 
   destroy() {
     if (this.popup) {
-      this.popup.remove();
+      //this.popup.remove();
     }
     document.body.addEventListener("click", this.hidePopupOutsideClick);
   }
@@ -255,7 +256,7 @@ class FigTooltip extends HTMLElement {
   }
 
   showPopup() {
-    const rect = this.getBoundingClientRect();
+    const rect = this.firstElementChild.getBoundingClientRect();
     const popupRect = this.popup.getBoundingClientRect();
     const offset = this.getOffset();
 
@@ -339,17 +340,28 @@ class FigDialog extends HTMLElement {
   }
 
   connectedCallback() {
-    this.render();
+    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();
+    });
   }
 
-  disconnectedCallback() {
-    this.contentSlot.removeEventListener("slotchange", this.slotChange);
+  #addCloseListeners() {
+    this.dialog
+      .querySelectorAll("fig-button[close-dialog]")
+      .forEach((button) => {
+        button.removeEventListener("click", this.close);
+        button.addEventListener("click", this.close.bind(this));
+      });
   }
 
-  render() {
-    this.appendChild(this.dialog);
-    this.shadowRoot.appendChild(this.contentSlot);
-    this.contentSlot.addEventListener("slotchange", this.slotChange.bind(this));
+  disconnectedCallback() {
+    this.contentSlot.removeEventListener("slotchange", this.slotChange);
   }
 
   slotChange() {
@@ -361,25 +373,34 @@ class FigDialog extends HTMLElement {
         this.dialog.appendChild(node.cloneNode(true));
       }
     });
+    this.#addCloseListeners();
   }
 
   static get observedAttributes() {
-    return ["open"];
+    return ["open", "modal"];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "open":
+        this.open = newValue === "true" && newValue !== "false";
         if (this?.show) {
-          this[newValue === "true" ? "show" : "close"]();
+          this[this.open ? "show" : "close"]();
         }
         break;
+      case "modal":
+        this.modal = newValue === "true" && newValue !== "false";
+        break;
     }
   }
 
   /* Public methods */
   show() {
-    this.dialog.show();
+    if (this.modal) {
+      this.dialog.showModal();
+    } else {
+      this.dialog.show();
+    }
   }
   close() {
     this.dialog.close();

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.67"
+  "version": "1.0.68"
 }