@rogieking/figui3 9.0.4 → 9.0.6

package/.cursor/skills/figui3/components.md

@@ -416,6 +416,21 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 
 - Attrs: `position` (`right` | `left` | `middle`), `tooltip`, `tail`
 
+### `.fig-overflow-fade`
+
+```tsx
+<div className="fig-overflow-fade" style={{ maxHeight: "12rem" }}>
+  {content}
+</div>
+```
+
+- Apply the class directly to a height-constrained vertical scroll container.
+- Add `fig-overflow-fade-horizontal` for a horizontal scroll container.
+- CSS custom property: `--fig-overflow-fade-size` (default: `var(--spacer-5)`).
+- CSS custom property: `--fig-overflow-fade-clear-top` (default: `0px`) keeps a sticky header fully visible.
+- CSS custom property: `--fig-overflow-fade-clear-left` (default: `0px`) reserves a visible area at the start of a horizontal scroller.
+- The direction-aware mask is enabled only when self scroll timelines are supported; other browsers retain normal scrolling without fades.
+
 ## Overlays
 
 ### `dialog is="fig-dialog"`

package/.cursor/skills/figui3/reference.md

@@ -44,6 +44,14 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 - `direction="horizontal|vertical"`
 - `label` or a child `<label>`
 
+## `.fig-overflow-fade`
+
+- Apply the class to a vertical scroll container and constrain its height; add `fig-overflow-fade-horizontal` for horizontal scrolling.
+- Fade size: `--fig-overflow-fade-size` (default `var(--spacer-5)`).
+- Sticky-header clearance: `--fig-overflow-fade-clear-top` (default `0px`).
+- Horizontal start clearance: `--fig-overflow-fade-clear-left` (default `0px`).
+- Direction-aware fades require self scroll timeline support; unsupported browsers scroll normally without a mask.
+
 ## `fig-popup` vs `fig-dialog`
 
 Dialog: `modal`, `drag`, `resizable`, `autoresize`, `handle`, `closedby="any|closerequest|none"`, `position` (viewport: `top left` … `bottom right`).

package/README.md

