@substrate-system/button 0.0.31 → 0.0.35

package/dist/client.min.cjs

@@ -0,0 +1,2 @@
+"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var b=(i,t)=>n(i,"name",{value:t,configurable:!0});var h=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},g=(i,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of l(t))!d.call(i,s)&&s!==e&&n(i,s,{get:()=>t[s],enumerable:!(o=a(t,s))||o.enumerable});return i};var A=i=>g(n({},"__esModule",{value:!0}),i);var c={};h(c,{SubstrateButton:()=>u});module.exports=A(c);var r=require("@substrate-system/web-component");class u extends r.WebComponent.create("substrate-button"){static{b(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;static define(){(0,r.define)(u.TAG,u)}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(){const t=this.button?.getAttribute("tabindex");return t?parseInt(t):0}get spinning(){return this._isSpinning}set spinning(t){t?(this.classList.add("spinning"),this.button?.classList.add("spinning"),this.button?.setAttribute("disabled",""),this.setAttribute("spinning","")):(this.classList.remove("spinning"),this.button?.classList.remove("spinning"),this.button?.removeAttribute("disabled"),this.removeAttribute("spinning"))}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){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("spinning"),this.button?.classList.add("spinning"),this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-busy","true")):(this.classList.remove("spinning"),this.button?.classList.remove("spinning"),this.button?.removeAttribute("disabled"),this.button?.setAttribute("aria-busy","false"))}connectedCallback(){this.render(),this._setupKeyboardHandlers()}_setupKeyboardHandlers(){this.button?.addEventListener("keydown",t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.button?.click())})}render(){}}
+//# sourceMappingURL=client.min.cjs.map

package/dist/client.min.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/client.ts"],
+  "sourcesContent": ["import { WebComponent, define } from '@substrate-system/web-component'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers.\n * It \"hydrates\" only, meaining sets up event listeners.\n * It does not know how to render itself.\n */\n\nexport class SubstrateButton extends WebComponent.create('substrate-button') {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        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) {\n            this.classList.add('spinning')\n            this.button?.classList.add('spinning')\n            this.button?.setAttribute('disabled', '')\n            this.setAttribute('spinning', '')\n        } else {\n            this.classList.remove('spinning')\n            this.button?.classList.remove('spinning')\n            this.button?.removeAttribute('disabled')\n            this.removeAttribute('spinning')\n        }\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        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('spinning')\n            this.button?.classList.add('spinning')\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-busy', 'true')\n        } else {\n            this.classList.remove('spinning')\n            this.button?.classList.remove('spinning')\n            this.button?.removeAttribute('disabled')\n            this.button?.setAttribute('aria-busy', 'false')\n        }\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    _setupKeyboardHandlers () {\n        // Space and Enter should trigger click\n        this.button?.addEventListener('keydown', (e:KeyboardEvent) => {\n            if (e.key === ' ' || e.key === 'Enter') {\n                e.preventDefault()\n                this.button?.click()\n            }\n        })\n    }\n\n    render () {\n        // noop\n    }\n}\n"],
+  "mappings": "4dAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAqC,2CAe9B,MAAMC,UAAwB,eAAa,OAAO,kBAAkB,CAAE,CAf7E,MAe6E,CAAAC,EAAA,wBAEzE,OAAO,mBAAqB,CAAC,YAAa,WAAY,UAAU,EAChE,OAAO,IAAM,mBACb,YAEA,OAAO,QAAU,IACb,UAAOD,EAAgB,IAAKA,CAAe,CAC/C,CAEA,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,SAAUE,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,MAAMC,EAAI,KAAK,QAAQ,aAAa,UAAU,EAC9C,OAAKA,EACE,SAASA,CAAC,EADF,CAEnB,CAEA,IAAI,UAAoB,CACpB,OAAO,KAAK,WAChB,CAEA,IAAI,SAAUC,EAAe,CACrBA,GACA,KAAK,UAAU,IAAI,UAAU,EAC7B,KAAK,QAAQ,UAAU,IAAI,UAAU,EACrC,KAAK,QAAQ,aAAa,WAAY,EAAE,EACxC,KAAK,aAAa,WAAY,EAAE,IAEhC,KAAK,UAAU,OAAO,UAAU,EAChC,KAAK,QAAQ,UAAU,OAAO,UAAU,EACxC,KAAK,QAAQ,gBAAgB,UAAU,EACvC,KAAK,gBAAgB,UAAU,EAEvC,CAEA,IAAI,KAAMA,EAAc,CACpB,KAAK,cAAc,OAAQA,CAAK,CACpC,CAEA,IAAI,WAAqB,CACrB,MAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,WAAW,CACnD,CAEA,IAAI,UAAWA,EAAe,CACtBA,EACA,KAAK,cAAc,YAAaA,CAAK,EAErC,KAAK,iBAAiB,WAAW,CAEzC,CAKA,cAAeC,EAAaD,EAAgC,CACxD,GAAIA,IAAU,GAEV,KAAK,iBAAiBC,CAAI,EAC1B,KAAK,QAAQ,gBAAgBA,CAAI,MAC9B,CACH,GAAID,IAAU,GAEV,OAAO,KAAK,QAAQ,aAAaC,EAAM,EAAE,EAG7C,GAAID,IAAU,KAEV,OAAO,KAAK,iBAAiBC,CAAI,EAIrC,KAAK,QAAQ,aAAaA,EAAMD,CAAK,CACzC,CACJ,CAKA,iBAAkBC,EAAa,CAC3B,KAAK,gBAAgBA,CAAI,EACzB,KAAK,QAAQ,gBAAgBA,CAAI,CACrC,CAEA,IAAI,QAAiC,CACjC,OAAO,KAAK,cAAc,QAAQ,CACtC,CASA,uBAAwBC,EAAkBC,EAAiB,CACvD,KAAK,cAAc,YAAaA,CAAQ,CAC5C,CAEA,sBAAuBC,EAAMD,EAAyB,CAClD,KAAK,SAAYA,IAAa,KAC1BA,IAAa,KAAM,KAAK,QAAQ,gBAAgB,UAAU,EACzD,KAAK,QAAQ,aAAa,WAAY,GAAKA,CAAQ,CAC5D,CAEA,sBAAuBE,EAAGF,EAAkB,CACpCA,IAAa,MACb,KAAK,UAAU,IAAI,UAAU,EAC7B,KAAK,QAAQ,UAAU,IAAI,UAAU,EACrC,KAAK,QAAQ,aAAa,WAAY,EAAE,EACxC,KAAK,QAAQ,aAAa,YAAa,MAAM,IAE7C,KAAK,UAAU,OAAO,UAAU,EAChC,KAAK,QAAQ,UAAU,OAAO,UAAU,EACxC,KAAK,QAAQ,gBAAgB,UAAU,EACvC,KAAK,QAAQ,aAAa,YAAa,OAAO,EAEtD,CAEA,mBAAqB,CAEjB,KAAK,OAAO,EACZ,KAAK,uBAAuB,CAChC,CAEA,wBAA0B,CAEtB,KAAK,QAAQ,iBAAiB,UAAYG,GAAoB,EACtDA,EAAE,MAAQ,KAAOA,EAAE,MAAQ,WAC3BA,EAAE,eAAe,EACjB,KAAK,QAAQ,MAAM,EAE3B,CAAC,CACL,CAEA,QAAU,CAEV,CACJ",
+  "names": ["client_exports", "__export", "SubstrateButton", "__toCommonJS", "import_web_component", "SubstrateButton", "__name", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "e"]
+}

