@rogieking/figui3 1.6.3 → 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 {
@@ -745,6 +741,7 @@ fig-button {
   &[variant="input"] {
     background-color: var(--figma-color-bg-secondary);
     box-shadow: none;
+    color: var(--figma-color-text);
   }
 
   /* Icon only */
@@ -1314,22 +1311,38 @@ input[type="checkbox"].switch:checked:focus {
 
 /* Checkbox */
 input[type="checkbox"]:not(.switch) {
+  --size: 1rem;
+  --checkmark: 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='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' opacity='1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' /%3E%3C/svg%3E%0A");
   appearance: none;
   border-radius: var(--radius-medium);
-  width: 1rem;
-  height: 1rem;
+  width: var(--size);
+  height: var(--size);
+  aspect-ratio: 1/1;
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
   background-color: var(--figma-color-bg-secondary);
   vertical-align: middle;
 
-  &:hover {
-    background-image: 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='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
+  &::after {
+    content: "";
+    width: var(--size);
+    height: var(--size);
+    background-color: transparent;
+    mask-image: var(--checkmark);
+  }
+  &:hover:not(:checked) {
+    &::after {
+      opacity: 0.25;
+      background-color: var(--figma-color-icon);
+    }
   }
 
   &:checked {
     background-color: var(--figma-color-bg-brand);
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
-    background-image: 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='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
+    background-image: var(--light-checkmark);
+    &::after {
+      background-color: var(--figma-color-icon-onbrand);
+    }
   }
 
   &:focus {
@@ -1779,7 +1792,7 @@ fig-slider {
   }
 
   &[variant="minimal"] {
-    --slider-height: 0.25rem;
+    --slider-height: 0.375rem;
     --slider-thumb-size: 0.75rem;
     --slider-tick-size: calc(var(--slider-height) / 2);
     --handle-transition: none;
@@ -1921,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;
   }
 }
 
@@ -2108,7 +2110,7 @@ fig-input-color {
 fig-header {
   height: var(--spacer-6);
   margin: 0;
-  padding: var(--spacer-1) var(--spacer-3);
+  padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
   display: flex;
   align-items: center;
   box-shadow: inset 0 -1px 0 0 var(--figma-color-border);

package/end-point-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 11.5002H23.5" stroke="black" stroke-opacity="0.9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/end-points/chevron.svg

@@ -0,0 +1,9 @@
+<svg width="24"
+                     height="24"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.6465 11.1465C13.8417 10.9512 14.1583 10.9512 14.3535 11.1465C14.5488 11.3417 14.5488 11.6583 14.3535 11.8535L12.3535 13.8535C12.1583 14.0488 11.8417 14.0488 11.6465 13.8535L9.64648 11.8535C9.45122 11.6583 9.45122 11.3417 9.64648 11.1465C9.84175 10.9512 10.1583 10.9512 10.3535 11.1465L12 12.793L13.6465 11.1465Z"
+                          fill="black"
+                          fill-opacity="0.9" />
+                </svg>

package/end-points/end-points.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title>Figma UI3 Web Components</title>
+    <link rel="stylesheet"
+          type="text/css"
+          href="https://unpkg.com/@rogieking/figui3@latest/fig.css">
+    <style>
+        /* Ignore these styles. They are mostly used to recreate the look of a dropdown */
+        body {
+            width: 480px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        .dropdown {
+
+            height: var(--spacer-4);
+            padding: 0;
+            border-radius: var(--radius-medium);
+            display: inline-flex;
+            appearance: none;
+            align-items: center;
+            width: 40vw;
+            flex: 1 0 0;
+            border: 0;
+            color: var(--figma-color-text);
+            background-color: var(--figma-color-bg);
+            box-shadow: inset 0 0 0 1px var(--figma-color-border);
+            accent-color: var(--figma-color-bg-brand);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            background-image: url(chevron.svg);
+            background-repeat: no-repeat;
+            background-position: right center;
+            background-size: 24px;
+            padding-right: 24px;
+            margin: 0.5rem 0;
+
+            label {
+                display: block;
+                flex-grow: 1;
+                flex-shrink: 1;
+                text-align: left;
+                overflow: hidden;
+                padding: 0;
+                color: var(--figma-color-text);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        /* Style to reference */
+        .stretch-icon {
+            display: block;
+            flex-shrink: 0;
+            flex-basis: 24px;
+            width: 24px;
+            border: 12px solid black;
+            box-sizing: border-box;
+            /* top | right | bottom | left */
+            border-image-slice: 12;
+            border-image-repeat: repeat;
+
+            &.cap-diamond {
+                border-image-source: url(icon.24.stroke-diamond-arrow.svg);
+            }
+
+            &.cap-round {
+                border-image-source: url(icon.24.stroke.cap-round.svg);
+            }
+
+            &.grow {
+                flex-grow: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <fig-content>
+
+        <div class="dropdown">
+            <div class="stretch-icon cap-diamond"></div>
+            <label>Diamond arrow with a label</label>
+        </div>
+        <br />
+        <div class="dropdown">
+            <div class="stretch-icon cap-diamond grow"></div>
+        </div>
+        <br />
+        <div class="dropdown">
+            <div class="stretch-icon cap-round">
+            </div>
+            <label>Round with a label</label>
+        </div>
+        <br />
+        <div class="dropdown">
+            <div class="stretch-icon cap-round grow">
+            </div>
+        </div>
+
+    </fig-content>
+
+
+
+</body>
+
+</html>

package/end-points/icon.24.stroke-diamond-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.79297 7.29297C7.18349 6.90244 7.81651 6.90244 8.20703 7.29297L11.9141 11H28.5C28.7761 11 28.9999 11.2239 29 11.5C29 11.7761 28.7761 12 28.5 12H11.9141L8.20703 15.707C7.81651 16.0976 7.18349 16.0976 6.79297 15.707L3.29297 12.207L3.22461 12.1309C2.90426 11.7381 2.92685 11.1591 3.29297 10.793L6.79297 7.29297ZM4 11.5L7.5 15L11 11.5L7.5 8L4 11.5Z" fill="black" fill-opacity="0.9"/>
+</svg>

package/end-points/icon.24.stroke.cap-round.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 7C7.23858 7 5 9.23858 5 12C5 14.7614 7.23858 17 10 17H26.5C26.7761 17 27 16.7761 27 16.5C27 16.2239 26.7761 16 26.5 16H10C7.79086 16 6 14.2091 6 12C6 9.79086 7.79086 8 10 8H26.5C26.7761 8 27 7.77614 27 7.5C27 7.22386 26.7761 7 26.5 7H10Z" fill="black" fill-opacity="0.9"/>
+<path d="M25.7734 11.5C25.4973 11.5 25.2734 11.7239 25.2734 12C25.2734 12.2761 25.4973 12.5 25.7734 12.5H26.5C26.7761 12.5 27 12.2761 27 12C27 11.7239 26.7761 11.5 26.5 11.5H25.7734ZM21.8984 11.5C21.6223 11.5 21.3984 11.7239 21.3984 12C21.3984 12.2761 21.6223 12.5 21.8984 12.5H23.3516C23.6277 12.5 23.8516 12.2761 23.8516 12C23.8516 11.7239 23.6277 11.5 23.3516 11.5H21.8984ZM18.0234 11.5C17.7473 11.5 17.5234 11.7239 17.5234 12C17.5234 12.2761 17.7473 12.5 18.0234 12.5H19.4766C19.7527 12.5 19.9766 12.2761 19.9766 12C19.9766 11.7239 19.7527 11.5 19.4766 11.5H18.0234ZM14.1484 11.5C13.8723 11.5 13.6484 11.7239 13.6484 12C13.6484 12.2761 13.8723 12.5 14.1484 12.5H15.6016C15.8777 12.5 16.1016 12.2761 16.1016 12C16.1016 11.7239 15.8777 11.5 15.6016 11.5H14.1484ZM11 11.5C10.7239 11.5 10.5 11.7239 10.5 12C10.5 12.2761 10.7239 12.5 11 12.5H11.7266C12.0027 12.5 12.2266 12.2761 12.2266 12C12.2266 11.7239 12.0027 11.5 11.7266 11.5H11Z" fill="black" fill-opacity="0.3"/>
+</svg>

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,109 +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);
-
-/*
-class FigDialog extends FigTooltip {
-
-    constructor() {
-        super()
-        this.action = this.getAttribute("action") || "click"
-        this.delay = parseInt(this.getAttribute("delay")) || 0
-        this.dialog = document.createElement("dialog")
-        this.header = document.createElement("fig-header")
-        this.header.innerHTML = `<span>${this.getAttribute("title") || "Title"}</span>`
-        if (this.getAttribute("closebutton") !== "false") {
-            this.closeButton = document.createElement("fig-button")
-            this.closeButton.setAttribute("icon", "true")
-            this.closeButton.setAttribute("variant", "ghost")
-            this.closeButton.setAttribute("fig-dialog-close", "true")
-            let closeIcon = document.createElement("fig-icon")
-            closeIcon.setAttribute("class", "close")
-            this.closeButton.append(closeIcon)
-            this.header.append(this.closeButton)
-        }
-        this.dialog.append(this.header)
-    }
-    render() {
-        this.popup = this.popup || this.dialog
-        document.body.append(this.popup)
-    }
-    setup() {
-        this.dialog.querySelectorAll("[fig-dialog-close]").forEach(e => e.addEventListener("click", this.hidePopup.bind(this)))
-        this.dialog.append(this.querySelector("fig-content") || "")
-    }
-    hidePopup() {
-        this.popup.close()
-    }
-    showPopup() {
-        this.popup.style.zIndex = parseInt((new Date()).getTime() / 1000)
-        if (this.getAttribute("modal") === "true") {
-            this.popup.showModal()
-        } else {
-            this.popup.show()
-        }
-    }
-    destroy() {
-
-    }
 }
-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.3",
+  "version": "1.6.5",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {

package/test.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, initial-scale=1.0">
-    <title>Figma UI3 Web Components</title>
-    <link rel="stylesheet"
-          type="text/css"
-          href="fig.css">
-    <script src="fig.js"></script>
-    <style>
-        body {
-            width: 480px;
-            margin: 0 auto;
-        }
-    </style>
-</head>
-
-<body>
-    <fig-content>
-        <fig-slider type="delta"
-                    value=".25"
-                    default="2"
-                    step="0.1"
-                    max="5"
-                    min="-5">
-        </fig-slider>
-    </fig-content>
-    <script>
-        let elements = Array.from(document.querySelectorAll('*'));
-        elements.filter(n => n.tagName.toLowerCase().indexOf("fig-") > -1).forEach(n => n.addEventListener('input', (e) => {
-            console.log('input:', n.tagName, e.target)
-        }))
-    </script>
-</body>
-
-</html>