@rogieking/figui3 9.0.7 → 9.0.9

package/fig-editor.css

@@ -56,7 +56,6 @@ fig-interpolation-swatch {
 dialog[is="fig-toast"] {
   --fig-toast-bg-color: var(--figma-color-bg);
   --z-index: 999999;
-  contain: none;
   z-index: var(--z-index);
   box-shadow: var(--figma-elevation-100);
   border-radius: var(--radius-large);
@@ -150,7 +149,6 @@ fig-fill-picker {
 }
 
 .fig-fill-picker-dialog {
-  contain: layout;
   width: 240px;
   padding: 0;
 
@@ -320,7 +318,7 @@ fig-fill-picker {
     grid-template-columns: unset;
     grid-template-areas: unset;
     padding-right: var(--spacer-2);
-    padding-left: var(--spacer-3);
+    padding-left: var(--spacer-2);
     gap: var(--spacer-2);
 
     > *:not(.fig-field-chevron):not(label) {
@@ -781,6 +779,9 @@ fig-select-option {
   align-items: center;
   gap: 0;
   position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   min-height: var(--spacer-4);
   height: auto;
   padding: var(--spacer-1) var(--spacer-2);
@@ -789,10 +790,24 @@ fig-select-option {
   color: var(--figma-color-text-menu);
   cursor: default;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 
+  /* Anonymous flex items cannot ellipsize; text-only options stay a block. */
+  &:not(:has(> :not([slot="prepend"]):not([slot="append"]))) {
+    display: block;
+  }
+
   h3{
     margin: 0 0 var(--spacer-1) 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  label {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &::before {
@@ -808,6 +823,7 @@ fig-select-option {
   &::after {
     content: "";
     display: block;
+    float: left;
     flex: 0 0 1rem;
     order: -1;
     width: 1rem;
@@ -832,10 +848,20 @@ fig-select-option {
     margin-right: var(--spacer-1);
   }
 
+  &:not(:has(> :not([slot="prepend"]):not([slot="append"]))) > [slot="prepend"] {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  &:not(:has(> :not([slot="prepend"]):not([slot="append"]))) > [slot="append"] {
+    float: right;
+  }
 
   & > :not([slot="prepend"]):not([slot="append"]) {
     flex: 1 1 auto;
     min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   & > [slot="append"] {

package/fig-editor.js

@@ -3505,6 +3505,7 @@ class FigFillPicker extends HTMLElement {
         className: "fig-fill-picker-gradient-type",
         label: "Gradient type",
         value: this.#gradient.type,
+        variant: "ghost",
       },
       figEditorCreateElement(
         "fig-select-options",
@@ -3591,7 +3592,7 @@ class FigFillPicker extends HTMLElement {
             className: "fig-fill-picker-gradient-stops-header",
             borderless: true,
           },
-          [figEditorCreateElement("span", {}, "Stops"), addButton],
+          [figEditorCreateElement("h3", {}, "Stops"), addButton],
         ),
         figEditorCreateElement(
           "div",

package/fig-lab.css

@@ -101,10 +101,6 @@ fig-ai-context {
   }
 }
 
-fig-ai-context:has(+ fig-ai-prompt) {
-  margin-bottom: calc(-1 * var(--spacer-3));
-}
-
 fig-attachments {
   display: flex;
   flex-wrap: wrap;

package/fig.js

@@ -4776,6 +4776,7 @@ figDefineElement("fig-segment", FigSegment);
  * @attr {string} value - Selected segment value
  * @attr {boolean} animated - Enables animated selection indicator
  * @attr {"equal"|"auto"} sizing - Segment sizing mode
+ * @attr {string} size - Control size. Use `large` for a 32px-tall control.
  */
 class FigSegmentedControl extends HTMLElement {
   #selectedSegment = null;
@@ -18042,11 +18043,20 @@ class FigChooser extends HTMLElement {
   #syncGridColumns() {
     const raw = this.getAttribute("columns");
     const columns = raw === null ? NaN : Number(raw);
-    if (Number.isInteger(columns) && columns > 0) {
-      this.style.setProperty("--fig-chooser-grid-columns", String(columns));
+    const validColumns = Number.isInteger(columns) && columns > 0;
+    const effectiveColumns = validColumns ? columns : 2;
+    if (validColumns) {
+      this.style.setProperty("--fig-chooser-grid-columns", String(effectiveColumns));
     } else {
       this.style.removeProperty("--fig-chooser-grid-columns");
     }
+    const isGrid = this.getAttribute("layout") === "grid";
+    this.choices.forEach((choice, index) => {
+      choice.toggleAttribute(
+        "data-fig-chooser-first-row",
+        isGrid && index < effectiveColumns,
+      );
+    });
   }
 
   get choices() {
@@ -18169,7 +18179,10 @@ class FigChooser extends HTMLElement {
       this.#syncDisabledChoices();
     }
     if (name === "choice-element") {
-      requestAnimationFrame(() => this.#syncSelection());
+      requestAnimationFrame(() => {
+        this.#syncGridColumns();
+        this.#syncSelection();
+      });
     }
     if (name === "columns") {
       this.#syncGridColumns();
@@ -18187,6 +18200,7 @@ class FigChooser extends HTMLElement {
       requestAnimationFrame(() => this.#syncOverflow());
     }
     if (name === "layout") {
+      this.#syncGridColumns();
       this.#applyOverflowMode();
       if (newValue === "horizontal") {
         this.scrollTop = 0;
@@ -18506,8 +18520,14 @@ class FigChooser extends HTMLElement {
   #applyOverflowMode() {
     if (this.#overflowMode === "scrollbar") {
       this.#removeNavButtons();
+      this.classList.add("fig-overflow-fade");
+      this.classList.toggle(
+        "fig-overflow-fade-horizontal",
+        this.getAttribute("layout") === "horizontal",
+      );
     } else {
       this.#createNavButtons();
+      this.classList.remove("fig-overflow-fade", "fig-overflow-fade-horizontal");
     }
   }
 
@@ -18659,6 +18679,7 @@ class FigChooser extends HTMLElement {
     this.#mutationObserver = new MutationObserver(() => {
       if (this.#isUnwrapping) return;
       this.#removeLegacyScroller();
+      this.#syncGridColumns();
       this.#applyOverflowMode();
       this.#syncDisabledChoices();
       const choices = this.choices;
@@ -18957,6 +18978,7 @@ class FigHandle extends HTMLElement {
     this.#syncDrag();
     this.#syncHitArea();
     this.addEventListener("click", this.#handleSelect);
+    this.addEventListener("blur", this.#handleBlur);
     document.addEventListener("pointerdown", this.#handleDeselect);
     document.addEventListener("keydown", this.#handleKeyDown);
     const initial = this.getAttribute("value");
@@ -18974,6 +18996,7 @@ class FigHandle extends HTMLElement {
       this.#hitAreaEl = null;
     }
     this.removeEventListener("click", this.#handleSelect);
+    this.removeEventListener("blur", this.#handleBlur);
     document.removeEventListener("pointerdown", this.#handleDeselect);
     document.removeEventListener("keydown", this.#handleKeyDown);
   }
@@ -19008,7 +19031,12 @@ class FigHandle extends HTMLElement {
     this.deselect();
   };
 
+  #handleBlur = () => {
+    this.removeAttribute("data-fig-pointer-focus");
+  };
+
   #handleKeyDown = (e) => {
+    this.removeAttribute("data-fig-pointer-focus");
     if (e.defaultPrevented) return;
     if (
       e.target === this &&
@@ -19194,6 +19222,7 @@ class FigHandle extends HTMLElement {
   #onPointerDown(e) {
     if (!this.#dragEnabled || figBooleanAttribute(this, "disabled")) return;
     e.preventDefault();
+    this.setAttribute("data-fig-pointer-focus", "");
     this.focus();
     this.select();
     const container = this.#getContainer();

package/package.json

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