feat(site): update CDN url

2.1.2
chore: remove src & screenshot from distribution
2026-05-16 18:58:09 +02:00 · 2026-05-14 19:40:47 +02:00 · 2026-05-14 19:40:34 +02:00 · 2026-05-14 12:40:21 +02:00 · 2026-05-14 12:39:55 +02:00 · 2026-05-14 12:31:57 +02:00
12 changed files with 500 additions and 88 deletions
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2023 Ayo Ayco
+Copyright (c) 2026 Ayo Ayco

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -1,42 +1,89 @@
-# &lt;status-indicator&gt; web component
+# &lt;status-indicator&gt;

-Circles with colors. That's it. That's the component.
+Colored circles that can pulse. That's it. That's the component.

-## Quick usage via CDN
+## Quick Start using a CDN

-Inside your HTML `<head>`:
+Copy the following to your HTML page:

 ```html
-<head>
-  <script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
-</head>
+<script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"></script>
+
+<status-indicator pulse status="positive">
+  All systems operational
+</status-indicator>
 ```

-## Installation
+See example on CodePen: https://codepen.io/ayo-run/pen/RNorXrK
+
+## Installation via NPM
+
+If you want to install the library as a node module, you can install the [published package](https://npmx.dev/@ayo-run/status-indicator) and the [base class](https://webcomponent.io) via NPM:

 ```bash
 # using npm
-npm install @ayo-run/status-indicator
+npm install web-component-base @ayo-run/status-indicator

 # or using pnpm
-pnpm add @ayo-run/status-indicator
+pnpm add web-component-base @ayo-run/status-indicator
 ```

-## Usage
+## Usage: Imports

-Set the `status` property of the `status-indicator` component to any of the following: positive, negative, active, intermediary.
+Without a bundler that resolves `node_module` imports for you, you can use [import
+maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap):
+
+```html
+<html>
+  <head>
+    <script type="importmap">
+      {
+        "imports": {
+          "web-component-base": "./node_modules/web-component-base/dist/index.js",
+          "status-indicator": "./node_modules/@ayo-run/status-indicator/dist/status-indicator.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import StatusIndicator from "status-indicator";
+    </script>
+  </head>
+  <body>
+    <!-- you can use the status-indicator component now -->
+  </body>
+</html>
+```
+
+> [!NOTE]
+> Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg
+
+## Usage: Attributes
+
+### 1. `status` attribute
+
+To indicate the status that determines the color of the circle, set the `status` attribute of the `status-indicator` component to any of the following values: `positive`, `negative`, `active`, or `intermediary`.

 ```html
 <status-indicator status="positive"> All systems operational </status-indicator>
 <status-indicator status="negative"> Something's wrong </status-indicator>
 <status-indicator status="active"> It's just fine; carry on </status-indicator>
-<status-indicator> Nothing matters </status-indicator>
 <status-indicator status="intermediary"> Slow down... </status-indicator>
+<status-indicator> Nothing matters </status-indicator>
 ```

-### Result
+### 2. `pulse` animation

-![screenshot](./screenshot.png)
+You can add the `pulse` attribute to make the circle... pulse
+
+```html
+<status-indicator pulse status="positive">
+  All systems operational
+</status-indicator>
+```
+
+## Result
+
+![screenshot](https://raw.githubusercontent.com/ayo-run/status-indicator/refs/heads/main/screenshot.png)

 ---

--- a/index.html
+++ b/index.html
@ -3,8 +3,22 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>status-indicator web component demo</title>
-    <link rel="stylesheet" href="./pico.min.css">
+    <title>status-indicator web component</title>
+
+    <!-- meta -->
+    <meta property="og:description" content="Colored circles that can pulse">
+    <meta name="description" content="Colored circles that can pulse">
+    <meta itemprop="description" content="Colored circles that can pulse">
+    <meta property="og:title" content="status-indicator web component">
+    <meta property="og:url" content="http://status-indicator.webcomponent.io">
+    <meta property="og:site_name" content="webcomponent.io">
+
+    <!-- icons -->
+    <link rel="mask-icon" href="mask-icon.svg" color="#000000"/>
+    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
+    <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml"/>
+
+    <link rel="stylesheet" href="pico.min.css">
    <script type="module" src="./src/status-indicator.ts"></script>
    <style>
        html, body {
@ -21,45 +35,83 @@
        status-indicator {
            font-family: 'Courier New', Courier, monospace;
        }
-    </style>
+
+        nav, code {
+            max-width: 500px;
+
+            @media(max-width:440px) {
+                max-width: 300px;
+            }
+        }
+
+        code {
+            padding: 1rem;
+            margin: 1rem 0;
+
+            pre {
+                margin: 0;
+                padding: 0.25rem 0;
+            }
+        }
+        </style>
 </head>
 <body>
    <header>
        <h1>&lt;status-indicator&gt;</h1>
-        <p>
+        <nav>
            <a href="https://git.ayo.run/ayo/status-indicator">Ayo's Forge</a> &middot;
            <a href="https://github.com/ayo-run/status-indicator">GitHub</a> &middot;
            <a href="https://git.sr.ht/~ayoayco/status-indicator">SourceHut</a>
-        </p>
+        </nav>
+        <hr />
    </header>
    <main>
-        <status-indicator status="positive">
-            All systems operational
-        </status-indicator>
-        <br />
-        <status-indicator status="negative">
-            Something's wrong
-        </status-indicator>
-        <br />
-        <status-indicator status="active">
-            It's just fine; carry on
-        </status-indicator>
-        <br />
-        <status-indicator>
-            Nothing matters
-        </status-indicator>
-        <br />
-        <status-indicator status="intermediary">
-            Slow down...
-        </status-indicator>
+            <section>
+                <p>Colored circles that can pulse</p>
+                <status-indicator status="positive" pulse>
+                    All systems operational
+                </status-indicator>
+                <br />
+                <status-indicator status="negative" pulse>
+                    Something's wrong
+                </status-indicator>
+                <br />
+                <status-indicator status="active">
+                    It's just fine; carry on
+                </status-indicator>
+                <br />
+                <status-indicator>
+                    Nothing matters
+                </status-indicator>
+                <br />
+                <status-indicator status="intermediary">
+                    Slow down...
+                </status-indicator>
+            </section>
+            <section>
+                <h3>Quick Start</h3>
+                <p>
+                    Copy the following to your HTML page:
+                </p>
+                <code><pre>
+&lt;script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"&gt;&lt;/script&gt;
+
+&lt;status-indicator pulse status="positive"&gt;
+    All systems operational
+&lt;/status-indicator&gt;
+                </pre></code>
+                <p>More on the
+                    <a href="https://git.ayo.run/ayo/status-indicator#readme">README</a>
+                </p>
+            </section>
    </main>
    <footer>
        <hr />
-        <p>
+        <small>
            Just keep building.
            <br>
            A web component by <a href="https://ayo.ayco.io">Ayo</a>.
-        </p>
+        </small>
    </footer>
 </body>
-</html>
+</html>
--- a/package.json
+++ b/package.json
@ -1,15 +1,17 @@
 {
  "name": "@ayo-run/status-indicator",
-  "version": "0.0.4",
+  "version": "2.1.2",
  "type": "module",
-  "description": "Project scaffolding for a new web component",
+  "description": "Circles with color that can pulse to indicate status",
  "license": "MIT",
  "author": "Ayo Ayco",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ayo-run/status-indicator.git"
  },
+  "homepage": "https://status-indicator.webcomponent.io",
  "module": "./dist/status-indicator.js",
+  "types": "./dist/status-indicator.d.ts",
  "exports": {
    ".": {
      "default": "./dist/status-indicator.js",
@ -20,8 +22,7 @@
  "files": [
    "dist",
    "README.md",
-    "LICENSE",
-    "screenshot.png"
+    "LICENSE"
  ],
  "scripts": {
    "test": "echo \"Warning: no test specified\"",
@ -31,12 +32,13 @@
    "prepare": "husky"
  },
  "devDependencies": {
-    "@types/node": "^25.6.1",
+    "@types/node": "^25.6.2",
    "eslint": "^10.3.0",
    "husky": "^9.1.7",
-    "vite": "^8.0.11"
+    "vite": "^8.0.11",
+    "vite-plugin-dts": "^5.0.0"
  },
-  "dependencies": {
-    "web-component-base": "^4.1.1"
+  "peerDependencies": {
+    "web-component-base": "^4.1.2"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -9,12 +9,12 @@ importers:
  .:
    dependencies:
      web-component-base:
-        specifier: ^4.1.1
-        version: 4.1.1
+        specifier: ^4.1.2
+        version: 4.1.2
    devDependencies:
      '@types/node':
-        specifier: ^25.6.1
-        version: 25.6.1
+        specifier: ^25.6.2
+        version: 25.6.2
      eslint:
        specifier: ^10.3.0
        version: 10.3.0
@ -23,7 +23,10 @@ importers:
        version: 9.1.7
      vite:
        specifier: ^8.0.11
-        version: 8.0.11(@types/node@25.6.1)
+        version: 8.0.11(@types/node@25.6.2)
+      vite-plugin-dts:
+        specifier: ^5.0.0
+        version: 5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))

 packages:

@ -86,6 +89,22 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
  '@napi-rs/wasm-runtime@1.1.4':
    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
    peerDependencies:
@ -193,6 +212,15 @@ packages:
  '@rolldown/pluginutils@1.0.0-rc.18':
    resolution: {integrity: sha512-CUY5Mnhe64xQBGZEEXQ5WyZwsc1JU3vAZLIxtrsBt3LO6UOb+C8GunVKqe9sT8NeWb4lqSaoJtp2xo6GxT1MNw==}

+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
  '@tybys/wasm-util@0.10.2':
    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}

@ -205,8 +233,17 @@ packages:
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

-  '@types/node@25.6.1':
-    resolution: {integrity: sha512-coJCN8O1q4AGyyqCAUSP06P+SrMTu18BkEj3NVAK07q6QUneD2wzj3CLv9+yP+BMeZQlMvneXqqvDe3w+xcq7g==}
+  '@types/node@25.6.2':
+    resolution: {integrity: sha512-sokuT28dxf9JT5Kady1fsXOvI4HVpjZa95NKT5y9PNTIrs2AsobR4GFAA90ZG8M+nxVRLysCXsVj6eGC7Vbrlw==}
+
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}

  acorn-jsx@5.3.2:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@ -225,10 +262,19 @@ packages:
    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
    engines: {node: 18 || 20 || >=22}

-  brace-expansion@5.0.5:
-    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
+  brace-expansion@5.0.6:
+    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
    engines: {node: 18 || 20 || >=22}

+  compare-versions@6.1.1:
+    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
@ -291,10 +337,16 @@ packages:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}

+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
  esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}

+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}

