@rogieking/figui3 6.20.2 → 6.21.1

package/fig-lab.css

@@ -137,27 +137,33 @@ fig-content:has(> propskit-group[name]:last-child) {
   padding-bottom: 0;
 }
 
-/* Large size: more left field padding; nudge trailing controls in from the right.
-   propskit-select applies left inset on label + trigger button instead (below). */
+/* Default/large size: more left field padding; nudge trailing controls in from
+   the right. propskit-select applies left inset on label + trigger instead. */
 :is(
   propskit-switch,
   propskit-color,
   propskit-text,
   propskit-number,
   propskit-slider
-)[size="large"] {
+):is(:not([size]), [size="large"]) {
   fig-field:not([direction="vertical"]) {
     padding-left: var(--spacer-2-5);
   }
 }
 
 /* Flex-positioned numbers — margin works. Absolute numbers use right: calc(...) below. */
-:is(propskit-color, propskit-number)[size="large"] {
+:is(propskit-color, propskit-number):is(:not([size]), [size="large"]) {
   fig-field fig-input-number {
     margin-right: var(--spacer-1);
   }
 }
 
+propskit-text:is(:not([size]), [size="large"]) {
+  fig-field > fig-input-text {
+    margin-right: var(--spacer-1);
+  }
+}
+
 propskit-switch {
   --propskit-switch-height: 2rem;
   --propskit-switch-vertical-padding: var(--spacer-1);
@@ -169,6 +175,7 @@ propskit-switch {
   padding: var(--propskit-switch-vertical-padding)
     var(--propskit-switch-horizontal-padding);
 
+  &:not([size]),
   &[size="large"] {
     --propskit-switch-vertical-padding: 0px;
 
@@ -245,6 +252,7 @@ propskit-color {
   padding: var(--propskit-color-vertical-padding)
     var(--propskit-color-horizontal-padding);
 
+  &:not([size]),
   &[size="large"] {
     --propskit-color-vertical-padding: 0px;
   }
@@ -368,6 +376,7 @@ propskit-select {
   padding: var(--propskit-select-vertical-padding)
     var(--propskit-select-horizontal-padding);
 
+  &:not([size]),
   &[size="large"] {
     --propskit-select-vertical-padding: 0px;
 
@@ -477,6 +486,7 @@ propskit-text {
   padding: var(--propskit-text-vertical-padding)
     var(--propskit-text-horizontal-padding);
 
+  &:not([size]),
   &[size="large"] {
     --propskit-text-vertical-padding: 0px;
   }
@@ -586,6 +596,7 @@ propskit-number {
   padding: var(--propskit-number-vertical-padding)
     var(--propskit-number-horizontal-padding);
 
+  &:not([size]),
   &[size="large"] {
     --propskit-number-vertical-padding: 0px;
 
@@ -714,6 +725,7 @@ propskit-slider {
   padding-left: var(--propskit-slider-horizontal-padding);
   padding-right: var(--propskit-slider-horizontal-padding);
 
+  &:not([size]),
   &[size="large"] {
     --propskit-slider-vertical-padding: 0px;
     --propskit-slider-fig-slider-thumb-height: calc(
@@ -1496,9 +1508,9 @@ fig-select::part(listbox) {
   background-color: var(--fig-popup-bg-color);
   color: var(--figma-color-text-menu);
   color-scheme: dark;
-  box-shadow: var(--figma-elevation-100);
+  box-shadow: var(--figma-elevation-400-menu-panel);
   /* width/min/max set in JS — ::part width rules override element.style. */
-  max-height: min(20rem, calc(100vh - 1rem));
+  max-height: calc(100vh - 1rem);
   height: max-content;
 }
 
@@ -1512,7 +1524,7 @@ fig-select-options {
   gap: 0;
   width: 100%;
   max-width: 100%;
-  max-height: min(20rem, calc(100vh - 1rem));
+  max-height: calc(100vh - 1rem);
   /* No block padding — sticky overflow buttons must sit flush to the popup edges. */
   padding: 0;
   overflow: hidden auto;
@@ -1595,56 +1607,35 @@ fig-select-options {
   & > fig-menu-separator {
     --fig-menu-separator-color: var(--figma-color-border-menu);
     --fig-menu-separator-label-color: var(--figma-color-text-menu-secondary);
-    /* Align label with option text (padding + checkmark column). */
-    --fig-menu-item-padding: calc(var(--spacer-1) * 2 + var(--spacer-1) + 1rem);
+
+    /* Align label with option text (padding + checkmark column).
+       Negative margins on ::before must match this padding exactly so the
+       rule bleeds to the listbox edges (base rule uses --fig-menu-item-padding). */
     &[label]:not([label=""]) {
       padding-left: var(--spacer-5);
       padding-right: var(--spacer-2);
+
+      &::before {
+        margin-inline: unset;
+        margin-left: calc(-1 * var(--spacer-5));
+        margin-right: calc(-1 * var(--spacer-2));
+      }
     }
   }
 }
 
-/*
-[label]:not([label=""]) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2);
-    height: auto;
-    margin: var(--spacer-2) 0;
-    margin-bottom: var(--spacer-1);
-    padding: 0 var(--spacer-2) 0 var(--fig-menu-item-padding, var(--spacer-4));
-    background: transparent;
-
-    &::before {
-      content: "";
-      display: block;
-      height: 1px;
-      margin-left: calc(-1 * var(--fig-menu-item-padding, var(--spacer-4)));
-      margin-right: calc(-1 * var(--spacer-2));
-      background: var(--fig-menu-separator-color);
-    }
-
-    &::after {
-      content: attr(label);
-      display: block;
-      color: var(--fig-menu-separator-label-color);
-      line-height: var(--spacer-4);
-      min-height: var(--spacer-4);
-    }
-  }*/
-
 fig-select-option {
   /* Match fig-dropdown[experimental~="modern"] option + option::checkmark */
   display: flex;
   align-items: center;
-  gap: var(--spacer-1);
+  gap: 0;
   position: relative;
-  height: var(--spacer-4);
-  padding: 0 var(--spacer-2);
+  min-height: var(--spacer-4);
+  height: auto;
+  padding: var(--spacer-1) var(--spacer-2);
   padding-right: var(--spacer-3);
   border-radius: var(--radius-medium);
   color: var(--figma-color-text-menu);
-  font-weight: var(--body-medium-fontWeight);
   cursor: default;
   user-select: none;
 
@@ -1678,6 +1669,24 @@ fig-select-option {
     visibility: hidden;
   }
 
+  & > [slot="prepend"] {
+    margin-top: calc(var(--spacer-1) * -1);
+    margin-bottom: calc(var(--spacer-1) * -1);
+    margin-right: var(--spacer-1);
+  }
+
+
+  & > :not([slot="prepend"]):not([slot="append"]) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  & > [slot="append"] {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    color: var(--figma-color-text-tertiary);
+  }
+
   &:hover,
   &:focus-visible {
     outline: none;

package/fig-lab.js

@@ -8,6 +8,12 @@
  *   <script src="fig-lab.js"></script>
  */
 
+function figLabDefineElement(name, constructor) {
+  if (!customElements.get(name)) {
+    customElements.define(name, constructor);
+  }
+}
+
 function figLabBooleanAttribute(element, name) {
   return element.hasAttribute(name) && element.getAttribute(name) !== "false";
 }
@@ -128,12 +134,12 @@ class PropskitSwitch extends HTMLElement {
     const reserved = new Set([
       "label",
       "direction",
+      "size",
       "oninput",
       "onchange",
       "class",
       "style",
       "id",
-      "size",
       "checked",
       "value",
     ]);
@@ -230,7 +236,7 @@ class PropskitSwitch extends HTMLElement {
     selected?.focus(options);
   }
 }
-customElements.define("propskit-switch", PropskitSwitch);
+figLabDefineElement("propskit-switch", PropskitSwitch);
 
 /* Field + Color wrapper */
 class PropskitColor extends HTMLElement {
@@ -516,7 +522,7 @@ class PropskitColor extends HTMLElement {
     this.#input?.querySelector("input:not([tabindex='-1'])")?.focus(options);
   }
 }
-customElements.define("propskit-color", PropskitColor);
+figLabDefineElement("propskit-color", PropskitColor);
 
 /* Field + Select wrapper */
 class PropskitSelect extends HTMLElement {
@@ -771,7 +777,7 @@ class PropskitSelect extends HTMLElement {
     this.#select?.focus(options);
   }
 }
-customElements.define("propskit-select", PropskitSelect);
+figLabDefineElement("propskit-select", PropskitSelect);
 
 /* Field + Text wrapper */
 class PropskitText extends HTMLElement {
@@ -981,7 +987,7 @@ class PropskitText extends HTMLElement {
     this.#input?.focus(options);
   }
 }
-customElements.define("propskit-text", PropskitText);
+figLabDefineElement("propskit-text", PropskitText);
 
 /* Field + Number wrapper */
 class PropskitNumber extends HTMLElement {
@@ -1094,6 +1100,7 @@ class PropskitNumber extends HTMLElement {
     const reserved = new Set([
       "label",
       "direction",
+      "size",
       "oninput",
       "onchange",
       "class",
@@ -1180,7 +1187,7 @@ class PropskitNumber extends HTMLElement {
     this.#input?.focus(options);
   }
 }
-customElements.define("propskit-number", PropskitNumber);
+figLabDefineElement("propskit-number", PropskitNumber);
 
 /* Collapsible property group — always collapsible (no collapsible attr). */
 class PropskitGroup extends HTMLElement {
@@ -1571,7 +1578,7 @@ class PropskitGroup extends HTMLElement {
     }
   }
 }
-customElements.define("propskit-group", PropskitGroup);
+figLabDefineElement("propskit-group", PropskitGroup);
 
 /* Field + Slider wrapper */
 class PropskitSlider extends HTMLElement {
@@ -2191,7 +2198,7 @@ class PropskitSlider extends HTMLElement {
     this.#resetToDefault();
   }
 }
-customElements.define("propskit-slider", PropskitSlider);
+figLabDefineElement("propskit-slider", PropskitSlider);
 
 /* Canvas Control */
 class FigCanvasControl extends HTMLElement {
@@ -3488,7 +3495,7 @@ class FigCanvasControl extends HTMLElement {
     }
   }
 }
-customElements.define("fig-canvas-control", FigCanvasControl);
+figLabDefineElement("fig-canvas-control", FigCanvasControl);
 
 /* Oscillator Input */
 /**
@@ -4390,7 +4397,7 @@ class PropskitOscillator extends HTMLElement {
     );
   }
 }
-customElements.define("propskit-oscillator", PropskitOscillator);
+figLabDefineElement("propskit-oscillator", PropskitOscillator);
 
 /* Angle Input */
 /**
@@ -4908,7 +4915,7 @@ class FigInputAngle extends HTMLElement {
     }
   }
 }
-customElements.define("fig-input-angle", FigInputAngle);
+figLabDefineElement("fig-input-angle", FigInputAngle);
 
 /* Reorder wrapper */
 class FigReorder extends HTMLElement {
@@ -5343,7 +5350,7 @@ class FigReorder extends HTMLElement {
   }
 }
 
-customElements.define("fig-reorder", FigReorder);
+figLabDefineElement("fig-reorder", FigReorder);
 
 /* Select — dropdown-styled trigger + fig-popup listbox */
 let figLabSelectId = 0;
@@ -5384,9 +5391,19 @@ function figLabOptionEntryLabel(opt) {
   return String(opt ?? "");
 }
 
+/**
+ * A selectable option for fig-select.
+ * Supports light-DOM slots: `slot="prepend"` (leading) and `slot="append"` (trailing).
+ * Use the `label` attribute for the closed-trigger label when option content is rich.
+ *
+ * @attr {string} value - Option value
+ * @attr {string} label - Optional display label for the select trigger
+ * @attr {boolean} disabled - Whether the option is disabled
+ * @attr {boolean} selected - Whether the option is selected
+ */
 class FigSelectOption extends HTMLElement {
   static get observedAttributes() {
-    return ["value", "disabled", "selected"];
+    return ["value", "disabled", "selected", "label"];
   }
 
   get value() {
@@ -5443,7 +5460,7 @@ class FigSelectOption extends HTMLElement {
     }
   }
 }
-customElements.define("fig-select-option", FigSelectOption);
+figLabDefineElement("fig-select-option", FigSelectOption);
 
 function figLabSyncOverflowState(host, scrollEl, threshold = 2) {
   if (!host || !scrollEl) return false;
@@ -5586,7 +5603,7 @@ class FigSelectOptions extends HTMLElement {
     this.classList.remove("overflow-start", "overflow-end");
   }
 }
-customElements.define("fig-select-options", FigSelectOptions);
+figLabDefineElement("fig-select-options", FigSelectOptions);
 
 class FigSelect extends HTMLElement {
   #button = null;
@@ -5599,8 +5616,14 @@ class FigSelect extends HTMLElement {
   #syncingValue = false;
   #popupPositionPatched = false;
   #originalPositionPopup = null;
-  /** After open align, stop repositioning so overflow scroll isn't yanked back. */
+  /**
+   * After open align, ignore content/scroll-driven positionPopup passes so
+   * overflow paging isn't yanked back. Still realign when the trigger moves
+   * or the viewport size changes (window resize, layout shift, page scroll).
+   */
   #freezeMenuPosition = false;
+  #frozenLabelRect = null;
+  #frozenViewport = null;
   #syncingOptions = false;
   #boundTriggerClick = this.#handleTriggerClick.bind(this);
   #boundOptionClick = this.#handleOptionClick.bind(this);
@@ -5871,6 +5894,12 @@ class FigSelect extends HTMLElement {
     popup.setAttribute("part", "listbox");
     popup.setAttribute("theme", "menu");
     popup.setAttribute("role", "listbox");
+    // Top-layer via popover so the menu escapes ancestor contain/overflow
+    // (e.g. fig-fill-picker-dialog). Stays in shadow so option slots still work —
+    // unlike tooltips, we cannot portal this popup to the overlay root.
+    if ("popover" in HTMLElement.prototype) {
+      popup.setAttribute("popover", "manual");
+    }
     popup.id = figLabUniqueId("fig-select-list");
     button.setAttribute("aria-controls", popup.id);
 
@@ -5930,10 +5959,73 @@ class FigSelect extends HTMLElement {
     return { top: 8, right: 8, bottom: 8, left: 8 };
   }
 
+  #readLabelRectSnapshot() {
+    const rect = this.#labelEl?.getBoundingClientRect();
+    if (!rect) return null;
+    return {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    };
+  }
+
+  #readViewportSnapshot() {
+    const vv = window.visualViewport;
+    return {
+      width: vv?.width ?? window.innerWidth,
+      height: vv?.height ?? window.innerHeight,
+      offsetLeft: vv?.offsetLeft ?? 0,
+      offsetTop: vv?.offsetTop ?? 0,
+    };
+  }
+
+  #rectSnapshotChanged(prev, next, epsilon = 0.25) {
+    if (!prev && !next) return false;
+    if (!prev || !next) return true;
+    return (
+      Math.abs(prev.x - next.x) > epsilon ||
+      Math.abs(prev.y - next.y) > epsilon ||
+      Math.abs(prev.width - next.width) > epsilon ||
+      Math.abs(prev.height - next.height) > epsilon
+    );
+  }
+
+  #viewportSnapshotChanged(prev, next, epsilon = 0.25) {
+    if (!prev && !next) return false;
+    if (!prev || !next) return true;
+    return (
+      Math.abs(prev.width - next.width) > epsilon ||
+      Math.abs(prev.height - next.height) > epsilon ||
+      Math.abs(prev.offsetLeft - next.offsetLeft) > epsilon ||
+      Math.abs(prev.offsetTop - next.offsetTop) > epsilon
+    );
+  }
+
+  #shouldSkipFrozenPositionPass() {
+    if (!this.#freezeMenuPosition) return false;
+    const labelMoved = this.#rectSnapshotChanged(
+      this.#frozenLabelRect,
+      this.#readLabelRectSnapshot(),
+    );
+    const viewportChanged = this.#viewportSnapshotChanged(
+      this.#frozenViewport,
+      this.#readViewportSnapshot(),
+    );
+    // Skip only when neither the trigger nor the viewport moved — typical of
+    // overflow scroll / content sync fighting the open-time alignment.
+    return !labelMoved && !viewportChanged;
+  }
+
+  #rememberFrozenGeometry() {
+    this.#frozenLabelRect = this.#readLabelRectSnapshot();
+    this.#frozenViewport = this.#readViewportSnapshot();
+  }
+
   #positionPopupOverSelected() {
-    // Content ResizeObserver / anchor tracking re-enter here after overflow
-    // scroll; keep the open-time alignment instead of fighting the scroller.
-    if (this.#freezeMenuPosition) return;
+    // Content ResizeObserver / overflow scroll re-enter here; keep the
+    // open-time alignment unless the trigger or viewport actually changed.
+    if (this.#shouldSkipFrozenPositionPass()) return;
 
     const popup = this.#popup;
     const label = this.#labelEl;
@@ -6011,6 +6103,10 @@ class FigSelect extends HTMLElement {
       }
       panel.syncOverflow?.();
     }
+
+    if (this.#freezeMenuPosition || this.open) {
+      this.#rememberFrozenGeometry();
+    }
   }
 
   #setupListeners() {
@@ -6055,7 +6151,8 @@ class FigSelect extends HTMLElement {
           mutation.type === "attributes" &&
           mutation.target?.tagName === "FIG-SELECT-OPTION" &&
           (mutation.attributeName === "value" ||
-            mutation.attributeName === "disabled")
+            mutation.attributeName === "disabled" ||
+            mutation.attributeName === "label")
         ) {
           needsSync = true;
         }
@@ -6073,7 +6170,7 @@ class FigSelect extends HTMLElement {
       subtree: true,
       characterData: true,
       attributes: true,
-      attributeFilter: ["value", "disabled", "selected"],
+      attributeFilter: ["value", "disabled", "selected", "label"],
     });
   }
 
@@ -6095,7 +6192,26 @@ class FigSelect extends HTMLElement {
   }
 
   #optionLabel(option) {
-    return (option?.textContent || "").trim();
+    if (!option) return "";
+    const labelAttr = option.getAttribute?.("label");
+    if (labelAttr != null && labelAttr !== "") return labelAttr.trim();
+
+    // Ignore prepend/append slot content when deriving a label from children.
+    const parts = [];
+    for (const node of option.childNodes) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent?.trim();
+        if (text) parts.push(text);
+        continue;
+      }
+      if (!(node instanceof Element)) continue;
+      const slot = node.getAttribute("slot");
+      if (slot === "prepend" || slot === "append") continue;
+      const text = node.textContent?.trim();
+      if (text) parts.push(text);
+    }
+    if (parts.length) return parts.join(" ").trim();
+    return (option.textContent || "").trim();
   }
 
   #syncPopupAttrs() {
@@ -6375,6 +6491,8 @@ class FigSelect extends HTMLElement {
     if (this.#button) this.#popup.anchor = this.#button;
     this.#installPopupPositioning();
     this.#freezeMenuPosition = false;
+    this.#frozenLabelRect = null;
+    this.#frozenViewport = null;
     this.#syncValue();
     this.#syncPopupWidth();
     this.#popup.open = true;
@@ -6399,16 +6517,20 @@ class FigSelect extends HTMLElement {
       }
       panel?.syncOverflow?.();
       // Freeze after open align so later positionPopup passes don't undo scroll.
+      // Window resize / trigger movement still realigns via geometry checks.
       this.#freezeMenuPosition = true;
+      this.#rememberFrozenGeometry();
     });
   }
 
   #closeList() {
     if (!this.#popup) return;
     this.#freezeMenuPosition = false;
+    this.#frozenLabelRect = null;
+    this.#frozenViewport = null;
     document.removeEventListener("keydown", this.#boundKeydown, true);
     this.#popup.open = false;
     this.#button?.setAttribute("aria-expanded", "false");
   }
 }
-customElements.define("fig-select", FigSelect);
+figLabDefineElement("fig-select", FigSelect);