@rogieking/figui3 6.8.6 → 6.8.8

package/base.css

@@ -33,6 +33,14 @@ strong{
   font-weight: var(--body-medium-strong-fontWeight);
 }
 
+section{
+  padding: var(--spacer-1) var(--spacer-3);
+  margin-bottom: var(--spacer-2);
+}
+fieldset{
+  padding: var(--spacer-1) var(--spacer-3);
+}
+
 hr {
   height: 1px;
   border: none;

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 {
@@ -3299,6 +3294,7 @@ fig-input-color {
 fig-header {
   --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;
@@ -3397,6 +3393,7 @@ fig-group {
 
 fig-footer {
   display: flex;
+  flex-shrink: 0;
   align-items: flex-start;
   justify-content: flex-end;
   gap: var(--spacer-2);
@@ -3466,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;
   }
@@ -3484,6 +3482,11 @@ vstack,
   flex-wrap: wrap;
 }
 
+:root [hidden],
+[hidden] {
+  display: none !important;
+}
+
 hstack,
 .hstack{
   display: flex;
@@ -3558,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);
   }
@@ -3586,6 +3591,7 @@ fig-input-number {
 
   & input,
   & textarea {
+    order: 1;
     background-color: transparent !important;
     flex: 1;
 
@@ -3942,6 +3948,7 @@ fig-input-palette {
   }
 }
 
+
 fig-field {
   --fig-field-gap: var(--spacer-2);
   --fig-field-left-padding: var(--spacer-3);
@@ -4621,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;
@@ -4633,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;
@@ -4797,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);
@@ -4811,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);
   }

package/dist/base.css

@@ -1 +1 @@
-html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem;&:last-child{margin-bottom:0}}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}
+html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2)}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem;&:last-child{margin-bottom:0}}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}