@rogieking/figui3 3.14.0 → 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 {
@@ -3205,19 +3171,90 @@ fig-input-gradient {
       pointer-events: auto;
       cursor: default;
 
-      &.dragging {
-        fig-color-tip {
-          display: none;
+      &:hover {
+        z-index: 5;
+      }
+    }
+  }
+}
+
+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;
         }
       }
+    }
+  }
 
-      &:hover {
-        z-index: 5;
+  &[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;
 
@@ -4855,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);
@@ -4866,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;
@@ -4881,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

@@ -591,6 +591,7 @@ class FigTooltip extends HTMLElement {
     this.#stopObserving();
     if (this.popup) {
       this.popup.remove();
+      this.popup = null;
     }
     // Remove the click outside listener if it was added
     if (this.action === "click") {
@@ -4520,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"
@@ -4757,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() {
@@ -4808,6 +4810,7 @@ class FigInputColor extends HTMLElement {
         // Picker type change requires re-render
         break;
       case "alpha":
+      case "text":
         if (this.isConnected) this.#buildUI();
         break;
     }
@@ -5682,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.
@@ -5694,6 +5978,7 @@ class FigInputGradient extends HTMLElement {
   #chit;
   #track;
   #handleDragging = false;
+  #arrowTooltipTimer = null;
   #colorObserver = null;
   #gradient = {
     type: "linear",
@@ -5725,17 +6010,67 @@ class FigInputGradient extends HTMLElement {
   }
 
   #onKeyDown = (e) => {
-    if (e.key !== "Delete" && e.key !== "Backspace") return;
     const active = document.activeElement;
-    if (
+    const isTyping =
       active &&
       (active.tagName === "INPUT" ||
         active.tagName === "TEXTAREA" ||
-        active.isContentEditable)
-    )
+        active.isContentEditable);
+    if (!this.#track) return;
+
+    if (e.key === "Tab" && !isTyping) {
+      const selected = this.#track.querySelector(
+        "fig-handle[selected]:not(.fig-input-gradient-ghost)",
+      );
+      if (!selected) return;
+      e.preventDefault();
+      const handles = [
+        ...this.#track.querySelectorAll(
+          "fig-handle:not(.fig-input-gradient-ghost)",
+        ),
+      ];
+      const curIdx = handles.indexOf(selected);
+      const next = e.shiftKey
+        ? (curIdx - 1 + handles.length) % handles.length
+        : (curIdx + 1) % handles.length;
+      selected.deselect();
+      handles[next].select();
       return;
+    }
+
+    if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && !isTyping) {
+      const selected = this.#track.querySelector(
+        "fig-handle[selected]:not(.fig-input-gradient-ghost)",
+      );
+      if (!selected) return;
+      const idx = parseInt(selected.dataset.stopIndex, 10);
+      if (isNaN(idx) || !this.#gradient.stops[idx]) return;
+      e.preventDefault();
+      const delta = (e.key === "ArrowRight" ? 1 : -1) * (e.shiftKey ? 10 : 1);
+      const stop = this.#gradient.stops[idx];
+      stop.position = Math.max(0, Math.min(100, stop.position + delta));
+      selected.setAttribute("value", `${stop.position}% 50%`);
+      const tip = selected.closest("fig-tooltip");
+      if (tip) {
+        tip.text = `${Math.round(stop.position)}%`;
+        tip.setAttribute("show", "true");
+        tip.showPopup();
+        selected.hideColorTip();
+        clearTimeout(this.#arrowTooltipTimer);
+        this.#arrowTooltipTimer = setTimeout(() => {
+          tip.removeAttribute("show");
+          selected.showColorTip();
+        }, 600);
+      }
+      this.#syncChit();
+      this.#emitInput();
+      this.#emitChange();
+      return;
+    }
+
+    if (e.key !== "Delete" && e.key !== "Backspace") return;
+    if (isTyping) return;
     if (this.#gradient.stops.length <= 2) return;
-    if (!this.#track) return;
     const selected = this.#track.querySelector(
       "fig-handle[selected]:not(.fig-input-gradient-ghost)",
     );
@@ -6072,7 +6407,10 @@ class FigInputGradient extends HTMLElement {
       const tooltip = handle.closest("fig-tooltip");
       if (tooltip) {
         tooltip.text = `${Math.round(position)}%`;
-        if (!tooltip.hasAttribute("show")) tooltip.setAttribute("show", "true");
+        if (!tooltip.hasAttribute("show")) {
+          tooltip.setAttribute("show", "true");
+          handle.hideColorTip();
+        }
       }
       this.#syncChit();
       this.#emitInput();
@@ -6085,6 +6423,7 @@ class FigInputGradient extends HTMLElement {
       handle.style.zIndex = "";
       const tooltip = handle.closest("fig-tooltip");
       if (tooltip) tooltip.removeAttribute("show");
+      handle.showColorTip();
       const idx = parseInt(handle.dataset.stopIndex, 10);
       if (isNaN(idx) || !this.#gradient.stops[idx]) return;
       const px = e.detail?.px ?? 0;
@@ -6104,17 +6443,8 @@ class FigInputGradient extends HTMLElement {
       this.#syncStopIndices();
       this.#syncChit();
       this.#emitChange();
-      const swallow = (evt) => {
-        evt.stopPropagation();
-        evt.preventDefault();
-      };
-      this.#track.addEventListener("click", swallow, {
-        capture: true,
-        once: true,
-      });
       requestAnimationFrame(() => {
         this.#handleDragging = false;
-        this.#track.removeEventListener("click", swallow, { capture: true });
       });
     });
 
@@ -10028,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();
@@ -10205,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(() => {
@@ -10359,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 = {
@@ -13012,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();
@@ -13022,25 +13364,43 @@ class FigHandle extends HTMLElement {
     this.#hideColorTip();
     this.removeEventListener("click", this.#handleSelect);
     document.removeEventListener("pointerdown", this.#handleDeselect);
+    document.removeEventListener("keydown", this.#handleKeyDown);
   }
 
-  #handleSelect = (e) => {
+  select() {
     if (this.hasAttribute("disabled")) return;
+    this.setAttribute("selected", "");
+    if (this.getAttribute("type") === "color") this.#showColorTip();
+  }
+
+  deselect() {
+    this.removeAttribute("selected");
+    this.#hideColorTip();
+  }
+
+  #handleSelect = (e) => {
     if (this.#hasControlMode) return;
     if (this.#didDrag) {
       this.#didDrag = false;
       return;
     }
-    this.setAttribute("selected", "");
-    if (this.getAttribute("type") === "color") this.#showColorTip();
+    this.select();
   };
 
   #handleDeselect = (e) => {
     if (this.#hasControlMode) return;
     if (this.contains(e.target)) return;
     if (this.#colorTip && e.target.closest?.("dialog, [popover]")) return;
-    this.removeAttribute("selected");
-    this.#hideColorTip();
+    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) {
@@ -13144,6 +13504,7 @@ class FigHandle extends HTMLElement {
       if (!this.#didDrag) {
         this.classList.add("dragging");
         this.style.cursor = "grabbing";
+        if (!this.hasAttribute("selected")) this.select();
       }
       this.#didDrag = true;
       clampAndApply(e.clientX, e.clientY, e.shiftKey);
@@ -13191,6 +13552,19 @@ class FigHandle extends HTMLElement {
     window.addEventListener("pointerup", onUp);
   }
 
+  showColorTip() {
+    if (this.#colorTip) {
+      this.#colorTip.style.display = "";
+      return;
+    }
+    this.#showColorTip();
+  }
+
+  hideColorTip() {
+    if (!this.#colorTip) return;
+    this.#colorTip.style.display = "none";
+  }
+
   #showColorTip() {
     if (this.#colorTip) return;
     const tip = document.createElement("fig-color-tip");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "3.14.0",
+  "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",