@rogieking/figui3 6.8.5 → 6.8.7

package/components.css

@@ -480,6 +480,7 @@ input[type="tel"],
 }
 
 fig-input-number .fig-steppers {
+  order: 3;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -1203,25 +1204,25 @@ fig-tab,
 fig-tabs,
 .tabs {
   --fig-overflow-size: calc(var(--spacer-4) + var(--spacer-2));
-  --fig-tabs-inline-padding: var(--spacer-2);
-  --fig-tabs-block-padding: var(--spacer-1);
+  --fig-tabs-inline-padding: 0;
+  --fig-tabs-inline-margin: var(--spacer-2-5);
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  align-items: stretch;
+  flex-wrap: nowrap;
   gap: var(--spacer-1);
   min-width: 0;
   overflow: auto hidden;
-  padding: var(--spacer-1) var(--spacer-2-5);
+  padding: var(--spacer-2) var(--fig-tabs-inline-padding);
+  margin: 0 var(--fig-tabs-inline-margin);
   position: relative;
   scrollbar-width: none;
-  width: 100%;
+  width: calc(100% - var(--fig-tabs-inline-margin) * 2);
 
   > fig-tab {
     flex-shrink: 0;
   }
 
-
   > .fig-overflow {
     align-self: stretch;
     height: auto;
@@ -1230,12 +1231,12 @@ fig-tabs,
     top: 0;
     z-index: 3;
     width: var(--spacer-4);
-    margin-left: calc(var(--spacer-3) * -1);
-    margin-right: calc(var(--spacer-3) * -1);
+    margin-left: calc(var(--spacer-2-5) * -1);
+    margin-right: calc(var(--spacer-2-5) * -1);
   }
 
   > .fig-overflow-start {
-    left: calc(var(--spacer-2-5) * -1);
+    left: 0;
     order: -1;
     right: auto;
     box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
@@ -1252,7 +1253,7 @@ fig-tabs,
   > .fig-overflow-end {
     left: auto;
     order: 1;
-    right: calc(var(--spacer-2-5) * -1);
+    right: 0;
     box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
 
     &:before{
@@ -1265,12 +1266,6 @@ fig-tabs,
   }
 }
 
-fig-tab-content,
-.fig-tab-content {
-  display: none;
-  width: 100%;
-}
-
 /* Avatar */
 fig-avatar,
 .fig-avatar {
@@ -3297,7 +3292,9 @@ fig-input-color {
 }
 
 fig-header {
-  height: var(--spacer-6);
+  --fig-header-height: var(--spacer-6);
+  height: var(--fig-header-height);
+  flex-shrink: 0;
   margin: 0;
   padding: var(--spacer-1) var(--spacer-3);
   display: flex;
@@ -3343,6 +3340,7 @@ fig-group {
 
   & > fig-header {
     cursor: default;
+    
     padding-left: var(--spacer-3);
       
     &:focus-visible {
@@ -3352,6 +3350,7 @@ fig-group {
       border-radius: var(--figma-focus-outline-radius);
     }
     h3 {
+      margin:0;
       .fig-group-chevron {
         --icon: var(--icon-16-chevron);
         --size: 1rem;
@@ -3394,6 +3393,7 @@ fig-group {
 
 fig-footer {
   display: flex;
+  flex-shrink: 0;
   align-items: flex-start;
   justify-content: flex-end;
   gap: var(--spacer-2);
@@ -3463,6 +3463,7 @@ fig-footer {
 fig-content {
   padding: var(--spacer-2-5) 0;
   display: block;
+  gap: 0;
   &:has(>fig-group[name]:first-child){
     padding-top: 0;
   }
@@ -3481,6 +3482,11 @@ vstack,
   flex-wrap: wrap;
 }
 
+:root [hidden],
+[hidden] {
+  display: none !important;
+}
+
 hstack,
 .hstack{
   display: flex;
@@ -3555,11 +3561,13 @@ fig-input-number {
   }
 
   & [slot="prepend"] {
+    order: 0;
     padding-right: 0;
     margin-right: calc(var(--spacer-2) * -1);
   }
 
   & [slot="append"] {
+    order: 2;
     padding-left: 0;
     margin-left: calc(var(--spacer-2) * -1);
   }
@@ -3583,6 +3591,7 @@ fig-input-number {
 
   & input,
   & textarea {
+    order: 1;
     background-color: transparent !important;
     flex: 1;
 
@@ -3939,6 +3948,7 @@ fig-input-palette {
   }
 }
 
+
 fig-field {
   --fig-field-gap: var(--spacer-2);
   --fig-field-left-padding: var(--spacer-3);
@@ -4618,7 +4628,7 @@ fig-chooser {
   --fig-chooser-gap: var(--spacer-2);
   --fig-chooser-inline-padding: var(--spacer-2);
   --fig-chooser-block-padding: var(--spacer-2);
-  outline: red;
+  --fig-chooser-inline-margin: var(--spacer-3);
 
   box-sizing: border-box;
   display: flex;
@@ -4630,8 +4640,13 @@ fig-chooser {
   min-width: 0;
   overflow: hidden auto;
   padding: 0;
+  margin: 0 var(--fig-chooser-inline-margin);
   scrollbar-width: none;
-  width: 100%;
+  width: calc(100% - var(--fig-chooser-inline-margin) * 2);
+
+  fig-field > &{
+    --fig-chooser-inline-margin:0;
+  }
 
   > :not(.fig-overflow) {
     flex-shrink: 0;
@@ -4794,13 +4809,16 @@ fig-chooser {
 }
 
 fig-choice {
-  --fig-choice-selection-ring-width: 1.5px;
+  --fig-choice-selection-ring-width: 1px;
   --fig-choice-padding: 0px;
-  --fig-choice-border-radius: calc(
-    var(--radius-medium) + var(--fig-choice-padding)
-  );
+  --fig-choice-text-padding-inline: var(--spacer-2);
+  --fig-choice-border-radius: var(--radius-medium);
+  --fig-choice-min-height: 1.5rem;
+
+  min-height: var(--fig-choice-min-height);
   display: flex;
   align-items: center;
+  justify-content: center;
   flex-direction: column;
   border-radius: var(--fig-choice-border-radius);
   gap: var(--spacer-2);
@@ -4808,6 +4826,11 @@ fig-choice {
   cursor: default;
   padding: var(--fig-choice-padding);
 
+  &:not(:has(> *)) {
+    padding-inline: var(--fig-choice-text-padding-inline);
+  }
+
+
   &:hover:not([selected]):not([disabled]):not([aria-disabled="true"]) {
     background-color: var(--figma-color-bg-secondary);
   }