@rogieking/figui3 8.9.13 → 8.9.15

package/fig-lab.css

@@ -383,7 +383,7 @@ fig-content:has(> propskit-group[name]:last-child) {
 }
 
 /* Flex-positioned numbers — margin works. Absolute numbers use right: calc(...) below. */
-:is(propskit-color, propskit-number)[size="large"] {
+propskit-number[size="large"] {
   fig-field fig-input-number {
     margin-right: var(--spacer-1);
   }
@@ -504,7 +504,7 @@ propskit-color {
     align-items: center;
     gap: var(--spacer-2);
     height: 100%;
-    padding-left: var(--spacer-2);
+    padding: 0 0 0 var(--spacer-2);
     border-radius: var(--radius-medium);
     background-color: var(--figma-color-bg-secondary);
 
@@ -525,9 +525,8 @@ propskit-color {
       z-index: 1;
       display: flex;
       align-items: center;
-      flex: 0 0 auto;
-      width: auto;
-      max-width: 50%;
+      flex: 0 1 auto;
+      max-width: 40%;
       min-width: 0;
       margin: 0;
       padding: 0;
@@ -542,55 +541,26 @@ propskit-color {
       }
     }
 
-    fig-input-color {
-      --figma-focus-outline-offset: 1px;
+    fig-fill-picker {
+      display: contents;
+    }
 
+    fig-swatch {
       position: relative;
-      align-self: center;
-      flex: 0 1 auto !important;
-      width: fit-content !important;
-      max-width: none;
+      flex: 0 0 33%;
+      width: 33%;
       min-width: 0;
       margin-left: auto;
+      --width: 100%;
+      --height: var(--propskit-color-height);
+      --size: var(--propskit-color-height);
+      --border-radius: var(--radius-medium);
       height: var(--propskit-color-height);
       border-radius: var(--radius-medium);
-      background-color: transparent;
-      box-shadow: none;
 
-      /* Field ::after owns hover chrome — don't double-outline the color control. */
-      &:hover:not(:focus):not(:focus-within):not(.has-popup-open) {
+      &:hover {
         outline: none !important;
       }
-
-      > .input-combo {
-        flex: 0 0 auto;
-        width: auto;
-      }
-
-      fig-input-text {
-        flex: 0 0 3.25rem;
-        width: 3.25rem;
-
-        input {
-          field-sizing: fixed;
-          box-sizing: border-box;
-          width: 100%;
-          min-width: 0;
-        }
-      }
-
-      fig-input-number {
-        flex: 0 0 3rem;
-        width: 3rem;
-        min-width: 3rem;
-
-        input {
-          field-sizing: fixed;
-          box-sizing: border-box;
-          width: 100%;
-          min-width: 0;
-        }
-      }
     }
   }
 }
@@ -612,8 +582,15 @@ propskit-gradient {
   &[size="large"] {
     --propskit-gradient-height: 2rem;
 
-    fig-field:not([direction="vertical"]) {
-      padding-right: var(--spacer-1);
+    fig-input-gradient {
+      --fig-input-gradient-height: var(--propskit-gradient-height);
+      height: var(--propskit-gradient-height);
+
+      fig-swatch {
+        --height: var(--propskit-gradient-height);
+        --size: var(--propskit-gradient-height);
+        height: var(--propskit-gradient-height);
+      }
     }
   }
 
@@ -631,7 +608,7 @@ propskit-gradient {
     align-items: center;
     gap: var(--spacer-2);
     height: 100%;
-    padding: 0 var(--spacer-1) 0 var(--spacer-2);
+    padding: 0 0 0 var(--spacer-2);
     border-radius: var(--radius-medium);
     background-color: var(--figma-color-bg-secondary);
 
@@ -670,8 +647,8 @@ propskit-gradient {
 
     fig-input-gradient {
       position: relative;
-      flex: 0 0 50%;
-      width: 50%;
+      flex: 0 0 33%;
+      width: 33%;
       min-width: 0;
       margin-left: auto;
       border-radius: var(--radius-medium);

package/fig-lab.js

@@ -699,11 +699,37 @@ class PropskitSwitch extends HTMLElement {
 }
 figLabDefineElement("propskit-switch", PropskitSwitch);
 
+function figLabParseSolidColor(raw) {
+  const value = String(raw ?? "").trim();
+  if (/^#[0-9a-fA-F]{8}$/.test(value)) {
+    return {
+      color: value.slice(0, 7),
+      alpha: parseInt(value.slice(7, 9), 16) / 255,
+    };
+  }
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+    return { color: value, alpha: 1 };
+  }
+  if (/^#[0-9a-fA-F]{3}$/.test(value)) {
+    return {
+      color: `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`,
+      alpha: 1,
+    };
+  }
+  return { color: value || "#D9D9D9", alpha: 1 };
+}
+
+function figLabSolidFillValue(raw) {
+  const { color, alpha } = figLabParseSolidColor(raw);
+  return JSON.stringify({ type: "solid", color, alpha });
+}
+
 /* Field + Color wrapper */
 class PropskitColor extends HTMLElement {
   #field = null;
   #label = null;
   #input = null;
+  #swatch = null;
   #hasCustomLabel = false;
   #observer = null;
   #managedInputAttrs = new Set();
@@ -779,15 +805,18 @@ class PropskitColor extends HTMLElement {
     );
     const field = document.createElement("fig-field");
     const label = customLabel || document.createElement("label");
-    const input = document.createElement("fig-input-color");
-
+    const picker = document.createElement("fig-fill-picker");
+    const swatch = document.createElement("fig-swatch");
+    picker.append(swatch);
+    swatch.setAttribute("tabindex", "0");
     for (const node of initialChildren) {
-      if (node !== customLabel) input.appendChild(node);
+      if (node !== customLabel) picker.appendChild(node);
     }
-    field.append(label, input);
+    field.append(label, picker);
     this.#field = field;
     this.#label = label;
-    this.#input = input;
+    this.#input = picker;
+    this.#swatch = swatch;
     this.#hasCustomLabel = Boolean(customLabel);
     this.replaceChildren(field);
   }
@@ -821,6 +850,15 @@ class PropskitColor extends HTMLElement {
     );
   }
 
+  #parsedHostColor() {
+    return figLabParseSolidColor(this.getAttribute("value"));
+  }
+
+  #pickerValueFromHost() {
+    const { color, alpha } = this.#parsedHostColor();
+    return JSON.stringify({ type: "solid", color, alpha });
+  }
+
   #getForwardedInputAttrNames() {
     const reserved = new Set([
       "label",
@@ -834,6 +872,8 @@ class PropskitColor extends HTMLElement {
       "aria-label",
       "text",
       "default",
+      "value",
+      "mode",
     ]);
     return this.getAttributeNames().filter(
       (name) => !reserved.has(name) && !name.startsWith("data-"),
@@ -849,19 +889,19 @@ class PropskitColor extends HTMLElement {
       if (!nextManaged.has(attrName)) this.#input.removeAttribute(attrName);
     }
     for (const attrName of inputAttrs) {
-      const next = this.getAttribute(attrName) ?? "";
-      // Soft sync only. Never force-clear value here — that fights live edits
-      // (fig-input-color often keeps a stale value attribute while editing).
-      if (
-        attrName === "value" &&
-        this.#input.getAttribute("value") === next
-      ) {
-        continue;
-      }
-      this.#input.setAttribute(attrName, next);
+      this.#input.setAttribute(attrName, this.getAttribute(attrName) ?? "");
     }
 
-    this.#input.setAttribute("text", "true");
+    this.#input.setAttribute("mode", "solid");
+    const nextJson = this.#pickerValueFromHost();
+    if (this.#input.getAttribute("value") !== nextJson) {
+      this.#input.setAttribute("value", nextJson);
+    }
+    const { color, alpha } = this.#parsedHostColor();
+    if (this.#swatch) {
+      this.#swatch.setAttribute("background", color);
+      this.#swatch.setAttribute("alpha", String(alpha));
+    }
     this.#managedInputAttrs = nextManaged;
   }
 
@@ -888,31 +928,62 @@ class PropskitColor extends HTMLElement {
       event instanceof CustomEvent && event.detail !== undefined
         ? event.detail
         : undefined;
-    if (typeof detail === "string" && detail) return detail;
+    if (typeof detail === "string" && detail) {
+      return figLabParseSolidColor(detail).color;
+    }
     if (detail && typeof detail === "object") {
-      if (typeof detail.value === "string" && detail.value) return detail.value;
-      if (typeof detail.hex === "string" && detail.hex) return detail.hex;
       if (typeof detail.color === "string" && detail.color) return detail.color;
+      if (typeof detail.value === "string" && detail.value) {
+        return figLabParseSolidColor(detail.value).color;
+      }
+      if (typeof detail.hex === "string" && detail.hex) return detail.hex;
+    }
+    const live = this.#input?.value;
+    if (live && typeof live === "object" && typeof live.color === "string") {
+      return live.color;
     }
-    // Prefer live JS value — fig-input-color often leaves the attribute stale.
-    if (typeof this.#input?.value === "string" && this.#input.value) {
-      return this.#input.value;
+    if (typeof live === "string" && live) {
+      return figLabParseSolidColor(live).color;
     }
-    return this.#input?.getAttribute("value") ?? "";
+    return this.#parsedHostColor().color;
+  }
+
+  #colorDetailFromEvent(event, color) {
+    const detail =
+      event instanceof CustomEvent && event.detail && typeof event.detail === "object"
+        ? event.detail
+        : undefined;
+    const alpha = Number.isFinite(detail?.alpha)
+      ? Math.max(0, Math.min(1, Number(detail.alpha)))
+      : this.#parsedHostColor().alpha;
+    return {
+      color,
+      alpha,
+      opacity: Math.round(alpha * 100),
+    };
   }
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
     if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#valueFromColorEvent(event);
-    this.setAttribute("value", value);
-    if (this.#input && this.#input.getAttribute("value") !== value) {
-      this.#input.setAttribute("value", value);
+    const detail = this.#colorDetailFromEvent(event, value);
+    const alphaHex =
+      detail.alpha < 1 - 1 / 255
+        ? Math.round(detail.alpha * 255)
+            .toString(16)
+            .padStart(2, "0")
+        : "";
+    const hostValue = `${detail.color.slice(0, 7)}${alphaHex}`;
+    this.setAttribute("value", hostValue);
+    const nextJson = this.#pickerValueFromHost();
+    if (this.#input && this.#input.getAttribute("value") !== nextJson) {
+      this.#input.setAttribute("value", nextJson);
+    }
+    if (this.#swatch) {
+      this.#swatch.setAttribute("background", detail.color);
+      this.#swatch.setAttribute("alpha", String(detail.alpha));
     }
-    const detail =
-      event instanceof CustomEvent && event.detail !== undefined
-        ? event.detail
-        : value;
     this.dispatchEvent(
       new CustomEvent(type, {
         detail,
@@ -927,7 +998,7 @@ class PropskitColor extends HTMLElement {
     if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
-      event.target.closest("fig-input-color, fig-menu")
+      event.target.closest("fig-fill-picker, fig-swatch, fig-menu")
     ) {
       return;
     }
@@ -946,18 +1017,22 @@ class PropskitColor extends HTMLElement {
     }
     const next = String(nextValue);
     this.setAttribute("value", next);
-    if (this.#input && this.#input.getAttribute("value") !== next) {
-      this.#input.setAttribute("value", next);
-    }
+    this.#forceInputValue(next);
   }
 
-  /** Force fig-input-color UI refresh even when the hex string is unchanged. */
+  /** Force fill-picker refresh even when the serialized value is unchanged. */
   #forceInputValue(next) {
     if (!this.#input) return;
-    if (this.#input.getAttribute("value") === next) {
+    const json = figLabSolidFillValue(next);
+    if (this.#input.getAttribute("value") === json) {
       this.#input.removeAttribute("value");
     }
-    this.#input.setAttribute("value", next);
+    this.#input.setAttribute("value", json);
+    if (this.#swatch) {
+      const parsed = figLabParseSolidColor(next);
+      this.#swatch.setAttribute("background", parsed.color);
+      this.#swatch.setAttribute("alpha", String(parsed.alpha));
+    }
   }
 
   #defaultValue() {
@@ -995,7 +1070,8 @@ class PropskitColor extends HTMLElement {
   }
 
   focus(options) {
-    this.#input?.querySelector("input:not([tabindex='-1'])")?.focus(options);
+    const swatch = this.querySelector("fig-swatch");
+    if (swatch instanceof HTMLElement) swatch.focus(options);
   }
 }
 figLabDefineElement("propskit-color", PropskitColor);
@@ -1158,7 +1234,7 @@ class PropskitGradient extends HTMLElement {
       this.#input.setAttribute(attrName, next);
     }
 
-    if (!this.hasAttribute("edit")) this.#input.setAttribute("edit", "true");
+    if (!this.hasAttribute("edit")) this.#input.setAttribute("edit", "picker");
     this.#managedInputAttrs = nextManaged;
   }
 

package/fig.js

@@ -7742,10 +7742,12 @@ class FigField extends HTMLElement {
       inputTag === "fig-menu" ||
       inputTag === "fig-dropdown" ||
       inputTag === "fig-tooltip" ||
+      inputTag === "fig-fill-picker" ||
       (this.input instanceof HTMLDialogElement);
     this.#toggleable = !!(
       this.input &&
       "open" in this.input &&
+      typeof this.input.open !== "function" &&
       !popupOpenHost
     );
 
@@ -11877,7 +11879,11 @@ class FigSwatch extends HTMLElement {
   }
 
   focus() {
-    this.input?.focus();
+    if (this.input?.isConnected) {
+      this.input.focus();
+      return;
+    }
+    HTMLElement.prototype.focus.call(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {

package/package.json

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