# tp-timeout-strip

Shows a small color strip that decreases in size over time to indicate a delay is currently elapsing. Can be used to indicate when a temporary popup will be automatically be closed.

## Installation

```bash
npm install @tp/tp-timeout-strip
```

## Usage

```html
<tp-timeout-strip></tp-timeout-strip>
```

```js
const strip = document.querySelector('tp-timeout-strip');

// Show the strip and start the timeout animation (3000ms = 3 seconds)
strip.show(3000);

// Listen for when the timeout completes
strip.addEventListener('timeout', () => {
  console.log('Timeout elapsed!');
});
```

## Styling

The component can be customized using CSS custom properties:

```css
tp-timeout-strip {
  /* Change the strip color (default: #000) */
  --tp-timeout-strip-color: #ff4444;
  
  /* Change the strip height (default: 3px) */
  --tp-timeout-strip-width: 4px;
}
```