@substrate-system/button 0.0.17 → 0.0.20

package/dist/html.d.ts

@@ -0,0 +1,9 @@
+export type Attrs = {
+    type: string | null;
+    autofocus: boolean;
+    tabindex: string | number;
+    disabled: boolean;
+    classes: string[] | Set<string>;
+};
+export declare function html(attrs: Partial<Attrs>, textContent: string): string;
+//# sourceMappingURL=html.d.ts.map

package/dist/html.d.ts.map

@@ -0,0 +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,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,UAyB7D"}

package/dist/html.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function html(attrs, textContent) {
+  const {
+    type,
+    autofocus,
+    tabindex,
+    disabled,
+    classes
+  } = attrs;
+  const _classes = new Set(classes);
+  _classes.add("substrate-button");
+  const arr = Array.from(_classes);
+  const btnProps = [
+    arr.length ? `class="${arr.filter(Boolean).join(" ")}"` : "",
+    disabled ? "disabled" : "",
+    autofocus ? "autofocus" : "",
+    type ? `type="${type}"` : "",
+    tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
+    'role="button"'
+  ].filter(Boolean).join(" ");
+  return `<button ${btnProps}>
+        ${textContent}
+    </button>`;
+}
+__name(html, "html");
+export {
+  html
+};
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +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    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    } = 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        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"'\n    ]).filter(Boolean).join(' ')\n\n    return `<button ${btnProps}>\n        ${textContent}\n    </button>`\n}\n"],
+  "mappings": ";;AAOO,SAAS,KAAM,OAAsB,aAAoB;AAC5D,QAAM;AAAA,IACF;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,WAAW,aAAa,QAAQ,MAAM;AAAA,IACtC;AAAA,EACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG;AAE3B,SAAO,WAAW,QAAQ;AAAA,UACpB,WAAW;AAAA;AAErB;AAzBgB;",
+  "names": []
+}

package/dist/html.min.js

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

package/dist/html.min.js.map

@@ -0,0 +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    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    } = 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        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"'\n    ]).filter(Boolean).join(' ')\n\n    return `<button ${btnProps}>\n        ${textContent}\n    </button>`\n}\n"],
+  "mappings": "+EAOO,SAASA,EAAMC,EAAsBC,EAAoB,CAC5D,GAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,CACJ,EAAIN,EAEEO,EAAW,IAAI,IAAID,CAAO,EAChCC,EAAS,IAAI,kBAAkB,EAC/B,IAAMC,EAAM,MAAM,KAAKD,CAAQ,EAW/B,MAAO,WATW,CACdC,EAAI,OAAS,UAAUA,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CAAC,IAAM,GAC1DH,EAAW,WAAa,GACxBF,EAAY,YAAc,GAC1BD,EAAO,SAASA,CAAI,IAAM,GAC1BE,EAAW,aAAaA,CAAQ,IAAM,eACtC,eACJ,EAAG,OAAO,OAAO,EAAE,KAAK,GAAG,CAED;AAAA,UACpBH,CAAW;AAAA,cAErB,CAzBgBQ,EAAAV,EAAA",
+  "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "_classes", "arr", "__name"]
+}

package/dist/index.cjs

@@ -22,141 +22,22 @@ __export(index_exports, {
   SubstrateButton: () => SubstrateButton
 });
 module.exports = __toCommonJS(index_exports);
