@rogieking/figui3 10.0.6 → 10.0.8

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.8]
+
+### Added
+
+- Added single-edge top, bottom, left, and right modifiers to the overflow-fade utility.
+
+### Changed
+
+- Added edge controls to the vertical and horizontal overflow-fade playground examples.
+
+## [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

package/README.md

@@ -1167,7 +1167,10 @@ For `point-point`, both handles support direct drag (with a dynamic directional
 A progressively enhanced scroll utility that fades its edges when more content
 is available in that direction. Apply the class to a height-constrained
 container for vertical scrolling. Add `.fig-overflow-fade-horizontal` for
-horizontal scrolling.
+horizontal scrolling. Add `.fig-overflow-fade-top` or
+`.fig-overflow-fade-bottom` to limit a vertical fade to one edge. Use
+`.fig-overflow-fade-left` or `.fig-overflow-fade-right` for a single horizontal
+edge; these modifiers imply horizontal scrolling.
 
 | Custom property | Default | Description |
 |---|---|---|---|
@@ -1194,6 +1197,16 @@ timelines. Unsupported browsers retain ordinary scrolling without a fade.
 </div>
 ```
 
+```html
+<div class="fig-overflow-fade fig-overflow-fade-bottom">
+  <!-- Long content that fades only at the bottom -->
+</div>
+
+<div class="fig-overflow-fade fig-overflow-fade-right">
+  <!-- Wide content that fades only at the right -->
+</div>
+```
+
 ---
 
 #### Stack

package/components.css

@@ -1372,6 +1372,13 @@ 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);
     }
@@ -5398,7 +5405,11 @@ fig-skeleton {
   overflow-y: auto;
 }
 
-.fig-overflow-fade.fig-overflow-fade-horizontal {
+.fig-overflow-fade:is(
+  .fig-overflow-fade-horizontal,
+  .fig-overflow-fade-left,
+  .fig-overflow-fade-right
+) {
   --fig-overflow-fade-clear-left: 0px;
 
   overflow-x: auto;
@@ -5727,7 +5738,13 @@ fig-toolbelt {
 }
 
 @supports (animation-timeline: scroll(self block)) {
-  .fig-overflow-fade:not(.fig-overflow-fade-horizontal),
+  .fig-overflow-fade:not(
+    :is(
+      .fig-overflow-fade-horizontal,
+      .fig-overflow-fade-left,
+      .fig-overflow-fade-right
+    )
+  ),
   fig-toolbelt[layout="vertical"]::part(viewport) {
     mask-image: linear-gradient(
       to bottom,
@@ -5859,10 +5876,41 @@ fig-toolbelt {
       calc(100% - var(--fig-overflow-fade-size)) 100%;
   }
 
+  .fig-overflow-fade.fig-overflow-fade-top:not(
+    .fig-overflow-fade-bottom
+  ):not(
+    :is(
+      .fig-overflow-fade-horizontal,
+      .fig-overflow-fade-left,
+      .fig-overflow-fade-right
+    )
+  ) {
+    animation: fig-overflow-fade-in-top 1ms linear both;
+    animation-timeline: scroll(self block);
+    animation-range: 0 var(--fig-overflow-fade-size);
+  }
+
+  .fig-overflow-fade.fig-overflow-fade-bottom:not(
+    .fig-overflow-fade-top
+  ):not(
+    :is(
+      .fig-overflow-fade-horizontal,
+      .fig-overflow-fade-left,
+      .fig-overflow-fade-right
+    )
+  ) {
+    animation: fig-overflow-fade-out-bottom 1ms linear both;
+    animation-timeline: scroll(self block);
+    animation-range: calc(100% - var(--fig-overflow-fade-size)) 100%;
+  }
 }
 
 @supports (animation-timeline: scroll(self inline)) {
-  .fig-overflow-fade.fig-overflow-fade-horizontal,
+  .fig-overflow-fade:is(
+    .fig-overflow-fade-horizontal,
+    .fig-overflow-fade-left,
+    .fig-overflow-fade-right
+  ),
   fig-toolbelt:not([layout="vertical"])::part(viewport) {
     mask-image: linear-gradient(
       to right,
@@ -5993,6 +6041,18 @@ fig-toolbelt {
       0 var(--fig-overflow-fade-size),
       calc(100% - var(--fig-overflow-fade-size)) 100%;
   }
+
+  .fig-overflow-fade.fig-overflow-fade-left:not(.fig-overflow-fade-right) {
+    animation: fig-overflow-fade-in-left 1ms linear both;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 var(--fig-overflow-fade-size);
+  }
+
+  .fig-overflow-fade.fig-overflow-fade-right:not(.fig-overflow-fade-left) {
+    animation: fig-overflow-fade-out-right 1ms linear both;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(100% - var(--fig-overflow-fade-size)) 100%;
+  }
 }
 
 @keyframes fig-overflow-fade-in-top {
@@ -6800,7 +6860,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;
@@ -6818,6 +6878,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;
   }
@@ -6870,18 +6934,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 {