@rogieking/figui3 10.0.7 → 10.0.9

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.9]
+
+### Changed
+
+- Restored standard inline spacing for single-tab tab lists.
+
+### Fixed
+
+- Fixed one-sided overflow-fade masks so inactive and opposite edges remain fully visible.
+- Ensured end-edge fades disappear when no overflow remains.
+
+## [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

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

@@ -1375,8 +1375,6 @@ fig-tabs,
     /* Single tab */
     &:first-of-type:last-of-type{
       background-color: transparent;
-      padding-inline: 0;
-      margin-inline: 0;
     }
 
     & + fig-tab {
@@ -5398,14 +5396,64 @@ fig-skeleton {
   initial-value: 0px;
 }
 
+@property --fig-overflow-fade-top-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --fig-overflow-fade-bottom-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --fig-overflow-fade-left-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --fig-overflow-fade-right-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
 .fig-overflow-fade {
   --fig-overflow-fade-size: var(--spacer-5);
   --fig-overflow-fade-clear-top: 0px;
+  --fig-overflow-fade-edge-opacity: 0;
+  --fig-overflow-fade-edge-alpha-04: calc(
+    0.04 + var(--fig-overflow-fade-edge-opacity) * 0.96
+  );
+  --fig-overflow-fade-edge-alpha-16: calc(
+    0.16 + var(--fig-overflow-fade-edge-opacity) * 0.84
+  );
+  --fig-overflow-fade-edge-alpha-32: calc(
+    0.32 + var(--fig-overflow-fade-edge-opacity) * 0.68
+  );
+  --fig-overflow-fade-edge-alpha-50: calc(
+    0.5 + var(--fig-overflow-fade-edge-opacity) * 0.5
+  );
+  --fig-overflow-fade-edge-alpha-68: calc(
+    0.68 + var(--fig-overflow-fade-edge-opacity) * 0.32
+  );
+  --fig-overflow-fade-edge-alpha-84: calc(
+    0.84 + var(--fig-overflow-fade-edge-opacity) * 0.16
+  );
+  --fig-overflow-fade-edge-alpha-96: calc(
+    0.96 + var(--fig-overflow-fade-edge-opacity) * 0.04
+  );
 
   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;
@@ -5734,7 +5782,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,
@@ -5866,10 +5920,114 @@ 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
+    )
+  ) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-top-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to bottom,
+      black 0,
+      black var(--fig-overflow-fade-clear-top),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity))
+        var(--fig-overflow-fade-clear-top),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.125
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.25
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.375
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.5
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.625
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.75
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.875
+        ),
+      black calc(
+        var(--fig-overflow-fade-clear-top) +
+          var(--fig-overflow-fade-top)
+      ),
+      black 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
+    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
+    )
+  ) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-bottom-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to bottom,
+      black 0,
+      black calc(100% - var(--fig-overflow-fade-bottom)),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.875),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.75),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.625),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.5),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.375),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.25),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.125),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity)) 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
+    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,
@@ -6000,41 +6158,134 @@ 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) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-left-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to right,
+      black 0,
+      black var(--fig-overflow-fade-clear-left),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity))
+        var(--fig-overflow-fade-clear-left),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.125
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.25
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.375
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.5
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.625
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.75
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.875
+        ),
+      black calc(
+        var(--fig-overflow-fade-clear-left) +
+          var(--fig-overflow-fade-left)
+      ),
+      black 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
+    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) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-right-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to right,
+      black 0,
+      black calc(100% - var(--fig-overflow-fade-right)),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(100% - var(--fig-overflow-fade-right) * 0.875),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(100% - var(--fig-overflow-fade-right) * 0.75),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(100% - var(--fig-overflow-fade-right) * 0.625),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(100% - var(--fig-overflow-fade-right) * 0.5),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(100% - var(--fig-overflow-fade-right) * 0.375),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(100% - var(--fig-overflow-fade-right) * 0.25),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(100% - var(--fig-overflow-fade-right) * 0.125),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity)) 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
+    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 {
   from {
     --fig-overflow-fade-top: 0px;
+    --fig-overflow-fade-top-opacity: 1;
   }
   to {
     --fig-overflow-fade-top: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-top-opacity: 0;
   }
 }
 
 @keyframes fig-overflow-fade-out-bottom {
   from {
     --fig-overflow-fade-bottom: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-bottom-opacity: 0;
   }
   to {
     --fig-overflow-fade-bottom: 0px;
+    --fig-overflow-fade-bottom-opacity: 1;
   }
 }
 
 @keyframes fig-overflow-fade-in-left {
   from {
     --fig-overflow-fade-left: 0px;
+    --fig-overflow-fade-left-opacity: 1;
   }
   to {
     --fig-overflow-fade-left: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-left-opacity: 0;
   }
 }
 
 @keyframes fig-overflow-fade-out-right {
   from {
     --fig-overflow-fade-right: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-right-opacity: 0;
   }
   to {
     --fig-overflow-fade-right: 0px;
+    --fig-overflow-fade-right-opacity: 1;
   }
 }