package/dist/client.min.js

@@ -1,2 +1,2 @@
-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};
+var _=Object.defineProperty;var s=(i,t)=>_(i,"name",{value:t,configurable:!0});var E=Object.defineProperty,L=s((i,t)=>E(i,"name",{value:t,configurable:!0}),"__name");function b(i){return Object.keys(i).reduce((t,e)=>{let n=i[e];return n?typeof n=="boolean"?n?(t+` ${e}`).trim():t:Array.isArray(n)?t+` ${e}="${n.join(" ")}"`:(t+` ${e}="${n}"`).trim():t},"")}s(b,"toAttributes");L(b,"toAttributes");var y=Object.defineProperty,d=s((i,t)=>y(i,"name",{value:t,configurable:!0}),"__name");function h(i){return document.createElement(i).constructor!==window.HTMLElement}s(h,"isRegistered");d(h,"isRegistered");function w(i,t){window&&"customElements"in window&&(h(i)||window.customElements.define(i,t))}s(w,"define");d(w,"define");var S=document.querySelector.bind(document),q=document.querySelectorAll.bind(document);function l(i,t){return i.matches||(i=i.parentElement),i.matches(t)?i:i.closest(t)}s(l,"match");d(l,"match");var T=Object.defineProperty,a=s((i,t)=>T(i,"name",{value:t,configurable:!0}),"__name"),o=class i extends window.HTMLElement{static{s(this,"WebComponent")}static{a(this,"WebComponent")}static TAG="";TAG="";static match(t){return l(t,this.TAG)}_globalWildcardListeners=new Set;_namespacedWildcardListeners=new Set;static create(t){let e=class extends i{static{s(this,"CreatedClass")}static{a(this,"CreatedClass")}static TAG=t;TAG=t;render(){throw new Error("`render` should be implemented by children")}};return e.define=function(){return i.define.call(this)},e.event=function(n){return i.event.call(this,n)},e}static define(){u(this.TAG,this)}async attributeChangedCallback(t,e,n){let r=this[`handleChange_${t}`];r&&await r.call(this,e,n)}addEventListener(t,e,n){t===i.event.call(this,"*")?this._namespacedWildcardListeners.add({listener:e,options:n}):t==="*"?e&&this._globalWildcardListeners.add({listener:e,options:n}):super.addEventListener(t,e,n)}_notifyNamespacedWildcardListeners(t){if(this._namespacedWildcardListeners.size===0)return;let e=this.TAG;!e||!t.type.startsWith(`${e}:`)||this._namespacedWildcardListeners.forEach(({listener:n})=>{try{typeof n=="function"?n.call(this,t):n&&typeof n.handleEvent=="function"&&n.handleEvent(t)}catch(r){console.error("Error in namespaced wildcard event listener:",r)}})}_notifyGlobalWildcardListeners(t){this._globalWildcardListeners.size!==0&&this._globalWildcardListeners.forEach(({listener:e})=>{try{typeof e=="function"?e.call(this,t):e&&typeof e.handleEvent=="function"&&e.handleEvent(t)}catch(n){console.error("Error in global wildcard event listener:",n)}})}connectedCallback(){this.render()}qs(t){return this.querySelector(t)}qsa(t){return this.querySelectorAll(t)}static event(t){return f(this.TAG,t)}emit(t,e={}){if(t==="*")throw new Error('Do not emit the literal "*"');let{bubbles:n=!0,cancelable:r=!0,detail:p}=e,A=`${this.TAG}:${t}`,c=new CustomEvent(A,{bubbles:n,cancelable:r,detail:p}),v=this.dispatchEvent(c);return this._notifyNamespacedWildcardListeners(c),v}dispatchEvent(t){let e=super.dispatchEvent(t);return this._notifyGlobalWildcardListeners(t),e}dispatch(t,e={}){let n=new CustomEvent(t,{bubbles:e.bubbles===void 0?!0:e.bubbles,cancelable:e.cancelable===void 0?!0:e.cancelable,detail:e.detail});return this.dispatchEvent(n)}on(t,e,n){let r=i.event.call(this,t);this.addEventListener(r,e,n)}removeEventListener(t,e,n){if(t===i.event.call(this,"*")){if(e&&this._namespacedWildcardListeners){for(let r of this._namespacedWildcardListeners)if(r.listener===e){this._namespacedWildcardListeners.delete(r);break}}}else if(t==="*"){if(e&&this._globalWildcardListeners){for(let r of this._globalWildcardListeners)if(r.listener===e){this._globalWildcardListeners.delete(r);break}}}else super.removeEventListener(t,e,n)}};function f(i,t){return`${i}:${t}`}s(f,"eventName");a(f,"eventName");function m(i){return document.createElement(i).constructor!==window.HTMLElement}s(m,"isRegistered");a(m,"isRegistered");function u(i,t){window&&"customElements"in window&&(m(i)||window.customElements.define(i,t))}s(u,"define");a(u,"define");var g=class i extends o.create("substrate-button"){static{s(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static TAG="substrate-button";_isSpinning;static define(){u(i.TAG,i)}constructor(){super(),this.getAttribute("disabled")!==null&&setTimeout(()=>{this.disabled=!0},0),this.autofocus=this.getAttribute("autofocus")!==null,this._isSpinning=this.getAttribute("spinning")!==null}get form(){return this.button?.form}get disabled(){return!!this.button?.hasAttribute("disabled")}set disabled(t){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.classList.add("spinning"),this.button?.classList.add("spinning"),this.button?.setAttribute("disabled",""),this.setAttribute("spinning","")):(this.classList.remove("spinning"),this.button?.classList.remove("spinning"),this.button?.removeAttribute("disabled"),this.removeAttribute("spinning"))}set type(t){this._setAttribute("type",t)}get autofocus(){return!!this.button?.hasAttribute("autofocus")}set autofocus(t){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("spinning"),this.button?.classList.add("spinning"),this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-busy","true")):(this.classList.remove("spinning"),this.button?.classList.remove("spinning"),this.button?.removeAttribute("disabled"),this.button?.setAttribute("aria-busy","false"))}connectedCallback(){this.render(),this._setupKeyboardHandlers()}_setupKeyboardHandlers(){this.button?.addEventListener("keydown",t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),this.button?.click())})}render(){}};export{g as SubstrateButton};
 //# 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            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"]
+  "sources": ["../node_modules/@substrate-system/web-component/src/attributes.ts", "../node_modules/@substrate-system/web-component/src/util.ts", "../node_modules/@substrate-system/web-component/src/index.ts", "../src/client.ts"],
+  "sourcesContent": ["export type Attrs = Record<string, undefined|null|string|number|boolean|(string|number)[]>\n\n/**\n * Transform an object into an HTML attributes string. The object should be\n * like `{ attributeName: value }`.\n *\n * @param attrs An object for the attributes.\n * @returns {string} A string suitable for use as HTML attributes.\n */\nexport function toAttributes (attrs:Attrs):string {\n    return Object.keys(attrs).reduce((acc, k) => {\n        const value = attrs[k]\n        if (!value) return acc\n\n        if (typeof value === 'boolean') {\n            if (value) return (acc + ` ${k}`).trim()\n            return acc\n        }\n\n        if (Array.isArray(value)) {\n            return (acc + ` ${k}=\"${value.join(' ')}\"`)\n        }\n\n        return (acc + ` ${k}=\"${value}\"`).trim()\n    }, '')\n}\n", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "import { match as _match } from './util.js'\n\ninterface WildcardListenerEntry {\n    listener:EventListenerOrEventListenerObject\n    options?:boolean|AddEventListenerOptions\n}\n\nexport abstract class WebComponent extends window.HTMLElement {\n    static TAG:string = ''\n    TAG:string = ''\n\n    static match (el:HTMLElement):HTMLElement|null {\n        return _match(el, this.TAG)\n    }\n\n    /**\n     * Store global wildcard listeners (listen to all events)\n     * Triggered by ALL events dispatched through this element\n     * @private\n     */\n    private _globalWildcardListeners:Set<WildcardListenerEntry> = new Set()\n\n    /**\n     * Store namespaced wildcard listeners (listen to 'component-name:*')\n     * Triggered by events from emit() that match this component's namespace\n     * @private\n     */\n    private _namespacedWildcardListeners:Set<WildcardListenerEntry> = new Set()\n\n    static create (elementName:string):typeof WebComponent & {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n        define: typeof WebComponent.define;\n        event: typeof WebComponent.event;\n    } {\n        const CreatedClass = class extends WebComponent {\n            static TAG = elementName\n            TAG = elementName\n            render () {\n                throw new Error('`render` should be implemented by children')\n            }\n        }\n\n        // Copy static methods with proper binding\n        CreatedClass.define = function () {\n            return WebComponent.define.call(this)\n        }\n        CreatedClass.event = function (evType:string) {\n            return WebComponent.event.call(this, evType)\n        }\n\n        return CreatedClass\n    }\n\n    static define<T extends {\n        new (...args:any[]):WebComponent;\n        TAG:string;\n    }>(this:T) {\n        define(this.TAG, this)\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Depends on `static observedAttributes`.\n     *\n     * Should name methods like `handleChange_disabled`.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    async attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ):Promise<void> {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            await handler.call(this, oldValue, newValue)\n        }\n    }\n\n    /**\n     * Enhanced addEventListener that supports wildcards:\n     * - Component.event('*') - Listen to all namespaced events for this\n     *   component (e.g., 'my-component:*')\n     * - '*' - Listen to ALL events (namespaced and non-namespaced, including\n     *   normal DOM events)\n     *\n     * @param type - Event type, Component.event('*') for namespaced wildcard,\n     *   or '*' for global wildcard\n     * @param listener - Event listener function or object\n     * @param options - Event listener options\n     */\n    addEventListener (\n        type:string,\n        listener:EventListenerOrEventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ): void {\n        if (type === WebComponent.event.call(this, '*')) {\n            // Handle namespaced wildcard listener (component-name:*)\n            this._namespacedWildcardListeners.add({ listener, options })\n        } else if (type === '*') {\n            // Handle global wildcard listener (all events)\n            if (listener) {\n                this._globalWildcardListeners.add({ listener, options })\n            }\n        } else {\n            // Normal event listener - delegate to native implementation\n            super.addEventListener(type, listener, options)\n        }\n    }\n\n    /**\n     * Notify namespaced wildcard listeners of an event\n     * Only fires for events that match this component's namespace\n     *\n     * @param event - The event to dispatch to namespaced wildcard listeners\n     * @private\n     */\n    private _notifyNamespacedWildcardListeners (event: Event): void {\n        if (this._namespacedWildcardListeners.size === 0) {\n            return\n        }\n\n        const componentName = this.TAG\n\n        // Only trigger for events in this component's namespace\n        if (!componentName || !event.type.startsWith(`${componentName}:`)) {\n            return\n        }\n\n        // Call each namespaced wildcard listener\n        this._namespacedWildcardListeners.forEach(({ listener }) => {\n            try {\n                if (typeof listener === 'function') {\n                    listener.call(this, event)\n                } else if (listener && typeof listener.handleEvent === 'function') {\n                    listener.handleEvent(event)\n                }\n            } catch (error) {\n                // Log errors but don't let one listener break others\n                console.error(\n                    'Error in namespaced wildcard event listener:',\n                    error\n                )\n            }\n        })\n    }\n\n    /**\n     * Notify global wildcard listeners of an event\n     * Fires for ALL events dispatched through this element\n     *\n     * @param event - The event to dispatch to global wildcard listeners\n     * @private\n     */\n    private _notifyGlobalWildcardListeners (event: Event): void {\n        if (this._globalWildcardListeners.size === 0) {\n            return\n        }\n\n        // Call each global wildcard listener\n        this._globalWildcardListeners.forEach(({ listener }) => {\n            try {\n                if (typeof listener === 'function') {\n                    listener.call(this, event)\n                } else if (listener && typeof listener.handleEvent === 'function') {\n                    listener.handleEvent(event)\n                }\n            } catch (error) {\n            // Log errors but don't let one listener break others\n                console.error('Error in global wildcard event listener:', error)\n            }\n        })\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    abstract render ():any\n\n    qs<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qs<E extends Element = Element>(selector:string):E|null;\n    qs (selector:string):Element|null {\n        return this.querySelector(selector)\n    }\n\n    qsa<K extends keyof HTMLElementTagNameMap>(\n        selector:K\n    ):HTMLElementTagNameMap[K]|null;\n\n    qsa<E extends Element = Element>(selector:string):E|null;\n    qsa (selector:string):NodeListOf<Element> {\n        return this.querySelectorAll(selector)\n    }\n\n    /**\n     * Take a non-namepsaced event name, return namespace event name.\n     *\n     * @param {string} evType The non-namespace event name\n     * @returns {string} Namespaced event name, eg, `my-component:click`\n     */\n    static event (evType:string):string {\n        return eventName(this.TAG, evType)\n    }\n\n    /**\n     * Emit a namespaced event.\n     *\n     * @param type (non-namespaced) event type string\n     * @param opts `bubbles`, `detail`, and `cancelable`. Default is\n     * `{ bubbles: true, cancelable: true }`\n     * @returns {boolean}\n     */\n    emit<T = any> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        if (type === '*') throw new Error('Do not emit the literal \"*\"')\n\n        const { bubbles = true, cancelable = true, detail } = opts\n        const namespacedType = `${this.TAG}:${type}`\n\n        const event = new CustomEvent(namespacedType, {\n            bubbles,\n            cancelable,\n            detail\n        })\n\n        // This will trigger both specific listeners and global wildcard\n        // listeners (**)\n        const result = this.dispatchEvent(event)\n\n        // Notify namespaced wildcard listeners (*)\n        this._notifyNamespacedWildcardListeners(event)\n\n        return result\n    }\n\n    /**\n     * Override dispatchEvent to notify global wildcard listeners\n     * This ensures that '**' listeners catch ALL events\n     *\n     * @param event - The event to dispatch\n     * @returns true if the event was not cancelled\n     */\n    dispatchEvent (event: Event): boolean {\n        const result = super.dispatchEvent(event)\n\n        // Notify global wildcard listeners for ALL events\n        this._notifyGlobalWildcardListeners(event)\n\n        return result\n    }\n\n    /**\n     * Create and emit an event, no namespacing.\n     */\n    dispatch<T> (type:string, opts:Partial<{\n        bubbles:boolean,\n        cancelable:boolean,\n        detail:CustomEvent<T>['detail']\n    }> = {}):boolean {\n        const event = new CustomEvent(type, {\n            bubbles: (opts.bubbles === undefined) ? true : opts.bubbles,\n            cancelable: (opts.cancelable === undefined) ? true : opts.cancelable,\n            detail: opts.detail\n        })\n\n        return this.dispatchEvent(event)\n    }\n\n    /**\n     * Listen for namespaced events.\n     */\n    on<T extends Event = Event> (\n        evName:string,\n        handler:(ev:T)=>any,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void;\n\n    on (\n        evName:string,\n        handler:((ev:Event)=>any)|EventListenerObject,\n        options?:boolean|AddEventListenerOptions\n    ):void {\n        const fullEvName = WebComponent.event.call(this, evName)\n        this.addEventListener(fullEvName, handler as EventListenerOrEventListenerObject, options)\n    }\n\n    /**\n     * Enhanced removeEventListener that supports wildcards:\n     * - Component.event('*') - Remove namespaced wildcard listener\n     * - '*' - Remove global wildcard listener\n     *\n     * @param type - Event type, Component.event('*') for namespaced, or '*'\n     *   for global\n     * @param listener - Event listener function or object to remove\n     * @param options - Event listener options\n     */\n    removeEventListener (\n        type:string,\n        listener:EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions\n    ): void {\n        if (type === WebComponent.event.call(this, '*')) {\n            // Remove namespaced wildcard listener\n            if (listener && this._namespacedWildcardListeners) {\n                for (const entry of this._namespacedWildcardListeners) {\n                    if (entry.listener === listener) {\n                        this._namespacedWildcardListeners.delete(entry)\n                        break\n                    }\n                }\n            }\n        } else if (type === '*') {\n            // Remove global wildcard listener\n            if (listener && this._globalWildcardListeners) {\n                for (const entry of this._globalWildcardListeners) {\n                    if (entry.listener === listener) {\n                        this._globalWildcardListeners.delete(entry)\n                        break\n                    }\n                }\n            }\n        } else {\n            // Normal event listener - delegate to native implementation\n            super.removeEventListener(type, listener, options)\n        }\n    }\n}\n\nfunction eventName (namespace:string, evType:string) {\n    return `${namespace}:${evType}`\n}\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n", "import { WebComponent, define } from '@substrate-system/web-component'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\n/**\n * This is the lightweight version for browsers.\n * It \"hydrates\" only, meaining sets up event listeners.\n * It does not know how to render itself.\n */\n\nexport class SubstrateButton extends WebComponent.create('substrate-button') {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static TAG = 'substrate-button'\n    _isSpinning:boolean\n\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        if (disabled !== null) {\n            setTimeout(() => {\n                // need to wait for it to render\n                this.disabled = true\n            }, 0)\n        }\n        this.autofocus = (this.getAttribute('autofocus') !== null)\n        this._isSpinning = (this.getAttribute('spinning') !== null)\n    }\n\n    get form ():HTMLFormElement|undefined|null {\n        return this.button?.form\n    }\n\n    get disabled ():boolean {\n        return !!(this.button?.hasAttribute('disabled'))\n    }\n\n    set disabled (disabledValue:boolean) {\n        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) {\n            this.classList.add('spinning')\n            this.button?.classList.add('spinning')\n            this.button?.setAttribute('disabled', '')\n            this.setAttribute('spinning', '')\n        } else {\n            this.classList.remove('spinning')\n            this.button?.classList.remove('spinning')\n            this.button?.removeAttribute('disabled')\n            this.removeAttribute('spinning')\n        }\n    }\n\n    set type (value:string) {\n        this._setAttribute('type', value)\n    }\n\n    get autofocus ():boolean {\n        return !!(this.button?.hasAttribute('autofocus'))\n    }\n\n    set autofocus (value:boolean) {\n        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('spinning')\n            this.button?.classList.add('spinning')\n            this.button?.setAttribute('disabled', '')\n            this.button?.setAttribute('aria-busy', 'true')\n        } else {\n            this.classList.remove('spinning')\n            this.button?.classList.remove('spinning')\n            this.button?.removeAttribute('disabled')\n            this.button?.setAttribute('aria-busy', 'false')\n        }\n    }\n\n    connectedCallback () {\n        // connect event listeners\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    _setupKeyboardHandlers () {\n        // Space and Enter should trigger click\n        this.button?.addEventListener('keydown', (e:KeyboardEvent) => {\n            if (e.key === ' ' || e.key === 'Enter') {\n                e.preventDefault()\n                this.button?.click()\n            }\n        })\n    }\n\n    render () {\n        // noop\n    }\n}\n"],
+  "mappings": "sKASO,SAASA,EAAcC,EAAoB,CAC9C,OAAO,OAAO,KAAKA,CAAK,EAAE,OAAO,CAACC,EAAKC,IAAM,CACzC,IAAMC,EAAQH,EAAME,CAAC,EACrB,OAAKC,EAED,OAAOA,GAAU,UACbA,GAAeF,EAAM,IAAIC,CAAC,IAAI,KAAK,EAChCD,EAGP,MAAM,QAAQE,CAAK,EACXF,EAAM,IAAIC,CAAC,KAAKC,EAAM,KAAK,GAAG,CAAC,KAGnCF,EAAM,IAAIC,CAAC,KAAKC,CAAK,KAAK,KAAK,EAXpBF,CAYvB,EAAG,EAAE,CACT,CAhBgBG,EAAAL,EAAA,gBAAAK,EAAAL,EAAA,cAAA,yFCAT,SAASM,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBC,EAAAF,EAAA,gBAAAE,EAAAF,EAAA,cAAA,EAIT,SAASG,EAAQC,EAAaC,EAAkC,CAC9D,QACC,mBAAoB,SAErBL,EAAaI,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMC,CAAO,EAElD,CAPgBH,EAAAC,EAAA,UAAAD,EAAAC,EAAA,QAAA,EAST,IAAMG,EAAK,SAAS,cAAc,KAAK,QAAQ,EACzCC,EAAM,SAAS,iBAAiB,KAAK,QAAQ,EAQnD,SAASC,EAAOC,EAAgBC,EAA2B,CAC9D,OAAKD,EAAG,UAASA,EAAKA,EAAG,eAClBA,EAAG,QAAQC,CAAC,EAAID,EAAKA,EAAG,QAAQC,CAAC,CAC5C,CAHgBR,EAAAM,EAAA,SAAAN,EAAAM,EAAA,OAAA,yFCxBMG,EAAf,MAAeC,UAAqB,OAAO,WAAY,OAAA,CAAAC,EAAA,qBAP9D,MAO8D,CAAAA,EAAA,KAAA,cAAA,CAAA,CAC1D,OAAO,IAAa,GACpB,IAAa,GAEb,OAAO,MAAOC,EAAiC,CAC3C,OAAOC,EAAOD,EAAI,KAAK,GAAG,CAC9B,CAOQ,yBAAsD,IAAI,IAO1D,6BAA0D,IAAI,IAEtE,OAAO,OAAQE,EAKb,CACE,IAAMC,EAAe,cAAcL,CAAa,OAAA,CAAAC,EAAA,qBAnCxD,MAmCwD,CAAAA,EAAA,KAAA,cAAA,CAAA,CAC5C,OAAO,IAAMG,EACb,IAAMA,EACN,QAAU,CACN,MAAM,IAAI,MAAM,4CAA4C,CAChE,CACJ,EAGA,OAAAC,EAAa,OAAS,UAAY,CAC9B,OAAOL,EAAa,OAAO,KAAK,IAAI,CACxC,EACAK,EAAa,MAAQ,SAAUC,EAAe,CAC1C,OAAON,EAAa,MAAM,KAAK,KAAMM,CAAM,CAC/C,EAEOD,CACX,CAEA,OAAO,QAGI,CACPE,EAAO,KAAK,IAAK,IAAI,CACzB,CAaA,MAAM,yBACFC,EACAC,EACAC,EACY,CACZ,IAAMC,EAAU,KAAK,gBAAgBH,CAAI,EAAE,EACvCG,GACA,MAAMA,EAAQ,KAAK,KAAMF,EAAUC,CAAQ,CAEnD,CAcA,iBACIE,EACAC,EACAC,EACI,CACAF,IAASZ,EAAa,MAAM,KAAK,KAAM,GAAG,EAE1C,KAAK,6BAA6B,IAAI,CAAE,SAAAa,EAAU,QAAAC,CAAQ,CAAC,EACpDF,IAAS,IAEZC,GACA,KAAK,yBAAyB,IAAI,CAAE,SAAAA,EAAU,QAAAC,CAAQ,CAAC,EAI3D,MAAM,iBAAiBF,EAAMC,EAAUC,CAAO,CAEtD,CASQ,mCAAoCC,EAAoB,CAC5D,GAAI,KAAK,6BAA6B,OAAS,EAC3C,OAGJ,IAAMC,EAAgB,KAAK,IAGvB,CAACA,GAAiB,CAACD,EAAM,KAAK,WAAW,GAAGC,CAAa,GAAG,GAKhE,KAAK,6BAA6B,QAAQ,CAAC,CAAE,SAAAH,CAAS,IAAM,CACxD,GAAI,CACI,OAAOA,GAAa,WACpBA,EAAS,KAAK,KAAME,CAAK,EAClBF,GAAY,OAAOA,EAAS,aAAgB,YACnDA,EAAS,YAAYE,CAAK,CAElC,OAASE,EAAO,CAEZ,QAAQ,MACJ,+CACAA,CACJ,CACJ,CACJ,CAAC,CACL,CASQ,+BAAgCF,EAAoB,CACpD,KAAK,yBAAyB,OAAS,GAK3C,KAAK,yBAAyB,QAAQ,CAAC,CAAE,SAAAF,CAAS,IAAM,CACpD,GAAI,CACI,OAAOA,GAAa,WACpBA,EAAS,KAAK,KAAME,CAAK,EAClBF,GAAY,OAAOA,EAAS,aAAgB,YACnDA,EAAS,YAAYE,CAAK,CAElC,OAASE,EAAO,CAEZ,QAAQ,MAAM,2CAA4CA,CAAK,CACnE,CACJ,CAAC,CACL,CAEA,mBAAqB,CACjB,KAAK,OAAO,CAChB,CASA,GAAIC,EAA8B,CAC9B,OAAO,KAAK,cAAcA,CAAQ,CACtC,CAOA,IAAKA,EAAqC,CACtC,OAAO,KAAK,iBAAiBA,CAAQ,CACzC,CAQA,OAAO,MAAOZ,EAAsB,CAChC,OAAOa,EAAU,KAAK,IAAKb,CAAM,CACrC,CAUA,KAAeM,EAAaQ,EAIvB,CAAC,EAAW,CACb,GAAIR,IAAS,IAAK,MAAM,IAAI,MAAM,6BAA6B,EAE/D,GAAM,CAAE,QAAAS,EAAU,GAAM,WAAAC,EAAa,GAAM,OAAAC,CAAO,EAAIH,EAChDI,EAAiB,GAAG,KAAK,GAAG,IAAIZ,CAAI,GAEpCG,EAAQ,IAAI,YAAYS,EAAgB,CAC1C,QAAAH,EACA,WAAAC,EACA,OAAAC,CACJ,CAAC,EAIKE,EAAS,KAAK,cAAcV,CAAK,EAGvC,YAAK,mCAAmCA,CAAK,EAEtCU,CACX,CASA,cAAeV,EAAuB,CAClC,IAAMU,EAAS,MAAM,cAAcV,CAAK,EAGxC,YAAK,+BAA+BA,CAAK,EAElCU,CACX,CAKA,SAAab,EAAaQ,EAIrB,CAAC,EAAW,CACb,IAAML,EAAQ,IAAI,YAAYH,EAAM,CAChC,QAAUQ,EAAK,UAAY,OAAa,GAAOA,EAAK,QACpD,WAAaA,EAAK,aAAe,OAAa,GAAOA,EAAK,WAC1D,OAAQA,EAAK,MACjB,CAAC,EAED,OAAO,KAAK,cAAcL,CAAK,CACnC,CAiBA,GACIW,EACAf,EACAG,EACG,CACH,IAAMa,EAAa3B,EAAa,MAAM,KAAK,KAAM0B,CAAM,EACvD,KAAK,iBAAiBC,EAAYhB,EAA+CG,CAAO,CAC5F,CAYA,oBACIF,EACAC,EACAC,EACI,CACJ,GAAIF,IAASZ,EAAa,MAAM,KAAK,KAAM,GAAG,GAE1C,GAAIa,GAAY,KAAK,8BACjB,QAAWe,KAAS,KAAK,6BACrB,GAAIA,EAAM,WAAaf,EAAU,CAC7B,KAAK,6BAA6B,OAAOe,CAAK,EAC9C,KACJ,WAGDhB,IAAS,KAEhB,GAAIC,GAAY,KAAK,0BACjB,QAAWe,KAAS,KAAK,yBACrB,GAAIA,EAAM,WAAaf,EAAU,CAC7B,KAAK,yBAAyB,OAAOe,CAAK,EAC1C,KACJ,QAKR,MAAM,oBAAoBhB,EAAMC,EAAUC,CAAO,CAEzD,CACJ,EAEA,SAASK,EAAWU,EAAkBvB,EAAe,CACjD,MAAO,GAAGuB,CAAS,IAAIvB,CAAM,EACjC,CAFSL,EAAAkB,EAAA,aAAAlB,EAAAkB,EAAA,WAAA,EAWF,SAASW,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgB9B,EAAA6B,EAAA,gBAAA7B,EAAA6B,EAAA,cAAA,EAIT,SAASvB,EAAQC,EAAawB,EAAkC,CAC9D,QACC,mBAAoB,SAErBF,EAAatB,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMwB,CAAO,EAElD,CAPgB/B,EAAAM,EAAA,UAAAN,EAAAM,EAAA,QAAA,ECzVT,IAAM0B,EAAN,MAAMC,UAAwBC,EAAa,OAAO,kBAAkB,CAAE,CAf7E,MAe6E,CAAAC,EAAA,wBAEzE,OAAO,mBAAqB,CAAC,YAAa,WAAY,UAAU,EAChE,OAAO,IAAM,mBACb,YAEA,OAAO,QAAU,CACbC,EAAOH,EAAgB,IAAKA,CAAe,CAC/C,CAEA,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,SAAUI,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,GACA,KAAK,UAAU,IAAI,UAAU,EAC7B,KAAK,QAAQ,UAAU,IAAI,UAAU,EACrC,KAAK,QAAQ,aAAa,WAAY,EAAE,EACxC,KAAK,aAAa,WAAY,EAAE,IAEhC,KAAK,UAAU,OAAO,UAAU,EAChC,KAAK,QAAQ,UAAU,OAAO,UAAU,EACxC,KAAK,QAAQ,gBAAgB,UAAU,EACvC,KAAK,gBAAgB,UAAU,EAEvC,CAEA,IAAI,KAAMA,EAAc,CACpB,KAAK,cAAc,OAAQA,CAAK,CACpC,CAEA,IAAI,WAAqB,CACrB,MAAO,CAAC,CAAE,KAAK,QAAQ,aAAa,WAAW,CACnD,CAEA,IAAI,UAAWA,EAAe,CACtBA,EACA,KAAK,cAAc,YAAaA,CAAK,EAErC,KAAK,iBAAiB,WAAW,CAEzC,CAKA,cAAeC,EAAaD,EAAgC,CACxD,GAAIA,IAAU,GAEV,KAAK,iBAAiBC,CAAI,EAC1B,KAAK,QAAQ,gBAAgBA,CAAI,MAC9B,CACH,GAAID,IAAU,GAEV,OAAO,KAAK,QAAQ,aAAaC,EAAM,EAAE,EAG7C,GAAID,IAAU,KAEV,OAAO,KAAK,iBAAiBC,CAAI,EAIrC,KAAK,QAAQ,aAAaA,EAAMD,CAAK,CACzC,CACJ,CAKA,iBAAkBC,EAAa,CAC3B,KAAK,gBAAgBA,CAAI,EACzB,KAAK,QAAQ,gBAAgBA,CAAI,CACrC,CAEA,IAAI,QAAiC,CACjC,OAAO,KAAK,cAAc,QAAQ,CACtC,CASA,uBAAwBC,EAAkBC,EAAiB,CACvD,KAAK,cAAc,YAAaA,CAAQ,CAC5C,CAEA,sBAAuBC,EAAMD,EAAyB,CAClD,KAAK,SAAYA,IAAa,KAC1BA,IAAa,KAAM,KAAK,QAAQ,gBAAgB,UAAU,EACzD,KAAK,QAAQ,aAAa,WAAY,GAAKA,CAAQ,CAC5D,CAEA,sBAAuBE,EAAGF,EAAkB,CACpCA,IAAa,MACb,KAAK,UAAU,IAAI,UAAU,EAC7B,KAAK,QAAQ,UAAU,IAAI,UAAU,EACrC,KAAK,QAAQ,aAAa,WAAY,EAAE,EACxC,KAAK,QAAQ,aAAa,YAAa,MAAM,IAE7C,KAAK,UAAU,OAAO,UAAU,EAChC,KAAK,QAAQ,UAAU,OAAO,UAAU,EACxC,KAAK,QAAQ,gBAAgB,UAAU,EACvC,KAAK,QAAQ,aAAa,YAAa,OAAO,EAEtD,CAEA,mBAAqB,CAEjB,KAAK,OAAO,EACZ,KAAK,uBAAuB,CAChC,CAEA,wBAA0B,CAEtB,KAAK,QAAQ,iBAAiB,UAAYG,GAAoB,EACtDA,EAAE,MAAQ,KAAOA,EAAE,MAAQ,WAC3BA,EAAE,eAAe,EACjB,KAAK,QAAQ,MAAM,EAE3B,CAAC,CACL,CAEA,QAAU,CAEV,CACJ",
+  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "WebComponent", "_WebComponent", "__name", "el", "match", "elementName", "CreatedClass", "evType", "define", "name", "oldValue", "newValue", "handler", "type", "listener", "options", "event", "componentName", "error", "selector", "eventName", "opts", "bubbles", "cancelable", "detail", "namespacedType", "result", "evName", "fullEvName", "entry", "namespace", "isRegistered", "elName", "element", "SubstrateButton", "_SubstrateButton", "WebComponent", "__name", "define", "disabledValue", "i", "value", "name", "_oldValue", "newValue", "_old", "_", "e"]
 }

package/dist/html.cjs

@@ -33,7 +33,7 @@ function html(attrs, textContent) {
     ariaLabel
   } = attrs;
   const _classes = new Set(classes);
-  _classes.add("substrate-button");
+  _classes.add("substrate-button btn");
   const arr = Array.from(_classes);
   const btnProps = [
     arr.length ? `class="${arr.filter(Boolean).join(" ")}"` : "",
@@ -47,9 +47,9 @@ function html(attrs, textContent) {
     'aria-live="polite"'
   ].filter(Boolean).join(" ");
   return typeof window === "undefined" ? `<substrate-button${disabled ? " disabled" : ""}>
-            <button ${btnProps}>${textContent}</button>
+            <button ${btnProps}><span class="btn-content">${textContent}</span></button>
         </substrate-button>` : `<button ${btnProps}>
-            ${textContent}
+            <span class="btn-content">${textContent}</span>
         </button>`;
 }
 __name(html, "html");

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    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;",
+  "sourcesContent": ["export type Attrs = {\n    type:string|null;\n    autofocus:boolean;\n    tabindex:string|number;\n    disabled:boolean;\n    name:string|null;\n    classes:string[]|Set<string>;\n    ariaLabel:string|null;\n}\n\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name,\n        ariaLabel\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button btn')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        name ? `name=${name}` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"',\n        ariaLabel ? `aria-label=\"${ariaLabel}\"` : '',\n        'aria-live=\"polite\"'\n    ]).filter(Boolean).join(' ')\n\n    // rendering in node?\n    return typeof window === 'undefined' ?\n        `<substrate-button${disabled ? ' disabled' : ''}>\n            <button ${btnProps}><span class=\"btn-content\">${textContent}</span></button>\n        </substrate-button>` :\n        `<button ${btnProps}>\n            <span class=\"btn-content\">${textContent}</span>\n        </button>`\n}\n"],
+  "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,sBAAsB;AACnC,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,8BAA8B,WAAW;AAAA,+BAE/D,WAAW,QAAQ;AAAA,wCACa,WAAW;AAAA;AAEnD;AAnCgB;",
   "names": []
 }

package/dist/html.js

@@ -11,7 +11,7 @@ function html(attrs, textContent) {
     ariaLabel
   } = attrs;
   const _classes = new Set(classes);
-  _classes.add("substrate-button");
+  _classes.add("substrate-button btn");
   const arr = Array.from(_classes);
   const btnProps = [
     arr.length ? `class="${arr.filter(Boolean).join(" ")}"` : "",
@@ -25,9 +25,9 @@ function html(attrs, textContent) {
     'aria-live="polite"'
   ].filter(Boolean).join(" ");
   return typeof window === "undefined" ? `<substrate-button${disabled ? " disabled" : ""}>
-            <button ${btnProps}>${textContent}</button>
+            <button ${btnProps}><span class="btn-content">${textContent}</span></button>
         </substrate-button>` : `<button ${btnProps}>
-            ${textContent}
+            <span class="btn-content">${textContent}</span>
         </button>`;
 }
 __name(html, "html");

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    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;",
+  "sourcesContent": ["export type Attrs = {\n    type:string|null;\n    autofocus:boolean;\n    tabindex:string|number;\n    disabled:boolean;\n    name:string|null;\n    classes:string[]|Set<string>;\n    ariaLabel:string|null;\n}\n\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name,\n        ariaLabel\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button btn')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        name ? `name=${name}` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"',\n        ariaLabel ? `aria-label=\"${ariaLabel}\"` : '',\n        'aria-live=\"polite\"'\n    ]).filter(Boolean).join(' ')\n\n    // rendering in node?\n    return typeof window === 'undefined' ?\n        `<substrate-button${disabled ? ' disabled' : ''}>\n            <button ${btnProps}><span class=\"btn-content\">${textContent}</span></button>\n        </substrate-button>` :\n        `<button ${btnProps}>\n            <span class=\"btn-content\">${textContent}</span>\n        </button>`\n}\n"],
+  "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,sBAAsB;AACnC,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,8BAA8B,WAAW;AAAA,+BAE/D,WAAW,QAAQ;AAAA,wCACa,WAAW;AAAA;AAEnD;AAnCgB;",
   "names": []
 }

