From 292eac3b1d06b91892bb17562e5542db10fc9f64 Mon Sep 17 00:00:00 2001
From: Ayo <ayo@ayco.io>
Date: Mon, 11 May 2026 13:48:06 +0200
Subject: [PATCH] refactor: add types for internals

---
 index.html              | 2 +-
 src/status-indicator.ts | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 768f31c..6148272 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
     </header>
     <main>
         <p>Colored circles that can pulse</p>
-        <status-indicator status="positive" pulse>
+        <status-indicator style="--status-icon-size: 32px" status="positive" pulse>
             All systems operational
         </status-indicator>
         <br />
diff --git a/src/status-indicator.ts b/src/status-indicator.ts
index e84c7ef..da948b3 100644
--- a/src/status-indicator.ts
+++ b/src/status-indicator.ts
@@ -1,5 +1,7 @@
 import { WebComponent, html } from 'web-component-base'
 
+type StatusType = 'default' | 'active' | 'positive' | 'intermediary' | 'negative'
+
 class StatusIndicator extends WebComponent {
     static shadowRootInit: ShadowRootInit = {
         mode: 'closed'
@@ -10,7 +12,7 @@ class StatusIndicator extends WebComponent {
         pulse: false
     }
 
-    #indicatorColor: any = {
+    #indicatorColor: Record<StatusType, string> = {
         default: '216, 226, 233',
         active: '0, 149, 255',
         positive: '75, 210, 143',
@@ -18,7 +20,7 @@ class StatusIndicator extends WebComponent {
         negative: '255, 77, 77'
     }
 
-    #pulseAnimationCSSRules = {
+    #pulseAnimationCSSRules: Partial<CSSStyleDeclaration> = {
         animationName: 'pulse',
         animationDuration: '2s',
         animationTimingFunction: 'ease-in-out',