# usePressFeedback

## 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 waits 150 ms before believing a press, cancels it the moment the finger travels 10 px or a scroll claims the gesture, never brings it back inside that gesture, answers a quick tap at the lift, and fades the release over 200 ms — the clocks a native list uses. 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. Under a mouse nothing changes: keep your `:active` rule, and drop it under `@media (pointer: coarse)` the way the built-in components do.

```ts
import { usePressFeedback } from '@astryx-vue/core'
```

```vue
<script setup lang="ts">
import { usePressFeedback } from '@astryx-vue/core'

const { pressableProps } = usePressFeedback()
</script>

<template>
  <button type="button" class="card" v-bind="pressableProps">
    Press me
  </button>
</template>
```

The hook brings `styles/pressable.css` along. The default `astryx-pressable` class paints the pressed token on a `::after` layer, keeps `:active` for a mouse, and under a finger reads the `data-astryx-press` attribute the controller writes (`on` while held, `fading` for the release). The press's strength is the registered `--astryx-press-alpha`; the release animates it from 1 to 0. A component that paints its own press passes `{ hasOverlay: false }` and paints both `[data-astryx-press]` states from `var(--_press-paint-image)` in its own styles.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Spread the result on the element whose background paints the press, and use `--astryx-color-overlay-pressed` to theme it. |
| Do | Let the shipped style own the press on every pointer: it keeps `:active` for a mouse and drops it under `@media (pointer: coarse)`, so a finger sees only the press model. A rule of your own that paints `:active` would paint under a finger too, on the touch and through a scroll. |
| Don't | Add a pointer listener or component state to the element to track the press; the controller already writes the attribute, and per-element listeners are what a long list cannot afford. |
| Don't | Call it for a control rendered by an Astryx component; those are marked already, and the innermost marked element takes the press. |

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `options.hasOverlay` | `boolean` | `true` | Whether to bring the default press paint (the `astryx-pressable` class, a layer on `::after`). Pass false when the component paints the press itself from `--_press-paint-image` and only needs the marker. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `pressableProps` | `Record<string, string>` | Spread with `v-bind` on the element that paints the press: the `data-astryx-pressable` marker, plus `class: 'astryx-pressable'` by default. Under a finger the controller writes `data-astryx-press="on"` while the press is believed and `"fading"` for the release. The default style paints `--astryx-color-overlay-pressed` at the press's strength on the first frame and fades it over 200 ms, keeping `:active` for a mouse. |