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 549 additions and 77 deletions
--- a/21
+++ b/21
@ -0,0 +1,21 @@
 MIT License
 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
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
--- 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@2.1.2/es2022/status-indicator.mjs"></script>
-  <script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
+
-</head>
+<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>
+    <title>status-indicator web component</title>
-    <link rel="stylesheet" href="./pico.min.css">
+
    <!-- 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">
+            <section>
-            All systems operational
+                <p>Colored circles that can pulse</p>
-        </status-indicator>
+                <status-indicator status="positive" pulse>
-        <br />
+                    All systems operational
-        <status-indicator status="negative">
+                </status-indicator>
-            Something's wrong
+                <br />
-        </status-indicator>
+                <status-indicator status="negative" pulse>
-        <br />
+                    Something's wrong
-        <status-indicator status="active">
+                </status-indicator>
-            It's just fine; carry on
+                <br />
-        </status-indicator>
+                <status-indicator status="active">
-        <br />
+                    It's just fine; carry on
-        <status-indicator>
+                </status-indicator>
-            Nothing matters
+                <br />
-        </status-indicator>
+                <status-indicator>
-        <br />
+                    Nothing matters
-        <status-indicator status="intermediary">
+                </status-indicator>
-            Slow down...
+                <br />
-        </status-indicator>
+                <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,34 +1,44 @@
 {
  "name": "@ayo-run/status-indicator",
-  "version": "0.0.1",
+  "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": "ISC",
+  "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": {
    ".": {
-      "import": "./dist/status-indicator.js"
+      "default": "./dist/status-indicator.js",
      "import": "./dist/status-indicator.js",
      "require": "./dist/status-indicator.umd.cjs"
    }
  },
  "files": [
    "dist",
    "README.md",
-    "LICENSE",
+    "LICENSE"
    "screenshot.png"
  ],
  "scripts": {
    "test": "echo \"Warning: no test specified\"",
    "build": "vite build",
    "build:lib": "vite build --config vite-lib.config.ts",
    "dev": "vite",
    "prepare": "husky"
  },
  "devDependencies": {
    "@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": {
+  "peerDependencies": {
-    "web-component-base": "^4.1.1"
+    "web-component-base": "^4.1.2"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -9,9 +9,12 @@ importers:
  .:
    dependencies:
      web-component-base:
-        specifier: ^4.1.1
+        specifier: ^4.1.2
-        version: 4.1.1
+        version: 4.1.2
    devDependencies:
      '@types/node':
        specifier: ^25.6.2
        version: 25.6.2
      eslint:
        specifier: ^10.3.0
        version: 10.3.0
@ -20,7 +23,10 @@ importers:
        version: 9.1.7
      vite:
        specifier: ^8.0.11
-        version: 8.0.11
+        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:
@ -83,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:
@ -190,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==}
@ -202,6 +233,18 @@ packages:
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
  '@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==}
    peerDependencies:
@ -219,10 +262,19 @@ packages:
    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
    engines: {node: 18 || 20 || >=22}
-  brace-expansion@5.0.5:
+  brace-expansion@5.0.6:
-    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
+    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'}
@ -285,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==}
@ -367,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'}
@ -445,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==}
@ -476,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'}
@ -484,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==}
@ -491,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}
@ -503,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}
@ -531,9 +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}
@ -577,8 +722,14 @@ packages:
      yaml:
        optional: true
-  web-component-base@4.1.1:
+  vscode-uri@3.1.0:
-    resolution: {integrity: sha512-zymPUGrLEvLTIecqkcWRm8P93XBTGENwMZWrgC4buR/WdaFLQ7Ig9qDoCpvGPY9DTHLO+XL0rvwGTeE9u6Fkbw==}
+    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==}
@ -657,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
@ -717,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
@ -728,6 +904,22 @@ snapshots:
  '@types/json-schema@7.0.15': {}
  '@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
@ -743,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
@ -825,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: {}
@ -884,6 +1086,8 @@ snapshots:
    dependencies:
      json-buffer: 3.0.1
  kolorist@1.8.0: {}
  levn@0.4.1:
    dependencies:
      prelude-ls: 1.2.1
@ -938,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: {}
@ -969,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
@ -987,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
@ -1028,11 +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:
+  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
@ -1040,9 +1322,14 @@ snapshots:
      rolldown: 1.0.0-rc.18
      tinyglobby: 0.2.16
    optionalDependencies:
      '@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,32 +9,60 @@ class StatusIndicator extends WebComponent {
    static props = {
        status: 'default',
        pulse: false
    }
-    #indicatorColor: any = {
+    #indicatorColor: Record<StatusType, string> = {
-        default: [216, 226, 233],
+        default: '216, 226, 233',
-        active: [0, 149, 255],
+        active: '0, 149, 255',
-        positive: [75, 210, 143],
+        positive: '75, 210, 143',
-        intermediary: [255, 170, 0],
+        intermediary: '255, 170, 0',
-        negative: [255, 77, 77]
+        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 style=${{
+            <div class="status-indicator-icon" style=${{
                display: 'inline-block',
                borderRadius: '50%',
                cursor: 'pointer',
-                width: '10px',
+                width: '0.5rem',
-                height: '10px',
+                height: '0.5rem',
-                backgroundColor: `rgba(${this.#indicatorColor[this.props.status]})`
+                backgroundColor: `rgb(${statusColor})`,
-            }}
+                marginRight: '0.05rem',
-            ></div>
+                ...(this.props.pulse ? this.#pulseAnimationCSSRules : [])
-            <slot></slot>
+            }}> </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
@ -0,0 +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.ts'),
            name: 'StatusIndicator',
            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
Ayo	2b86da47ad	0.0.4	2026-05-08 20:07:00 +02:00
Ayo	940c36245a	feat: wrap label with span.status-indicator-label; add 0.05rem space on right of icon	2026-05-08 20:06:43 +02:00
Ayo	c5877444e5	chore: bump version	2026-05-08 20:00:04 +02:00
Ayo	8f8cc241f5	chore: updat package exports	2026-05-08 19:59:38 +02:00
Ayo	8fcf8b4efa	chore: update package meta & license	2026-05-08 19:58:09 +02:00
Ayo	7e8cdee7df	chore: separate build:lib script	2026-05-08 19:55:33 +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>