@rogieking/figui3 6.7.2 → 6.7.3

package/README.md

@@ -645,7 +645,7 @@ Segmented controls expose a radio-group pattern. Arrow keys, Home, and End move
 `<fig-chooser>` / `<fig-choice>`
 
 A selection list controller. `<fig-choice>` elements are selectable options within a `<fig-chooser>`.
-When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser restores its internal light-DOM overflow buttons automatically.
+When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser restores its overflow buttons automatically. Choices remain direct light-DOM children (React-safe).
 
 **fig-chooser attributes:**
 

package/base.css

@@ -17,6 +17,7 @@ body,
 :host {
   font-size: var(--body-medium-fontSize);
   letter-spacing: var(--body-letter-spacing);
+  line-height: 1.4545em;
 }
 
 h1,

package/components.css

@@ -1199,32 +1199,52 @@ fig-tab,
 fig-tabs,
 .tabs {
   --fig-overflow-size: var(--spacer-4);
-  display: block;
+  --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;
   min-width: 0;
-  position: relative;
+  overflow: auto hidden;
+  padding: 0;
+  scrollbar-width: none;
   width: 100%;
-  overflow: hidden;
 
-  > .fig-tabs-scroll {
-    box-sizing: border-box;
-    display: flex;
-    gap: var(--spacer-1);
-    overflow: auto hidden;
-    padding: var(--spacer-1) var(--spacer-2);
-    scrollbar-width: none;
-    width: 100%;
-    min-width: 0;
+  > 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 {
-    top: 0;
-    bottom: 0;
+    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;
   }
 
   > .fig-overflow-start {
+    inset-inline-start: 0;
     left: 0;
+    margin-inline-end: calc(-1 * var(--fig-overflow-size));
+    order: -1;
     right: auto;
     box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
 
@@ -1238,8 +1258,11 @@ fig-tabs,
   }
 
   > .fig-overflow-end {
-    right: 0;
+    inset-inline-end: 0;
     left: auto;
+    margin-inline-start: calc(-1 * var(--fig-overflow-size));
+    order: 1;
+    right: 0;
     box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
 
     &:before{
@@ -3327,6 +3350,10 @@ fig-group {
   display: block;
   margin-bottom: var(--spacer-2-5);
 
+  p{
+    margin: 0 var(--spacer-3) var(--spacer-2) var(--spacer-3);
+  }
+
   /* Sibling groups  */
   & + fig-group {
     box-shadow: inset 0 1px 0 0 var(--figma-color-border);
@@ -3455,14 +3482,17 @@ fig-footer {
 }
 
 fig-content {
-  padding: var(--spacer-2) 0;
+  padding: var(--spacer-2) var(--spacer-3);
   display: block;
+  color: var(--figma-color-text-secondary);
 
   p{
     margin: 0 0 var(--spacer-2) 0;
-    padding: 0 var(--spacer-3);
   }
 }
+body>fig-content{
+  padding: var(--spacer-2) 0;
+}
 
 vstack,
 .vstack,
@@ -4602,95 +4632,57 @@ fig-icon {
 fig-chooser {
   --chooser-fade-size: var(--spacer-4);
   --fig-chooser-gap: var(--spacer-2);
+  --fig-chooser-inline-padding: var(--spacer-2);
+  --fig-chooser-block-padding: var(--spacer-2);
 
-  display: block;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: inherit;
+  max-height: inherit;
+  max-width: inherit;
   min-width: 0;
-  overflow: visible;
-  position: relative;
+  overflow: hidden auto;
+  padding: 0;
+  scrollbar-width: none;
+  width: 100%;
 
-  > .fig-chooser-scroll {
-    display: flex;
-    flex-direction: column;
-    gap: var(--fig-chooser-gap);
-    overflow: visible auto;
-    scrollbar-width: none;
-    scroll-snap-type: y mandatory;
-    width: 100%;
-    height: inherit;
-    max-height: inherit;
-    max-width: inherit;
+  > :not(.fig-overflow) {
+    flex-shrink: 0;
     min-width: 0;
   }
 
-  > .fig-chooser-scroll > * {
-    scroll-snap-align: start;
-  }
-
-  &[overflow="scrollbar"] {
-    > .fig-chooser-scroll {
-      scrollbar-width: thin;
-      scrollbar-color: var(--figma-color-border) transparent;
-    }
-  }
-
-  &[layout="horizontal"] {
-    > .fig-chooser-scroll {
-      flex-direction: row;
-      flex-wrap: nowrap;
-      overflow: auto hidden;
-      scrollbar-width: none;
-      scroll-snap-type: x mandatory;
-    }
-
-    &[overflow="scrollbar"] {
-      > .fig-chooser-scroll {
-        scrollbar-width: thin;
-        scrollbar-color: var(--figma-color-border) transparent;
-      }
-    }
-
-    > .fig-chooser-scroll > * {
-      flex: 1 1 0%;
-    }
-  }
-
-  &[layout="grid"] {
-    > .fig-chooser-scroll {
-      display: grid;
-      grid-template-columns: repeat(
-        var(--fig-chooser-grid-columns, 2),
-        minmax(0, 1fr)
-      );
-    }
-
-    > .fig-chooser-scroll > * {
-      min-width: 0;
-    }
+  > :not(.fig-overflow) + :not(.fig-overflow) {
+    margin-block-start: var(--fig-chooser-gap);
   }
 
-  &[full]:not([full="false"]) {
-    width: 100%;
+  > .fig-overflow-start + :not(.fig-overflow) {
+    margin-block-start: var(--fig-chooser-block-padding);
   }
 
-  &[disabled]:not([disabled="false"]) {
-    pointer-events: none;
-    opacity: 0.4;
+  > :not(.fig-overflow):has(+ .fig-overflow-end) {
+    margin-block-end: var(--fig-chooser-block-padding);
   }
 
   > .fig-overflow {
-    left: 0;
-    right: 0;
-    width: 100%;
+    flex: 0 0 var(--chooser-fade-size);
     height: var(--chooser-fade-size);
+    margin-inline: 0;
+    position: sticky;
+    width: 100%;
+    z-index: 3;
   }
 
   > .fig-overflow-start {
-    top: 0;
     box-shadow: 0 1px 0 0 var(--figma-color-bordertranslucent);
-    &:before{
-      border-radius: var(--radius-medium) 0 0 var(--radius-medium);
-    }
+    margin-block-end: calc(-1 * var(--chooser-fade-size));
+    order: -1;
+    top: 0;
 
+    &:before {
+      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+    }
 
     .fig-overflow-chevron {
       rotate: 180deg;
@@ -4700,25 +4692,62 @@ fig-chooser {
   > .fig-overflow-end {
     bottom: 0;
     box-shadow: 0 -1px 0 0 var(--figma-color-bordertranslucent);
-    &:before{
-      border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+    margin-block-start: calc(-1 * var(--chooser-fade-size));
+    order: 1;
+
+    &:before {
+      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
     }
   }
 
+  &[overflow="scrollbar"] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--figma-color-border) transparent;
+  }
+
   &[layout="horizontal"] {
+    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;
+    }
+
     > .fig-overflow {
-      top: 0;
-      bottom: 0;
+      align-self: stretch;
+      flex: 0 0 var(--chooser-fade-size);
       height: auto;
+      margin-block: 0;
       width: var(--chooser-fade-size);
-      align-self: stretch;
-      margin: 0;
     }
 
     > .fig-overflow-start {
+      box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
+      inset-inline-start: 0;
       left: 0;
+      margin-block-end: 0;
+      margin-inline-end: calc(-1 * var(--chooser-fade-size));
       right: auto;
-      box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
+      top: 0;
+
+      &:before {
+        border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+      }
 
       .fig-overflow-chevron {
         rotate: 90deg;
@@ -4726,28 +4755,74 @@ fig-chooser {
     }
 
     > .fig-overflow-end {
-      right: 0;
-      left: auto;
+      bottom: auto;
       box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);
+      inset-inline-end: 0;
+      left: auto;
+      margin-block-start: 0;
+      margin-inline-start: calc(-1 * var(--chooser-fade-size));
+      right: 0;
+      top: 0;
+
+      &:before {
+        border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+      }
 
       .fig-overflow-chevron {
         rotate: -90deg;
       }
     }
   }
-  &[layout="vertical"], 
-  &[layout="grid"]{
-    > .fig-overflow-start{
-      &:before{
-        border-radius: var(--radius-medium) var(--radius-medium) 0 0;
-      }
+
+  &[layout="grid"] {
+    display: grid;
+    gap: var(--fig-chooser-gap);
+    grid-template-columns: repeat(
+      var(--fig-chooser-grid-columns, 2),
+      minmax(0, 1fr)
+    );
+    overflow: auto;
+    scroll-snap-type: none;
+
+    > :not(.fig-overflow) {
+      margin: 0;
+    }
+
+    > :not(.fig-overflow) + :not(.fig-overflow) {
+      margin: 0;
+    }
+
+    > .fig-overflow-start + :not(.fig-overflow),
+    > :not(.fig-overflow):has(+ .fig-overflow-end) {
+      margin: 0;
+    }
+
+    > .fig-overflow {
+      grid-column: 1 / -1;
+      margin-inline: 0;
+    }
+
+    > .fig-overflow-start {
+      order: -1;
     }
+
+    > :not(.fig-overflow) {
+      order: 0;
+    }
+
     > .fig-overflow-end {
-      &:before{
-        border-radius: 0 0 var(--radius-medium) var(--radius-medium);
-      }
+      order: 1;
     }
   }
+
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    pointer-events: none;
+    opacity: 0.4;
+  }
 }
 
 fig-choice {

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)}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)}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)}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}}