@rogieking/figui3 1.4.7 → 1.4.9

package/fig.css

@@ -53,6 +53,7 @@
   --figma-color-border-danger-strong: #dc3412;
   --figma-color-border-disabled: #e6e6e6;
   --figma-color-border-disabled-strong: #0000004d;
+  --figma-color-border-menu: #383838;
   --figma-color-border-onbrand: #007be5;
   --figma-color-border-onbrand-strong: #ffffff;
   --figma-color-border-oncomponent: #8638e5;
@@ -460,7 +461,7 @@
     --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
         rgba(255, 255, 255, 0.08) inset,
       0px 10px 16px 0px rgba(0, 0, 0, 0.35),
-      0px 0px 0.5px 0px rgba(255, 255, 255, 0.35) inset,
+      inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
       0px 2px 5px 0px rgba(0, 0, 0, 0.35);
 
     --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
@@ -652,22 +653,74 @@ input[type="text"][list] {
     option {
       display: flex;
       gap: var(--spacer-1);
-      padding: 0 var(--spacer-2) 0 var(--spacer-1);
-      border-radius: var(--radius-medium);
-      min-width: 5rem;
+      padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
       font-weight: var(--body-medium-fontWeight);
       color: var(--figma-color-text-menu);
-      &:hover {
-        background-color: var(--figma-color-bg-menu-hover);
+      position: relative;
+      &[hidden] {
+        display: none;
+      }
+      &:not(:checked):before {
+        content: "";
+        display: block;
+        position: absolute;
+        inset: 0 var(--spacer-2);
+        border-radius: var(--radius-medium);
+        z-index: -1;
+        background-color: transparent;
+      }
+      &:not(:disabled) {
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: transparent;
+          outline: 0;
+          &:before {
+            background-color: var(--figma-color-bg-menu-hover);
+          }
+        }
       }
     }
+
     optgroup {
       color: var(--figma-color-text-menu-secondary);
       text-align: left;
+      position: relative;
+      padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
       font-weight: var(--body-medium-fontWeight);
+      &::-internal-optgroup-label {
+        display: none;
+      }
       legend {
         padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
       }
+      option {
+        margin: 0 calc(var(--spacer-1) * -1);
+        margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
+      }
+      &:not(:first-child) {
+        margin-top: var(--spacer-2);
+        padding-top: var(--spacer-2);
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 1px;
+          height: 1px;
+          background-color: var(--figma-color-border-menu);
+          margin-bottom: var(--spacer-2);
+        }
+      }
+    }
+    option[hidden="true"]:first-child + optgroup {
+      margin-top: 0;
+      padding-top: 0;
+      &:before {
+        display: none;
+      }
     }
   }
   ::picker-icon {
@@ -677,12 +730,13 @@ input[type="text"][list] {
   ::picker(select) {
     appearance: base-select;
     scrollbar-width: thin;
+    outline: 0;
     scrollbar-color: var(--figma-color-text-menu-tertiary)
       var(--figma-color-bg-menu);
     border-radius: var(--radius-large);
     border: 0;
     background-color: var(--figma-color-bg-menu);
-    padding: var(--spacer-2);
+    padding: var(--spacer-2) 0;
     box-shadow: var(--figma-elevation-400-menu-panel);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {