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;
+}
+```
+

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "@tp/tp-element",
+  "name": "@tp/tp-timeout-strip",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "",
-  "main": "tp-element.js",
+  "main": "tp-timeout-strip.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
+    "url": "https://gitea.codeblob.work/tp-elements/tp-timeout-strip.git"
   },
   "author": "trading_peter",
   "license": "Apache-2.0",

tp-element.js

@@ -1,35 +0,0 @@
-/**
-@license
-Copyright (c) 2024 trading_peter
-This program is available under Apache License Version 2.0
-*/
-
-import { LitElement, html, css } from 'lit';
-
-class TpElement extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-        }
-      `
-    ];
-  }
-
-  render() {
-    const { } = this;
-
-    return html`
-
-    `;
-  }
-
-  static get properties() {
-    return { };
-  }
-
-
-}
-
-window.customElements.define('tp-element', TpElement);

tp-timeout-strip.js

@@ -0,0 +1,75 @@
+/**
+@license
+Copyright (c) 2025 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+
+class TpTimeoutStrip extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          height: var(--tp-timeout-strip-width, 3px);
+          pointer-events: none;
+        }
+
+        .strip {
+          height: 100%;
+          width: 100%;
+          background: var(--tp-timeout-strip-color, #000);
+          transform-origin: left;
+          display: none;
+        }
+
+        .strip.active {
+          display: block;
+          animation: shrink linear forwards;
+        }
+
+        @keyframes shrink {
+          from {
+            transform: scaleX(1);
+          }
+          to {
+            transform: scaleX(0);
+          }
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="strip ${this.active ? 'active' : ''}" style="animation-duration: ${this.timeout}ms" @animationend=${this._onAnimationEnd}></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      active: { type: Boolean },
+      timeout: { type: Number }
+    };
+  }
+
+  constructor() {
+    super();
+    this.active = false;
+    this.timeout = 0;
+    this._onAnimationEnd = this._onAnimationEnd.bind(this);
+  }
+
+  show(timeout) {
+    this.timeout = timeout;
+    this.active = true;
+  }
+
+  _onAnimationEnd() {
+    this.active = false;
+    this.dispatchEvent(new CustomEvent('timeout', { detail: null, bubbles: true, composed: true }));
+  }
+}
+
+window.customElements.define('tp-timeout-strip', TpTimeoutStrip);