From 4a13f7f01a09361fc048460e95f7f2886cd2618c Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Mon, 14 Jun 2021 08:07:33 -0700
Subject: [PATCH] Add attributes (#16)

---
 README.md            | 11 +++++++++++
 package-lock.json    |  4 ++--
 src/launch-button.ts |  4 ++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8b26aec..b99bc1f 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,17 @@ Add the following to your website to show a button to start the provisioning pro
 
 A warning message will be rendered if the browser does not support WebBluetooth.
 
+### Attributes
+
+The following attributes are automatically added to `<improv-wifi-launch-button>` and can be used for styling:
+
+| Attribute | Description |
+| -- | -- |
+| `supported` | Added if this browser is supported
+| `unsupported` | Added if this browser is not supported
+
+### Slots
+
 It is possible to customize the button and the message. You do this by putting your elements inside the `<improv-wifi-launch-button>` element and adding the appropriate `slot` attribute. Use `activate` to replace the activation button and `unsupported` to replace the unsupported message:
 
 ```html
diff --git a/package-lock.json b/package-lock.json
index 724266f..9d731b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "improv-wifi-sdk",
-  "version": "0.0.8",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "improv-wifi-sdk",
-      "version": "0.0.8",
+      "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@material/mwc-button": "^0.21.0",
diff --git a/src/launch-button.ts b/src/launch-button.ts
index 1893988..ff5381b 100644
--- a/src/launch-button.ts
+++ b/src/launch-button.ts
@@ -52,11 +52,15 @@ export class LaunchButton extends HTMLElement {
     this.renderRoot = this.attachShadow({ mode: "open" });
 
     if (!LaunchButton.isSupported || !LaunchButton.isAllowed) {
+      this.toggleAttribute("not-supported", true);
       this.renderRoot.innerHTML = !LaunchButton.isSupported
         ? "<slot name='unsupported'>Your browser does not support bluetooth provisioning. Use Google Chrome or Microsoft Edge.</slot>"
         : "<slot name='not-allowed'>You can only use Improv on HTTPS sites or localhost.</slot>";
       return;
     }
+
+    this.toggleAttribute("supported", true);
+
     this.addEventListener("mouseover", () => {
       // Preload
       import("./provision");