@ -373,6 +425,9 @@ packages:
  keyv@4.5.4:
    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}

+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
  levn@0.4.1:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}
@ -451,14 +506,24 @@ packages:
    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
    engines: {node: '>= 12.0.0'}

+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
  locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}

+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
  minimatch@10.2.5:
    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
    engines: {node: 18 || 20 || >=22}

+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}

@ -482,6 +547,9 @@ packages:
    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
    engines: {node: '>=10'}

+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
  path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@ -490,6 +558,9 @@ packages:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
    engines: {node: '>=8'}

+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

@ -497,6 +568,12 @@ packages:
    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
    engines: {node: '>=12'}

+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
  postcss@8.5.14:
    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
    engines: {node: ^10 || ^12 || >=14}
@ -509,6 +586,9 @@ packages:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}

+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
  rolldown@1.0.0-rc.18:
    resolution: {integrity: sha512-phmyKBpuBdRYDf4hgyynGAYn/rDDe+iZXKVJ7WX5b1zQzpLkP5oJRPGsfJuHdzPMlyyEO/4sPW6yfSx2gf7lVg==}
    engines: {node: ^20.19.0 || >=22.12.0}
@ -537,12 +617,68 @@ packages:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}

+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
  undici-types@7.19.2:
    resolution: {integrity: sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==}

