@rogieking/figui3 8.9.29 → 8.9.30

package/fig-lab.js

@@ -4639,6 +4639,7 @@ class PropskitSlider extends HTMLElement {
     "data-wave-index",
     "data-active",
     "data-elastic-dragging",
+    "default",
     "style",
   ]);
 
@@ -4761,8 +4762,11 @@ class PropskitSlider extends HTMLElement {
   }
 
   #initialize() {
+    const sliderType = (this.getAttribute("type") || "range").toLowerCase();
     this.#initialValue =
-      this.getAttribute("value") ?? this.getAttribute("min") ?? "0";
+      this.getAttribute("value") ??
+      this.getAttribute("default") ??
+      (sliderType === "delta" ? "0" : this.getAttribute("min") ?? "0");
     const initialChildren = Array.from(this.childNodes).filter((node) => {
       return (
         node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim())
@@ -4866,12 +4870,15 @@ class PropskitSlider extends HTMLElement {
     this.#slider.setAttribute("text", "true");
 
     const sliderType = (this.getAttribute("type") || "range").toLowerCase();
-    if (sliderType === "delta" || sliderType === "stepper") {
-      this.#slider.setAttribute(
-        "default",
-        this.getAttribute("default") ?? "50",
-      );
-    } else if (!this.hasAttribute("default")) {
+    if (sliderType === "delta") {
+      const min = Number(this.#slider.min);
+      const max = Number(this.#slider.max);
+      const midpoint =
+        Number.isFinite(min) && Number.isFinite(max)
+          ? min + (max - min) / 2
+          : 0;
+      this.#slider.setAttribute("default", String(midpoint));
+    } else {
       this.#slider.removeAttribute("default");
     }
     if (sliderType === "stepper") {
@@ -4910,8 +4917,10 @@ class PropskitSlider extends HTMLElement {
   }
 
   #pushExternalValueToSlider() {
-    if (!this.#slider || !this.hasAttribute("value")) return;
-    const next = this.getAttribute("value") ?? "";
+    if (!this.#slider) return;
+    const next = this.hasAttribute("value")
+      ? this.getAttribute("value") ?? ""
+      : this.#initialValue ?? "";
     if (String(this.#slider.value) !== next) {
       this.#slider.value = next;
     }
@@ -5313,7 +5322,6 @@ class PropskitSlider extends HTMLElement {
   #defaultValue() {
     return (
       this.getAttribute("default") ??
-      this.#slider?.getAttribute("default") ??
       this.#initialValue ??
       this.#rangeInput?.min ??
       "0"
@@ -7163,6 +7171,7 @@ class PropskitOscillator extends HTMLElement {
           { text: label },
           figLabCreateElement("fig-handle", {
             size: "small",
+            type: "minimal",
             "aria-label": `Oscillator ${type} handle`,
           }),
         ),

package/fig.js

@@ -5700,11 +5700,7 @@ class FigSlider extends HTMLElement {
     this.step = readNumber("step", defaults.step);
     if (!(this.step > 0)) this.step = defaults.step > 0 ? defaults.step : 1;
     this.color = this.getAttribute("color") || defaults?.color;
-    this.default = this.hasAttribute("default")
-      ? this.getAttribute("default")
-      : this.type === "delta"
-        ? 0
-        : this.min;
+    this.default = this.#resolveDefaultValue();
     this.value = this.#normalizeSliderValue(rawValue);
   }
 
@@ -5772,12 +5768,7 @@ class FigSlider extends HTMLElement {
     this.input.removeEventListener("pointercancel", this.#boundRangePointerUp);
     this.input.addEventListener("pointercancel", this.#boundRangePointerUp);
 
-    if (this.default) {
-      this.style.setProperty(
-        "--default",
-        this.#calculateNormal(this.default),
-      );
-    }
+    this.style.setProperty("--default", this.#calculateNormal(this.default));
 
     if (this.figInputNumber) {
       this.#syncTextInputA11yAttributes();
@@ -5864,6 +5855,7 @@ class FigSlider extends HTMLElement {
       this.input.setAttribute("list", this.datalist.getAttribute("id"));
     } else if (this.type === "stepper") {
       this.datalist = document.createElement("datalist");
+      this.datalist.setAttribute("data-generated", "slider-stepper");
       this.datalist.setAttribute("id", figUniqueId());
       const steps = Math.min(
         1001,
@@ -5878,6 +5870,7 @@ class FigSlider extends HTMLElement {
       this.input.setAttribute("list", this.datalist.getAttribute("id"));
     } else if (this.type === "delta") {
       this.datalist = document.createElement("datalist");
+      this.datalist.setAttribute("data-generated", "slider-delta");
       this.datalist.setAttribute("id", figUniqueId());
       let option = document.createElement("option");
       option.setAttribute("value", this.default);
@@ -5885,14 +5878,7 @@ class FigSlider extends HTMLElement {
       this.inputContainer.append(this.datalist);
       this.input.setAttribute("list", this.datalist.getAttribute("id"));
     }
-    if (this.datalist) {
-      const defaultOption = [...this.datalist.querySelectorAll("option")].find(
-        (option) => option.value === String(this.default),
-      );
-      if (defaultOption) {
-        defaultOption.setAttribute("default", "true");
-      }
-    }
+    this.#syncDefaultDatalist();
     this.#syncValue();
   }
 
@@ -5938,6 +5924,10 @@ class FigSlider extends HTMLElement {
     if (this.input) this.#syncProperties();
   }
 
+  get defaultValue() {
+    return this.#resolveDefaultValue();
+  }
+
   disconnectedCallback() {
     this.#pendingRegeneration = false;
     if (this.input) {
@@ -5998,6 +5988,28 @@ class FigSlider extends HTMLElement {
     const { min, max } = this.#getBounds();
     return Math.min(max, Math.max(min, value));
   }
+  #isStepAligned(value) {
+    const { min } = this.#getBounds();
+    const step = this.#toFiniteNumber(this.step);
+    if (!(step > 0)) return true;
+    const steps = (value - min) / step;
+    const nearest = Math.round(steps);
+    const tolerance = Number.EPSILON * Math.max(1, Math.abs(steps)) * 16;
+    return Math.abs(steps - nearest) <= tolerance;
+  }
+  #resolveDefaultValue(rawDefault = this.getAttribute("default")) {
+    const { min, max } = this.#getBounds();
+    const parsed = this.#toFiniteNumber(rawDefault);
+    const isValid =
+      parsed !== null &&
+      parsed >= min &&
+      parsed <= max &&
+      (this.type !== "stepper" || this.#isStepAligned(parsed));
+    if (isValid) return parsed;
+    return this.type === "delta"
+      ? Math.min(max, Math.max(min, 0))
+      : min;
+  }
   #getFallbackValue() {
     if (this.type === "delta") {
       const deltaDefault = this.#toFiniteNumber(this.default);
@@ -6163,10 +6175,13 @@ class FigSlider extends HTMLElement {
     }
     if (!this.hasAttribute("default") && this.type !== "delta") {
       this.default = this.min;
+    } else {
+      this.default = this.#resolveDefaultValue();
     }
     this.value = this.#normalizeSliderValue(this.value);
     this.#syncProperties();
     this.#syncStepperDatalist();
+    this.#syncDefaultDatalist();
   }
 
   #syncStepperDatalist() {
@@ -6183,6 +6198,25 @@ class FigSlider extends HTMLElement {
     }
     this.datalist.replaceChildren(fragment);
     this.input.setAttribute("list", this.datalist.id);
+    this.#syncDefaultDatalist();
+  }
+
+  #syncDefaultDatalist() {
+    if (!this.datalist) return;
+    const defaultValue = String(this.default);
+    const options = [...this.datalist.querySelectorAll("option")];
+    options.forEach((option) => option.removeAttribute("default"));
+    let defaultOption = options.find((option) => option.value === defaultValue);
+    if (
+      !defaultOption &&
+      this.type === "delta" &&
+      this.datalist.getAttribute("data-generated") === "slider-delta"
+    ) {
+      defaultOption = document.createElement("option");
+      defaultOption.value = defaultValue;
+      this.datalist.replaceChildren(defaultOption);
+    }
+    defaultOption?.setAttribute("default", "true");
   }
 
   #regenerateWhenIdle() {
@@ -6272,9 +6306,9 @@ class FigSlider extends HTMLElement {
           }
           break;
         case "default":
-          this.default =
-            newValue !== null ? newValue : this.type === "delta" ? 0 : this.min;
+          this.default = this.#resolveDefaultValue(newValue);
           this.#syncProperties();
+          this.#syncDefaultDatalist();
           break;
         case "min":
         case "max":
@@ -16850,6 +16884,7 @@ class FigGroup extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
+    if (!this.isConnected) return;
     if (name === "open") {
       this.#header?.setAttribute("aria-expanded", String(this.open));
       return;
@@ -16898,7 +16933,9 @@ class FigGroup extends HTMLElement {
     const label = nameAttr || (isCollapsible ? "Group" : null);
 
     // Check if user supplied their own fig-header
-    const userHeader = this.querySelector(":scope > fig-header");
+    const userHeader = this.querySelector(
+      ":scope > fig-header:not([data-generated])",
+    );
 
     if (!label && !isCollapsible && !userHeader) {
       if (this.#header && this.#header.dataset.generated) {
@@ -16910,6 +16947,9 @@ class FigGroup extends HTMLElement {
     }
 
     if (userHeader) {
+      this.querySelectorAll(":scope > fig-header[data-generated]").forEach(
+        (header) => header.remove(),
+      );
       this.#header = userHeader;
     } else if (!this.#header || !this.#header.dataset.generated) {
       this.#header = document.createElement("fig-header");

package/package.json

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