@rogieking/figui3 8.1.0 → 8.2.1

package/fig-lab.css

@@ -92,6 +92,7 @@ fig-attachment {
   display: block;
   flex: 0 0 var(--fig-attachment-size);
   width: var(--fig-attachment-size);
+  height: var(--fig-attachment-size);
   min-width: 0;
 
   fig-image {
@@ -315,6 +316,28 @@ fig-content:has(> propskit-group[name]:last-child) {
   padding-bottom: 0;
 }
 
+/* Disabled PropsKit text and number inputs should render without input chrome. */
+:is(
+  propskit-switch,
+  propskit-color,
+  propskit-gradient,
+  propskit-select,
+  propskit-text,
+  propskit-number,
+  propskit-position,
+  propskit-color-point,
+  propskit-point-radius,
+  propskit-point-radius-angle,
+  propskit-point-point,
+  propskit-group,
+  propskit-slider,
+  propskit-oscillator
+) :is(fig-input-text, fig-input-number)[disabled]:not([disabled="false"]) {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 /* Large size: more left field padding; nudge trailing controls in from
    the right. propskit-select uses shared label padding instead. */
 :is(
@@ -1387,10 +1410,6 @@ propskit-position {
     .propskit-position-row > label {
       color: var(--figma-color-text-disabled);
     }
-
-    .propskit-position-row > [data-propskit-position-axis] {
-      opacity: 0.5;
-    }
   }
 
   .propskit-position-row {

package/fig-lab.js

@@ -18,6 +18,13 @@ function figLabBooleanAttribute(element, name) {
   return element.hasAttribute(name) && element.getAttribute(name) !== "false";
 }
 
+function figLabSyncDisabledControls(host, controls) {
+  const disabled = figLabBooleanAttribute(host, "disabled");
+  for (const control of controls) {
+    control?.toggleAttribute("disabled", disabled);
+  }
+}
+
 function figLabColorEventAliases(color, alpha, opacity) {
   const numericAlpha = Number(alpha);
   const numericOpacity = Number(opacity);
@@ -566,6 +573,7 @@ class PropskitSwitch extends HTMLElement {
 
   #forwardSwitchEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const checked = this.#switch?.value === "on";
     this.toggleAttribute("checked", checked);
     const detail = {
@@ -583,6 +591,7 @@ class PropskitSwitch extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-segmented-control, fig-menu")
@@ -845,6 +854,7 @@ class PropskitColor extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#valueFromColorEvent(event);
     this.setAttribute("value", value);
     if (this.#input && this.#input.getAttribute("value") !== value) {
@@ -865,6 +875,7 @@ class PropskitColor extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-color, fig-menu")
@@ -1131,6 +1142,7 @@ class PropskitGradient extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#valueFromGradientEvent(event);
     this.setAttribute("value", value);
     const detail =
@@ -1148,6 +1160,7 @@ class PropskitGradient extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-gradient, fig-menu")
@@ -1481,6 +1494,7 @@ class PropskitSelect extends HTMLElement {
   #forwardSelectEvent(type, event) {
     if (event.target !== this.#select) return;
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#select?.value ?? "";
     if (type !== "optionhover") this.setAttribute("value", String(value));
     const detail =
@@ -1520,6 +1534,7 @@ class PropskitSelect extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (event.target instanceof Element && event.target.closest("fig-menu")) {
       return;
     }
@@ -1753,6 +1768,7 @@ class PropskitText extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#input?.value ?? "";
     this.setAttribute("value", String(value));
     const detail =
@@ -1770,6 +1786,7 @@ class PropskitText extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-text, fig-menu")
@@ -1978,6 +1995,7 @@ class PropskitNumber extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const detail =
       event instanceof CustomEvent && event.detail !== undefined
         ? event.detail
@@ -1996,6 +2014,7 @@ class PropskitNumber extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-number, fig-menu")
@@ -2251,6 +2270,7 @@ class PropskitPosition extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-number, fig-menu")
@@ -2329,6 +2349,7 @@ figLabDefineElement("propskit-position", PropskitPosition);
  * @attr {boolean|string} collapsible - Internal group collapsibility; defaults true.
  * @attr {boolean|string} open - Internal group expanded state; defaults true.
  * @attr {string} size - Passed to both internal PropsKit controls.
+ * @attr {boolean|string} disabled - Disables both internal controls.
  * @attr {string} value - JSON object with x, y, and color.
  * @fires input - Composed event with { x, y, color }.
  * @fires change - Composed event with { x, y, color }.
@@ -2340,6 +2361,7 @@ class PropskitColorPoint extends HTMLElement {
     "collapsible",
     "open",
     "size",
+    "disabled",
     "value",
   ];
 
@@ -2361,6 +2383,7 @@ class PropskitColorPoint extends HTMLElement {
     if (!this.#group) this.#render();
     this.#syncGroupAttributes();
     this.#syncSize();
+    this.#syncDisabled();
     this.#syncControls(this.#readValue());
     this.removeEventListener("input", this.#boundHandleInput);
     this.addEventListener("input", this.#boundHandleInput);
@@ -2389,6 +2412,10 @@ class PropskitColorPoint extends HTMLElement {
       this.#syncSize();
       return;
     }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
     this.#syncGroupAttributes();
   }
 
@@ -2452,6 +2479,7 @@ class PropskitColorPoint extends HTMLElement {
     this.#positionControl = position;
     this.#syncGroupAttributes();
     this.#syncSize();
+    this.#syncDisabled();
     group.append(color, position);
     this.replaceChildren(group);
   }
@@ -2479,6 +2507,13 @@ class PropskitColorPoint extends HTMLElement {
     }
   }
 
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#colorControl,
+      this.#positionControl,
+    ]);
+  }
+
   #syncControls(value) {
     const normalized = this.#normalizeValue(value);
     if (this.#colorControl) this.#colorControl.value = normalized.color;
@@ -2497,6 +2532,7 @@ class PropskitColorPoint extends HTMLElement {
     );
     if (!control || !this.contains(control)) return;
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.value;
     const kind = control.getAttribute("data-propskit-color-point-control");
     if (kind === "color") {
@@ -2575,6 +2611,7 @@ figLabDefineElement("propskit-color-point", PropskitColorPoint);
  * @attr {boolean|string} open - Internal group expanded state; defaults true.
  * @attr {string} size - Passed to both internal PropsKit controls.
  * @attr {string} units - Passed to the internal position and radius controls.
+ * @attr {boolean|string} disabled - Disables both internal controls.
  * @attr {string} value - JSON object with x, y, and radius.
  * @fires input - Composed event with { x, y, radius }.
  * @fires change - Composed event with { x, y, radius }.
@@ -2587,6 +2624,7 @@ class PropskitPointRadius extends HTMLElement {
     "open",
     "size",
     "units",
+    "disabled",
     "value",
   ];
 
@@ -2609,6 +2647,7 @@ class PropskitPointRadius extends HTMLElement {
     this.#syncGroupAttributes();
     this.#syncSize();
     this.#syncUnits();
+    this.#syncDisabled();
     this.#syncControls(this.#readValue());
     this.removeEventListener("input", this.#boundHandleInput);
     this.addEventListener("input", this.#boundHandleInput);
@@ -2641,6 +2680,10 @@ class PropskitPointRadius extends HTMLElement {
       this.#syncUnits();
       return;
     }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
     this.#syncGroupAttributes();
   }
 
@@ -2723,6 +2766,7 @@ class PropskitPointRadius extends HTMLElement {
     this.#radiusControl = radius;
     this.#syncGroupAttributes();
     this.#syncSize();
+    this.#syncDisabled();
     group.append(position, radius);
     this.replaceChildren(group);
   }
@@ -2763,6 +2807,13 @@ class PropskitPointRadius extends HTMLElement {
     }
   }
 
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#positionControl,
+      this.#radiusControl,
+    ]);
+  }
+
   #syncControls(value) {
     const normalized = this.#normalizeValue(value);
     if (this.#positionControl) {
@@ -2793,6 +2844,7 @@ class PropskitPointRadius extends HTMLElement {
     );
     if (!control || !this.contains(control)) return;
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.value;
     const kind = control.getAttribute("data-propskit-point-radius-control");
     if (kind === "position") {
@@ -2888,6 +2940,7 @@ figLabDefineElement("propskit-point-radius", PropskitPointRadius);
  * @attr {boolean|string} open - Internal group expanded state; defaults true.
  * @attr {string} size - Passed to every internal PropsKit control.
  * @attr {string} units - Passed to the internal position and radius controls.
+ * @attr {boolean|string} disabled - Disables every internal control.
  * @attr {string} value - JSON object with x, y, radius, and angle.
  * @fires input - Composed event with { x, y, radius, angle }.
  * @fires change - Composed event with { x, y, radius, angle }.
@@ -2900,6 +2953,7 @@ class PropskitPointRadiusAngle extends HTMLElement {
     "open",
     "size",
     "units",
+    "disabled",
     "value",
   ];
 
@@ -2923,6 +2977,7 @@ class PropskitPointRadiusAngle extends HTMLElement {
     this.#syncGroupAttributes();
     this.#syncSize();
     this.#syncUnits();
+    this.#syncDisabled();
     this.#syncControls(this.#readValue());
     this.removeEventListener("input", this.#boundHandleInput);
     this.addEventListener("input", this.#boundHandleInput);
@@ -2955,6 +3010,10 @@ class PropskitPointRadiusAngle extends HTMLElement {
       this.#syncUnits();
       return;
     }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
     this.#syncGroupAttributes();
   }
 
@@ -3049,6 +3108,7 @@ class PropskitPointRadiusAngle extends HTMLElement {
     this.#angleControl = angle;
     this.#syncGroupAttributes();
     this.#syncSize();
+    this.#syncDisabled();
     group.append(position, radius, angle);
     this.replaceChildren(group);
   }
@@ -3093,6 +3153,14 @@ class PropskitPointRadiusAngle extends HTMLElement {
     }
   }
 
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#positionControl,
+      this.#radiusControl,
+      this.#angleControl,
+    ]);
+  }
+
   #syncControls(value) {
     const normalized = this.#normalizeValue(value);
     if (this.#positionControl) {
@@ -3126,6 +3194,7 @@ class PropskitPointRadiusAngle extends HTMLElement {
     );
     if (!control || !this.contains(control)) return;
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.value;
     const kind = control.getAttribute(
       "data-propskit-point-radius-angle-control",
@@ -3228,6 +3297,7 @@ figLabDefineElement(
  * @attr {boolean|string} open - Internal group expanded state; defaults true.
  * @attr {string} size - Passed to both internal position controls.
  * @attr {string} units - Passed to both internal position controls.
+ * @attr {boolean|string} disabled - Disables both internal position controls.
  * @attr {string} value - JSON object with x, y, x2, and y2.
  * @fires input - Composed event with { x, y, x2, y2 }.
  * @fires change - Composed event with { x, y, x2, y2 }.
@@ -3240,6 +3310,7 @@ class PropskitPointPoint extends HTMLElement {
     "open",
     "size",
     "units",
+    "disabled",
     "value",
   ];
 
@@ -3262,6 +3333,7 @@ class PropskitPointPoint extends HTMLElement {
     this.#syncGroupAttributes();
     this.#syncSize();
     this.#syncUnits();
+    this.#syncDisabled();
     this.#syncControls(this.#readValue());
     this.removeEventListener("input", this.#boundHandleInput);
     this.addEventListener("input", this.#boundHandleInput);
@@ -3294,6 +3366,10 @@ class PropskitPointPoint extends HTMLElement {
       this.#syncUnits();
       return;
     }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
     this.#syncGroupAttributes();
   }
 
@@ -3357,6 +3433,7 @@ class PropskitPointPoint extends HTMLElement {
     this.#endControl = end;
     this.#syncGroupAttributes();
     this.#syncSize();
+    this.#syncDisabled();
     group.append(start, end);
     this.replaceChildren(group);
   }
@@ -3392,6 +3469,13 @@ class PropskitPointPoint extends HTMLElement {
     }
   }
 
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#startControl,
+      this.#endControl,
+    ]);
+  }
+
   #syncControls(value) {
     const normalized = this.#normalizeValue(value);
     if (this.#startControl) {
@@ -3415,6 +3499,7 @@ class PropskitPointPoint extends HTMLElement {
     );
     if (!control || !this.contains(control)) return;
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.value;
     const point = control.value;
     const role = control.getAttribute("data-propskit-point-point-control");
@@ -3502,13 +3587,17 @@ figLabDefineElement("propskit-point-point", PropskitPointPoint);
 
 /* Collapsible property group — always collapsible (no collapsible attr). */
 class PropskitGroup extends HTMLElement {
-  static observedAttributes = ["name", "open", "show-reset"];
+  static observedAttributes = ["name", "open", "show-reset", "disabled"];
 
   static #CONTROL_SELECTOR = [
     "propskit-color",
     "propskit-gradient",
     "propskit-number",
     "propskit-position",
+    "propskit-color-point",
+    "propskit-point-radius",
+    "propskit-point-radius-angle",
+    "propskit-point-point",
     "propskit-select",
     "propskit-slider",
     "propskit-switch",
@@ -3525,6 +3614,7 @@ class PropskitGroup extends HTMLElement {
 
   connectedCallback() {
     this.#render();
+    this.#syncDisabled();
     this.#bindDirtyListeners();
     requestAnimationFrame(() => {
       this.#syncDirtyState();
@@ -3554,6 +3644,10 @@ class PropskitGroup extends HTMLElement {
       this.#syncDirtyState();
       return;
     }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
     this.#render();
   }
 
@@ -3609,6 +3703,7 @@ class PropskitGroup extends HTMLElement {
 
     if (!this.#childObserver) {
       this.#childObserver = new MutationObserver(() => {
+        this.#syncDisabled();
         this.#queueDirtySync();
       });
     }
@@ -3647,12 +3742,14 @@ class PropskitGroup extends HTMLElement {
   }
 
   #handleToggle = (e) => {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (this.#isResetTarget(e.target)) return;
     e.stopPropagation();
     this.open = !this.open;
   };
 
   #handleHeaderKeyDown = (e) => {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (this.#isResetTarget(e.target)) return;
     if (e.key !== "Enter" && e.key !== " ") return;
     e.preventDefault();
@@ -3663,6 +3760,7 @@ class PropskitGroup extends HTMLElement {
   #handleReset = (e) => {
     e.preventDefault();
     e.stopPropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     this.#resetControls();
   };
 
@@ -3676,6 +3774,26 @@ class PropskitGroup extends HTMLElement {
     );
   }
 
+  #syncDisabled() {
+    const disabled = figLabBooleanAttribute(this, "disabled");
+    for (const control of this.#controls()) {
+      if (disabled) {
+        if (!figLabBooleanAttribute(control, "disabled")) {
+          control.setAttribute("disabled", "");
+          control.setAttribute("data-propskit-group-disabled", "");
+        }
+      } else if (control.hasAttribute("data-propskit-group-disabled")) {
+        control.removeAttribute("disabled");
+        control.removeAttribute("data-propskit-group-disabled");
+      }
+    }
+    this.#header?.setAttribute("aria-disabled", String(disabled));
+    this.#header?.setAttribute("tabindex", disabled ? "-1" : "0");
+    this.#resetTooltip
+      ?.querySelector("fig-button")
+      ?.toggleAttribute("disabled", disabled);
+  }
+
   #controlIsDirty(el) {
     return el.isDefault === false;
   }
@@ -3813,7 +3931,7 @@ class PropskitGroup extends HTMLElement {
     this.#chevron = h3.querySelector(".propskit-group-chevron");
     this.#syncResetButton();
     this.#header.setAttribute("role", "button");
-    this.#header.setAttribute("tabindex", "0");
+    this.#syncDisabled();
     this.#header.setAttribute("aria-expanded", String(this.open));
     this.#header.removeEventListener("click", this.#handleToggle);
     this.#header.addEventListener("click", this.#handleToggle);
@@ -4149,7 +4267,7 @@ class PropskitSlider extends HTMLElement {
   }
 
   #pushExternalValueToSlider() {
-    if (!this.#slider) return;
+    if (!this.#slider || !this.hasAttribute("value")) return;
     const next = this.getAttribute("value") ?? "";
     if (String(this.#slider.value) !== next) {
       this.#slider.value = next;
@@ -4626,6 +4744,7 @@ class PropskitSlider extends HTMLElement {
 
   #forwardSliderEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (type === "change") {
       this.#resetElasticPull();
     }
@@ -6364,7 +6483,7 @@ class PropskitOscillator extends HTMLElement {
     this.#syncViewportSize();
     this.#updateWaveform();
     this.#setupEvents();
-    this.#startPlayhead();
+    if (!this.#isDisabled()) this.#startPlayhead();
     figLabConnectPropskitResetMenu(this);
   }
 
@@ -6414,6 +6533,7 @@ class PropskitOscillator extends HTMLElement {
   }
 
   #getWaveTypeMenuHTML(disabled, index) {
+    const disabledAttr = disabled ? " disabled" : "";
     const items = PropskitOscillator.TYPES.map((type) => {
       return `<fig-menu-item value="${type.value}">
         ${PropskitOscillator.waveIcon(type.value, 24)}
@@ -6421,9 +6541,9 @@ class PropskitOscillator extends HTMLElement {
       </fig-menu-item>`;
     }).join("");
     const indexAttr = ` data-wave-index="${PropskitOscillator.#escapeAttribute(String(index))}"`;
-    return `<fig-menu class="propskit-oscillator-add-type" position="bottom right"${indexAttr}${disabled}>
+    return `<fig-menu class="propskit-oscillator-add-type" position="bottom right"${indexAttr}${disabledAttr}>
       <fig-tooltip text="Add form">
-        <fig-button class="propskit-oscillator-add-type-button" variant="ghost" icon fig-menu-trigger aria-label="Add form"><fig-icon name="plus"></fig-icon></fig-button>
+        <fig-button class="propskit-oscillator-add-type-button" variant="ghost" icon fig-menu-trigger aria-label="Add form"${disabledAttr}><fig-icon name="plus"></fig-icon></fig-button>
       </fig-tooltip>
       ${items}
     </fig-menu>`;

package/fig.js

@@ -5173,7 +5173,6 @@ figDefineElement("fig-options", FigOptions);
 class FigSlider extends HTMLElement {
   #isInteracting = false;
   #pendingRegeneration = false;
-  #showEmptyTextValue = false;
   #isSyncingValueAttribute = false;
   #value = "";
   #a11yAttributes = [
@@ -5278,10 +5277,6 @@ class FigSlider extends HTMLElement {
       : this.type === "delta"
         ? 0
         : this.min;
-    this.#showEmptyTextValue =
-      this.type !== "range" &&
-      (rawValue === null ||
-        (typeof rawValue === "string" && rawValue.trim() === ""));
     this.value = this.#normalizeSliderValue(rawValue);
   }
 
@@ -5321,10 +5316,7 @@ class FigSlider extends HTMLElement {
       this.figInputNumber.setAttribute("max", String(this.max));
       this.figInputNumber.setAttribute("transform", String(this.transform));
       this.figInputNumber.setAttribute("step", String(this.step));
-      this.figInputNumber.setAttribute(
-        "value",
-        this.#showEmptyTextValue ? "" : String(this.value),
-      );
+      this.figInputNumber.setAttribute("value", String(this.value));
       if (this.units) this.figInputNumber.setAttribute("units", this.units);
       else this.figInputNumber.removeAttribute("units");
       if (this.precision !== null) {
@@ -5411,7 +5403,7 @@ class FigSlider extends HTMLElement {
                         max="${this.max}"
                         transform="${this.transform}"
                         step="${this.step}"
-                        value="${this.#showEmptyTextValue ? "" : this.value}"
+                        value="${this.value}"
                         ${this.units ? `units="${figEscapeAttribute(this.units)}"` : ""}
                         ${this.precision !== null ? `precision="${this.precision}"` : ""}>
                     </fig-input-number>`;
@@ -5487,8 +5479,6 @@ class FigSlider extends HTMLElement {
 
   set value(value) {
     const rawValue = value === null || value === undefined ? "" : String(value);
-    this.#showEmptyTextValue =
-      this.type !== "range" && rawValue.trim() === "";
     const hasParsedBounds = this.min !== undefined || this.max !== undefined;
     const normalized = hasParsedBounds
       ? String(this.#normalizeSliderValue(rawValue))
@@ -5504,10 +5494,7 @@ class FigSlider extends HTMLElement {
       this.input.setAttribute("aria-valuenow", normalized);
     }
     if (this.figInputNumber) {
-      this.figInputNumber.setAttribute(
-        "value",
-        this.#showEmptyTextValue ? "" : normalized,
-      );
+      this.figInputNumber.setAttribute("value", normalized);
     }
     if (this.input) this.#syncProperties();
   }
@@ -5537,10 +5524,6 @@ class FigSlider extends HTMLElement {
   #handleTextInput() {
     if (this.figInputNumber) {
       const rawTextValue = this.figInputNumber.value;
-      this.#showEmptyTextValue =
-        rawTextValue === null ||
-        rawTextValue === undefined ||
-        (typeof rawTextValue === "string" && rawTextValue.trim() === "");
       const normalized = this.#normalizeSliderValue(rawTextValue);
       this.value = normalized;
       this.input.value = String(normalized);
@@ -5624,10 +5607,7 @@ class FigSlider extends HTMLElement {
     // Update ARIA value
     this.input.setAttribute("aria-valuenow", val);
     if (this.figInputNumber) {
-      this.figInputNumber.setAttribute(
-        "value",
-        this.#showEmptyTextValue ? "" : val,
-      );
+      this.figInputNumber.setAttribute("value", val);
     }
   }
   #syncInputA11yAttributes() {
@@ -5665,7 +5645,6 @@ class FigSlider extends HTMLElement {
   }
 
   #handleInput() {
-    this.#showEmptyTextValue = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
@@ -5674,7 +5653,6 @@ class FigSlider extends HTMLElement {
 
   #handleChange() {
     this.#isInteracting = false;
-    this.#showEmptyTextValue = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("change", { detail: this.value, bubbles: true }),
@@ -5690,7 +5668,6 @@ class FigSlider extends HTMLElement {
     }
 
     event.preventDefault();
-    this.#showEmptyTextValue = false;
 
     const direction =
       event.key === "ArrowRight" || event.key === "ArrowUp" ? 1 : -1;
@@ -5712,10 +5689,6 @@ class FigSlider extends HTMLElement {
   #handleTextChange() {
     if (this.figInputNumber) {
       const rawTextValue = this.figInputNumber.value;
-      this.#showEmptyTextValue =
-        rawTextValue === null ||
-        rawTextValue === undefined ||
-        (typeof rawTextValue === "string" && rawTextValue.trim() === "");
       const normalized = this.#normalizeSliderValue(rawTextValue);
       this.value = normalized;
       this.input.value = String(normalized);
@@ -11787,6 +11760,7 @@ class FigMedia extends HTMLElement {
       spinner.setAttribute("data-generated", "");
       spinner.setAttribute("data-loading-indicator", "");
       spinner.setAttribute("slot", "overlay");
+      spinner.setAttribute("size", "small");
       spinner.setAttribute("aria-hidden", "true");
       this.append(spinner);
       this.#loadingSpinner = spinner;

package/package.json

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