+  unplugin-dts@1.0.0:
+    resolution: {integrity: sha512-qz+U1lCscwq+t8Mkaxy5Esa7IQ5wWV18b4mnioOXSdnPaNiJ0+qgE3I+KL6UkXYZWxxGo2qdGone8LEQ52Sfkw==}
+    peerDependencies:
+      '@microsoft/api-extractor': '>=7'
+      '@rspack/core': ^1
+      '@vue/language-core': ~3.1.5
+      esbuild: '*'
+      rolldown: '*'
+      rollup: '>=3'
+      typescript: '>=4'
+      vite: '>=3'
+      webpack: ^4 || ^5
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@rspack/core':
+        optional: true
+      '@vue/language-core':
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

+  vite-plugin-dts@5.0.0:
+    resolution: {integrity: sha512-VLNAUttBq7pLxxL/m/ztjd5zj5yiviiC7ijfPFVLK5c45FLcibvieBsdjSka3a4ag1qdrAF9K3OysH4/lW+rPQ==}
+    peerDependencies:
+      '@microsoft/api-extractor': '>=7'
+      rollup: '>=3'
+      vite: '>=3'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+
  vite@8.0.11:
    resolution: {integrity: sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==}
    engines: {node: ^20.19.0 || >=22.12.0}
@ -586,8 +722,14 @@ packages:
      yaml:
        optional: true

-  web-component-base@4.1.1:
-    resolution: {integrity: sha512-zymPUGrLEvLTIecqkcWRm8P93XBTGENwMZWrgC4buR/WdaFLQ7Ig9qDoCpvGPY9DTHLO+XL0rvwGTeE9u6Fkbw==}
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  web-component-base@4.1.2:
+    resolution: {integrity: sha512-Jti4FHgCcwtsFWJ+PPwFNhTm5AJVIHrTXDew0rk2Y3b8EChRIE5xr6fmUni43tOhc6w8HatvR3k+qnxjXr/7Mw==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}

  which@2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@ -666,6 +808,25 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
    dependencies:
      '@emnapi/core': 1.10.0
@ -726,6 +887,12 @@ snapshots:

  '@rolldown/pluginutils@1.0.0-rc.18': {}

+  '@rollup/pluginutils@5.3.0':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+
  '@tybys/wasm-util@0.10.2':
    dependencies:
      tslib: 2.8.1
@ -737,10 +904,22 @@ snapshots:

  '@types/json-schema@7.0.15': {}

-  '@types/node@25.6.1':
+  '@types/node@25.6.2':
    dependencies:
      undici-types: 7.19.2

+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
  acorn-jsx@5.3.2(acorn@8.16.0):
    dependencies:
      acorn: 8.16.0
@ -756,10 +935,16 @@ snapshots:

  balanced-match@4.0.4: {}

-  brace-expansion@5.0.5:
+  brace-expansion@5.0.6:
    dependencies:
      balanced-match: 4.0.4

+  compare-versions@6.1.1: {}
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
@ -838,8 +1023,12 @@ snapshots:

  estraverse@5.3.0: {}

+  estree-walker@2.0.2: {}
+
  esutils@2.0.3: {}

