@rogieking/figui3 8.9.29 → 8.9.31

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

@@ -407,14 +407,19 @@ function figSyncOverflowState(host, scrollEl, axis = "x", threshold = 2) {
   return scrollable;
 }
 
-function figScrollOverflowPage(scrollEl, axis = "x", direction = 1) {
+function figScrollOverflowPage(
+  scrollEl,
+  axis = "x",
+  direction = 1,
+  behavior = "smooth",
+) {
   if (!scrollEl) return;
   const isHorizontal = axis === "x";
   const pageSize = isHorizontal ? scrollEl.clientWidth : scrollEl.clientHeight;
   const scrollAmount = pageSize * 0.8 * direction;
   scrollEl.scrollBy({
     [isHorizontal ? "left" : "top"]: scrollAmount,
-    behavior: "smooth",
+    behavior,
   });
 }
 
@@ -5700,11 +5705,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 +5773,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 +5860,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 +5875,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 +5883,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 +5929,10 @@ class FigSlider extends HTMLElement {
     if (this.input) this.#syncProperties();
   }
 
+  get defaultValue() {
+    return this.#resolveDefaultValue();
+  }
+
   disconnectedCallback() {
     this.#pendingRegeneration = false;
     if (this.input) {
@@ -5998,6 +5993,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 +6180,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 +6203,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 +6311,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 +16889,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 +16938,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 +16952,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");
@@ -17647,6 +17692,8 @@ figDefineElement("fig-choice", FigChoice);
  * @attr {number} columns - Number of columns when layout="grid" (default: 2)
  * @attr {string} value - Selected choice value. Omit to select the first choice; `value=""` means none.
  * @attr {boolean} disabled - Whether the chooser is disabled
+ * @attr {boolean} auto-scroll - Whether selection changes automatically scroll into view (default: true)
+ * @attr {"auto"|"smooth"} scroll-behavior - Scrolling animation behavior (default: "smooth")
  */
 class FigChooser extends HTMLElement {
   #selectedChoice = null;
@@ -17674,6 +17721,7 @@ class FigChooser extends HTMLElement {
       "layout",
       "overflow",
       "loop",
+      "auto-scroll",
     ];
   }
 
@@ -17688,6 +17736,31 @@ class FigChooser extends HTMLElement {
     return attr === null || attr !== "false";
   }
 
+  get autoScroll() {
+    const attr = this.getAttribute("auto-scroll");
+    return attr === null || attr !== "false";
+  }
+
+  set autoScroll(value) {
+    if (value === false || value === "false" || value === null) {
+      this.setAttribute("auto-scroll", "false");
+    } else {
+      this.removeAttribute("auto-scroll");
+    }
+  }
+
+  get scrollBehavior() {
+    return this.getAttribute("scroll-behavior") === "auto" ? "auto" : "smooth";
+  }
+
+  set scrollBehavior(value) {
+    if (value === "auto" || value === "smooth") {
+      this.setAttribute("scroll-behavior", value);
+    } else {
+      this.removeAttribute("scroll-behavior");
+    }
+  }
+
   get #choiceSelector() {
     return this.getAttribute("choice-element") || "fig-choice";
   }
@@ -17727,7 +17800,7 @@ class FigChooser extends HTMLElement {
     if (this.getAttribute("value") !== val) {
       this.setAttribute("value", val);
     }
-    this.#scrollToChoice(element);
+    if (this.autoScroll) this.#scrollToChoice(element);
   }
 
   get value() {
@@ -17742,6 +17815,11 @@ class FigChooser extends HTMLElement {
     this.setAttribute("value", String(val));
   }
 
+  scrollSelectionIntoView(options = {}) {
+    if (!this.#selectedChoice) return;
+    this.#scrollToChoice(this.#selectedChoice, options);
+  }
+
   connectedCallback() {
     this.setAttribute("role", "listbox");
     if (this.shadowRoot) this.shadowRoot.replaceChildren();
@@ -17765,9 +17843,9 @@ class FigChooser extends HTMLElement {
 
   #scheduleInitialScrollSettle() {
     const resettle = () => {
-      if (!this.isConnected) return;
+      if (!this.isConnected || !this.autoScroll) return;
       if (this.#selectedChoice) {
-        this.#scrollToChoice(this.#selectedChoice, "auto");
+        this.#scrollToChoice(this.#selectedChoice);
       }
     };
     const wireImages = () => {
@@ -17843,6 +17921,9 @@ class FigChooser extends HTMLElement {
       }
       this.#resettleSelectedChoice();
     }
+    if (name === "auto-scroll" && this.autoScroll) {
+      this.#resettleSelectedChoice();
+    }
   }
 
   #syncSelection() {
@@ -17986,7 +18067,7 @@ class FigChooser extends HTMLElement {
 
     if (nextIndex !== currentIndex && choices[nextIndex]) {
       this.selectedChoice = choices[nextIndex];
-      choices[nextIndex].focus();
+      choices[nextIndex].focus({ preventScroll: !this.autoScroll });
       this.#emitEvents();
     }
   }
@@ -18196,16 +18277,25 @@ class FigChooser extends HTMLElement {
 
   #scrollByPage(direction) {
     const isHorizontal = this.getAttribute("layout") === "horizontal";
-    figScrollOverflowPage(this, isHorizontal ? "x" : "y", direction);
+    figScrollOverflowPage(this, isHorizontal ? "x" : "y", direction, "auto");
   }
 
   #resettleSelectedChoice() {
-    if (!this.#selectedChoice) return;
-    this.#scrollToChoice(this.#selectedChoice, "auto");
+    if (!this.autoScroll || !this.#selectedChoice) return;
+    this.#scrollToChoice(this.#selectedChoice);
   }
 
-  #scrollToChoice(el, behavior = "smooth") {
+  #scrollToChoice(el, options = {}) {
     if (!el) return;
+    const scrollOptions =
+      typeof options === "object" && options !== null ? options : {};
+    const behavior =
+      scrollOptions.behavior === "smooth" ||
+      scrollOptions.behavior === "instant"
+        ? scrollOptions.behavior
+        : "auto";
+    const block = scrollOptions.block || "center";
+    const inline = scrollOptions.inline || "center";
     requestAnimationFrame(() => {
       if (!el.isConnected) return;
       const overflowY = this.scrollHeight > this.clientHeight;
@@ -18220,9 +18310,13 @@ class FigChooser extends HTMLElement {
       if (overflowY) {
         const choiceTop = choiceRect.top - hostRect.top + this.scrollTop;
         const maxScroll = this.scrollHeight - this.clientHeight;
-        options.top = Math.max(
-          0,
-          Math.min(choiceTop + choiceRect.height / 2 - this.clientHeight / 2, maxScroll),
+        options.top = this.#alignedScrollPosition(
+          choiceTop,
+          choiceRect.height,
+          this.clientHeight,
+          this.scrollTop,
+          maxScroll,
+          block,
         );
         shouldScroll = true;
       }
@@ -18230,9 +18324,13 @@ class FigChooser extends HTMLElement {
       if (overflowX) {
         const choiceLeft = choiceRect.left - hostRect.left + this.scrollLeft;
         const maxScroll = this.scrollWidth - this.clientWidth;
-        options.left = Math.max(
-          0,
-          Math.min(choiceLeft + choiceRect.width / 2 - this.clientWidth / 2, maxScroll),
+        options.left = this.#alignedScrollPosition(
+          choiceLeft,
+          choiceRect.width,
+          this.clientWidth,
+          this.scrollLeft,
+          maxScroll,
+          inline,
         );
         shouldScroll = true;
       }
@@ -18244,6 +18342,36 @@ class FigChooser extends HTMLElement {
     });
   }
 
+  #alignedScrollPosition(
+    elementStart,
+    elementSize,
+    viewportSize,
+    currentScroll,
+    maxScroll,
+    alignment,
+  ) {
+    let nextScroll;
+    if (alignment === "start") {
+      nextScroll = elementStart;
+    } else if (alignment === "end") {
+      nextScroll = elementStart + elementSize - viewportSize;
+    } else if (alignment === "nearest") {
+      const viewportStart = currentScroll;
+      const viewportEnd = currentScroll + viewportSize;
+      const elementEnd = elementStart + elementSize;
+      if (elementStart >= viewportStart && elementEnd <= viewportEnd) {
+        nextScroll = currentScroll;
+      } else if (elementStart < viewportStart) {
+        nextScroll = elementStart;
+      } else {
+        nextScroll = elementEnd - viewportSize;
+      }
+    } else {
+      nextScroll = elementStart + elementSize / 2 - viewportSize / 2;
+    }
+    return Math.max(0, Math.min(nextScroll, maxScroll));
+  }
+
   #startObserver() {
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = new MutationObserver(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.9.29",
+  "version": "8.9.31",
   "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",