Initial implementation

README.md

@@ -1 +1,42 @@
-# tp-element
+# 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;
+}
+```
+