@rogieking/figui3 4.10.2 → 4.12.0

package/README.md

@@ -609,7 +609,6 @@ A selection list controller. `<fig-choice>` elements are selectable options with
 | `drag` | boolean | `false` | Enable drag-to-scroll |
 | `overflow` | string | — | Overflow behavior |
 | `loop` | boolean | `false` | Loop keyboard navigation |
-| `padding` | boolean | `true` | Internal padding (`padding="false"` removes it) |
 
 **fig-choice attributes:**
 

package/components.css

@@ -487,7 +487,7 @@ input[type="text"][list] {
 
   &:not([multiple]) {
     height: var(--spacer-4);
-    padding: 0 calc(var(--spacer-2) - 1px);
+    padding: 0 var(--spacer-4) 0 var(--spacer-2);
     background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
     var(--icon-chevron);
   }
@@ -669,7 +669,7 @@ input[type="text"][list] {
       & > button {
         display: inline-block;
         align-items: center;
-        gap: var(--spacer-1);
+        gap: var(--spacer-1, 0.25rem);
         width: 100%;
         border: 0;
         background: transparent;
@@ -687,8 +687,8 @@ input[type="text"][list] {
           align-items: center;
           gap: 0;
           min-width: 0;
-          &:not(:has(> svg)) {
-            padding-left: var(--spacer-2);
+          &:has(> svg) {
+            margin-left: calc(var(--spacer-2) * -1);
           }
 
           & svg {
@@ -1406,8 +1406,10 @@ fig-image,
 fig-video {
   --fig-media-fit: contain;
   --fig-media-aspect-ratio: 4/3;
+  --fig-media-size: 100%; 
   display: inline-flex;
-  max-width: 100%;
+  max-width:var(--fig-media-size); 
+  max-height:var(--fig-media-size); 
   background-color: var(--figma-color-bg-secondary);
   border-radius: var(--radius-medium);
   overflow: hidden;
@@ -1417,6 +1419,22 @@ fig-video {
   justify-content: center;
   position: relative;
 
+  &[size="small"] {
+    --fig-media-size: 2rem;
+    min-height: auto;
+    width: var(--fig-media-size);
+  }
+  &[size="medium"] {
+    --fig-media-size: 4rem;
+    min-height: auto;
+    width: var(--fig-media-size);
+  }
+  &[size="large"] {
+    --fig-media-size: 6rem;
+    min-height: auto;
+    width: var(--fig-media-size);
+  }
+
   & > *{
     position: absolute;
     z-index: 1;
@@ -4647,13 +4665,6 @@ fig-chooser {
     }
   }
 
-  &[padding="false"] {
-    gap: var(--fig-chooser-gap);
-    fig-choice {
-      --fig-choice-padding: 0px;
-    }
-  }
-
   &[overflow="scrollbar"] {
     scrollbar-width: thin;
     scrollbar-color: var(--figma-color-border) transparent;
@@ -4673,11 +4684,7 @@ fig-chooser {
     > :not(.fig-chooser-nav-start):not(.fig-chooser-nav-end) {
       flex: 1 1 0%;
     }
-    fig-media[full],
-    fig-image[full],
-    fig-video[full] {
-      min-width: 3rem;
-    }
+
     > * {
       &:not(.fig-chooser-nav-start):not(.fig-chooser-nav-end) {
         margin-inline-end: var(--fig-chooser-gap);
@@ -4719,59 +4726,39 @@ fig-chooser {
     display: flex;
     align-items: center;
     justify-content: center;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: var(--chooser-fade-size);
     cursor: pointer;
     opacity: 0;
     pointer-events: none;
     color: var(--figma-color-icon);
-    transition: opacity 0.2s ease;
+    background: var(--figma-color-bg) !important;
 
-    &:hover {
-      background: var(--figma-color-bg) !important;
+    .fig-chooser-nav-chevron{
+      position: relative;
     }
 
-    &::after {
-      content: "";
-      display: block;
-      width: 1rem;
-      height: 1rem;
-      mask-image: var(--icon-chevron);
-      mask-size: contain;
-      mask-repeat: no-repeat;
-      mask-position: center;
-      background: currentColor;
+    &:active .fig-chooser-nav-chevron {
+      transform: translateY(1px);
     }
   }
 
   .fig-chooser-nav-start {
     top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: var(--chooser-fade-size);
     margin-bottom: calc(var(--chooser-fade-size) * -1);
-    background: linear-gradient(to bottom, var(--eased-fade-stops));
+    box-shadow: 0 1px 0 0 var(--figma-color-bordertranslucent);
 
-    &:hover {
-      box-shadow: 0 1px 0 0 var(--figma-color-border) !important;
-    }
-
-    &::after {
+    .fig-chooser-nav-chevron {
       rotate: 180deg;
     }
   }
 
   .fig-chooser-nav-end {
     bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: var(--chooser-fade-size);
     margin-top: calc(var(--chooser-fade-size) * -1);
-    background: linear-gradient(to top, var(--eased-fade-stops));
-
-    &:hover {
-      box-shadow: 0 -1px 0 0 var(--figma-color-border) !important;
-    }
+    box-shadow: 0 -1px 0 0 var(--figma-color-bordertranslucent);
   }
 
   &[layout="horizontal"] {
@@ -4789,13 +4776,9 @@ fig-chooser {
       left: 0;
       right: auto;
       margin-right: calc(var(--chooser-fade-size) * -1);
-      background: linear-gradient(to right, var(--eased-fade-stops));
-
-      &:hover {
-        box-shadow: 1px 0 0 0 var(--figma-color-border) !important;
-      }
+      box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
 
-      &::after {
+      .fig-chooser-nav-chevron {
         rotate: 90deg;
       }
     }
@@ -4804,13 +4787,9 @@ fig-chooser {
       right: 0;
       left: auto;
       margin-left: calc(var(--chooser-fade-size) * -1);
-      background: linear-gradient(to left, var(--eased-fade-stops));
-
-      &:hover {
-        box-shadow: -1px 0 0 0 var(--figma-color-border) !important;
-      }
+      box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
 
-      &::after {
+      .fig-chooser-nav-chevron {
         rotate: -90deg;
       }
     }
@@ -4840,15 +4819,14 @@ fig-choice {
   gap: var(--spacer-2);
   outline: none;
   cursor: default;
-
   padding: var(--fig-choice-padding);
 
   &:hover:not([selected]):not([disabled]):not([aria-disabled="true"]) {
     background-color: var(--figma-color-bg-secondary);
   }
 
-  &[padding="false"] {
-    --fig-choice-padding: 0px;
+  &[padding]:not([padding="false"]) {
+    --fig-choice-padding: var(--spacer-2);
   }
 
   &[selected] {
@@ -4860,7 +4838,7 @@ fig-choice {
       border-radius: var(--fig-choice-border-radius);
       pointer-events: none;
       z-index: 1;
-      box-shadow: inset 0 0 0 4px var(--figma-color-bg);
+      box-shadow: inset 0 0 0 calc(var(--fig-choice-selection-ring-width)*2) var(--figma-color-bg);
       outline: var(--fig-choice-selection-ring-width) solid
         var(--figma-color-border-selected);
       outline-offset: calc(var(--fig-choice-selection-ring-width) * -1);
@@ -4946,7 +4924,8 @@ fig-handle {
     pointer-events: none;
     cursor: default;
   }
-  &[type="color"] {
+  &[type="color"],
+  &[type="canvas"] {
     &::after {
       display: block;
     }