@rogieking/figui3 3.9.2 → 3.13.0

package/README.md

@@ -487,7 +487,7 @@ A comprehensive fill input supporting colors, gradients, images, and video.
 <fig-input-fill value='{"type":"solid","color":"#FF5733","opacity":100}'></fig-input-fill>
 
 <!-- Gradient -->
-<fig-input-fill value='{"type":"gradient","gradient":{"type":"linear","angle":90,"stops":[{"position":0,"color":"#FF0000"},{"position":100,"color":"#0000FF"}]}}'></fig-input-fill>
+<fig-input-fill value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"oklab","stops":[{"position":0,"color":"#FF0000"},{"position":100,"color":"#0000FF"}]}}'></fig-input-fill>
 
 <!-- Image -->
 <fig-input-fill value='{"type":"image","image":{"url":"path/to/image.jpg","scaleMode":"fill"}}'></fig-input-fill>
@@ -495,6 +495,35 @@ A comprehensive fill input supporting colors, gradients, images, and video.
 
 ---
 
+### Gradient Input (`<fig-input-gradient>`)
+
+A gradient-only fill input that opens the `fig-fill-picker` locked to gradient mode.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | string | — | JSON gradient fill data (`{ "type": "gradient", "gradient": ... }`) |
+| `disabled` | boolean | `false` | Disable input |
+| `experimental` | string | — | Optional picker feature flags (e.g. `"modern"`) |
+| `picker-*` | string | — | Optional passthrough picker attributes (except `picker-anchor`) |
+| `picker-anchor` | string | `"self"` | Anchor target selector or `"self"` |
+
+```html
+<fig-input-gradient
+  value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"oklch","hueInterpolation":"shorter","stops":[{"position":0,"color":"#FF0000","opacity":100},{"position":100,"color":"#0000FF","opacity":100}]}}'
+></fig-input-gradient>
+```
+
+Supported gradient interpolation spaces:
+- `srgb`
+- `srgb-linear`
+- `display-p3`
+- `oklab`
+- `oklch` (supports `hueInterpolation`: `shorter`, `longer`, `increasing`, `decreasing`)
+
+Note: stop colors are currently authored/stored as hex (sRGB-origin). `display-p3` interpolation syntax is supported, but fully wide-gamut editing requires P3 stop-color storage.
+
+---
+
 ### Fill Picker (`<fig-fill-picker>`)
 
 A comprehensive fill picker dialog supporting solid colors, gradients, images, video, and webcam.
@@ -721,10 +750,11 @@ When `min` and `max` are omitted, the input is unbounded — dragging continuous
 | `value` | number | `0` | Angle value (in the unit specified by `units`) |
 | `precision` | number | `1` | Decimal places for display |
 | `text` | boolean | `false` | Show numeric text input alongside the dial |
+| `dial` | boolean | `true` | Show circular dial control (`dial="false"` hides it) |
 | `min` | number | — | Minimum angle (omit for unbounded) |
 | `max` | number | — | Maximum angle (omit for unbounded) |
 | `units` | string | `"°"` | Display unit: `"°"` (or `"deg"`), `"rad"`, `"turn"` |
-| `show-rotations` | boolean | `false` | Show a ×N rotation counter when angle exceeds 1 full rotation |
+| `rotations` | boolean | `false` | Show a ×N rotation counter when angle exceeds 1 full rotation (`rotations` or `rotations="true"`) |
 
 ```html
 <!-- Basic dial -->
@@ -746,7 +776,10 @@ When `min` and `max` are omitted, the input is unbounded — dragging continuous
 <fig-input-angle text="true" units="turn" value="0.5"></fig-input-angle>
 
 <!-- Show rotation count (×2 at 720°, ×3 at 1080°, etc.) -->
-<fig-input-angle text="true" show-rotations="true" value="1080"></fig-input-angle>
+<fig-input-angle text="true" rotations value="1080"></fig-input-angle>
+
+<!-- Text-only mode (hide dial) -->
+<fig-input-angle text="true" dial="false" value="90"></fig-input-angle>
 ```
 
 ---