@@ -1014,6 +1014,42 @@ For `point-point`, both handles support direct drag (with a dynamic directional
 
 ### Layout & Feedback
 
+#### Overflow Fade
+
+`.fig-overflow-fade` — [demo](https://rog.ie/figui3/#overflow-fade)
+
+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.
+
+| Custom property | Default | Description |
+|---|---|---|---|
+| `--fig-overflow-fade-size` | `var(--spacer-5)` | Size of each fade edge |
+| `--fig-overflow-fade-clear-top` | `0px` | Fully visible area reserved for a sticky header |
+| `--fig-overflow-fade-clear-left` | `0px` | Fully visible area reserved at the start of a horizontal scroller |
+
+The mask and animations are applied only when the browser supports self scroll
+timelines. Unsupported browsers retain ordinary scrolling without a fade.
+
+```html
+<div class="fig-overflow-fade" style="max-height: 12rem;">
+  <fig-content>
+    <!-- Long content -->
+  </fig-content>
+</div>
+```
+
+```html
+<div class="fig-overflow-fade fig-overflow-fade-horizontal">
+  <div style="display: flex; width: max-content;">
+    <!-- Wide content -->
+  </div>
+</div>
+```
+
+---
+
 #### Field
 
 `<fig-field>` — [demo](https://rog.ie/figui3/#field)

package/components.css

@@ -5027,6 +5027,347 @@ fig-skeleton {
 
 /* Utilities */
 
+@property --fig-overflow-fade-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --fig-overflow-fade-bottom {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --fig-overflow-fade-left {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --fig-overflow-fade-right {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+.fig-overflow-fade {
+  --fig-overflow-fade-size: var(--spacer-5);
+  --fig-overflow-fade-clear-top: 0px;
+
+  overflow-y: auto;
+}
+
+.fig-overflow-fade.fig-overflow-fade-horizontal {
+  --fig-overflow-fade-clear-left: 0px;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+@supports (animation-timeline: scroll(self block)) {
+  .fig-overflow-fade:not(.fig-overflow-fade-horizontal) {
+    mask-image: linear-gradient(
+      to bottom,
+      black 0,
+      black var(--fig-overflow-fade-clear-top),
+      transparent var(--fig-overflow-fade-clear-top),
+      rgba(0, 0, 0, 0.04)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.125
+        ),
+      rgba(0, 0, 0, 0.16)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.25
+        ),
+      rgba(0, 0, 0, 0.32)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.375
+        ),
+      rgba(0, 0, 0, 0.5)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.5
+        ),
+      rgba(0, 0, 0, 0.68)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.625
+        ),
+      rgba(0, 0, 0, 0.84)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.75
+        ),
+      rgba(0, 0, 0, 0.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 calc(100% - var(--fig-overflow-fade-bottom)),
+      rgba(0, 0, 0, 0.96)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.875),
+      rgba(0, 0, 0, 0.84)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.75),
+      rgba(0, 0, 0, 0.68)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.625),
+      rgba(0, 0, 0, 0.5)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.5),
+      rgba(0, 0, 0, 0.32)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.375),
+      rgba(0, 0, 0, 0.16)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.25),
+      rgba(0, 0, 0, 0.04)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.125),
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      black 0,
+      black var(--fig-overflow-fade-clear-top),
+      transparent var(--fig-overflow-fade-clear-top),
+      rgba(0, 0, 0, 0.04)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.125
+        ),
+      rgba(0, 0, 0, 0.16)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.25
+        ),
+      rgba(0, 0, 0, 0.32)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.375
+        ),
+      rgba(0, 0, 0, 0.5)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.5
+        ),
+      rgba(0, 0, 0, 0.68)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.625
+        ),
+      rgba(0, 0, 0, 0.84)
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.75
+        ),
+      rgba(0, 0, 0, 0.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 calc(100% - var(--fig-overflow-fade-bottom)),
+      rgba(0, 0, 0, 0.96)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.875),
+      rgba(0, 0, 0, 0.84)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.75),
+      rgba(0, 0, 0, 0.68)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.625),
+      rgba(0, 0, 0, 0.5)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.5),
+      rgba(0, 0, 0, 0.32)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.375),
+      rgba(0, 0, 0, 0.16)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.25),
+      rgba(0, 0, 0, 0.04)
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.125),
+      transparent 100%
+    );
+
+    animation:
+      fig-overflow-fade-in-top 1ms linear both,
+      fig-overflow-fade-out-bottom 1ms linear both;
+    animation-timeline: scroll(self block);
+    animation-range:
+      0 var(--fig-overflow-fade-size),
+      calc(100% - var(--fig-overflow-fade-size)) 100%;
+  }
+
+}
+
+@supports (animation-timeline: scroll(self inline)) {
+  .fig-overflow-fade.fig-overflow-fade-horizontal {
+    mask-image: linear-gradient(
+      to right,
+      black 0,
+      black var(--fig-overflow-fade-clear-left),
+      transparent var(--fig-overflow-fade-clear-left),
+      rgba(0, 0, 0, 0.04)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.125
+        ),
+      rgba(0, 0, 0, 0.16)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.25
+        ),
+      rgba(0, 0, 0, 0.32)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.375
+        ),
+      rgba(0, 0, 0, 0.5)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.5
+        ),
+      rgba(0, 0, 0, 0.68)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.625
+        ),
+      rgba(0, 0, 0, 0.84)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.75
+        ),
+      rgba(0, 0, 0, 0.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 calc(100% - var(--fig-overflow-fade-right)),
+      rgba(0, 0, 0, 0.96)
+        calc(100% - var(--fig-overflow-fade-right) * 0.875),
+      rgba(0, 0, 0, 0.84)
+        calc(100% - var(--fig-overflow-fade-right) * 0.75),
+      rgba(0, 0, 0, 0.68)
+        calc(100% - var(--fig-overflow-fade-right) * 0.625),
+      rgba(0, 0, 0, 0.5)
+        calc(100% - var(--fig-overflow-fade-right) * 0.5),
+      rgba(0, 0, 0, 0.32)
+        calc(100% - var(--fig-overflow-fade-right) * 0.375),
+      rgba(0, 0, 0, 0.16)
+        calc(100% - var(--fig-overflow-fade-right) * 0.25),
+      rgba(0, 0, 0, 0.04)
+        calc(100% - var(--fig-overflow-fade-right) * 0.125),
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      black 0,
+      black var(--fig-overflow-fade-clear-left),
+      transparent var(--fig-overflow-fade-clear-left),
+      rgba(0, 0, 0, 0.04)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.125
+        ),
+      rgba(0, 0, 0, 0.16)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.25
+        ),
+      rgba(0, 0, 0, 0.32)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.375
+        ),
+      rgba(0, 0, 0, 0.5)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.5
+        ),
+      rgba(0, 0, 0, 0.68)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.625
+        ),
+      rgba(0, 0, 0, 0.84)
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.75
+        ),
+      rgba(0, 0, 0, 0.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 calc(100% - var(--fig-overflow-fade-right)),
+      rgba(0, 0, 0, 0.96)
+        calc(100% - var(--fig-overflow-fade-right) * 0.875),
+      rgba(0, 0, 0, 0.84)
+        calc(100% - var(--fig-overflow-fade-right) * 0.75),
+      rgba(0, 0, 0, 0.68)
+        calc(100% - var(--fig-overflow-fade-right) * 0.625),
+      rgba(0, 0, 0, 0.5)
+        calc(100% - var(--fig-overflow-fade-right) * 0.5),
+      rgba(0, 0, 0, 0.32)
+        calc(100% - var(--fig-overflow-fade-right) * 0.375),
+      rgba(0, 0, 0, 0.16)
+        calc(100% - var(--fig-overflow-fade-right) * 0.25),
+      rgba(0, 0, 0, 0.04)
+        calc(100% - var(--fig-overflow-fade-right) * 0.125),
+      transparent 100%
+    );
+
+    animation:
+      fig-overflow-fade-in-left 1ms linear both,
+      fig-overflow-fade-out-right 1ms linear both;
+    animation-timeline: scroll(self inline);
+    animation-range:
+      0 var(--fig-overflow-fade-size),
+      calc(100% - var(--fig-overflow-fade-size)) 100%;
+  }
+}
+
+@keyframes fig-overflow-fade-in-top {
+  from {
+    --fig-overflow-fade-top: 0px;
+  }
+  to {
+    --fig-overflow-fade-top: var(--fig-overflow-fade-size);
+  }
+}
+
+@keyframes fig-overflow-fade-out-bottom {
+  from {
+    --fig-overflow-fade-bottom: var(--fig-overflow-fade-size);
+  }
+  to {
+    --fig-overflow-fade-bottom: 0px;
+  }
+}
+
+@keyframes fig-overflow-fade-in-left {
+  from {
+    --fig-overflow-fade-left: 0px;
+  }
+  to {
+    --fig-overflow-fade-left: var(--fig-overflow-fade-size);
+  }
+}
+
+@keyframes fig-overflow-fade-out-right {
+  from {
+    --fig-overflow-fade-right: var(--fig-overflow-fade-size);
+  }
+  to {
+    --fig-overflow-fade-right: 0px;
+  }
+}
+
 .fig-mask-icon,
 fig-icon {
   /* size only — paint containment skips mask-image when `name` / `--icon` updates
@@ -5457,7 +5798,8 @@ fig-choice {
   }
 
   &[padding]:not([padding="false"]) {
-    --fig-choice-padding: var(--spacer-2);
+    --fig-choice-padding: var(--spacer-1);
+    --fig-choice-border-radius: var(--radius-medium-large);
   }
 
   &[selected]:not([selected="false"]) {
@@ -5467,11 +5809,10 @@ fig-choice {
       position: absolute;
       inset: 0;
       border-radius: calc(
-        var(--fig-choice-border-radius) + var(--fig-choice-selection-ring-width)
+        var(--fig-choice-border-radius)
       );
       pointer-events: none;
       z-index: 1;
-      box-shadow: inset 0 0 0 calc(var(--fig-choice-selection-ring-width)*2) var(--figma-color-bg);
       outline: var(--fig-choice-selection-ring-width) solid
         var(--figma-color-border-selected);
       outline-offset: calc(var(--fig-choice-selection-ring-width) * -1);