@rogieking/figui3 1.0.69 → 1.0.71

package/fig.css

@@ -919,6 +919,7 @@ input[type="color"] {
   box-sizing: content-box;
   border-radius: var(--radius-medium);
   background-color: var(--figma-color-bg-secondary);
+  display: inline-grid;
 
   &:focus {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
@@ -931,8 +932,7 @@ input[type="color"] {
     border-radius: 0.125rem;
     background: var(--checkerboard);
     overflow: hidden;
-    outline: 1px solid var(--figma-color-bordertranslucent);
-    outline-offset: -1px;
+    grid-area: 1/1;
   }
 
   &::-moz-color-swatch {
@@ -945,12 +945,14 @@ input[type="color"] {
       black 50%,
       rgba(0, 0, 0, var(--alpha)) 50%
     );
+    border-radius: 0.125rem;
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
   }
 
   &::-webkit-color-swatch {
     padding: 0;
     border: 0;
+    border-radius: 0.125rem;
     mask-image: linear-gradient(
       to right,
       black 0%,
@@ -958,6 +960,7 @@ input[type="color"] {
       rgba(0, 0, 0, var(--alpha)) 50%
     );
   }
+  
 }
 
 
@@ -990,6 +993,7 @@ fig-chit {
 
     &[type="gradient"]::after,
     &[type="image"]::after,
+    &[type="color"]::after,
     input[type="color"] {
       padding: 0;
       width: var(--size);
@@ -1020,7 +1024,7 @@ fig-chit {
   }
 
   &[type="gradient"],
-  &[type="image"] {
+  &[type="image"]{
     &::after {
       content: "";
       width: 0.875rem;
@@ -1042,6 +1046,17 @@ fig-chit {
       opacity: 0;
     }
   }
+  &[type="color"]{
+    &::after {
+      content: "";
+      width: 0.875rem;
+      height: 0.875rem;
+      grid-area: 1/1;
+      place-self: center;
+      border-radius: 0.125rem;
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    }
+  }
   &[type="image"] {
     &:not([src])::after {
       background: var(--checkerboard);
@@ -1376,11 +1391,14 @@ details {
     color: var(--figma-color-text-secondary);
 
     &::before {
-      content: var(--icon-chevron);
+      content: "";
+      mask-image: var(--icon-chevron);
       display: inline-flex;
+      background: var(--figma-color-text-secondary);
       align-items: start;
       justify-content: center;
       width: 1rem;
+      height: 1rem;
       transform: rotate(-90deg);
       transition: transform var(--transition-duration)
         var(--transition-timing-function);

package/fig.js

@@ -217,15 +217,15 @@ class FigTooltip extends HTMLElement {
 
   destroy() {
     if (this.popup) {
-      //this.popup.remove();
+      this.popup.remove();
     }
     document.body.addEventListener("click", this.hidePopupOutsideClick);
   }
 
   setupEventListeners() {
     if (this.action === "hover") {
-      this.addEventListener("mouseenter", this.showDelayedPopup.bind(this));
-      this.addEventListener("mouseleave", this.hidePopup.bind(this));
+      this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
+      this.addEventListener("pointerleave", this.hidePopup.bind(this));
     } else if (this.action === "click") {
       this.addEventListener("click", this.showDelayedPopup.bind(this));
       document.body.addEventListener(

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.69"
+  "version": "1.0.71"
 }