package/dist/html.min.cjs

@@ -0,0 +1,6 @@
+"use strict";var o=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var c=(n,t)=>o(n,"name",{value:t,configurable:!0});var m=(n,t)=>{for(var s in t)o(n,s,{get:t[s],enumerable:!0})},y=(n,t,s,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of f(t))!g.call(n,a)&&a!==s&&o(n,a,{get:()=>t[a],enumerable:!(e=$(t,a))||e.enumerable});return n};var x=n=>y(o({},"__esModule",{value:!0}),n);var A={};m(A,{html:()=>w});module.exports=x(A);function w(n,t){const{type:s,autofocus:e,tabindex:a,disabled:l,classes:p,name:r,ariaLabel:b}=n,i=new Set(p);i.add("substrate-button btn");const u=Array.from(i),d=[u.length?`class="${u.filter(Boolean).join(" ")}"`:"",l?"disabled":"",e?"autofocus":"",s?`type="${s}"`:"",r?`name=${r}`:"",a?`tabindex="${a}"`:'tabindex="0"','role="button"',b?`aria-label="${b}"`:"",'aria-live="polite"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${l?" disabled":""}>
+            <button ${d}><span class="btn-content">${t}</span></button>
+        </substrate-button>`:`<button ${d}>
+            <span class="btn-content">${t}</span>
+        </button>`}c(w,"html");
+//# sourceMappingURL=html.min.cjs.map

package/dist/html.min.cjs.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    name:string|null;\n    classes:string[]|Set<string>;\n    ariaLabel:string|null;\n}\n\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name,\n        ariaLabel\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button btn')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        name ? `name=${name}` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"',\n        ariaLabel ? `aria-label=\"${ariaLabel}\"` : '',\n        'aria-live=\"polite\"'\n    ]).filter(Boolean).join(' ')\n\n    // rendering in node?\n    return typeof window === 'undefined' ?\n        `<substrate-button${disabled ? ' disabled' : ''}>\n            <button ${btnProps}><span class=\"btn-content\">${textContent}</span></button>\n        </substrate-button>` :\n        `<button ${btnProps}>\n            <span class=\"btn-content\">${textContent}</span>\n        </button>`\n}\n"],
+  "mappings": "4dAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GAUO,SAASI,EAAMC,EAAsBC,EAAoB,CAC5D,KAAM,CACF,KAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,KAAAC,EACA,UAAAC,CACJ,EAAIR,EAEES,EAAW,IAAI,IAAIH,CAAO,EAChCG,EAAS,IAAI,sBAAsB,EACnC,MAAMC,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,8BAA8BV,CAAW;AAAA,6BAE/D,WAAWU,CAAQ;AAAA,wCACaV,CAAW;AAAA,kBAEnD,CAnCgBW,EAAAb,EAAA",
+  "names": ["html_exports", "__export", "html", "__toCommonJS", "html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "ariaLabel", "_classes", "arr", "btnProps", "__name"]
+}

package/dist/html.min.js

@@ -1,6 +1,6 @@
-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>`}u(p,"html");export{p as html};
+var p=Object.defineProperty;var u=(n,t)=>p(n,"name",{value:t,configurable:!0});function f(n,t){let{type:a,autofocus:d,tabindex:s,disabled:e,classes:c,name:o,ariaLabel:l}=n,r=new Set(c);r.add("substrate-button btn");let b=Array.from(r),i=[b.length?`class="${b.filter(Boolean).join(" ")}"`:"",e?"disabled":"",d?"autofocus":"",a?`type="${a}"`:"",o?`name=${o}`:"",s?`tabindex="${s}"`:'tabindex="0"','role="button"',l?`aria-label="${l}"`:"",'aria-live="polite"'].filter(Boolean).join(" ");return typeof window>"u"?`<substrate-button${e?" disabled":""}>
+            <button ${i}><span class="btn-content">${t}</span></button>
+        </substrate-button>`:`<button ${i}>
+            <span class="btn-content">${t}</span>
+        </button>`}u(f,"html");export{f 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    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",
+  "sourcesContent": ["export type Attrs = {\n    type:string|null;\n    autofocus:boolean;\n    tabindex:string|number;\n    disabled:boolean;\n    name:string|null;\n    classes:string[]|Set<string>;\n    ariaLabel:string|null;\n}\n\nexport function html (attrs:Partial<Attrs>, textContent:string) {\n    const {\n        type,\n        autofocus,\n        tabindex,\n        disabled,\n        classes,\n        name,\n        ariaLabel\n    } = attrs\n\n    const _classes = new Set(classes)\n    _classes.add('substrate-button btn')\n    const arr = Array.from(_classes)\n\n    const btnProps = ([\n        arr.length ? `class=\"${arr.filter(Boolean).join(' ')}\"` : '',\n        disabled ? 'disabled' : '',\n        autofocus ? 'autofocus' : '',\n        type ? `type=\"${type}\"` : '',\n        name ? `name=${name}` : '',\n        tabindex ? `tabindex=\"${tabindex}\"` : 'tabindex=\"0\"',\n        'role=\"button\"',\n        ariaLabel ? `aria-label=\"${ariaLabel}\"` : '',\n        'aria-live=\"polite\"'\n    ]).filter(Boolean).join(' ')\n\n    // rendering in node?\n    return typeof window === 'undefined' ?\n        `<substrate-button${disabled ? ' disabled' : ''}>\n            <button ${btnProps}><span class=\"btn-content\">${textContent}</span></button>\n        </substrate-button>` :\n        `<button ${btnProps}>\n            <span class=\"btn-content\">${textContent}</span>\n        </button>`\n}\n"],
+  "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,sBAAsB,EACnC,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,8BAA8BV,CAAW;AAAA,6BAE/D,WAAWU,CAAQ;AAAA,wCACaV,CAAW;AAAA,kBAEnD,CAnCgBW,EAAAb,EAAA",
   "names": ["html", "attrs", "textContent", "type", "autofocus", "tabindex", "disabled", "classes", "name", "ariaLabel", "_classes", "arr", "btnProps", "__name"]
 }

