@rogieking/figui3 8.9.28 → 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

@@ -600,7 +600,10 @@ class FigButton extends HTMLElement {
   #a11yAttributes = ["aria-label", "aria-labelledby", "aria-describedby", "title"];
   #boundHandleControlKeydown = this.#handleControlKeydown.bind(this);
   #boundHandleClick = this.#handleClick.bind(this);
-  #boundHandleSlotChange = () => this.#syncSlottedControlDisabled();
+  #boundHandleSlotChange = () => {
+    this.#syncSlottedControlDisabled();
+    this.#syncSelectChevron();
+  };
   #boundHandleFocus = () => {
     if (this.button?.matches(":focus-visible")) {
       this.setAttribute("data-focus-visible", "");
@@ -653,14 +656,22 @@ class FigButton extends HTMLElement {
         :host([size="large"][icon]) .fig-button-control {
           padding: 0;
         }
+        :host([type="select"]) .fig-button-control {
+          gap: var(--spacer-1);
+        }
       `;
+      const prependSlot = document.createElement("slot");
+      prependSlot.name = "prepend";
+      const defaultSlot = document.createElement("slot");
+      const appendSlot = document.createElement("slot");
+      appendSlot.name = "append";
       const control = figCreateElement(
         controlTag,
         {
           className: "fig-button-control",
           type: isControlWrapper ? null : "button",
         },
-        document.createElement("slot"),
+        [prependSlot, defaultSlot, appendSlot],
       );
       this.shadowRoot.replaceChildren(style, control);
 
@@ -670,9 +681,10 @@ class FigButton extends HTMLElement {
       this.button.addEventListener("blur", this.#boundHandleBlur);
     }
 
-    const slot = this.shadowRoot.querySelector("slot");
-    slot?.removeEventListener("slotchange", this.#boundHandleSlotChange);
-    slot?.addEventListener("slotchange", this.#boundHandleSlotChange);
+    this.shadowRoot.querySelectorAll("slot").forEach((slot) => {
+      slot.removeEventListener("slotchange", this.#boundHandleSlotChange);
+      slot.addEventListener("slotchange", this.#boundHandleSlotChange);
+    });
     this.removeEventListener("keydown", this.#boundHandleControlKeydown);
     this.addEventListener("keydown", this.#boundHandleControlKeydown);
 
@@ -681,6 +693,7 @@ class FigButton extends HTMLElement {
       this.getAttribute("selected") !== "false";
 
     this.#syncButtonAttributes();
+    this.#syncSelectChevron();
   }
 
   get type() {
@@ -767,6 +780,29 @@ class FigButton extends HTMLElement {
     this.setAttribute("aria-pressed", pressed ? "true" : "false");
     this.button.setAttribute("aria-pressed", pressed ? "true" : "false");
   }
+  #syncSelectChevron() {
+    const selector =
+      ':scope > fig-icon[slot="append"][data-generated="select-chevron"]';
+    const generatedIcons = Array.from(this.querySelectorAll(selector));
+    const generated = generatedIcons[0];
+    generatedIcons.slice(1).forEach((icon) => icon.remove());
+    if (this.type !== "select") {
+      generated?.remove();
+      return;
+    }
+    const authoredAppend = this.querySelector(
+      ':scope > [slot="append"]:not([data-generated])',
+    );
+    if (authoredAppend) {
+      generated?.remove();
+      return;
+    }
+    if (generated) return;
+    const chevron = createFigIcon("chevron", { size: "small" });
+    chevron.setAttribute("slot", "append");
+    chevron.setAttribute("data-generated", "select-chevron");
+    this.append(chevron);
+  }
   #syncA11yAttributes() {
     if (!this.button) return;
     if (!(this.button instanceof HTMLButtonElement)) return;
@@ -835,6 +871,7 @@ class FigButton extends HTMLElement {
           break;
         }
         this.#syncButtonAttributes();
+        this.#syncSelectChevron();
         break;
       }
       case "disabled":
@@ -851,9 +888,9 @@ class FigButton extends HTMLElement {
   }
   disconnectedCallback() {
     this.removeEventListener("keydown", this.#boundHandleControlKeydown);
-    this.shadowRoot
-      ?.querySelector("slot")
-      ?.removeEventListener("slotchange", this.#boundHandleSlotChange);
+    this.shadowRoot?.querySelectorAll("slot").forEach((slot) => {
+      slot.removeEventListener("slotchange", this.#boundHandleSlotChange);
+    });
   }
 }
 figDefineElement("fig-button", FigButton);
@@ -5663,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);
   }
 
@@ -5735,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();
@@ -5827,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,
@@ -5841,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);
@@ -5848,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();
   }
 
@@ -5901,6 +5924,10 @@ class FigSlider extends HTMLElement {
     if (this.input) this.#syncProperties();
   }
 
+  get defaultValue() {
+    return this.#resolveDefaultValue();
+  }
+
   disconnectedCallback() {
     this.#pendingRegeneration = false;
     if (this.input) {
@@ -5961,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);
@@ -6126,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() {
@@ -6146,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() {
@@ -6235,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":
@@ -11673,6 +11744,7 @@ class FigComboInput extends HTMLElement {
   ];
 
   #boundHandleDropdownInput = this.#handleDropdownInput.bind(this);
+  #boundHandleDropdownChange = this.#handleDropdownChange.bind(this);
   #boundHandleTextInput = this.#handleTextInput.bind(this);
   #boundHandleTextChange = this.#handleTextChange.bind(this);
 
@@ -11737,21 +11809,6 @@ class FigComboInput extends HTMLElement {
       placeholder,
       value: currentValue,
     });
-    const icon = figCreateSvgElement(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "none",
-      },
-      figCreateSvgElement("path", {
-        d: "M5.87868 7.12132L8 9.24264L10.1213 7.12132",
-        stroke: "currentColor",
-        "stroke-opacity": "0.9",
-        "stroke-linecap": "round",
-      }),
-    );
     const button = figCreateElement(
       "fig-button",
       {
@@ -11759,7 +11816,6 @@ class FigComboInput extends HTMLElement {
         variant: "input",
         icon: true,
       },
-      icon,
     );
     if (!this.#usesCustomDropdown) {
       button.appendChild(
@@ -11799,25 +11855,36 @@ class FigComboInput extends HTMLElement {
   #setupListeners() {
     this.#teardownListeners();
     this.#dropdown?.addEventListener("input", this.#boundHandleDropdownInput);
+    this.#dropdown?.addEventListener("change", this.#boundHandleDropdownChange);
     this.#input?.addEventListener("input", this.#boundHandleTextInput);
     this.#input?.addEventListener("change", this.#boundHandleTextChange);
   }
 
   #teardownListeners() {
     this.#dropdown?.removeEventListener("input", this.#boundHandleDropdownInput);
+    this.#dropdown?.removeEventListener("change", this.#boundHandleDropdownChange);
     this.#input?.removeEventListener("input", this.#boundHandleTextInput);
     this.#input?.removeEventListener("change", this.#boundHandleTextChange);
   }
 
   #handleDropdownInput(e) {
     e.stopPropagation();
+    this.#syncDropdownValue(e);
+    this.#emitInput();
+  }
+
+  #handleDropdownChange(e) {
+    e.stopPropagation();
+    this.#syncDropdownValue(e);
+    this.#emitChange();
+  }
+
+  #syncDropdownValue(e) {
     const val = e.target.closest("fig-dropdown")?.value ?? "";
     this.#internalUpdate = true;
     this.setAttribute("value", val);
     this.#internalUpdate = false;
     if (this.#input) this.#input.setAttribute("value", val);
-    this.#emitInput();
-    this.#emitChange();
   }
 
   #handleTextInput(e) {
@@ -16817,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;
@@ -16865,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) {
@@ -16877,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.28",
+  "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",