@rogieking/figui3 8.9.48 → 8.10.0

package/README.md

@@ -103,14 +103,19 @@ Minimal example:
 | [Radio](#radio) | `<fig-radio>` | Radio button |
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
-| [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled field + slider combo |
+| [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled slider surface |
 | [Input Wheel](#input-wheel) | `<fig-input-wheel>` | Standalone SVG tick-and-handle numeric scrubber |
 | [Propskit Wheel](#propskit-wheel) | `<propskit-wheel>` | Labeled input wheel with optional number field |
 | [Propskit Color](#propskit-color) | `<propskit-color>` | Full-surface labeled color control |
 | [Propskit Fill](#propskit-fill) | `<propskit-fill>` | Full-surface labeled fill control |
 | [Propskit Gradient](#propskit-gradient) | `<propskit-gradient>` | Full-surface labeled gradient control |
+| [Propskit Palette](#propskit-palette) | `<propskit-palette>` | Labeled palette selector |
 | [Propskit Number](#propskit-number) | `<propskit-number>` | Full-surface labeled number control |
 | [Propskit Position](#propskit-position) | `<propskit-position>` | Compact X/Y control |
+| [Propskit Joystick](#propskit-joystick) | `<propskit-joystick>` | Labeled two-axis joystick |
+| [Propskit Origin](#propskit-origin) | `<propskit-origin>` | Labeled transform-origin grid |
+| [Propskit Easing](#propskit-easing) | `<propskit-easing>` | Labeled cubic-bezier editor |
+| [Propskit Spring](#propskit-spring) | `<propskit-spring>` | Labeled spring editor |
 | [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 |
@@ -231,11 +236,12 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 | `label` | string | — | Closed-state / accessible label |
 | `options` | string | — | Comma, newline, or JSON options if no authored `fig-select-option` children |
 | `variant` | string | — | `"ghost"` for a borderless control with secondary hover fill |
+| `subtle` | boolean | `false` | Use the secondary hover/focus fill for every option |
 | `full` | boolean | `false` | Stretch to available width |
 | `position` | string | `"bottom left"` | Popup position |
 | `disabled` | boolean | `false` | Disabled state |
 
-Author options in `<fig-select-options>`, or pass `options`. Use `label` on `<fig-select-option>` when the option content is rich. `fig-separator` with `sticky` pins group labels while scrolling.
+Author options in `<fig-select-options>`, or pass `options`. Add `subtle` to one `<fig-select-option>` for the secondary hover/focus fill, or to `<fig-select>` to apply it to every option. Use `label` on `<fig-select-option>` when the option content is rich. `fig-separator` with `sticky` pins group labels while scrolling.
 
 ```html
 <fig-select value="center" label="Align">
@@ -359,36 +365,45 @@ Author options in `<fig-select-options>`, or pass `options`. Use `label` on `<fi
 
 For `type="range"`, omitting `value` follows native range behavior and starts at the midpoint of `min` and `max`. Arrow keys move by `step`; hold Shift to move by a larger step.
 
-Full-surface `propskit-*` controls support `variant="minimal"`. The minimal variant removes vertical row padding and keeps the field background transparent until hover. It is available on switch, color, fill, gradient, select, text, number, slider, position, and wheel controls.
-
 ---
 
 #### Propskit Number
 
 `<propskit-number>`
 
-Composes a `<fig-field>` and `<fig-input-number>` into a full-surface property control. Number attributes are forwarded to the inner input.
-
-PropsKit controls use the 40px large layout when `size` is omitted. Set
-`size="small"` for the compact 32px row layout. Explicit `size="large"`
-remains supported as an alias for the default layout.
+Uses a plain horizontal surface with `<fig-input-number>`. Number attributes are forwarded to the inner input.
 
 All PropsKit inputs expose `defaultValue`, `isDefault`, and `resetToDefault()`. A
 `propskit-group` uses this shared contract to track its `dirty` state and reset
-each nested input to its own current `default`. Set `size="small"` on a
-`propskit-group` to apply the compact layout to nested controls that do not
-define their own size.
+each nested input to its own current `default`.
+
+Surface labels default to `"Label"` when omitted; `label=""` removes the visible
+label. PropsKit `input` and `change` events dispatch from the outer control with
+`detail: { control, value, name? }`, and `event.target.value` is the same typed
+value. `name` is included only when a non-empty `name` attribute is authored.
+Switch values are boolean. Number, slider, and wheel values are finite numbers
+or `null`; structured and
+serialized controls expose their exact public `.value`. Select `optionhover`
+uses the same envelope. `openchange` and group `reset` keep their semantic
+details.
+
+Shared surface variables are `--propskit-padding-block`,
+`--propskit-padding-inline`, `--propskit-background`, `--propskit-border`,
+`--propskit-color`, `--propskit-hover-background`, `--propskit-hover-border`,
+`--propskit-hover-color`, `--propskit-label-inline-size`, and
+`--propskit-input-inline-size`. Override one component with the matching prefix,
+such as `--propskit-select-background` or
+`--propskit-number-input-inline-size`.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
-| `direction` | string | `"horizontal"` | Field layout direction |
-| `size` | string | default | Set to `"small"` for the compact layout |
+| `name` | string | — | Optional event payload name |
 | `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.
+**Events:** `input`, `change` — shared PropsKit envelope with `value: number | null`.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` (falling back to the initial value).
 
@@ -402,11 +417,11 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-color>`
 
-Composes a `<fig-field>` and a solid `fig-fill-picker` swatch into a full-surface property control. Clicking the field opens the color picker. There is no hex/opacity text field.
+Uses a plain horizontal surface with a solid `fig-fill-picker` swatch. Clicking the surface opens the color picker. There is no hex/opacity text field.
 
-**Attributes:** `label`, `value`, `default`, `alpha`, `disabled`, `size`
+**Attributes:** `label`, `value`, `default`, `alpha`, `disabled`
 
-**Events:** `input`, `change` — `{ color, alpha, opacity }` from the fill picker.
+**Events:** `input`, `change` — shared PropsKit envelope; `value` is the public color string.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial color.
 
@@ -420,11 +435,11 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-fill>`
 
-Composes a `<fig-field>` and a `fig-fill-picker` swatch into a full-surface property control, same chrome as `propskit-color`. Clicking the field opens the fill picker for solid, gradient, image, video, webcam, and custom modes. There is no hex/opacity text field.
+Uses a plain horizontal surface with a `fig-fill-picker` swatch, sharing chrome with `propskit-color`. Clicking the surface opens the fill picker for solid, gradient, image, video, webcam, and custom modes. There is no hex/opacity text field.
 
-**Attributes:** `label`, `value` (fill JSON), `default`, `mode`, `alpha`, `webcam-mode`, `default-video`, `disabled`, `size`
+**Attributes:** `label`, `value` (fill JSON), `default`, `mode`, `alpha`, `webcam-mode`, `default-video`, `disabled`
 
-**Events:** `input`, `change` — fill object in `event.detail` (`{ type, ... }`).
+**Events:** `input`, `change` — shared PropsKit envelope; `value` is the host's serialized fill value.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial fill. Slot `mode-*` children onto the host to add custom picker tabs.
 
@@ -441,7 +456,7 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-gradient>`
 
-Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property control. Defaults to `edit="picker"` — click the field to open the fill picker.
+Uses a plain horizontal surface with `<fig-input-gradient>`. Defaults to `edit="picker"` — click the surface to open the fill picker.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -451,9 +466,8 @@ Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property
 | `edit` | boolean/string | `"picker"` | `true` (inline stops), `false`, or `"picker"` |
 | `mode` | string | `"handle"` | `"handle"` or `"tip"` stop presentation |
 | `disabled` | boolean | `false` | Disabled state |
-| `size` | string | default | Set to `"small"` for the compact layout |
 
-**Events:** `input`, `change` — bubbling, composed events with `{ type: "gradient", gradient }` in `event.detail`.
+**Events:** `input`, `change` — shared PropsKit envelope; `value` is the host's serialized gradient value.
 
 **Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`. JSON defaults use structural equality, so object key order does not affect dirty state.
 
@@ -469,15 +483,40 @@ Click the field to open the fill picker. With `edit="true"`, the first stop rece
 
 ---
 
+#### Propskit Palette
+
+`<propskit-palette>`
+
+Uses a plain horizontal surface with a selection-only `<fig-input-palette>` preview inside `<fig-select>`. Import `fig-editor.js` and `fig-editor.css`. Clicking anywhere on the surface opens the palette menu.
+
+`options` is a JSON array of palettes. Each palette accepts color strings or `{ "color", "alpha" }` objects. The first palette is selected when `value` is omitted.
+
+**Attributes:** `label`, `name`, `value` (palette JSON), `default` (palette JSON), `options`, `disabled`
+
+**Events:** `input`, `change`, `optionhover` — shared PropsKit envelope with a typed `Array<{ color, alpha }>` value. `optionhover` does not change the selection.
+
+**Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`.
+
+```html
+<propskit-palette
+  label="Palette"
+  options='[["#0D99FF","#14AE5C"],[{"color":"#FFCD29","alpha":0.5},"#F24822"]]'
+></propskit-palette>
+```
+
+---
+
 #### Propskit Switch
 
 `<propskit-switch>`
 
-Composes a `<fig-field>` and an Off/On `<fig-segmented-control>` into a full-surface boolean property control.
+Uses a plain horizontal surface with `<fig-switch>` by default. The entire
+surface toggles the switch. Set `variant="segmented-control"` to render an
+Off/On `<fig-segmented-control>` instead.
 
-**Attributes:** `label`, `checked`, `default`, `disabled`, `name`, `value`, `size`
+**Attributes:** `label`, `checked`, `default`, `disabled`, `name`, `value`, `variant` (`switch` | `segmented-control`)
 
-**Events:** `input`, `change` — forwarded from the inner switch.
+**Events:** `input`, `change` — shared PropsKit envelope with the public boolean value.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore the default checked state.
 
@@ -491,11 +530,11 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore the def
 
 `<propskit-select>`
 
-Composes a `<fig-field>` and `<fig-select>` into a full-surface property control. Requires `fig-editor.js` (which registers `fig-select`). Options can come from the `options` attribute (same formats as `fig-options`: comma-separated, newline-delimited, or a JSON array), or from an authored `<fig-select-options>` child for rich option content.
+Uses a plain horizontal surface and always composes `<fig-select>`. Import `fig-editor.js` and `fig-editor.css`; delayed registration upgrades the authored select. Options can come from the `options` attribute (same formats as `fig-options`: comma-separated, newline-delimited, or a JSON array), or from an authored `<fig-select-options>` child for rich option content.
 
-**Attributes:** `label`, `value`, `default`, `options`, `disabled`, `size`
+**Attributes:** `label`, `value`, `default`, `options`, `disabled`
 
-**Events:** `input`, `change`, `optionhover` — forwarded from the inner select. `optionhover` fires once when the pointer enters an enabled option, with the option value in `event.detail`, without changing the selection.
+**Events:** `input`, `change`, `optionhover` — shared PropsKit envelope. `optionhover` uses the hovered option as `detail.value` without changing the selection.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial selection.
 
@@ -519,11 +558,11 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-text>`
 
-Composes a `<fig-field>` and `<fig-input-text>` into a full-surface, single-line property control. Text input attributes and adornment slots are forwarded to the inner control.
+Uses a plain horizontal surface with `<fig-input-text type="text">`. The inner input defaults to `multiline` and `autoresize`, starts at one line, and grows to a maximum of four lines. Set either attribute to `"false"` to disable that behavior. Other text input attributes and adornment slots are forwarded to the inner control; `type` is not forwarded.
 
-**Attributes:** `label`, `value`, `default`, `placeholder`, `type`, `disabled`, `readonly`, `autoresize`, `size`
+**Attributes:** `label`, `value`, `default`, `placeholder`, `disabled`, `readonly`, `multiline`, `autoresize`
 
-**Events:** `input`, `change` — forwarded from the inner text input.
+**Events:** `input`, `change` — shared PropsKit envelope with the public string value.
 
 Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial text.
 
@@ -537,18 +576,17 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 `<propskit-slider>`
 
-Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slider attributes (except `label`, `direction`) are forwarded to the inner slider.
+Uses a plain horizontal surface with `<fig-slider>`. Slider attributes except host-only PropsKit attributes are forwarded to the inner slider.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `label` | string | — | Field label text |
-| `direction` | string | `"column"` | Layout direction |
-| `size` | string | default | Set to `"small"` for the compact layout |
+| `label` | string | `"Label"` | Field label text; use an empty value to hide it |
+| `name` | string | — | Optional event payload name |
 | `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.
+**Events:** `input`, `change` — shared PropsKit envelope with `value: number | null`.
 
 Double-click or right-click and choose **Reset** to restore `default`, falling back to the initial value.
 
@@ -593,11 +631,12 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 
 A labeled numeric scrubber that composes `<fig-input-wheel>` with an optional `<fig-input-number>`. The host provides row chrome and reset behavior; there is no `fig-field` or `fig-slider`.
 
-Omitted `label` renders `"Value"`. If `label` is set, including `label=""`, that exact value is used. Units are omitted by default and arbitrary values such as `px` pass through unchanged. Units remain wrapper and number-field behavior: time aliases receive time-focused defaults, and the effective step is applied to the child wheel without setting a child `units` attribute.
+Omitted `label` renders `"Label"`; `label=""` removes the visible label. Units are omitted by default and arbitrary values such as `px` pass through unchanged. Units remain wrapper and number-field behavior: time aliases receive time-focused defaults, and the effective step is applied to the child wheel without setting a child `units` attribute.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `label` | string | `"Value"` when omitted | Authored values (including blank) are used as-is |
+| `label` | string | `"Label"` | Empty removes the visible label |
+| `name` | string | — | Optional event payload name |
 | `units` | string | — | Optional arbitrary units. `seconds` / `milliseconds` normalize to `s` / `ms` |
 | `value` | number | `0` | Numeric value in `units`. Unbounded unless `min`/`max` are set |
 | `min` | number | — | Inclusive lower bound. Omit for no minimum |
@@ -607,12 +646,10 @@ Omitted `label` renders `"Value"`. If `label` is set, including `label=""`, that
 | `elastic` | boolean/string | `true` | Stretch the composed row past the wheel edges; set `"false"` to disable row stretch. The handle still pulls |
 | `spin` | boolean/string | `true` | Keep wheel ticks synchronized to `value`; set `"false"` to update only the value and number field |
 | `text` | boolean/string | `true` | Include the editable `fig-input-number`; set `"false"` for only `fig-input-wheel` |
-| `size` | string | default | Set to `"small"` for the compact layout |
 | `default` | number/string | initial `value` | Right-click reset target |
 | `disabled` | boolean | `false` | Disable wheel and number |
-| `variant` | string | — | `"minimal"` removes vertical padding |
 
-**Events:** `input` while dragging or typing; `change` on commit. Dragging moves by `step` on every `input`; hold Shift to scrub at `10× step`. `precision` only formats the displayed number. Arrow keys on the focused wheel move by `step`; Shift+arrow moves by `10× step`.
+**Events:** `input` while dragging or typing; `change` on commit. Both use the shared PropsKit envelope with `value: number | null`. Dragging moves by `step` on every `input`; hold Shift to scrub at `10× step`. `precision` only formats the displayed number. Arrow keys on the focused wheel move by `step`; Shift+arrow moves by `10× step`.
 
 ```html
 <propskit-wheel label="Duration" value="1.5" default="0" units="seconds"></propskit-wheel>
@@ -634,14 +671,13 @@ A compact X/Y field with optional percentage units.
 | `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 |
+| `label` | string | `"Label"` | Field label; empty removes the visible label |
 | `units` | string | — | `"percent"` shows `%`; omit for no units |
-| `size` | string | default | Set to `"small"` for the compact 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`.
+**Events:** `input` and `change` use the shared PropsKit envelope with the public `{ x, y, units }` value.
 
 ```html
 <propskit-position
@@ -655,6 +691,87 @@ A compact X/Y field with optional percentage units.
 
 ---
 
+#### Propskit Joystick
+
+`<propskit-joystick>`
+
+A vertical PropsKit surface with a label above a square `fig-joystick` and its X/Y percentage fields.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `value` | JSON string | `{"x":50,"y":50}` | Current percentage coordinates |
+| `default` | JSON string | initial value | Right-click and group reset target |
+| `label` | string | `"Label"` | Field label; empty removes the visible label |
+| `axis-labels` | string | — | One, two, or four labels forwarded to the joystick |
+| `coordinates` | string | `"screen"` | `"screen"` or `"math"` coordinate mode |
+| `precision` | number | `3` | X/Y field display precision |
+| `disabled` | boolean | `false` | Disable the joystick and both fields |
+
+The inner joystick always uses `fields="true"` and `aspect-ratio="1 / 1"`. The `.value`, `defaultValue`, and event values are typed `{ x, y }` percentage objects. `isDefault` compares both axes and `resetToDefault()` restores the reset value.
+
+```html
+<propskit-joystick
+  label="Position"
+  value='{"x":35,"y":65}'
+  default='{"x":50,"y":50}'
+  axis-labels="X Y"
+></propskit-joystick>
+```
+
+---
+
+#### Propskit Origin
+
+`<propskit-origin>`
+
+A vertical PropsKit surface with a label above a square `fig-origin-grid` and its X/Y percentage fields. The inner grid always uses `fields="true"` and `aspect-ratio="1 / 1"`.
+
+Its `.value`, `defaultValue`, and event values are typed `{ x, y }` objects. The `value` and `default` attributes serialize that shape as JSON. `precision` and `drag` pass through to the grid.
+
+```html
+<propskit-origin
+  label="Transform origin"
+  value='{"x":50,"y":50}'
+  default='{"x":50,"y":50}'
+></propskit-origin>
+```
+
+---
+
+#### Propskit Easing
+
+`<propskit-easing>`
+
+A vertical PropsKit surface around `fig-easing-curve`, constrained to cubic-bezier presets. Its typed value is `{ x1, y1, x2, y2 }`; `value` and `default` serialize that shape as JSON.
+
+```html
+<propskit-easing
+  label="Easing"
+  value='{"x1":0.42,"y1":0,"x2":0.58,"y2":1}'
+  default='{"x1":0.42,"y1":0,"x2":0.58,"y2":1}'
+></propskit-easing>
+```
+
+---
+
+#### Propskit Spring
+
+`<propskit-spring>`
+
+A vertical PropsKit surface around `fig-easing-curve`, constrained to spring presets. Its typed value is `{ stiffness, damping, mass }`; `value` and `default` serialize that shape as JSON.
+
+```html
+<propskit-spring
+  label="Spring"
+  value='{"stiffness":200,"damping":15,"mass":1}'
+  default='{"stiffness":200,"damping":15,"mass":1}'
+></propskit-spring>
+```
+
+Both curve controls forward `precision` and `edit`, support `disabled` and `variant="minimal"`, expose `isDefault`, and implement `resetToDefault()`. Their `input` and `change` events use the shared PropsKit envelope.
+
+---
+
 #### Propskit Color Point
 
 `<propskit-color-point>`
@@ -667,12 +784,11 @@ A compact `<fig-group>` wrapper that combines `<propskit-color>` and `<propskit-
 | `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.
+**Events:** `input` and `change` use the shared PropsKit envelope with the public color-point value. `openchange` mirrors the internal group's expanded state.
 
 ```html
 <propskit-color-point
@@ -696,12 +812,11 @@ A compact `<fig-group>` wrapper that combines `<propskit-position>` and `<propsk
 | `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.
+**Events:** `input` and `change` use the shared PropsKit envelope with the public point-radius value. `openchange` mirrors the internal group's expanded state.
 
 ```html
 <propskit-point-radius
@@ -726,12 +841,11 @@ A compact `<fig-group>` wrapper combining `<propskit-position>` with radius and
 | `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.
+**Events:** `input` and `change` use the shared PropsKit envelope with the public point-radius-angle value. `openchange` mirrors the internal group's expanded state.
 
 ```html
 <propskit-point-radius-angle
@@ -756,12 +870,11 @@ A compact `<fig-group>` wrapper combining start and end `<propskit-position>` co
 | `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.
+**Events:** `input` and `change` use the shared PropsKit envelope with the public point-point value. `openchange` mirrors the internal group's expanded state.
 
 ```html
 <propskit-point-point
@@ -858,6 +971,7 @@ Waveform oscillator input with composable wave functions, live SVG waveform prev
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | JSON string | — | `{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0}]}` |
+| `name` | string | — | Optional event payload name |
 | `default` | JSON string | initial `value` | Right-click reset target |
 | `precision` | number | `2` | Decimal places |
 | `aspect-ratio` | string | `"2 / 1"` | Editor aspect ratio |
@@ -874,8 +988,8 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore the osc
 
 | Event | Detail |
 |---|---|
-| `input` | `{ value, data, preset }` — while dragging or editing |
-| `change` | `{ value, data, preset }` — on release or committed edit |
+| `input` | Shared PropsKit `{ control, value, name? }` envelope while dragging or editing |
+| `change` | Shared PropsKit `{ control, value, name? }` envelope on release or committed edit |
 
 ```html
 <propskit-oscillator
@@ -1264,6 +1378,7 @@ An interactive bezier or spring easing curve editor with a preset dropdown and m
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | string | — | Bezier: `"0.42, 0, 0.58, 1"` or Spring: `"spring(200, 15, 1)"` |
+| `mode` | string | — | Optional `"bezier"` or `"spring"` constraint; filters presets and rejects the other value type |
 | `precision` | number | `2` | Decimal places |
 | `aspect-ratio` | string | — | Editor aspect ratio |
 | `edit` | boolean | `true` | Show the editor and custom bezier/spring options; set to `"false"` for preset-only |

package/components.css

@@ -212,13 +212,18 @@
     Inter, AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir, segoe ui,
     helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --font-variant-numeric: lining-nums tabular-nums slashed-zero;
-  --body-medium-fontSize: 0.6875rem;
-  --body-large-fontSize: 0.8125rem;
+  --text-body-medium-font-size: 0.6875rem;
+  --text-body-small-font-size: 0.5625rem;
+  --text-body-large-font-size: 0.8125rem;
+  --body-medium-fontSize: var(--text-body-medium-font-size);
+  --font-size-small: var(--text-body-small-font-size);
+  --body-small-fontSize: var(--text-body-small-font-size);
+  --body-large-fontSize: var(--text-body-large-font-size);
   --body-letter-spacing: 0.055px;
   --body-medium-strong-fontWeight: 550;
   --body-large-strong-fontWeight: 500;
   --body-medium-fontWeight: 450;
-  --font-size-small: var(--body-medium-fontSize);
+
   --line-height: 1rem;
 
   /* Spacing */
@@ -235,10 +240,12 @@
   --radius-none: 0;
   --radius-small: 0.125rem;
   --radius-medium: 0.3125rem;
+  --radius-medium-large: 0.5625rem;
   --radius-large: 0.8125rem;
   --figma-radius-none: var(--radius-none);
   --figma-radius-small: var(--radius-small);
   --figma-radius-medium: var(--radius-medium);
+  --figma-radius-medium-large: var(--radius-medium-large);
   --figma-radius-large: var(--radius-large);
 
   /* Transitions */
@@ -400,6 +407,8 @@
   --icon-16-warning: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.28478 2.91494C7.06157 1.62043 8.93759 1.62052 9.71446 2.91494L13.9488 9.9706C14.7487 11.3037 13.7876 12.9999 12.233 12.9999H3.76622C2.21173 12.9998 1.2506 11.3036 2.0504 9.9706L6.28478 2.91494ZM8.85704 3.42861C8.46851 2.78202 7.53064 2.78191 7.1422 3.42861H7.14122L2.90782 10.4853H2.9088C2.53393 11.11 2.93205 11.8944 3.62364 11.9901L3.76622 11.9999H12.233C13.0103 11.9999 13.4904 11.1518 13.0904 10.4853L8.85704 3.42861ZM7.99962 9.4999C8.41375 9.4999 8.74948 9.83581 8.74962 10.2499C8.74962 10.6641 8.41383 10.9999 7.99962 10.9999C7.58545 10.9999 7.24962 10.6641 7.24962 10.2499C7.24976 9.83584 7.58554 9.49995 7.99962 9.4999ZM8.07872 5.00381C8.46732 5.04556 8.76038 5.39199 8.72716 5.79092L8.49669 8.54092C8.47503 8.80006 8.25869 8.99996 7.99864 8.9999C7.73876 8.99965 7.52212 8.79994 7.5006 8.54092L7.27208 5.78994C7.23715 5.36476 7.57294 5.00004 7.99962 4.9999L8.07872 5.00381Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-24-copy: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 6C6.67157 6 6 6.67157 6 7.5V13.5C6 14.3284 6.67157 15 7.5 15H13.5C14.3284 15 15 14.3284 15 13.5V7.5C15 6.67157 14.3284 6 13.5 6H7.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H13.5C13.7761 7 14 7.22386 14 7.5V13.5C14 13.7761 13.7761 14 13.5 14H7.5C7.22386 14 7 13.7761 7 13.5V7.5ZM9 16.5C9 16.2239 9.22386 16 9.5 16C9.77614 16 10 16.2239 10 16.5C10 16.7761 10.2239 17 10.5 17H16.5C16.7761 17 17 16.7761 17 16.5V10.5C17 10.2239 16.7761 10 16.5 10C16.2239 10 16 9.77614 16 9.5C16 9.22386 16.2239 9 16.5 9C17.3284 9 18 9.67157 18 10.5V16.5C18 17.3284 17.3284 18 16.5 18H10.5C9.67157 18 9 17.3284 9 16.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-16-copy: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 5C13.3284 5 14 5.67157 14 6.5V12.5C14 13.3284 13.3284 14 12.5 14H6.5C5.67157 14 5 13.3284 5 12.5C5 12.2239 5.22386 12 5.5 12C5.74171 12 5.94371 12.1714 5.99023 12.3994L6.00977 12.6006C6.05629 12.8286 6.25829 13 6.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6.5C13 6.25829 12.8286 6.05629 12.6006 6.00977L12.3994 5.99023C12.1714 5.94371 12 5.74171 12 5.5C12 5.22386 12.2239 5 12.5 5ZM9.5 2C10.3284 2 11 2.67157 11 3.5V9.5C11 10.3284 10.3284 11 9.5 11H3.5C2.67157 11 2 10.3284 2 9.5V3.5C2 2.67157 2.67157 2 3.5 2H9.5ZM3.5 3C3.22386 3 3 3.22386 3 3.5V9.5C3 9.77614 3.22386 10 3.5 10H9.5C9.77614 10 10 9.77614 10 9.5V3.5C10 3.22386 9.77614 3 9.5 3H3.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+  --icon-24-trash: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.3545 9C16.6385 9.00024 16.8652 9.23672 16.8535 9.52051L16.5801 16.083L16.5615 16.2812C16.4332 17.1916 15.6952 17.8997 14.7803 17.9902L14.582 18H9.41797C8.34615 17.9996 7.46456 17.154 7.41992 16.083L7.14746 9.52051C7.13579 9.23663 7.36236 9.0001 7.64648 9C7.91454 9 8.13534 9.21167 8.14648 9.47949L8.41895 16.042C8.44144 16.5772 8.88236 16.9996 9.41797 17H14.582C15.1176 16.9996 15.5586 16.5772 15.5811 16.042L15.8545 9.47949C15.8656 9.21167 16.0864 9 16.3545 9ZM11 10C11.2761 10 11.5 10.2239 11.5 10.5V14.5C11.5 14.7761 11.2761 15 11 15C10.724 14.9999 10.5 14.7761 10.5 14.5V10.5C10.5 10.2239 10.724 10.0001 11 10ZM13 10C13.2761 10 13.5 10.2239 13.5 10.5V14.5C13.5 14.7761 13.2761 15 13 15C12.724 14.9999 12.5 14.7761 12.5 14.5V10.5C12.5 10.2239 12.724 10.0001 13 10ZM13 5C13.5523 5 14 5.44772 14 6V7H17.5C17.7761 7 18 7.22386 18 7.5C18 7.77614 17.7761 8 17.5 8H6.5C6.22386 8 6 7.77614 6 7.5C6 7.22386 6.22386 7 6.5 7H10V6C10 5.44772 10.4477 5 11 5H13ZM11 7H13V6H11V7Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+  --icon-16-trash: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.2954 6C11.5803 6.00009 11.8072 6.23788 11.7944 6.52246L11.5659 11.5674L11.5513 11.7148C11.446 12.4443 10.8186 12.9988 10.0669 12.999H5.93408L5.78564 12.9922C5.1008 12.9249 4.54803 12.3959 4.44971 11.7148L4.43506 11.5674L4.20557 6.52246C4.19278 6.23794 4.4198 6.00019 4.70459 6C4.97189 6 5.19245 6.21051 5.20459 6.47754L5.43408 11.5215C5.44622 11.7885 5.66677 11.999 5.93408 11.999H10.0669C10.334 11.9988 10.5548 11.7884 10.5669 11.5215L10.7954 6.47754C10.8075 6.21051 11.0281 6 11.2954 6ZM7.00049 6.5C7.27657 6.50007 7.50049 6.7239 7.50049 7V10C7.50049 10.2761 7.27657 10.4999 7.00049 10.5C6.72435 10.5 6.50049 10.2761 6.50049 10V7C6.50049 6.72386 6.72435 6.5 7.00049 6.5ZM9.00049 6.5C9.27657 6.50007 9.50049 6.7239 9.50049 7V10C9.50049 10.2761 9.27657 10.4999 9.00049 10.5C8.72435 10.5 8.50049 10.2761 8.50049 10V7C8.50049 6.72386 8.72435 6.5 9.00049 6.5ZM9.00049 2C9.55255 2.00026 10.0005 2.44788 10.0005 3V4H12.5005C12.7764 4.00026 13.0005 4.22402 13.0005 4.5C13.0005 4.77598 12.7764 4.99974 12.5005 5H3.50049C3.22435 5 2.99951 4.77614 2.99951 4.5C2.99951 4.22386 3.22435 4 3.50049 4H6.00049V3C6.00049 2.44772 6.4482 2 7.00049 2H9.00049ZM7.00049 4H9.00049V3H7.00049V4Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
 
   --tip-pointer: path("M8 6L2 0H14L8 6Z");
 
@@ -1533,7 +1542,10 @@ input[type="color"] {
     content: "";
     width: calc(var(--width) - var(--padding) * 2);
     height: calc(var(--height) - var(--padding) * 2);
-    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
+    border-radius: var(
+      --fig-swatch-border-radius,
+      calc(var(--border-radius) - (var(--padding) / 2))
+    );
     grid-area: 1/1;
     place-self: center;
     pointer-events: none;
@@ -1549,7 +1561,10 @@ input[type="color"] {
     background-size: var(--swatch-bg-size);
     background-position: var(--swatch-bg-position);
     background-repeat: no-repeat;
-    border-radius: calc(var(--border-radius) - (var(--padding) / 2));
+    border-radius: var(
+      --fig-swatch-border-radius,
+      calc(var(--border-radius) - (var(--padding) / 2))
+    );
     mask-image: linear-gradient(
       to right,
       black 0%,
@@ -1561,7 +1576,10 @@ input[type="color"] {
   }
   &[size="medium"]::before,
   &[size="large"]::before {
-    border-radius: calc(var(--border-radius) - var(--padding));
+    border-radius: var(
+      --fig-swatch-border-radius,
+      calc(var(--border-radius) - var(--padding))
+    );
   }
   &:focus,
   &:active {
@@ -4174,6 +4192,17 @@ fig-input-palette {
     grid-area: inputs;
     min-width: 0;
     width: 100%;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+      pointer-events: none;
+      z-index: 2;
+    }
   }
 
   .palette-add-btn {
@@ -4707,7 +4736,7 @@ fig-joystick {
     pointer-events: none;
     user-select: none;
     color: var(--figma-color-text-tertiary);
-    font-size: 10px;
+    font-size: var(--text-body-small-font-size);
     line-height: 1;
     letter-spacing: 0.01em;
     font-weight: 700;
@@ -4735,11 +4764,6 @@ fig-joystick {
       top: 50%;
       transform: translate(-50%, -50%) rotate(-90deg);
       transform-origin: center;
-
-      &.no-rotate {
-        left: var(--spacer-2);
-        transform: translateY(-50%);
-      }
     }
 
     &.right {