@rogieking/figui3 2.0.6 → 2.0.7

package/components.css

@@ -2629,11 +2629,9 @@ fig-layer {
   user-select: none;
   border-radius: var(--radius-medium);
 
-  &:has(fig-layer)[open]:not([open="false"]),
-  &:has(fig-layer):hover {
-    & > .fig-layer-row::before {
-      visibility: visible;
-    }
+  /* Show chevron when layer has children */
+  &:has(fig-layer) > .fig-layer-row > .fig-layer-chevron {
+    visibility: visible;
   }
 
   &:not(:has(.fig-layer-icon)) {
@@ -2649,12 +2647,10 @@ fig-layer {
     padding: var(--spacer-1) var(--spacer-2);
     margin-left: var(--spacer-2);
     border-radius: var(--radius-medium);
-    cursor: pointer;
     position: relative;
 
-    /* Chevron using mask-image approach like details */
-    &::before {
-      content: "";
+    /* Chevron element - injected by JS when layer has children */
+    .fig-layer-chevron {
       mask-image: var(--icon-chevron);
       mask-size: contain;
       mask-repeat: no-repeat;
@@ -2685,6 +2681,7 @@ fig-layer {
       width: var(--spacer-3);
       height: var(--spacer-3);
       color: var(--figma-color-icon-tertiary);
+      margin-left: var(--spacer-1);
     }
 
     > label {
@@ -2693,7 +2690,6 @@ fig-layer {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      cursor: pointer;
       color: var(--figma-color-text);
     }
   }
@@ -2724,7 +2720,7 @@ fig-layer {
   }
 
   /* Rotate chevron when open */
-  &[open]:not([open="false"]) .fig-layer-row::before {
+  &[open]:not([open="false"]) > .fig-layer-row > .fig-layer-chevron {
     transform: rotate(0deg);
   }
 

package/fig.js

@@ -345,7 +345,7 @@ class FigTooltip extends HTMLElement {
     this.popup.style.pointerEvents = "none";
     this.popup.append(content);
     content.innerText = this.getAttribute("text");
-    
+
     // If tooltip is inside a dialog, append to dialog to stay in top layer
     const parentDialog = this.closest("dialog");
     if (parentDialog && parentDialog.open) {
@@ -353,7 +353,7 @@ class FigTooltip extends HTMLElement {
     } else {
       document.body.append(this.popup);
     }
-    
+
     const text = content.childNodes[0];
     if (text) {
       const range = document.createRange();
@@ -3563,26 +3563,42 @@ class FigLayer extends HTMLElement {
     return ["open", "visible"];
   }
 
+  #chevron = null;
+  #boundHandleChevronClick = null;
+
   connectedCallback() {
-    // Add click listener for chevron toggle
-    this.addEventListener("click", this.#handleClick.bind(this));
+    // Use requestAnimationFrame to ensure child elements have rendered
+    requestAnimationFrame(() => {
+      this.#injectChevron();
+    });
   }
 
   disconnectedCallback() {
-    this.removeEventListener("click", this.#handleClick.bind(this));
+    if (this.#chevron && this.#boundHandleChevronClick) {
+      this.#chevron.removeEventListener("click", this.#boundHandleChevronClick);
+    }
   }
 
-  #handleClick(e) {
-    // Toggle when clicking on the row (but not on actions or interactive elements)
-    const row = e.target.closest(".fig-layer-row");
-    if (row && row.parentElement === this) {
-      // Don't toggle if clicking on actions or buttons
-      if (e.target.closest(".fig-layer-actions") || e.target.closest("fig-button")) {
-        return;
-      }
-      e.stopPropagation();
-      this.open = !this.open;
-    }
+  #injectChevron() {
+    const row = this.querySelector(":scope > .fig-layer-row");
+    if (!row) return;
+
+    // Check if chevron already exists
+    if (row.querySelector(".fig-layer-chevron")) return;
+
+    // Always create chevron element - CSS handles visibility via :has(fig-layer)
+    this.#chevron = document.createElement("span");
+    this.#chevron.className = "fig-layer-chevron";
+    row.prepend(this.#chevron);
+
+    // Add click listener to chevron only
+    this.#boundHandleChevronClick = this.#handleChevronClick.bind(this);
+    this.#chevron.addEventListener("click", this.#boundHandleChevronClick);
+  }
+
+  #handleChevronClick(e) {
+    e.stopPropagation();
+    this.open = !this.open;
   }
 
   get open() {

package/package.json

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