@rogieking/figui3 10.0.5 → 10.0.7

package/fig-editor.css

@@ -804,20 +804,8 @@ fig-select-options > :is(fig-separator, fig-menu-separator) {
 }
 
 fig-select-option {
-  display: flex;
-  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);
-  padding-right: var(--spacer-3);
-  border-radius: var(--radius-medium);
   color: var(--figma-color-text-menu);
-  cursor: default;
   user-select: none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -825,7 +813,6 @@ fig-select-option {
   text-align: left;
 
   h3{
-    margin: 0 0 var(--spacer-1) 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -835,76 +822,25 @@ fig-select-option {
     text-overflow: ellipsis;
   }
 
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    inset: 0 var(--spacer-2);
-    border-radius: var(--radius-medium);
-    z-index: -1;
-    background-color: transparent;
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    float: left;
-    flex: 0 0 1rem;
+  & > fig-icon[data-fig-select-checkmark] {
     order: -1;
-    width: 1rem;
-    height: 1rem;
-    margin-left: var(--spacer-1);
-    margin-right: var(--spacer-1);
-    background-color: currentColor;
-    -webkit-mask-image: var(--icon-16-checkmark);
-    mask-image: var(--icon-16-checkmark);
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-position: center;
-    -webkit-mask-size: contain;
-    mask-size: contain;
+    margin: 0 var(--spacer-1);
     visibility: hidden;
   }
 
-  & > [slot="prepend"] {
-    margin-top: calc(var(--spacer-1) * -1);
-    margin-bottom: calc(var(--spacer-1) * -1);
-    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"] {
-    flex: 0 0 auto;
-    margin-inline-start: auto;
     color: var(--figma-color-text-tertiary);
   }
 
-  &:hover,
-  &:focus-visible {
-    outline: none;
-
-    &::before {
-      background-color: var(--figma-color-bg-menu-hover);
-    }
-  }
-
-  &[subtle]:not([subtle="false"]),
   fig-select[subtle]:not([subtle="false"]) &:not([subtle="false"]) {
     &:hover,
     &:focus-visible {
@@ -914,14 +850,8 @@ fig-select-option {
     }
   }
 
-  &[selected]:not([selected="false"])::after,
-  &[aria-selected="true"]::after {
+  &[selected]:not([selected="false"]) > fig-icon[data-fig-select-checkmark],
+  &[aria-selected="true"] > fig-icon[data-fig-select-checkmark] {
     visibility: visible;
   }
-
-  &[disabled]:not([disabled="false"]),
-  &[aria-disabled="true"] {
-    opacity: 0.4;
-    pointer-events: none;
-  }
 }

package/fig-editor.js

@@ -315,6 +315,22 @@ function figSelectOptionEntryLabel(opt) {
   return String(opt ?? "");
 }
 
+function figSelectOptionEnsureCheckmark(option) {
+  let icon = option.querySelector(
+    ":scope > fig-icon[data-fig-select-checkmark]",
+  );
+  if (icon) return icon;
+  icon = figEditorCreateIcon("checkmark", {
+    size: "small",
+    className: "fig-select-option-checkmark",
+  });
+  icon.setAttribute("slot", "prepend");
+  icon.setAttribute("aria-hidden", "true");
+  icon.setAttribute("data-fig-select-checkmark", "");
+  option.append(icon);
+  return icon;
+}
+
 /**
  * A selectable option for fig-select.
  * Supports light-DOM slots: `slot="prepend"` (leading) and `slot="append"` (trailing).
@@ -365,6 +381,7 @@ class FigSelectOption extends HTMLElement {
   connectedCallback() {
     if (!this.hasAttribute("role")) this.setAttribute("role", "option");
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+    figSelectOptionEnsureCheckmark(this);
     this.#syncDisabled();
   }
 
@@ -1414,7 +1431,9 @@ class FigSelect extends HTMLElement {
     let triggerPrepend = this.querySelector(
       ':scope > [slot="prepend-trigger"]:not([data-fig-select-generated])',
     );
-    const source = option?.querySelector?.(':scope > [slot="prepend"]');
+    const source = option?.querySelector?.(
+      ':scope > [slot="prepend"]:not([data-fig-select-checkmark])',
+    );
     this.#customTriggerSlot.hidden = !customTrigger;
     this.#labelEl.hidden = Boolean(customTrigger);
     this.#prependEl.hidden = Boolean(customTrigger);
@@ -1554,6 +1573,7 @@ class FigSelect extends HTMLElement {
       }
 
       for (const opt of options) {
+        figSelectOptionEnsureCheckmark(opt);
         const selected = opt === match;
         opt.setAttribute("aria-selected", selected ? "true" : "false");
         if (selected) opt.setAttribute("selected", "");

package/fig.js

@@ -4566,6 +4566,7 @@ figDefineElement("fig-tab", FigTab);
 /**
  * A custom tabs container element.
  * @attr {string} name - Identifier for the tabs group
+ * @attr {"buttons"|"fade"} overflow - Overflow treatment (default: buttons)
  */
 class FigTabs extends HTMLElement {
   #boundHandleClick;
@@ -4585,7 +4586,11 @@ class FigTabs extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "name", "disabled"];
+    return ["value", "name", "disabled", "overflow"];
+  }
+
+  get #overflowMode() {
+    return this.getAttribute("overflow") === "fade" ? "fade" : "buttons";
   }
 
   connectedCallback() {
@@ -4596,7 +4601,7 @@ class FigTabs extends HTMLElement {
     this.addEventListener("click", this.#boundHandleClick);
     this.addEventListener("keydown", this.#boundHandleKeyDown);
     this.addEventListener("scroll", this.#boundSyncOverflow);
-    this.#createNavButtons();
+    this.#applyOverflowMode();
     this.#startObserver();
     this.#startResizeObserver();
     figNextFrame(this, () => {
@@ -4715,10 +4720,18 @@ class FigTabs extends HTMLElement {
 
   #startObserver() {
     this.#mutationObserver?.disconnect();
-    this.#mutationObserver = new MutationObserver(() => {
+    this.#mutationObserver = new MutationObserver((records) => {
       if (this.#isUnwrapping) return;
+      const authoredChange = records.some((record) =>
+        [...record.addedNodes, ...record.removedNodes].some(
+          (node) =>
+            !(node instanceof Element) ||
+            !node.matches("[data-fig-tabs-nav]"),
+        ),
+      );
+      if (!authoredChange) return;
       this.#removeLegacyScroller();
-      this.#createNavButtons();
+      this.#applyOverflowMode();
       this.#syncTabIndexes();
       requestAnimationFrame(() => {
         this.#syncOverflow();
@@ -4736,6 +4749,17 @@ class FigTabs extends HTMLElement {
     this.classList.remove("overflow-start", "overflow-end");
   }
 
+  #applyOverflowMode() {
+    const fade = this.#overflowMode === "fade";
+    this.classList.toggle("fig-overflow-fade", fade);
+    this.classList.toggle("fig-overflow-fade-horizontal", fade);
+    if (fade) {
+      this.#removeNavButtons();
+    } else {
+      this.#createNavButtons();
+    }
+  }
+
   #createNavButtons() {
     if (
       this.#navStart &&
@@ -4863,6 +4887,10 @@ class FigTabs extends HTMLElement {
       case "disabled":
         this.#applyDisabled(newValue !== null && newValue !== "false");
         break;
+      case "overflow":
+        this.#applyOverflowMode();
+        requestAnimationFrame(() => this.#syncOverflow());
+        break;
     }
   }
 
@@ -4879,9 +4907,11 @@ class FigTabs extends HTMLElement {
       target.getAttribute("disabled") !== "false"
     )
       return;
-    const previousTab = this.selectedTab;
-    const previousValue = this.value;
     const tabs = this.querySelectorAll("fig-tab");
+    const previousTab =
+      Array.from(tabs).find((tab) => figBooleanAttribute(tab, "selected")) ||
+      this.selectedTab;
+    const previousValue = this.#resolveTabValue(previousTab);
     for (const tab of tabs) {
       if (tab === target) {
         this.selectedTab = tab;

package/package.json

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