+  exsolve@1.0.8: {}
+
  fast-deep-equal@3.1.3: {}

  fast-json-stable-stringify@2.1.0: {}
@ -897,6 +1086,8 @@ snapshots:
    dependencies:
      json-buffer: 3.0.1

+  kolorist@1.8.0: {}
+
  levn@0.4.1:
    dependencies:
      prelude-ls: 1.2.1
@ -951,13 +1142,30 @@ snapshots:
      lightningcss-win32-arm64-msvc: 1.32.0
      lightningcss-win32-x64-msvc: 1.32.0

+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.2
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+
  locate-path@6.0.0:
    dependencies:
      p-locate: 5.0.0

+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
  minimatch@10.2.5:
    dependencies:
-      brace-expansion: 5.0.5
+      brace-expansion: 5.0.6
+
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4

  ms@2.1.3: {}

@ -982,14 +1190,30 @@ snapshots:
    dependencies:
      p-limit: 3.1.0

+  path-browserify@1.0.1: {}
+
  path-exists@4.0.0: {}

  path-key@3.1.1: {}

+  pathe@2.0.3: {}
+
  picocolors@1.1.1: {}

  picomatch@4.0.4: {}

+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
  postcss@8.5.14:
    dependencies:
      nanoid: 3.3.12
@ -1000,6 +1224,8 @@ snapshots:

  punycode@2.3.1: {}

+  quansync@0.2.11: {}
+
  rolldown@1.0.0-rc.18:
    dependencies:
      '@oxc-project/types': 0.128.0
@ -1041,13 +1267,54 @@ snapshots:
    dependencies:
      prelude-ls: 1.2.1

+  typescript@6.0.3: {}
+
+  ufo@1.6.4: {}
+
  undici-types@7.19.2: {}

+  unplugin-dts@1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0
+      '@volar/typescript': 2.4.28
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      typescript: 6.0.3
+      unplugin: 2.3.11
+    optionalDependencies:
+      vite: 8.0.11(@types/node@25.6.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.4
+      webpack-virtual-modules: 0.6.2
+
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1

-  vite@8.0.11(@types/node@25.6.1):
+  vite-plugin-dts@5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2)):
+    dependencies:
+      unplugin-dts: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
+    optionalDependencies:
+      vite: 8.0.11(@types/node@25.6.2)
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@vue/language-core'
+      - esbuild
+      - rolldown
+      - supports-color
+      - typescript
+      - webpack
+
+  vite@8.0.11(@types/node@25.6.2):
    dependencies:
      lightningcss: 1.32.0
      picomatch: 4.0.4
@ -1055,10 +1322,14 @@ snapshots:
      rolldown: 1.0.0-rc.18
      tinyglobby: 0.2.16
    optionalDependencies:
-      '@types/node': 25.6.1
+      '@types/node': 25.6.2
      fsevents: 2.3.3

