<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: components/velin-flip.js -->

# <velin-flip>

Source: `components/velin-flip.js`

## Description
velin-flip.js — FLIP-style reorder + filter helper.

FLIP (First, Last, Invert, Play) measures item rects before and after a
DOM mutation, then animates the delta. Used for sorting/filtering UIs
where rows reorder visibly. Pair it with the [data-velin-flip] attribute
on a container plus [data-velin-filter-value] chips or [data-velin-filter-input]
inputs to wire chip/search filtering with zero JS in your demo.

API:
  flipReorder(container, mutateFn, opts?)
  filterList(container, predicateFn, opts?)

  opts.duration  ms (default 250); reduced-motion forces 0
  opts.easing    CSS timing function (default expo-out token)
  opts.itemSelector children selector (default ':scope > *')

Auto-init:
  <ul data-velin-flip data-velin-filter-attr="tags" id="myList">
    <li data-tags="a b">..</li> ...
  </ul>
  <button data-velin-filter-value="a" data-velin-filter-target="#myList">A</button>
  <input data-velin-filter-input data-velin-filter-target="#myList">

  Any chip or input with data-velin-filter-target pointing at a flip
  container is wired automatically. The active chip carries
  data-velin-filter-active so you can style it.

## Attributes
_No `observedAttributes` declared._

## Events
_None._
## CSS parts
_None._
## Slots
_None._
## Public API
_No public methods detected._
