@rogieking/figui3 10.0.5 → 10.0.6

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.6]
+
+### Added
+
+- Added `overflow="buttons|fade"` to `fig-tabs`, with paging buttons by default and buttonless horizontal fades as an option.
+
+### Fixed
+
+- Removed overflow-button layout gaps from tab strips.
+
 ## [10.0.5]
 
 ### Changed

package/README.md

@@ -814,16 +814,23 @@ Use `--fig-toolbelt-gap`, `--fig-toolbelt-group-gap`, `--fig-toolbelt-group-sepa
 | `value` | string | — | Selected tab value |
 | `name` | string | — | Tabs group identifier |
 | `disabled` | boolean | `false` | Disable all tabs |
+| `overflow` | string | `"buttons"` | `"buttons"` adds paging controls; `"fade"` uses horizontal edge fades without buttons |
 
 **Events:** `input`, `change` with selected tab value.
 
 Tabs use `role="tablist"` / `role="tab"` and roving focus. Use `content="#panel-id"` on each `<fig-tab>` to associate generated tab panels. Focus-visible tabs use the shared focus outline tokens.
+Overflow buttons are enabled by default. Set `overflow="fade"` for buttonless scrolling with `fig-overflow-fade fig-overflow-fade-horizontal` applied to the tabs container.
 
 ```html
 <fig-tabs value="tab1">
   <fig-tab value="tab1">General</fig-tab>
   <fig-tab value="tab2">Advanced</fig-tab>
 </fig-tabs>
+
+<fig-tabs value="tab1" overflow="fade">
+  <fig-tab value="tab1">General</fig-tab>
+  <fig-tab value="tab2">Advanced</fig-tab>
+</fig-tabs>
 ```
 
 ---

package/components.css

@@ -1357,7 +1357,7 @@ fig-tabs,
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  gap: var(--spacer-1);
+  gap: 0;
   min-width: 0;
   overflow: auto hidden;
   padding: var(--spacer-1) 0;
@@ -1371,6 +1371,10 @@ fig-tabs,
 
   > fig-tab {
     flex-shrink: 0;
+
+    & + fig-tab {
+      margin-left: var(--spacer-1);
+    }
   }
 
   > .fig-overflow {
@@ -1381,12 +1385,12 @@ fig-tabs,
     top: 0;
     z-index: 3;
     width: var(--spacer-4);
-    margin-left: calc(var(--spacer-2-5) * -1);
-    margin-right: calc(var(--spacer-2-5) * -1);
+    margin-inline: 0;
   }
 
   > .fig-overflow-start {
     left: 0;
+    margin-right: calc(var(--spacer-4) * -1);
     order: -1;
     right: auto;
     box-shadow: 1px 0 0 0 var(--figma-color-bordertranslucent);
@@ -1402,6 +1406,7 @@ fig-tabs,
 
   > .fig-overflow-end {
     left: auto;
+    margin-left: calc(var(--spacer-4) * -1);
     order: 1;
     right: 0;
     box-shadow: -1px 0 0 0 var(--figma-color-bordertranslucent);