@rogieking/figui3 6.28.1 → 6.29.1

package/fig-lab.css

@@ -234,35 +234,36 @@ fig-content:has(> propskit-group[name]:last-child) {
   padding-bottom: 0;
 }
 
-/* Default/large size: more left field padding; nudge trailing controls in from
+/* Large size: more left field padding; nudge trailing controls in from
    the right. propskit-select applies left inset on label + trigger instead. */
 :is(
   propskit-switch,
   propskit-color,
+  propskit-gradient,
   propskit-text,
   propskit-number,
   propskit-slider
-):is(:not([size]), [size="large"]) {
+)[size="large"] {
   fig-field:not([direction="vertical"]) {
     padding-left: var(--spacer-2-5);
   }
 }
 
 /* Flex-positioned numbers — margin works. Absolute numbers use right: calc(...) below. */
-:is(propskit-color, propskit-number):is(:not([size]), [size="large"]) {
+:is(propskit-color, propskit-number)[size="large"] {
   fig-field fig-input-number {
     margin-right: var(--spacer-1);
   }
 }
 
-propskit-text:is(:not([size]), [size="large"]) {
+propskit-text[size="large"] {
   fig-field > fig-input-text {
     margin-right: var(--spacer-1);
   }
 }
 
 propskit-switch {
-  --propskit-switch-height: 2rem;
+  --propskit-switch-height: 1.5rem;
   --propskit-switch-vertical-padding: var(--spacer-1);
   --propskit-switch-horizontal-padding: var(--spacer-3);
 
@@ -274,8 +275,9 @@ propskit-switch {
   padding: var(--propskit-switch-vertical-padding)
     var(--propskit-switch-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-switch-height: 2rem;
+
     fig-field:not([direction="vertical"]) {
       padding-right: var(--spacer-1);
     }
@@ -338,7 +340,7 @@ propskit-switch {
 }
 
 propskit-color {
-  --propskit-color-height: 2rem;
+  --propskit-color-height: 1.5rem;
   --propskit-color-vertical-padding: var(--spacer-1);
   --propskit-color-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -351,6 +353,10 @@ propskit-color {
   padding: var(--propskit-color-vertical-padding)
     var(--propskit-color-horizontal-padding);
 
+  &[size="large"] {
+    --propskit-color-height: 2rem;
+  }
+
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
@@ -456,8 +462,96 @@ propskit-color {
   }
 }
 
+propskit-gradient {
+  --propskit-gradient-height: 1.5rem;
+  --propskit-gradient-vertical-padding: var(--spacer-1);
+  --propskit-gradient-horizontal-padding: var(--spacer-3);
+  --figma-focus-outline-offset: 1px;
+
+  display: block;
+  width: 100%;
+  height: calc(
+    var(--propskit-gradient-height) + var(--propskit-gradient-vertical-padding) * 2
+  );
+  padding: var(--propskit-gradient-vertical-padding)
+    var(--propskit-gradient-horizontal-padding);
+
+  &[size="large"] {
+    --propskit-gradient-height: 2rem;
+
+    fig-field:not([direction="vertical"]) {
+      padding-right: var(--spacer-1);
+    }
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+
+    label {
+      color: var(--figma-color-text-disabled);
+    }
+  }
+
+  fig-field:not([direction="vertical"]) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    height: 100%;
+    padding: 0 var(--spacer-1) 0 var(--spacer-2);
+    border-radius: var(--radius-medium);
+    background-color: var(--figma-color-bg-secondary);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover::after {
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    }
+
+    & > label {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      flex: 0 1 auto;
+      max-width: 40%;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      color: var(--figma-color-text-secondary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: none;
+
+      fig-icon:first-child {
+        margin-left: calc(var(--spacer-1) * -1);
+      }
+    }
+
+    fig-input-gradient {
+      position: relative;
+      flex: 0 0 50%;
+      width: 50%;
+      min-width: 0;
+      margin-left: auto;
+      border-radius: var(--radius-medium);
+
+      &:hover {
+        outline: none !important;
+      }
+    }
+  }
+}
+
 propskit-select {
-  --propskit-select-height: 2rem;
+  --propskit-select-height: 1.5rem;
   --propskit-select-vertical-padding: var(--spacer-1);
   --propskit-select-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -470,8 +564,9 @@ propskit-select {
   padding: var(--propskit-select-vertical-padding)
     var(--propskit-select-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-select-height: 2rem;
+
     fig-field:not([direction="vertical"]) {
       padding-left: 0;
 
@@ -567,7 +662,7 @@ propskit-select {
 }
 
 propskit-text {
-  --propskit-text-height: 2rem;
+  --propskit-text-height: 1.5rem;
   --propskit-text-vertical-padding: var(--spacer-1);
   --propskit-text-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -580,6 +675,10 @@ propskit-text {
   padding: var(--propskit-text-vertical-padding)
     var(--propskit-text-horizontal-padding);
 
+  &[size="large"] {
+    --propskit-text-height: 2rem;
+  }
+
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
 
@@ -672,7 +771,7 @@ propskit-text {
 }
 
 propskit-number {
-  --propskit-number-height: 2rem;
+  --propskit-number-height: 1.5rem;
   --propskit-number-vertical-padding: var(--spacer-1);
   --propskit-number-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -685,8 +784,9 @@ propskit-number {
   padding: var(--propskit-number-vertical-padding)
     var(--propskit-number-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-number-height: 2rem;
+
     fig-field:not([direction="vertical"]) > label {
       inset: 0 auto 0 var(--spacer-2-5);
     }
@@ -786,7 +886,7 @@ propskit-slider {
   --propskit-slider-elastic-scale: 1;
   --propskit-slider-elastic-origin: left center;
   --propskit-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
-  --propskit-slider-height: 2rem;
+  --propskit-slider-height: 1.5rem;
   --propskit-slider-vertical-padding: var(--spacer-1);
   --propskit-slider-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
@@ -811,8 +911,8 @@ propskit-slider {
   padding-left: var(--propskit-slider-horizontal-padding);
   padding-right: var(--propskit-slider-horizontal-padding);
 
-  &:not([size]),
   &[size="large"] {
+    --propskit-slider-height: 2rem;
     --propskit-slider-fig-slider-thumb-height: calc(
       var(--propskit-slider-fig-slider-height) - var(--spacer-3)
     );

package/fig-lab.js

@@ -130,6 +130,33 @@ function figLabPropskitValuesEqual(value, defaultValue) {
   return String(value ?? "") === String(defaultValue ?? "");
 }
 
+function figLabPropskitJsonValuesEqual(value, defaultValue) {
+  const normalize = (input) => {
+    if (Array.isArray(input)) return input.map(normalize);
+    if (input && typeof input === "object") {
+      return Object.keys(input)
+        .sort()
+        .reduce((result, key) => {
+          result[key] = normalize(input[key]);
+          return result;
+        }, {});
+    }
+    return input;
+  };
+
+  try {
+    const parsedValue = typeof value === "string" ? JSON.parse(value) : value;
+    const parsedDefault =
+      typeof defaultValue === "string" ? JSON.parse(defaultValue) : defaultValue;
+    return (
+      JSON.stringify(normalize(parsedValue)) ===
+      JSON.stringify(normalize(parsedDefault))
+    );
+  } catch {
+    return figLabPropskitValuesEqual(value, defaultValue);
+  }
+}
+
 function figLabPerceivedColorTheme(context, color) {
   if (!context || !color) return null;
   const probe = document.createElement("span");
@@ -714,6 +741,266 @@ class PropskitColor extends HTMLElement {
 }
 figLabDefineElement("propskit-color", PropskitColor);
 
+/* Field + Gradient wrapper */
+class PropskitGradient extends HTMLElement {
+  #field = null;
+  #label = null;
+  #input = null;
+  #hasCustomLabel = false;
+  #observer = null;
+  #managedInputAttrs = new Set();
+  #boundHandleInput = null;
+  #boundHandleChange = null;
+  #boundHandleClick = this.#handleClick.bind(this);
+  #initialValue = null;
+
+  static get observedAttributes() {
+    return ["label", "direction", "aria-label"];
+  }
+
+  connectedCallback() {
+    if (!this.#field) this.#initialize();
+    this.#syncField();
+    this.#syncInputAttributes();
+    this.#bindInputEvents();
+    if (this.#initialValue === null) {
+      this.#initialValue =
+        this.getAttribute("default") ??
+        this.getAttribute("value") ??
+        JSON.stringify(this.#input?.value ?? {});
+    }
+    this.removeEventListener("click", this.#boundHandleClick);
+    this.addEventListener("click", this.#boundHandleClick);
+    figLabConnectPropskitResetMenu(this);
+
+    if (!this.#observer) {
+      this.#observer = new MutationObserver((mutations) => {
+        let syncField = false;
+        let syncInput = false;
+
+        for (const mutation of mutations) {
+          if (mutation.type !== "attributes") continue;
+          if (
+            mutation.attributeName === "label" ||
+            mutation.attributeName === "direction" ||
+            mutation.attributeName === "aria-label"
+          ) {
+            syncField = true;
+          } else {
+            syncInput = true;
+          }
+        }
+
+        if (syncField) this.#syncField();
+        if (syncInput) this.#syncInputAttributes();
+      });
+    }
+
+    this.#observer.observe(this, { attributes: true });
+  }
+
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#unbindInputEvents();
+    this.removeEventListener("click", this.#boundHandleClick);
+    figLabDisconnectPropskitResetMenu(this);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#field) return;
+    if (name === "label" || name === "direction" || name === "aria-label") {
+      this.#syncField();
+    }
+  }
+
+  #initialize() {
+    const initialChildren = Array.from(this.childNodes).filter(
+      (node) =>
+        node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()),
+    );
+    const customLabel = initialChildren.find(
+      (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("label"),
+    );
+    const field = document.createElement("fig-field");
+    const label = customLabel || document.createElement("label");
+    const input = document.createElement("fig-input-gradient");
+
+    field.append(label, input);
+    this.#field = field;
+    this.#label = label;
+    this.#input = input;
+    this.#hasCustomLabel = Boolean(customLabel);
+    this.replaceChildren(field);
+  }
+
+  #syncField() {
+    if (!this.#field || !this.#label || !this.#input) return;
+    const hasLabelAttr = this.hasAttribute("label");
+    const rawLabel = this.getAttribute("label");
+    const isBlankLabel = hasLabelAttr && (rawLabel ?? "").trim() === "";
+
+    if (isBlankLabel) {
+      this.#label.remove();
+    } else {
+      if (!this.#hasCustomLabel) {
+        this.#label.textContent = hasLabelAttr ? (rawLabel ?? "") : "Label";
+      }
+      if (this.#label.parentElement !== this.#field) {
+        this.#field.prepend(this.#label);
+      }
+    }
+
+    this.#field.setAttribute(
+      "direction",
+      this.getAttribute("direction") || "horizontal",
+    );
+    this.#input.setAttribute(
+      "aria-label",
+      this.getAttribute("aria-label") ||
+        this.#label.textContent?.trim() ||
+        "Gradient",
+    );
+  }
+
+  #getForwardedInputAttrNames() {
+    const reserved = new Set([
+      "label",
+      "direction",
+      "oninput",
+      "onchange",
+      "class",
+      "style",
+      "id",
+      "size",
+      "aria-label",
+      "default",
+    ]);
+    return this.getAttributeNames().filter(
+      (name) => !reserved.has(name) && !name.startsWith("data-"),
+    );
+  }
+
+  #syncInputAttributes() {
+    if (!this.#input) return;
+    const inputAttrs = this.#getForwardedInputAttrNames();
+    const nextManaged = new Set(inputAttrs);
+
+    for (const attrName of this.#managedInputAttrs) {
+      if (!nextManaged.has(attrName)) this.#input.removeAttribute(attrName);
+    }
+    for (const attrName of inputAttrs) {
+      const next = this.getAttribute(attrName) ?? "";
+      if (
+        attrName === "value" &&
+        this.#input.getAttribute("value") === next
+      ) {
+        continue;
+      }
+      this.#input.setAttribute(attrName, next);
+    }
+
+    if (!this.hasAttribute("edit")) this.#input.setAttribute("edit", "true");
+    this.#managedInputAttrs = nextManaged;
+  }
+
+  #bindInputEvents() {
+    if (!this.#input) return;
+    this.#boundHandleInput ??= this.#forwardInputEvent.bind(this, "input");
+    this.#boundHandleChange ??= this.#forwardInputEvent.bind(this, "change");
+    this.#input.addEventListener("input", this.#boundHandleInput);
+    this.#input.addEventListener("change", this.#boundHandleChange);
+  }
+
+  #unbindInputEvents() {
+    if (!this.#input) return;
+    if (this.#boundHandleInput) {
+      this.#input.removeEventListener("input", this.#boundHandleInput);
+    }
+    if (this.#boundHandleChange) {
+      this.#input.removeEventListener("change", this.#boundHandleChange);
+    }
+  }
+
+  #valueFromGradientEvent(event) {
+    const detail =
+      event instanceof CustomEvent && event.detail && typeof event.detail === "object"
+        ? event.detail
+        : this.#input?.value;
+    if (!detail || typeof detail !== "object") return this.value;
+    return JSON.stringify(detail);
+  }
+
+  #forwardInputEvent(type, event) {
+    event.stopImmediatePropagation();
+    const value = this.#valueFromGradientEvent(event);
+    this.setAttribute("value", value);
+    const detail =
+      event instanceof CustomEvent && event.detail !== undefined
+        ? event.detail
+        : this.#input?.value;
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail,
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #handleClick(event) {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("fig-input-gradient, fig-menu")
+    ) {
+      return;
+    }
+    this.focus();
+  }
+
+  get value() {
+    return (
+      this.getAttribute("value") ??
+      JSON.stringify(this.#input?.value ?? {})
+    );
+  }
+
+  set value(nextValue) {
+    if (nextValue === null || nextValue === undefined || nextValue === "") {
+      this.removeAttribute("value");
+      this.#input?.removeAttribute("value");
+      return;
+    }
+    const next =
+      typeof nextValue === "object" ? JSON.stringify(nextValue) : String(nextValue);
+    this.setAttribute("value", next);
+    if (this.#input && this.#input.getAttribute("value") !== next) {
+      this.#input.setAttribute("value", next);
+    }
+  }
+
+  get defaultValue() {
+    return this.getAttribute("default") ?? this.#initialValue ?? "";
+  }
+
+  get isDefault() {
+    return figLabPropskitJsonValuesEqual(this.value, this.defaultValue);
+  }
+
+  resetToDefault() {
+    const next = this.defaultValue;
+    if (!next) return;
+    this.value = next;
+    const detail = this.#input?.value;
+    figLabEmitPropskitReset(this, detail);
+  }
+
+  focus(options) {
+    this.#input?.focus(options);
+  }
+}
+figLabDefineElement("propskit-gradient", PropskitGradient);
+
 /* Field + Select wrapper */
 class PropskitSelect extends HTMLElement {
   #field = null;
@@ -1472,6 +1759,7 @@ class PropskitGroup extends HTMLElement {
 
   static #CONTROL_SELECTOR = [
     "propskit-color",
+    "propskit-gradient",
     "propskit-number",
     "propskit-select",
     "propskit-slider",

package/package.json

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