@rogieking/figui3 11.4.2 → 11.5.0

package/fig-editor.css

@@ -1,5 +1,24 @@
 /* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
 @import url("fig-layer.css");
+@import url("fig-property.css");
+
+fig-input-point {
+  display: inline-flex;
+  width: 8.9375rem;
+
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
+  > fig-input-combo {
+    width: 100%;
+
+    > fig-input-number {
+      flex: 1 1 0;
+      width: auto;
+    }
+  }
+}
 
 :root,
 :host {
@@ -230,7 +249,8 @@ fig-fill-picker {
     grid-template-rows: 1fr 1fr;
     align-items: center;
     padding-right: var(--spacer-3);
-    gap: var(--spacer-2);
+    row-gap: var(--spacer-2);
+    column-gap: var(--spacer-2);
     padding-bottom: var(--spacer-1);
 
     .fig-fill-picker-eyedropper {
@@ -261,20 +281,9 @@ fig-fill-picker {
   }
 
   .fig-fill-picker-inputs {
-    /* Override labelless 1fr/2fr split so mode select matches eyedropper width
-       and color inputs take the remaining row. */
-    &:not([direction="vertical"]):not(:has(> label)) {
-      grid-template-columns:
-        var(--fig-field-left-padding)
-        3.5rem
-        var(--spacer-2)
-        minmax(0, 1fr)
-        var(--fig-field-right-padding);
-    }
-
     .fig-fill-picker-input-mode {
       width: 3.5rem;
-      flex-shrink: 0;
+      flex: unset;
       align-self: center;
     }
 
