@rogieking/figui3 4.1.0 → 4.1.3

package/base.css

@@ -32,6 +32,7 @@ h3 {
 hr {
   height: 1px;
   border: none;
+  width: 100%;
   background-color: var(--figma-color-border);
   margin: var(--spacer-2) 0;
 

package/components.css

@@ -319,7 +319,7 @@
   );
 
   /* Icons - colorless shapes for use with mask-image */
-  --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='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+  --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='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --icon-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='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
   --icon-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
@@ -481,10 +481,12 @@ input[type="text"][list] {
   display: flex;
   appearance: none;
   align-items: center;
-  flex: 1 0 0;
   border: 0;
   color: var(--figma-color-text);
   background-color: var(--figma-color-bg);
+  background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
+    var(--icon-chevron);
+
   box-shadow: inset 0 0 0 1px var(--figma-color-border);
   accent-color: var(--figma-color-bg-brand);
   overflow: hidden;
@@ -637,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%;
@@ -696,14 +698,16 @@ select {
 }
 
 /* Dropdown */
+fig-dropdown {
+  & > *:not(select) {
+    display: none !important;
+  }
+}
 fig-dropdown,
+select,
 .fig-dropdown {
   display: inline-flex;
   position: relative;
-
-  & > *:not(select) {
-    display: none !important;
-  }
   > select {
     display: flex;
     align-items: center;
@@ -736,6 +740,7 @@ fig-dropdown,
 
 /* Button */
 .fig-button,
+button,
 fig-button {
   color: var(--figma-color-text-onbrand);
   display: flex;
@@ -939,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"]) {
@@ -2036,6 +2041,7 @@ input[type="checkbox"].switch:checked:focus {
 /* Checkbox */
 input[type="checkbox"]:not(.switch) {
   contain: strict;
+  vertical-align: middle;
   --size: 1rem;
   appearance: none;
   border-radius: var(--radius-medium);
@@ -2170,11 +2176,7 @@ fieldset {
   padding: var(--spacer-2) 0;
 
   & > legend {
-    margin-top: 0.125rem;
-    font-weight: 500;
-    font-size: 0.625rem;
-    line-height: 0.875rem;
-    color: var(--figma-color-text-secondary);
+    padding: 0;
   }
 
   & > label {
@@ -2188,6 +2190,9 @@ fieldset {
 
 /* Details */
 details {
+  padding: 0 var(--spacer-3);
+  display: block;
+  width: 100%;
   & > summary {
     font-weight: var(--body-medium-strong-fontWeight);
     cursor: default;
@@ -2197,6 +2202,7 @@ details {
     height: var(--spacer-5);
     user-select: none;
     color: var(--figma-color-text-secondary);
+    margin-left: calc(var(--spacer-3) * -1);
 
     &::before {
       content: "";
@@ -2722,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"] {
@@ -3887,12 +3896,13 @@ fig-joystick {
 
 /* Layer */
 fig-layer {
-  --indent: var(--spacer-2);
+  --indent: var(--spacer-3);
   display: block;
   color: var(--figma-color-text);
   position: relative;
   user-select: none;
   width: 100%;
+  padding: 0 var(--spacer-3);
   border-radius: var(--radius-medium);
 
   /* When layer has children */
@@ -3909,7 +3919,6 @@ fig-layer {
     align-items: center;
     gap: var(--spacer-1);
     padding: var(--spacer-1) var(--spacer-2);
-    margin-left: 0;
     height: var(--spacer-4);
     border-radius: var(--radius-medium);
     position: relative;
@@ -3975,8 +3984,11 @@ fig-layer {
 
   /* Nested layers indentation */
   > fig-layer {
-    padding-left: var(--indent);
+    padding: 0;
     margin-top: 1px;
+    .fig-layer-row {
+      padding-left: var(--indent);
+    }
   }
 
   /* Collapsed state - hide children */
@@ -4531,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;
@@ -4544,7 +4557,7 @@ fig-chooser {
   }
 
   &[padding="false"] {
-    gap: var(--spacer-2);
+    gap: var(--fig-chooser-gap);
     fig-choice {
       --fig-choice-padding: 0px;
     }
@@ -4716,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)
   );
@@ -4727,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);
@@ -4944,3 +4956,51 @@ 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.0",
+  "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",