@rogieking/figui3 3.2.0 → 3.4.0

package/fig.js

@@ -2253,15 +2253,15 @@ class FigTabs extends HTMLElement {
     this.setAttribute("role", "tablist");
     this.addEventListener("click", this.handleClick.bind(this));
     this.addEventListener("keydown", this.#handleKeyDown.bind(this));
-    // Set initial selected tab based on value
-    const value = this.getAttribute("value");
-    if (value) {
-      this.#selectByValue(value);
-    }
-    // Apply disabled state
-    if (this.hasAttribute("disabled")) {
-      this.#applyDisabled(true);
-    }
+    requestAnimationFrame(() => {
+      const value = this.getAttribute("value");
+      if (value) {
+        this.#selectByValue(value);
+      }
+      if (this.hasAttribute("disabled")) {
+        this.#applyDisabled(true);
+      }
+    });
   }
 
   #applyDisabled(disabled) {
@@ -2333,6 +2333,7 @@ class FigTabs extends HTMLElement {
     for (const tab of tabs) {
       if (tab.getAttribute("value") === value) {
         this.selectedTab = tab;
+        tab.setAttribute("selected", "true");
       } else {
         tab.removeAttribute("selected");
       }
@@ -2353,7 +2354,6 @@ class FigTabs extends HTMLElement {
   }
 
   handleClick(event) {
-    // Ignore clicks when disabled
     if (this.hasAttribute("disabled")) return;
     const target = event.target;
     if (target.nodeName.toLowerCase() === "fig-tab") {
@@ -2361,6 +2361,7 @@ class FigTabs extends HTMLElement {
       for (const tab of tabs) {
         if (tab === target) {
           this.selectedTab = tab;
+          tab.setAttribute("selected", "true");
           this.setAttribute("value", tab.getAttribute("value") || "");
         } else {
           tab.removeAttribute("selected");
@@ -3459,20 +3460,46 @@ class FigInputNumber extends HTMLElement {
   #unitPosition;
   #precision;
   #isInteracting = false;
+  #stepperEl = null;
+
+  #syncSteppers(hasSteppers) {
+    if (hasSteppers && !this.#stepperEl) {
+      this.#stepperEl = document.createElement("span");
+      this.#stepperEl.className = "fig-steppers";
+      this.#stepperEl.innerHTML =
+        `<button class="fig-stepper-up" tabindex="-1" aria-label="Increase"></button>` +
+        `<button class="fig-stepper-down" tabindex="-1" aria-label="Decrease"></button>`;
+      this.#stepperEl.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const btn = e.target.closest("button");
+        if (!btn || this.disabled) return;
+        const dir = btn.classList.contains("fig-stepper-up") ? 1 : -1;
+        this.#stepValue(dir);
+        this.input.focus();
+      });
+      this.append(this.#stepperEl);
+    } else if (!hasSteppers && this.#stepperEl) {
+      this.#stepperEl.remove();
+      this.#stepperEl = null;
+    }
+  }
 
-  #syncNativeNumberAttributes() {
-    if (!this.input || this.input.type !== "number") return;
-
-    ["min", "max", "step"].forEach((name) => {
-      const attrValue = this.getAttribute(name);
-      if (attrValue === null || attrValue === "") {
-        this.input.removeAttribute(name);
-        this.input[name] = "";
-        return;
-      }
-      this.input.setAttribute(name, attrValue);
-      this.input[name] = attrValue;
-    });
+  #stepValue(direction) {
+    const step = this.step || 1;
+    let numericValue = this.#getNumericValue(this.input.value);
+    let value =
+      (numericValue !== "" ? Number(numericValue) / (this.transform || 1) : 0) +
+      step * direction;
+    value = this.#sanitizeInput(value, false);
+    this.value = value;
+    this.input.value = this.#formatWithUnit(this.value);
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value, bubbles: true }),
+    );
   }
 
   constructor() {
@@ -3528,19 +3555,12 @@ class FigInputNumber extends HTMLElement {
       this.hasAttribute("steppers") &&
       this.getAttribute("steppers") !== "false";
 
-    // Use type="number" when steppers are enabled (for native spin buttons)
-    const inputType = hasSteppers ? "number" : "text";
-    const inputMode = hasSteppers ? "" : 'inputmode="decimal"';
-    const inputValue = hasSteppers
-      ? this.#transformNumber(this.value)
-      : this.#formatWithUnit(this.value);
-
     let html = `<input 
-      type="${inputType}"
-      ${inputMode}
+      type="text"
+      inputmode="decimal"
       ${this.name ? `name="${this.name}"` : ""}
       placeholder="${this.placeholder}"
-      value="${inputValue}" />`;
+      value="${this.#formatWithUnit(this.value)}" />`;
 
     //child nodes hack
     requestAnimationFrame(() => {
@@ -3569,7 +3589,8 @@ class FigInputNumber extends HTMLElement {
       if (this.getAttribute("step")) {
         this.step = Number(this.getAttribute("step"));
       }
-      this.#syncNativeNumberAttributes();
+
+      this.#syncSteppers(hasSteppers);
 
       // Set disabled state if present
       if (this.hasAttribute("disabled")) {
@@ -3845,24 +3866,15 @@ class FigInputNumber extends HTMLElement {
           break;
         case "units":
           this.#units = newValue || "";
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "unit-position":
           this.#unitPosition = newValue || "suffix";
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "transform":
           this.transform = Number(newValue) || 1;
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "value":
           if (this.#isInteracting) break;
@@ -3872,41 +3884,25 @@ class FigInputNumber extends HTMLElement {
             value = this.#sanitizeInput(value, false);
           }
           this.value = value;
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "min":
         case "max":
         case "step":
           if (newValue === null || newValue === "") {
             this[name] = undefined;
-            this.#syncNativeNumberAttributes();
             break;
           }
           this[name] = Number(newValue);
-          this.#syncNativeNumberAttributes();
           break;
         case "steppers": {
           const hasSteppers = newValue !== null && newValue !== "false";
-          this.input.type = hasSteppers ? "number" : "text";
-          if (hasSteppers) {
-            this.input.removeAttribute("inputmode");
-            this.#syncNativeNumberAttributes();
-            this.input.value = this.#transformNumber(this.value);
-          } else {
-            this.input.setAttribute("inputmode", "decimal");
-            this.input.value = this.#formatWithUnit(this.value);
-          }
+          this.#syncSteppers(hasSteppers);
           break;
         }
         case "precision":
           this.#precision = newValue !== null ? Number(newValue) : 2;
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "name":
           this[name] = this.input[name] = newValue;
@@ -5425,10 +5421,18 @@ class FigToast extends HTMLDialogElement {
     }
   }
 
+  #resolveAutoTheme() {
+    if (this.getAttribute("theme") !== "auto") return;
+    const cs = getComputedStyle(document.documentElement).colorScheme || "";
+    const isDark = cs.includes("dark");
+    this.style.colorScheme = isDark ? "light" : "dark";
+  }
+
   /**
    * Show the toast notification (non-modal)
    */
   showToast() {
+    this.#resolveAutoTheme();
     this.show(); // Non-modal show
     this.applyPosition();
     this.startAutoClose();
@@ -5460,6 +5464,14 @@ class FigToast extends HTMLDialogElement {
         this.hideToast();
       }
     }
+
+    if (name === "theme") {
+      if (newValue === "auto") {
+        this.#resolveAutoTheme();
+      } else {
+        this.style.removeProperty("color-scheme");
+      }
+    }
   }
 }
 figDefineCustomizedBuiltIn("fig-toast", FigToast, { extends: "dialog" });
@@ -10390,3 +10402,554 @@ class FigFillPicker extends HTMLElement {
   }
 }
 customElements.define("fig-fill-picker", FigFillPicker);
+
+/* Choice */
+/**
+ * A generic choice container for use within FigChooser.
+ * @attr {string} value - Identifier for this choice
+ * @attr {boolean} selected - Whether this choice is currently selected
+ * @attr {boolean} disabled - Whether this choice is disabled
+ */
+class FigChoice extends HTMLElement {
+  static get observedAttributes() {
+    return ["selected", "disabled"];
+  }
+
+  connectedCallback() {
+    this.setAttribute("role", "option");
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    this.setAttribute(
+      "aria-selected",
+      this.hasAttribute("selected") ? "true" : "false",
+    );
+    if (this.hasAttribute("disabled")) {
+      this.setAttribute("aria-disabled", "true");
+    }
+  }
+
+  attributeChangedCallback(name) {
+    if (name === "selected") {
+      this.setAttribute(
+        "aria-selected",
+        this.hasAttribute("selected") ? "true" : "false",
+      );
+    }
+    if (name === "disabled") {
+      const isDisabled =
+        this.hasAttribute("disabled") &&
+        this.getAttribute("disabled") !== "false";
+      if (isDisabled) {
+        this.setAttribute("aria-disabled", "true");
+        this.setAttribute("tabindex", "-1");
+      } else {
+        this.removeAttribute("aria-disabled");
+        this.setAttribute("tabindex", "0");
+      }
+    }
+  }
+}
+customElements.define("fig-choice", FigChoice);
+
+/* Chooser */
+/**
+ * A selection controller for a list of choice elements.
+ * @attr {string} choice-element - CSS selector for child choices (default: "fig-choice")
+ * @attr {string} layout - Layout mode: "vertical" (default), "horizontal", "grid"
+ * @attr {string} value - Value of the currently selected choice
+ * @attr {boolean} disabled - Whether the chooser is disabled
+ */
+class FigChooser extends HTMLElement {
+  #selectedChoice = null;
+  #boundHandleClick = this.#handleClick.bind(this);
+  #boundHandleKeyDown = this.#handleKeyDown.bind(this);
+  #boundSyncOverflow = this.#syncOverflow.bind(this);
+  #mutationObserver = null;
+  #resizeObserver = null;
+  #navStart = null;
+  #navEnd = null;
+  #dragState = null;
+
+  constructor() {
+    super();
+  }
+
+  static get observedAttributes() {
+    return ["value", "disabled", "choice-element", "drag", "overflow", "loop"];
+  }
+
+  get #overflowMode() {
+    return this.getAttribute("overflow") === "scrollbar" ? "scrollbar" : "buttons";
+  }
+
+  get #dragEnabled() {
+    const attr = this.getAttribute("drag");
+    return attr === null || attr !== "false";
+  }
+
+  get #choiceSelector() {
+    return this.getAttribute("choice-element") || "fig-choice";
+  }
+
+  get choices() {
+    return Array.from(this.querySelectorAll(this.#choiceSelector));
+  }
+
+  get selectedChoice() {
+    return this.#selectedChoice;
+  }
+
+  set selectedChoice(element) {
+    if (element && !this.contains(element)) return;
+    const choices = this.choices;
+    for (const choice of choices) {
+      const shouldSelect = choice === element;
+      const isSelected = choice.hasAttribute("selected");
+      if (shouldSelect && !isSelected) {
+        choice.setAttribute("selected", "");
+      } else if (!shouldSelect && isSelected) {
+        choice.removeAttribute("selected");
+      }
+    }
+    this.#selectedChoice = element;
+    const val = element?.getAttribute("value") ?? "";
+    if (this.getAttribute("value") !== val) {
+      if (val) {
+        this.setAttribute("value", val);
+      }
+    }
+    this.#scrollToChoice(element);
+  }
+
+  get value() {
+    return this.#selectedChoice?.getAttribute("value") ?? "";
+  }
+
+  set value(val) {
+    if (val === null || val === undefined || val === "") return;
+    this.setAttribute("value", String(val));
+  }
+
+  connectedCallback() {
+    this.setAttribute("role", "listbox");
+    this.addEventListener("click", this.#boundHandleClick);
+    this.addEventListener("keydown", this.#boundHandleKeyDown);
+    this.addEventListener("scroll", this.#boundSyncOverflow);
+    this.#applyOverflowMode();
+    this.#setupDrag();
+    this.#startObserver();
+    this.#startResizeObserver();
+
+    requestAnimationFrame(() => {
+      this.#syncSelection();
+      this.#syncOverflow();
+    });
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this.#boundHandleClick);
+    this.removeEventListener("keydown", this.#boundHandleKeyDown);
+    this.removeEventListener("scroll", this.#boundSyncOverflow);
+    this.#teardownDrag();
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#removeNavButtons();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value" && newValue !== oldValue && newValue) {
+      this.#selectByValue(newValue);
+    }
+    if (name === "disabled") {
+      const isDisabled = newValue !== null && newValue !== "false";
+      const choices = this.choices;
+      for (const choice of choices) {
+        if (isDisabled) {
+          choice.setAttribute("aria-disabled", "true");
+          choice.setAttribute("tabindex", "-1");
+        } else {
+          choice.removeAttribute("aria-disabled");
+          choice.setAttribute("tabindex", "0");
+        }
+      }
+    }
+    if (name === "choice-element") {
+      requestAnimationFrame(() => this.#syncSelection());
+    }
+    if (name === "drag") {
+      if (this.#dragEnabled) {
+        this.#setupDrag();
+      } else {
+        this.#teardownDrag();
+      }
+    }
+    if (name === "overflow") {
+      this.#applyOverflowMode();
+    }
+  }
+
+  #syncSelection() {
+    const choices = this.choices;
+    if (!choices.length) {
+      this.#selectedChoice = null;
+      return;
+    }
+
+    const valueAttr = this.getAttribute("value");
+    if (valueAttr && this.#selectByValue(valueAttr)) return;
+
+    const alreadySelected = choices.find((c) => c.hasAttribute("selected"));
+    if (alreadySelected) {
+      this.selectedChoice = alreadySelected;
+      return;
+    }
+
+    this.selectedChoice = choices[0];
+  }
+
+  #selectByValue(value) {
+    const choices = this.choices;
+    for (const choice of choices) {
+      if (choice.getAttribute("value") === value) {
+        this.selectedChoice = choice;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  #findChoiceFromTarget(target) {
+    const selector = this.#choiceSelector;
+    let el = target;
+    while (el && el !== this) {
+      if (el.matches(selector)) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+
+  #handleClick(event) {
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    )
+      return;
+    const choice = this.#findChoiceFromTarget(event.target);
+    if (!choice) return;
+    if (
+      choice.hasAttribute("disabled") &&
+      choice.getAttribute("disabled") !== "false"
+    )
+      return;
+    this.selectedChoice = choice;
+    this.#emitEvents();
+  }
+
+  #handleKeyDown(event) {
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    )
+      return;
+    const choices = this.choices.filter(
+      (c) =>
+        !c.hasAttribute("disabled") || c.getAttribute("disabled") === "false",
+    );
+    if (!choices.length) return;
+    const currentIndex = choices.indexOf(this.#selectedChoice);
+    let nextIndex = currentIndex;
+
+    const loop = this.hasAttribute("loop");
+
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        if (currentIndex < choices.length - 1) {
+          nextIndex = currentIndex + 1;
+        } else if (loop) {
+          nextIndex = 0;
+        }
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        if (currentIndex > 0) {
+          nextIndex = currentIndex - 1;
+        } else if (loop) {
+          nextIndex = choices.length - 1;
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = choices.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (document.activeElement?.matches(this.#choiceSelector)) {
+          const focused = this.#findChoiceFromTarget(document.activeElement);
+          if (focused && focused !== this.#selectedChoice) {
+            this.selectedChoice = focused;
+            this.#emitEvents();
+          }
+        }
+        return;
+      default:
+        return;
+    }
+
+    if (nextIndex !== currentIndex && choices[nextIndex]) {
+      this.selectedChoice = choices[nextIndex];
+      choices[nextIndex].focus();
+      this.#emitEvents();
+    }
+  }
+
+  #emitEvents() {
+    const val = this.value;
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: val, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: val, bubbles: true }),
+    );
+  }
+
+  #syncOverflow() {
+    if (this.#overflowMode === "scrollbar") return;
+    const isHorizontal = this.getAttribute("layout") === "horizontal";
+    const threshold = 2;
+
+    if (isHorizontal) {
+      const atStart = this.scrollLeft <= threshold;
+      const atEnd = this.scrollLeft + this.clientWidth >= this.scrollWidth - threshold;
+      this.classList.toggle("overflow-start", !atStart);
+      this.classList.toggle("overflow-end", !atEnd);
+    } else {
+      const atStart = this.scrollTop <= threshold;
+      const atEnd = this.scrollTop + this.clientHeight >= this.scrollHeight - threshold;
+      this.classList.toggle("overflow-start", !atStart);
+      this.classList.toggle("overflow-end", !atEnd);
+    }
+  }
+
+  #startResizeObserver() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#syncOverflow();
+    });
+    this.#resizeObserver.observe(this);
+  }
+
+  #setupDrag() {
+    if (this.#dragState?.bound) return;
+    if (!this.#dragEnabled) return;
+
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      const isHorizontal = this.getAttribute("layout") === "horizontal";
+      const hasOverflow = isHorizontal
+        ? this.scrollWidth > this.clientWidth
+        : this.scrollHeight > this.clientHeight;
+      if (!hasOverflow) return;
+
+      this.#dragState.active = true;
+      this.#dragState.didDrag = false;
+      this.#dragState.startX = e.clientX;
+      this.#dragState.startY = e.clientY;
+      this.#dragState.scrollLeft = this.scrollLeft;
+      this.#dragState.scrollTop = this.scrollTop;
+      this.style.cursor = "grab";
+      this.style.userSelect = "none";
+    };
+
+    const onPointerMove = (e) => {
+      if (!this.#dragState.active) return;
+      const isHorizontal = this.getAttribute("layout") === "horizontal";
+      const dx = e.clientX - this.#dragState.startX;
+      const dy = e.clientY - this.#dragState.startY;
+
+      if (!this.#dragState.didDrag && Math.abs(isHorizontal ? dx : dy) > 3) {
+        this.#dragState.didDrag = true;
+        this.style.cursor = "grabbing";
+        this.setPointerCapture(e.pointerId);
+      }
+
+      if (!this.#dragState.didDrag) return;
+
+      if (isHorizontal) {
+        this.scrollLeft = this.#dragState.scrollLeft - dx;
+      } else {
+        this.scrollTop = this.#dragState.scrollTop - dy;
+      }
+    };
+
+    const onPointerUp = (e) => {
+      if (!this.#dragState.active) return;
+      const wasDrag = this.#dragState.didDrag;
+      this.#dragState.active = false;
+      this.#dragState.didDrag = false;
+      this.style.cursor = "";
+      this.style.userSelect = "";
+      if (e.pointerId !== undefined) {
+        try { this.releasePointerCapture(e.pointerId); } catch {}
+      }
+      if (wasDrag) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    const onClick = (e) => {
+      if (this.#dragState?.suppressClick) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.#dragState.suppressClick = false;
+      }
+    };
+
+    const onPointerUpCapture = (e) => {
+      if (this.#dragState?.didDrag) {
+        this.#dragState.suppressClick = true;
+        setTimeout(() => {
+          if (this.#dragState) this.#dragState.suppressClick = false;
+        }, 0);
+      }
+    };
+
+    this.#dragState = {
+      active: false,
+      didDrag: false,
+      suppressClick: false,
+      startX: 0,
+      startY: 0,
+      scrollLeft: 0,
+      scrollTop: 0,
+      bound: true,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onClick,
+      onPointerUpCapture,
+    };
+
+    this.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    this.addEventListener("pointerup", onPointerUpCapture, true);
+    this.addEventListener("click", onClick, true);
+  }
+
+  #teardownDrag() {
+    if (!this.#dragState?.bound) return;
+    this.removeEventListener("pointerdown", this.#dragState.onPointerDown);
+    window.removeEventListener("pointermove", this.#dragState.onPointerMove);
+    window.removeEventListener("pointerup", this.#dragState.onPointerUp);
+    this.removeEventListener("pointerup", this.#dragState.onPointerUpCapture, true);
+    this.removeEventListener("click", this.#dragState.onClick, true);
+    this.style.cursor = "";
+    this.style.userSelect = "";
+    this.#dragState = null;
+  }
+
+  #applyOverflowMode() {
+    if (this.#overflowMode === "scrollbar") {
+      this.#removeNavButtons();
+    } else {
+      this.#createNavButtons();
+    }
+  }
+
+  #removeNavButtons() {
+    this.#navStart?.remove();
+    this.#navEnd?.remove();
+    this.#navStart = null;
+    this.#navEnd = null;
+    this.classList.remove("overflow-start", "overflow-end");
+  }
+
+  #createNavButtons() {
+    if (this.#navStart) return;
+
+    this.#navStart = document.createElement("button");
+    this.#navStart.className = "fig-chooser-nav-start";
+    this.#navStart.setAttribute("tabindex", "-1");
+    this.#navStart.setAttribute("aria-label", "Scroll back");
+
+    this.#navEnd = document.createElement("button");
+    this.#navEnd.className = "fig-chooser-nav-end";
+    this.#navEnd.setAttribute("tabindex", "-1");
+    this.#navEnd.setAttribute("aria-label", "Scroll forward");
+
+    this.#navStart.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      this.#scrollByPage(-1);
+    });
+
+    this.#navEnd.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      this.#scrollByPage(1);
+    });
+
+    this.prepend(this.#navStart);
+    this.append(this.#navEnd);
+  }
+
+  #scrollByPage(direction) {
+    const isHorizontal =
+      this.getAttribute("layout") === "horizontal";
+    const pageSize = isHorizontal ? this.clientWidth : this.clientHeight;
+    const scrollAmount = pageSize * 0.8 * direction;
+
+    this.scrollBy({
+      [isHorizontal ? "left" : "top"]: scrollAmount,
+      behavior: "smooth",
+    });
+  }
+
+  #scrollToChoice(el) {
+    if (!el) return;
+    requestAnimationFrame(() => {
+      const overflowY = this.scrollHeight > this.clientHeight;
+      const overflowX = this.scrollWidth > this.clientWidth;
+      if (!overflowX && !overflowY) return;
+
+      const options = { behavior: "smooth" };
+
+      if (overflowY) {
+        const target = el.offsetTop - this.clientHeight / 2 + el.offsetHeight / 2;
+        options.top = target;
+      }
+
+      if (overflowX) {
+        const target = el.offsetLeft - this.clientWidth / 2 + el.offsetWidth / 2;
+        options.left = target;
+      }
+
+      this.scrollTo(options);
+    });
+  }
+
+  #startObserver() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = new MutationObserver(() => {
+      const choices = this.choices;
+      if (this.#selectedChoice && !choices.includes(this.#selectedChoice)) {
+        this.#selectedChoice = null;
+        this.#syncSelection();
+      } else if (!this.#selectedChoice && choices.length) {
+        this.#syncSelection();
+      }
+    });
+    this.#mutationObserver.observe(this, { childList: true, subtree: true });
+  }
+}
+customElements.define("fig-chooser", FigChooser);