Pacem JS - <pacem-rotate>

`<pacem-rotate>` is a *behavior* that lets users turn an element by dragging around it: knobs, dials, photo rotation.
Attach it through `behaviors`, read the angle from its events.

```html
<pacem-rotate id="knob" step="0.19635" min-rotation="-2.3562" max-rotation="2.3562"
              on-rotate="#temp.model = 22 + $event.detail.rotation / 2.3562 * 6"></pacem-rotate>

<div class="knob" behaviors="{{ [#knob] }}"></div>
```

## Usage

**Attach it.** List the behavior in the element's `behaviors`; drag around the element to turn it.
It pivots on its own center, or on `center` (a point, in page coordinates).

**Constrain it.** Angles are in **radians** (π ≈ 3.1416, 90° ≈ 1.5708):
`step` snaps to multiples of it, `min-rotation` and `max-rotation` bound the turn. No bounds, no limit: it can spin past a full turn.

> The angle accumulates: two full turns read `4π`, not `0`. Use `%` (or `$pacem` math) when you need it within a circle.

**React.** `rotate` fires whenever the (stepped) angle changes, with `detail.rotation`; `rotateend` has the final one.
Both `rotatestart` and `rotate` are cancelable: refuse the gesture, or skip the rendering and use the angle elsewhere.

## Customization

Rotation is rendered as a `transform` on the element (around `transform-origin`, set by the behavior), and `.pacem-rotatable` marks
the element. The theme leaves it unstyled: a grab cursor helps people find it.

```css
.pacem-rotatable { cursor: grab; }
.pacem-rotatable:active { cursor: grabbing; }
```

## Examples

### Straighten a photo before upload
`step` at a right angle (π/2): the picture snaps to 0°, 90°, 180°, 270°.

### A hue dial
No bounds and no step: turn freely, and the angle (taken within a circle) becomes the hue of the swatch.