name: Resizer
purpose: Resize a sibling or assigned target element by dragging a horizontal or vertical handle.

attributes:
  vertical: Resize height instead of width.
  min: Minimum size in pixels. Default is 10.
  max: Maximum size in pixels. Default is 1000.

properties:
  target: Target element. Defaults to the previous sibling.

binding:
  behavior: '$bind or a bind event sets the target size in pixels.'

events:
  resizing:
    detail: "{ oldSize, newSize }"
  resize:
    detail: "{ oldSize, newSize }"
  change:
    detail: Final size in pixels.

rules:
  - MouseMover is an internal dependency and is loaded automatically.

examples:
  horizontal_and_vertical: |
    <div id="sidebar" style="width:240px"></div>
    <Resizer min="160" max="480" $bind="State.sidebarWidth" $onchange="State.sidebarWidth = event.detail"></Resizer>

    <div id="bottomPanel" style="height:240px"></div>
    <Resizer vertical min="120" max="480" $.target="bottomPanel"></Resizer>

tests:
  - Resizer.test.html