@rogieking/figui3 10.0.5 → 10.0.7

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.7]
+
+### Added
+
+- Added a single-tab playground example.
+
+### Changed
+
+- Unified `fig-select-option` and `fig-menu-item` row styles.
+- Replaced select-option pseudo-element checkmarks with slotted small `fig-icon` checkmarks.
+
+### Fixed
+
+- Prevented selected tabs from emitting redundant `input` and `change` events when clicked again.
+
+## [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,17 @@ fig-tabs,
 
   > fig-tab {
     flex-shrink: 0;
+
+    /* Single tab */
+    &:first-of-type:last-of-type{
+      background-color: transparent;
+      padding-inline: 0;
+      margin-inline: 0;
+    }
+
+    & + fig-tab {
+      margin-left: var(--spacer-1);
+    }
   }
 
   > .fig-overflow {
@@ -1381,12 +1392,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 +1413,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);
@@ -6795,7 +6807,7 @@ fig-menu::part(listbox) {
   height: max-content;
 }
 
-fig-menu-item {
+:is(fig-menu-item, fig-select-option) {
   --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-4,1rem) var(--spacer-1,0.25rem) var(--spacer-3,0.75rem);
   box-sizing: border-box;
   display: flex;
@@ -6813,6 +6825,10 @@ fig-menu-item {
   position: relative;
   isolation: isolate;
 
+  &:has(fig-icon[slot="prepend"]){
+    --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-4,1rem) var(--spacer-1,0.25rem) var(--spacer-2,0.5rem);
+  }
+
   h3{
     margin: 0 0 var(--spacer-1) 0;
   }
@@ -6865,18 +6881,13 @@ fig-menu-item {
   &:has(> [slot="append"]) {
     --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-3,0.75rem);
   }
-  &:has(> [slot="prepend"]) {
+  &:has(> [slot="prepend"]:not([data-fig-select-checkmark])) {
     --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-2,0.5rem);
   }
-  &:has(> [slot="prepend"]):has(> [slot="append"]) {
+  &:has(> [slot="prepend"]:not([data-fig-select-checkmark])):has(> [slot="append"]) {
     --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-2,0.5rem);
   }
 
-  &:not(:has(> :not([slot="prepend"], [slot="append"]))) > [slot="prepend"] {
-    display: inline-flex;
-    vertical-align: middle;
-  }
-
   &[subtle]:not([subtle="false"]) {
     &:hover,
     &:focus-visible {