# Swipe

Horizontal swipe-to-reveal component using CSS scroll-snap. Reveal action buttons by swiping left or right.

## Basic Example

```html
<div class="swipe">
  <button class="error">Delete</button>
  <div>Swipeable content</div>
  <button class="success">Archive</button>
</div>
```

## Stop Variant

Stays in "open" position after swiping:

```html
<div class="swipe stop">
  <button class="error">Delete</button>
  <div>Swipe to reveal, stays open</div>
  <button class="success">Archive</button>
</div>
```

## Multiple Action Buttons

```html
<div class="swipe stop">
  <button>Hide</button>
  <button class="primary">Save</button>
  <div>Content with multiple left actions</div>
  <button>Up</button>
  <button>Down</button>
</div>
```

## Structure

```
[Left actions] [Main content] [Right actions]
```

- First child(ren) before the main content = left actions
- Last child(ren) after the main content = right actions
- Middle child = main visible content

## Styling Details

- CSS scroll-snap for smooth snapping
- Three-column layout
- Hidden scrollbar
- Container query for center content width

## JavaScript for Events (Optional)

```javascript
const swipe = document.querySelector('.swipe');

// Detect when actions are revealed
swipe.addEventListener('scroll', () => {
  const scrollLeft = swipe.scrollLeft;
  const maxScroll = swipe.scrollWidth - swipe.clientWidth;
  
  if (scrollLeft === 0) {
    // Left actions visible
  } else if (scrollLeft === maxScroll) {
    // Right actions visible
  } else {
    // Centered (default)
  }
});
```

## See Also

- [Carousel](https://graffiti-ui.com/llms/carousel.txt) - Horizontal scroll