package/dist/index.cjs

@@ -23,20 +23,18 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_html = require("./html.js");
+var import_web_component = require("@substrate-system/web-component");
 var import_client = require("./client.js");
 class SubstrateButton extends import_client.SubstrateButton {
   static {
     __name(this, "SubstrateButton");
   }
   static define() {
-    if (!("customElements" in window)) return;
-    return customElements.define(
-      SubstrateButton.TAG || "substrate-button",
-      SubstrateButton
-    );
+    (0, import_web_component.define)(SubstrateButton.TAG, SubstrateButton);
   }
   connectedCallback() {
     this.render();
+    this._setupKeyboardHandlers();
   }
   render() {
     const {
@@ -47,9 +45,11 @@ class SubstrateButton extends import_client.SubstrateButton {
     } = this;
     const name = this.getAttribute("name");
     const ariaLabel = this.getAttribute("aria-label");
+    const spinning = this.getAttribute("spinning") !== null;
     const classes = [
       "substrate-button",
-      this.getAttribute("class")
+      this.getAttribute("class"),
+      spinning ? "spinning" : null
     ];
     const text = this.innerHTML;
     const btnProps = {
@@ -64,4 +64,5 @@ class SubstrateButton extends import_client.SubstrateButton {
     this.innerHTML = (0, import_html.html)(btnProps, text);
   }
 }
+(0, import_web_component.define)("substrate-button", SubstrateButton);
 //# sourceMappingURL=index.cjs.map

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\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;",
+  "sourcesContent": ["import { html } from './html.js'\nimport { define } from '@substrate-system/web-component'\nimport { SubstrateButton as SubstrateButtonLight } from './client.js'\n// import Debug from '@substrate-system/debug'\n// const debug = Debug('button')\n\n/**\n * This is the full-version -- knows how to render itself in the browser.\n */\nexport class SubstrateButton extends SubstrateButtonLight {\n    static define () {\n        define(SubstrateButton.TAG, SubstrateButton)\n    }\n\n    connectedCallback ():void {\n        this.render()\n        this._setupKeyboardHandlers()\n    }\n\n    render () {\n        const {\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 spinning = this.getAttribute('spinning') !== null\n\n        const classes:(string|null)[] = [\n            'substrate-button',\n            this.getAttribute('class'),\n            spinning ? 'spinning' : null\n        ]\n        const text = this.innerHTML\n\n        const btnProps = {\n            classes: classes.filter(Boolean),\n            disabled,\n            autofocus,\n            tabindex,\n            type,\n            name,\n            ariaLabel,\n        }\n\n        this.innerHTML = html(btnProps, text)\n    }\n}\n\ndefine('substrate-button', SubstrateButton)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;AACrB,2BAAuB;AACvB,oBAAwD;AAOjD,MAAM,wBAAwB,cAAAA,gBAAqB;AAAA,EAT1D,OAS0D;AAAA;AAAA;AAAA,EACtD,OAAO,SAAU;AACb,qCAAO,gBAAgB,KAAK,eAAe;AAAA,EAC/C;AAAA,EAEA,oBAA0B;AACtB,SAAK,OAAO;AACZ,SAAK,uBAAuB;AAAA,EAChC;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,WAAW,KAAK,aAAa,UAAU,MAAM;AAEnD,UAAM,UAA0B;AAAA,MAC5B;AAAA,MACA,KAAK,aAAa,OAAO;AAAA,MACzB,WAAW,aAAa;AAAA,IAC5B;AACA,UAAM,OAAO,KAAK;AAElB,UAAM,WAAW;AAAA,MACb,SAAS,QAAQ,OAAO,OAAO;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAEA,SAAK,gBAAY,kBAAK,UAAU,IAAI;AAAA,EACxC;AACJ;AAAA,IAEA,6BAAO,oBAAoB,eAAe;",
   "names": ["SubstrateButtonLight"]
 }

package/dist/index.css

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

package/dist/index.d.ts.map

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