@rogieking/figui3 3.14.1 → 3.15.0

package/components.css

@@ -1175,18 +1175,24 @@ input[type="color"] {
 }
 
 fig-chit {
-  contain: layout paint;
   --size: 1.5rem;
+  --padding: 5px;
+  --width: var(--size);
+  --height: var(--size);
+  --border-radius: var(--radius-medium);
   --chit-background: #d9d9d9;
   --chit-bg-size: cover;
   --chit-bg-position: center;
+  --selected: 0;
   --alpha: 1;
 
   display: inline-grid;
   width: var(--size);
   height: var(--size);
-  border-radius: var(--radius-medium);
-  cursor: default;
+  border-radius: var(--border-radius);
+  background-color: var(--figma-color-bg-secondary);
+  box-shadow: inset 0 0 0 calc(var(--selected) * 1px)
+    var(--figma-color-border-selected);
 
   &::before,
   &::after,
@@ -1195,130 +1201,94 @@ fig-chit {
   }
 
   /* Selection ring */
-  &[selected]:not([selected="false"])::before {
-    content: "";
-    width: var(--size);
-    height: var(--size);
-    z-index: 1;
-    border-radius: var(--radius-medium);
-    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+  &[selected]:not([selected="false"]) {
+    --selected: 1;
+    background-color: transparent;
   }
 
   &[size="medium"],
   &[size="large"] {
-    input[type="color"] {
-      padding: 0;
-      width: var(--size);
-      height: var(--size);
-      border-radius: var(--radius-medium);
-    }
-
-    input[type="color"]::-webkit-color-swatch-wrapper {
-      border-radius: var(--radius-medium);
-    }
-
-    input[type="color"]::-webkit-color-swatch {
-      border-radius: var(--radius-medium);
-    }
-
-    input[type="color"]::-moz-color-swatch {
-      border-radius: var(--radius-medium);
-    }
-
-    &[selected]:not([selected="false"])::before {
-      box-shadow:
-        inset 0 0 0 1px var(--figma-color-border-selected),
-        inset 0 0 0 3px var(--figma-color-bg);
-    }
-
-    &[data-type="gradient"]::after,
-    &[data-type="image"]::after,
-    &[data-type="gradient"]::before,
-    &[data-type="image"]::before {
-      width: var(--size);
-      height: var(--size);
-      border-radius: var(--radius-medium);
+    --padding: 0px;
+    &[selected]:not([selected="false"]) {
+      --padding: 3px;
     }
   }
 
   &[size="medium"] {
     --size: 1.5rem;
+    --padding: 0px;
   }
 
   &[size="large"] {
     --size: 2rem;
+    --padding: 0px;
   }
 
   &[disabled] {
     pointer-events: none;
   }
 
+  &::before,
+  &::after {
+    content: "";
+    width: var(--width);
+    height: var(--height);
+    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
+    width: calc(var(--width) - var(--padding) * 2);
+    height: calc(var(--height) - var(--padding) * 2);
+    grid-area: 1/1;
+    place-self: center;
+    pointer-events: none;
+  }
+  &::after {
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    z-index: 1;
+  }
   &::before {
     content: "";
-    width: 0.875rem;
-    height: 0.875rem;
-    border-radius: 0.125rem;
+    background: var(--chit-background);
+    background-size: var(--chit-bg-size);
+    background-position: var(--chit-bg-position);
+    background-repeat: no-repeat;
+    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
+    mask-image: linear-gradient(
+      to right,
+      black 0%,
+      black 50%,
+      rgba(0, 0, 0, var(--alpha)) 50%
+    );
     grid-area: 1/1;
     place-self: center;
   }
+  &[size="medium"]::before,
   &[size="large"]::before {
-    width: var(--size);
-    height: var(--size);
-    border-radius: var(--radius-medium);
+    border-radius: calc(var(--border-radius) - var(--padding));
+  }
+  input[type="color"] {
+    background: none;
+    width: var(--width);
+    height: var(--height);
+    background: none;
+    grid-area: 1/1;
+    place-self: center;
+    box-sizing: border-box;
+    opacity: 0;
   }
 
   /* Gradient/Image types - inset thumbnail with hidden input */
   &[data-type="gradient"],
   &[data-type="image"] {
     background-color: var(--figma-color-bg-secondary);
-
-    &::after {
-      content: "";
-      width: 0.875rem;
-      height: 0.875rem;
-
-      background: var(--chit-background);
-      background-size: var(--chit-bg-size);
-      background-position: var(--chit-bg-position);
-      background-repeat: no-repeat;
-      border-radius: 0.125rem;
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-      mask-image: linear-gradient(
-        to right,
-        black 0%,
-        black 50%,
-        rgba(0, 0, 0, var(--alpha)) 50%
-      );
-    }
-
-    &::after,
-    input {
-      grid-area: 1/1;
-      place-self: center;
-    }
-
     input[type="color"] {
-      opacity: 0;
-    }
-
-    input[type="color"]::-webkit-color-swatch-wrapper {
-      background: none;
-    }
-
-    input[type="color"]::-moz-color-swatch {
-      opacity: 0;
-    }
-
-    input[type="color"]::-webkit-color-swatch {
-      opacity: 0;
+      display: none;
     }
   }
 
   /* Checkerboard for empty/missing images */
-  &[data-type="image"]:not([background])::before,
-  &[data-type="image"][background=""]::before,
-  &[data-type="image"][background="url()"]::before,
-  &[checkerboard]:not([checkerboard="false"])::before {
+  &[data-type="image"]:not([background])::after,
+  &[data-type="image"][background=""]::after,
+  &[data-type="image"][background="url()"]::after,
+  &[checkerboard]:not([checkerboard="false"])::after {
     background: var(--checkerboard);
   }
 }
@@ -1338,8 +1308,11 @@ fig-image {
   > * {
     grid-area: 1/1;
   }
-  fig-chit {
+  fig-chit[size="large"] {
     --size: 100% !important;
+    --width: 100% !important;
+    --height: 100% !important;
+    --padding: 0px;
     --chit-bg-size: var(--fit);
     &[disabled] {
       opacity: 1;
@@ -2900,7 +2873,8 @@ fig-checkbox,
 fig-radio,
 fig-tab,
 fig-tabs,
-fig-segmented-control {
+fig-segmented-control,
+fig-input-palette {
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;
@@ -3136,6 +3110,7 @@ fig-input-fill {
       background-color: transparent !important;
       box-shadow: none !important;
       border: 0 !important;
+      --selected: 0;
     }
   }
   fig-chit ~ fig-input-text > input,
@@ -3177,21 +3152,12 @@ fig-input-gradient {
     outline: 1px solid var(--figma-color-border-selected) !important;
     outline-offset: -1px !important;
   }
-  fig-chit {
+  & > fig-chit {
+    --padding: 0;
+    --width: 100%;
     flex: 1 1 auto;
     width: 100% !important;
     min-width: 0 !important;
-    &::before,
-    &::after {
-      width: 100% !important;
-      place-self: stretch;
-    }
-    &[data-type="gradient"]::after {
-      width: calc(100% - 0.625rem);
-      height: 0.875rem;
-      justify-self: center;
-      align-self: center;
-    }
   }
 
   .fig-input-gradient-track {
@@ -3212,6 +3178,83 @@ fig-input-gradient {
   }
 }
 
+fig-input-palette {
+  display: inline-grid !important;
+  grid-template-columns: 1fr 24px;
+  grid-template-areas: "inputs button";
+  gap: var(--spacer-1);
+  width: 100%;
+
+  .palette-colors {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0;
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    grid-area: inputs;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .palette-add-btn {
+    grid-area: button;
+  }
+
+  &:not([expanded]),
+  &[expanded="false"] {
+    .palette-colors {
+      display: flex;
+      background-color: var(--figma-color-bg-secondary);
+
+      > fig-input-color {
+        display: contents;
+      }
+
+      fig-chit {
+        --padding: 0px;
+        --border-radius: 0px;
+        --width: 100%;
+        flex: 1;
+        min-width: 0;
+        width: 100% !important;
+        height: var(--size);
+        border-radius: 0 !important;
+        input,
+        &::before,
+        &::after {
+          padding: 0 !important;
+          border-radius: 0 !important;
+        }
+      }
+    }
+  }
+
+  &[expanded]:not([expanded="false"]) {
+    .palette-colors {
+      flex-direction: column;
+      overflow: visible;
+      border-radius: 0;
+      gap: var(--spacer-2);
+      background-color: transparent;
+
+      > fig-input-color {
+        min-width: 0;
+      }
+
+      fig-chit {
+        --border-radius: var(--radius-medium);
+        width: auto !important;
+        height: var(--size);
+        border-radius: var(--radius-medium) !important;
+      }
+    }
+  }
+}
+
+fig-field[direction="horizontal"]:has(> fig-input-palette) {
+  padding-right: var(--spacer-2);
+}
+
 fig-slider {
   display: flex;
 
@@ -4849,10 +4892,6 @@ fig-color-tip {
     }
   }
 
-  &[selected]:not([selected="false"]) {
-    outline: var(--tip-selection-width) solid var(--figma-color-border-selected);
-  }
-
   &[selected]:not([selected="false"]):before {
     content: "";
     background: var(--figma-color-border-selected);
@@ -4860,7 +4899,7 @@ fig-color-tip {
     width: 6px;
     height: 3px;
     position: absolute;
-    top: calc(100% + 1px);
+    top: 100%;
     left: var(--beak-offset, 50%);
     z-index: 1;
     pointer-events: none;
@@ -4875,9 +4914,9 @@ fig-color-tip {
     width: 6px;
     height: 3px;
     position: absolute;
-    top: 100%;
+    top: calc(100% - 1px);
     left: var(--beak-offset, 50%);
-    z-index: 2;
+    z-index: 3;
     transform: translate(-50%);
   }
 

package/fig.js

@@ -4521,7 +4521,8 @@ class FigInputColor extends HTMLElement {
     const fpAttrs = this.#buildFillPickerAttrs();
 
     let html = ``;
-    if (this.getAttribute("text")) {
+    const showText = this.getAttribute("text") === "true";
+    if (showText) {
       let label = `<fig-input-text 
         type="text"
         placeholder="000000"
@@ -4758,7 +4759,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental", "alpha"];
+    return ["value", "style", "mode", "picker", "experimental", "alpha", "text"];
   }
 
   get mode() {
@@ -4809,6 +4810,7 @@ class FigInputColor extends HTMLElement {
         // Picker type change requires re-render
         break;
       case "alpha":
+      case "text":
         if (this.isConnected) this.#buildUI();
         break;
     }
@@ -5683,6 +5685,287 @@ class FigInputFill extends HTMLElement {
 }
 customElements.define("fig-input-fill", FigInputFill);
 
+/* Input Palette */
+/**
+ * A palette of solid colors, each rendered as a fig-input-color swatch.
+ * Manages an internal array of colors with add support.
+ * @attr {string} value - JSON array of hex strings or {color,alpha} objects, or comma-separated hex
+ * @attr {boolean} disabled - Whether the palette is disabled
+ * @attr {number} min - Minimum number of colors (default: 2)
+ * @attr {number} max - Maximum number of colors (default: 8); add button hidden at max
+ * @fires input - During color editing (detail: full color array)
+ * @fires change - On committed color edits or add (detail: full color array)
+ */
+class FigInputPalette extends HTMLElement {
+  #colors = [];
+  #pickers = [];
+  #renderRAF = null;
+
+  static get observedAttributes() {
+    return ["value", "disabled", "min", "max", "expanded"];
+  }
+
+  get #expanded() {
+    return this.hasAttribute("expanded") && this.getAttribute("expanded") !== "false";
+  }
+
+  get #min() {
+    const v = parseInt(this.getAttribute("min"));
+    return isNaN(v) ? 2 : v;
+  }
+
+  get #max() {
+    const v = parseInt(this.getAttribute("max"));
+    return isNaN(v) ? 8 : v;
+  }
+
+  connectedCallback() {
+    if (this.#renderRAF) cancelAnimationFrame(this.#renderRAF);
+    this.#renderRAF = requestAnimationFrame(() => {
+      this.#renderRAF = null;
+      this.#parseValue();
+      this.#render();
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.#renderRAF) {
+      cancelAnimationFrame(this.#renderRAF);
+      this.#renderRAF = null;
+    }
+    this.#pickers = [];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    switch (name) {
+      case "value":
+        this.#parseValue();
+        this.#syncPickers();
+        break;
+      case "disabled":
+        this.#syncDisabled();
+        break;
+      case "min":
+      case "max":
+      case "expanded":
+        this.#render();
+        break;
+    }
+  }
+
+  #parseValue() {
+    const raw = this.getAttribute("value");
+    if (!raw) {
+      this.#colors = [];
+      return;
+    }
+
+    const trimmed = raw.trim();
+
+    // Try JSON first
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (Array.isArray(parsed)) {
+        this.#colors = parsed.map((entry) => {
+          if (typeof entry === "string") {
+            return { color: entry.slice(0, 7), alpha: entry.length > 7 ? parseInt(entry.slice(7, 9), 16) / 255 : 1 };
+          }
+          if (entry && typeof entry === "object") {
+            return {
+              color: entry.color || "#D9D9D9",
+              alpha: entry.alpha !== undefined ? entry.alpha : (entry.opacity !== undefined ? entry.opacity / 100 : 1),
+            };
+          }
+          return { color: "#D9D9D9", alpha: 1 };
+        });
+        return;
+      }
+    } catch (e) {
+      // Not JSON — try comma-separated hex
+    }
+
+    // Comma-separated hex
+    if (trimmed.includes(",")) {
+      this.#colors = trimmed.split(",").map((s) => {
+        const hex = s.trim();
+        return {
+          color: hex.slice(0, 7),
+          alpha: hex.length > 7 ? parseInt(hex.slice(7, 9), 16) / 255 : 1,
+        };
+      });
+      return;
+    }
+
+    // Single hex
+    if (trimmed.startsWith("#")) {
+      this.#colors = [{
+        color: trimmed.slice(0, 7),
+        alpha: trimmed.length > 7 ? parseInt(trimmed.slice(7, 9), 16) / 255 : 1,
+      }];
+      return;
+    }
+
+    this.#colors = [];
+  }
+
+  get value() {
+    return this.#colors.map((c) => ({ ...c }));
+  }
+
+  set value(val) {
+    if (typeof val === "string") {
+      this.setAttribute("value", val);
+    } else {
+      this.setAttribute("value", JSON.stringify(val));
+    }
+  }
+
+  #render() {
+    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+
+    this.innerHTML = "";
+    this.#pickers = [];
+
+    const wrap = document.createElement("div");
+    wrap.className = "palette-colors";
+    this.#colors.forEach((entry, i) => {
+      wrap.appendChild(this.#createPicker(entry, i, disabled));
+    });
+    this.appendChild(wrap);
+
+    this.#createAddButton(disabled);
+  }
+
+  #createPicker(entry, index, disabled) {
+    const hexAlpha = entry.alpha < 1
+      ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
+      : entry.color;
+    const expanded = this.#expanded;
+    const ic = document.createElement("fig-input-color");
+    ic.setAttribute("value", hexAlpha);
+    ic.setAttribute("text", expanded ? "true" : "false");
+    ic.setAttribute("picker", "figma");
+    ic.setAttribute("alpha", "true");
+    ic.setAttribute("picker-anchor", "self");
+    if (expanded) ic.setAttribute("full", "");
+    if (disabled) ic.setAttribute("disabled", "");
+
+    const updateFromPicker = (e) => {
+      e.stopPropagation();
+      const el = e.currentTarget;
+      this.#colors[index] = {
+        color: el.hexOpaque || this.#colors[index].color,
+        alpha: el.rgba ? el.rgba.a : this.#colors[index].alpha,
+      };
+    };
+
+    ic.addEventListener("input", (e) => {
+      updateFromPicker(e);
+      this.#emitInput();
+    });
+
+    ic.addEventListener("change", (e) => {
+      updateFromPicker(e);
+      this.#emitChange();
+    });
+
+    this.#pickers.push(ic);
+    return ic;
+  }
+
+  #createAddButton(disabled) {
+    const atMax = this.#colors.length >= this.#max;
+    const addBtn = document.createElement("fig-button");
+    addBtn.setAttribute("variant", "ghost");
+    addBtn.setAttribute("icon", "true");
+    addBtn.setAttribute("aria-label", "Add color");
+    addBtn.className = "palette-add-btn";
+    if (disabled || atMax) addBtn.setAttribute("disabled", "");
+    addBtn.innerHTML = `<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>`;
+    addBtn.addEventListener("click", () => {
+      if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
+      if (this.#colors.length >= this.#max) return;
+      this.#addColor({ color: "#D9D9D9", alpha: 1 });
+    });
+    const tooltip = document.createElement("fig-tooltip");
+    tooltip.setAttribute("text", "Add color");
+    tooltip.appendChild(addBtn);
+    this.appendChild(tooltip);
+  }
+
+  #addColor(entry) {
+    this.#colors.push(entry);
+    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const ic = this.#createPicker(entry, this.#colors.length - 1, disabled);
+    const wrap = this.querySelector(".palette-colors");
+    if (wrap) {
+      wrap.appendChild(ic);
+    } else {
+      this.appendChild(ic);
+    }
+
+    if (this.#colors.length >= this.#max) {
+      const addBtn = this.querySelector(".palette-add-btn");
+      if (addBtn) addBtn.setAttribute("disabled", "");
+    }
+    this.#emitChange();
+  }
+
+  #updateChit(index) {
+    const ic = this.#pickers[index];
+    if (!ic) return;
+    const entry = this.#colors[index];
+    const hexAlpha = entry.alpha < 1
+      ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
+      : entry.color;
+    ic.setAttribute("value", hexAlpha);
+  }
+
+  #syncPickers() {
+    if (this.#pickers.length !== this.#colors.length) {
+      this.#render();
+      return;
+    }
+    this.#colors.forEach((_, i) => {
+      this.#updateChit(i);
+    });
+  }
+
+  #syncDisabled() {
+    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    this.#pickers.forEach((fp) => {
+      if (disabled) fp.setAttribute("disabled", "");
+      else fp.removeAttribute("disabled");
+    });
+    const addBtn = this.querySelector(".palette-add-btn");
+    if (addBtn) {
+      if (disabled) addBtn.setAttribute("disabled", "");
+      else addBtn.removeAttribute("disabled");
+    }
+  }
+
+  #emitInput() {
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        detail: this.value,
+      }),
+    );
+  }
+
+  #emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        detail: this.value,
+      }),
+    );
+  }
+}
+customElements.define("fig-input-palette", FigInputPalette);
+
 /* Input Gradient */
 /**
  * A gradient-only fill input built on top of fig-fill-picker.
@@ -10075,6 +10358,7 @@ class FigFillPicker extends HTMLElement {
       this.#teardownColorAreaEvents();
       this.#teardownColorAreaEvents = null;
     }
+    if (this.#chit) this.#chit.removeAttribute("selected");
     if (this.#dialog) {
       this.#dialog.close();
       this.#dialog.remove();
@@ -10252,6 +10536,8 @@ class FigFillPicker extends HTMLElement {
     const gamutEl = this.#dialog.querySelector(".fig-fill-picker-gamut");
     if (gamutEl) gamutEl.value = this.#gamut;
 
+    if (this.#chit) this.#chit.setAttribute("selected", "true");
+
     this.#dialog.open = true;
 
     requestAnimationFrame(() => {
@@ -10406,9 +10692,17 @@ class FigFillPicker extends HTMLElement {
         this.#dialog.open = false;
       });
 
-    this.#dialog.addEventListener("close", () => {
+    const onDialogClose = () => {
+      if (this.#chit) this.#chit.removeAttribute("selected");
       this.#emitChange();
+    };
+    this.#dialog.addEventListener("close", onDialogClose);
+
+    const observer = new MutationObserver(() => {
+      const isOpen = this.#dialog.hasAttribute("open") && this.#dialog.getAttribute("open") !== "false";
+      if (!isOpen) onDialogClose();
     });
+    observer.observe(this.#dialog, { attributes: true, attributeFilter: ["open"] });
 
     // Initialize built-in tabs (skip any overridden by custom slots)
     const builtinInits = {
@@ -13059,6 +13353,7 @@ class FigHandle extends HTMLElement {
     this.#syncDrag();
     this.addEventListener("click", this.#handleSelect);
     document.addEventListener("pointerdown", this.#handleDeselect);
+    document.addEventListener("keydown", this.#handleKeyDown);
     const initial = this.getAttribute("value");
     if (initial) this.#applyValue(initial);
     if (this.#hasControlMode && !this.#isGhost) this.#showColorTip();
@@ -13069,6 +13364,7 @@ class FigHandle extends HTMLElement {
     this.#hideColorTip();
     this.removeEventListener("click", this.#handleSelect);
     document.removeEventListener("pointerdown", this.#handleDeselect);
+    document.removeEventListener("keydown", this.#handleKeyDown);
   }
 
   select() {
@@ -13098,6 +13394,15 @@ class FigHandle extends HTMLElement {
     this.deselect();
   };
 
+  #handleKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    if (!this.hasAttribute("selected")) return;
+    if (this.getAttribute("type") !== "color") return;
+    if (this.#colorTip) return;
+    e.preventDefault();
+    this.#showColorTip();
+  };
+
   attributeChangedCallback(name, _old, value) {
     if (name === "color") {
       if (!value || value === "false" || value === "true") {

package/package.json

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