-  web-component-base@4.1.1: {}
+  vscode-uri@3.1.0: {}
+
+  web-component-base@4.1.2: {}
+
+  webpack-virtual-modules@0.6.2: {}

  which@2.0.2:
    dependencies:
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/></defs><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><g fill="#000000" fill-opacity="1"><g transform="translate(73.856059, 294.776352)"><g><path d="M 218.265625 0 L 100.453125 0 C 99.492188 0 99.015625 -0.601562 99.015625 -1.8125 C 99.253906 -6.382812 99.734375 -12.582031 100.453125 -20.40625 C 101.179688 -28.238281 101.96875 -36.128906 102.8125 -44.078125 C 103.65625 -52.035156 104.316406 -58.179688 104.796875 -62.515625 C 105.035156 -62.992188 105.515625 -63.351562 106.234375 -63.59375 C 106.960938 -63.832031 107.566406 -63.953125 108.046875 -63.953125 C 108.523438 -63.710938 109.96875 -63.59375 112.375 -63.59375 C 114.789062 -63.59375 117.257812 -63.59375 119.78125 -63.59375 C 122.3125 -63.59375 123.941406 -63.59375 124.671875 -63.59375 C 124.671875 -63.59375 125.691406 -64.070312 127.734375 -65.03125 C 129.785156 -66 130.8125 -67.691406 130.8125 -70.109375 C 130.570312 -71.304688 130.03125 -74.851562 129.1875 -80.75 C 128.34375 -86.65625 127.378906 -93.398438 126.296875 -100.984375 C 125.210938 -108.578125 124.25 -115.867188 123.40625 -122.859375 C 122.5625 -129.847656 122.019531 -135.03125 121.78125 -138.40625 C 121.539062 -143.695312 120.816406 -148.148438 119.609375 -151.765625 C 118.398438 -155.378906 116.59375 -157.1875 114.1875 -157.1875 C 110.8125 -157.425781 108.460938 -155.800781 107.140625 -152.3125 C 105.816406 -148.820312 105.035156 -146.113281 104.796875 -144.1875 C 104.066406 -138.882812 102.859375 -131.414062 101.171875 -121.78125 C 99.492188 -112.144531 97.566406 -101.546875 95.390625 -89.984375 C 93.222656 -78.421875 91.175781 -66.851562 89.25 -55.28125 C 87.320312 -43.71875 85.695312 -33.175781 84.375 -23.65625 C 83.050781 -14.144531 82.269531 -6.863281 82.03125 -1.8125 C 82.03125 -0.601562 81.664062 0 80.9375 0 L 7.953125 0 C 6.984375 0 6.617188 -0.722656 6.859375 -2.171875 C 7.109375 -3.128906 7.289062 -4.148438 7.40625 -5.234375 C 7.53125 -6.316406 7.710938 -7.34375 7.953125 -8.3125 C 8.429688 -10.476562 9.394531 -15.113281 10.84375 -22.21875 C 12.289062 -29.332031 13.914062 -37.34375 15.71875 -46.25 C 17.519531 -55.164062 19.265625 -63.78125 20.953125 -72.09375 C 22.640625 -80.40625 24.085938 -86.847656 25.296875 -91.421875 C 25.773438 -94.554688 26.675781 -99.859375 28 -107.328125 C 29.332031 -114.796875 30.78125 -123.40625 32.34375 -133.15625 C 33.90625 -142.914062 35.53125 -152.914062 37.21875 -163.15625 C 38.90625 -173.394531 40.410156 -183.085938 41.734375 -192.234375 C 43.054688 -201.390625 44.195312 -208.976562 45.15625 -215 C 46.125 -221.03125 46.609375 -224.644531 46.609375 -225.84375 C 46.859375 -226.8125 47.34375 -227.296875 48.0625 -227.296875 L 179.59375 -227.296875 C 180.070312 -227.296875 180.429688 -226.8125 180.671875 -225.84375 C 181.160156 -223.4375 182.066406 -218.4375 183.390625 -210.84375 C 184.710938 -203.257812 186.15625 -194.769531 187.71875 -185.375 C 189.289062 -175.976562 190.796875 -167.003906 192.234375 -158.453125 C 193.679688 -149.898438 194.890625 -143.21875 195.859375 -138.40625 C 197.546875 -128.769531 199.109375 -119.128906 200.546875 -109.484375 C 201.992188 -99.847656 203.441406 -90.210938 204.890625 -80.578125 C 205.367188 -78.648438 206.03125 -74.976562 206.875 -69.5625 C 207.71875 -64.144531 208.800781 -58 210.125 -51.125 C 211.457031 -44.257812 212.722656 -37.332031 213.921875 -30.34375 C 215.128906 -23.363281 216.273438 -17.34375 217.359375 -12.28125 C 218.441406 -7.226562 219.101562 -3.859375 219.34375 -2.171875 C 219.820312 -0.722656 219.460938 0 218.265625 0 Z M 218.265625 0 "/></g></g></g></svg>
--- a/public/mask-icon.svg
+++ b/public/mask-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/></defs><g fill="#000000" fill-opacity="1"><g transform="translate(73.856059, 294.776352)"><g><path d="M 218.265625 0 L 100.453125 0 C 99.492188 0 99.015625 -0.601562 99.015625 -1.8125 C 99.253906 -6.382812 99.734375 -12.582031 100.453125 -20.40625 C 101.179688 -28.238281 101.96875 -36.128906 102.8125 -44.078125 C 103.65625 -52.035156 104.316406 -58.179688 104.796875 -62.515625 C 105.035156 -62.992188 105.515625 -63.351562 106.234375 -63.59375 C 106.960938 -63.832031 107.566406 -63.953125 108.046875 -63.953125 C 108.523438 -63.710938 109.96875 -63.59375 112.375 -63.59375 C 114.789062 -63.59375 117.257812 -63.59375 119.78125 -63.59375 C 122.3125 -63.59375 123.941406 -63.59375 124.671875 -63.59375 C 124.671875 -63.59375 125.691406 -64.070312 127.734375 -65.03125 C 129.785156 -66 130.8125 -67.691406 130.8125 -70.109375 C 130.570312 -71.304688 130.03125 -74.851562 129.1875 -80.75 C 128.34375 -86.65625 127.378906 -93.398438 126.296875 -100.984375 C 125.210938 -108.578125 124.25 -115.867188 123.40625 -122.859375 C 122.5625 -129.847656 122.019531 -135.03125 121.78125 -138.40625 C 121.539062 -143.695312 120.816406 -148.148438 119.609375 -151.765625 C 118.398438 -155.378906 116.59375 -157.1875 114.1875 -157.1875 C 110.8125 -157.425781 108.460938 -155.800781 107.140625 -152.3125 C 105.816406 -148.820312 105.035156 -146.113281 104.796875 -144.1875 C 104.066406 -138.882812 102.859375 -131.414062 101.171875 -121.78125 C 99.492188 -112.144531 97.566406 -101.546875 95.390625 -89.984375 C 93.222656 -78.421875 91.175781 -66.851562 89.25 -55.28125 C 87.320312 -43.71875 85.695312 -33.175781 84.375 -23.65625 C 83.050781 -14.144531 82.269531 -6.863281 82.03125 -1.8125 C 82.03125 -0.601562 81.664062 0 80.9375 0 L 7.953125 0 C 6.984375 0 6.617188 -0.722656 6.859375 -2.171875 C 7.109375 -3.128906 7.289062 -4.148438 7.40625 -5.234375 C 7.53125 -6.316406 7.710938 -7.34375 7.953125 -8.3125 C 8.429688 -10.476562 9.394531 -15.113281 10.84375 -22.21875 C 12.289062 -29.332031 13.914062 -37.34375 15.71875 -46.25 C 17.519531 -55.164062 19.265625 -63.78125 20.953125 -72.09375 C 22.640625 -80.40625 24.085938 -86.847656 25.296875 -91.421875 C 25.773438 -94.554688 26.675781 -99.859375 28 -107.328125 C 29.332031 -114.796875 30.78125 -123.40625 32.34375 -133.15625 C 33.90625 -142.914062 35.53125 -152.914062 37.21875 -163.15625 C 38.90625 -173.394531 40.410156 -183.085938 41.734375 -192.234375 C 43.054688 -201.390625 44.195312 -208.976562 45.15625 -215 C 46.125 -221.03125 46.609375 -224.644531 46.609375 -225.84375 C 46.859375 -226.8125 47.34375 -227.296875 48.0625 -227.296875 L 179.59375 -227.296875 C 180.070312 -227.296875 180.429688 -226.8125 180.671875 -225.84375 C 181.160156 -223.4375 182.066406 -218.4375 183.390625 -210.84375 C 184.710938 -203.257812 186.15625 -194.769531 187.71875 -185.375 C 189.289062 -175.976562 190.796875 -167.003906 192.234375 -158.453125 C 193.679688 -149.898438 194.890625 -143.21875 195.859375 -138.40625 C 197.546875 -128.769531 199.109375 -119.128906 200.546875 -109.484375 C 201.992188 -99.847656 203.441406 -90.210938 204.890625 -80.578125 C 205.367188 -78.648438 206.03125 -74.976562 206.875 -69.5625 C 207.71875 -64.144531 208.800781 -58 210.125 -51.125 C 211.457031 -44.257812 212.722656 -37.332031 213.921875 -30.34375 C 215.128906 -23.363281 216.273438 -17.34375 217.359375 -12.28125 C 218.441406 -7.226562 219.101562 -3.859375 219.34375 -2.171875 C 219.820312 -0.722656 219.460938 0 218.265625 0 Z M 218.265625 0 "/></g></g></g></svg>
--- a/public/pico.min.css
+++ b/public/pico.min.css
--- a/public/touch-icon-large.png
+++ b/public/touch-icon-large.png
--- 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'
@ -7,35 +9,60 @@ class StatusIndicator extends WebComponent {

    static props = {
        status: 'default',
+        pulse: false
    }

-    #indicatorColor: any = {
-        default: [216, 226, 233],
-        active: [0, 149, 255],
-        positive: [75, 210, 143],
-        intermediary: [255, 170, 0],
-        negative: [255, 77, 77]
+    #indicatorColor: Record<StatusType, string> = {
+        default: '216, 226, 233',
+        active: '0, 149, 255',
+        positive: '75, 210, 143',
+        intermediary: '255, 170, 0',
+        negative: '255, 77, 77'
+    }
+
+    #pulseAnimationCSSRules: Partial<CSSStyleDeclaration> = {
+        animationName: 'pulse',
+        animationDuration: '2s',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        animationDelay: '0',
+        animationFillMode: 'none'
    }

    get template(): any {
+        // @ts-ignore: Needs fixing on the base class
+        const statusColor = this.#indicatorColor[this.props.status]
+
        return html`
            <div class="status-indicator-icon" style=${{
                display: 'inline-block',
                borderRadius: '50%',
                cursor: 'pointer',
-                width: '10px',
-                height: '10px',
-                backgroundColor: `rgba(${this.#indicatorColor[this.props.status]})`,
-                marginRight: '0.05rem'
-            }}
-            ></div>
-            <span class="status-indicator-label">
-                <slot></slot>
-            </span>
-        `
+                width: '0.5rem',
+                height: '0.5rem',
+                backgroundColor: `rgb(${statusColor})`,
+                marginRight: '0.05rem',
+                ...(this.props.pulse ? this.#pulseAnimationCSSRules : [])
+            }}> </div>
+
+            <span class="status-indicator-label"><slot></slot></span>
+
+            ${
+            /** if pulse is set, add animation keyframes */
+            this.props.pulse ? html`
+                <style>
+                @keyframes pulse {
+                    0% { box-shadow: 0 0 0 0 rgba(${statusColor}, 0.5);}
+                    70% { box-shadow: 0 0 0 10px rgba(${statusColor}, 0); }
+                    100% { box-shadow: 0 0 0 0 rgba(${statusColor}, 0); }
+                }
+                </style>`
+                :
+                ''
+            }`
    }
 }

 customElements.define('status-indicator', StatusIndicator)

