@rogieking/figui3 6.8.4 → 6.8.6

package/components.css

@@ -1202,52 +1202,40 @@ fig-tab,
 
 fig-tabs,
 .tabs {
-  --fig-overflow-size: var(--spacer-4);
+  --fig-overflow-size: calc(var(--spacer-4) + var(--spacer-2));
   --fig-tabs-inline-padding: var(--spacer-2);
   --fig-tabs-block-padding: var(--spacer-1);
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  gap: 0;
+  gap: var(--spacer-1);
   min-width: 0;
   overflow: auto hidden;
-  padding: 0;
+  padding: var(--spacer-1) var(--spacer-2-5);
+  position: relative;
   scrollbar-width: none;
   width: 100%;
 
   > fig-tab {
     flex-shrink: 0;
-    margin-block: var(--fig-tabs-block-padding);
-  }
-
-  > fig-tab + fig-tab {
-    margin-inline-start: var(--spacer-1);
-  }
-
-  > .fig-overflow-start + fig-tab {
-    margin-inline-start: var(--fig-tabs-inline-padding);
   }
 
-  > fig-tab:has(+ .fig-overflow-end) {
-    margin-inline-end: var(--fig-tabs-inline-padding);
-  }
 
   > .fig-overflow {
     align-self: stretch;
-    flex: 0 0 var(--fig-overflow-size);
     height: auto;
     margin-block: 0;
     position: sticky;
     top: 0;
-    width: var(--fig-overflow-size);
     z-index: 3;
+    width: var(--spacer-4);
+    margin-left: calc(var(--spacer-3) * -1);
+    margin-right: calc(var(--spacer-3) * -1);
   }
 
   > .fig-overflow-start {
-    inset-inline-start: 0;
-    left: 0;
-    margin-inline-end: calc(-1 * var(--fig-overflow-size));
+    left: calc(var(--spacer-2-5) * -1);
     order: -1;
     right: auto;
     box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
@@ -1262,11 +1250,9 @@ fig-tabs,
   }
 
   > .fig-overflow-end {
-    inset-inline-end: 0;
     left: auto;
-    margin-inline-start: calc(-1 * var(--fig-overflow-size));
     order: 1;
-    right: 0;
+    right: calc(var(--spacer-2-5) * -1);
     box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
 
     &:before{
@@ -3311,7 +3297,8 @@ fig-input-color {
 }
 
 fig-header {
-  height: var(--spacer-6);
+  --fig-header-height: var(--spacer-6);
+  height: var(--fig-header-height);
   margin: 0;
   padding: var(--spacer-1) var(--spacer-3);
   display: flex;
@@ -3357,6 +3344,7 @@ fig-group {
 
   & > fig-header {
     cursor: default;
+    
     padding-left: var(--spacer-3);
       
     &:focus-visible {
@@ -3366,6 +3354,7 @@ fig-group {
       border-radius: var(--figma-focus-outline-radius);
     }
     h3 {
+      margin:0;
       .fig-group-chevron {
         --icon: var(--icon-16-chevron);
         --size: 1rem;
@@ -4632,11 +4621,12 @@ fig-chooser {
   --fig-chooser-gap: var(--spacer-2);
   --fig-chooser-inline-padding: var(--spacer-2);
   --fig-chooser-block-padding: var(--spacer-2);
+  outline: red;
 
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: var(--fig-chooser-gap);
   height: inherit;
   max-height: inherit;
   max-width: inherit;
@@ -4651,18 +4641,6 @@ fig-chooser {
     min-width: 0;
   }
 
-  > :not(.fig-overflow) + :not(.fig-overflow) {
-    margin-block-start: var(--fig-chooser-gap);
-  }
-
-  > .fig-overflow-start + :not(.fig-overflow) {
-    margin-block-start: var(--fig-chooser-block-padding);
-  }
-
-  > :not(.fig-overflow):has(+ .fig-overflow-end) {
-    margin-block-end: var(--fig-chooser-block-padding);
-  }
-
   > .fig-overflow {
     flex: 0 0 var(--chooser-fade-size);
     height: var(--chooser-fade-size);
@@ -4670,6 +4648,7 @@ fig-chooser {
     position: sticky;
     width: 100%;
     z-index: 3;
+    margin: calc(var(--fig-chooser-gap) * -1);
   }
 
   > .fig-overflow-start {
@@ -4707,20 +4686,6 @@ fig-chooser {
     flex-direction: row;
     overflow: auto hidden;
 
-    > :not(.fig-overflow) + :not(.fig-overflow) {
-      margin-block-start: 0;
-      margin-inline-start: var(--fig-chooser-gap);
-    }
-
-    > .fig-overflow-start + :not(.fig-overflow) {
-      margin-block-start: 0;
-      margin-inline-start: var(--fig-chooser-inline-padding);
-    }
-
-    > :not(.fig-overflow):has(+ .fig-overflow-end) {
-      margin-block-end: 0;
-      margin-inline-end: var(--fig-chooser-inline-padding);
-    }
 
     > :not(.fig-overflow) {
       flex: 0 0 auto;
@@ -4730,8 +4695,9 @@ fig-chooser {
       align-self: stretch;
       flex: 0 0 var(--chooser-fade-size);
       height: auto;
-      margin-block: 0;
       width: var(--chooser-fade-size);
+      margin-top: 0;
+      margin-bottom: 0;
     }
 
     > .fig-overflow-start {
@@ -4771,6 +4737,13 @@ fig-chooser {
       }
     }
   }
+  &[layout="vertical"], 
+  &[layout="grid"]{
+   &>.fig-overflow{
+    margin-left:0;
+    margin-right:0;
+   }
+  }
 
   &[layout="grid"] {
     display: grid;