@substrate-system/button 0.0.0

package/LICENSE

@@ -0,0 +1,121 @@
+# PolyForm Small Business License 1.0.0
+
+<https://polyformproject.org/licenses/small-business/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose.  However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software.  Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.  For example:
+
+> Required Notice: Copyright Nick Thomas. (https://nichoth.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## Small Business
+
+Use of the software for the benefit of your company is use for
+a permitted purpose if your company has fewer than 100 total
+individuals working as employees and independent contractors,
+and less than 1,000,000 USD (2019) total revenue in the prior
+tax year.  Adjust this revenue threshold for inflation according
+to the United States Bureau of Labor Statistics' consumer price
+index for all urban consumers, U.S. city average, for all items,
+not seasonally adjusted, with 1982–1984=100 reference base.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else.  These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or done anything with the software
+not covered by your licenses, your licenses can nonetheless
+continue if you come into full compliance with these terms,
+and take practical steps to correct past violations, within
+32 days of receiving notice.  Otherwise, all your licenses
+end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization.  **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

package/README.md

@@ -0,0 +1,146 @@
+# button
+![tests](https://github.com/substrate-system/button/actions/workflows/nodejs.yml/badge.svg)
+[![types](https://img.shields.io/npm/types/@substrate-system/button?style=flat-square)](README.md)
+[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)
+[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)
+[![install size](https://packagephobia.com/badge?p=@substrate-system/button)](https://packagephobia.com/result?p=@substrate-system/button)
+[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)
+[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)
+![GZip size](https://img.badgesize.com/substrate-system/button/main/README.md?compression=gzip)
+[![license](https://img.shields.io/badge/license-Polyform_Small_Business-249fbc?style=flat-square)](LICENSE)
+
+
+A button web component, with a visual "loading" state.
+
+[See a live demo](https://substrate-system.github.io/button/)
+
+<!-- toc -->
+
+- [install](#install)
+- [API](#api)
+  * [ESM](#esm)
+  * [Common JS](#common-js)
+- [CSS](#css)
+  * [Import CSS](#import-css)
+  * [Customize CSS via some variables](#customize-css-via-some-variables)
+- [use](#use)
+  * [JS](#js)
+  * [HTML](#html)
+  * [pre-built](#pre-built)
+
+<!-- tocstop -->
+
+## Install
+
+```sh
+npm i -S @substrate-system/button
+```
+
+## Dependencies
+
+Depends on these CSS variables, which are exposed in the
+[@substrate-system/css](https://github.com/substrate-system/css) package.
+
+```css
+:root {
+  --substrate-medium: #999da0;
+  --substrate-button-text: #36393d;
+  --substrate-primary: #36393d;
+  --substrate-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  --substrate-button-background: #f5f5f5;
+  --substrate-button-shadow: #00000054;
+  --substrate-button-background-focus: #ededed;
+  --substrate-button-background-hover: #e6e6e6;
+}
+```
+
+## API
+
+This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
+
+### ESM
+```js
+import { SubstrateButton } from '@substrate-system/button'
+```
+
+### Common JS
+```js
+const { SubstrateButton } = require('@substrate-system/button')
+```
+
+## CSS
+
+### Import CSS
+
+```js
+import '@substrate-system/button/css'
+```
+
+Or minified:
+```js
+import '@substrate-system/button/css/min'
+```
+
+### Customize CSS via some variables
+
+```css
+substrate-button {
+    --example: pink;
+}
+```
+
+## Use
+
+You will need to set a name for this custom element.
+
+> [!CAUTION]  
+> If you change the name of the web component, it will break the CSS.
+
+
+To use the default, call
+`.define()`:
+
+```js
+import { SubstrateButton } from '@substrate-system/button'
+
+// create a web component named `substrate-button`
+SubstrateButton.define()
+```
+
+Or override the `tag` property to change the tag name:
+```js
+import { SubstrateButton } from '@substrate-system/button'
+
+// set a custom name
+SubstrateButton.tag = 'cool-button'
+
+SubstrateButton.define()
+```
+
+### HTML
+```html
+<div>
+    <substrate-button></substrate-button>
+</div>
+```
+
+### pre-built
+This package exposes minified JS and CSS files too. Copy them to a location that is
+accessible to your web server, then link to them in HTML.
+
+#### copy
+```sh
+cp ./node_modules/@substrate-system/button/dist/index.min.js ./public/substrate-button.min.js
+cp ./node_modules/@substrate-system/button/dist/style.min.css ./public/substrate-button.css
+```
+
+#### HTML
+```html
+<head>
+    <link rel="stylesheet" href="./substrate-button.css">
+</head>
+<body>
+    <!-- ... -->
+    <script type="module" src="./substrate-button.min.js"></script>
+</body>
+```

package/dist/index.cjs

@@ -0,0 +1,172 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  SubstrateButton: () => SubstrateButton
+});
+module.exports = __toCommonJS(index_exports);
+class SubstrateButton extends HTMLElement {
+  static {
+    __name(this, "SubstrateButton");
+  }
+  // for `attributeChangedCallback`
+  static observedAttributes = ["autofocus", "disabled", "spinning"];
+  static tag = "substrate-button";
+  _isSpinning;
+  constructor() {
+    super();
+    const disabled = this.getAttribute("disabled");
+    this.disabled = disabled !== null;
+    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");
+  }
+  get type() {
+    return this.button?.getAttribute("type");
+  }
+  get tabindex() {
+    const i = this.button?.getAttribute("tabindex");
+    if (!i) return 0;
+    return parseInt(i);
+  }
+  get spinning() {
+    return this._isSpinning;
+  }
+  set spinning(value) {
+    if (value) this.setAttribute("spinning", "");
+    else this.removeAttribute("spinning");
+  }
+  set type(value) {
+    this._setAttribute("type", value);
+  }
+  set disabled(disabledValue) {
+    if (!disabledValue) {
+      this._removeAttribute("disabled");
+      this.button?.setAttribute("aria-disabled", "false");
+    } else {
+      this.button?.setAttribute("disabled", "");
+      this.button?.setAttribute("aria-disabled", "true");
+    }
+  }
+  get autofocus() {
+    return !!this.button?.hasAttribute("autofocus");
+  }
+  set autofocus(value) {
+    if (value) {
+      this._setAttribute("autofocus", value);
+    } else {
+      this._removeAttribute("autofocus");
+    }
+  }
+  _setAttribute(name, value) {
+    if (value === false) {
+      this._removeAttribute(name);
+      this.button?.removeAttribute(name);
+    } else {
+      if (value === true) {
+        return this.button?.setAttribute(name, "");
+      }
+      if (value === null) {
+        return this._removeAttribute(name);
+      }
+      this.button?.setAttribute(name, value);
+    }
+  }
+  /**
+   * Remove from `this` and also button child.
+   */
+  _removeAttribute(name) {
+    this.removeAttribute(name);
+    this.button?.removeAttribute(name);
+  }
+  get button() {
+    return this.querySelector("button");
+  }
+  /**
+   * Handle 'autofocus' attribute changes
+   * @see {@link https://gomakethings.com/how-to-detect-when-attributes-change-on-a-web-component/#organizing-your-code Go Make Things article}
+   *
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  handleChange_autofocus(_oldValue, newValue) {
+    this._setAttribute("autofocus", newValue);
+  }
+  handleChange_disabled(_old, newValue) {
+    this._setAttribute("disbaled", newValue);
+  }
+  handleChange_spinning(_, newValue) {
+    if (newValue !== null) {
+      this.classList.add("substrate-loading");
+    } else {
+      this.classList.remove("substrate-loading");
+    }
+  }
+  /**
+   * Runs when the value of an attribute is changed.
+   *
+   * Should add methods to this class like `handleChange_class`, to
+   * listen for changes to `class` attribute.
+   *
+   * @param  {string} name     The attribute name
+   * @param  {string} oldValue The old attribute value
+   * @param  {string} newValue The new attribute value
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    const handler = this[`handleChange_${name}`];
+    handler && handler.call(this, oldValue, newValue);
+  }
+  connectedCallback() {
+    this.render();
+  }
+  static define() {
+    if (!("customElements" in window)) return;
+    return customElements.define(
+      SubstrateButton.tag || "substrate-button",
+      SubstrateButton
+    );
+  }
+  render() {
+    const {
+      type,
+      autofocus,
+      tabindex,
+      disabled
+    } = this;
+    const classes = ["substrate-button"];
+    const btnProps = [
+      `class="${classes.join(" ")}"`,
+      disabled ? "disabled" : "",
+      autofocus ? "autofocus" : "",
+      type ? `type="${this.type}"` : "",
+      tabindex ? `tabindex=${tabindex}` : "0",
+      'role="button"'
+    ].filter(Boolean).join(" ");
+    this.innerHTML = `<button ${btnProps}>
+            ${this.innerHTML}
+        </button>`;
+  }
+}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static tag = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        this.disabled = disabled !== null\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    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    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 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    _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 mean 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._setAttribute('disbaled', newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n        } else {\n            this.classList.remove('substrate-loading')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.tag || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    render () {\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n        } = this\n\n        const classes:string[] = ['substrate-button']\n\n        const btnProps = ([\n            `class=\"${classes.join(' ')}\"`,\n            disabled ? 'disabled' : '',\n            autofocus ? 'autofocus' : '',\n            type ? `type=\"${this.type}\"` : '',\n            tabindex ? `tabindex=${tabindex}` : '0',\n            'role=\"button\"'\n        ]).filter(Boolean).join(' ')\n\n        this.innerHTML = `<button ${btnProps}>\n            ${this.innerHTML}\n        </button>`\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.css

@@ -0,0 +1,121 @@
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinner {
+    to {transform: rotate(360deg);}
+}
+
+@keyframes substrate-button-activate {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.95);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+substrate-button {
+    display: inline-block;
+    user-select: none;
+    min-width: 8rem;
+}
+
+substrate-button.substrate-loading {
+        pointer-events: none;
+    }
+
+substrate-button.substrate-loading button {
+            color: transparent;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+:is(substrate-button.substrate-loading button):hover {
+                color: transparent;
+                background: var(--substrate-medium, #999da0)!important;
+            }
+
+: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 button {
+        border: 1px solid black;
+        color: var(--substrate-button-text, var(--substrate-primary, #36393d));
+        width: 100%;
+        font-family: var(--substrate-font, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif);
+        padding: 0.5em 1em;
+        position: relative;
+        background-color: var(--substrate-button-background, transparent);
+        transition: background-color 0.3s ease, color 0.3s ease;
+        box-shadow: 0 1px 2px var(--substrate-button-shadow);
+        appearance: none;
+    }
+
+:is(substrate-button button):focus {
+            background-color: var(--substrate-button-background-focus, #f7f7f5);
+            outline: none;
+        }
+
+[disabled]:is(substrate-button button),:is(substrate-button button):active {
+            color: var(--substrate-medium, #999da0);
+            background-color: var(--substrate-button-background-disabled, #f7f7f5);
+        }
+
+:is(substrate-button button):active {
+            animation-duration: .2s;
+            animation-name: substrate-button-activate;
+            transition-timing-function: ease;
+        }
+
+[type="icon"]:is(substrate-button button) button {
+                background: none;
+                box-shadow: none;
+            }
+
+[type="icon"]:is(substrate-button button) substrate-icon {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+:is(substrate-button button):not([disabled]):hover {
+            background-color: var(--substrate-button-background-hover, #e6e6e6)!important;
+            cursor: pointer;
+        }
+
+substrate-button[aria-disabled="true"] {
+        user-select: none;
+        background-color: transparent;
+    }
+
+substrate-button[aria-disabled="true"] button {
+            user-select: none;
+            background-color: transparent
+        }
+  
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUF5Rm5COztBQXZGSTtRQUNJLG9CQUFvQjtJQTJCeEI7O0FBekJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFxQnhCOztBQW5CSTtnQkFDSSxrQkFBa0I7Z0JBQ2xCLHNEQUFzRDtZQUMxRDs7QUFFQTtnQkFDSSxXQUFXO2dCQUNYLHVCQUF1QjtnQkFDdkIsc0JBQXNCO2dCQUN0QixrQkFBa0I7Z0JBQ2xCLFdBQVc7Z0JBQ1gsWUFBWTtnQkFDWixRQUFRO2dCQUNSLFlBQVk7Z0JBQ1osa0JBQWtCO2dCQUNsQiwyQkFBMkI7Z0JBQzNCLG1DQUFtQztnQkFDbkMsdUNBQXVDO1lBQzNDOztBQUlSO1FBQ0ksdUJBQXVCO1FBQ3ZCLHNFQUFzRTtRQUN0RSxXQUFXO1FBQ1gsb0dBQW9HO1FBQ3BHLGtCQUFrQjtRQUNsQixrQkFBa0I7UUFDbEIsaUVBQWlFO1FBQ2pFLHVEQUF1RDtRQUN2RCxvREFBb0Q7UUFDcEQsZ0JBQWdCO0lBb0NwQjs7QUFsQ0k7WUFDSSxtRUFBbUU7WUFDbkUsYUFBYTtRQUNqQjs7QUFFQTtZQUNJLHVDQUF1QztZQUN2QyxzRUFBc0U7UUFDMUU7O0FBRUE7WUFDSSx1QkFBdUI7WUFDdkIseUNBQXlDO1lBQ3pDLGdDQUFnQztRQUNwQzs7QUFHSTtnQkFDSSxnQkFBZ0I7Z0JBQ2hCLGdCQUFnQjtZQUNwQjs7QUFFQTtnQkFDSSxrQkFBa0I7Z0JBQ2xCLFFBQVE7Z0JBQ1IsU0FBUztnQkFDVCxnQ0FBZ0M7WUFDcEM7O0FBR0o7WUFDSSw2RUFBNkU7WUFDN0UsZUFBZTtRQUNuQjs7QUFHSjtRQUNJLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgbWluLXdpZHRoOiA4cmVtO1xuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHZhcigtLXN1YnN0cmF0ZS1tZWRpdW0sICM5OTlkYTApIWltcG9ydGFudDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgd2lkdGg6IDE2cHg7XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAxNnB4O1xuICAgICAgICAgICAgICAgIGluc2V0OiAwO1xuICAgICAgICAgICAgICAgIG1hcmdpbjogYXV0bztcbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXRvcDogMnB4IHNvbGlkIGJsYWNrO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yaWdodDogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogc3Bpbm5lciAwLjZzIGxpbmVhciBpbmZpbml0ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICYgYnV0dG9uIHtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gICAgICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLXRleHQsIHZhcigtLXN1YnN0cmF0ZS1wcmltYXJ5LCAjMzYzOTNkKSk7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBmb250LWZhbWlseTogdmFyKC0tc3Vic3RyYXRlLWZvbnQsICdHaWxsIFNhbnMnLCAnR2lsbCBTYW5zIE1UJywgQ2FsaWJyaSwgJ1RyZWJ1Y2hldCBNUycsIHNhbnMtc2VyaWYpO1xuICAgICAgICBwYWRkaW5nOiAwLjVlbSAxZW07XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLCB0cmFuc3BhcmVudCk7XG4gICAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCBjb2xvciAwLjNzIGVhc2U7XG4gICAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDJweCB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLXNoYWRvdyk7XG4gICAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG5cbiAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZm9jdXMsICNmN2Y3ZjUpO1xuICAgICAgICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGlzYWJsZWRdLCAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLW1lZGl1bSwgIzk5OWRhMCk7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZGlzYWJsZWQsICNmN2Y3ZjUpO1xuICAgICAgICB9XG5cbiAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAuMnM7XG4gICAgICAgICAgICBhbmltYXRpb24tbmFtZTogc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZTtcbiAgICAgICAgICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xuICAgICAgICB9XG5cbiAgICAgICAgJlt0eXBlPVwiaWNvblwiXSB7XG4gICAgICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmIHN1YnN0cmF0ZS1pY29uIHtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgdG9wOiA1MCU7XG4gICAgICAgICAgICAgICAgbGVmdDogNTAlO1xuICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJjpub3QoW2Rpc2FibGVkXSk6aG92ZXIge1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWhvdmVyLCAjZTZlNmU2KSFpbXBvcnRhbnQ7XG4gICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmW2FyaWEtZGlzYWJsZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnRcbiAgICAgICAgfVxuICAgIH1cbn1cbiAgIl19 */

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static tag = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        this.disabled = disabled !== null\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    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    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 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    _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 mean 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._setAttribute('disbaled', newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n        } else {\n            this.classList.remove('substrate-loading')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.tag || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    render () {\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n        } = this\n\n        const classes:string[] = ['substrate-button']\n\n        const btnProps = ([\n            `class=\"${classes.join(' ')}\"`,\n            disabled ? 'disabled' : '',\n            autofocus ? 'autofocus' : '',\n            type ? `type=\"${this.type}\"` : '',\n            tabindex ? `tabindex=${tabindex}` : '0',\n            'role=\"button\"'\n        ]).filter(Boolean).join(' ')\n\n        this.innerHTML = `<button ${btnProps}>\n            ${this.innerHTML}\n        </button>`\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.min.css

@@ -0,0 +1,2 @@
+@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner{to{transform:rotate(1turn)}}@keyframes substrate-button-activate{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}substrate-button{display:inline-block;min-width:8rem;user-select:none}substrate-button.substrate-loading{pointer-events:none}substrate-button.substrate-loading button{color:transparent;pointer-events:none;transition:all .3s ease}:is(substrate-button.substrate-loading button):hover{background:var(--substrate-medium,#999da0)!important;color:transparent}:is(substrate-button.substrate-loading button):after{animation:spinner .6s linear infinite;background:transparent;border-radius:50%;border-right:2px solid transparent;border-top:2px solid #000;box-sizing:border-box;content:"";height:16px;inset:0;margin:auto;position:absolute;width:16px}substrate-button button{appearance:none;background-color:var(--substrate-button-background,transparent);border:1px solid #000;box-shadow:0 1px 2px var(--substrate-button-shadow);color:var(--substrate-button-text,var(--substrate-primary,#36393d));font-family:var(--substrate-font,"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif);padding:.5em 1em;position:relative;transition:background-color .3s ease,color .3s ease;width:100%}:is(substrate-button button):focus{background-color:var(--substrate-button-background-focus,#f7f7f5);outline:none}:is(substrate-button button):active,[disabled]:is(substrate-button button){background-color:var(--substrate-button-background-disabled,#f7f7f5);color:var(--substrate-medium,#999da0)}:is(substrate-button button):active{animation-duration:.2s;animation-name:substrate-button-activate;transition-timing-function:ease}[type=icon]:is(substrate-button button) button{background:none;box-shadow:none}[type=icon]:is(substrate-button button) substrate-icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}:is(substrate-button button):not([disabled]):hover{background-color:var(--substrate-button-background-hover,#e6e6e6)!important;cursor:pointer}substrate-button[aria-disabled=true],substrate-button[aria-disabled=true] button{background-color:transparent;user-select:none}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQ0ksR0FDSSxzQkFDSixDQUVBLEdBQ0ksdUJBQ0osQ0FDSixDQUVBLG1CQUNJLEdBQUksdUJBQTBCLENBQ2xDLENBRUEscUNBQ0ksR0FDSSxrQkFDSixDQUVBLElBQ0ksb0JBQ0osQ0FFQSxHQUNJLGtCQUNKLENBQ0osQ0FFQSxpQkFDSSxvQkFBcUIsQ0FFckIsY0FBZSxDQURmLGdCQTBGSixDQXZGSSxtQ0FDSSxtQkEyQkosQ0F6QkksMENBQ0ksaUJBQWtCLENBRWxCLG1CQUFvQixDQURwQix1QkFzQkosQ0FuQkkscURBRUksb0RBQXNELENBRHRELGlCQUVKLENBRUEscURBWUkscUNBQXVDLENBVnZDLHNCQUF1QixDQU92QixpQkFBa0IsQ0FFbEIsa0NBQW1DLENBRG5DLHlCQUEyQixDQVAzQixxQkFBc0IsQ0FGdEIsVUFBVyxDQUtYLFdBQVksQ0FDWixPQUFRLENBQ1IsV0FBWSxDQUpaLGlCQUFrQixDQUNsQixVQVFKLENBSVIsd0JBVUksZUFBZ0IsQ0FIaEIsK0RBQWlFLENBTmpFLHFCQUF1QixDQVF2QixtREFBb0QsQ0FQcEQsbUVBQXNFLENBRXRFLDhGQUFvRyxDQUNwRyxnQkFBa0IsQ0FDbEIsaUJBQWtCLENBRWxCLG1EQUF1RCxDQUx2RCxVQTJDSixDQWxDSSxtQ0FDSSxpRUFBbUUsQ0FDbkUsWUFDSixDQUVBLDJFQUVJLG9FQUFzRSxDQUR0RSxxQ0FFSixDQUVBLG9DQUNJLHNCQUF1QixDQUN2Qix3Q0FBeUMsQ0FDekMsK0JBQ0osQ0FHSSwrQ0FDSSxlQUFnQixDQUNoQixlQUNKLENBRUEsdURBR0ksUUFBUyxDQUZULGlCQUFrQixDQUNsQixPQUFRLENBRVIsOEJBQ0osQ0FHSixtREFDSSwyRUFBNkUsQ0FDN0UsY0FDSixDQU9BLGlGQUVJLDRCQUE0QixDQUQ1QixnQkFFSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgbWluLXdpZHRoOiA4cmVtO1xuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHZhcigtLXN1YnN0cmF0ZS1tZWRpdW0sICM5OTlkYTApIWltcG9ydGFudDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgd2lkdGg6IDE2cHg7XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAxNnB4O1xuICAgICAgICAgICAgICAgIGluc2V0OiAwO1xuICAgICAgICAgICAgICAgIG1hcmdpbjogYXV0bztcbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXRvcDogMnB4IHNvbGlkIGJsYWNrO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yaWdodDogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogc3Bpbm5lciAwLjZzIGxpbmVhciBpbmZpbml0ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICYgYnV0dG9uIHtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgYmxhY2s7XG4gICAgICAgIGNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLXRleHQsIHZhcigtLXN1YnN0cmF0ZS1wcmltYXJ5LCAjMzYzOTNkKSk7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBmb250LWZhbWlseTogdmFyKC0tc3Vic3RyYXRlLWZvbnQsICdHaWxsIFNhbnMnLCAnR2lsbCBTYW5zIE1UJywgQ2FsaWJyaSwgJ1RyZWJ1Y2hldCBNUycsIHNhbnMtc2VyaWYpO1xuICAgICAgICBwYWRkaW5nOiAwLjVlbSAxZW07XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLCB0cmFuc3BhcmVudCk7XG4gICAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCBjb2xvciAwLjNzIGVhc2U7XG4gICAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDJweCB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLXNoYWRvdyk7XG4gICAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG5cbiAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZm9jdXMsICNmN2Y3ZjUpO1xuICAgICAgICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGlzYWJsZWRdLCAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLW1lZGl1bSwgIzk5OWRhMCk7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQtZGlzYWJsZWQsICNmN2Y3ZjUpO1xuICAgICAgICB9XG5cbiAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAuMnM7XG4gICAgICAgICAgICBhbmltYXRpb24tbmFtZTogc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZTtcbiAgICAgICAgICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xuICAgICAgICB9XG5cbiAgICAgICAgJlt0eXBlPVwiaWNvblwiXSB7XG4gICAgICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmIHN1YnN0cmF0ZS1pY29uIHtcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgdG9wOiA1MCU7XG4gICAgICAgICAgICAgICAgbGVmdDogNTAlO1xuICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJjpub3QoW2Rpc2FibGVkXSk6aG92ZXIge1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi1iYWNrZ3JvdW5kLWhvdmVyLCAjZTZlNmU2KSFpbXBvcnRhbnQ7XG4gICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmW2FyaWEtZGlzYWJsZWQ9XCJ0cnVlXCJdIHtcbiAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnRcbiAgICAgICAgfVxuICAgIH1cbn1cbiAgIl19 */

package/dist/index.min.js

@@ -0,0 +1,4 @@
+var b=Object.defineProperty;var r=(s,t)=>b(s,"name",{value:t,configurable:!0});var u=class s extends HTMLElement{static{r(this,"SubstrateButton")}static observedAttributes=["autofocus","disabled","spinning"];static tag="substrate-button";_isSpinning;constructor(){super();let t=this.getAttribute("disabled");this.disabled=t!==null,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")}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)}set disabled(t){t?(this.button?.setAttribute("disabled",""),this.button?.setAttribute("aria-disabled","true")):(this._removeAttribute("disabled"),this.button?.setAttribute("aria-disabled","false"))}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._setAttribute("disbaled",e)}handleChange_spinning(t,e){e!==null?this.classList.add("substrate-loading"):this.classList.remove("substrate-loading")}attributeChangedCallback(t,e,i){let n=this[`handleChange_${t}`];n&&n.call(this,e,i)}connectedCallback(){this.render()}static define(){if("customElements"in window)return customElements.define(s.tag||"substrate-button",s)}render(){let{type:t,autofocus:e,tabindex:i,disabled:n}=this,o=[`class="${["substrate-button"].join(" ")}"`,n?"disabled":"",e?"autofocus":"",t?`type="${this.type}"`:"",i?`tabindex=${i}`:"0",'role="button"'].filter(Boolean).join(" ");this.innerHTML=`<button ${o}>
+            ${this.innerHTML}
+        </button>`}};export{u as SubstrateButton};
+//# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-button': SubstrateButton\n    }\n}\n\nexport class SubstrateButton extends HTMLElement {\n    // for `attributeChangedCallback`\n    static observedAttributes = ['autofocus', 'disabled', 'spinning']\n    static tag = 'substrate-button'\n    _isSpinning:boolean\n\n    constructor () {\n        super()\n        const disabled = this.getAttribute('disabled')\n        this.disabled = disabled !== null\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    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    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 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    _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 mean 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._setAttribute('disbaled', newValue)\n    }\n\n    handleChange_spinning (_, newValue:boolean) {\n        if (newValue !== null) {\n            this.classList.add('substrate-loading')\n        } else {\n            this.classList.remove('substrate-loading')\n        }\n    }\n\n    /**\n     * Runs when the value of an attribute is changed.\n     *\n     * Should add methods to this class like `handleChange_class`, to\n     * listen for changes to `class` attribute.\n     *\n     * @param  {string} name     The attribute name\n     * @param  {string} oldValue The old attribute value\n     * @param  {string} newValue The new attribute value\n     */\n    attributeChangedCallback (name:string, oldValue:string, newValue:string) {\n        const handler = this[`handleChange_${name}`];\n        (handler && handler.call(this, oldValue, newValue))\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    static define () {\n        if (!('customElements' in window)) return\n\n        return customElements.define(\n            SubstrateButton.tag || 'substrate-button',\n            SubstrateButton\n        )\n    }\n\n    render () {\n        const {\n            type,\n            autofocus,\n            tabindex,\n            disabled,\n        } = this\n\n        const classes:string[] = ['substrate-button']\n\n        const btnProps = ([\n            `class=\"${classes.join(' ')}\"`,\n            disabled ? 'disabled' : '',\n            autofocus ? 'autofocus' : '',\n            type ? `type=\"${this.type}\"` : '',\n            tabindex ? `tabindex=${tabindex}` : '0',\n            'role=\"button\"'\n        ]).filter(Boolean).join(' ')\n\n        this.innerHTML = `<button ${btnProps}>\n            ${this.innerHTML}\n        </button>`\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["SubstrateButton", "_SubstrateButton", "__name", "disabled", "i", "value", "disabledValue", "name", "_oldValue", "newValue", "_old", "_", "oldValue", "handler", "type", "autofocus", "tabindex", "btnProps"]
+}

package/dist/meta.json

@@ -0,0 +1,30 @@
+{
+  "inputs": {
+    "src/index.ts": {
+      "bytes": 5153,
+      "imports": [],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/index.js.map": {
+      "imports": [],
+      "exports": [],
+      "inputs": {},
+      "bytes": 8133
+    },
+    "dist/index.js": {
+      "imports": [],
+      "exports": [
+        "SubstrateButton"
+      ],
+      "entryPoint": "src/index.ts",
+      "inputs": {
+        "src/index.ts": {
+          "bytesInOutput": 4112
+        }
+      },
+      "bytes": 4305
+    }
+  }
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@substrate-system/button",
+  "type": "module",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "files": [
+    "./dist/*"
+  ],
+  "scripts": {
+    "lint": "eslint \"./**/*.{ts,js}\"",
+    "test": "npm run build && npm run build-tests && npm run test-tape-run",
+    "test-tape-run": "cat test/index.html | tape-run --input=html --static=test | tap-spec",
+    "build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
+    "build-css": "postcss src/index.css --use postcss-nesting > dist/index.css",
+    "build-css:min": "postcss src/index.css --use cssnano postcss-nesting > dist/index.min.css",
+    "build-cjs": "esbuild src/*.ts --format=cjs --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.cjs --sourcemap",
+    "build-esm": "esbuild src/*.ts --format=esm --metafile=dist/meta.json --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --sourcemap && tsc --emitDeclarationOnly --project tsconfig.build.json --outDir dist",
+    "build-esm:min": "esbuild ./src/*.ts --format=esm --keep-names --bundle --tsconfig=tsconfig.build.json --minify --out-extension:.js=.min.js --outdir=./dist --sourcemap",
+    "build-example": "mkdir -p ./public && rm -rf ./public/* && VITE_DEBUG_MODE=staging vite --mode staging --base=\"/button\" build",
+    "build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
+    "build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-cjs && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
+    "start": "vite",
+    "toc": "markdown-toc --maxdepth 3 -i README.md",
+    "preversion": "npm run lint && stylelint src/*.css",
+    "version": "npm run toc && auto-changelog -p --template keepachangelog --breaking-pattern 'BREAKING CHANGE:' && git add CHANGELOG.md README.md",
+    "postversion": "git push --follow-tags && npm publish",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./css": "./dist/index.css",
+    "./css/min": "./dist/index.min.css",
+    "./*": {
+      "import": [
+        "./dist/*.js",
+        "./dist/*"
+      ],
+      "require": [
+        "./dist/*.cjs",
+        "./dist/*"
+      ]
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@bicycle-codes/dom": "^0.1.2",
+    "@substrate-system/debug": "^0.9.0",
+    "@substrate-system/tapzero": "^0.10.13",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "auto-changelog": "^2.4.0",
+    "cssnano": "^7.0.3",
+    "esbuild": "^0.25.0",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "markdown-toc": "^1.2.0",
+    "postcss": "^8.5.1",
+    "postcss-cli": "^11.0.0",
+    "postcss-nesting": "^13.0.1",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^38.0.0",
+    "tap-spec": "^5.0.0",
+    "tape-run": "^11.0.0",
+    "typedoc": "^0.28.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11"
+  },
+  "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
+  "license": "MIT"
+}