@substrate-system/button 0.0.31 → 0.0.36

package/dist/index.css

@@ -1,157 +1,71 @@
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 @keyframes spinner {
-    to {transform: rotate(360deg);}
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-@keyframes substrate-button-activate {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(0.95);
-    }
-
-    100% {
-        transform: scale(1);
-    }
+substrate-button button, substrate-button a.btn {
+  color: #000;
+  cursor: pointer;
+  background: none;
+  border: 1px solid;
+  outline: 1px solid rgba(0, 0, 0, 0);
+  padding: .5rem 2rem;
+  font-size: 1rem;
+  text-decoration: none;
+  transition: all .2s;
+  transform: translateY(1px);
 }
 
-/* Respect user's motion preferences */
-@media (prefers-reduced-motion: reduce) {
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-
-        to {
-            transform: rotate(0deg);
-        }
-    }
-
-    @keyframes spinner {
-        to {transform: rotate(0deg);}
-    }
-
-    @keyframes substrate-button-activate {
-        0%, 50%, 100% {
-            transform: scale(1);
-        }
-    }
+:is(substrate-button button, substrate-button a.btn):focus {
+  outline: 1px solid;
 }
 
-substrate-button {
-    display: inline-block;
-    user-select: none;
-    min-width: 8rem;
-    transition: all 0.3s;
+:is(substrate-button button, substrate-button a.btn):hover {
+  outline: 1px solid;
+  transform: translateY(0);
 }
 
-substrate-button button {
-        transition: all 0.3s ease;
-    }
-
-:is(substrate-button button):hover {
-            box-shadow: 0 4px 12px #00000026;
-            transform: translateY(-2px);
-        }
-
-substrate-button.substrate-loading {
-        pointer-events: none;
-    }
-
-substrate-button.substrate-loading button {
-            color: transparent;
-            pointer-events: none;
-        }
-
-:is(substrate-button.substrate-loading button):hover {
-                color: transparent;
-            }
-
-:is(substrate-button.substrate-loading button)::after {
-                content: "";
-                background: transparent;
-                box-sizing: border-box;
-                position: absolute;
-                width: 16px;
-                height: 16px;
-                inset: 0;
-                margin: auto;
-                border-radius: 50%;
-                border-top: 2px solid black;
-                border-right: 2px solid transparent;
-                animation: spinner 0.6s linear infinite;
-            }
-
-substrate-button[aria-disabled="true"] {
-        user-select: none;
-        background-color: transparent;
-    }
-
-substrate-button[aria-disabled="true"] button {
-            user-select: none;
-            background-color: transparent
-        }
-
-/* Disable animations and transitions for users who prefer reduced motion */
-@media (prefers-reduced-motion: reduce) {
-            substrate-button.substrate-loading button {
-                transition: none;
-            }
-
-                :is(substrate-button.substrate-loading button)::after {
-                    animation: none;
-                    /* Show a static indicator instead of spinning */
-                    border: 2px solid black;
-                    opacity: 0.5;
-                }
-            button.substrate-button:not([disabled]):active {
-                animation: none;
-            }
+:is(substrate-button button, substrate-button a.btn):active {
+  transform: translateY(2px);
 }
 
-:root {
-    --default-color: #36393d;
+:is(substrate-button button, substrate-button a.btn):disabled {
+  cursor: not-allowed;
+  opacity: .4;
 }
 
-button.substrate-button {
-    border: 1px solid black;
-    color: var(--default-color);
-    padding: 0.5em 1em;
-    position: relative;
-    background-color: var(--substrate-button-background, transparent);
-    appearance: none;
-    outline: 2px solid transparent;
+:is(substrate-button button, substrate-button a.btn):disabled:hover {
+  outline-color: rgba(0, 0, 0, 0);
+  transform: translateY(1px);
 }
 
-button.substrate-button:disabled {
-        pointer-events: none;
-        opacity: 0.4;
-    }
-
-/* Enhanced focus visibility */
+:is(substrate-button button, substrate-button a.btn).spinning {
+  opacity: .4;
+}
 
-button.substrate-button:focus,button.substrate-button:focus-visible {
-        outline: 2px solid var(--default-color);
-    }
+:is(substrate-button button, substrate-button a.btn).spinning .btn-content {
+  visibility: hidden;
+}
 
-button.substrate-button:focus:not(:focus-visible) {
-        outline-color: transparent;
-    }
+:is(substrate-button button, substrate-button a.btn).spinning:hover {
+  cursor: initial;
+}
 
-button.substrate-button:not([disabled]):active {
-            animation-duration: .2s;
-            animation-name: substrate-button-activate;
-            transition-timing-function: ease;
-        }
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUEsc0NBQXNDO0FBQ3RDO0lBQ0k7UUFDSTtZQUNJLHVCQUF1QjtRQUMzQjs7UUFFQTtZQUNJLHVCQUF1QjtRQUMzQjtJQUNKOztJQUVBO1FBQ0ksSUFBSSx1QkFBdUIsQ0FBQztJQUNoQzs7SUFFQTtRQUNJO1lBQ0ksbUJBQW1CO1FBQ3ZCO0lBQ0o7QUFDSjs7QUFFQTtJQUNJLHFCQUFxQjtJQUNyQixpQkFBaUI7SUFDakIsZUFBZTtJQUNmLG9CQUFvQjtBQWdEeEI7O0FBOUNJO1FBQ0kseUJBQXlCO0lBTTdCOztBQUpJO1lBQ0ksZ0NBQWdDO1lBQ2hDLDJCQUEyQjtRQUMvQjs7QUFHSjtRQUNJLG9CQUFvQjtJQXlCeEI7O0FBdkJJO1lBQ0ksa0JBQWtCO1lBQ2xCLG9CQUFvQjtRQW9CeEI7O0FBbEJJO2dCQUNJLGtCQUFrQjtZQUN0Qjs7QUFFQTtnQkFDSSxXQUFXO2dCQUNYLHVCQUF1QjtnQkFDdkIsc0JBQXNCO2dCQUN0QixrQkFBa0I7Z0JBQ2xCLFdBQVc7Z0JBQ1gsWUFBWTtnQkFDWixRQUFRO2dCQUNSLFlBQVk7Z0JBQ1osa0JBQWtCO2dCQUNsQiwyQkFBMkI7Z0JBQzNCLG1DQUFtQztnQkFDbkMsdUNBQXVDO1lBQzNDOztBQUlQO1FBQ0csaUJBQWlCO1FBQ2pCLDZCQUE2QjtJQU1qQzs7QUFKSTtZQUNJLGlCQUFpQjtZQUNqQjtRQUNKOztBQUlSLDJFQUEyRTtBQUMzRTtZQUdZO2dCQUNJLGdCQUFnQjtZQVFwQjs7Z0JBTkk7b0JBQ0ksZUFBZTtvQkFDZixnREFBZ0Q7b0JBQ2hELHVCQUF1QjtvQkFDdkIsWUFBWTtnQkFDaEI7WUFPSjtnQkFDSSxlQUFlO1lBQ25CO0FBR1o7O0FBRUE7SUFDSSx3QkFBd0I7QUFDNUI7O0FBRUE7SUFDSSx1QkFBdUI7SUFDdkIsMkJBQTJCO0lBQzNCLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsaUVBQWlFO0lBQ2pFLGdCQUFnQjtJQUNoQiw4QkFBOEI7QUF1QmxDOztBQXJCSTtRQUNJLG9CQUFvQjtRQUNwQixZQUFZO0lBQ2hCOztBQUVBLDhCQUE4Qjs7QUFDOUI7UUFDSSx1Q0FBdUM7SUFDM0M7O0FBRUE7UUFDSSwwQkFBMEI7SUFDOUI7O0FBR0k7WUFDSSx1QkFBdUI7WUFDdkIseUNBQXlDO1lBQ3pDLGdDQUFnQztRQUNwQyIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG4vKiBSZXNwZWN0IHVzZXIncyBtb3Rpb24gcHJlZmVyZW5jZXMgKi9cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gICAgQGtleWZyYW1lcyBzcGluIHtcbiAgICAgICAgZnJvbSB7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRvIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICAgICAgdG8ge3RyYW5zZm9ybTogcm90YXRlKDBkZWcpO31cbiAgICB9XG5cbiAgICBAa2V5ZnJhbWVzIHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGUge1xuICAgICAgICAwJSwgNTAlLCAxMDAlIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgICAgIH1cbiAgICB9XG59XG5cbnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBtaW4td2lkdGg6IDhyZW07XG4gICAgdHJhbnNpdGlvbjogYWxsIDAuM3M7XG5cbiAgICAmIGJ1dHRvbiB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiAwIDRweCAxMnB4ICMwMDAwMDAyNjtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMnB4KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuc3Vic3RyYXRlLWxvYWRpbmcge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgICZbYXJpYS1kaXNhYmxlZD1cInRydWVcIl0ge1xuICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudFxuICAgICAgICB9XG4gICAgfVxufVxuXG4vKiBEaXNhYmxlIGFuaW1hdGlvbnMgYW5kIHRyYW5zaXRpb25zIGZvciB1c2VycyB3aG8gcHJlZmVyIHJlZHVjZWQgbW90aW9uICovXG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIHN1YnN0cmF0ZS1idXR0b24ge1xuICAgICAgICAmLnN1YnN0cmF0ZS1sb2FkaW5nIHtcbiAgICAgICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiBub25lO1xuXG4gICAgICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIC8qIFNob3cgYSBzdGF0aWMgaW5kaWNhdG9yIGluc3RlYWQgb2Ygc3Bpbm5pbmcgKi9cbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAuNTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBidXR0b24uc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgICAgICY6bm90KFtkaXNhYmxlZF0pIHtcbiAgICAgICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG59XG5cbjpyb290IHtcbiAgICAtLWRlZmF1bHQtY29sb3I6ICMzNjM5M2Q7XG59XG5cbmJ1dHRvbi5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICBjb2xvcjogdmFyKC0tZGVmYXVsdC1jb2xvcik7XG4gICAgcGFkZGluZzogMC41ZW0gMWVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgIH1cblxuICAgIC8qIEVuaGFuY2VkIGZvY3VzIHZpc2liaWxpdHkgKi9cbiAgICAmOmZvY3VzLCAmOmZvY3VzLXZpc2libGUge1xuICAgICAgICBvdXRsaW5lOiAycHggc29saWQgdmFyKC0tZGVmYXVsdC1jb2xvcik7XG4gICAgfVxuXG4gICAgJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpIHtcbiAgICAgICAgb3V0bGluZS1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgfVxuXG4gICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IC4ycztcbiAgICAgICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlO1xuICAgICAgICAgICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2U7XG4gICAgICAgIH1cbiAgICB9XG59Il19 */
+:is(substrate-button button, substrate-button a.btn).spinning:after {
+  content: "";
+  box-sizing: border-box;
+  background: none;
+  border-top: 2px solid #000;
+  border-right: 2px solid rgba(0, 0, 0, 0);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin: auto;
+  animation: .6s linear infinite spinner;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAErE;;GAEG;AACH,qBAAa,eAAgB,SAAQ,oBAAoB;IACrD,MAAM,CAAC,MAAM;IASb,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CA4BT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAIrE;;GAEG;AACH,qBAAa,eAAgB,SAAQ,oBAAoB;IACrD,MAAM,CAAC,MAAM;IAIb,iBAAiB,IAAI,IAAI;IAKzB,MAAM;CA+BT"}

package/dist/index.js

@@ -1,33 +1,30 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { html } from "./html.js";
+import { define } from "@substrate-system/web-component";
 import { SubstrateButton as SubstrateButtonLight } from "./client.js";
 class SubstrateButton extends SubstrateButtonLight {
   static {
     __name(this, "SubstrateButton");
   }
   static define() {
-    if (!("customElements" in window)) return;
-    return customElements.define(
-      SubstrateButton.TAG || "substrate-button",
-      SubstrateButton
-    );
+    define(SubstrateButton.TAG, SubstrateButton);
   }
   connectedCallback() {
     this.render();
+    this._setupKeyboardHandlers();
   }
   render() {
-    const {
-      type,
-      autofocus,
-      tabindex,
-      disabled
-    } = this;
+    const { type, tabindex } = this;
+    const disabled = this.hasAttribute("disabled");
+    const autofocus = this.hasAttribute("autofocus");
     const name = this.getAttribute("name");
     const ariaLabel = this.getAttribute("aria-label");
+    const spinning = this.getAttribute("spinning") !== null;
     const classes = [
       "substrate-button",
-      this.getAttribute("class")
+      this.getAttribute("class"),
+      spinning ? "spinning" : null
     ];
     const text = this.innerHTML;
     const btnProps = {
@@ -42,6 +39,7 @@ class SubstrateButton extends SubstrateButtonLight {
     this.innerHTML = html(btnProps, text);
   }
 }
+define("substrate-button", SubstrateButton);
 export {
   SubstrateButton
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\n/**\n * This is the full-version -- knows how to render itself in the browser.\n */\nexport class SubstrateButton extends SubstrateButtonLight {\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.TAG || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    connectedCallback ():void {\n        this.render()\n    }\n\n    render () {\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n        } = this\n        const name = this.getAttribute('name')\n        const ariaLabel = this.getAttribute('aria-label')\n\n        const classes:(string|null)[] = [\n            'substrate-button',\n            this.getAttribute('class')\n        ]\n        const text = this.innerHTML\n\n        const btnProps = {\n            classes: classes.filter(Boolean),\n            disabled,\n            autofocus,\n            tabindex,\n            type,\n            name,\n            ariaLabel,\n        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n"],
-  "mappings": ";;AAAA,SAAS,YAAY;AACrB,SAAS,mBAAmB,4BAA4B;AAKjD,MAAM,wBAAwB,qBAAqB;AAAA,EAN1D,OAM0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,QAAI,EAAE,oBAAoB,QAAS;AAEnC,WAAO,eAAe;AAAA,MAClB,gBAAgB,OAAO;AAAA,MACvB;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AACJ,UAAM,OAAO,KAAK,aAAa,MAAM;AACrC,UAAM,YAAY,KAAK,aAAa,YAAY;AAEhD,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,IAC7B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,YAAY,KAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
+  "sourcesContent": ["import { html } from './html.js'\nimport { define } from '@substrate-system/web-component'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('button')\n\n/**\n * This is the full-version -- knows how to render itself in the browser.\n */\nexport class SubstrateButton extends SubstrateButtonLight {\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    connectedCallback ():void {\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    render () {\n        const { type, tabindex } = this\n        // Read directly from host attributes: the inner button does not\n        // exist yet when render() first runs, so the getters (which\n        // read from the inner button) would return false.\n        const disabled = this.hasAttribute('disabled')\n        const autofocus = this.hasAttribute('autofocus')\n        const name = this.getAttribute('name')\n        const ariaLabel = this.getAttribute('aria-label')\n\n        const spinning = this.getAttribute('spinning') !== null\n\n        const classes:(string|null)[] = [\n            'substrate-button',\n            this.getAttribute('class'),\n            spinning ? 'spinning' : null\n        ]\n        const text = this.innerHTML\n\n        const btnProps = {\n            classes: classes.filter(Boolean),\n            disabled,\n            autofocus,\n            tabindex,\n            type,\n            name,\n            ariaLabel,\n        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n\ndefine('substrate-button', SubstrateButton)\n"],
+  "mappings": ";;AAAA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB,4BAA4B;AAOjD,MAAM,wBAAwB,qBAAqB;AAAA,EAT1D,OAS0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,WAAO,gBAAgB,KAAK,eAAe;AAAA,EAC/C;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AACZ,SAAK,uBAAuB;AAAA,EAChC;AAAA,EAEA,SAAU;AACN,UAAM,EAAE,MAAM,SAAS,IAAI;AAI3B,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,UAAM,YAAY,KAAK,aAAa,WAAW;AAC/C,UAAM,OAAO,KAAK,aAAa,MAAM;AACrC,UAAM,YAAY,KAAK,aAAa,YAAY;AAEhD,UAAM,WAAW,KAAK,aAAa,UAAU,MAAM;AAEnD,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,MACzB,WAAW,aAAa;AAAA,IAC5B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,YAAY,KAAK,UAAU,IAAI;AAAA,EACxC;AACJ;AAEA,OAAO,oBAAoB,eAAe;",
   "names": []
 }

package/dist/index.min.cjs

@@ -0,0 +1,2 @@
+"use strict";var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var l=(s,t)=>o(s,"name",{value:t,configurable:!0});var L=(s,t)=>{for(var n in t)o(s,n,{get:t[n],enumerable:!0})},H=(s,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of A(t))!x.call(s,e)&&e!==n&&o(s,e,{get:()=>t[e],enumerable:!(a=f(t,e))||a.enumerable});return s};var T=s=>H(o({},"__esModule",{value:!0}),s);var y={};L(y,{SubstrateButton:()=>i});module.exports=T(y);var u=require("./html.js"),r=require("@substrate-system/web-component"),b=require("./client.js");class i extends b.SubstrateButton{static{l(this,"SubstrateButton")}static define(){(0,r.define)(i.TAG,i)}connectedCallback(){this.render(),this._setupKeyboardHandlers()}render(){const{type:t,tabindex:n}=this,a=this.hasAttribute("disabled"),e=this.hasAttribute("autofocus"),c=this.getAttribute("name"),h=this.getAttribute("aria-label"),d=this.getAttribute("spinning")!==null,p=["substrate-button",this.getAttribute("class"),d?"spinning":null],g=this.innerHTML,m={classes:p.filter(Boolean),disabled:a,autofocus:e,tabindex:n,type:t,name:c,ariaLabel:h};this.innerHTML=(0,u.html)(m,g)}}(0,r.define)("substrate-button",i);
+//# sourceMappingURL=index.min.cjs.map

package/dist/index.min.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { html } from './html.js'\nimport { define } from '@substrate-system/web-component'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('button')\n\n/**\n * This is the full-version -- knows how to render itself in the browser.\n */\nexport class SubstrateButton extends SubstrateButtonLight {\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    connectedCallback ():void {\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    render () {\n        const { type, tabindex } = this\n        // Read directly from host attributes: the inner button does not\n        // exist yet when render() first runs, so the getters (which\n        // read from the inner button) would return false.\n        const disabled = this.hasAttribute('disabled')\n        const autofocus = this.hasAttribute('autofocus')\n        const name = this.getAttribute('name')\n        const ariaLabel = this.getAttribute('aria-label')\n\n        const spinning = this.getAttribute('spinning') !== null\n\n        const classes:(string|null)[] = [\n            'substrate-button',\n            this.getAttribute('class'),\n            spinning ? 'spinning' : null\n        ]\n        const text = this.innerHTML\n\n        const btnProps = {\n            classes: classes.filter(Boolean),\n            disabled,\n            autofocus,\n            tabindex,\n            type,\n            name,\n            ariaLabel,\n        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n\ndefine('substrate-button', SubstrateButton)\n"],
+  "mappings": "4dAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAqB,qBACrBC,EAAuB,2CACvBC,EAAwD,uBAOjD,MAAMC,UAAwB,EAAAC,eAAqB,CAT1D,MAS0D,CAAAC,EAAA,wBACtD,OAAO,QAAU,IACb,UAAOF,EAAgB,IAAKA,CAAe,CAC/C,CAEA,mBAA0B,CACtB,KAAK,OAAO,EACZ,KAAK,uBAAuB,CAChC,CAEA,QAAU,CACN,KAAM,CAAE,KAAAG,EAAM,SAAAC,CAAS,EAAI,KAIrBC,EAAW,KAAK,aAAa,UAAU,EACvCC,EAAY,KAAK,aAAa,WAAW,EACzCC,EAAO,KAAK,aAAa,MAAM,EAC/BC,EAAY,KAAK,aAAa,YAAY,EAE1CC,EAAW,KAAK,aAAa,UAAU,IAAM,KAE7CC,EAA0B,CAC5B,mBACA,KAAK,aAAa,OAAO,EACzBD,EAAW,WAAa,IAC5B,EACME,EAAO,KAAK,UAEZC,EAAW,CACb,QAASF,EAAQ,OAAO,OAAO,EAC/B,SAAAL,EACA,UAAAC,EACA,SAAAF,EACA,KAAAD,EACA,KAAAI,EACA,UAAAC,CACJ,EAEA,KAAK,aAAY,QAAKI,EAAUD,CAAI,CACxC,CACJ,IAEA,UAAO,mBAAoBX,CAAe",
+  "names": ["index_exports", "__export", "SubstrateButton", "__toCommonJS", "import_html", "import_web_component", "import_client", "SubstrateButton", "SubstrateButtonLight", "__name", "type", "tabindex", "disabled", "autofocus", "name", "ariaLabel", "spinning", "classes", "text", "btnProps"]
+}

package/dist/index.min.css

@@ -1,2 +1 @@
-@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner{to{transform:rotate(1turn)}}@keyframes substrate-button-activate{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(0deg)}}@keyframes spinner{to{transform:rotate(0deg)}}@keyframes substrate-button-activate{0%,50%,to{transform:scale(1)}}}substrate-button{display:inline-block;min-width:8rem;transition:all .3s;user-select:none}substrate-button button{transition:all .3s ease}:is(substrate-button button):hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}substrate-button.substrate-loading{pointer-events:none}substrate-button.substrate-loading button{color:transparent;pointer-events:none}:is(substrate-button.substrate-loading button):hover{color:transparent}:is(substrate-button.substrate-loading button):after{animation:spinner .6s linear infinite;background:transparent;border-radius:50%;border-right:2px solid transparent;border-top:2px solid #000;box-sizing:border-box;content:"";height:16px;inset:0;margin:auto;position:absolute;width:16px}substrate-button[aria-disabled=true],substrate-button[aria-disabled=true] button{background-color:transparent;user-select:none}@media (prefers-reduced-motion:reduce){substrate-button.substrate-loading button{transition:none}:is(substrate-button.substrate-loading button):after{animation:none;border:2px solid #000;opacity:.5}button.substrate-button:not([disabled]):active{animation:none}}:root{--default-color:#36393d}button.substrate-button{appearance:none;background-color:var(--substrate-button-background,transparent);border:1px solid #000;color:var(--default-color);outline:2px solid transparent;padding:.5em 1em;position:relative}button.substrate-button:disabled{opacity:.4;pointer-events:none}button.substrate-button:focus,button.substrate-button:focus-visible{outline:2px solid var(--default-color)}button.substrate-button:focus:not(:focus-visible){outline-color:transparent}button.substrate-button:not([disabled]):active{animation-duration:.2s;animation-name:substrate-button-activate;transition-timing-function:ease}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQ0ksR0FDSSxzQkFDSixDQUVBLEdBQ0ksdUJBQ0osQ0FDSixDQUVBLG1CQUNJLEdBQUksdUJBQTBCLENBQ2xDLENBRUEscUNBQ0ksR0FDSSxrQkFDSixDQUVBLElBQ0ksb0JBQ0osQ0FFQSxHQUNJLGtCQUNKLENBQ0osQ0FHQSx1Q0FDSSxnQkFDSSxHQUNJLHNCQUNKLENBRUEsR0FDSSxzQkFDSixDQUNKLENBRUEsbUJBQ0ksR0FBSSxzQkFBd0IsQ0FDaEMsQ0FFQSxxQ0FDSSxVQUNJLGtCQUNKLENBQ0osQ0FDSixDQUVBLGlCQUNJLG9CQUFxQixDQUVyQixjQUFlLENBQ2Ysa0JBQW9CLENBRnBCLGdCQWtESixDQTlDSSx3QkFDSSx1QkFNSixDQUpJLG1DQUNJLCtCQUFnQyxDQUNoQywwQkFDSixDQUdKLG1DQUNJLG1CQXlCSixDQXZCSSwwQ0FDSSxpQkFBa0IsQ0FDbEIsbUJBb0JKLENBbEJJLHFEQUNJLGlCQUNKLENBRUEscURBWUkscUNBQXVDLENBVnZDLHNCQUF1QixDQU92QixpQkFBa0IsQ0FFbEIsa0NBQW1DLENBRG5DLHlCQUEyQixDQVAzQixxQkFBc0IsQ0FGdEIsVUFBVyxDQUtYLFdBQVksQ0FDWixPQUFRLENBQ1IsV0FBWSxDQUpaLGlCQUFrQixDQUNsQixVQVFKLENBUUosaUZBRUksNEJBQTRCLENBRDVCLGdCQUVKLENBS1IsdUNBR1ksMENBQ0ksZUFRSixDQU5JLHFEQUNJLGNBQWUsQ0FFZixxQkFBdUIsQ0FDdkIsVUFDSixDQU9KLCtDQUNJLGNBQ0osQ0FHWixDQUVBLE1BQ0ksdUJBQ0osQ0FFQSx3QkFNSSxlQUFnQixDQURoQiwrREFBaUUsQ0FKakUscUJBQXVCLENBQ3ZCLDBCQUEyQixDQUszQiw2QkFBOEIsQ0FKOUIsZ0JBQWtCLENBQ2xCLGlCQTBCSixDQXJCSSxpQ0FFSSxVQUFZLENBRFosbUJBRUosQ0FHQSxvRUFDSSxzQ0FDSixDQUVBLGtEQUNJLHlCQUNKLENBR0ksK0NBQ0ksc0JBQXVCLENBQ3ZCLHdDQUF5QyxDQUN6QywrQkFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG4vKiBSZXNwZWN0IHVzZXIncyBtb3Rpb24gcHJlZmVyZW5jZXMgKi9cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gICAgQGtleWZyYW1lcyBzcGluIHtcbiAgICAgICAgZnJvbSB7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRvIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICAgICAgdG8ge3RyYW5zZm9ybTogcm90YXRlKDBkZWcpO31cbiAgICB9XG5cbiAgICBAa2V5ZnJhbWVzIHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGUge1xuICAgICAgICAwJSwgNTAlLCAxMDAlIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgICAgIH1cbiAgICB9XG59XG5cbnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBtaW4td2lkdGg6IDhyZW07XG4gICAgdHJhbnNpdGlvbjogYWxsIDAuM3M7XG5cbiAgICAmIGJ1dHRvbiB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiAwIDRweCAxMnB4ICMwMDAwMDAyNjtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMnB4KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuc3Vic3RyYXRlLWxvYWRpbmcge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgICZbYXJpYS1kaXNhYmxlZD1cInRydWVcIl0ge1xuICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudFxuICAgICAgICB9XG4gICAgfVxufVxuXG4vKiBEaXNhYmxlIGFuaW1hdGlvbnMgYW5kIHRyYW5zaXRpb25zIGZvciB1c2VycyB3aG8gcHJlZmVyIHJlZHVjZWQgbW90aW9uICovXG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIHN1YnN0cmF0ZS1idXR0b24ge1xuICAgICAgICAmLnN1YnN0cmF0ZS1sb2FkaW5nIHtcbiAgICAgICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiBub25lO1xuXG4gICAgICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIC8qIFNob3cgYSBzdGF0aWMgaW5kaWNhdG9yIGluc3RlYWQgb2Ygc3Bpbm5pbmcgKi9cbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAuNTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBidXR0b24uc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgICAgICY6bm90KFtkaXNhYmxlZF0pIHtcbiAgICAgICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG59XG5cbjpyb290IHtcbiAgICAtLWRlZmF1bHQtY29sb3I6ICMzNjM5M2Q7XG59XG5cbmJ1dHRvbi5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICBjb2xvcjogdmFyKC0tZGVmYXVsdC1jb2xvcik7XG4gICAgcGFkZGluZzogMC41ZW0gMWVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgIH1cblxuICAgIC8qIEVuaGFuY2VkIGZvY3VzIHZpc2liaWxpdHkgKi9cbiAgICAmOmZvY3VzLCAmOmZvY3VzLXZpc2libGUge1xuICAgICAgICBvdXRsaW5lOiAycHggc29saWQgdmFyKC0tZGVmYXVsdC1jb2xvcik7XG4gICAgfVxuXG4gICAgJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpIHtcbiAgICAgICAgb3V0bGluZS1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgfVxuXG4gICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IC4ycztcbiAgICAgICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlO1xuICAgICAgICAgICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2U7XG4gICAgICAgIH1cbiAgICB9XG59Il19 */
+@keyframes spinner{to{transform:rotate(360deg)}}substrate-button button,substrate-button a.btn{color:#000;cursor:pointer;background:0 0;border:1px solid;outline:1px solid transparent;padding:.5rem 2rem;font-size:1rem;text-decoration:none;transition:all .2s;transform:translateY(1px)}:is(substrate-button button,substrate-button a.btn):focus{outline:1px solid}:is(substrate-button button,substrate-button a.btn):hover{outline:1px solid;transform:translateY(0)}:is(substrate-button button,substrate-button a.btn):active{transform:translateY(2px)}:is(substrate-button button,substrate-button a.btn):disabled{cursor:not-allowed;opacity:.4}:is(substrate-button button,substrate-button a.btn):disabled:hover{outline-color:transparent;transform:translateY(1px)}:is(substrate-button button,substrate-button a.btn).spinning{opacity:.4}:is(substrate-button button,substrate-button a.btn).spinning .btn-content{visibility:hidden}:is(substrate-button button,substrate-button a.btn).spinning:hover{cursor:initial}:is(substrate-button button,substrate-button a.btn).spinning:after{content:"";box-sizing:border-box;background:0 0;border-top:2px solid #000;border-right:2px solid transparent;border-radius:50%;width:16px;height:16px;margin:auto;animation:.6s linear infinite spinner;position:absolute;top:0;bottom:0;left:0;right:0}

package/dist/index.min.js

@@ -1,6 +1,6 @@
-var m=Object.defineProperty;var i=(s,t)=>m(s,"name",{value:t,configurable:!0});function g(s,t){let{type:e,autofocus:r,tabindex:n,disabled:o,classes:d,name:u,ariaLabel:a}=s,b=new Set(d);b.add("substrate-button");let c=Array.from(b),h=[c.length?`class="${c.filter(Boolean).join(" ")}"`:"",o?"disabled":"",r?"autofocus":"",e?`type="${e}"`:"",u?`name=${u}`:"",n?`tabindex="${n}"`:'tabindex="0"','role="button"',a?`aria-label="${a}"`:"",'aria-live="polite"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${o?" disabled":""}>
-            <button ${h}>${t}</button>
-        </substrate-button>`:`<button ${h}>
-            ${t}
-        </button>`}i(g,"html");var l=class s extends HTMLElement{static{i(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}get type(){return this.button?.getAttribute("type")}get tabindex(){let t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?this.setAttribute("spinning",""):this.removeAttribute("spinning")}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){t?this._setAttribute("autofocus",t):this._removeAttribute("autofocus")}_setAttribute(t,e){if(e===!1)this._removeAttribute(t),this.button?.removeAttribute(t);else{if(e===!0)return this.button?.setAttribute(t,"");if(e===null)return this._removeAttribute(t);this.button?.setAttribute(t,e)}}_removeAttribute(t){this.removeAttribute(t),this.button?.removeAttribute(t)}get button(){return this.querySelector("button")}handleChange_autofocus(t,e){this._setAttribute("autofocus",e)}handleChange_disabled(t,e){this.disabled=e!==null,e===null?this.button?.removeAttribute("disabled"):this.button?.setAttribute("disabled",""+e)}handleChange_spinning(t,e){e!==null?(this.classList.add("substrate-loading"),this.button?.setAttribute("aria-busy","true")):(this.classList.remove("substrate-loading"),this.button?.setAttribute("aria-busy","false"))}attributeChangedCallback(t,e,r){let n=this[`handleChange_${t}`];n&&n.call(this,e,r)}connectedCallback(){this.render(),this._setupKeyboardHandlers()}_setupKeyboardHandlers(){this.button?.addEventListener("keydown",t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.button?.click())})}static define(){return p(s.TAG,s)}render(){}};function A(s){return document.createElement(s).constructor!==window.HTMLElement}i(A,"isRegistered");function p(s,t){window&&"customElements"in window&&(A(s)||window.customElements.define(s,t))}i(p,"define");var f=class s extends l{static{i(this,"SubstrateButton")}static define(){if("customElements"in window)return customElements.define(s.TAG||"substrate-button",s)}connectedCallback(){this.render()}render(){let{type:t,autofocus:e,tabindex:r,disabled:n}=this,o=this.getAttribute("name"),d=this.getAttribute("aria-label"),u=["substrate-button",this.getAttribute("class")],a=this.innerHTML,b={classes:u.filter(Boolean),disabled:n,autofocus:e,tabindex:r,type:t,name:o,ariaLabel:d};this.innerHTML=g(b,a)}};export{f as SubstrateButton};
+var T=Object.defineProperty;var s=(i,t)=>T(i,"name",{value:t,configurable:!0});function L(i,t){let{type:e,autofocus:n,tabindex:r,disabled:u,classes:d,name:a,ariaLabel:l}=i,c=new Set(d);c.add("substrate-button btn");let h=Array.from(c),v=[h.length?`class="${h.filter(Boolean).join(" ")}"`:"",u?"disabled":"",n?"autofocus":"",e?`type="${e}"`:"",a?`name=${a}`:"",r?`tabindex="${r}"`:'tabindex="0"','role="button"',l?`aria-label="${l}"`:"",'aria-live="polite"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${u?" disabled":""}>
+            <button ${v}><span class="btn-content">${t}</span></button>
+        </substrate-button>`:`<button ${v}>
+            <span class="btn-content">${t}</span>
+        </button>`}s(L,"html");var $=Object.defineProperty,W=s((i,t)=>$(i,"name",{value:t,configurable:!0}),"__name");function y(i){return Object.keys(i).reduce((t,e)=>{let n=i[e];return n?typeof n=="boolean"?n?(t+` ${e}`).trim():t:Array.isArray(n)?t+` ${e}="${n.join(" ")}"`:(t+` ${e}="${n}"`).trim():t},"")}s(y,"toAttributes");W(y,"toAttributes");var x=Object.defineProperty,g=s((i,t)=>x(i,"name",{value:t,configurable:!0}),"__name");function _(i){return document.createElement(i).constructor!==window.HTMLElement}s(_,"isRegistered");g(_,"isRegistered");function C(i,t){window&&"customElements"in window&&(_(i)||window.customElements.define(i,t))}s(C,"define");g(C,"define");var j=document.querySelector.bind(document),N=document.querySelectorAll.bind(document);function p(i,t){return i.matches||(i=i.parentElement),i.matches(t)?i:i.closest(t)}s(p,"match");g(p,"match");var G=Object.defineProperty,b=s((i,t)=>G(i,"name",{value:t,configurable:!0}),"__name"),f=class i extends window.HTMLElement{static{s(this,"WebComponent")}static{b(this,"WebComponent")}static TAG="";TAG="";static match(t){return p(t,this.TAG)}_globalWildcardListeners=new Set;_namespacedWildcardListeners=new Set;static create(t){let e=class extends i{static{s(this,"CreatedClass")}static{b(this,"CreatedClass")}static TAG=t;TAG=t;render(){throw new Error("`render` should be implemented by children")}};return e.define=function(){return i.define.call(this)},e.event=function(n){return i.event.call(this,n)},e}static define(){o(this.TAG,this)}async attributeChangedCallback(t,e,n){let r=this[`handleChange_${t}`];r&&await r.call(this,e,n)}addEventListener(t,e,n){t===i.event.call(this,"*")?this._namespacedWildcardListeners.add({listener:e,options:n}):t==="*"?e&&this._globalWildcardListeners.add({listener:e,options:n}):super.addEventListener(t,e,n)}_notifyNamespacedWildcardListeners(t){if(this._namespacedWildcardListeners.size===0)return;let e=this.TAG;!e||!t.type.startsWith(`${e}:`)||this._namespacedWildcardListeners.forEach(({listener:n})=>{try{typeof n=="function"?n.call(this,t):n&&typeof n.handleEvent=="function"&&n.handleEvent(t)}catch(r){console.error("Error in namespaced wildcard event listener:",r)}})}_notifyGlobalWildcardListeners(t){this._globalWildcardListeners.size!==0&&this._globalWildcardListeners.forEach(({listener:e})=>{try{typeof e=="function"?e.call(this,t):e&&typeof e.handleEvent=="function"&&e.handleEvent(t)}catch(n){console.error("Error in global wildcard event listener:",n)}})}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return E(this.TAG,t)}emit(t,e={}){if(t==="*")throw new Error('Do not emit the literal "*"');let{bubbles:n=!0,cancelable:r=!0,detail:u}=e,d=`${this.TAG}:${t}`,a=new CustomEvent(d,{bubbles:n,cancelable:r,detail:u}),l=this.dispatchEvent(a);return this._notifyNamespacedWildcardListeners(a),l}dispatchEvent(t){let e=super.dispatchEvent(t);return this._notifyGlobalWildcardListeners(t),e}dispatch(t,e={}){let n=new CustomEvent(t,{bubbles:e.bubbles===void 0?!0:e.bubbles,cancelable:e.cancelable===void 0?!0:e.cancelable,detail:e.detail});return this.dispatchEvent(n)}on(t,e,n){let r=i.event.call(this,t);this.addEventListener(r,e,n)}removeEventListener(t,e,n){if(t===i.event.call(this,"*")){if(e&&this._namespacedWildcardListeners){for(let r of this._namespacedWildcardListeners)if(r.listener===e){this._namespacedWildcardListeners.delete(r);break}}}else if(t==="*"){if(e&&this._globalWildcardListeners){for(let r of this._globalWildcardListeners)if(r.listener===e){this._globalWildcardListeners.delete(r);break}}}else super.removeEventListener(t,e,n)}};function E(i,t){return`${i}:${t}`}s(E,"eventName");b(E,"eventName");function w(i){return document.createElement(i).constructor!==window.HTMLElement}s(w,"isRegistered");b(w,"isRegistered");function o(i,t){window&&"customElements"in window&&(w(i)||window.customElements.define(i,t))}s(o,"define");b(o,"define");var m=class i extends f.create("substrate-button"){static{s(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;static define(){o(i.TAG,i)}constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){this.hasAttribute("disabled")!==t&&this.toggleAttribute("disabled",t),t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this.button?.removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}get type(){return this.button?.getAttribute("type")}get tabindex(){let t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?(this.classList.add("spinning"),this.button?.classList.add("spinning"),this.button?.setAttribute("disabled",""),this.setAttribute("spinning","")):(this.classList.remove("spinning"),this.button?.classList.remove("spinning"),this.button?.removeAttribute("disabled"),this.removeAttribute("spinning"))}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){this.hasAttribute("autofocus")!==t&&this.toggleAttribute("autofocus",t),this.button?.toggleAttribute("autofocus",t)}_setAttribute(t,e){if(e===!1)this._removeAttribute(t),this.button?.removeAttribute(t);else{if(e===!0)return this.button?.setAttribute(t,"");if(e===null)return this._removeAttribute(t);this.button?.setAttribute(t,e)}}_removeAttribute(t){this.removeAttribute(t),this.button?.removeAttribute(t)}get button(){return this.querySelector("button")}handleChange_autofocus(t,e){this.button?.toggleAttribute("autofocus",e!==null)}handleChange_disabled(t,e){e!==null?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this.button?.removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}handleChange_spinning(t,e){e!==null?(this.classList.add("spinning"),this.button?.classList.add("spinning"),this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-busy","true")):(this.classList.remove("spinning"),this.button?.classList.remove("spinning"),this.button?.removeAttribute("disabled"),this.button?.setAttribute("aria-busy","false"))}connectedCallback(){this.render(),this._setupKeyboardHandlers()}_setupKeyboardHandlers(){this.button?.addEventListener("keydown",t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.button?.click())})}render(){}};var A=class i extends m{static{s(this,"SubstrateButton")}static define(){o(i.TAG,i)}connectedCallback(){this.render(),this._setupKeyboardHandlers()}render(){let{type:t,tabindex:e}=this,n=this.hasAttribute("disabled"),r=this.hasAttribute("autofocus"),u=this.getAttribute("name"),d=this.getAttribute("aria-label"),a=this.getAttribute("spinning")!==null,l=["substrate-button",this.getAttribute("class"),a?"spinning":null],c=this.innerHTML,h={classes:l.filter(Boolean),disabled:n,autofocus:r,tabindex:e,type:t,name:u,ariaLabel:d};this.innerHTML=L(h,c)}};o("substrate-button",A);export{A as SubstrateButton};
 //# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/html.ts", "../src/client.ts", "../src/index.ts"],
-  "sourcesContent": ["export type Attrs = {\n    type:string|null;\n    autofocus:boolean;\n    tabindex:string|number;\n    disabled:boolean;\n    name:string|null;\n    classes:string[]|Set<string>;\n    ariaLabel:string|null;\n}\n\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name,\n        ariaLabel\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        name ? `name=${name}` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"',\n        ariaLabel ? `aria-label=\"${ariaLabel}\"` : '',\n        'aria-live=\"polite\"'\n    ]).filter(Boolean).join(' ')\n\n    // rendering in node?\n    return typeof window === 'undefined' ?\n        `<substrate-button${disabled ? ' disabled' : ''}>\n            <button ${btnProps}>${textContent}</button>\n        </substrate-button>` :\n        `<button ${btnProps}>\n            ${textContent}\n        </button>`\n}\n", "// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers + server-side rendering.\n */\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        if (!disabledValue) {\n            this._removeAttribute('disabled')\n            this.button?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    get type ():string|null|undefined {\n        return this.button?.getAttribute('type')\n    }\n\n    get tabindex ():number {\n        const i = this.button?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get spinning ():boolean {\n        return this._isSpinning\n    }\n\n    set spinning (value:boolean) {\n        if (value) this.setAttribute('spinning', '')\n        else this.removeAttribute('spinning')\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        if (value) {\n            this._setAttribute('autofocus', value)\n        } else {\n            this._removeAttribute('autofocus')\n        }\n    }\n\n    /**\n     * Set attributes on the internal button element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (value === false) {\n            // false means remove the attribute\n            this._removeAttribute(name)\n            this.button?.removeAttribute(name)\n        } else {\n            if (value === true) {\n                // true means set the attribute with no value\n                return this.button?.setAttribute(name, '')\n            }\n\n            if (value === null) {\n                // null means remove\n                return this._removeAttribute(name)\n            }\n\n            // else, set value to a string\n            this.button?.setAttribute(name, value)\n        }\n    }\n\n    /**\n     * Remove from `this` and also button child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.button?.removeAttribute(name)\n    }\n\n    get button ():HTMLButtonElement|null {\n        return this.querySelector('button')\n    }\n\n    /**\n     * Handle 'autofocus' attribute changes\n     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n     *\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    handleChange_autofocus (_oldValue:string, newValue:string) {\n        this._setAttribute('autofocus', newValue)\n    }\n\n    handleChange_disabled (_old, newValue:boolean|string) {\n        this.disabled = (newValue !== null)\n        if (newValue === null) this.button?.removeAttribute('disabled')\n        else this.button?.setAttribute('disabled', '' + newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n            this.button?.setAttribute('aria-busy', 'true')\n        } else {\n            this.classList.remove('substrate-loading')\n            this.button?.setAttribute('aria-busy', 'false')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    _setupKeyboardHandlers () {\n        // Ensure keyboard accessibility - Space and Enter should trigger click\n        this.button?.addEventListener('keydown', (e:KeyboardEvent) => {\n            if (e.key === ' ' || e.key === 'Enter') {\n                e.preventDefault()\n                this.button?.click()\n            }\n        })\n    }\n\n    static define ():void {\n        return define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    render () {\n        // noop\n    }\n}\n\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor):void {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n", "import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n\n/**\n * This is the full-version -- knows how to render itself in the browser.\n */\nexport class SubstrateButton extends SubstrateButtonLight {\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.TAG || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    connectedCallback ():void {\n        this.render()\n    }\n\n    render () {\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n        } = this\n        const name = this.getAttribute('name')\n        const ariaLabel = this.getAttribute('aria-label')\n\n        const classes:(string|null)[] = [\n            'substrate-button',\n            this.getAttribute('class')\n        ]\n        const text = this.innerHTML\n\n        const btnProps = {\n            classes: classes.filter(Boolean),\n            disabled,\n            autofocus,\n            tabindex,\n            type,\n            name,\n            ariaLabel,\n        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n"],
-  "mappings": "+EAUO,SAASA,EAAMC,EAAsBC,EAAoB,CAC5D,GAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,EACA,UAAAC,CACJ,EAAIR,EAEES,EAAW,IAAI,IAAIH,CAAO,EAChCG,EAAS,IAAI,kBAAkB,EAC/B,IAAMC,EAAM,MAAM,KAAKD,CAAQ,EAEzBE,EAAY,CACdD,EAAI,OAAS,UAAUA,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,IAAM,GAC1DL,EAAW,WAAa,GACxBF,EAAY,YAAc,GAC1BD,EAAO,SAASA,CAAI,IAAM,GAC1BK,EAAO,QAAQA,CAAI,GAAK,GACxBH,EAAW,aAAaA,CAAQ,IAAM,eACtC,gBACAI,EAAY,eAAeA,CAAS,IAAM,GAC1C,oBACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG,EAG3B,OAAO,OAAO,OAAW,IACrB,oBAAoBH,EAAW,YAAc,EAAE;AAAA,sBACjCM,CAAQ,IAAIV,CAAW;AAAA,6BAErC,WAAWU,CAAQ;AAAA,cACbV,CAAW;AAAA,kBAEzB,CAnCgBW,EAAAb,EAAA,QCAT,IAAMc,EAAN,MAAMC,UAAwB,WAAY,CAVjD,MAUiD,CAAAC,EAAA,wBAE7C,OAAO,mBAAqB,CAAC,YAAa,WAAY,UAAU,EAChE,OAAO,IAAM,mBACb,YAEA,aAAe,CACX,MAAM,EACW,KAAK,aAAa,UAAU,IAC5B,MACb,WAAW,IAAM,CAEb,KAAK,SAAW,EACpB,EAAG,CAAC,EAER,KAAK,UAAa,KAAK,aAAa,WAAW,IAAM,KACrD,KAAK,YAAe,KAAK,aAAa,UAAU,IAAM,IAC1D,CAEA,IAAI,MAAuC,CACvC,OAAO,KAAK,QAAQ,IACxB,CAEA,IAAI,UAAoB,CACpB,MAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,UAAU,CAClD,CAEA,IAAI,SAAUC,EAAuB,CAC5BA,GAID,KAAK,QAAQ,aAAa,WAAY,EAAE,EACxC,KAAK,QAAQ,aAAa,gBAAiB,MAAM,IAJjD,KAAK,iBAAiB,UAAU,EAChC,KAAK,QAAQ,aAAa,gBAAiB,OAAO,EAK1D,CAEA,IAAI,MAA8B,CAC9B,OAAO,KAAK,QAAQ,aAAa,MAAM,CAC3C,CAEA,IAAI,UAAmB,CACnB,IAAMC,EAAI,KAAK,QAAQ,aAAa,UAAU,EAC9C,OAAKA,EACE,SAASA,CAAC,EADF,CAEnB,CAEA,IAAI,UAAoB,CACpB,OAAO,KAAK,WAChB,CAEA,IAAI,SAAUC,EAAe,CACrBA,EAAO,KAAK,aAAa,WAAY,EAAE,EACtC,KAAK,gBAAgB,UAAU,CACxC,CAEA,IAAI,KAAMA,EAAc,CACpB,KAAK,cAAc,OAAQA,CAAK,CACpC,CAEA,IAAI,WAAqB,CACrB,MAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,WAAW,CACnD,CAEA,IAAI,UAAWA,EAAe,CACtBA,EACA,KAAK,cAAc,YAAaA,CAAK,EAErC,KAAK,iBAAiB,WAAW,CAEzC,CAKA,cAAeC,EAAaD,EAAgC,CACxD,GAAIA,IAAU,GAEV,KAAK,iBAAiBC,CAAI,EAC1B,KAAK,QAAQ,gBAAgBA,CAAI,MAC9B,CACH,GAAID,IAAU,GAEV,OAAO,KAAK,QAAQ,aAAaC,EAAM,EAAE,EAG7C,GAAID,IAAU,KAEV,OAAO,KAAK,iBAAiBC,CAAI,EAIrC,KAAK,QAAQ,aAAaA,EAAMD,CAAK,CACzC,CACJ,CAKA,iBAAkBC,EAAa,CAC3B,KAAK,gBAAgBA,CAAI,EACzB,KAAK,QAAQ,gBAAgBA,CAAI,CACrC,CAEA,IAAI,QAAiC,CACjC,OAAO,KAAK,cAAc,QAAQ,CACtC,CASA,uBAAwBC,EAAkBC,EAAiB,CACvD,KAAK,cAAc,YAAaA,CAAQ,CAC5C,CAEA,sBAAuBC,EAAMD,EAAyB,CAClD,KAAK,SAAYA,IAAa,KAC1BA,IAAa,KAAM,KAAK,QAAQ,gBAAgB,UAAU,EACzD,KAAK,QAAQ,aAAa,WAAY,GAAKA,CAAQ,CAC5D,CAEA,sBAAuBE,EAAGF,EAAkB,CACpCA,IAAa,MACb,KAAK,UAAU,IAAI,mBAAmB,EACtC,KAAK,QAAQ,aAAa,YAAa,MAAM,IAE7C,KAAK,UAAU,OAAO,mBAAmB,EACzC,KAAK,QAAQ,aAAa,YAAa,OAAO,EAEtD,CAYA,yBAA0BF,EAAaK,EAAiBH,EAAiB,CACrE,IAAMI,EAAU,KAAK,gBAAgBN,CAAI,EAAE,EAC1CM,GAAWA,EAAQ,KAAK,KAAMD,EAAUH,CAAQ,CACrD,CAEA,mBAAqB,CAEjB,KAAK,OAAO,EACZ,KAAK,uBAAuB,CAChC,CAEA,wBAA0B,CAEtB,KAAK,QAAQ,iBAAiB,UAAYK,GAAoB,EACtDA,EAAE,MAAQ,KAAOA,EAAE,MAAQ,WAC3BA,EAAE,eAAe,EACjB,KAAK,QAAQ,MAAM,EAE3B,CAAC,CACL,CAEA,OAAO,QAAe,CAClB,OAAOC,EAAOb,EAAgB,IAAKA,CAAe,CACtD,CAEA,QAAU,CAEV,CACJ,EAEO,SAASc,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBd,EAAAa,EAAA,gBAIT,SAASD,EAAQR,EAAaW,EAAuC,CACnE,QACC,mBAAoB,SAErBF,EAAaT,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMW,CAAO,EAElD,CAPgBf,EAAAY,EAAA,UCvLT,IAAMI,EAAN,MAAMC,UAAwBD,CAAqB,CAN1D,MAM0D,CAAAE,EAAA,wBACtD,OAAO,QAAU,CACb,GAAM,mBAAoB,OAE1B,OAAO,eAAe,OAClBD,EAAgB,KAAO,mBACvBA,CACJ,CACJ,CAEA,mBAA0B,CACtB,KAAK,OAAO,CAChB,CAEA,QAAU,CACN,GAAM,CACF,KAAAE,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,CACJ,EAAI,KACEC,EAAO,KAAK,aAAa,MAAM,EAC/BC,EAAY,KAAK,aAAa,YAAY,EAE1CC,EAA0B,CAC5B,mBACA,KAAK,aAAa,OAAO,CAC7B,EACMC,EAAO,KAAK,UAEZC,EAAW,CACb,QAASF,EAAQ,OAAO,OAAO,EAC/B,SAAAH,EACA,UAAAF,EACA,SAAAC,EACA,KAAAF,EACA,KAAAI,EACA,UAAAC,CACJ,EAEA,KAAK,UAAYI,EAAKD,EAAUD,CAAI,CACxC,CACJ",
-  "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "ariaLabel", "_classes", "arr", "btnProps", "__name", "SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "e", "define", "isRegistered", "elName", "element", "SubstrateButton", "_SubstrateButton", "__name", "type", "autofocus", "tabindex", "disabled", "name", "ariaLabel", "classes", "text", "btnProps", "html"]
+  "sources": ["../src/html.ts", "../node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/web-component/src/util.ts", "../node_modules/@substrate-system/web-component/src/index.ts", "../src/client.ts", "../src/index.ts"],
+  "sourcesContent": ["export type Attrs = {\n    type:string|null;\n    autofocus:boolean;\n    tabindex:string|number;\n    disabled:boolean;\n    name:string|null;\n    classes:string[]|Set<string>;\n    ariaLabel:string|null;\n}\n\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name,\n        ariaLabel\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button btn')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        name ? `name=${name}` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"',\n        ariaLabel ? `aria-label=\"${ariaLabel}\"` : '',\n        'aria-live=\"polite\"'\n    ]).filter(Boolean).join(' ')\n\n    // rendering in node?\n    return typeof window === 'undefined' ?\n        `<substrate-button${disabled ? ' disabled' : ''}>\n            <button ${btnProps}><span class=\"btn-content\">${textContent}</span></button>\n        </substrate-button>` :\n        `<button ${btnProps}>\n            <span class=\"btn-content\">${textContent}</span>\n        </button>`\n}\n", "export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "import { match as _match } from './util.js'\n\ninterface WildcardListenerEntry {\n    listener:EventListenerOrEventListenerObject\n    options?:boolean|AddEventListenerOptions\n}\n\nexport abstract class WebComponent extends window.HTMLElement {\n    static TAG:string = ''\n    TAG:string = ''\n\n    static match (el:HTMLElement):HTMLElement|null {\n        return _match(el, this.TAG)\n    }\n\n    /**\n     * Store global wildcard listeners (listen to all events)\n     * Triggered by ALL events dispatched through this element\n     * @private\n     */\n    private _globalWildcardListeners:Set<WildcardListenerEntry> = new Set()\n\n    /**\n     * Store namespaced wildcard listeners (listen to 'component-name:*')\n     * Triggered by events from emit() that match this component's namespace\n     * @private\n     */\n    private _namespacedWildcardListeners:Set<WildcardListenerEntry> = new Set()\n\n    static create (elementName:string):typeof WebComponent & {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n        define: typeof WebComponent.define;\n        event: typeof WebComponent.event;\n    } {\n        const CreatedClass = class extends WebComponent {\n            static TAG = elementName\n            TAG = elementName\n            render () {\n                throw new Error('`render` should be implemented by children')\n            }\n        }\n\n        // Copy static methods with proper binding\n        CreatedClass.define = function () {\n            return WebComponent.define.call(this)\n        }\n        CreatedClass.event = function (evType:string) {\n            return WebComponent.event.call(this, evType)\n        }\n\n        return CreatedClass\n    }\n\n    static define<T extends {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n    }>(this:T) {\n        define(this.TAG, this)\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Depends on `static observedAttributes`.\n     *\n     * Should name methods like `handleChange_disabled`.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ):Promise<void> {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            await handler.call(this, oldValue, newValue)\n        }\n    }\n\n    /**\n     * Enhanced addEventListener that supports wildcards:\n     * - Component.event('*') - Listen to all namespaced events for this\n     *   component (e.g., 'my-component:*')\n     * - '*' - Listen to ALL events (namespaced and non-namespaced, including\n     *   normal DOM events)\n     *\n     * @param type - Event type, Component.event('*') for namespaced wildcard,\n     *   or '*' for global wildcard\n     * @param listener - Event listener function or object\n     * @param options - Event listener options\n     */\n    addEventListener (\n        type:string,\n        listener:EventListenerOrEventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ): void {\n        if (type === WebComponent.event.call(this, '*')) {\n            // Handle namespaced wildcard listener (component-name:*)\n            this._namespacedWildcardListeners.add({ listener, options })\n        } else if (type === '*') {\n            // Handle global wildcard listener (all events)\n            if (listener) {\n                this._globalWildcardListeners.add({ listener, options })\n            }\n        } else {\n            // Normal event listener - delegate to native implementation\n            super.addEventListener(type, listener, options)\n        }\n    }\n\n    /**\n     * Notify namespaced wildcard listeners of an event\n     * Only fires for events that match this component's namespace\n     *\n     * @param event - The event to dispatch to namespaced wildcard listeners\n     * @private\n     */\n    private _notifyNamespacedWildcardListeners (event: Event): void {\n        if (this._namespacedWildcardListeners.size === 0) {\n            return\n        }\n\n        const componentName = this.TAG\n\n        // Only trigger for events in this component's namespace\n        if (!componentName || !event.type.startsWith(`${componentName}:`)) {\n            return\n        }\n\n        // Call each namespaced wildcard listener\n        this._namespacedWildcardListeners.forEach(({ listener }) => {\n            try {\n                if (typeof listener === 'function') {\n                    listener.call(this, event)\n                } else if (listener && typeof listener.handleEvent === 'function') {\n                    listener.handleEvent(event)\n                }\n            } catch (error) {\n                // Log errors but don't let one listener break others\n                console.error(\n                    'Error in namespaced wildcard event listener:',\n                    error\n                )\n            }\n        })\n    }\n\n    /**\n     * Notify global wildcard listeners of an event\n     * Fires for ALL events dispatched through this element\n     *\n     * @param event - The event to dispatch to global wildcard listeners\n     * @private\n     */\n    private _notifyGlobalWildcardListeners (event: Event): void {\n        if (this._globalWildcardListeners.size === 0) {\n            return\n        }\n\n        // Call each global wildcard listener\n        this._globalWildcardListeners.forEach(({ listener }) => {\n            try {\n                if (typeof listener === 'function') {\n                    listener.call(this, event)\n                } else if (listener && typeof listener.handleEvent === 'function') {\n                    listener.handleEvent(event)\n                }\n            } catch (error) {\n            // Log errors but don't let one listener break others\n                console.error('Error in global wildcard event listener:', error)\n            }\n        })\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    abstract render ():any\n\n    qs<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qs<E extends Element = Element>(selector:string):E|null;\n    qs (selector:string):Element|null {\n        return this.querySelector(selector)\n    }\n\n    qsa<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qsa<E extends Element = Element>(selector:string):E|null;\n    qsa (selector:string):NodeListOf<Element> {\n        return this.querySelectorAll(selector)\n    }\n\n    /**\n     * Take a non-namepsaced event name, return namespace event name.\n     *\n     * @param {string} evType The non-namespace event name\n     * @returns {string} Namespaced event name, eg, `my-component:click`\n     */\n    static event (evType:string):string {\n        return eventName(this.TAG, evType)\n    }\n\n    /**\n     * Emit a namespaced event.\n     *\n     * @param type (non-namespaced) event type string\n     * @param opts `bubbles`, `detail`, and `cancelable`. Default is\n     * `{ bubbles: true, cancelable: true }`\n     * @returns {boolean}\n     */\n    emit<T = any> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        if (type === '*') throw new Error('Do not emit the literal \"*\"')\n\n        const { bubbles = true, cancelable = true, detail } = opts\n        const namespacedType = `${this.TAG}:${type}`\n\n        const event = new CustomEvent(namespacedType, {\n            bubbles,\n            cancelable,\n            detail\n        })\n\n        // This will trigger both specific listeners and global wildcard\n        // listeners (**)\n        const result = this.dispatchEvent(event)\n\n        // Notify namespaced wildcard listeners (*)\n        this._notifyNamespacedWildcardListeners(event)\n\n        return result\n    }\n\n    /**\n     * Override dispatchEvent to notify global wildcard listeners\n     * This ensures that '**' listeners catch ALL events\n     *\n     * @param event - The event to dispatch\n     * @returns true if the event was not cancelled\n     */\n    dispatchEvent (event: Event): boolean {\n        const result = super.dispatchEvent(event)\n\n        // Notify global wildcard listeners for ALL events\n        this._notifyGlobalWildcardListeners(event)\n\n        return result\n    }\n\n    /**\n     * Create and emit an event, no namespacing.\n     */\n    dispatch<T> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        const event = new CustomEvent(type, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail: opts.detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    /**\n     * Listen for namespaced events.\n     */\n    on<T extends Event = Event> (\n        evName:string,\n        handler:(ev:T)=>any,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:((ev:Event)=>any)|EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void {\n        const fullEvName = WebComponent.event.call(this, evName)\n        this.addEventListener(fullEvName, handler as EventListenerOrEventListenerObject, options)\n    }\n\n    /**\n     * Enhanced removeEventListener that supports wildcards:\n     * - Component.event('*') - Remove namespaced wildcard listener\n     * - '*' - Remove global wildcard listener\n     *\n     * @param type - Event type, Component.event('*') for namespaced, or '*'\n     *   for global\n     * @param listener - Event listener function or object to remove\n     * @param options - Event listener options\n     */\n    removeEventListener (\n        type:string,\n        listener:EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions\n    ): void {\n        if (type === WebComponent.event.call(this, '*')) {\n            // Remove namespaced wildcard listener\n            if (listener && this._namespacedWildcardListeners) {\n                for (const entry of this._namespacedWildcardListeners) {\n                    if (entry.listener === listener) {\n                        this._namespacedWildcardListeners.delete(entry)\n                        break\n                    }\n                }\n            }\n        } else if (type === '*') {\n            // Remove global wildcard listener\n            if (listener && this._globalWildcardListeners) {\n                for (const entry of this._globalWildcardListeners) {\n                    if (entry.listener === listener) {\n                        this._globalWildcardListeners.delete(entry)\n                        break\n                    }\n                }\n            }\n        } else {\n            // Normal event listener - delegate to native implementation\n            super.removeEventListener(type, listener, options)\n        }\n    }\n}\n\nfunction eventName (namespace:string, evType:string) {\n    return `${namespace}:${evType}`\n}\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n", "import { WebComponent, define } from '@substrate-system/web-component'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers.\n * It \"hydrates\" only, meaining sets up event listeners.\n * It does not know how to render itself.\n */\n\nexport class SubstrateButton extends WebComponent.create('substrate-button') {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        // Reflect to host attribute; guard against re-entrancy\n        if (this.hasAttribute('disabled') !== disabledValue) {\n            this.toggleAttribute('disabled', disabledValue)\n        }\n        if (!disabledValue) {\n            this.button?.removeAttribute('disabled')\n            this.button?.setAttribute('aria-disabled', 'false')\n        } else {\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-disabled', 'true')\n        }\n    }\n\n    get type ():string|null|undefined {\n        return this.button?.getAttribute('type')\n    }\n\n    get tabindex ():number {\n        const i = this.button?.getAttribute('tabindex')\n        if (!i) return 0\n        return parseInt(i)\n    }\n\n    get spinning ():boolean {\n        return this._isSpinning\n    }\n\n    set spinning (value:boolean) {\n        if (value) {\n            this.classList.add('spinning')\n            this.button?.classList.add('spinning')\n            this.button?.setAttribute('disabled', '')\n            this.setAttribute('spinning', '')\n        } else {\n            this.classList.remove('spinning')\n            this.button?.classList.remove('spinning')\n            this.button?.removeAttribute('disabled')\n            this.removeAttribute('spinning')\n        }\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        // Reflect to host attribute; guard against re-entrancy\n        if (this.hasAttribute('autofocus') !== value) {\n            this.toggleAttribute('autofocus', value)\n        }\n        this.button?.toggleAttribute('autofocus', value)\n    }\n\n    /**\n     * Set attributes on the internal button element.\n     */\n    _setAttribute (name:string, value:boolean|string|null):void {\n        if (value === false) {\n            // false means remove the attribute\n            this._removeAttribute(name)\n            this.button?.removeAttribute(name)\n        } else {\n            if (value === true) {\n                // true means set the attribute with no value\n                return this.button?.setAttribute(name, '')\n            }\n\n            if (value === null) {\n                // null means remove\n                return this._removeAttribute(name)\n            }\n\n            // else, set value to a string\n            this.button?.setAttribute(name, value)\n        }\n    }\n\n    /**\n     * Remove from `this` and also button child.\n     */\n    _removeAttribute (name:string) {\n        this.removeAttribute(name)\n        this.button?.removeAttribute(name)\n    }\n\n    get button ():HTMLButtonElement|null {\n        return this.querySelector('button')\n    }\n\n    /**\n     * Handle 'autofocus' attribute changes\n     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}\n     *\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    handleChange_autofocus (_oldValue:string, newValue:string|null) {\n        this.button?.toggleAttribute('autofocus', newValue !== null)\n    }\n\n    handleChange_disabled (_old:string|null, newValue:string|null) {\n        const isDisabled = newValue !== null\n        if (isDisabled) {\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-disabled', 'true')\n        } else {\n            this.button?.removeAttribute('disabled')\n            this.button?.setAttribute('aria-disabled', 'false')\n        }\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('spinning')\n            this.button?.classList.add('spinning')\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-busy', 'true')\n        } else {\n            this.classList.remove('spinning')\n            this.button?.classList.remove('spinning')\n            this.button?.removeAttribute('disabled')\n            this.button?.setAttribute('aria-busy', 'false')\n        }\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    _setupKeyboardHandlers () {\n        // Space and Enter should trigger click\n        this.button?.addEventListener('keydown', (e:KeyboardEvent) => {\n            if (e.key === ' ' || e.key === 'Enter') {\n                e.preventDefault()\n                this.button?.click()\n            }\n        })\n    }\n\n    render () {\n        // noop\n    }\n}\n", "import { html } from './html.js'\nimport { define } from '@substrate-system/web-component'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('button')\n\n/**\n * This is the full-version -- knows how to render itself in the browser.\n */\nexport class SubstrateButton extends SubstrateButtonLight {\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    connectedCallback ():void {\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    render () {\n        const { type, tabindex } = this\n        // Read directly from host attributes: the inner button does not\n        // exist yet when render() first runs, so the getters (which\n        // read from the inner button) would return false.\n        const disabled = this.hasAttribute('disabled')\n        const autofocus = this.hasAttribute('autofocus')\n        const name = this.getAttribute('name')\n        const ariaLabel = this.getAttribute('aria-label')\n\n        const spinning = this.getAttribute('spinning') !== null\n\n        const classes:(string|null)[] = [\n            'substrate-button',\n            this.getAttribute('class'),\n            spinning ? 'spinning' : null\n        ]\n        const text = this.innerHTML\n\n        const btnProps = {\n            classes: classes.filter(Boolean),\n            disabled,\n            autofocus,\n            tabindex,\n            type,\n            name,\n            ariaLabel,\n        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n\ndefine('substrate-button', SubstrateButton)\n"],
+  "mappings": "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",
+  "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "ariaLabel", "_classes", "arr", "btnProps", "__name", "toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "WebComponent", "_WebComponent", "__name", "el", "match", "elementName", "CreatedClass", "evType", "define", "name", "oldValue", "newValue", "handler", "type", "listener", "options", "event", "componentName", "error", "selector", "eventName", "opts", "bubbles", "cancelable", "detail", "namespacedType", "result", "evName", "fullEvName", "entry", "namespace", "isRegistered", "elName", "element", "SubstrateButton", "_SubstrateButton", "WebComponent", "__name", "define", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "e", "SubstrateButton", "_SubstrateButton", "__name", "define", "type", "tabindex", "disabled", "autofocus", "name", "ariaLabel", "spinning", "classes", "text", "btnProps", "html"]
 }

package/dist/meta.json

@@ -1,17 +1,17 @@
 {
   "inputs": {
     "src/client.ts": {
-      "bytes": 5793,
+      "bytes": 5996,
       "imports": [],
       "format": "esm"
     },
     "src/html.ts": {
-      "bytes": 1265,
+      "bytes": 1335,
       "imports": [],
       "format": "esm"
     },
     "src/index.ts": {
-      "bytes": 1183,
+      "bytes": 1616,
       "imports": [],
       "format": "esm"
     }
@@ -21,28 +21,32 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 9012
+      "bytes": 9346
     },
     "dist/client.js": {
-      "imports": [],
+      "imports": [
+        {
+          "path": "@substrate-system/web-component",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
       "exports": [
-        "SubstrateButton",
-        "define",
-        "isRegistered"
+        "SubstrateButton"
       ],
       "entryPoint": "src/client.ts",
       "inputs": {
         "src/client.ts": {
-          "bytesInOutput": 4480
+          "bytesInOutput": 4478
         }
       },
-      "bytes": 4700
+      "bytes": 4672
     },
     "dist/html.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 2084
+      "bytes": 2161
     },
     "dist/html.js": {
       "imports": [],
@@ -52,16 +56,16 @@
       "entryPoint": "src/html.ts",
       "inputs": {
         "src/html.ts": {
-          "bytesInOutput": 933
+          "bytesInOutput": 1003
         }
       },
-      "bytes": 1114
+      "bytes": 1184
     },
     "dist/index.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1988
+      "bytes": 2506
     },
     "dist/index.js": {
       "imports": [
@@ -70,6 +74,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@substrate-system/web-component",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "./client.js",
           "kind": "import-statement",
@@ -82,10 +91,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 967
+          "bytesInOutput": 1150
         }
       },
-      "bytes": 1160
+      "bytes": 1343
     }
   }
 }