@rogieking/figui3 4.13.1 → 4.15.3

package/fig.js

@@ -16,6 +16,15 @@ function figIsWebKitOrIOSBrowser() {
   return isIOSBrowser || isDesktopWebKit;
 }
 
+/** @param {string} name @param {{ size?: string, className?: string }} [options] */
+function createFigIcon(name, options = {}) {
+  const icon = document.createElement("fig-icon");
+  if (name) icon.setAttribute("name", name);
+  if (options.size) icon.setAttribute("size", options.size);
+  if (options.className) icon.className = options.className;
+  return icon;
+}
+
 function figSupportsCustomizedBuiltIns() {
   if (
     typeof window === "undefined" ||
@@ -1234,10 +1243,7 @@ class FigDialog extends HTMLDialogElement {
     btn.setAttribute("variant", "ghost");
     btn.setAttribute("icon", "");
     btn.setAttribute("close-dialog", "");
-    const icon = document.createElement("span");
-    icon.className = "fig-mask-icon";
-    icon.style.setProperty("--icon", "var(--icon-close)");
-    btn.appendChild(icon);
+    btn.appendChild(createFigIcon("close"));
     tooltip.appendChild(btn);
     header.appendChild(h3);
     header.appendChild(tooltip);
@@ -1778,6 +1784,10 @@ class FigPopup extends HTMLDialogElement {
       this.hasAttribute("popover") &&
       typeof this.showPopover === "function" &&
       !this.matches?.(":popover-open");
+    const positionBeforeReveal = this.shouldAutoReposition();
+    if (positionBeforeReveal) {
+      this.style.visibility = "hidden";
+    }
     if (usePopover) {
       try {
         this.showPopover();
@@ -1792,6 +1802,10 @@ class FigPopup extends HTMLDialogElement {
         // Ignore when dialog cannot be shown yet.
       }
     }
+    if (positionBeforeReveal && (this.matches?.(":open") || this.matches?.(":popover-open"))) {
+      this.positionPopup();
+      this.style.visibility = "";
+    }
 
     this.setupObservers();
     document.addEventListener(
@@ -1811,6 +1825,7 @@ class FigPopup extends HTMLDialogElement {
     const anchor = this.resolveAnchor();
     if (anchor?.classList) anchor.classList.remove("has-popup-open");
 
+    this.style.visibility = "";
     this._isPopupActive = false;
     this._wasDragged = false;
     this.teardownObservers();
@@ -1831,7 +1846,10 @@ class FigPopup extends HTMLDialogElement {
         // Ignore.
       }
     }
-    if (super.open) {
+  // Use :open, not super.open — the custom open getter reads the attribute
+  // removed just before hidePopup(), so super.open can be false while the
+  // native dialog is still open and no "close" event fires.
+    if (this.matches?.(":open")) {
       try {
         this.close();
       } catch (e) {
@@ -2478,7 +2496,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   positionPopup() {
-    if (!this.open || !super.open) return;
+    if (!this.open || !this.matches?.(":open")) return;
 
     const popupRect = this.getBoundingClientRect();
     const offset = this.parseOffset();
@@ -4907,8 +4925,10 @@ class FigField extends HTMLElement {
       this.#toggleable = !!(this.input && "open" in this.input);
 
       if (this.#toggleable && this.label) {
-        this.#chevron = document.createElement("span");
-        this.#chevron.className = "fig-mask-icon fig-field-chevron";
+        this.#chevron = createFigIcon("chevron", {
+          size: "small",
+          className: "fig-field-chevron",
+        });
         this.insertBefore(this.#chevron, this.label);
 
         this.#boundToggle = (e) => {
@@ -5115,6 +5135,14 @@ class FigInputColor extends HTMLElement {
       // Setup swatch (native picker)
       if (this.#swatch) {
         this.#swatch.disabled = this.hasAttribute("disabled");
+        const swatchInput = this.#swatch.querySelector('input[type="color"]');
+        if (this.#textInput || this.hasAttribute("swatch-disabled")) {
+          swatchInput?.setAttribute("tabindex", "-1");
+        }
+        if (this.hasAttribute("swatch-disabled")) {
+          swatchInput?.setAttribute("disabled", "");
+          if (swatchInput) swatchInput.style.pointerEvents = "none";
+        }
         this.#swatch.addEventListener("input", this.#handleInput.bind(this));
       }
 
@@ -5232,7 +5260,11 @@ class FigInputColor extends HTMLElement {
   }
 
   focus() {
-    this.#swatch.focus();
+    if (this.#textInput) {
+      this.#textInput.focus();
+      return;
+    }
+    this.#swatch?.focus();
   }
 
   #handleInput(event) {
@@ -6423,9 +6455,10 @@ 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.
+ * Manages an internal array of colors with optional add/remove 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 {boolean} fixed - When set (or `fixed="true"`), palette length is locked — no add or remove
  * @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)
@@ -6438,7 +6471,7 @@ class FigInputPalette extends HTMLElement {
   #renderRAF = null;
 
   static get observedAttributes() {
-    return ["value", "disabled", "min", "max", "open", "add"];
+    return ["value", "disabled", "min", "max", "open", "fixed"];
   }
 
   get open() {
@@ -6462,8 +6495,10 @@ class FigInputPalette extends HTMLElement {
     }
   }
 
-  get #showAdd() {
-    return !this.hasAttribute("add") || this.getAttribute("add") !== "false";
+  get #isFixed() {
+    return (
+      this.hasAttribute("fixed") && this.getAttribute("fixed") !== "false"
+    );
   }
 
   get #min() {
@@ -6508,7 +6543,7 @@ class FigInputPalette extends HTMLElement {
         break;
       case "min":
       case "max":
-      case "add":
+      case "fixed":
         this.#render();
         break;
       case "open":
@@ -6607,6 +6642,14 @@ class FigInputPalette extends HTMLElement {
 
     const inlineWrap = document.createElement("div");
     inlineWrap.className = "palette-colors-inline";
+    inlineWrap.addEventListener("click", () => {
+      if (
+        this.hasAttribute("disabled") &&
+        this.getAttribute("disabled") !== "false"
+      )
+        return;
+      this.open = true;
+    });
 
     const wrap = document.createElement("div");
     wrap.className = "palette-colors";
@@ -6618,13 +6661,15 @@ class FigInputPalette extends HTMLElement {
     inlineWrap.appendChild(wrap);
     this.appendChild(inlineWrap);
 
-    if (this.#showAdd) this.#createAddButton(disabled, this);
+    if (!this.#isFixed) this.#createAddButton(disabled, this);
 
     const expandedWrap = document.createElement("div");
     expandedWrap.className = "palette-colors-expanded";
     this.#colors.forEach((entry, i) => {
       expandedWrap.appendChild(this.#createPicker(entry, i, disabled));
-      expandedWrap.appendChild(this.#createRemoveButton(i, disabled));
+      if (!this.#isFixed) {
+        expandedWrap.appendChild(this.#createRemoveButton(i, disabled));
+      }
     });
     this.appendChild(expandedWrap);
   }
@@ -6639,14 +6684,13 @@ class FigInputPalette extends HTMLElement {
         : entry.color;
     const ic = document.createElement("fig-input-color");
     ic.setAttribute("value", hexAlpha);
-    ic.setAttribute("picker", "figma");
-    ic.setAttribute("picker-anchor", "self");
     if (inline) {
       ic.setAttribute("text", "false");
       ic.setAttribute("alpha", "true");
+      ic.setAttribute("swatch-disabled", "");
     } else {
       ic.setAttribute("text", "true");
-      ic.setAttribute("alpha", "false");
+      ic.setAttribute("alpha", this.#isFixed ? "true" : "false");
       ic.setAttribute("full", "");
     }
     if (disabled) ic.setAttribute("disabled", "");
@@ -6696,15 +6740,19 @@ class FigInputPalette extends HTMLElement {
     btn.setAttribute("aria-label", "Remove color");
     btn.className = "palette-remove-btn";
     if (disabled || this.#colors.length <= this.#min) btn.setAttribute("disabled", "");
-    btn.innerHTML = `<span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>`;
+    btn.appendChild(createFigIcon("minus"));
     btn.addEventListener("click", () => {
       if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
       this.#removeColor(index);
     });
-    return btn;
+    const tooltip = document.createElement("fig-tooltip");
+    tooltip.setAttribute("text", "Remove color");
+    tooltip.appendChild(btn);
+    return tooltip;
   }
 
   #removeColor(index) {
+    if (this.#isFixed) return;
     if (index < 0 || index >= this.#colors.length) return;
     if (this.#colors.length <= this.#min) return;
     this.#colors.splice(index, 1);
@@ -6722,7 +6770,7 @@ class FigInputPalette extends HTMLElement {
     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.appendChild(createFigIcon("add"));
     addBtn.addEventListener("click", () => {
       if (
         this.hasAttribute("disabled") &&
@@ -6730,6 +6778,7 @@ class FigInputPalette extends HTMLElement {
       )
         return;
       if (this.#colors.length >= this.#max) return;
+      this.open = true;
       this.#addColor({ color: "#D9D9D9", alpha: 1 });
     });
     const tooltip = document.createElement("fig-tooltip");
@@ -6739,6 +6788,7 @@ class FigInputPalette extends HTMLElement {
   }
 
   #addColor(entry) {
+    if (this.#isFixed) return;
     this.#colors.push(entry);
     const disabled =
       this.hasAttribute("disabled") &&
@@ -6762,6 +6812,7 @@ class FigInputPalette extends HTMLElement {
       const addBtn = this.querySelector(".palette-add-btn");
       if (addBtn) addBtn.setAttribute("disabled", "");
     }
+    this.#syncRemoveButtons(disabled);
     this.#emitChange();
   }
 
@@ -6801,9 +6852,18 @@ class FigInputPalette extends HTMLElement {
     });
     const addBtn = this.querySelector(".palette-add-btn");
     if (addBtn) {
-      if (disabled) addBtn.setAttribute("disabled", "");
+      if (disabled || this.#colors.length >= this.#max) addBtn.setAttribute("disabled", "");
       else addBtn.removeAttribute("disabled");
     }
+    this.#syncRemoveButtons(disabled);
+  }
+
+  #syncRemoveButtons(disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") {
+    const shouldDisable = disabled || this.#colors.length <= this.#min;
+    this.querySelectorAll(".palette-remove-btn").forEach((btn) => {
+      if (shouldDisable) btn.setAttribute("disabled", "");
+      else btn.removeAttribute("disabled");
+    });
   }
 
   #emitInput() {
@@ -7025,7 +7085,7 @@ class FigInputGradient extends HTMLElement {
     return this.#gradient.stops
       .map(
         (stop, i) =>
-          `<fig-tooltip action="manual" text="${Math.round(stop.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color="${this.#stopColorCSS(stop)}" value="${stop.position}% 50%" hit-area="4" data-stop-index="${i}"${disabled ? " disabled" : ""}></fig-handle></fig-tooltip>`,
+          `<fig-tooltip action="manual" text="${Math.round(stop.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color-tip color="${this.#stopColorCSS(stop)}" value="${stop.position}% 50%" hit-area="4" data-stop-index="${i}"${disabled ? " disabled" : ""}></fig-handle></fig-tooltip>`,
       )
       .join("");
   }
@@ -7106,6 +7166,7 @@ class FigInputGradient extends HTMLElement {
     const ghost = document.createElement("fig-handle");
     ghost.classList.add("fig-input-gradient-ghost");
     ghost.setAttribute("type", "color");
+    ghost.setAttribute("color-tip", "");
     ghost.setAttribute("control", "add");
     ghost.style.position = "absolute";
     ghost.style.top = "50%";
@@ -9024,10 +9085,9 @@ class FigMediaControls extends HTMLElement {
     btn.setAttribute("size", "small");
     btn.setAttribute("icon", "true");
     btn.setAttribute("aria-label", "Play");
-    const icon = document.createElement("span");
-    icon.className = "fig-mask-icon fig-media-controls-play-icon";
-    icon.style.setProperty("--icon", "var(--icon-play)");
-    icon.style.setProperty("--size", "1.5rem");
+    const icon = createFigIcon("play", {
+      className: "fig-media-controls-play-icon",
+    });
     btn.append(icon);
     tooltip.append(btn);
     btn.addEventListener("click", (e) => {
@@ -9090,10 +9150,7 @@ class FigMediaControls extends HTMLElement {
     this.#playTooltip?.setAttribute("text", playing ? "Pause" : "Play");
     const icon = this.#playBtn.querySelector(".fig-media-controls-play-icon");
     if (icon) {
-      icon.style.setProperty(
-        "--icon",
-        playing ? "var(--icon-pause)" : "var(--icon-play)",
-      );
+      icon.setAttribute("name", playing ? "pause" : "play");
     }
   }
 
@@ -9338,7 +9395,7 @@ class FigInputFile extends HTMLElement {
       this.#clearBtn.setAttribute("icon", "true");
       this.#clearBtn.className = "fig-input-file-clear";
       if (disabled) this.#clearBtn.setAttribute("disabled", "");
-      this.#clearBtn.innerHTML = `<span class="fig-mask-icon" style="--icon: var(--icon-minus);"></span>`;
+      this.#clearBtn.replaceChildren(createFigIcon("minus"));
       this.#clearBtn.addEventListener("click", this.#onClear);
       clearTooltip.appendChild(this.#clearBtn);
       this.appendChild(clearTooltip);
@@ -11194,7 +11251,7 @@ class FigInputJoystick extends HTMLElement {
             </div>
             <fig-tooltip text="Reset">
               <fig-button variant="ghost" icon="true" class="fig-joystick-reset" aria-label="Reset to default">
-                <span class="fig-mask-icon" style="--icon: var(--icon-reset)"></span>
+                <fig-icon name="reset" size="small"></fig-icon>
               </fig-button>
             </fig-tooltip>
           </div>
@@ -11709,8 +11766,10 @@ class FigGroup extends HTMLElement {
 
     if (isCollapsible) {
       if (!h3.querySelector(".fig-group-chevron")) {
-        const chevron = document.createElement("span");
-        chevron.className = "fig-mask-icon fig-group-chevron";
+        const chevron = createFigIcon("chevron", {
+          size: "small",
+          className: "fig-group-chevron",
+        });
         h3.prepend(chevron);
       }
       this.#chevron = h3.querySelector(".fig-group-chevron");
@@ -11752,7 +11811,71 @@ customElements.define("fig-footer", FigFooter);
 class FigSpinner extends HTMLElement {}
 customElements.define("fig-spinner", FigSpinner);
 
-class FigIcon extends HTMLElement {}
+/** @type {Record<string, string>} */
+const FIG_ICON_TOKENS = {
+  chevron: "--icon-16-chevron",
+  checkmark: "--icon-16-checkmark",
+  reset: "--icon-16-reset",
+  "arrow-left": "--icon-16-arrow-left",
+  steppers: "--icon-24-steppers",
+  eyedropper: "--icon-24-eyedropper",
+  add: "--icon-24-add",
+  minus: "--icon-24-minus",
+  back: "--icon-24-back",
+  forward: "--icon-24-forward",
+  close: "--icon-24-close",
+  rotate: "--icon-24-rotate",
+  swap: "--icon-24-swap",
+  play: "--icon-24-play",
+  pause: "--icon-24-pause",
+};
+
+function figIconCssVar(name) {
+  const token = name && FIG_ICON_TOKENS[name];
+  return token ? `var(${token})` : "";
+}
+
+/**
+ * Masked icon using design-token SVGs from :root.
+ * @attr {string} name - Icon name (chevron, add, close, …)
+ * @attr {'small'|'medium'} size - Display size; medium (default) uses --spacer-4, small uses --spacer-3
+ * @attr {string} color - Icon fill color (applied as background-color for the mask)
+ */
+class FigIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "color"];
+  }
+
+  connectedCallback() {
+    this.#sync();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) this.#sync();
+  }
+
+  #sync() {
+    const iconName = this.getAttribute("name");
+    const cssVar = figIconCssVar(iconName);
+    if (cssVar) this.style.setProperty("--icon", cssVar);
+    else this.style.removeProperty("--icon");
+
+    const size = this.getAttribute("size") || "medium";
+    if (size === "small") {
+      this.style.setProperty("--size", "var(--spacer-3)");
+    } else {
+      this.style.removeProperty("--size");
+    }
+
+    const color = this.getAttribute("color");
+    if (color) this.style.backgroundColor = color;
+    else this.style.removeProperty("background-color");
+
+    if (!this.hasAttribute("aria-hidden")) {
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+}
 customElements.define("fig-icon", FigIcon);
 
 class FigContent extends HTMLElement {}
@@ -12048,6 +12171,14 @@ class FigFillPicker extends HTMLElement {
     });
   }
 
+  open() {
+    this.#openDialog();
+  }
+
+  close() {
+    if (this.#dialog) this.#dialog.open = false;
+  }
+
   #createDialog() {
     // Collect slotted custom mode content before any DOM changes
     this.#customSlots = {};
@@ -12135,7 +12266,7 @@ class FigFillPicker extends HTMLElement {
         ${headerContent}
         ${gamutDropdown}
         <fig-button icon variant="ghost" class="fig-fill-picker-close">
-          <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+          <fig-icon name="close"></fig-icon>
         </fig-button>
       </fig-header>
       <fig-content>
@@ -12195,6 +12326,7 @@ class FigFillPicker extends HTMLElement {
     const onDialogClose = () => {
       if (this.#chit) this.#chit.removeAttribute("selected");
       this.#emitChange();
+      this.dispatchEvent(new CustomEvent("close"));
     };
     this.#dialog.addEventListener("close", onDialogClose);
 
@@ -12305,7 +12437,7 @@ class FigFillPicker extends HTMLElement {
         ></fig-handle>
       </fig-preview>
       <div class="fig-fill-picker-sliders">
-        <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button></fig-tooltip>
+        <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><fig-icon name="eyedropper"></fig-icon></fig-button></fig-tooltip>
         <fig-slider type="hue" variant="neue" min="0" max="360" value="${
           this.#color.h
         }"></fig-slider>
@@ -12821,7 +12953,7 @@ class FigFillPicker extends HTMLElement {
         </div>
         <fig-tooltip text="Flip gradient">
           <fig-button icon variant="ghost" class="fig-fill-picker-gradient-flip">
-            <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
+            <fig-icon name="swap"></fig-icon>
           </fig-button>
         </fig-tooltip>
       </fig-field>
@@ -12853,7 +12985,7 @@ class FigFillPicker extends HTMLElement {
         <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
           <span>Stops</span>
           <fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" title="Add stop">
-            <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
+            <fig-icon name="add"></fig-icon>
           </fig-button>
         </fig-header>
         <div class="fig-fill-picker-gradient-stops-list"></div>
@@ -13090,7 +13222,7 @@ class FigFillPicker extends HTMLElement {
         <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${
           this.#gradient.stops.length <= 2 ? "disabled" : ""
         }>
-          <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
+          <fig-icon name="minus"></fig-icon>
         </fig-button>
       </fig-field>
     `,
@@ -14004,8 +14136,8 @@ class FigColorTip extends HTMLElement {
   #render() {
     const mode = this.#controlMode;
     if (mode === "add" || mode === "remove") {
-      const icon = mode === "add" ? "var(--icon-add)" : "var(--icon-minus)";
-      this.innerHTML = `<fig-button icon variant="ghost"><span class="fig-mask-icon" style="--icon: ${icon}"></span></fig-button>`;
+      const iconName = mode === "add" ? "add" : "minus";
+      this.innerHTML = `<fig-button icon variant="ghost"><fig-icon name="${iconName}"></fig-icon></fig-button>`;
       this.#fillPicker = null;
       this.#chit = null;
       this.addEventListener("click", this.#handleControlClick);
@@ -14758,11 +14890,10 @@ class FigChooser extends HTMLElement {
     if (this.#navStart) return;
 
     const makeChevron = () => {
-      const icon = document.createElement("span");
-      icon.className = "fig-mask-icon fig-chooser-nav-chevron";
-      icon.style.setProperty("--icon", "var(--icon-chevron)");
-      icon.style.setProperty("--size", "1rem");
-      return icon;
+      return createFigIcon("chevron", {
+        size: "small",
+        className: "fig-chooser-nav-chevron",
+      });
     };
 
     this.#navStart = document.createElement("button");
@@ -14862,6 +14993,7 @@ class FigHandle extends HTMLElement {
     "value",
     "type",
     "control",
+    "color-tip",
     "hit-area",
     "hit-area-mode",
   ];
@@ -14871,6 +15003,7 @@ class FigHandle extends HTMLElement {
   #boundPointerDown = null;
   #applyingValue = false;
   #colorTip = null;
+  #directColorPicker = null;
   #hitAreaEl = null;
 
   get #controlMode() {
@@ -14881,6 +15014,14 @@ class FigHandle extends HTMLElement {
     return this.#controlMode === "add" || this.#controlMode === "remove";
   }
 
+  get #usesColorTip() {
+    return (
+      this.#hasControlMode ||
+      (this.hasAttribute("color-tip") &&
+        this.getAttribute("color-tip") !== "false")
+    );
+  }
+
   get #isGhost() {
     return this.classList.contains("fig-input-gradient-ghost");
   }
@@ -15087,7 +15228,6 @@ class FigHandle extends HTMLElement {
   }
 
   connectedCallback() {
-    if (!this.hasAttribute("type")) this.setAttribute("type", "canvas");
     this.#syncDrag();
     this.#syncHitArea();
     this.addEventListener("click", this.#handleSelect);
@@ -15101,6 +15241,7 @@ class FigHandle extends HTMLElement {
   disconnectedCallback() {
     this.#teardownDrag();
     this.#hideColorTip();
+    this.#removeDirectColorPicker();
     if (this.#hitAreaEl) {
       this.#hitAreaEl.remove();
       this.#hitAreaEl = null;
@@ -15113,7 +15254,7 @@ class FigHandle extends HTMLElement {
   select() {
     if (this.hasAttribute("disabled")) return;
     this.setAttribute("selected", "");
-    if (this.getAttribute("type") === "color" && !this.#isDragging)
+    if (this.getAttribute("type") === "color" && !this.#isDragging && this.#usesColorTip)
       this.#showColorTip();
   }
 
@@ -15128,23 +15269,30 @@ class FigHandle extends HTMLElement {
       this.#didDrag = false;
       return;
     }
+    if (this.getAttribute("type") === "color" && !this.#usesColorTip) {
+      this.#openDirectColorPicker();
+      return;
+    }
     this.select();
   };
 
   #handleDeselect = (e) => {
     if (this.#hasControlMode) return;
     if (this.contains(e.target)) return;
-    if (this.#colorTip && e.target.closest?.("dialog, [popover]")) return;
+    if ((this.#colorTip || this.#directColorPicker) && e.target.closest?.("dialog, [popover]")) return;
     this.deselect();
   };
 
   #handleKeyDown = (e) => {
-    if (e.key !== "Enter") return;
+    if (e.key !== "Enter" && e.key !== " ") return;
     if (!this.hasAttribute("selected")) return;
     if (this.getAttribute("type") !== "color") return;
-    if (this.#colorTip) return;
     e.preventDefault();
-    this.#showColorTip();
+    if (this.#usesColorTip) {
+      if (!this.#colorTip) this.#showColorTip();
+    } else {
+      this.#openDirectColorPicker();
+    }
   };
 
   attributeChangedCallback(name, _old, value) {
@@ -15157,6 +15305,7 @@ class FigHandle extends HTMLElement {
       if (this.#colorTip && value) {
         this.#colorTip.setAttribute("value", value);
       }
+      this.#syncDirectColorPickerValue();
     }
     if (name === "drag") this.#syncDrag();
     if (name === "hit-area") this.#syncHitArea();
@@ -15165,12 +15314,20 @@ class FigHandle extends HTMLElement {
     }
     if (name === "control") {
       if (this.#hasControlMode) {
+        this.#removeDirectColorPicker();
         this.#hideColorTip();
         this.#showColorTip();
       } else {
         this.#hideColorTip();
       }
     }
+    if (name === "color-tip") {
+      if (this.#usesColorTip) {
+        this.#removeDirectColorPicker();
+      } else {
+        this.#hideColorTip();
+      }
+    }
   }
 
   #syncDrag() {
@@ -15327,6 +15484,117 @@ class FigHandle extends HTMLElement {
     this.#colorTip.style.display = "none";
   }
 
+  #normalizeColorForPicker(rawValue = this.getAttribute("color")) {
+    const fallback = { color: "#D9D9D9", opacity: 100 };
+    const value = String(rawValue || "").trim();
+    if (!value) return fallback;
+
+    const normalizeHex = (hex) => {
+      const raw = hex.replace("#", "").trim();
+      if (raw.length === 3 || raw.length === 4) {
+        const [r, g, b, a] = raw;
+        return {
+          color: `#${r}${r}${g}${g}${b}${b}`.toUpperCase(),
+          opacity: a ? Math.round((parseInt(`${a}${a}`, 16) / 255) * 100) : 100,
+        };
+      }
+      if (raw.length === 6 || raw.length === 8) {
+        return {
+          color: `#${raw.slice(0, 6)}`.toUpperCase(),
+          opacity:
+            raw.length === 8
+              ? Math.round((parseInt(raw.slice(6, 8), 16) / 255) * 100)
+              : 100,
+        };
+      }
+      return fallback;
+    };
+
+    const rgbToHex = (r, g, b) => {
+      const toHex = (v) =>
+        Math.max(0, Math.min(255, Math.round(Number(v))))
+          .toString(16)
+          .padStart(2, "0");
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+    };
+
+    if (value.startsWith("#")) return normalizeHex(value);
+
+    try {
+      const { ctx } = figGetSharedCanvas(1, 1);
+      ctx.fillStyle = "#000000";
+      ctx.fillStyle = value;
+      const resolved = ctx.fillStyle;
+      if (resolved.startsWith("#")) return normalizeHex(resolved);
+      const rgb = resolved.match(
+        /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?/i,
+      );
+      if (rgb) {
+        return {
+          color: rgbToHex(rgb[1], rgb[2], rgb[3]),
+          opacity: rgb[4] !== undefined ? Math.round(parseFloat(rgb[4]) * 100) : 100,
+        };
+      }
+    } catch {
+      // Fall through to fallback.
+    }
+
+    return fallback;
+  }
+
+  #directColorPickerValue() {
+    const { color, opacity } = this.#normalizeColorForPicker();
+    return JSON.stringify(
+      opacity < 100 ? { type: "solid", color, opacity } : { type: "solid", color },
+    );
+  }
+
+  #syncDirectColorPickerValue() {
+    if (!this.#directColorPicker) return;
+    this.#directColorPicker.setAttribute("value", this.#directColorPickerValue());
+  }
+
+  #ensureDirectColorPicker() {
+    if (this.#directColorPicker) return this.#directColorPicker;
+
+    const picker = document.createElement("fig-fill-picker");
+    picker.setAttribute("mode", "solid");
+    picker.setAttribute("alpha", "true");
+    picker.setAttribute("value", this.#directColorPickerValue());
+    picker.anchorElement = this;
+
+    const trigger = document.createElement("span");
+    trigger.hidden = true;
+    picker.appendChild(trigger);
+
+    picker.addEventListener("input", this.#handleDirectColorPickerInput);
+    picker.addEventListener("change", this.#handleDirectColorPickerChange);
+    picker.addEventListener("close", this.#handleDirectColorPickerClose);
+    this.appendChild(picker);
+    this.#directColorPicker = picker;
+    return picker;
+  }
+
+  #openDirectColorPicker() {
+    if (this.hasAttribute("disabled")) return;
+    this.#hideColorTip();
+    const picker = this.#ensureDirectColorPicker();
+    this.setAttribute("selected", "");
+    this.#syncDirectColorPickerValue();
+    picker.open();
+  }
+
+  #removeDirectColorPicker() {
+    if (!this.#directColorPicker) return;
+    this.#directColorPicker.removeEventListener("input", this.#handleDirectColorPickerInput);
+    this.#directColorPicker.removeEventListener("change", this.#handleDirectColorPickerChange);
+    this.#directColorPicker.removeEventListener("close", this.#handleDirectColorPickerClose);
+    this.#directColorPicker.close();
+    this.#directColorPicker.remove();
+    this.#directColorPicker = null;
+    this.removeAttribute("selected");
+  }
+
   #showColorTip() {
     if (this.#colorTip) return;
     const tip = document.createElement("fig-color-tip");
@@ -15361,6 +15629,47 @@ class FigHandle extends HTMLElement {
     return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
   }
 
+  #detailFromPicker(detail) {
+    if (!detail?.color) return null;
+    const opacity =
+      detail.opacity !== undefined
+        ? detail.opacity
+        : detail.alpha !== undefined
+          ? Math.round(detail.alpha * 100)
+          : undefined;
+    return { color: detail.color, opacity };
+  }
+
+  #handleDirectColorPickerInput = (e) => {
+    e.stopPropagation();
+    const detail = this.#detailFromPicker(e.detail);
+    if (!detail) return;
+    this.setAttribute("color", this.#colorWithOpacity(detail.color, detail.opacity));
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        detail,
+      }),
+    );
+  };
+
+  #handleDirectColorPickerChange = (e) => {
+    e.stopPropagation();
+    const detail = this.#detailFromPicker(e.detail);
+    if (!detail) return;
+    this.setAttribute("color", this.#colorWithOpacity(detail.color, detail.opacity));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        detail,
+      }),
+    );
+  };
+
+  #handleDirectColorPickerClose = () => {
+    this.removeAttribute("selected");
+  };
+
   #handleColorTipInput = (e) => {
     e.stopPropagation();
     if (e.detail?.color) {
@@ -15455,7 +15764,7 @@ class FigMenu extends HTMLElement {
   #observer = null;
   #boundTriggerClick;
   #boundPopupClick;
-  #boundPopupKeydown;
+  #boundMenuKeydown;
   #boundPopupClose;
   #focusedIndex = -1;
 
@@ -15467,7 +15776,7 @@ class FigMenu extends HTMLElement {
     super();
     this.#boundTriggerClick = this.#handleTriggerClick.bind(this);
     this.#boundPopupClick = this.#handlePopupClick.bind(this);
-    this.#boundPopupKeydown = this.#handlePopupKeydown.bind(this);
+    this.#boundMenuKeydown = this.#handleMenuKeydown.bind(this);
     this.#boundPopupClose = this.#handlePopupClose.bind(this);
   }
 
@@ -15588,6 +15897,7 @@ class FigMenu extends HTMLElement {
   }
 
   #setupListeners() {
+    this.addEventListener("keydown", this.#boundMenuKeydown);
     if (this.#trigger) {
       this.#trigger.addEventListener("click", this.#boundTriggerClick);
       this.#trigger.setAttribute("aria-haspopup", "menu");
@@ -15595,17 +15905,16 @@ class FigMenu extends HTMLElement {
     }
     if (this.#popup) {
       this.#popup.addEventListener("click", this.#boundPopupClick);
-      this.#popup.addEventListener("keydown", this.#boundPopupKeydown);
     }
   }
 
   #teardownListeners() {
+    this.removeEventListener("keydown", this.#boundMenuKeydown);
     if (this.#trigger) {
       this.#trigger.removeEventListener("click", this.#boundTriggerClick);
     }
     if (this.#popup) {
       this.#popup.removeEventListener("click", this.#boundPopupClick);
-      this.#popup.removeEventListener("keydown", this.#boundPopupKeydown);
     }
   }
 
@@ -15640,6 +15949,27 @@ class FigMenu extends HTMLElement {
     return Array.from(this.#popup.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"));
   }
 
+  #syncFocusedIndex() {
+    const items = this.#getItems();
+    if (!items.length) {
+      this.#focusedIndex = -1;
+      return;
+    }
+    const active = document.activeElement;
+    const idx = items.findIndex(
+      (item) => item === active || item.contains(active),
+    );
+    this.#focusedIndex = idx >= 0 ? idx : -1;
+  }
+
+  #focusItemAt(index) {
+    const items = this.#getItems();
+    if (!items.length) return;
+    const clamped = Math.max(0, Math.min(index, items.length - 1));
+    this.#focusedIndex = clamped;
+    items[clamped].focus();
+  }
+
   #syncDisabled() {
     if (!this.#trigger) return;
     const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
@@ -15653,7 +15983,12 @@ class FigMenu extends HTMLElement {
   #handleTriggerClick(e) {
     if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
     e.stopPropagation();
-    if (this.open) {
+    const popupShowing = this.#popup?.matches?.(":open") ?? false;
+    if (this.open && !popupShowing) {
+      this.removeAttribute("open");
+    }
+    const effectiveOpen = this.open && popupShowing;
+    if (effectiveOpen) {
       this.open = false;
     } else {
       this.open = true;
@@ -15668,40 +16003,42 @@ class FigMenu extends HTMLElement {
     this.#selectItem(item);
   }
 
-  #handlePopupKeydown(e) {
+  #handleMenuKeydown(e) {
+    if (!this.open || !this.#popup?.matches?.(":open")) return;
+
     const items = this.#getItems();
     if (!items.length) return;
 
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        this.#focusedIndex = Math.min(this.#focusedIndex + 1, items.length - 1);
-        items[this.#focusedIndex]?.focus();
+        this.#syncFocusedIndex();
+        this.#focusItemAt(this.#focusedIndex + 1);
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        this.#focusedIndex = Math.max(this.#focusedIndex - 1, 0);
-        items[this.#focusedIndex]?.focus();
+        this.#syncFocusedIndex();
+        this.#focusItemAt(this.#focusedIndex - 1);
         break;
       }
       case "Home": {
         e.preventDefault();
-        this.#focusedIndex = 0;
-        items[0]?.focus();
+        this.#focusItemAt(0);
         break;
       }
       case "End": {
         e.preventDefault();
-        this.#focusedIndex = items.length - 1;
-        items[this.#focusedIndex]?.focus();
+        this.#focusItemAt(items.length - 1);
         break;
       }
       case "Enter":
       case " ": {
-        e.preventDefault();
+        this.#syncFocusedIndex();
         const focused = items[this.#focusedIndex];
-        if (focused) this.#selectItem(focused);
+        if (!focused) return;
+        e.preventDefault();
+        this.#selectItem(focused);
         break;
       }
     }
@@ -15736,10 +16073,10 @@ class FigMenu extends HTMLElement {
     if (this.#trigger) {
       this.#trigger.setAttribute("aria-expanded", "true");
     }
-    this.#focusedIndex = 0;
+    this.#focusedIndex = -1;
     requestAnimationFrame(() => {
-      const items = this.#getItems();
-      if (items.length) items[0].focus();
+      if (!this.#trigger?.matches?.(":focus-visible")) return;
+      this.#focusItemAt(0);
     });
   }