-class SubstrateButton extends HTMLElement {
+var import_html = require("./html.js");
+var import_client = require("./client.js");
+class SubstrateButton extends import_client.SubstrateButton {
   static {
     __name(this, "SubstrateButton");
   }
-  // for `attributeChangedCallback`
-  static observedAttributes = ["autofocus", "disabled", "spinning"];
-  static tag = "substrate-button";
-  _isSpinning;
-  constructor() {
-    super();
-    const disabled = this.getAttribute("disabled");
-    if (disabled !== null) {
-      setTimeout(() => {
-        this.disabled = true;
-      }, 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(disabledValue) {
-    if (!disabledValue) {
-      this._removeAttribute("disabled");
-      this.button?.setAttribute("aria-disabled", "false");
-    } else {
-      this.button?.setAttribute("disabled", "");
-      this.button?.setAttribute("aria-disabled", "true");
-    }
-  }
-  get type() {
-    return this.button?.getAttribute("type");
-  }
-  get tabindex() {
-    const i = this.button?.getAttribute("tabindex");
-    if (!i) return 0;
-    return parseInt(i);
-  }
-  get spinning() {
-    return this._isSpinning;
-  }
-  set spinning(value) {
-    if (value) this.setAttribute("spinning", "");
-    else this.removeAttribute("spinning");
-  }
-  set type(value) {
-    this._setAttribute("type", value);
-  }
-  get autofocus() {
-    return !!this.button?.hasAttribute("autofocus");
-  }
-  set autofocus(value) {
-    if (value) {
-      this._setAttribute("autofocus", value);
-    } else {
-      this._removeAttribute("autofocus");
-    }
-  }
-  /**
-   * Set attributes on the internal button element.
-   */
-  _setAttribute(name, value) {
-    if (value === false) {
-      this._removeAttribute(name);
-      this.button?.removeAttribute(name);
-    } else {
-      if (value === true) {
-        return this.button?.setAttribute(name, "");
-      }
-      if (value === null) {
-        return this._removeAttribute(name);
-      }
-      this.button?.setAttribute(name, value);
-    }
-  }
-  /**
-   * Remove from `this` and also button child.
-   */
-  _removeAttribute(name) {
-    this.removeAttribute(name);
-    this.button?.removeAttribute(name);
-  }
-  get button() {
-    return this.querySelector("button");
-  }
-  /**
-   * Handle 'autofocus' attribute changes
-   * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
-   *
-   * @param  {string} oldValue The old attribute value
-   * @param  {string} newValue The new attribute value
-   */
-  handleChange_autofocus(_oldValue, newValue) {
-    this._setAttribute("autofocus", newValue);
-  }
-  handleChange_disabled(_old, newValue) {
-    this.disabled = newValue !== null;
-    if (newValue === null) this.button?.removeAttribute("disabled");
-    else this.button?.setAttribute("disabled", "" + newValue);
-  }
-  handleChange_spinning(_, newValue) {
-    if (newValue !== null) {
-      this.classList.add("substrate-loading");
-    } else {
-      this.classList.remove("substrate-loading");
-    }
-  }
-  /**
-   * Runs when the value of an attribute is changed.
-   *
-   * Should add methods to this class like `handleChange_class`, to
-   * listen for changes to `class` attribute.
-   *
-   * @param  {string} name     The attribute name
-   * @param  {string} oldValue The old attribute value
-   * @param  {string} newValue The new attribute value
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    const handler = this[`handleChange_${name}`];
-    handler && handler.call(this, oldValue, newValue);
-  }
-  connectedCallback() {
-    this.render();
-  }
   static define() {
     if (!("customElements" in window)) return;
     return customElements.define(
-      SubstrateButton.tag || "substrate-button",
+      SubstrateButton.TAG || "substrate-button",
       SubstrateButton
     );
   }
+  connectedCallback() {
+    this.render();
+  }
   render() {
     const {
       type,
@@ -164,16 +45,19 @@ class SubstrateButton extends HTMLElement {
       tabindex,
       disabled
     } = this;
-    const classes = ["substrate-button"];
-    const btnProps = [
-      `class="${classes.join(" ")}"`,
-      disabled ? "disabled" : "",
-      autofocus ? "autofocus" : "",
-      type ? `type="${this.type}"` : "",
-      tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
-      'role="button"'
-    ].filter(Boolean).join(" ");
-    this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`;
+    const classes = [
+      "substrate-button",
+      this.getAttribute("class")
+    ];
+    const text = this.innerHTML;
+    const btnProps = {
+      classes: classes.filter(Boolean),
+      disabled,
+      autofocus,
+      tabindex,
+      type
+    };
+    this.innerHTML = (0, import_html.html)(btnProps, text);
   }
 }
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\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        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        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n        } = this\n\n        const classes:string[] = ['substrate-button']\n\n        const btnProps = ([\n            `class=\"${classes.join(' ')}\"`,\n            disabled ? 'disabled' : '',\n            autofocus ? 'autofocus' : '',\n            type ? `type=\"${this.type}\"` : '',\n            tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n            'role=\"button\"'\n        ]).filter(Boolean).join(' ')\n\n        this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`\n    }\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { html } from './html.js'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug()\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\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        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n\n// export 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//         debug('this.inner', this.innerHTML)\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//         const {\n//             type,\n//             autofocus,\n//             tabindex,\n//             disabled,\n//         } = this\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//         }\n\n//         this.innerHTML = html(btnProps, text)\n//     }\n// }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,oBAAwD;AAIjD,MAAM,wBAAwB,cAAAA,gBAAqB;AAAA,EAL1D,OAK0D;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;AAEJ,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,IACJ;AAEA,SAAK,gBAAY,kBAAK,UAAU,IAAI;AAAA,EACxC;AACJ;",
+  "names": ["SubstrateButtonLight"]
 }

package/dist/index.css

@@ -74,7 +74,6 @@ substrate-button[aria-disabled="true"] button {
 button.substrate-button {
     border: 1px solid black;
     color: var(--substrate-button-text, var(--substrate-primary, #36393d));
-    width: 100%;
     font-family: var(--substrate-font, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif);
     padding: 0.5em 1em;
     position: relative;
@@ -97,4 +96,4 @@ button.substrate-button:not([disabled]):active {
             animation-name: substrate-button-activate;
             transition-timing-function: ease;
         }
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUF3Q25COztBQXRDSTtRQUNJLG9CQUFvQjtJQTBCeEI7O0FBeEJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFvQnhCOztBQWxCSTtnQkFDSSxrQkFBa0I7WUFDdEI7O0FBRUE7Z0JBQ0ksV0FBVztnQkFDWCx1QkFBdUI7Z0JBQ3ZCLHNCQUFzQjtnQkFDdEIsa0JBQWtCO2dCQUNsQixXQUFXO2dCQUNYLFlBQVk7Z0JBQ1osUUFBUTtnQkFDUixZQUFZO2dCQUNaLGtCQUFrQjtnQkFDbEIsMkJBQTJCO2dCQUMzQixtQ0FBbUM7Z0JBQ25DLHVDQUF1QztZQUMzQzs7QUFJUDtRQUNHLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSjs7QUFJUjtJQUNJLHVCQUF1QjtJQUN2QixzRUFBc0U7SUFDdEUsV0FBVztJQUNYLG9HQUFvRztJQUNwRyxrQkFBa0I7SUFDbEIsa0JBQWtCO0lBQ2xCLGlFQUFpRTtJQUNqRSxnQkFBZ0I7QUFtQnBCOztBQWpCSTtRQUNJLHVDQUF1QztRQUN2QyxzRUFBc0U7SUFDMUU7O0FBRUE7UUFDSSxvQkFBb0I7UUFDcEIsWUFBWTtJQUNoQjs7QUFHSTtZQUNJLHVCQUF1QjtZQUN2Qix5Q0FBeUM7WUFDekMsZ0NBQWdDO1FBQ3BDIiwiZmlsZSI6InNyYy9pbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIHNwaW4ge1xuICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG5cbiAgICB0byB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNwaW5uZXIge1xuICAgIHRvIHt0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO31cbn1cblxuQGtleWZyYW1lcyBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlIHtcbiAgICAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxuXG4gICAgNTAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTtcbiAgICB9XG5cbiAgICAxMDAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB9XG59XG5cbnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBtaW4td2lkdGg6IDhyZW07XG5cbiAgICAmLnN1YnN0cmF0ZS1sb2FkaW5nIHtcbiAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTtcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgIHdpZHRoOiAxNnB4O1xuICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICBpbnNldDogMDtcbiAgICAgICAgICAgICAgICBtYXJnaW46IGF1dG87XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgICAgIGJvcmRlci10b3A6IDJweCBzb2xpZCBibGFjaztcbiAgICAgICAgICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IHNwaW5uZXIgMC42cyBsaW5lYXIgaW5maW5pdGU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAgJlthcmlhLWRpc2FibGVkPVwidHJ1ZVwiXSB7XG4gICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50XG4gICAgICAgIH1cbiAgICB9XG59XG4gIFxuYnV0dG9uLnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrO1xuICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLXRleHQsIHZhcigtLXN1YnN0cmF0ZS1wcmltYXJ5LCAjMzYzOTNkKSk7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLXN1YnN0cmF0ZS1mb250LCAnR2lsbCBTYW5zJywgJ0dpbGwgU2FucyBNVCcsIENhbGlicmksICdUcmVidWNoZXQgTVMnLCBzYW5zLXNlcmlmKTtcbiAgICBwYWRkaW5nOiAwLjVlbSAxZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZCwgdHJhbnNwYXJlbnQpO1xuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtbWVkaXVtLCAjOTk5ZGEwKTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWRpc2FibGVkLCAjZjdmN2Y1KTtcbiAgICB9XG5cbiAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICB9XG5cbiAgICAmOm5vdChbZGlzYWJsZWRdKSB7XG4gICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogLjJzO1xuICAgICAgICAgICAgYW5pbWF0aW9uLW5hbWU6IHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGU7XG4gICAgICAgICAgICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZTtcbiAgICAgICAgfVxuICAgIH1cbn0iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUF3Q25COztBQXRDSTtRQUNJLG9CQUFvQjtJQTBCeEI7O0FBeEJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFvQnhCOztBQWxCSTtnQkFDSSxrQkFBa0I7WUFDdEI7O0FBRUE7Z0JBQ0ksV0FBVztnQkFDWCx1QkFBdUI7Z0JBQ3ZCLHNCQUFzQjtnQkFDdEIsa0JBQWtCO2dCQUNsQixXQUFXO2dCQUNYLFlBQVk7Z0JBQ1osUUFBUTtnQkFDUixZQUFZO2dCQUNaLGtCQUFrQjtnQkFDbEIsMkJBQTJCO2dCQUMzQixtQ0FBbUM7Z0JBQ25DLHVDQUF1QztZQUMzQzs7QUFJUDtRQUNHLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSjs7QUFJUjtJQUNJLHVCQUF1QjtJQUN2QixzRUFBc0U7SUFDdEUsb0dBQW9HO0lBQ3BHLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsaUVBQWlFO0lBQ2pFLGdCQUFnQjtBQW1CcEI7O0FBakJJO1FBQ0ksdUNBQXVDO1FBQ3ZDLHNFQUFzRTtJQUMxRTs7QUFFQTtRQUNJLG9CQUFvQjtRQUNwQixZQUFZO0lBQ2hCOztBQUdJO1lBQ0ksdUJBQXVCO1lBQ3ZCLHlDQUF5QztZQUN6QyxnQ0FBZ0M7UUFDcEMiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBrZXlmcmFtZXMgc3BpbiB7XG4gICAgZnJvbSB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgIH1cblxuICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgICB9XG59XG5cbkBrZXlmcmFtZXMgc3Bpbm5lciB7XG4gICAgdG8ge3RyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7fVxufVxuXG5Aa2V5ZnJhbWVzIHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGUge1xuICAgIDAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB9XG5cbiAgICA1MCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOTUpO1xuICAgIH1cblxuICAgIDEwMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cbn1cblxuc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgIG1pbi13aWR0aDogOHJlbTtcblxuICAgICYuc3Vic3RyYXRlLWxvYWRpbmcge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlO1xuICAgICAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICAgICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgd2lkdGg6IDE2cHg7XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAxNnB4O1xuICAgICAgICAgICAgICAgIGluc2V0OiAwO1xuICAgICAgICAgICAgICAgIG1hcmdpbjogYXV0bztcbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXRvcDogMnB4IHNvbGlkIGJsYWNrO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yaWdodDogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogc3Bpbm5lciAwLjZzIGxpbmVhciBpbmZpbml0ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICAmW2FyaWEtZGlzYWJsZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnRcbiAgICAgICAgfVxuICAgIH1cbn1cbiAgXG5idXR0b24uc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tdGV4dCwgdmFyKC0tc3Vic3RyYXRlLXByaW1hcnksICMzNjM5M2QpKTtcbiAgICBmb250LWZhbWlseTogdmFyKC0tc3Vic3RyYXRlLWZvbnQsICdHaWxsIFNhbnMnLCAnR2lsbCBTYW5zIE1UJywgQ2FsaWJyaSwgJ1RyZWJ1Y2hldCBNUycsIHNhbnMtc2VyaWYpO1xuICAgIHBhZGRpbmc6IDAuNWVtIDFlbTtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLCB0cmFuc3BhcmVudCk7XG4gICAgYXBwZWFyYW5jZTogbm9uZTtcblxuICAgICY6YWN0aXZlIHtcbiAgICAgICAgY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1tZWRpdW0sICM5OTlkYTApO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZGlzYWJsZWQsICNmN2Y3ZjUpO1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgIH1cblxuICAgICY6bm90KFtkaXNhYmxlZF0pIHtcbiAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAuMnM7XG4gICAgICAgICAgICBhbmltYXRpb24tbmFtZTogc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZTtcbiAgICAgICAgICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xuICAgICAgICB9XG4gICAgfVxufSJdfQ== */

package/dist/index.d.ts

@@ -1,55 +1,7 @@
-declare global {
-    interface HTMLElementTagNameMap {
-        'substrate-button': SubstrateButton;
-    }
-}
-export declare class SubstrateButton extends HTMLElement {
-    static observedAttributes: string[];
-    static tag: string;
-    _isSpinning: boolean;
-    constructor();
-    get form(): HTMLFormElement | undefined | null;
-    get disabled(): boolean;
-    set disabled(disabledValue: boolean);
-    get type(): string | null | undefined;
-    get tabindex(): number;
-    get spinning(): boolean;
-    set spinning(value: boolean);
-    set type(value: string);
-    get autofocus(): boolean;
-    set autofocus(value: boolean);
-    /**
-     * Set attributes on the internal button element.
-     */
-    _setAttribute(name: string, value: boolean | string | null): void;
-    /**
-     * Remove from `this` and also button child.
-     */
-    _removeAttribute(name: string): void;
-    get button(): HTMLButtonElement | null;
-    /**
-     * Handle 'autofocus' attribute changes
-     * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
-     *
-     * @param  {string} oldValue The old attribute value
-     * @param  {string} newValue The new attribute value
-     */
-    handleChange_autofocus(_oldValue: string, newValue: string): void;
-    handleChange_disabled(_old: any, newValue: boolean | string): void;
-    handleChange_spinning(_: any, newValue: boolean): void;
-    /**
-     * Runs when the value of an attribute is changed.
-     *
-     * Should add methods to this class like `handleChange_class`, to
-     * listen for changes to `class` attribute.
-     *
-     * @param  {string} name     The attribute name
-     * @param  {string} oldValue The old attribute value
-     * @param  {string} newValue The new attribute value
-     */
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    connectedCallback(): void;
+import { SubstrateButton as SubstrateButtonLight } from './client.js';
+export declare class SubstrateButton extends SubstrateButtonLight {
     static define(): void;
+    connectedCallback(): void;
     render(): void;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAA;KACtC;CACJ;AAED,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;IAIjB,MAAM,CAAC,MAAM;IASb,MAAM;CAqBT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAIrE,qBAAa,eAAgB,SAAQ,oBAAoB;IACrD,MAAM,CAAC,MAAM;IASb,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CAwBT"}

package/dist/index.js

@@ -1,140 +1,21 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-class SubstrateButton extends HTMLElement {
+import { html } from "./html.js";
+import { SubstrateButton as SubstrateButtonLight } from "./client.js";
+class SubstrateButton extends SubstrateButtonLight {
   static {
     __name(this, "SubstrateButton");
   }
-  // for `attributeChangedCallback`
-  static observedAttributes = ["autofocus", "disabled", "spinning"];
-  static tag = "substrate-button";
-  _isSpinning;
-  constructor() {
-    super();
-    const disabled = this.getAttribute("disabled");
-    if (disabled !== null) {
-      setTimeout(() => {
-        this.disabled = true;
-      }, 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(disabledValue) {
-    if (!disabledValue) {
-      this._removeAttribute("disabled");
-      this.button?.setAttribute("aria-disabled", "false");
-    } else {
-      this.button?.setAttribute("disabled", "");
-      this.button?.setAttribute("aria-disabled", "true");
-    }
-  }
-  get type() {
-    return this.button?.getAttribute("type");
-  }
-  get tabindex() {
-    const i = this.button?.getAttribute("tabindex");
-    if (!i) return 0;
-    return parseInt(i);
-  }
-  get spinning() {
-    return this._isSpinning;
-  }
-  set spinning(value) {
-    if (value) this.setAttribute("spinning", "");
-    else this.removeAttribute("spinning");
-  }
-  set type(value) {
-    this._setAttribute("type", value);
-  }
-  get autofocus() {
-    return !!this.button?.hasAttribute("autofocus");
-  }
-  set autofocus(value) {
-    if (value) {
-      this._setAttribute("autofocus", value);
-    } else {
-      this._removeAttribute("autofocus");
-    }
-  }
-  /**
-   * Set attributes on the internal button element.
-   */
-  _setAttribute(name, value) {
-    if (value === false) {
-      this._removeAttribute(name);
-      this.button?.removeAttribute(name);
-    } else {
-      if (value === true) {
-        return this.button?.setAttribute(name, "");
-      }
-      if (value === null) {
-        return this._removeAttribute(name);
-      }
-      this.button?.setAttribute(name, value);
-    }
-  }
-  /**
-   * Remove from `this` and also button child.
-   */
-  _removeAttribute(name) {
-    this.removeAttribute(name);
-    this.button?.removeAttribute(name);
-  }
-  get button() {
-    return this.querySelector("button");
-  }
-  /**
-   * Handle 'autofocus' attribute changes
-   * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
-   *
-   * @param  {string} oldValue The old attribute value
-   * @param  {string} newValue The new attribute value
-   */
-  handleChange_autofocus(_oldValue, newValue) {
-    this._setAttribute("autofocus", newValue);
-  }
-  handleChange_disabled(_old, newValue) {
-    this.disabled = newValue !== null;
-    if (newValue === null) this.button?.removeAttribute("disabled");
-    else this.button?.setAttribute("disabled", "" + newValue);
-  }
-  handleChange_spinning(_, newValue) {
-    if (newValue !== null) {
-      this.classList.add("substrate-loading");
-    } else {
-      this.classList.remove("substrate-loading");
-    }
-  }
-  /**
-   * Runs when the value of an attribute is changed.
-   *
-   * Should add methods to this class like `handleChange_class`, to
-   * listen for changes to `class` attribute.
-   *
-   * @param  {string} name     The attribute name
-   * @param  {string} oldValue The old attribute value
-   * @param  {string} newValue The new attribute value
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    const handler = this[`handleChange_${name}`];
-    handler && handler.call(this, oldValue, newValue);
-  }
-  connectedCallback() {
-    this.render();
-  }
   static define() {
     if (!("customElements" in window)) return;
     return customElements.define(
-      SubstrateButton.tag || "substrate-button",
+      SubstrateButton.TAG || "substrate-button",
       SubstrateButton
     );
   }
+  connectedCallback() {
+    this.render();
+  }
   render() {
     const {
       type,
@@ -142,16 +23,19 @@ class SubstrateButton extends HTMLElement {
       tabindex,
       disabled
     } = this;
-    const classes = ["substrate-button"];
-    const btnProps = [
-      `class="${classes.join(" ")}"`,
-      disabled ? "disabled" : "",
-      autofocus ? "autofocus" : "",
-      type ? `type="${this.type}"` : "",
-      tabindex ? `tabindex="${tabindex}"` : 'tabindex="0"',
-      'role="button"'
-    ].filter(Boolean).join(" ");
-    this.innerHTML = `<button ${btnProps}>${this.innerHTML}</button>`;
+    const classes = [
+      "substrate-button",
+      this.getAttribute("class")
+    ];
+    const text = this.innerHTML;
+    const btnProps = {
+      classes: classes.filter(Boolean),
+      disabled,
+      autofocus,
+      tabindex,
+      type
+    };
+    this.innerHTML = html(btnProps, text);
   }
 }
 export {