@rogieking/figui3 6.28.1 → 6.29.1

package/README.md

@@ -90,6 +90,7 @@ Minimal example:
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
 | [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled field + slider combo |
 | [Propskit Color](#propskit-color) | `<propskit-color>` | Full-surface labeled color control |
+| [Propskit Gradient](#propskit-gradient) | `<propskit-gradient>` | Full-surface labeled gradient control |
 | [Propskit Number](#propskit-number) | `<propskit-number>` | Full-surface labeled number control |
 | [Propskit Select](#propskit-select) | `<propskit-select>` | Full-surface labeled select control |
 | [Propskit Switch](#propskit-switch) | `<propskit-switch>` | Full-surface labeled switch control |
@@ -304,7 +305,8 @@ For `type="range"`, omitting `value` follows native range behavior and starts at
 
 Composes a `<fig-field>` and `<fig-input-number>` into a full-surface property control. Number attributes are forwarded to the inner input.
 
-PropsKit controls that support `size` default to the large layout when the attribute is omitted.
+PropsKit controls use the compact default layout when `size` is omitted. Set
+`size="large"` for the 40px row layout.
 
 All PropsKit inputs expose `defaultValue`, `isDefault`, and `resetToDefault()`. A
 `propskit-group` uses this shared contract to track its `dirty` state and reset
@@ -314,7 +316,7 @@ each nested input to its own current `default`.
 |---|---|---|---|
 | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
 | `direction` | string | `"horizontal"` | Field layout direction |
-| `size` | string | `"large"` | Control layout size |
+| `size` | string | default | Set to `"large"` for the expanded layout |
 | `default` | number/string | initial `value` | Right-click reset target |
 | *number attrs* | — | — | All `<fig-input-number>` attributes are forwarded |
 
@@ -346,6 +348,38 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 ---
 
+#### Propskit Gradient
+
+`<propskit-gradient>`
+
+Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property control. The gradient is inline-editable by default.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `label` | string | `"Label"` | Field label text; use an empty value to hide it |
+| `value` | JSON string | default gradient | Canonical `{ "type": "gradient", "gradient": { ... } }` data |
+| `default` | JSON string | initial `value` | Right-click and group reset target |
+| `edit` | boolean/string | `true` | `true`, `false`, or `"picker"` |
+| `mode` | string | `"handle"` | `"handle"` or `"tip"` stop presentation |
+| `disabled` | boolean | `false` | Disabled state |
+| `size` | string | default | Set to `"large"` for the expanded layout |
+
+**Events:** `input`, `change` — bubbling, composed events with `{ type: "gradient", gradient }` in `event.detail`.
+
+**Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`. JSON defaults use structural equality, so object key order does not affect dirty state.
+
+The first stop receives focus when the field is focused. Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.
+
+```html
+<propskit-gradient
+  label="Fill"
+  value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"srgb","hueInterpolation":"shorter","stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}}'
+  default='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"srgb","hueInterpolation":"shorter","stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}}'
+></propskit-gradient>
+```
+
+---
+
 #### Propskit Switch
 
 `<propskit-switch>`
@@ -410,7 +444,7 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
 |---|---|---|---|
 | `label` | string | — | Field label text |
 | `direction` | string | `"column"` | Layout direction |
-| `size` | string | `"large"` | Control layout size |
+| `size` | string | default | Set to `"large"` for the expanded layout |
 | `default` | number/string | initial `value` | Double-click and right-click reset target |
 | *slider attrs* | — | — | All `<fig-slider>` attributes except host-only PropsKit attributes are forwarded |
 
@@ -671,8 +705,8 @@ Supported interpolation spaces: `srgb`, `srgb-linear`, `display-p3`, `oklab`, `o
 
 | Event | Detail |
 |---|---|
-| `input` | `{ type, gradient, css }` |
-| `change` | `{ type, gradient, css }` |
+| `input` | `{ type, gradient }` |
+| `change` | `{ type, gradient }` |
 
 ```html
 <fig-input-gradient

package/components.css

@@ -3869,6 +3869,9 @@ fig-input-gradient {
     .fig-input-gradient-track {
       inset: 0;
     }
+    > fig-swatch{
+      --size: var(--fig-input-gradient-height);
+    }
   }
 
   .fig-input-gradient-track {