@rogieking/figui3 8.9.10 → 8.9.12

package/fig-editor.css

@@ -692,6 +692,15 @@ fig-select {
     }
   }
 
+  &[variant="ghost"] {
+    box-shadow: none;
+    background-color: transparent;
+
+    &:hover:not([disabled]):not([disabled="false"]) {
+      background-color: var(--figma-color-bg-secondary);
+    }
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -739,97 +748,8 @@ fig-select::part(listbox) {
   height: max-content;
 }
 
-/* Vertical option panels own their scroller and shared top/bottom paging buttons. */
-fig-select-options,
-.fig-menu-options {
-  --fig-vertical-overflow-size: var(--spacer-4);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-  max-width: 100%;
-  max-height: calc(100vh - 1rem);
-  /* No block padding — sticky overflow buttons must sit flush to the popup edges. */
-  padding: 0;
-  overflow: hidden auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  & > :not(.fig-overflow) {
-    flex-shrink: 0;
-  }
-
-  /* List breathing room (not on the scroller itself). */
-  & > :nth-child(1 of :not(.fig-overflow)) {
-    margin-top: var(--spacer-2);
-  }
-
-  & > :not(.fig-overflow):last-child,
-  & > :not(.fig-overflow):has(+ .fig-overflow-end) {
-    margin-bottom: var(--spacer-2);
-  }
-
-  & > .fig-overflow {
-    position: sticky;
-    left: 0;
-    flex: 0 0 var(--fig-vertical-overflow-size);
-    width: 100%;
-    height: var(--fig-vertical-overflow-size);
-    margin: 0;
-    z-index: 3;
-    /* Menu chrome — not option hover (bg-menu-hover is brand blue). */
-    color: var(--figma-color-text-menu);
-    background: var(--figma-color-bg-menu) !important;
-
-    &::before {
-      inset: 0;
-      border-radius: 0;
-      background: var(--figma-color-bg-menu) !important;
-    }
-
-    &:hover::before {
-      background: light-dark(
-          rgba(0, 0, 0, 0.06),
-          rgba(255, 255, 255, 0.08)
-        )
-        !important;
-    }
-
-    &:hover {
-      color: var(--figma-color-text-menu);
-    }
-  }
-
-  & > .fig-overflow-start {
-    order: -1;
-    top: 0;
-    margin-block-end: calc(-1 * var(--fig-vertical-overflow-size));
-
-    &::before {
-      border-radius: var(--radius-large) var(--radius-large) 0 0;
-    }
-
-    .fig-overflow-chevron {
-      rotate: 180deg;
-    }
-  }
-
-  & > .fig-overflow-end {
-    order: 1;
-    bottom: 0;
-    margin-block-start: calc(-1 * var(--fig-vertical-overflow-size));
-
-    &::before {
-      border-radius: 0 0 var(--radius-large) var(--radius-large);
-    }
-  }
-
-}
+/* Vertical option-panel overflow chrome lives in fig.js (figVerticalOverflowSheet)
+   and is adopted on document + fig-menu shadow. */
 
 fig-select-options > :is(fig-separator, fig-menu-separator) {
   /* Align labels with select option text after the checkmark column. */

package/fig-editor.js

@@ -454,6 +454,10 @@ class FigSelectOptions extends HTMLElement {
 }
 figEditorDefineElement("fig-select-options", FigSelectOptions);
 
+/**
+ * A dropdown-styled select.
+ * @attr {string} variant - Visual style. Use `ghost` for a borderless control.
+ */
 class FigSelect extends HTMLElement {
   #button = null;
   #popup = null;
@@ -492,6 +496,7 @@ class FigSelect extends HTMLElement {
       "offset",
       "closedby",
       "open",
+      "variant",
     ];
   }