@rogieking/figui3 9.0.14 → 9.1.1

package/fig-editor.css

@@ -199,7 +199,7 @@ fig-fill-picker {
   }
 
   .fig-fill-picker-color-area fig-handle {
-    z-index: 1;
+    z-index: 3;
   }
 
   .fig-fill-picker-sliders {

package/fig-editor.js

@@ -2136,7 +2136,9 @@ class FigFillPicker extends HTMLElement {
     this.#discardDialog({ stopWebcam: true });
     this.#cancelFrames();
     this.#revokeOwnedBlobUrls();
-    if (this.#swatch) this.#swatch.removeAttribute("selected");
+    if (this.#isNativeSwatch(this.#swatch)) {
+      this.#swatch.removeAttribute("selected");
+    }
     if (this.#trigger) {
       this.#trigger.removeEventListener("click", this.#boundTriggerClick);
       this.#trigger.removeEventListener("keydown", this.#boundTriggerKeydown);
@@ -2398,6 +2400,17 @@ class FigFillPicker extends HTMLElement {
     keep.forEach((url) => this.#ownedBlobUrls.add(url));
   }
 
+  #isNativeSwatch(element) {
+    return element?.matches("fig-swatch, fig-chit") ?? false;
+  }
+
+  #isPreviewSwatch(element) {
+    return (
+      this.#isNativeSwatch(element) ||
+      (element?.matches("[data-fig-fill-picker-swatch]") ?? false)
+    );
+  }
+
   #setupTrigger() {
     const child = Array.from(this.children).find(
       (el) => !el.getAttribute("slot")?.startsWith("mode-"),
@@ -2409,7 +2422,7 @@ class FigFillPicker extends HTMLElement {
       this.#swatch.setAttribute("background", "#D9D9D9");
       this.appendChild(this.#swatch);
       this.#trigger = this.#swatch;
-    } else if (child.matches("fig-swatch, fig-chit")) {
+    } else if (this.#isPreviewSwatch(child)) {
       // Scenario 2: Has swatch - use and populate it
       this.#swatch = child;
       this.#trigger = child;
@@ -2426,7 +2439,7 @@ class FigFillPicker extends HTMLElement {
     this.#trigger.addEventListener("keydown", this.#boundTriggerKeydown);
 
     // Prevent the swatch's internal color input from opening system picker
-    if (this.#swatch) {
+    if (this.#isNativeSwatch(this.#swatch)) {
       this.#scheduleFrame(() => {
         const input = this.#swatch.querySelector('input[type="color"]');
         if (input) {
@@ -2659,7 +2672,9 @@ class FigFillPicker extends HTMLElement {
     this.#valueAtOpen = JSON.stringify(this.value);
     this.#lastChangeValue = this.#valueAtOpen;
 
-    if (this.#swatch) this.#swatch.setAttribute("selected", "true");
+    if (this.#isNativeSwatch(this.#swatch)) {
+      this.#swatch.setAttribute("selected", "true");
+    }
 
     this.#dialog.open = true;
     this.#syncTriggerA11y();
@@ -2903,7 +2918,9 @@ class FigFillPicker extends HTMLElement {
       });
 
     const onDialogClose = () => {
-      if (this.#swatch) this.#swatch.removeAttribute("selected");
+      if (this.#isNativeSwatch(this.#swatch)) {
+        this.#swatch.removeAttribute("selected");
+      }
       if (this.#shouldKeepWebcamLive()) this.#detachWebcamPreview();
       else this.#stopWebcam();
       const closingValue = JSON.stringify(this.value);

package/fig-lab.css

@@ -488,77 +488,6 @@ fig-canvas-control {
   }
 }
 
-/* Angle Input */
-fig-input-angle {
-  --size: 1.5rem;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacer-2);
-  user-select: none;
-
-  > fig-input-number {
-    flex: 0 0 auto;
-    width: auto;
-  }
-
-  &[full]:not([full="false"]) {
-    display: flex;
-    width: 100%;
-
-    > fig-input-number {
-      flex: 1 1 auto;
-      min-width: 0;
-      width: auto;
-    }
-  }
-
-  fig-field:not([direction="vertical"]) & {
-    flex: 1;
-    min-width: 0;
-
-    fig-input-number {
-      flex: 0 0 auto;
-      width: auto;
-    }
-  }
-
-  .fig-input-angle-plane {
-    display: inline-grid;
-    place-items: center;
-    width: var(--size);
-    height: var(--size);
-    aspect-ratio: 1/1;
-    flex-shrink: 0;
-    background-color: var(--figma-color-bg-secondary);
-    border-radius: 100%;
-    box-shadow: inset 0 0 0 1px var(--figma-color-border);
-    &:focus {
-      outline: var(--figma-focus-outline);
-      outline-offset: var(--figma-focus-outline-offset);
-    }
-    &.dragging {
-      outline: 0;
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
-    }
-  }
-  .fig-input-angle-handle {
-    display: inline-grid;
-    place-items: center;
-    grid-area: 1/1;
-    width: calc(0.5rem + 2px);
-    height: calc(0.5rem + 2px);
-    &::before {
-      content: "";
-      display: block;
-      width: 0.5rem;
-      height: 0.5rem;
-      background: var(--handle-color);
-      box-shadow: var(--handle-shadow);
-      border-radius: 50%;
-    }
-  }
-}
-
 /* Oscillator Input */
 fig-reorder {
   display: contents;