@rogieking/figui3 11.1.1 → 11.1.2

package/fig-editor.css

@@ -394,7 +394,7 @@ fig-fill-picker {
       background-color: var(--figma-color-bg-transparent-hover);
     }
 
-    &:has(.fig-fill-picker-gradient-space:focus-within) > fig-button {
+    &:has(.fig-fill-picker-gradient-space[data-focus-visible]) > fig-button {
       outline: var(--figma-focus-outline);
       outline-offset: var(--figma-focus-outline-offset);
     }

package/fig-editor.js

@@ -532,6 +532,17 @@ class FigSelect extends HTMLElement {
   #syncingOptions = false;
   #menuAnchorRef = null;
   #boundTriggerClick = this.#handleTriggerClick.bind(this);
+  #boundTriggerFocus = () => {
+    queueMicrotask(() => {
+      if (!this.#button?.matches(":focus-within")) return;
+      this.toggleAttribute(
+        "data-focus-visible",
+        this.#button.hasAttribute("data-focus-visible") ||
+          this.#button.matches(":focus-visible"),
+      );
+    });
+  };
+  #boundTriggerBlur = () => this.removeAttribute("data-focus-visible");
   #boundOptionClick = this.#handleOptionClick.bind(this);
   #boundOptionPointerOver = this.#handleOptionPointerOver.bind(this);
   #boundKeydown = this.#handleKeydown.bind(this);
@@ -1294,6 +1305,8 @@ class FigSelect extends HTMLElement {
   #setupListeners() {
     this.#button?.addEventListener("click", this.#boundTriggerClick);
     this.#button?.addEventListener("keydown", this.#boundKeydown);
+    this.#button?.addEventListener("focus", this.#boundTriggerFocus);
+    this.#button?.addEventListener("blur", this.#boundTriggerBlur);
     // Host click: slotted options stay in light DOM (not dialog.contains).
     this.addEventListener("click", this.#boundOptionClick);
     this.addEventListener("pointerover", this.#boundOptionPointerOver);
@@ -1305,6 +1318,9 @@ class FigSelect extends HTMLElement {
   #teardownListeners() {
     this.#button?.removeEventListener("click", this.#boundTriggerClick);
     this.#button?.removeEventListener("keydown", this.#boundKeydown);
+    this.#button?.removeEventListener("focus", this.#boundTriggerFocus);
+    this.#button?.removeEventListener("blur", this.#boundTriggerBlur);
+    this.removeAttribute("data-focus-visible");
     this.removeEventListener("click", this.#boundOptionClick);
     this.removeEventListener("pointerover", this.#boundOptionPointerOver);
     this.#popup?.removeEventListener("keydown", this.#boundKeydown);

package/fig-lab.css

@@ -603,51 +603,77 @@ fig-canvas-control {
   }
 }
 
-/* Oscillator Input */
-fig-reorder {
-  display: contents;
-}
+/* Drag to Reorder */
+  fig-reorder {
+    display: contents;
 
-fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] {
-  cursor: grab;
-}
+    &:not([handle]):is(:not([disabled]), [disabled="false"])
+      > [data-reorder-item] {
+      cursor: grab;
 
-fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] > fig-header,
-fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] > fig-header *,
-fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] > label {
-  cursor: grab;
-}
+      > fig-header,
+      > fig-header *,
+      > label {
+        cursor: grab;
+      }
+    }
 
-fig-reorder > .dragging {
-  background-color: var(--figma-color-bg-secondary);
-}
+    > .dragging {
+      background-color: var(--figma-color-bg-secondary);
+    }
 
-[data-reorder-handle] {
-  cursor: grab;
-}
+    &[disabled]:not([disabled="false"]) [data-reorder-handle] {
+      cursor: inherit;
+    }
+  }
 
-fig-reorder[disabled]:not([disabled="false"]) [data-reorder-handle] {
-  cursor: inherit;
-}
+  [data-reorder-handle] {
+    cursor: grab;
+  }
 
-body.fig-reorder-dragging,
-body.fig-reorder-dragging * {
-  user-select: none !important;
-  -webkit-user-select: none !important;
-  cursor: grabbing !important;
-}
+  body.fig-reorder-dragging {
+    &,
+    & * {
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      cursor: grabbing !important;
+    }
+  }
 
-.fig-reorder-indicator {
-  position: fixed;
-  pointer-events: none;
-  z-index: 1000000;
-  background: var(--figma-color-border-strong);
-}
+  .fig-reorder-indicator {
+    position: fixed;
+    pointer-events: none;
+    z-index: 1000000;
+    border-radius: 1px;
+    &::before{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: var(--spacer-1);
+      width: 100%;
+      height: 100%;
+      background: var(--figma-color-border-selected);
+    }
 
-.fig-reorder-indicator[data-axis="vertical"] {
-  height: 2px;
-}
+    &.fig-reorder-indicator-ring {
+      &::after{
+        content: "";
+        position: absolute;
+        top: 1px;
+        left: 0;
+        transform: translate(-50%, -50%);
+        width: var(--spacer-2);
+        height: var(--spacer-2);
+        border: 2px solid var(--figma-color-border-selected);
+        border-radius: 50%;
+      }
+    }
 
-.fig-reorder-indicator[data-axis="horizontal"] {
-  width: 2px;
-}
+    &[data-axis="vertical"] {
+      height: 2px;
+    }
+
+    &[data-axis="horizontal"] {
+      width: 2px;
+    }
+  }

package/fig-lab.js

@@ -2903,8 +2903,21 @@ class FigCanvasControl extends HTMLElement {
 }
 figLabDefineElement("fig-canvas-control", FigCanvasControl);
 /* Reorder wrapper */
+/**
+ * @attr {string} axis - Reorder direction: "vertical" (default) or "horizontal"
+ * @attr {string} handle - Selector for the drag handle within each item
+ * @attr {string} items - Selector limiting which direct children are reorderable
+ * @attr {string} indicator - Drop indicator style: "default" or "ring"
+ * @attr {boolean} disabled - Disable reordering
+ */
 class FigReorder extends HTMLElement {
-  static observedAttributes = ["axis", "handle", "items", "disabled"];
+  static observedAttributes = [
+    "axis",
+    "handle",
+    "items",
+    "indicator",
+    "disabled",
+  ];
 
   static #DRAG_THRESHOLD = 6;
 
@@ -2970,9 +2983,10 @@ class FigReorder extends HTMLElement {
     this.#liveRegion = null;
   }
 
-  attributeChangedCallback() {
+  attributeChangedCallback(name) {
     if (this.isConnected) {
       if (this.#disabled) this.#cancelDrag();
+      if (name === "indicator") this.#syncIndicatorStyle();
       this.#syncAttributeObserver();
       this.#syncChildren();
     }
@@ -3025,6 +3039,10 @@ class FigReorder extends HTMLElement {
     return (this.getAttribute("items") || "").trim();
   }
 
+  get #indicatorStyle() {
+    return (this.getAttribute("indicator") || "default").trim().toLowerCase();
+  }
+
   #getAllElementChildren() {
     return [...this.children].filter(
       (node) =>
@@ -3409,11 +3427,22 @@ class FigReorder extends HTMLElement {
     const indicator = document.createElement("div");
     indicator.className = "fig-reorder-indicator";
     indicator.setAttribute("data-axis", this.#axis);
+    indicator.classList.toggle(
+      "fig-reorder-indicator-ring",
+      this.#indicatorStyle === "ring",
+    );
     document.body.appendChild(indicator);
     this.#indicator = indicator;
     return indicator;
   }
 
+  #syncIndicatorStyle() {
+    this.#indicator?.classList.toggle(
+      "fig-reorder-indicator-ring",
+      this.#indicatorStyle === "ring",
+    );
+  }
+
   #updateIndicator(index, item) {
     const items = this.#getElementChildren();
     if (!this.#shouldShowIndicator(item, index)) {

package/package.json

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