@rogieking/figui3 9.4.10 → 9.4.12

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file.
 
+## [9.4.12]
+
+### Added
+
+- Added a stronger translucent border token and a standalone menu-item checkbox example.
+
+### Changed
+
+- Unchecked checkboxes now use the stronger translucent border and transparent background tokens.
+
+### Fixed
+
+- Standalone `fig-menu-item` hover backgrounds now render within the correct stacking context.
+
+## [9.4.11]
+
+### Added
+
+- Added a filter menu playground example with radio and checkbox states.
+- Added a leading label to the labeled-separator menu example.
+
+### Changed
+
+- Menu items now adjust edge padding for prepend and append content, and first separators sit flush at the top of menus.
+- Utility, editor, dialog-example, and native-element navigation groups now start collapsed, with native elements ordered last.
+
 ## [9.4.10]
 
 ### Added

package/components.css

@@ -277,6 +277,10 @@
     rgba(0, 0, 0, 0.1),
     rgba(255, 255, 255, 0.1)
   );
+  --figma-color-bordertranslucentstrong: light-dark(
+    rgba(0, 0, 0, 0.2),
+    rgba(255, 255, 255, 0.2)
+  );
   --figma-color-bg-transparent: light-dark(
     rgba(0, 0, 0, 0.05),
     rgba(255, 255, 255, 0.05)
@@ -2799,8 +2803,8 @@ input[type="checkbox"]:not(.switch) {
   width: var(--size);
   height: var(--size);
   aspect-ratio: 1/1;
-  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-  background-color: var(--figma-color-bg-secondary);
+  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucentstrong);
+  background-color: var(--figma-color-bg-transparent);
   vertical-align: middle;
 
   &::after {
@@ -6751,7 +6755,7 @@ fig-menu-item {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: var(--spacer-1);
+  gap: 0;
   width: 100%;
   padding: var(--fig-menu-item-padding);
   min-height: var(--spacer-4);
@@ -6761,6 +6765,7 @@ fig-menu-item {
   color: inherit;
   font-weight: var(--body-medium-fontWeight);
   position: relative;
+  isolation: isolate;
 
   h3{
     margin: 0 0 var(--spacer-1) 0;
@@ -6801,12 +6806,23 @@ fig-menu-item {
     }
   }
 
-  & > [slot="prepend"] {
+  & > [slot="prepend"],
+  & > [slot="append"] {
     margin-top: calc(var(--spacer-1) * -1);
     margin-bottom: calc(var(--spacer-1) * -1);
   }
 
-  &:not(:has(> :not([slot="prepend"]):not([slot="append"]))) > [slot="prepend"] {
+  &:has(> [slot="append"]) {
+    --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-3,0.75rem);
+  }
+  &:has(> [slot="prepend"]) {
+    --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-2,0.5rem);
+  }
+  &:has(> [slot="prepend"]):has(> [slot="append"]) {
+    --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-2,0.5rem);
+  }
+
+  &:not(:has(> :not([slot="prepend"], [slot="append"]))) > [slot="prepend"] {
     display: inline-flex;
     vertical-align: middle;
   }
@@ -6874,6 +6890,11 @@ fig-menu-item {
     margin-bottom: var(--spacer-1,0.25rem);
     background: transparent;
 
+    &:first-of-type,
+    &:first-child {
+      margin-top: 0;
+    }
+
     &::before {
       content: "";
       display: block;