@@ -364,7 +373,7 @@ fig-fill-picker {
     padding-right: var(--spacer-2);
     gap: var(--spacer-1);
 
-    > *:not(.fig-field-chevron):not(label) {
+    > *:not([slot="leading"]):not([slot="trailing"]):not(label) {
       grid-area: unset;
     }
   }
@@ -454,16 +463,16 @@ fig-fill-picker {
   }
 
   .fig-fill-picker-gradient-stop-row {
-    padding-right: var(--spacer-2);
-    display: flex;
-    padding-left: var(--spacer-3);
-    gap: var(--spacer-2);
-
     &.dragging {
       background-color: var(--figma-color-bg-selected);
     }
 
-    & > .fig-fill-picker-stop-position {
+    .fig-fill-picker-gradient-stop-inputs {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .fig-fill-picker-stop-position {
       flex: 0;
       flex-basis: 3rem;
       min-width: 0;
@@ -494,7 +503,7 @@ fig-fill-picker {
     padding-right: var(--spacer-2);
     gap: var(--spacer-2);
 
-    > *:not(.fig-field-chevron):not(label) {
+    > *:not([slot="leading"]):not([slot="trailing"]):not(label) {
       grid-area: unset;
     }
 
@@ -937,18 +946,28 @@ fig-select-option {
     pointer-events: none;
     z-index: 1000000;
     border-radius: 1px;
-    &::before{
+    &::before {
       content: "";
       position: absolute;
       top: 0;
-      left: var(--spacer-1);
+      left: 0;
       width: 100%;
       height: 100%;
       background: var(--figma-color-border-selected);
     }
 
     &.fig-reorder-indicator-ring {
-      &::after{
+      &[data-axis="vertical"]::before {
+        left: var(--spacer-1);
+        width: calc(100% - var(--spacer-1));
+      }
+
+      &[data-axis="horizontal"]::before {
+        top: var(--spacer-1);
+        height: calc(100% - var(--spacer-1));
+      }
+
+      &::after {
         content: "";
         position: absolute;
         top: 1px;
@@ -959,6 +978,11 @@ fig-select-option {
         border: 2px solid var(--figma-color-border-selected);
         border-radius: 50%;
       }
+
+      &[data-axis="horizontal"]::after {
+        top: 0;
+        left: 1px;
+      }
     }
 
     &[data-axis="vertical"] {

package/fig-editor.js

@@ -1,5 +1,6 @@
 /* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
 import "./fig.js";
+import "./fig-property.js";
 
 function figEditorDefineElement(name, constructor) {
   if (!customElements.get(name)) {
@@ -82,6 +83,114 @@ function figEditorCreateElement(tagName, attributes, children) {
   return figEditorAppendChildren(element, children);
 }
 
+/**
+ * Paired X/Y number inputs for editing a point.
+ *
+ * @element fig-input-point
+ * @attr {number} x - Horizontal coordinate
+ * @attr {number} y - Vertical coordinate
+ * @attr {string} units - Unit string forwarded to both coordinate inputs
+ * @fires input - Emitted while either coordinate is edited with `{ x, y }`
+ * @fires change - Emitted when either coordinate is committed with `{ x, y }`
+ */
+class FigInputPoint extends HTMLElement {
+  #inputs = {};
+
+  static get observedAttributes() {
+    return ["x", "y", "units"];
+  }
+
+  connectedCallback() {
+    this.#render();
+    this.#sync();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.isConnected) return;
+    if (name === "units") this.#syncUnits();
+    else this.#syncAxis(name);
+  }
+
+  get value() {
+    return {
+      x: this.#axisValue("x"),
+      y: this.#axisValue("y"),
+    };
+  }
+
+  #render() {
+    if (this.#inputs.x && this.#inputs.y) return;
+
+    const createInput = (axis) => {
+      const label = axis.toUpperCase();
+      const input = figEditorCreateElement(
+        "fig-input-number",
+        {
+          full: true,
+          "aria-label": `${label} coordinate`,
+          "data-axis": axis,
+        },
+        figEditorCreateElement("span", { slot: "prepend" }, label),
+      );
+      input.addEventListener("input", (event) =>
+        this.#handleInput(axis, event),
+      );
+      input.addEventListener("change", (event) =>
+        this.#handleInput(axis, event),
+      );
+      this.#inputs[axis] = input;
+      return input;
+    };
+
+    this.replaceChildren(
+      figEditorCreateElement(
+        "fig-input-combo",
+        { full: true },
+        ["x", "y"].map(createInput),
+      ),
+    );
+  }
+
+  #sync() {
+    this.#syncAxis("x");
+    this.#syncAxis("y");
+    this.#syncUnits();
+  }
+
+  #syncAxis(axis) {
+    const input = this.#inputs[axis];
+    if (!input) return;
+    const value = String(this.#axisValue(axis));
+    if (input.getAttribute("value") !== value) input.setAttribute("value", value);
+  }
+
+  #syncUnits() {
+    const units = this.getAttribute("units");
+    for (const input of Object.values(this.#inputs)) {
+      if (units === null) input.removeAttribute("units");
+      else input.setAttribute("units", units);
+    }
+  }
+
+  #axisValue(axis) {
+    const value = Number(this.getAttribute(axis));
+    return Number.isFinite(value) ? value : 0;
+  }
+
+  #handleInput(axis, event) {
+    event.stopPropagation();
+    const value = Number(event.detail);
+    this.setAttribute(axis, String(Number.isFinite(value) ? value : 0));
+    this.dispatchEvent(
+      new CustomEvent(event.type, {
+        bubbles: true,
+        detail: this.value,
+      }),
+    );
+  }
+}
+figEditorDefineElement("fig-input-point", FigInputPoint);
+
 function figEditorNormalizePaletteValue(value) {
   let entries = value;
   if (typeof entries === "string") {
@@ -429,42 +538,27 @@ class FigPaletteEditor extends HTMLElement {
     this.#emit(type);
   }
 
-  #createRemoveButton(index) {
-    const button = figEditorCreateElement(
-      "fig-button",
-      {
-        className: "fig-palette-editor-remove",
-        variant: "ghost",
-        icon: true,
-        "aria-label": `Remove color ${index + 1}`,
-        disabled:
-          this.#disabled || this.#colors.length <= this.#min || null,
-      },
-      figEditorCreateIcon("minus"),
-    );
-    button.addEventListener("click", () => {
-      const row = button.closest(".fig-palette-editor-color-row");
-      const currentIndex = Number.parseInt(row?.dataset.index ?? "", 10);
-      if (
-        this.#disabled ||
-        this.#fixed ||
-        this.#colors.length <= this.#min ||
-        !Number.isInteger(currentIndex)
-      ) {
-        return;
-      }
-      this.#colors.splice(currentIndex, 1);
-      this.#reflectValue();
-      this.#render();
-      this.#emit("input");
-      this.#emit("change");
-    });
-    return button;
+  #removeRow(row) {
+    const currentIndex = Number.parseInt(row?.dataset.index ?? "", 10);
+    if (
+      this.#disabled ||
+      this.#fixed ||
+      this.#colors.length <= this.#min ||
+      !Number.isInteger(currentIndex)
+    ) {
+      return;
+    }
+    this.#colors.splice(currentIndex, 1);
+    this.#reflectValue();
+    this.#render();
+    this.#emit("input");
+    this.#emit("change");
   }
 
   #createRow(entry, index) {
     const colorInput = figEditorCreateElement("fig-input-color", {
       className: "fig-palette-editor-color",
+      slot: "input",
       value: figEditorPaletteEntryValue(entry),
       text: true,
       alpha: true,
@@ -494,17 +588,22 @@ class FigPaletteEditor extends HTMLElement {
       syncColor(event, "change"),
     );
 
-    return figEditorCreateElement(
-      "fig-field",
+    const row = figEditorCreateElement(
+      "fig-property",
       {
         className: "fig-palette-editor-color-row",
         "data-index": index,
+        leading: "drag",
+        trailing: this.#fixed ? null : "remove",
+        "show-trailing": this.#fixed ? null : true,
       },
-      [
-        colorInput,
-        ...(this.#fixed ? [] : [this.#createRemoveButton(index)]),
-      ],
+      colorInput,
     );
+    row.addEventListener("remove", (event) => {
+      event.stopPropagation();
+      this.#removeRow(row);
+    });
+    return row;
   }
 
   #handleReorder = (event) => {
@@ -594,6 +693,20 @@ class FigPaletteEditor extends HTMLElement {
       children.push(figEditorCreateElement("fig-field", {}, addButton));
     }
     this.replaceChildren(...children);
+    this.querySelectorAll(".fig-palette-editor-color-row").forEach(
+      (row, index) => {
+        const remove = row.querySelector(
+          ':scope > [data-fig-property-action="remove"]',
+        );
+        if (!remove) return;
+        remove.classList.add("fig-palette-editor-remove");
+        remove.setAttribute("aria-label", `Remove color ${index + 1}`);
+        remove.toggleAttribute(
+          "disabled",
+          this.#disabled || this.#colors.length <= this.#min,
+        );
+      },
+    );
   }
 }
 figEditorDefineElement("fig-palette-editor", FigPaletteEditor);
@@ -3460,7 +3573,6 @@ class FigFillPicker extends HTMLElement {
         eyedropperControl,
         figEditorCreateElement("fig-slider", {
           type: "hue",
-          variant: "classic",
           text: "false",
           min: "0",
           max: "360",
@@ -3470,7 +3582,6 @@ class FigFillPicker extends HTMLElement {
         showAlpha
           ? figEditorCreateElement("fig-slider", {
               type: "opacity",
-              variant: "classic",
               text: "false",
               min: "0",
               max: "100",
@@ -3929,7 +4040,14 @@ class FigFillPicker extends HTMLElement {
             placeholder: "FFFFFF",
           });
           content = showAlpha
-            ? combo([hexInput, alphaField()], "fig-fill-picker-ci-hex-row")
+            ? figEditorCreateElement(
+                "fig-input-combo",
+                {
+                  className: "input-combo fig-fill-picker-ci-hex-row",
+                  full: true,
+                },
+                [hexInput, alphaField()],
+              )
             : hexInput;
         }
         break;
@@ -4834,41 +4952,44 @@ class FigFillPicker extends HTMLElement {
 
     const rows = this.#gradient.stops.map((stop, index) =>
       figEditorCreateElement(
-        "fig-field",
+        "fig-property",
         {
           className: "fig-fill-picker-gradient-stop-row",
           "data-index": index,
+          leading: "drag",
+          trailing: "remove",
+          "show-leading": "hover",
+          "show-trailing": true,
         },
-        [
-          figEditorCreateElement("fig-input-number", {
-            className: "fig-fill-picker-stop-position",
-            "aria-label": "Gradient stop position",
-            min: "0",
-            max: "100",
-            value: stop.position,
-            units: "%",
-          }),
-          figEditorCreateElement("fig-input-color", {
-            className: "fig-fill-picker-stop-color",
-            "aria-label": "Gradient stop color",
-            text: "true",
-            alpha: "true",
-            picker: "figma",
-            "picker-dialog-position": "right",
-            value: this.#formatStopColorValue(stop),
-          }),
-          figEditorCreateElement(
-            "fig-button",
-            {
-              icon: true,
-              variant: "ghost",
-              className: "fig-fill-picker-stop-remove",
-              disabled: this.#gradient.stops.length <= 2,
-              "aria-label": "Remove gradient stop",
-            },
-            figEditorCreateIcon("minus"),
-          ),
-        ],
+        figEditorCreateElement(
+          "fig-stack",
+          {
+            className: "fig-fill-picker-gradient-stop-inputs",
+            slot: "input",
+            direction: "horizontal",
+            gap: "2",
+            full: true,
+          },
+          [
+            figEditorCreateElement("fig-input-number", {
+              className: "fig-fill-picker-stop-position",
+              "aria-label": "Gradient stop position",
+              min: "0",
+              max: "100",
+              value: stop.position,
+              units: "%",
+            }),
+            figEditorCreateElement("fig-input-color", {
+              className: "fig-fill-picker-stop-color",
+              "aria-label": "Gradient stop color",
+              text: "true",
+              alpha: "true",
+              picker: "figma",
+              "picker-dialog-position": "right",
+              value: this.#formatStopColorValue(stop),
+            }),
+          ],
+        ),
       ),
     );
     reorder.replaceChildren(...rows);
@@ -4911,16 +5032,21 @@ class FigFillPicker extends HTMLElement {
         stopColor.addEventListener("input", syncStopColor);
         stopColor.addEventListener("change", syncStopColor);
 
-        row
-          .querySelector(".fig-fill-picker-stop-remove")
-          .addEventListener("click", () => {
-            const index = parseInt(row.dataset.index, 10);
-            if (this.#gradient.stops.length > 2) {
-              this.#gradient.stops.splice(index, 1);
-              this.#updateGradientUI();
-              this.#emitInput();
-            }
-          });
+        const remove = row.querySelector(
+          ':scope > [data-fig-property-action="remove"]',
+        );
+        remove.classList.add("fig-fill-picker-stop-remove");
+        remove.setAttribute("aria-label", "Remove gradient stop");
+        remove.toggleAttribute("disabled", this.#gradient.stops.length <= 2);
+        row.addEventListener("remove", (event) => {
+          event.stopPropagation();
+          const index = parseInt(row.dataset.index, 10);
+          if (this.#gradient.stops.length > 2) {
+            this.#gradient.stops.splice(index, 1);
+            this.#updateGradientUI();
+            this.#emitInput();
+          }
+        });
       });
   }
 

package/fig-property.css

@@ -0,0 +1,116 @@
+/* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
+
+fig-property {
+  --fig-property-gap: var(--spacer-2);
+  --fig-property-left-padding: var(--spacer-3);
+  --fig-property-right-padding: var(--spacer-3);
+  --fig-property-top-padding: var(--spacer-1);
+  --fig-property-bottom-padding: var(--spacer-1);
+  --fig-property-label-ratio: 1fr;
+  --fig-property-input-ratio: 2fr;
+  --fig-property-trailing-gap: 0;
+  --fig-property-trailing-size: 0;
+  display: grid;
+  grid-template-columns:
+    var(--fig-property-left-padding)
+    var(
+      --fig-property-label-track,
+      minmax(0, var(--fig-property-label-ratio))
+    )
+    minmax(0, var(--fig-property-input-ratio))
+    var(--fig-property-trailing-gap)
+    var(--fig-property-trailing-size)
+    var(--fig-property-right-padding);
+  grid-template-areas: "leading label input . trailing pad";
+  align-items: start;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: var(--fig-property-top-padding) 0
+    var(--fig-property-bottom-padding);
+
+  &[show-trailing]:not([show-trailing="hover"]):has(> fig-button[slot="trailing"][variant="ghost"]),
+  &[show-trailing]:not([show-trailing="hover"]):has(> [slot="trailing"] fig-button[variant="ghost"]) {
+    --fig-property-right-padding: var(--spacer-2);
+  }
+
+  > :is(label, [slot="label"]) {
+    grid-area: label;
+    display: block;
+    min-width: 0;
+    height: min(100%, var(--spacer-4));
+    margin-right: var(--fig-property-gap);
+    padding: 0;
+    align-content: center;
+    overflow: hidden;
+    font: inherit;
+    line-height: 1rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  > [slot="leading"] {
+    grid-area: leading;
+    height: 100%;
+    visibility: hidden;
+    color: var(--figma-color-text-secondary);
+  }
+
+  &:has(> [slot="trailing"]) {
+    --fig-property-label-track: minmax(
+      0,
+      calc(
+        (
+            100% - var(--fig-property-left-padding) -
+              var(--fig-property-right-padding)
+          ) /
+          3
+      )
+    );
+  }
+
+  > [slot="input"] {
+    grid-area: input;
+    width: 100%;
+    min-width: 0;
+  }
+
+  > [slot="trailing"] {
+    grid-area: trailing;
+    min-width: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  &:is(:hover) > [slot="leading"],
+  &:hover > [slot="trailing"],
+  &[show-leading]:not([show-leading="hover"]):not([show-leading="false"])
+    > [slot="leading"],
+  &[show-trailing]:not([show-trailing="hover"]):not([show-trailing="false"])
+    > [slot="trailing"] {
+    visibility: visible;
+  }
+
+  &:hover:has(> [slot="trailing"]):not([show-trailing="false"]),
+  &[show-trailing]:not([show-trailing="hover"]):not([show-trailing="false"])
+  {
+    --fig-property-trailing-gap: var(--fig-property-gap);
+    --fig-property-trailing-size: max-content;
+  }
+
+  &:hover > [slot="trailing"],
+  &[show-trailing]:not([show-trailing="hover"]):not([show-trailing="false"])
+    > [slot="trailing"] {
+    overflow: visible;
+  }
+
+  &[show-leading="false"] > [slot="leading"],
+  &[show-trailing="false"] > [slot="trailing"] {
+    display: none;
+  }
+
+  &:not(:has(> :is(label, [slot="label"]))) > [slot="input"] {
+    grid-column: label-start / input-end;
+  }
+}