-export default StatusIndicator
+export default StatusIndicator
--- a/vite-lib.config.ts
+++ b/vite-lib.config.ts
@ -1,12 +1,23 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'

 export default defineConfig({
+    publicDir: false,
    build: {
        lib: {
-            entry: resolve(import.meta.dirname, 'src/status-indicator.js'),
+            entry: resolve(import.meta.dirname, 'src/status-indicator.ts'),
            name: 'StatusIndicator',
-            fileName: 'status-indicator'
+            fileName: 'status-indicator',
+        },
+        rolldownOptions: {
+            external: ['web-component-base'],
+            output: {
+                globals: {
+                    'web-component-base': 'web-component-base',
+                }
+            },
        }
-    }
+    },
+    plugins: [dts()]
 })
Author	SHA1	Message	Date
Ayo	e4b5a9ebc2	feat(site): update CDN url	2026-05-16 18:58:09 +02:00
Ayo	de93866548	2.1.2	2026-05-14 19:40:47 +02:00
Ayo	a9c344bee4	chore: remove src & screenshot from distribution	2026-05-14 19:40:34 +02:00
Ayo	45db0001c7	2.1.1	2026-05-14 12:40:21 +02:00
Ayo	06a32d61c3	chore: don't include the public dir in lib build	2026-05-14 12:39:55 +02:00
Ayo	2a1096ab1e	2.1.0	2026-05-14 12:31:57 +02:00
Ayo	7a800fd07a	feat: add types & source to distribution	2026-05-14 12:31:46 +02:00
Ayo	fc9a5c483d	feat(site): add paragraph to quick start	2026-05-14 09:54:59 +02:00
Ayo	71b4eae7c2	2.0.3	2026-05-14 09:50:53 +02:00
Ayo	ac5a0e1de5	feat(site): format the quick start code	2026-05-14 09:50:41 +02:00
Ayo	ec16f7d7da	feat(site): add quick start section	2026-05-14 09:47:36 +02:00
Ayo	d76a43c0c4	chore: update readme with asides	2026-05-14 09:31:20 +02:00
Ayo	9c5e821cd2	2.0.2	2026-05-14 09:22:08 +02:00
Ayo	b725d547a7	chore: add links to example pens	2026-05-14 09:21:58 +02:00
Ayo	6a5cd31de5	2.0.1	2026-05-14 09:13:39 +02:00
Ayo	2a61caa922	chore: update readme on how to use import maps	2026-05-14 09:13:32 +02:00
Ayo	32e1d3ab3b	2.0.0	2026-05-14 08:53:56 +02:00
Ayo	35f78c4ba9	feat: externalize base class	2026-05-14 08:53:46 +02:00
Ayo	8e98a4cbb4	refactor(site): remove unused css variable	2026-05-11 18:49:58 +02:00
Ayo	292eac3b1d	refactor: add types for internals	2026-05-11 13:48:06 +02:00
Ayo	e4e6003e3b	chore(deps): update web-component-base	2026-05-11 12:02:15 +02:00
Ayo	bd29797893	refactor(site): move pico.css to public dir	2026-05-09 10:43:37 +02:00
Ayo	f4f27f3aaa	feat(site): add meta description & icons	2026-05-09 07:57:10 +02:00
Ayo	0ca88e87f9	chore: update readme	2026-05-09 07:40:21 +02:00
Ayo	66cf20e0cf	1.1.1	2026-05-09 07:18:48 +02:00
Ayo	a133ba2ebe	chore: update pkg description	2026-05-09 07:18:41 +02:00
Ayo	084770f825	1.1.0	2026-05-09 07:12:32 +02:00
Ayo	fa4c8da495	feat: circle size is now 0.5rem	2026-05-09 07:12:20 +02:00
Ayo	3d4ef46438	feat(site): update demo page layout	2026-05-09 07:08:10 +02:00
Ayo	0ac93c99d0	chore: update readme heading	2026-05-09 06:56:30 +02:00
Ayo	5e0b5b765f	chore: update description in readme	2026-05-09 06:54:27 +02:00
Ayo	e53c202243	chore: update readme	2026-05-08 22:39:58 +02:00
Ayo	948c9b027e	refactor: use statusColor variable in template()	2026-05-08 21:56:36 +02:00
Ayo	0c82e21a28	chore: update readme quick start	2026-05-08 21:50:05 +02:00
Ayo	858f66ed17	1.0.2	2026-05-08 21:45:58 +02:00
Ayo	3348ecc5ee	fix: `false` is showing when `pulse` is not set	2026-05-08 21:45:44 +02:00
Ayo	a4d1e2f496	1.0.1	2026-05-08 21:43:10 +02:00
Ayo	4a5c46f3c2	chore: update readme	2026-05-08 21:43:02 +02:00
Ayo	92cfb82a22	1.0.0	2026-05-08 21:41:23 +02:00
Ayo	322e9dc337	feat: implement pulse animation	2026-05-08 21:41:16 +02:00
Ayo	9c7aa20685	chore: update copyright year	2026-05-08 20:37:31 +02:00
Ayo	e104d6d7fb	chore: update readme usage instructions	2026-05-08 20:19:25 +02:00
Ayo	4574a09275	chore: update readme (grammar)	2026-05-08 20:16:06 +02:00
Ayo	861a8b3f31	0.0.6	2026-05-08 20:12:13 +02:00
Ayo	8dbe25f3cc	chore: add package homepage meta	2026-05-08 20:12:04 +02:00
Ayo	91f9116693	0.0.5	2026-05-08 20:10:46 +02:00
Ayo	110e4b1e5d	chore: update readme Quick Start section	2026-05-08 20:09:57 +02:00
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/></defs><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><g fill="#000000" fill-opacity="1"><g transform="translate(73.856059, 294.776352)"><g><path d="M 218.265625 0 L 100.453125 0 C 99.492188 0 99.015625 -0.601562 99.015625 -1.8125 C 99.253906 -6.382812 99.734375 -12.582031 100.453125 -20.40625 C 101.179688 -28.238281 101.96875 -36.128906 102.8125 -44.078125 C 103.65625 -52.035156 104.316406 -58.179688 104.796875 -62.515625 C 105.035156 -62.992188 105.515625 -63.351562 106.234375 -63.59375 C 106.960938 -63.832031 107.566406 -63.953125 108.046875 -63.953125 C 108.523438 -63.710938 109.96875 -63.59375 112.375 -63.59375 C 114.789062 -63.59375 117.257812 -63.59375 119.78125 -63.59375 C 122.3125 -63.59375 123.941406 -63.59375 124.671875 -63.59375 C 124.671875 -63.59375 125.691406 -64.070312 127.734375 -65.03125 C 129.785156 -66 130.8125 -67.691406 130.8125 -70.109375 C 130.570312 -71.304688 130.03125 -74.851562 129.1875 -80.75 C 128.34375 -86.65625 127.378906 -93.398438 126.296875 -100.984375 C 125.210938 -108.578125 124.25 -115.867188 123.40625 -122.859375 C 122.5625 -129.847656 122.019531 -135.03125 121.78125 -138.40625 C 121.539062 -143.695312 120.816406 -148.148438 119.609375 -151.765625 C 118.398438 -155.378906 116.59375 -157.1875 114.1875 -157.1875 C 110.8125 -157.425781 108.460938 -155.800781 107.140625 -152.3125 C 105.816406 -148.820312 105.035156 -146.113281 104.796875 -144.1875 C 104.066406 -138.882812 102.859375 -131.414062 101.171875 -121.78125 C 99.492188 -112.144531 97.566406 -101.546875 95.390625 -89.984375 C 93.222656 -78.421875 91.175781 -66.851562 89.25 -55.28125 C 87.320312 -43.71875 85.695312 -33.175781 84.375 -23.65625 C 83.050781 -14.144531 82.269531 -6.863281 82.03125 -1.8125 C 82.03125 -0.601562 81.664062 0 80.9375 0 L 7.953125 0 C 6.984375 0 6.617188 -0.722656 6.859375 -2.171875 C 7.109375 -3.128906 7.289062 -4.148438 7.40625 -5.234375 C 7.53125 -6.316406 7.710938 -7.34375 7.953125 -8.3125 C 8.429688 -10.476562 9.394531 -15.113281 10.84375 -22.21875 C 12.289062 -29.332031 13.914062 -37.34375 15.71875 -46.25 C 17.519531 -55.164062 19.265625 -63.78125 20.953125 -72.09375 C 22.640625 -80.40625 24.085938 -86.847656 25.296875 -91.421875 C 25.773438 -94.554688 26.675781 -99.859375 28 -107.328125 C 29.332031 -114.796875 30.78125 -123.40625 32.34375 -133.15625 C 33.90625 -142.914062 35.53125 -152.914062 37.21875 -163.15625 C 38.90625 -173.394531 40.410156 -183.085938 41.734375 -192.234375 C 43.054688 -201.390625 44.195312 -208.976562 45.15625 -215 C 46.125 -221.03125 46.609375 -224.644531 46.609375 -225.84375 C 46.859375 -226.8125 47.34375 -227.296875 48.0625 -227.296875 L 179.59375 -227.296875 C 180.070312 -227.296875 180.429688 -226.8125 180.671875 -225.84375 C 181.160156 -223.4375 182.066406 -218.4375 183.390625 -210.84375 C 184.710938 -203.257812 186.15625 -194.769531 187.71875 -185.375 C 189.289062 -175.976562 190.796875 -167.003906 192.234375 -158.453125 C 193.679688 -149.898438 194.890625 -143.21875 195.859375 -138.40625 C 197.546875 -128.769531 199.109375 -119.128906 200.546875 -109.484375 C 201.992188 -99.847656 203.441406 -90.210938 204.890625 -80.578125 C 205.367188 -78.648438 206.03125 -74.976562 206.875 -69.5625 C 207.71875 -64.144531 208.800781 -58 210.125 -51.125 C 211.457031 -44.257812 212.722656 -37.332031 213.921875 -30.34375 C 215.128906 -23.363281 216.273438 -17.34375 217.359375 -12.28125 C 218.441406 -7.226562 219.101562 -3.859375 219.34375 -2.171875 C 219.820312 -0.722656 219.460938 0 218.265625 0 Z M 218.265625 0 "/></g></g></g></svg>