@rogieking/figui3 3.14.1 → 3.16.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] {
+  &[disabled]:not([disabled="false"]) {
     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;
@@ -1400,9 +1373,9 @@ fig-easing-curve {
   --easing-bezier-handle-radius: 5;
   --easing-spring-handle-radius: 5;
   --easing-handle-fill: var(--figma-color-border-strong);
-  --easing-duration-bar-width: 5;
+  --easing-duration-bar-width: 7;
   --easing-duration-bar-height: 16;
-  --easing-duration-bar-radius: 3;
+  --easing-duration-bar-radius: 4;
   --aspect-ratio: 1 / 1;
 
   width: 100%;
@@ -1465,17 +1438,6 @@ fig-easing-curve {
     overflow: visible;
     pointer-events: all;
     cursor: default;
-
-    fig-handle {
-      --width: calc(var(--easing-bezier-handle-radius) * 2px);
-      --height: calc(var(--easing-bezier-handle-radius) * 2px);
-      pointer-events: all;
-      cursor: default;
-    }
-
-    &:active fig-handle {
-      cursor: grabbing;
-    }
   }
   .fig-easing-curve-endpoint {
     fill: var(--easing-handle-fill);
@@ -2900,7 +2862,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;
@@ -3121,6 +3084,10 @@ fig-input-fill {
     outline: 1px solid var(--figma-color-border-selected) !important;
     outline-offset: -1px !important;
   }
+  &:hover {
+    outline: 1px solid var(--figma-color-border);
+    outline-offset: -1px !important;
+  }
 
   & > .input-combo > fig-chit:not(:only-child),
   & > .input-combo > fig-chit:not(:only-child) input,
@@ -3136,6 +3103,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 +3145,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 +3171,98 @@ fig-input-gradient {
   }
 }
 
+fig-input-palette {
+  display: inline-flex !important;
+  flex-direction: column;
+  gap: var(--spacer-2);
+  min-width: 0;
+
+  .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;
+  }
+  .palette-colors-inline {
+    display: inline-grid !important;
+    grid-template-columns: 1fr 24px;
+    grid-template-areas: "inputs button";
+    border-radius: var(--radius-medium);
+    background-color: var(--figma-color-bg-secondary);
+    width: 100%;
+
+    .palette-colors {
+      display: flex;
+      background-color: var(--figma-color-bg-secondary);
+      fig-input-color {
+        width: 100%;
+      }
+
+      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"]):not([edit="false"]) {
+    .palette-colors-expanded {
+      display: flex;
+    }
+  }
+  &[add="false"] {
+    .palette-colors-expanded,
+    .palette-colors-inline {
+      grid-template-areas: "inputs inputs";
+    }
+  }
+  .palette-colors-expanded {
+    display: none;
+    flex-direction: column;
+    overflow: visible;
+    border-radius: 0;
+    gap: var(--spacer-2);
+    width: 100%;
+
+    > 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;
+    }
+  }
+
+  &[expanded]:not([expanded="false"]) {
+  }
+}
+
+fig-field[direction="horizontal"]:has(> fig-input-palette) {
+  padding-right: var(--spacer-2);
+}
+
 fig-slider {
   display: flex;
 
@@ -4541,8 +4592,20 @@ fig-chooser {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  overflow: hidden auto;
+  overflow: visible auto;
   scrollbar-width: none;
+  scroll-snap-type: y mandatory;
+
+  > * {
+    scroll-snap-align: start;
+  }
+
+  &[padding="false"] {
+    gap: var(--spacer-2);
+    fig-choice {
+      --fig-choice-padding: 0px;
+    }
+  }
 
   &[overflow="scrollbar"] {
     scrollbar-width: thin;
@@ -4710,12 +4773,15 @@ fig-chooser {
 }
 
 fig-choice {
-  --fig-choice-selection-ring-width: 1px;
+  --fig-choice-selection-ring-width: 1.25px;
   --fig-choice-padding: var(--spacer-2);
+  --fig-choice-border-radius: calc(
+    var(--radius-medium) + var(--fig-choice-padding)
+  );
   display: flex;
   align-items: center;
   flex-direction: column;
-  border-radius: var(--radius-large);
+  border-radius: var(--fig-choice-border-radius);
   gap: var(--spacer-2);
   outline: none;
   border: 1px solid transparent;
@@ -4727,14 +4793,25 @@ fig-choice {
     background-color: var(--figma-color-bg-secondary);
   }
 
+  &[padding="false"] {
+    --fig-choice-padding: 0px;
+  }
+
   &[selected] {
-    background-color: var(--figma-color-bg-secondary);
-    & > fig-image {
-      border-radius: var(--radius-medium);
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--fig-choice-border-radius);
+      pointer-events: none;
+      z-index: 1;
+      box-shadow: inset 0 0 0 4px var(--figma-color-bg);
       outline: var(--fig-choice-selection-ring-width) solid
         var(--figma-color-border-selected);
-      outline-offset: 0;
+      outline-offset: calc(var(--fig-choice-selection-ring-width) * -1);
     }
+    background-color: var(--figma-color-bg-secondary);
   }
 
   &[disabled]:not([disabled="false"]),
@@ -4750,14 +4827,14 @@ fig-handle {
   --height: 0.875rem;
   --fill: var(--figma-color-bg-brand);
   --border-radius: 50%;
-  --ring-width: 1.25px;
-  --box-shadow:
-    inset 0 0 0 var(--ring-width) var(--handle-color),
-    0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
+  --ring-width: 0.125rem;
+  --box-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--elevation-100-canvas);
   --outline: none;
   --border: none;
 
-  display: inline-grid;
+  display: grid;
+  margin: 0;
+  padding: 0;
   place-items: center;
   width: var(--width);
   height: var(--height);
@@ -4770,8 +4847,8 @@ fig-handle {
   &::before {
     content: "";
     color-scheme: light only;
-    width: calc(var(--width) - 4px);
-    height: calc(var(--height) - 4px);
+    width: calc(var(--width) - var(--ring-width) * 2);
+    height: calc(var(--height) - var(--ring-width) * 2);
     background: var(--fill);
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
@@ -4779,8 +4856,8 @@ fig-handle {
   }
 
   &[size="small"] {
-    --width: 0.5625rem;
-    --height: 0.5625rem;
+    --width: 11px;
+    --height: 11px;
   }
 
   &[drag]:not([drag="false"]) {
@@ -4789,14 +4866,13 @@ fig-handle {
   }
   &:hover,
   &[selected]:not([selected="false"]) {
-    outline: var(--ring-width) solid var(--figma-color-border-selected);
+    outline: 1px solid var(--figma-color-border-selected);
     outline-offset: 0;
   }
 
   &[disabled]:not([disabled="false"]),
   &[aria-disabled="true"] {
     pointer-events: none;
-    opacity: 0.4;
     cursor: default;
   }
 
@@ -4806,7 +4882,7 @@ fig-handle {
 
     fig-color-tip {
       position: absolute;
-      bottom: calc(100% + 6px);
+      bottom: calc(100% + 2px);
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
@@ -4849,10 +4925,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 +4932,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 +4947,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

@@ -4519,13 +4519,16 @@ class FigInputColor extends HTMLElement {
     const hidePicker = this.picker === "false";
     const showAlpha = this.getAttribute("alpha") === "true";
     const fpAttrs = this.#buildFillPickerAttrs();
+    const disabled = this.#disabled;
+    const disabledAttr = disabled ? " disabled" : "";
 
     let html = ``;
-    if (this.getAttribute("text")) {
+    const showText = this.getAttribute("text") === "true";
+    if (showText) {
       let label = `<fig-input-text 
         type="text"
         placeholder="000000"
-        value="${this.hexOpaque.slice(1).toUpperCase()}">
+        value="${this.hexOpaque.slice(1).toUpperCase()}"${disabledAttr}>
       </fig-input-text>`;
       if (showAlpha) {
         label += `<fig-tooltip text="Opacity">
@@ -4534,7 +4537,7 @@ class FigInputColor extends HTMLElement {
                         min="0"
                         max="100"
                         value="${this.#alphaPercent}"
-                        units="%">
+                        units="%"${disabledAttr}>
                     </fig-input-number>
                 </fig-tooltip>`;
       }
@@ -4546,8 +4549,8 @@ class FigInputColor extends HTMLElement {
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.#alphaPercent
-            }}'></fig-fill-picker>`
-          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
+            }}'${disabledAttr}></fig-fill-picker>`
+          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-chit>`;
       }
 
       html = `<div class="input-combo">
@@ -4563,8 +4566,8 @@ class FigInputColor extends HTMLElement {
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.#alphaPercent
-            }}'></fig-fill-picker>`
-          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
+            }}'${disabledAttr}></fig-fill-picker>`
+          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-chit>`;
       }
     }
     this.innerHTML = html;
@@ -4758,7 +4761,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental", "alpha"];
+    return ["value", "style", "mode", "picker", "experimental", "alpha", "text", "disabled"];
   }
 
   get mode() {
@@ -4809,8 +4812,29 @@ class FigInputColor extends HTMLElement {
         // Picker type change requires re-render
         break;
       case "alpha":
+      case "text":
         if (this.isConnected) this.#buildUI();
         break;
+      case "disabled":
+        this.#syncDisabled();
+        break;
+    }
+  }
+
+  get #disabled() {
+    return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+  }
+
+  #syncDisabled() {
+    const disabled = this.#disabled;
+    for (const child of [this.#swatch, this.#textInput, this.#alphaInput]) {
+      if (!child) continue;
+      if (disabled) child.setAttribute("disabled", "");
+      else child.removeAttribute("disabled");
+    }
+    if (this.#fillPicker) {
+      if (disabled) this.#fillPicker.setAttribute("disabled", "");
+      else this.#fillPicker.removeAttribute("disabled");
     }
   }
 
@@ -5130,6 +5154,15 @@ class FigInputFill extends HTMLElement {
       .join(" ");
   }
 
+  #syncDisabled() {
+    const disabled = this.hasAttribute("disabled");
+    for (const child of [this.#fillPicker, this.#opacityInput, this.#hexInput]) {
+      if (!child) continue;
+      if (disabled) child.setAttribute("disabled", "");
+      else child.removeAttribute("disabled");
+    }
+  }
+
   #render() {
     const disabled = this.hasAttribute("disabled");
     const fillPickerValue = JSON.stringify(this.value);
@@ -5662,10 +5695,7 @@ class FigInputFill extends HTMLElement {
         }
         break;
       case "disabled":
-        // Re-render to update disabled state
-        if (this.#fillPicker) {
-          this.#render();
-        }
+        this.#syncDisabled();
         break;
       case "mode":
       case "experimental":
@@ -5683,6 +5713,325 @@ 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 = [];
+  #inlinePickers = [];
+  #expandedPickers = [];
+  #renderRAF = null;
+
+  static get observedAttributes() {
+    return ["value", "disabled", "min", "max", "expanded", "add"];
+  }
+
+  get #expanded() {
+    return this.hasAttribute("expanded") && this.getAttribute("expanded") !== "false";
+  }
+
+  get #showAdd() {
+    return !this.hasAttribute("add") || this.getAttribute("add") !== "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.#inlinePickers = [];
+    this.#expandedPickers = [];
+  }
+
+  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":
+      case "add":
+        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.#inlinePickers = [];
+    this.#expandedPickers = [];
+
+    const inlineWrap = document.createElement("div");
+    inlineWrap.className = "palette-colors-inline";
+
+    const wrap = document.createElement("div");
+    wrap.className = "palette-colors";
+    this.#colors.forEach((entry, i) => {
+      wrap.appendChild(this.#createPicker(entry, i, disabled, { inline: true }));
+    });
+    inlineWrap.appendChild(wrap);
+
+    if (this.#showAdd) this.#createAddButton(disabled, inlineWrap);
+    this.appendChild(inlineWrap);
+
+    const expandedWrap = document.createElement("div");
+    expandedWrap.className = "palette-colors-expanded";
+    this.#colors.forEach((entry, i) => {
+      expandedWrap.appendChild(this.#createPicker(entry, i, disabled));
+    });
+    this.appendChild(expandedWrap);
+  }
+
+  #createPicker(entry, index, disabled, { inline = false } = {}) {
+    const hexAlpha = entry.alpha < 1
+      ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
+      : 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");
+    } else {
+      ic.setAttribute("text", "true");
+      ic.setAttribute("alpha", "true");
+      ic.setAttribute("full", "");
+    }
+    if (disabled) ic.setAttribute("disabled", "");
+
+    const siblingList = inline ? this.#expandedPickers : this.#inlinePickers;
+
+    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,
+      };
+      const sibling = siblingList[index];
+      if (sibling) {
+        const entry = this.#colors[index];
+        const hex = entry.alpha < 1
+          ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
+          : entry.color;
+        sibling.setAttribute("value", hex);
+      }
+    };
+
+    ic.addEventListener("input", (e) => {
+      updateFromPicker(e);
+      this.#emitInput();
+    });
+
+    ic.addEventListener("change", (e) => {
+      updateFromPicker(e);
+      this.#emitChange();
+    });
+
+    if (inline) this.#inlinePickers.push(ic);
+    else this.#expandedPickers.push(ic);
+    return ic;
+  }
+
+  #createAddButton(disabled, parent = this) {
+    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);
+    parent.appendChild(tooltip);
+  }
+
+  #addColor(entry) {
+    this.#colors.push(entry);
+    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const index = this.#colors.length - 1;
+
+    const inlineIc = this.#createPicker(entry, index, disabled, { inline: true });
+    const wrap = this.querySelector(".palette-colors");
+    if (wrap) wrap.appendChild(inlineIc);
+
+    const expandedIc = this.#createPicker(entry, index, disabled);
+    const expandedWrap = this.querySelector(".palette-colors-expanded");
+    if (expandedWrap) expandedWrap.appendChild(expandedIc);
+
+    if (this.#colors.length >= this.#max) {
+      const addBtn = this.querySelector(".palette-add-btn");
+      if (addBtn) addBtn.setAttribute("disabled", "");
+    }
+    this.#emitChange();
+  }
+
+  #updateChit(index) {
+    const entry = this.#colors[index];
+    if (!entry) return;
+    const hexAlpha = entry.alpha < 1
+      ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
+      : entry.color;
+    const inl = this.#inlinePickers[index];
+    if (inl) inl.setAttribute("value", hexAlpha);
+    const exp = this.#expandedPickers[index];
+    if (exp) exp.setAttribute("value", hexAlpha);
+  }
+
+  #syncPickers() {
+    if (this.#inlinePickers.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.#inlinePickers, ...this.#expandedPickers].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.
@@ -5692,6 +6041,7 @@ customElements.define("fig-input-fill", FigInputFill);
  * @fires change - When the gradient value is committed
  */
 class FigInputGradient extends HTMLElement {
+  static SHIFT_SNAP = 5;
   #chit;
   #track;
   #handleDragging = false;
@@ -5763,7 +6113,7 @@ class FigInputGradient extends HTMLElement {
       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 delta = (e.key === "ArrowRight" ? 1 : -1) * (e.shiftKey ? FigInputGradient.SHIFT_SNAP : 1);
       const stop = this.#gradient.stops[idx];
       stop.position = Math.max(0, Math.min(100, stop.position + delta));
       selected.setAttribute("value", `${stop.position}% 50%`);
@@ -5959,15 +6309,15 @@ class FigInputGradient extends HTMLElement {
     this.#syncChit();
     this.#emitInput();
     this.#emitChange();
-    this.#track?.querySelectorAll("fig-handle[selected]").forEach((h) => {
-      h.removeAttribute("selected");
-    });
   }
 
   #onTrackDblClick = (e) => {
     if (!this.#track) return;
     if (!e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) return;
     this.#distributeStops();
+    this.#track.querySelectorAll("fig-handle[selected]").forEach((h) => {
+      h.removeAttribute("selected");
+    });
   };
 
   #onTrackClick = (e) => {
@@ -5975,7 +6325,15 @@ class FigInputGradient extends HTMLElement {
     if (this.#handleDragging) return;
     if (e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) {
       if (e.shiftKey) {
+        const clickedHandle = e.target.closest("fig-handle");
+        const stopIdx = parseInt(clickedHandle?.dataset.stopIndex, 10);
         this.#distributeStops();
+        if (!isNaN(stopIdx)) {
+          this.#track.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((h) => {
+            if (parseInt(h.dataset.stopIndex, 10) === stopIdx) h.select();
+            else h.deselect();
+          });
+        }
         e.stopPropagation();
       }
       return;
@@ -6024,6 +6382,7 @@ class FigInputGradient extends HTMLElement {
     for (let i = 0; i < stops.length; i++) {
       const h = handles[i];
       const stop = stops[i];
+      h.dataset.stopIndex = i;
       h.setAttribute("value", `${stop.position}% 50%`);
       h.setAttribute("color", stop.color);
       const tip = h.closest("fig-tooltip");
@@ -6104,7 +6463,7 @@ class FigInputGradient extends HTMLElement {
       let position = rawPosition;
       const trackW = this.#track.getBoundingClientRect().width;
       if (e.detail?.shiftKey) {
-        position = Math.round(position / 10) * 10;
+        position = Math.round(position / FigInputGradient.SHIFT_SNAP) * FigInputGradient.SHIFT_SNAP;
       } else {
         const snapPct = trackW > 0 ? (5 / trackW) * 100 : 0;
         for (let i = 0; i < this.#gradient.stops.length; i++) {
@@ -6232,10 +6591,24 @@ class FigInputGradient extends HTMLElement {
         this.#syncHandles();
         break;
       case "disabled":
-        this.#render();
+        this.#syncDisabled();
         break;
     }
   }
+
+  #syncDisabled() {
+    const disabled = this.hasAttribute("disabled");
+    if (this.#chit) {
+      if (disabled) this.#chit.setAttribute("disabled", "");
+      else this.#chit.removeAttribute("disabled");
+    }
+    if (this.#track) {
+      for (const handle of this.#track.querySelectorAll("fig-handle")) {
+        if (disabled) handle.setAttribute("disabled", "");
+        else handle.removeAttribute("disabled");
+      }
+    }
+  }
 }
 customElements.define("fig-input-gradient", FigInputGradient);
 
@@ -7214,11 +7587,10 @@ class FigEasingCurve extends HTMLElement {
   #bounds = null;
   #diagonal = null;
   #resizeObserver = null;
-  #bezierHandleRadius = 3.625;
+  #bezierHandleRadius = 5;
   #bezierEndpointRadius = 2;
-  #springHandleRadius = 3.625;
-  #durationBarWidth = 6;
-  #durationBarHeight = 16;
+  #durationBarWidth = 10;
+  #durationBarHeight = 10;
   #durationBarRadius = 3;
 
   static PRESETS = [
@@ -7535,6 +7907,7 @@ class FigEasingCurve extends HTMLElement {
     this.#syncMetricsFromCSS();
     this.innerHTML = this.#getInnerHTML();
     this.#cacheRefs();
+    this.#syncHandleSizes();
     this.#syncViewportSize();
     this.#updatePaths();
     this.#setupEvents();
@@ -7574,8 +7947,6 @@ class FigEasingCurve extends HTMLElement {
     const size = 200;
     const dropdown = this.#getDropdownHTML();
 
-    const hs = this.#bezierHandleRadius * 2;
-
     if (this.#mode === "spring") {
       const targetY = 40;
       const startY = 180;
@@ -7584,8 +7955,8 @@ class FigEasingCurve extends HTMLElement {
         <line class="fig-easing-curve-target" x1="0" y1="${targetY}" x2="${size}" y2="${targetY}"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="${startY}" x2="0" y2="${startY}"/>
         <path class="fig-easing-curve-path"/>
-        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="${hs}" height="${hs}"><fig-handle></fig-handle></foreignObject>
-        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="${this.#durationBarWidth}" height="${this.#durationBarHeight}"><fig-handle></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
       </svg></div>`;
     }
 
@@ -7597,8 +7968,8 @@ class FigEasingCurve extends HTMLElement {
       <path class="fig-easing-curve-path"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#bezierEndpointRadius}"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#bezierEndpointRadius}"/>
-      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="${hs}" height="${hs}"><fig-handle></fig-handle></foreignObject>
-      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="${hs}" height="${hs}"><fig-handle></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
     </svg></div>`;
   }
 
@@ -7610,26 +7981,10 @@ class FigEasingCurve extends HTMLElement {
   }
 
   #syncMetricsFromCSS() {
-    this.#bezierHandleRadius = this.#readCssNumber(
-      "--easing-bezier-handle-radius",
-      this.#bezierHandleRadius,
-    );
     this.#bezierEndpointRadius = this.#readCssNumber(
       "--easing-bezier-endpoint-radius",
       this.#bezierEndpointRadius,
     );
-    this.#springHandleRadius = this.#readCssNumber(
-      "--easing-spring-handle-radius",
-      this.#springHandleRadius,
-    );
-    this.#durationBarWidth = this.#readCssNumber(
-      "--easing-duration-bar-width",
-      this.#durationBarWidth,
-    );
-    this.#durationBarHeight = this.#readCssNumber(
-      "--easing-duration-bar-height",
-      this.#durationBarHeight,
-    );
     this.#durationBarRadius = this.#readCssNumber(
       "--easing-duration-bar-radius",
       this.#durationBarRadius,
@@ -7655,6 +8010,28 @@ class FigEasingCurve extends HTMLElement {
     this.#diagonal = this.querySelector(".fig-easing-curve-diagonal");
   }
 
+  #syncHandleSizes() {
+    const h1El = this.#handle1?.querySelector("fig-handle");
+    const h2El = this.#handle2?.querySelector("fig-handle");
+    if (h1El) {
+      const w = h1El.offsetWidth || this.#bezierHandleRadius * 2;
+      const h = h1El.offsetHeight || this.#bezierHandleRadius * 2;
+      this.#bezierHandleRadius = Math.max(w, h) / 2;
+      this.#handle1.setAttribute("width", w);
+      this.#handle1.setAttribute("height", h);
+    }
+    if (h2El) {
+      const w = h2El.offsetWidth || this.#durationBarWidth;
+      const h = h2El.offsetHeight || this.#durationBarHeight;
+      if (this.#mode === "spring") {
+        this.#durationBarWidth = w;
+        this.#durationBarHeight = h;
+      }
+      this.#handle2.setAttribute("width", w);
+      this.#handle2.setAttribute("height", h);
+    }
+  }
+
   #setupResizeObserver() {
     if (this.#resizeObserver || !window.ResizeObserver) return;
     this.#resizeObserver = new ResizeObserver(() => {
@@ -10075,6 +10452,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 +10630,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 +10786,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 = {
@@ -12409,7 +12797,7 @@ class FigChooser extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "choice-element", "drag", "overflow", "loop"];
+    return ["value", "disabled", "choice-element", "drag", "overflow", "loop", "padding"];
   }
 
   get #overflowMode() {
@@ -13045,8 +13433,8 @@ class FigHandle extends HTMLElement {
     };
 
     const axes = this.#axes;
-    if (axes.x) this.style.left = `${resolve(xToken, rect.width, hw)}px`;
-    if (axes.y) this.style.top = `${resolve(yToken, rect.height, hh)}px`;
+    if (axes.x) this.style.left = `${Math.round(resolve(xToken, rect.width, hw))}px`;
+    if (axes.y) this.style.top = `${Math.round(resolve(yToken, rect.height, hh))}px`;
   }
 
   #syncValueAttribute() {
@@ -13059,6 +13447,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,12 +13458,13 @@ class FigHandle extends HTMLElement {
     this.#hideColorTip();
     this.removeEventListener("click", this.#handleSelect);
     document.removeEventListener("pointerdown", this.#handleDeselect);
+    document.removeEventListener("keydown", this.#handleKeyDown);
   }
 
   select() {
     if (this.hasAttribute("disabled")) return;
     this.setAttribute("selected", "");
-    if (this.getAttribute("type") === "color") this.#showColorTip();
+    if (this.getAttribute("type") === "color" && !this.#isDragging) this.#showColorTip();
   }
 
   deselect() {
@@ -13098,6 +13488,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") {
@@ -13105,6 +13504,9 @@ class FigHandle extends HTMLElement {
       } else {
         this.style.setProperty("--fill", value);
       }
+      if (this.#colorTip && value) {
+        this.#colorTip.setAttribute("value", value);
+      }
     }
     if (name === "drag") this.#syncDrag();
     if (name === "value" && !this.#applyingValue && !this.#isDragging) {
@@ -13186,11 +13588,11 @@ class FigHandle extends HTMLElement {
 
       if (axes.x) {
         const left = centerX * rect.width - handleW / 2;
-        this.style.left = `${Math.max(-handleW / 2, Math.min(rect.width - handleW / 2, left))}px`;
+        this.style.left = `${Math.round(Math.max(-handleW / 2, Math.min(rect.width - handleW / 2, left)))}px`;
       }
       if (axes.y) {
         const top = centerY * rect.height - handleH / 2;
-        this.style.top = `${Math.max(-handleH / 2, Math.min(rect.height - handleH / 2, top))}px`;
+        this.style.top = `${Math.round(Math.max(-handleH / 2, Math.min(rect.height - handleH / 2, top)))}px`;
       }
     };
 

package/package.json

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