# 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:

• ..
...

A 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._ Author-facing configuration may still use slots, properties, or child markup — see **Slots** / **Public API** below. ## Events _None._ ## CSS parts _None._ ## Slots _None._ ## Public API _No public methods detected._ ## Related resources - Generated API docs (canonical): [`velin-flip.md`](./velin-flip.md) - Generated index: [README.md](./README.md) - CLI API: `npx velinstyle wc api velin-flip` - Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`