@substrate-system/button 0.0.24 → 0.0.31

package/dist/client.cjs

@@ -19,7 +19,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var client_exports = {};
 __export(client_exports, {
-  SubstrateButton: () => SubstrateButton
+  SubstrateButton: () => SubstrateButton,
+  define: () => define,
+  isRegistered: () => isRegistered
 });
 module.exports = __toCommonJS(client_exports);
 class SubstrateButton extends HTMLElement {
@@ -129,8 +131,10 @@ class SubstrateButton extends HTMLElement {
   handleChange_spinning(_, newValue) {
     if (newValue !== null) {
       this.classList.add("substrate-loading");
+      this.button?.setAttribute("aria-busy", "true");
     } else {
       this.classList.remove("substrate-loading");
+      this.button?.setAttribute("aria-busy", "false");
     }
   }
   /**
@@ -149,15 +153,32 @@ class SubstrateButton extends HTMLElement {
   }
   connectedCallback() {
     this.render();
+    this._setupKeyboardHandlers();
+  }
+  _setupKeyboardHandlers() {
+    this.button?.addEventListener("keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        this.button?.click();
+      }
+    });
   }
   static define() {
-    if (!("customElements" in window)) return;
-    return customElements.define(
-      SubstrateButton.TAG || "substrate-button",
-      SubstrateButton
-    );
+    return define(SubstrateButton.TAG, SubstrateButton);
   }
   render() {
   }
 }
+function isRegistered(elName) {
+  return document.createElement(elName).constructor !== window.HTMLElement;
+}
+__name(isRegistered, "isRegistered");
+function define(name, element) {
+  if (!window) return;
+  if (!("customElements" in window)) return;
+  if (!isRegistered(name)) {
+    window.customElements.define(name, element);
+  }
+}
+__name(define, "define");
 //# sourceMappingURL=client.cjs.map

package/dist/client.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/client.ts"],
-  "sourcesContent": ["// 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        } else {\n            this.classList.remove('substrate-loading')\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    }\n\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    render () {\n        // noop\n    }\n}\n\n"],
-  "mappings": "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",
+  "sourcesContent": ["// 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"],
+  "mappings": "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",
   "names": []
 }

package/dist/client.d.ts

@@ -52,7 +52,10 @@ export declare class SubstrateButton extends HTMLElement {
      */
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     connectedCallback(): void;
+    _setupKeyboardHandlers(): void;
     static define(): void;
     render(): void;
 }
+export declare function isRegistered(elName: string): boolean;
+export declare function define(name: string, element: CustomElementConstructor): void;
 //# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAA;KACtC;CACJ;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAE5C,MAAM,CAAC,kBAAkB,WAAwC;IACjE,MAAM,CAAC,GAAG,SAAqB;IAC/B,WAAW,EAAC,OAAO,CAAA;;IAenB,IAAI,IAAI,IAAI,eAAe,GAAC,SAAS,GAAC,IAAI,CAEzC;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,OAAO,EAG1B;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAqB3D;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,MAAM,IAAI,iBAAiB,GAAC,IAAI,CAEnC;IAED;;;;;;OAMG;IACH,sBAAsB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAIzD,qBAAqB,CAAE,IAAI,KAAA,EAAE,QAAQ,EAAC,OAAO,GAAC,MAAM;IAMpD,qBAAqB,CAAE,CAAC,KAAA,EAAE,QAAQ,EAAC,OAAO;IAQ1C;;;;;;;;;OASG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAKvE,iBAAiB;IAKjB,MAAM,CAAC,MAAM;IASb,MAAM;CAGT"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAA;KACtC;CACJ;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAE5C,MAAM,CAAC,kBAAkB,WAAwC;IACjE,MAAM,CAAC,GAAG,SAAqB;IAC/B,WAAW,EAAC,OAAO,CAAA;;IAenB,IAAI,IAAI,IAAI,eAAe,GAAC,SAAS,GAAC,IAAI,CAEzC;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,aAAa,EAAC,OAAO,EAQlC;IAED,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,GAAC,SAAS,CAEhC;IAED,IAAI,QAAQ,IAAI,MAAM,CAIrB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAE,KAAK,EAAC,OAAO,EAG1B;IAED,IAAI,IAAI,CAAE,KAAK,EAAC,MAAM,EAErB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAE,KAAK,EAAC,OAAO,EAM3B;IAED;;OAEG;IACH,aAAa,CAAE,IAAI,EAAC,MAAM,EAAE,KAAK,EAAC,OAAO,GAAC,MAAM,GAAC,IAAI,GAAE,IAAI;IAqB3D;;OAEG;IACH,gBAAgB,CAAE,IAAI,EAAC,MAAM;IAK7B,IAAI,MAAM,IAAI,iBAAiB,GAAC,IAAI,CAEnC;IAED;;;;;;OAMG;IACH,sBAAsB,CAAE,SAAS,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAIzD,qBAAqB,CAAE,IAAI,KAAA,EAAE,QAAQ,EAAC,OAAO,GAAC,MAAM;IAMpD,qBAAqB,CAAE,CAAC,KAAA,EAAE,QAAQ,EAAC,OAAO;IAU1C;;;;;;;;;OASG;IACH,wBAAwB,CAAE,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAKvE,iBAAiB;IAMjB,sBAAsB;IAUtB,MAAM,CAAC,MAAM,IAAI,IAAI;IAIrB,MAAM;CAGT;AAED,wBAAgB,YAAY,CAAE,MAAM,EAAC,MAAM,GAAE,OAAO,CAEnD;AAED,wBAAgB,MAAM,CAAE,IAAI,EAAC,MAAM,EAAE,OAAO,EAAC,wBAAwB,GAAE,IAAI,CAO1E"}

package/dist/client.js

@@ -107,8 +107,10 @@ class SubstrateButton extends HTMLElement {
   handleChange_spinning(_, newValue) {
     if (newValue !== null) {
       this.classList.add("substrate-loading");
+      this.button?.setAttribute("aria-busy", "true");
     } else {
       this.classList.remove("substrate-loading");
+      this.button?.setAttribute("aria-busy", "false");
     }
   }
   /**
@@ -127,18 +129,37 @@ class SubstrateButton extends HTMLElement {
   }
   connectedCallback() {
     this.render();
+    this._setupKeyboardHandlers();
+  }
+  _setupKeyboardHandlers() {
+    this.button?.addEventListener("keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        this.button?.click();
+      }
+    });
   }
   static define() {
-    if (!("customElements" in window)) return;
-    return customElements.define(
-      SubstrateButton.TAG || "substrate-button",
-      SubstrateButton
-    );
+    return define(SubstrateButton.TAG, SubstrateButton);
   }
   render() {
   }
 }
+function isRegistered(elName) {
+  return document.createElement(elName).constructor !== window.HTMLElement;
+}
+__name(isRegistered, "isRegistered");
+function define(name, element) {
+  if (!window) return;
+  if (!("customElements" in window)) return;
+  if (!isRegistered(name)) {
+    window.customElements.define(name, element);
+  }
+}
+__name(define, "define");
 export {
-  SubstrateButton
+  SubstrateButton,
+  define,
+  isRegistered
 };
 //# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/client.ts"],
-  "sourcesContent": ["// 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        } else {\n            this.classList.remove('substrate-loading')\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    }\n\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    render () {\n        // noop\n    }\n}\n\n"],
-  "mappings": "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",
+  "sourcesContent": ["// 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"],
+  "mappings": "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",
   "names": []
 }

package/dist/client.min.js

@@ -1,2 +1,2 @@
-var o=Object.defineProperty;var n=(i,t)=>o(i,"name",{value:t,configurable:!0});var r=class i extends HTMLElement{static{n(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.classList.remove("substrate-loading")}attributeChangedCallback(t,e,u){let s=this[`handleChange_${t}`];s&&s.call(this,e,u)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(i.TAG||"substrate-button",i)}render(){}};export{r as SubstrateButton};
+var o=Object.defineProperty;var s=(i,t)=>o(i,"name",{value:t,configurable:!0});var r=class i extends HTMLElement{static{s(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,u){let n=this[`handleChange_${t}`];n&&n.call(this,e,u)}connectedCallback(){this.render(),this._setupKeyboardHandlers()}_setupKeyboardHandlers(){this.button?.addEventListener("keydown",t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.button?.click())})}static define(){return l(i.TAG,i)}render(){}};function b(i){return document.createElement(i).constructor!==window.HTMLElement}s(b,"isRegistered");function l(i,t){window&&"customElements"in window&&(b(i)||window.customElements.define(i,t))}s(l,"define");export{r as SubstrateButton,l as define,b as isRegistered};
 //# sourceMappingURL=client.min.js.map

package/dist/client.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/client.ts"],
-  "sourcesContent": ["// 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        } else {\n            this.classList.remove('substrate-loading')\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    }\n\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    render () {\n        // noop\n    }\n}\n\n"],
-  "mappings": "+EAUO,IAAMA,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,KACb,KAAK,UAAU,IAAI,mBAAmB,EAEtC,KAAK,UAAU,OAAO,mBAAmB,CAEjD,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,CAChB,CAEA,OAAO,QAAU,CACb,GAAM,mBAAoB,OAE1B,OAAO,eAAe,OAClBP,EAAgB,KAAO,mBACvBA,CACJ,CACJ,CAEA,QAAU,CAEV,CACJ",
-  "names": ["SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler"]
+  "sourcesContent": ["// 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"],
+  "mappings": "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",
+  "names": ["SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "e", "define", "isRegistered", "elName", "element"]
 }

package/dist/html.cjs

@@ -29,7 +29,8 @@ function html(attrs, textContent) {
     tabindex,
     disabled,
     classes,
-    name
+    name,
+    ariaLabel
   } = attrs;
   const _classes = new Set(classes);
   _classes.add("substrate-button");
@@ -41,11 +42,13 @@ function html(attrs, textContent) {
     type ? `type="${type}"` : "",
     name ? `name=${name}` : "",
     tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
-    'role="button"'
+    'role="button"',
+    ariaLabel ? `aria-label="${ariaLabel}"` : "",
+    'aria-live="polite"'
   ].filter(Boolean).join(" ");
   return typeof window === "undefined" ? `<substrate-button${disabled ? " disabled" : ""}>
             <button ${btnProps}>${textContent}</button>
-        </substrate-button$>` : `<button ${btnProps}>
+        </substrate-button>` : `<button ${btnProps}>
             ${textContent}
         </button>`;
 }

package/dist/html.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/html.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}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name\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    ]).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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,OAAO,QAAQ,IAAI,KAAK;AAAA,IACxB,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,gCAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AAhCgB;",
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,OAAO,QAAQ,IAAI,KAAK;AAAA,IACxB,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,IACA,YAAY,eAAe,SAAS,MAAM;AAAA,IAC1C;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,+BAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AAnCgB;",
   "names": []
 }

package/dist/html.d.ts

@@ -5,6 +5,7 @@ export type Attrs = {
     disabled: boolean;
     name: string | null;
     classes: string[] | Set<string>;
+    ariaLabel: string | null;
 };
 export declare function html(attrs: Partial<Attrs>, textContent: string): string;
 //# sourceMappingURL=html.d.ts.map

package/dist/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAChB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,SAAS,EAAC,OAAO,CAAC;IAClB,QAAQ,EAAC,MAAM,GAAC,MAAM,CAAC;IACvB,QAAQ,EAAC,OAAO,CAAC;IACjB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,OAAO,EAAC,MAAM,EAAE,GAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CAChC,CAAA;AACD,wBAAgB,IAAI,CAAE,KAAK,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE,WAAW,EAAC,MAAM,UAgC7D"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAChB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,SAAS,EAAC,OAAO,CAAC;IAClB,QAAQ,EAAC,MAAM,GAAC,MAAM,CAAC;IACvB,QAAQ,EAAC,OAAO,CAAC;IACjB,IAAI,EAAC,MAAM,GAAC,IAAI,CAAC;IACjB,OAAO,EAAC,MAAM,EAAE,GAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,SAAS,EAAC,MAAM,GAAC,IAAI,CAAC;CACzB,CAAA;AAED,wBAAgB,IAAI,CAAE,KAAK,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE,WAAW,EAAC,MAAM,UAmC7D"}

package/dist/html.js

@@ -7,7 +7,8 @@ function html(attrs, textContent) {
     tabindex,
     disabled,
     classes,
-    name
+    name,
+    ariaLabel
   } = attrs;
   const _classes = new Set(classes);
   _classes.add("substrate-button");
@@ -19,11 +20,13 @@ function html(attrs, textContent) {
     type ? `type="${type}"` : "",
     name ? `name=${name}` : "",
     tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
-    'role="button"'
+    'role="button"',
+    ariaLabel ? `aria-label="${ariaLabel}"` : "",
+    'aria-live="polite"'
   ].filter(Boolean).join(" ");
   return typeof window === "undefined" ? `<substrate-button${disabled ? " disabled" : ""}>
             <button ${btnProps}>${textContent}</button>
-        </substrate-button$>` : `<button ${btnProps}>
+        </substrate-button>` : `<button ${btnProps}>
             ${textContent}
         </button>`;
 }

package/dist/html.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/html.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}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name\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    ]).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"],
-  "mappings": ";;AAQO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,OAAO,QAAQ,IAAI,KAAK;AAAA,IACxB,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,gCAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AAhCgB;",
+  "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"],
+  "mappings": ";;AAUO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,WAAW,IAAI,IAAI,OAAO;AAChC,WAAS,IAAI,kBAAkB;AAC/B,QAAM,MAAM,MAAM,KAAK,QAAQ;AAE/B,QAAM,WAAY;AAAA,IACd,IAAI,SAAS,UAAU,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAC1D,WAAW,aAAa;AAAA,IACxB,YAAY,cAAc;AAAA,IAC1B,OAAO,SAAS,IAAI,MAAM;AAAA,IAC1B,OAAO,QAAQ,IAAI,KAAK;AAAA,IACxB,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,IACA,YAAY,eAAe,SAAS,MAAM;AAAA,IAC1C;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAG3B,SAAO,OAAO,WAAW,cACrB,oBAAoB,WAAW,cAAc,EAAE;AAAA,sBACjC,QAAQ,IAAI,WAAW;AAAA,+BAErC,WAAW,QAAQ;AAAA,cACb,WAAW;AAAA;AAEzB;AAnCgB;",
   "names": []
 }

package/dist/html.min.js

@@ -1,6 +1,6 @@
-var c=Object.defineProperty;var i=(n,t)=>c(n,"name",{value:t,configurable:!0});function f(n,t){let{type:e,autofocus:l,tabindex:s,disabled:o,classes:d,name:a}=n,r=new Set(d);r.add("substrate-button");let b=Array.from(r),u=[b.length?`class="${b.filter(Boolean).join(" ")}"`:"",o?"disabled":"",l?"autofocus":"",e?`type="${e}"`:"",a?`name=${a}`:"",s?`tabindex="${s}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${o?" disabled":""}>
-            <button ${u}>${t}</button>
-        </substrate-button$>`:`<button ${u}>
+var $=Object.defineProperty;var u=(n,t)=>$(n,"name",{value:t,configurable:!0});function p(n,t){let{type:e,autofocus:d,tabindex:a,disabled:s,classes:c,name:o,ariaLabel:r}=n,l=new Set(c);l.add("substrate-button");let i=Array.from(l),b=[i.length?`class="${i.filter(Boolean).join(" ")}"`:"",s?"disabled":"",d?"autofocus":"",e?`type="${e}"`:"",o?`name=${o}`:"",a?`tabindex="${a}"`:'tabindex="0"','role="button"',r?`aria-label="${r}"`:"",'aria-live="polite"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${s?" disabled":""}>
+            <button ${b}>${t}</button>
+        </substrate-button>`:`<button ${b}>
             ${t}
-        </button>`}i(f,"html");export{f as html};
+        </button>`}u(p,"html");export{p as html};
 //# sourceMappingURL=html.min.js.map

package/dist/html.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/html.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}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name\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    ]).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"],
-  "mappings": "+EAQO,SAASA,EAAMC,EAAsBC,EAAoB,CAC5D,GAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,CACJ,EAAIP,EAEEQ,EAAW,IAAI,IAAIF,CAAO,EAChCE,EAAS,IAAI,kBAAkB,EAC/B,IAAMC,EAAM,MAAM,KAAKD,CAAQ,EAEzBE,EAAY,CACdD,EAAI,OAAS,UAAUA,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,IAAM,GAC1DJ,EAAW,WAAa,GACxBF,EAAY,YAAc,GAC1BD,EAAO,SAASA,CAAI,IAAM,GAC1BK,EAAO,QAAQA,CAAI,GAAK,GACxBH,EAAW,aAAaA,CAAQ,IAAM,eACtC,eACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG,EAG3B,OAAO,OAAO,OAAW,IACrB,oBAAoBC,EAAW,YAAc,EAAE;AAAA,sBACjCK,CAAQ,IAAIT,CAAW;AAAA,8BAErC,WAAWS,CAAQ;AAAA,cACbT,CAAW;AAAA,kBAEzB,CAhCgBU,EAAAZ,EAAA",
-  "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "_classes", "arr", "btnProps", "__name"]
+  "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"],
+  "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",
+  "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "ariaLabel", "_classes", "arr", "btnProps", "__name"]
 }

package/dist/index.cjs

@@ -46,6 +46,7 @@ class SubstrateButton extends import_client.SubstrateButton {
       disabled
     } = this;
     const name = this.getAttribute("name");
+    const ariaLabel = this.getAttribute("aria-label");
     const classes = [
       "substrate-button",
       this.getAttribute("class")
@@ -57,7 +58,8 @@ class SubstrateButton extends import_client.SubstrateButton {
       autofocus,
       tabindex,
       type,
-      name
+      name,
+      ariaLabel
     };
     this.innerHTML = (0, import_html.html)(btnProps, text);
   }

package/dist/index.cjs.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\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\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        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,oBAAwD;AAEjD,MAAM,wBAAwB,cAAAA,gBAAqB;AAAA,EAH1D,OAG0D;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;AAErC,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,IACJ;AAEA,SAAK,gBAAY,kBAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
+  "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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,oBAAwD;AAKjD,MAAM,wBAAwB,cAAAA,gBAAqB;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,gBAAY,kBAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
   "names": ["SubstrateButtonLight"]
 }

package/dist/index.css

@@ -26,19 +26,51 @@
     }
 }
 
+/* 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);
+        }
+    }
+}
+
 substrate-button {
     display: inline-block;
     user-select: none;
     min-width: 8rem;
+    transition: all 0.3s;
 }
 
+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;
-            transition: all 0.3s ease;
             pointer-events: none;
         }
 
@@ -70,30 +102,56 @@ 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;
+            }
+}
+
+:root {
+    --default-color: #36393d;
+}
+
 button.substrate-button {
     border: 1px solid black;
-    color: var(--substrate-button-text, var(--substrate-primary, #36393d));
-    font-family: var(--substrate-font, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif);
+    color: var(--default-color);
     padding: 0.5em 1em;
     position: relative;
     background-color: var(--substrate-button-background, transparent);
     appearance: none;
+    outline: 2px solid transparent;
 }
-  
-button.substrate-button:active {
-        color: var(--substrate-medium, #999da0);
-        background-color: var(--substrate-button-background-disabled, #f7f7f5);
-    }
-  
+
 button.substrate-button:disabled {
         pointer-events: none;
         opacity: 0.4;
     }
-  
+
+/* Enhanced focus visibility */
+
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUF3Q25COztBQXRDSTtRQUNJLG9CQUFvQjtJQTBCeEI7O0FBeEJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFvQnhCOztBQWxCSTtnQkFDSSxrQkFBa0I7WUFDdEI7O0FBRUE7Z0JBQ0ksV0FBVztnQkFDWCx1QkFBdUI7Z0JBQ3ZCLHNCQUFzQjtnQkFDdEIsa0JBQWtCO2dCQUNsQixXQUFXO2dCQUNYLFlBQVk7Z0JBQ1osUUFBUTtnQkFDUixZQUFZO2dCQUNaLGtCQUFrQjtnQkFDbEIsMkJBQTJCO2dCQUMzQixtQ0FBbUM7Z0JBQ25DLHVDQUF1QztZQUMzQzs7QUFJUDtRQUNHLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSjs7QUFJUjtJQUNJLHVCQUF1QjtJQUN2QixzRUFBc0U7SUFDdEUsb0dBQW9HO0lBQ3BHLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsaUVBQWlFO0lBQ2pFLGdCQUFnQjtBQW1CcEI7O0FBakJJO1FBQ0ksdUNBQXVDO1FBQ3ZDLHNFQUFzRTtJQUMxRTs7QUFFQTtRQUNJLG9CQUFvQjtRQUNwQixZQUFZO0lBQ2hCOztBQUdJO1lBQ0ksdUJBQXVCO1lBQ3ZCLHlDQUF5QztZQUN6QyxnQ0FBZ0M7UUFDcEMiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBrZXlmcmFtZXMgc3BpbiB7XG4gICAgZnJvbSB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgIH1cblxuICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgICB9XG59XG5cbkBrZXlmcmFtZXMgc3Bpbm5lciB7XG4gICAgdG8ge3RyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7fVxufVxuXG5Aa2V5ZnJhbWVzIHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGUge1xuICAgIDAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB9XG5cbiAgICA1MCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOTUpO1xuICAgIH1cblxuICAgIDEwMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cbn1cblxuc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgIG1pbi13aWR0aDogOHJlbTtcblxuICAgICYuc3Vic3RyYXRlLWxvYWRpbmcge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlO1xuICAgICAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICAgICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgd2lkdGg6IDE2cHg7XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAxNnB4O1xuICAgICAgICAgICAgICAgIGluc2V0OiAwO1xuICAgICAgICAgICAgICAgIG1hcmdpbjogYXV0bztcbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXRvcDogMnB4IHNvbGlkIGJsYWNrO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yaWdodDogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogc3Bpbm5lciAwLjZzIGxpbmVhciBpbmZpbml0ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICAmW2FyaWEtZGlzYWJsZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnRcbiAgICAgICAgfVxuICAgIH1cbn1cbiAgXG5idXR0b24uc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tdGV4dCwgdmFyKC0tc3Vic3RyYXRlLXByaW1hcnksICMzNjM5M2QpKTtcbiAgICBmb250LWZhbWlseTogdmFyKC0tc3Vic3RyYXRlLWZvbnQsICdHaWxsIFNhbnMnLCAnR2lsbCBTYW5zIE1UJywgQ2FsaWJyaSwgJ1RyZWJ1Y2hldCBNUycsIHNhbnMtc2VyaWYpO1xuICAgIHBhZGRpbmc6IDAuNWVtIDFlbTtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLCB0cmFuc3BhcmVudCk7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcblxuICAgICY6YWN0aXZlIHtcbiAgICAgICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1tZWRpdW0sICM5OTlkYTApO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZGlzYWJsZWQsICNmN2Y3ZjUpO1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgIH1cblxuICAgICY6bm90KFtkaXNhYmxlZF0pIHtcbiAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAuMnM7XG4gICAgICAgICAgICBhbmltYXRpb24tbmFtZTogc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZTtcbiAgICAgICAgICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xuICAgICAgICB9XG4gICAgfVxufSJdfQ== */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUEsc0NBQXNDO0FBQ3RDO0lBQ0k7UUFDSTtZQUNJLHVCQUF1QjtRQUMzQjs7UUFFQTtZQUNJLHVCQUF1QjtRQUMzQjtJQUNKOztJQUVBO1FBQ0ksSUFBSSx1QkFBdUIsQ0FBQztJQUNoQzs7SUFFQTtRQUNJO1lBQ0ksbUJBQW1CO1FBQ3ZCO0lBQ0o7QUFDSjs7QUFFQTtJQUNJLHFCQUFxQjtJQUNyQixpQkFBaUI7SUFDakIsZUFBZTtJQUNmLG9CQUFvQjtBQWdEeEI7O0FBOUNJO1FBQ0kseUJBQXlCO0lBTTdCOztBQUpJO1lBQ0ksZ0NBQWdDO1lBQ2hDLDJCQUEyQjtRQUMvQjs7QUFHSjtRQUNJLG9CQUFvQjtJQXlCeEI7O0FBdkJJO1lBQ0ksa0JBQWtCO1lBQ2xCLG9CQUFvQjtRQW9CeEI7O0FBbEJJO2dCQUNJLGtCQUFrQjtZQUN0Qjs7QUFFQTtnQkFDSSxXQUFXO2dCQUNYLHVCQUF1QjtnQkFDdkIsc0JBQXNCO2dCQUN0QixrQkFBa0I7Z0JBQ2xCLFdBQVc7Z0JBQ1gsWUFBWTtnQkFDWixRQUFRO2dCQUNSLFlBQVk7Z0JBQ1osa0JBQWtCO2dCQUNsQiwyQkFBMkI7Z0JBQzNCLG1DQUFtQztnQkFDbkMsdUNBQXVDO1lBQzNDOztBQUlQO1FBQ0csaUJBQWlCO1FBQ2pCLDZCQUE2QjtJQU1qQzs7QUFKSTtZQUNJLGlCQUFpQjtZQUNqQjtRQUNKOztBQUlSLDJFQUEyRTtBQUMzRTtZQUdZO2dCQUNJLGdCQUFnQjtZQVFwQjs7Z0JBTkk7b0JBQ0ksZUFBZTtvQkFDZixnREFBZ0Q7b0JBQ2hELHVCQUF1QjtvQkFDdkIsWUFBWTtnQkFDaEI7WUFPSjtnQkFDSSxlQUFlO1lBQ25CO0FBR1o7O0FBRUE7SUFDSSx3QkFBd0I7QUFDNUI7O0FBRUE7SUFDSSx1QkFBdUI7SUFDdkIsMkJBQTJCO0lBQzNCLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsaUVBQWlFO0lBQ2pFLGdCQUFnQjtJQUNoQiw4QkFBOEI7QUF1QmxDOztBQXJCSTtRQUNJLG9CQUFvQjtRQUNwQixZQUFZO0lBQ2hCOztBQUVBLDhCQUE4Qjs7QUFDOUI7UUFDSSx1Q0FBdUM7SUFDM0M7O0FBRUE7UUFDSSwwQkFBMEI7SUFDOUI7O0FBR0k7WUFDSSx1QkFBdUI7WUFDdkIseUNBQXlDO1lBQ3pDLGdDQUFnQztRQUNwQyIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG4vKiBSZXNwZWN0IHVzZXIncyBtb3Rpb24gcHJlZmVyZW5jZXMgKi9cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gICAgQGtleWZyYW1lcyBzcGluIHtcbiAgICAgICAgZnJvbSB7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRvIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICAgICAgdG8ge3RyYW5zZm9ybTogcm90YXRlKDBkZWcpO31cbiAgICB9XG5cbiAgICBAa2V5ZnJhbWVzIHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGUge1xuICAgICAgICAwJSwgNTAlLCAxMDAlIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgICAgIH1cbiAgICB9XG59XG5cbnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBtaW4td2lkdGg6IDhyZW07XG4gICAgdHJhbnNpdGlvbjogYWxsIDAuM3M7XG5cbiAgICAmIGJ1dHRvbiB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiAwIDRweCAxMnB4ICMwMDAwMDAyNjtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtMnB4KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuc3Vic3RyYXRlLWxvYWRpbmcge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgICZbYXJpYS1kaXNhYmxlZD1cInRydWVcIl0ge1xuICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudFxuICAgICAgICB9XG4gICAgfVxufVxuXG4vKiBEaXNhYmxlIGFuaW1hdGlvbnMgYW5kIHRyYW5zaXRpb25zIGZvciB1c2VycyB3aG8gcHJlZmVyIHJlZHVjZWQgbW90aW9uICovXG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAgIHN1YnN0cmF0ZS1idXR0b24ge1xuICAgICAgICAmLnN1YnN0cmF0ZS1sb2FkaW5nIHtcbiAgICAgICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiBub25lO1xuXG4gICAgICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIC8qIFNob3cgYSBzdGF0aWMgaW5kaWNhdG9yIGluc3RlYWQgb2Ygc3Bpbm5pbmcgKi9cbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAuNTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBidXR0b24uc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgICAgICY6bm90KFtkaXNhYmxlZF0pIHtcbiAgICAgICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IG5vbmU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG59XG5cbjpyb290IHtcbiAgICAtLWRlZmF1bHQtY29sb3I6ICMzNjM5M2Q7XG59XG5cbmJ1dHRvbi5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICBjb2xvcjogdmFyKC0tZGVmYXVsdC1jb2xvcik7XG4gICAgcGFkZGluZzogMC41ZW0gMWVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgIH1cblxuICAgIC8qIEVuaGFuY2VkIGZvY3VzIHZpc2liaWxpdHkgKi9cbiAgICAmOmZvY3VzLCAmOmZvY3VzLXZpc2libGUge1xuICAgICAgICBvdXRsaW5lOiAycHggc29saWQgdmFyKC0tZGVmYXVsdC1jb2xvcik7XG4gICAgfVxuXG4gICAgJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpIHtcbiAgICAgICAgb3V0bGluZS1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgfVxuXG4gICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IC4ycztcbiAgICAgICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlO1xuICAgICAgICAgICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2U7XG4gICAgICAgIH1cbiAgICB9XG59Il19 */

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 import { SubstrateButton as SubstrateButtonLight } from './client.js';
+/**
+ * This is the full-version -- knows how to render itself in the browser.
+ */
 export declare class SubstrateButton extends SubstrateButtonLight {
     static define(): void;
     connectedCallback(): void;

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,qBAAa,eAAgB,SAAQ,oBAAoB;IACrD,MAAM,CAAC,MAAM;IASb,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CA0BT"}
+{"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"}

package/dist/index.js

@@ -24,6 +24,7 @@ class SubstrateButton extends SubstrateButtonLight {
       disabled
     } = this;
     const name = this.getAttribute("name");
+    const ariaLabel = this.getAttribute("aria-label");
     const classes = [
       "substrate-button",
       this.getAttribute("class")
@@ -35,7 +36,8 @@ class SubstrateButton extends SubstrateButtonLight {
       autofocus,
       tabindex,
       type,
-      name
+      name,
+      ariaLabel
     };
     this.innerHTML = html(btnProps, text);
   }

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\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\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        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n"],
-  "mappings": ";;AAAA,SAAS,YAAY;AACrB,SAAS,mBAAmB,4BAA4B;AAEjD,MAAM,wBAAwB,qBAAqB;AAAA,EAH1D,OAG0D;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;AAErC,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,IACJ;AAEA,SAAK,YAAY,KAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
+  "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;",
   "names": []
 }

package/dist/index.min.css

@@ -1,2 +1,2 @@
-@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)}}substrate-button{display:inline-block;min-width:8rem;user-select:none}substrate-button.substrate-loading{pointer-events:none}substrate-button.substrate-loading button{color:transparent;pointer-events:none;transition:all .3s ease}: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}button.substrate-button{appearance:none;background-color:var(--substrate-button-background,transparent);border:1px solid #000;color:var(--substrate-button-text,var(--substrate-primary,#36393d));font-family:var(--substrate-font,"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif);padding:.5em 1em;position:relative}button.substrate-button:active{background-color:var(--substrate-button-background-disabled,#f7f7f5);color:var(--substrate-medium,#999da0)}button.substrate-button:disabled{opacity:.4;pointer-events:none}button.substrate-button:not([disabled]):active{animation-duration:.2s;animation-name:substrate-button-activate;transition-timing-function:ease}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQ0ksR0FDSSxzQkFDSixDQUVBLEdBQ0ksdUJBQ0osQ0FDSixDQUVBLG1CQUNJLEdBQUksdUJBQTBCLENBQ2xDLENBRUEscUNBQ0ksR0FDSSxrQkFDSixDQUVBLElBQ0ksb0JBQ0osQ0FFQSxHQUNJLGtCQUNKLENBQ0osQ0FFQSxpQkFDSSxvQkFBcUIsQ0FFckIsY0FBZSxDQURmLGdCQXlDSixDQXRDSSxtQ0FDSSxtQkEwQkosQ0F4QkksMENBQ0ksaUJBQWtCLENBRWxCLG1CQUFvQixDQURwQix1QkFxQkosQ0FsQkkscURBQ0ksaUJBQ0osQ0FFQSxxREFZSSxxQ0FBdUMsQ0FWdkMsc0JBQXVCLENBT3ZCLGlCQUFrQixDQUVsQixrQ0FBbUMsQ0FEbkMseUJBQTJCLENBUDNCLHFCQUFzQixDQUZ0QixVQUFXLENBS1gsV0FBWSxDQUNaLE9BQVEsQ0FDUixXQUFZLENBSlosaUJBQWtCLENBQ2xCLFVBUUosQ0FRSixpRkFFSSw0QkFBNEIsQ0FENUIsZ0JBRUosQ0FJUix3QkFPSSxlQUFnQixDQURoQiwrREFBaUUsQ0FMakUscUJBQXVCLENBQ3ZCLG1FQUFzRSxDQUN0RSw4RkFBb0csQ0FDcEcsZ0JBQWtCLENBQ2xCLGlCQXFCSixDQWpCSSwrQkFFSSxvRUFBc0UsQ0FEdEUscUNBRUosQ0FFQSxpQ0FFSSxVQUFZLENBRFosbUJBRUosQ0FHSSwrQ0FDSSxzQkFBdUIsQ0FDdkIsd0NBQXlDLENBQ3pDLCtCQUNKIiwiZmlsZSI6InNyYy9pbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIHNwaW4ge1xuICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG5cbiAgICB0byB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNwaW5uZXIge1xuICAgIHRvIHt0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO31cbn1cblxuQGtleWZyYW1lcyBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlIHtcbiAgICAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxuXG4gICAgNTAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTtcbiAgICB9XG5cbiAgICAxMDAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB9XG59XG5cbnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBtaW4td2lkdGg6IDhyZW07XG5cbiAgICAmLnN1YnN0cmF0ZS1sb2FkaW5nIHtcbiAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTtcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgIHdpZHRoOiAxNnB4O1xuICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICBpbnNldDogMDtcbiAgICAgICAgICAgICAgICBtYXJnaW46IGF1dG87XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgICAgIGJvcmRlci10b3A6IDJweCBzb2xpZCBibGFjaztcbiAgICAgICAgICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IHNwaW5uZXIgMC42cyBsaW5lYXIgaW5maW5pdGU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAgJlthcmlhLWRpc2FibGVkPVwidHJ1ZVwiXSB7XG4gICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50XG4gICAgICAgIH1cbiAgICB9XG59XG4gIFxuYnV0dG9uLnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrO1xuICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLXRleHQsIHZhcigtLXN1YnN0cmF0ZS1wcmltYXJ5LCAjMzYzOTNkKSk7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLXN1YnN0cmF0ZS1mb250LCAnR2lsbCBTYW5zJywgJ0dpbGwgU2FucyBNVCcsIENhbGlicmksICdUcmVidWNoZXQgTVMnLCBzYW5zLXNlcmlmKTtcbiAgICBwYWRkaW5nOiAwLjVlbSAxZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZCwgdHJhbnNwYXJlbnQpO1xuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtbWVkaXVtLCAjOTk5ZGEwKTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWRpc2FibGVkLCAjZjdmN2Y1KTtcbiAgICB9XG5cbiAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICB9XG5cbiAgICAmOm5vdChbZGlzYWJsZWRdKSB7XG4gICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogLjJzO1xuICAgICAgICAgICAgYW5pbWF0aW9uLW5hbWU6IHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGU7XG4gICAgICAgICAgICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZTtcbiAgICAgICAgfVxuICAgIH1cbn0iXX0= */
+@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 */

package/dist/index.min.js

@@ -1,6 +1,6 @@
-var f=Object.defineProperty;var i=(s,t)=>f(s,"name",{value:t,configurable:!0});function c(s,t){let{type:e,autofocus:r,tabindex:n,disabled:o,classes:l,name:u}=s,b=new Set(l);b.add("substrate-button");let d=Array.from(b),h=[d.length?`class="${d.filter(Boolean).join(" ")}"`:"",o?"disabled":"",r?"autofocus":"",e?`type="${e}"`:"",u?`name=${u}`:"",n?`tabindex="${n}"`:'tabindex="0"','role="button"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${o?" disabled":""}>
+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}>
+        </substrate-button>`:`<button ${h}>
             ${t}
-        </button>`}i(c,"html");var a=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.classList.remove("substrate-loading")}attributeChangedCallback(t,e,r){let n=this[`handleChange_${t}`];n&&n.call(this,e,r)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(s.TAG||"substrate-button",s)}render(){}};var g=class s extends a{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"),l=["substrate-button",this.getAttribute("class")],u=this.innerHTML,b={classes:l.filter(Boolean),disabled:n,autofocus:e,tabindex:r,type:t,name:o};this.innerHTML=c(b,u)}};export{g as SubstrateButton};
+        </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};
 //# 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}\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name\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    ]).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        } else {\n            this.classList.remove('substrate-loading')\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    }\n\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    render () {\n        // noop\n    }\n}\n\n", "import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\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\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        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n"],
-  "mappings": "+EAQO,SAASA,EAAMC,EAAsBC,EAAoB,CAC5D,GAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,CACJ,EAAIP,EAEEQ,EAAW,IAAI,IAAIF,CAAO,EAChCE,EAAS,IAAI,kBAAkB,EAC/B,IAAMC,EAAM,MAAM,KAAKD,CAAQ,EAEzBE,EAAY,CACdD,EAAI,OAAS,UAAUA,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,IAAM,GAC1DJ,EAAW,WAAa,GACxBF,EAAY,YAAc,GAC1BD,EAAO,SAASA,CAAI,IAAM,GAC1BK,EAAO,QAAQA,CAAI,GAAK,GACxBH,EAAW,aAAaA,CAAQ,IAAM,eACtC,eACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG,EAG3B,OAAO,OAAO,OAAW,IACrB,oBAAoBC,EAAW,YAAc,EAAE;AAAA,sBACjCK,CAAQ,IAAIT,CAAW;AAAA,8BAErC,WAAWS,CAAQ;AAAA,cACbT,CAAW;AAAA,kBAEzB,CAhCgBU,EAAAZ,EAAA,QCET,IAAMa,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,KACb,KAAK,UAAU,IAAI,mBAAmB,EAEtC,KAAK,UAAU,OAAO,mBAAmB,CAEjD,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,CAChB,CAEA,OAAO,QAAU,CACb,GAAM,mBAAoB,OAE1B,OAAO,eAAe,OAClBP,EAAgB,KAAO,mBACvBA,CACJ,CACJ,CAEA,QAAU,CAEV,CACJ,EC5KO,IAAMY,EAAN,MAAMC,UAAwBD,CAAqB,CAH1D,MAG0D,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,EAE/BC,EAA0B,CAC5B,mBACA,KAAK,aAAa,OAAO,CAC7B,EACMC,EAAO,KAAK,UAEZC,EAAW,CACb,QAASF,EAAQ,OAAO,OAAO,EAC/B,SAAAF,EACA,UAAAF,EACA,SAAAC,EACA,KAAAF,EACA,KAAAI,CACJ,EAEA,KAAK,UAAYI,EAAKD,EAAUD,CAAI,CACxC,CACJ",
-  "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "_classes", "arr", "btnProps", "__name", "SubstrateButton", "_SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "SubstrateButton", "_SubstrateButton", "__name", "type", "autofocus", "tabindex", "disabled", "name", "classes", "text", "btnProps", "html"]
+  "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": "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",
+  "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"]
 }

package/dist/meta.json

@@ -1,17 +1,17 @@
 {
   "inputs": {
     "src/client.ts": {
-      "bytes": 5036,
+      "bytes": 5793,
       "imports": [],
       "format": "esm"
     },
     "src/html.ts": {
-      "bytes": 1135,
+      "bytes": 1265,
       "imports": [],
       "format": "esm"
     },
     "src/index.ts": {
-      "bytes": 1020,
+      "bytes": 1183,
       "imports": [],
       "format": "esm"
     }
@@ -21,26 +21,28 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 7805
+      "bytes": 9012
     },
     "dist/client.js": {
       "imports": [],
       "exports": [
-        "SubstrateButton"
+        "SubstrateButton",
+        "define",
+        "isRegistered"
       ],
       "entryPoint": "src/client.ts",
       "inputs": {
         "src/client.ts": {
-          "bytesInOutput": 3870
+          "bytesInOutput": 4480
         }
       },
-      "bytes": 4064
+      "bytes": 4700
     },
     "dist/html.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1894
+      "bytes": 2084
     },
     "dist/html.js": {
       "imports": [],
@@ -50,16 +52,16 @@
       "entryPoint": "src/html.ts",
       "inputs": {
         "src/html.ts": {
-          "bytesInOutput": 843
+          "bytesInOutput": 933
         }
       },
-      "bytes": 1024
+      "bytes": 1114
     },
     "dist/index.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1779
+      "bytes": 1988
     },
     "dist/index.js": {
       "imports": [
@@ -80,10 +82,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 895
+          "bytesInOutput": 967
         }
       },
-      "bytes": 1088
+      "bytes": 1160
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@substrate-system/button",
-  "version": "0.0.24",
+  "version": "0.0.31",
   "description": "A button component with a visual \"loading\" state",
   "type": "module",
   "main": "dist/index.js",
@@ -22,14 +22,8 @@
     "./css": "./dist/index.css",
     "./css/min": "./dist/index.min.css",
     "./*": {
-      "import": [
-        "./dist/*.js",
-        "./dist/*"
-      ],
-      "require": [
-        "./dist/*.cjs",
-        "./dist/*"
-      ]
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
     }
   },
   "scripts": {
@@ -69,7 +63,7 @@
     "postcss-cli": "^11.0.0",
     "postcss-nesting": "^13.0.1",
     "stylelint": "^16.9.0",
-    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard": "^39.0.0",
     "tap-spec": "^5.0.0",
     "tape-run": "^11.0.0",
     "typedoc": "^0.28.1",