@rogieking/figui3 4.1.1 → 4.1.3

package/components.css

@@ -639,7 +639,7 @@ input[type="text"][list] {
         padding-left: 0;
       }
       & > button {
-        display: flex;
+        display: inline-block;
         align-items: center;
         gap: var(--spacer-1);
         width: 100%;
@@ -944,7 +944,7 @@ fig-button {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }
   svg {
-    *[fill] {
+    *[fill]:not([fill="none"]) {
       fill: currentColor;
     }
     *[stroke]:not([stroke="none"]) {
@@ -2728,6 +2728,9 @@ dialog[is="fig-popup"] {
     background-color: var(--figma-color-bg-menu);
     color: var(--figma-color-text-menu);
     color-scheme: dark;
+    padding: var(--spacer-2) 0;
+    min-width: 6rem;
+    box-shadow: var(--figma-elevation-100);
   }
 
   &[variant="popover"] {
@@ -3899,7 +3902,7 @@ fig-layer {
   position: relative;
   user-select: none;
   width: 100%;
-  padding: 0 var(--spacer-2);
+  padding: 0 var(--spacer-3);
   border-radius: var(--radius-medium);
 
   /* When layer has children */
@@ -3916,7 +3919,6 @@ fig-layer {
     align-items: center;
     gap: var(--spacer-1);
     padding: var(--spacer-1) var(--spacer-2);
-    margin-left: var(--spacer-1);
     height: var(--spacer-4);
     border-radius: var(--radius-medium);
     position: relative;
@@ -3935,7 +3937,7 @@ fig-layer {
       flex-shrink: 0;
       transition: transform 0.15s;
       position: absolute;
-      left: calc(var(--spacer-2-5) * -1);
+      left: calc(var(--spacer-3) * -1);
       top: var(--spacer-1);
       rotate: -90deg;
     }
@@ -4541,10 +4543,11 @@ fig-preview {
 /* Chooser */
 fig-chooser {
   --chooser-fade-size: var(--spacer-4);
+  --fig-chooser-gap: var(--spacer-2);
 
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--fig-chooser-gap);
   overflow: visible auto;
   scrollbar-width: none;
   scroll-snap-type: y mandatory;
@@ -4554,7 +4557,7 @@ fig-chooser {
   }
 
   &[padding="false"] {
-    gap: var(--spacer-2);
+    gap: var(--fig-chooser-gap);
     fig-choice {
       --fig-choice-padding: 0px;
     }
@@ -4726,8 +4729,8 @@ fig-chooser {
 }
 
 fig-choice {
-  --fig-choice-selection-ring-width: 1.25px;
-  --fig-choice-padding: var(--spacer-2);
+  --fig-choice-selection-ring-width: 1.5px;
+  --fig-choice-padding: 0px;
   --fig-choice-border-radius: calc(
     var(--radius-medium) + var(--fig-choice-padding)
   );
@@ -4737,7 +4740,6 @@ fig-choice {
   border-radius: var(--fig-choice-border-radius);
   gap: var(--spacer-2);
   outline: none;
-  border: 1px solid transparent;
   cursor: default;
 
   padding: var(--fig-choice-padding);
@@ -4953,3 +4955,52 @@ fig-color-tip {
     }
   }
 }
+
+/* Menu */
+fig-menu {
+  display: contents;
+}
+
+fig-menu-item {
+  --fig-menu-item-padding: var(--spacer-3);
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-2);
+  padding: 0 var(--fig-menu-item-padding);
+  height: var(--spacer-4);
+  cursor: default;
+  border-radius: var(--radius-medium);
+  color: var(--figma-color-text-menu);
+  font-weight: var(--body-medium-fontWeight);
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0 var(--spacer-2);
+    border-radius: var(--radius-medium);
+    z-index: -1;
+    background-color: transparent;
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+    &::before {
+      background-color: var(--figma-color-bg-menu-hover);
+    }
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+fig-menu-separator {
+  display: block;
+  height: 1px;
+  background: var(--figma-color-border);
+  margin: var(--spacer-2) 0;
+}

package/fig.js

@@ -14237,3 +14237,334 @@ class FigHandle extends HTMLElement {
   }
 }
 customElements.define("fig-handle", FigHandle);
+
+// ─── Menu ────────────────────────────────────────────────────────────────────
+
+class FigMenuItem extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "disabled"];
+  }
+
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+
+  set value(val) {
+    this.setAttribute("value", val ?? "");
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "menuitem");
+    }
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "-1");
+    }
+  }
+
+  attributeChangedCallback() {}
+}
+customElements.define("fig-menu-item", FigMenuItem);
+
+class FigMenuSeparator extends HTMLElement {
+  connectedCallback() {
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "separator");
+    }
+  }
+}
+customElements.define("fig-menu-separator", FigMenuSeparator);
+
+class FigMenu extends HTMLElement {
+  #popup = null;
+  #trigger = null;
+  #observer = null;
+  #boundTriggerClick;
+  #boundPopupClick;
+  #boundPopupKeydown;
+  #boundPopupClose;
+  #focusedIndex = -1;
+
+  static get observedAttributes() {
+    return ["position", "offset", "closedby", "disabled", "open"];
+  }
+
+  constructor() {
+    super();
+    this.#boundTriggerClick = this.#handleTriggerClick.bind(this);
+    this.#boundPopupClick = this.#handlePopupClick.bind(this);
+    this.#boundPopupKeydown = this.#handlePopupKeydown.bind(this);
+    this.#boundPopupClose = this.#handlePopupClose.bind(this);
+  }
+
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+
+  set value(val) {
+    this.setAttribute("value", val ?? "");
+  }
+
+  get open() {
+    return this.hasAttribute("open") && this.getAttribute("open") !== "false";
+  }
+
+  set open(val) {
+    if (val) {
+      this.setAttribute("open", "");
+    } else {
+      this.removeAttribute("open");
+    }
+  }
+
+  connectedCallback() {
+    this.style.display = "contents";
+
+    this.#detectTrigger();
+    this.#createPopup();
+    this.#moveItemsToPopup();
+    this.#setupListeners();
+    this.#setupObserver();
+    this.#syncDisabled();
+
+    if (this.open) {
+      this.#openMenu();
+    }
+  }
+
+  disconnectedCallback() {
+    this.#teardownListeners();
+    if (this.#observer) {
+      this.#observer.disconnect();
+      this.#observer = null;
+    }
+    if (this.#popup) {
+      this.#popup.removeEventListener("close", this.#boundPopupClose);
+      this.#popup.remove();
+      this.#popup = null;
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === "open") {
+      if (newValue === null || newValue === "false") {
+        this.#closeMenu();
+      } else {
+        this.#openMenu();
+      }
+      return;
+    }
+
+    if (name === "disabled") {
+      if (this.#trigger) {
+        if (newValue !== null && newValue !== "false") {
+          this.#trigger.setAttribute("disabled", "");
+        } else {
+          this.#trigger.removeAttribute("disabled");
+        }
+      }
+      return;
+    }
+
+    if (this.#popup && (name === "position" || name === "offset" || name === "closedby")) {
+      if (newValue !== null) {
+        this.#popup.setAttribute(name, newValue);
+      } else {
+        this.#popup.removeAttribute(name);
+      }
+    }
+  }
+
+  #detectTrigger() {
+    this.#trigger =
+      this.querySelector("[fig-menu-trigger]") ||
+      this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)");
+  }
+
+  #createPopup() {
+    this.#popup = document.createElement("dialog", { is: "fig-popup" });
+    this.#popup.setAttribute("is", "fig-popup");
+    this.#popup.setAttribute("theme", "menu");
+    this.#popup.setAttribute("role", "menu");
+
+    const position = this.getAttribute("position") || "bottom left";
+    this.#popup.setAttribute("position", position);
+
+    const offset = this.getAttribute("offset");
+    if (offset) this.#popup.setAttribute("offset", offset);
+
+    const closedby = this.getAttribute("closedby");
+    if (closedby) this.#popup.setAttribute("closedby", closedby);
+
+    if (this.#trigger) {
+      this.#popup.anchor = this.#trigger;
+    }
+
+    this.#popup.addEventListener("close", this.#boundPopupClose);
+    this.appendChild(this.#popup);
+  }
+
+  #moveItemsToPopup() {
+    const items = Array.from(this.querySelectorAll(
+      ":scope > fig-menu-item, :scope > fig-menu-separator"
+    ));
+    for (const item of items) {
+      this.#popup.appendChild(item);
+    }
+  }
+
+  #setupListeners() {
+    if (this.#trigger) {
+      this.#trigger.addEventListener("click", this.#boundTriggerClick);
+      this.#trigger.setAttribute("aria-haspopup", "menu");
+      this.#trigger.setAttribute("aria-expanded", "false");
+    }
+    if (this.#popup) {
+      this.#popup.addEventListener("click", this.#boundPopupClick);
+      this.#popup.addEventListener("keydown", this.#boundPopupKeydown);
+    }
+  }
+
+  #teardownListeners() {
+    if (this.#trigger) {
+      this.#trigger.removeEventListener("click", this.#boundTriggerClick);
+    }
+    if (this.#popup) {
+      this.#popup.removeEventListener("click", this.#boundPopupClick);
+      this.#popup.removeEventListener("keydown", this.#boundPopupKeydown);
+    }
+  }
+
+  #setupObserver() {
+    this.#observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (
+            node.nodeType === 1 &&
+            (node.tagName === "FIG-MENU-ITEM" || node.tagName === "FIG-MENU-SEPARATOR") &&
+            node.parentElement === this
+          ) {
+            this.#popup.appendChild(node);
+          }
+        }
+      }
+    });
+    this.#observer.observe(this, { childList: true });
+  }
+
+  #getItems() {
+    if (!this.#popup) return [];
+    return Array.from(this.#popup.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"));
+  }
+
+  #syncDisabled() {
+    if (!this.#trigger) return;
+    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    if (disabled) {
+      this.#trigger.setAttribute("disabled", "");
+    } else {
+      this.#trigger.removeAttribute("disabled");
+    }
+  }
+
+  #handleTriggerClick(e) {
+    if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
+    e.stopPropagation();
+    if (this.open) {
+      this.open = false;
+    } else {
+      this.open = true;
+    }
+  }
+
+  #handlePopupClick(e) {
+    const item = e.target.closest("fig-menu-item");
+    if (!item) return;
+    if (item.hasAttribute("disabled") && item.getAttribute("disabled") !== "false") return;
+
+    this.#selectItem(item);
+  }
+
+  #handlePopupKeydown(e) {
+    const items = this.#getItems();
+    if (!items.length) return;
+
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        this.#focusedIndex = Math.min(this.#focusedIndex + 1, items.length - 1);
+        items[this.#focusedIndex]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        this.#focusedIndex = Math.max(this.#focusedIndex - 1, 0);
+        items[this.#focusedIndex]?.focus();
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        this.#focusedIndex = 0;
+        items[0]?.focus();
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        this.#focusedIndex = items.length - 1;
+        items[this.#focusedIndex]?.focus();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const focused = items[this.#focusedIndex];
+        if (focused) this.#selectItem(focused);
+        break;
+      }
+    }
+  }
+
+  #handlePopupClose() {
+    if (this.hasAttribute("open")) {
+      this.removeAttribute("open");
+    }
+    if (this.#trigger) {
+      this.#trigger.setAttribute("aria-expanded", "false");
+      this.#trigger.focus();
+    }
+    this.#focusedIndex = -1;
+  }
+
+  #selectItem(item) {
+    const value = item.getAttribute("value") || item.textContent.trim();
+    this.setAttribute("value", value);
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value, item },
+        bubbles: true,
+      })
+    );
+    this.open = false;
+  }
+
+  #openMenu() {
+    if (!this.#popup) return;
+    this.#popup.open = true;
+    if (this.#trigger) {
+      this.#trigger.setAttribute("aria-expanded", "true");
+    }
+    this.#focusedIndex = 0;
+    requestAnimationFrame(() => {
+      const items = this.#getItems();
+      if (items.length) items[0].focus();
+    });
+  }
+
+  #closeMenu() {
+    if (!this.#popup) return;
+    this.#popup.open = false;
+  }
+}
+customElements.define("fig-menu", FigMenu);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",