Usage

The touch press model every Astryx pressable uses, for a local component that paints its own press. Under a finger, CSS :active paints on the touch itself and can outlive the start of a scroll; the press model instead tracks the touch the way UIKit tracks a control: it highlights as the finger lands (after the content-touch delay inside a scroller, where a flick paints nothing), a quick tap answers at the lift, and a scroll that takes the touch cancels it with no fade. The release fades over the 250 ms of a UIButton (ease-in-out) under a coarse primary pointer and over 200 ms with any other; under reduced motion it is an opacity cross-fade of 200 ms or less on a touch screen and immediate otherwise. One document-level controller does this for every marked element (installed by the first pressable to mount, removed by the last to unmount), so calling the hook adds no listener or state to your element. On a desktop a mouse press is still your :active rule: keep it, and drop it under @media (pointer: coarse) the way the built-in components do. That query reads the primary pointer, so on a phone or tablet it also drops :active for a connected mouse, trackpad or keyboard; those presses are painted there (at once, faded at the release), so nothing goes unanswered.

ts
import {usePressFeedback} from '@astryxdesign/core/hooks'