@rogieking/figui3 8.0.3 → 8.2.0

package/README.md

@@ -58,6 +58,13 @@ import "@rogieking/figui3/fig-editor.css";
 import "@rogieking/figui3/fig-editor.js";
 ```
 
+Opt into experimental Lab and PropsKit components after the core imports:
+
+```js
+import "@rogieking/figui3/fig-lab.css";
+import "@rogieking/figui3/fig-lab.js";
+```
+
 Or use a CDN:
 
 ```html
@@ -92,6 +99,11 @@ Minimal example:
 | [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 Position](#propskit-position) | `<propskit-position>` | Compact X/Y control |
+| [Propskit Color Point](#propskit-color-point) | `<propskit-color-point>` | Collapsible color and position group |
+| [Propskit Point Point](#propskit-point-point) | `<propskit-point-point>` | Collapsible start and end position group |
+| [Propskit Point Radius](#propskit-point-radius) | `<propskit-point-radius>` | Collapsible position and radius group |
+| [Propskit Point Radius Angle](#propskit-point-radius-angle) | `<propskit-point-radius-angle>` | Collapsible position, radius, and angle group |
 | [Propskit Select](#propskit-select) | `<propskit-select>` | Full-surface labeled select control |
 | [Propskit Switch](#propskit-switch) | `<propskit-switch>` | Full-surface labeled switch control |
 | [Propskit Text](#propskit-text) | `<propskit-text>` | Full-surface labeled text control |
@@ -322,6 +334,7 @@ each nested input to its own current `default`.
 | `direction` | string | `"horizontal"` | Field layout direction |
 | `size` | string | default | Set to `"large"` for the expanded layout |
 | `default` | number/string | initial `value` | Right-click reset target |
+| `disabled` | boolean | `false` | Disable interaction |
 | *number attrs* | — | — | All `<fig-input-number>` attributes are forwarded |
 
 **Events:** `input`, `change` — forwarded from the inner number input.
@@ -450,6 +463,7 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
 | `direction` | string | `"column"` | Layout direction |
 | `size` | string | default | Set to `"large"` for the expanded layout |
 | `default` | number/string | initial `value` | Double-click and right-click reset target |
+| `disabled` | boolean | `false` | Disable interaction |
 | *slider attrs* | — | — | All `<fig-slider>` attributes except host-only PropsKit attributes are forwarded |
 
 **Events:** `input`, `change` — forwarded from the inner slider.
@@ -464,6 +478,156 @@ Double-click or right-click and choose **Reset** to restore `default`, falling b
 
 ---
 
+#### Propskit Position
+
+`<propskit-position>`
+
+A compact X/Y field with optional percentage units.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `x` | number | `50` | Horizontal value |
+| `y` | number | `50` | Vertical value |
+| `default` | JSON string | initial `{ x, y }` | Right-click and group reset target |
+| `label` | string | `"Position"` | Field label; empty values use the semantic default |
+| `units` | string | — | `"percent"` shows `%`; omit for no units |
+| `size` | string | default | Set to `"large"` for the expanded row |
+| `disabled` | boolean | `false` | Disable both number inputs |
+
+**Properties and methods:** `x`, `y`, and `value` expose the current coordinates; `defaultValue` returns the normalized reset object; `isDefault` compares both coordinates; `resetToDefault()` restores both values.
+
+**Events:** `input` and `change` bubble across shadow boundaries with numeric `{ x, y, units }` in `event.detail`.
+
+```html
+<propskit-position
+  label="Position"
+  x="50"
+  y="50"
+  units="percent"
+  default='{"x":50,"y":50}'
+></propskit-position>
+```
+
+---
+
+#### Propskit Color Point
+
+`<propskit-color-point>`
+
+A compact `<fig-group>` wrapper that combines `<propskit-color>` and `<propskit-position>`. The group is collapsible and open by default.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `label` | string | — | Passed to the internal `fig-group` as `name` |
+| `value` | JSON string | `{"x":50,"y":50,"color":"#D9D9D9"}` | Current color-point value |
+| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
+| `open` | boolean | `true` | Passed to the internal `fig-group` |
+| `size` | string | default | Passed to both internal PropsKit controls |
+| `disabled` | boolean | `false` | Disable both internal controls |
+
+The internal group always has `compact`. `value` uses the same `{ x, y, color }` shape as `<fig-canvas-control type="color">`.
+
+**Events:** `input` and `change` bubble with numeric coordinates and `units` in `event.detail`. `openchange` mirrors the internal group's expanded state.
+
+```html
+<propskit-color-point
+  label="Light"
+  value='{"x":50,"y":50,"color":"#FF00BF"}'
+></propskit-color-point>
+```
+
+---
+
+#### Propskit Point Radius
+
+`<propskit-point-radius>`
+
+A compact `<fig-group>` wrapper that combines `<propskit-position>` and `<propskit-number>` for point-radius values. The group is collapsible and open by default.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `label` | string | — | Passed to the internal `fig-group` as `name` |
+| `value` | JSON string | `{"x":50,"y":50,"radius":0}` | Current point-radius value |
+| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
+| `open` | boolean | `true` | Passed to the internal `fig-group` |
+| `units` | string | — | `"percent"` passes percentage units to position and radius; omit for no units |
+| `size` | string | default | Passed to both internal PropsKit controls |
+| `disabled` | boolean | `false` | Disable both internal controls |
+
+The internal group always has `compact`. `value` uses the same `{ x, y, radius }` shape as `<fig-canvas-control type="point-radius">`. Numeric radius values use pixels; percentage strings preserve `%`.
+
+**Events:** `input` and `change` bubble with numeric `{ x, y, radius, units }` in `event.detail`. `openchange` mirrors the internal group's expanded state.
+
+```html
+<propskit-point-radius
+  label="Blur"
+  units="percent"
+  value='{"x":50,"y":50,"radius":"25%"}'
+></propskit-point-radius>
+```
+
+---
+
+#### Propskit Point Radius Angle
+
+`<propskit-point-radius-angle>`
+
+A compact `<fig-group>` wrapper combining `<propskit-position>` with radius and angle `<propskit-number>` controls. The group is collapsible and open by default.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `label` | string | — | Passed to the internal `fig-group` as `name` |
+| `value` | JSON string | `{"x":50,"y":50,"radius":0,"angle":0}` | Current point-radius-angle value |
+| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
+| `open` | boolean | `true` | Passed to the internal `fig-group` |
+| `units` | string | — | `"percent"` passes percentage units to position and radius; omit for no units |
+| `size` | string | default | Passed to every internal PropsKit control |
+| `disabled` | boolean | `false` | Disable every internal control |
+
+The internal group always has `compact`. `value` uses the same `{ x, y, radius, angle }` shape as `<fig-canvas-control type="point-radius-angle">`. Numeric radius values use pixels; percentage strings preserve `%`. Angles are degrees.
+
+**Events:** `input` and `change` bubble with numeric `{ x, y, radius, angle, units }` in `event.detail`. `openchange` mirrors the internal group's expanded state.
+
+```html
+<propskit-point-radius-angle
+  label="Gradient"
+  units="percent"
+  value='{"x":50,"y":50,"radius":"25%","angle":45}'
+></propskit-point-radius-angle>
+```
+
+---
+
+#### Propskit Point Point
+
+`<propskit-point-point>`
+
+A compact `<fig-group>` wrapper combining start and end `<propskit-position>` controls. The group is collapsible and open by default.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `label` | string | — | Passed to the internal `fig-group` as `name` |
+| `value` | JSON string | `{"x":50,"y":50,"x2":75,"y2":75}` | Current point-point value |
+| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
+| `open` | boolean | `true` | Passed to the internal `fig-group` |
+| `units` | string | — | `"percent"` passes percentage units to both positions; omit for no units |
+| `size` | string | default | Passed to both position controls |
+| `disabled` | boolean | `false` | Disable both position controls |
+
+The internal group always has `compact`. `value` uses the same `{ x, y, x2, y2 }` shape as `<fig-canvas-control type="point-point">`.
+
+**Events:** `input` and `change` bubble with numeric `{ x, y, x2, y2, units }` in `event.detail`. `openchange` mirrors the internal group's expanded state.
+
+```html
+<propskit-point-point
+  label="Gradient"
+  units="percent"
+  value='{"x":25,"y":25,"x2":75,"y2":75}'
+></propskit-point-point>
+```
+
+---
+
 #### Text Input
 
 `<fig-input-text>` — [demo](https://rog.ie/figui3/#text-input)

package/components.css

@@ -1686,6 +1686,7 @@ fig-video {
 
   > fig-spinner[slot="overlay"][data-loading-indicator][data-generated] {
     place-self: center;
+    max-width: none;
     z-index: 1;
     opacity: 1;
     pointer-events: none;
@@ -4300,6 +4301,7 @@ fig-field {
 fig-spinner {
   width: var(--spacer-4);
   height: var(--spacer-4);
+  flex-shrink: 0;
   display: inline-flex;
   background-color: var(--figma-color-icon-tertiary);
   mask-image: var(--icon-24-spinner);