@substrate-system/radio-input 0.0.3 → 0.0.6

package/README.md

@@ -31,7 +31,7 @@ npm i -S @substrate-system/radio-input
 
 ## API
 
-This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports). Just import the package, then you can use the tag, `<radio-input>` , in HTML.
+This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports). Just import the package, then use the tag, `<radio-input>`, in HTML.
 
 ### ESM
 ```js

package/dist/index.cjs

@@ -17,28 +17,28 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   RadioInput: () => RadioInput
 });
-module.exports = __toCommonJS(src_exports);
-var import_util = require("@substrate-system/util");
+module.exports = __toCommonJS(index_exports);
+var import_attributes = require("@substrate-system/web-component/attributes");
 class RadioInput extends HTMLElement {
   static {
     __name(this, "RadioInput");
   }
-  connectedCallback() {
-    if (this.innerHTML) return;
-    const attrs = Array.from(this.attributes);
-    const obj = (0, import_util.attributesAsObject)(attrs);
+  constructor() {
+    super();
     const labelText = this.getAttribute("label");
     if (!labelText) throw new Error("Missing label");
+    const obj = {};
+    for (const attr of Array.from(this.attributes)) {
+      obj[attr.name] = attr.value;
+    }
     this.innerHTML = `<label class="radio-input">
-            <input type="radio" />
+            <input type="radio" ${(0, import_attributes.toAttributes)(obj)} />
             ${labelText}
         </label>`;
-    const input = this.querySelector("input");
-    (0, import_util.setAttributes)(input, obj);
   }
 }
 customElements.define("radio-input", RadioInput);

package/dist/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { attributesAsObject, setAttributes } from '@substrate-system/util'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input': RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    connectedCallback () {\n        if (this.innerHTML) return\n        const attrs = Array.from(this.attributes)\n        const obj = attributesAsObject(attrs)\n        const labelText = this.getAttribute('label')\n\n        if (!labelText) throw new Error('Missing label')\n\n        this.innerHTML = `<label class=\"radio-input\">\n            <input type=\"radio\" />\n            ${labelText}\n        </label>`\n\n        const input = this.querySelector('input')!\n        setAttributes(input, obj)\n    }\n}\n\ncustomElements.define('radio-input', RadioInput)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAkD;AAS3C,MAAM,mBAAmB,YAAY;AAAA,EAT5C,OAS4C;AAAA;AAAA;AAAA,EACxC,oBAAqB;AACjB,QAAI,KAAK,UAAW;AACpB,UAAM,QAAQ,MAAM,KAAK,KAAK,UAAU;AACxC,UAAM,UAAM,gCAAmB,KAAK;AACpC,UAAM,YAAY,KAAK,aAAa,OAAO;AAE3C,QAAI,CAAC,UAAW,OAAM,IAAI,MAAM,eAAe;AAE/C,SAAK,YAAY;AAAA;AAAA,cAEX,SAAS;AAAA;AAGf,UAAM,QAAQ,KAAK,cAAc,OAAO;AACxC,mCAAc,OAAO,GAAG;AAAA,EAC5B;AACJ;AAEA,eAAe,OAAO,eAAe,UAAU;",
+  "sourcesContent": ["import {\n    toAttributes,\n    type Attrs\n} from '@substrate-system/web-component/attributes'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input': RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    constructor () {\n        super()\n\n        const labelText = this.getAttribute('label')\n        if (!labelText) throw new Error('Missing label')\n\n        const obj:Attrs = {}\n        for (const attr of Array.from(this.attributes)) {\n            obj[attr.name] = attr.value\n        }\n\n        this.innerHTML = `<label class=\"radio-input\">\n            <input type=\"radio\" ${toAttributes(obj)} />\n            ${labelText}\n        </label>`\n    }\n}\n\ncustomElements.define('radio-input', RadioInput)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAGO;AASA,MAAM,mBAAmB,YAAY;AAAA,EAZ5C,OAY4C;AAAA;AAAA;AAAA,EACxC,cAAe;AACX,UAAM;AAEN,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,CAAC,UAAW,OAAM,IAAI,MAAM,eAAe;AAE/C,UAAM,MAAY,CAAC;AACnB,eAAW,QAAQ,MAAM,KAAK,KAAK,UAAU,GAAG;AAC5C,UAAI,KAAK,IAAI,IAAI,KAAK;AAAA,IAC1B;AAEA,SAAK,YAAY;AAAA,sCACS,gCAAa,GAAG,CAAC;AAAA,cACrC,SAAS;AAAA;AAAA,EAEnB;AACJ;AAEA,eAAe,OAAO,eAAe,UAAU;",
   "names": []
 }

package/dist/index.d.ts

@@ -4,6 +4,6 @@ declare global {
     }
 }
 export declare class RadioInput extends HTMLElement {
-    connectedCallback(): void;
+    constructor();
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,UAAU,CAAA;KAC5B;CACJ;AAED,qBAAa,UAAW,SAAQ,WAAW;IACvC,iBAAiB;CAgBpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,UAAU,CAAA;KAC5B;CACJ;AAED,qBAAa,UAAW,SAAQ,WAAW;;CAiB1C"}

package/dist/index.js

@@ -1,22 +1,24 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { attributesAsObject, setAttributes } from "@substrate-system/util";
+import {
+  toAttributes
+} from "@substrate-system/web-component/attributes";
 class RadioInput extends HTMLElement {
   static {
     __name(this, "RadioInput");
   }
-  connectedCallback() {
-    if (this.innerHTML) return;
-    const attrs = Array.from(this.attributes);
-    const obj = attributesAsObject(attrs);
+  constructor() {
+    super();
     const labelText = this.getAttribute("label");
     if (!labelText) throw new Error("Missing label");
+    const obj = {};
+    for (const attr of Array.from(this.attributes)) {
+      obj[attr.name] = attr.value;
+    }
     this.innerHTML = `<label class="radio-input">
-            <input type="radio" />
+            <input type="radio" ${toAttributes(obj)} />
             ${labelText}
         </label>`;
-    const input = this.querySelector("input");
-    setAttributes(input, obj);
   }
 }
 customElements.define("radio-input", RadioInput);

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { attributesAsObject, setAttributes } from '@substrate-system/util'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input': RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    connectedCallback () {\n        if (this.innerHTML) return\n        const attrs = Array.from(this.attributes)\n        const obj = attributesAsObject(attrs)\n        const labelText = this.getAttribute('label')\n\n        if (!labelText) throw new Error('Missing label')\n\n        this.innerHTML = `<label class=\"radio-input\">\n            <input type=\"radio\" />\n            ${labelText}\n        </label>`\n\n        const input = this.querySelector('input')!\n        setAttributes(input, obj)\n    }\n}\n\ncustomElements.define('radio-input', RadioInput)\n"],
-  "mappings": ";;AAAA,SAAS,oBAAoB,qBAAqB;AAS3C,MAAM,mBAAmB,YAAY;AAAA,EAT5C,OAS4C;AAAA;AAAA;AAAA,EACxC,oBAAqB;AACjB,QAAI,KAAK,UAAW;AACpB,UAAM,QAAQ,MAAM,KAAK,KAAK,UAAU;AACxC,UAAM,MAAM,mBAAmB,KAAK;AACpC,UAAM,YAAY,KAAK,aAAa,OAAO;AAE3C,QAAI,CAAC,UAAW,OAAM,IAAI,MAAM,eAAe;AAE/C,SAAK,YAAY;AAAA;AAAA,cAEX,SAAS;AAAA;AAGf,UAAM,QAAQ,KAAK,cAAc,OAAO;AACxC,kBAAc,OAAO,GAAG;AAAA,EAC5B;AACJ;AAEA,eAAe,OAAO,eAAe,UAAU;",
+  "sourcesContent": ["import {\n    toAttributes,\n    type Attrs\n} from '@substrate-system/web-component/attributes'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input': RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    constructor () {\n        super()\n\n        const labelText = this.getAttribute('label')\n        if (!labelText) throw new Error('Missing label')\n\n        const obj:Attrs = {}\n        for (const attr of Array.from(this.attributes)) {\n            obj[attr.name] = attr.value\n        }\n\n        this.innerHTML = `<label class=\"radio-input\">\n            <input type=\"radio\" ${toAttributes(obj)} />\n            ${labelText}\n        </label>`\n    }\n}\n\ncustomElements.define('radio-input', RadioInput)\n"],
+  "mappings": ";;AAAA;AAAA,EACI;AAAA,OAEG;AASA,MAAM,mBAAmB,YAAY;AAAA,EAZ5C,OAY4C;AAAA;AAAA;AAAA,EACxC,cAAe;AACX,UAAM;AAEN,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,CAAC,UAAW,OAAM,IAAI,MAAM,eAAe;AAE/C,UAAM,MAAY,CAAC;AACnB,eAAW,QAAQ,MAAM,KAAK,KAAK,UAAU,GAAG;AAC5C,UAAI,KAAK,IAAI,IAAI,KAAK;AAAA,IAC1B;AAEA,SAAK,YAAY;AAAA,kCACS,aAAa,GAAG,CAAC;AAAA,cACrC,SAAS;AAAA;AAAA,EAEnB;AACJ;AAEA,eAAe,OAAO,eAAe,UAAU;",
   "names": []
 }

package/dist/index.min.js

@@ -1,5 +1,5 @@
-var c=Object.defineProperty;var n=(e,t)=>c(e,"name",{value:t,configurable:!0});var b=Object.defineProperty,s=n((e,t)=>b(e,"name",{value:t,configurable:!0}),"__name");function f(e){return e.map(t=>t.name+(t.value===""?"":`="${t.value}"`)).join(" ")}n(f,"attributesToString");s(f,"attributesToString");function u(e){return e.reduce((t,r)=>(t[r.name]=r.value||!0,t),{})}n(u,"attributesAsObject");s(u,"attributesAsObject");function m(e){return Object.keys(e).map(t=>t+(e[t]===!0?"":`="${e[t]}"`)).join(" ")}n(m,"objectToString");s(m,"objectToString");function a(e,t){for(let r in t){let i=t[r];i===!1?e.removeAttribute(r):e.setAttribute(r,i===!0?"":i)}}n(a,"setAttributes");s(a,"setAttributes");var o=class extends HTMLElement{static{n(this,"RadioInput")}connectedCallback(){if(this.innerHTML)return;let t=Array.from(this.attributes),r=u(t),i=this.getAttribute("label");if(!i)throw new Error("Missing label");this.innerHTML=`<label class="radio-input">
-            <input type="radio" />
-            ${i}
-        </label>`;let l=this.querySelector("input");a(l,r)}};customElements.define("radio-input",o);export{o as RadioInput};
+var s=Object.defineProperty;var n=(r,t)=>s(r,"name",{value:t,configurable:!0});var u=Object.defineProperty,l=n((r,t)=>u(r,"name",{value:t,configurable:!0}),"__name");function o(r){return Object.keys(r).reduce((t,i)=>{let e=r[i];return e?typeof e=="boolean"?e?(t+` ${i}`).trim():t:Array.isArray(e)?t+` ${i}="${e.join(" ")}"`:(t+` ${i}="${e}"`).trim():t},"")}n(o,"toAttributes");l(o,"toAttributes");var a=class extends HTMLElement{static{n(this,"RadioInput")}constructor(){super();let t=this.getAttribute("label");if(!t)throw new Error("Missing label");let i={};for(let e of Array.from(this.attributes))i[e.name]=e.value;this.innerHTML=`<label class="radio-input">
+            <input type="radio" ${o(i)} />
+            ${t}
+        </label>`}};customElements.define("radio-input",a);export{a as RadioInput};
 //# sourceMappingURL=index.min.js.map

package/dist/index.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../node_modules/@substrate-system/util/src/index.ts", "../src/index.ts"],
-  "sourcesContent": ["/**\n * Get attributes from an HTMLElement, and return them as a string\n * like `key=val`.\n * @param {Attr[]} attrs An array of the attributes\n * @returns {string} The attributes as a string like `key=val`\n */\nexport function attributesToString (attrs:Attr[]):string {\n    return attrs.map(attr => attr.name + (attr.value === '' ?\n        '' :\n        `=\"${attr.value}\"`))\n        .join(' ')\n}\n\n/**\n * Return a new object of key value pairs given an array of attributes.\n *\n * @param attrs An array of attributes\n * @returns {Record<string, string|true>} An object of key value pairs, or\n * key -> true for boolean attributes\n */\nexport function attributesAsObject (attrs:Attr[]):Record<string, string|true> {\n    return attrs.reduce((acc, attr) => {\n        acc[attr.name] = attr.value || true\n        return acc\n    }, {})\n}\n\nexport function objectToString (obj:Record<string, string|true>):string {\n    return Object.keys(obj).map(k => {\n        return k + (obj[k] === true ? '' : `=\"${obj[k]}\"`)\n    }).join(' ')\n}\n\nexport default {\n    attributesToString,\n    attributesAsObject,\n    setAttributes\n}\n\nexport function setAttributes (el:HTMLElement, attrs:Record<string, string|boolean>) {\n    for (const key in attrs) {\n        const val = attrs[key]\n        if (val === false) {\n            el.removeAttribute(key)\n        } else {\n            el.setAttribute(key, (val === true ? '' : val))\n        }\n    }\n}\n", "import { attributesAsObject, setAttributes } from '@substrate-system/util'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input': RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    connectedCallback () {\n        if (this.innerHTML) return\n        const attrs = Array.from(this.attributes)\n        const obj = attributesAsObject(attrs)\n        const labelText = this.getAttribute('label')\n\n        if (!labelText) throw new Error('Missing label')\n\n        this.innerHTML = `<label class=\"radio-input\">\n            <input type=\"radio\" />\n            ${labelText}\n        </label>`\n\n        const input = this.querySelector('input')!\n        setAttributes(input, obj)\n    }\n}\n\ncustomElements.define('radio-input', RadioInput)\n"],
-  "mappings": "sKAMO,SAASA,EAAoBC,EAAqB,CACrD,OAAOA,EAAM,IAAIC,GAAQA,EAAK,MAAQA,EAAK,QAAU,GACjD,GACA,KAAKA,EAAK,KAAK,IAAI,EAClB,KAAK,GAAG,CACjB,CALgBC,EAAAH,EAAA,sBAAAG,EAAAH,EAAA,oBAAA,EAcT,SAASI,EAAoBH,EAA0C,CAC1E,OAAOA,EAAM,OAAO,CAACI,EAAKH,KACtBG,EAAIH,EAAK,IAAI,EAAIA,EAAK,OAAS,GACxBG,GACR,CAAC,CAAC,CACT,CALgBF,EAAAC,EAAA,sBAAAD,EAAAC,EAAA,oBAAA,EAOT,SAASE,EAAgBC,EAAwC,CACpE,OAAO,OAAO,KAAKA,CAAG,EAAE,IAAIC,GACjBA,GAAKD,EAAIC,CAAC,IAAM,GAAO,GAAK,KAAKD,EAAIC,CAAC,CAAC,IACjD,EAAE,KAAK,GAAG,CACf,CAJgBL,EAAAG,EAAA,kBAAAH,EAAAG,EAAA,gBAAA,EAYT,SAASG,EAAeC,EAAgBC,EAAsC,CACjF,QAAWC,KAAOD,EAAO,CACrB,IAAME,EAAMF,EAAMC,CAAG,EACjBC,IAAQ,GACRH,EAAG,gBAAgBE,CAAG,EAEtBF,EAAG,aAAaE,EAAMC,IAAQ,GAAO,GAAKA,CAAI,CAEtD,CACJ,CATgBC,EAAAL,EAAA,iBAAAK,EAAAL,EAAA,eAAA,EC9BT,IAAMM,EAAN,cAAyB,WAAY,CAT5C,MAS4C,CAAAC,EAAA,mBACxC,mBAAqB,CACjB,GAAI,KAAK,UAAW,OACpB,IAAMC,EAAQ,MAAM,KAAK,KAAK,UAAU,EAClCC,EAAMC,EAAmBF,CAAK,EAC9BG,EAAY,KAAK,aAAa,OAAO,EAE3C,GAAI,CAACA,EAAW,MAAM,IAAI,MAAM,eAAe,EAE/C,KAAK,UAAY;AAAA;AAAA,cAEXA,CAAS;AAAA,kBAGf,IAAMC,EAAQ,KAAK,cAAc,OAAO,EACxCC,EAAcD,EAAOH,CAAG,CAC5B,CACJ,EAEA,eAAe,OAAO,cAAeH,CAAU",
-  "names": ["attributesToString", "attrs", "attr", "__name", "attributesAsObject", "acc", "objectToString", "obj", "k", "setAttributes", "el", "attrs", "key", "val", "__name", "RadioInput", "__name", "attrs", "obj", "attributesAsObject", "labelText", "input", "setAttributes"]
+  "sources": ["../node_modules/@substrate-system/web-component/src/attributes.ts", "../src/index.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", "import {\n    toAttributes,\n    type Attrs\n} from '@substrate-system/web-component/attributes'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input': RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    constructor () {\n        super()\n\n        const labelText = this.getAttribute('label')\n        if (!labelText) throw new Error('Missing label')\n\n        const obj:Attrs = {}\n        for (const attr of Array.from(this.attributes)) {\n            obj[attr.name] = attr.value\n        }\n\n        this.innerHTML = `<label class=\"radio-input\">\n            <input type=\"radio\" ${toAttributes(obj)} />\n            ${labelText}\n        </label>`\n    }\n}\n\ncustomElements.define('radio-input', RadioInput)\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,ECGT,IAAMM,EAAN,cAAyB,WAAY,CAZ5C,MAY4C,CAAAC,EAAA,mBACxC,aAAe,CACX,MAAM,EAEN,IAAMC,EAAY,KAAK,aAAa,OAAO,EAC3C,GAAI,CAACA,EAAW,MAAM,IAAI,MAAM,eAAe,EAE/C,IAAMC,EAAY,CAAC,EACnB,QAAWC,KAAQ,MAAM,KAAK,KAAK,UAAU,EACzCD,EAAIC,EAAK,IAAI,EAAIA,EAAK,MAG1B,KAAK,UAAY;AAAA,kCACSC,EAAaF,CAAG,CAAC;AAAA,cACrCD,CAAS;AAAA,iBAEnB,CACJ,EAEA,eAAe,OAAO,cAAeF,CAAU",
+  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "RadioInput", "__name", "labelText", "obj", "attr", "toAttributes"]
 }

package/dist/meta.json

@@ -1,7 +1,7 @@
 {
   "inputs": {
     "src/index.ts": {
-      "bytes": 797,
+      "bytes": 768,
       "imports": [],
       "format": "esm"
     }
@@ -11,12 +11,12 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1327
+      "bytes": 1296
     },
     "dist/index.js": {
       "imports": [
         {
-          "path": "@substrate-system/util",
+          "path": "@substrate-system/web-component/attributes",
           "kind": "import-statement",
           "external": true
         }
@@ -27,10 +27,10 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "src/index.ts": {
-          "bytesInOutput": 675
+          "bytesInOutput": 619
         }
       },
-      "bytes": 863
+      "bytes": 807
     }
   }
 }

package/dist/style.css

@@ -5,6 +5,13 @@
 radio-input .radio-input {
         margin-right: 1rem;
         cursor: pointer;
+    }
+
+:is(radio-input .radio-input) input {
+            cursor: pointer;
+        }
+
+radio-input .radio-input {
 
         font-size: 1.5rem;
         display: grid;
@@ -12,11 +19,7 @@ radio-input .radio-input {
         gap: 0.5em;
     }
 
-radio-input .radio-input input {
-            cursor: pointer;
-        }
-
-radio-input .radio-input input[type="radio"] {
+:is(radio-input .radio-input) input[type="radio"] {
             appearance: none;
             /* For iOS < 15 to remove gradient background */
             background-color: #fff;
@@ -31,7 +34,7 @@ radio-input .radio-input input[type="radio"] {
             place-content: center;
         }
 
-radio-input .radio-input input[type="radio"]::before {
+:is(:is(radio-input .radio-input) input[type="radio"])::before {
                 content: "";
                 width: 0.65em;
                 height: 0.65em;
@@ -41,9 +44,9 @@ radio-input .radio-input input[type="radio"]::before {
                 box-shadow: inset 1em 1em var(--form-control-color);
             }
 
-radio-input .radio-input input[type="radio"]:checked::before {
+:is(:is(radio-input .radio-input) input[type="radio"]):checked::before {
                 appearance: initial;
                 transform: scale(1);
             }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSw2QkFBNkI7QUFDakM7O0FBR0k7UUFDSSxrQkFBa0I7UUFDbEIsZUFBZTs7UUFNZixpQkFBaUI7UUFDakIsYUFBYTtRQUNiLCtCQUErQjtRQUMvQixVQUFVO0lBK0JkOztBQXRDSTtZQUNJLGVBQWU7UUFDbkI7O0FBT0E7WUFDSSxnQkFBZ0I7WUFDaEIsK0NBQStDO1lBQy9DLHNCQUFzQjtZQUN0QixTQUFTO1lBQ1QsYUFBYTtZQUNiLG1CQUFtQjtZQUNuQixhQUFhO1lBQ2IsY0FBYztZQUNkLGlDQUFpQztZQUNqQyxrQkFBa0I7WUFDbEIsYUFBYTtZQUNiLHFCQUFxQjtRQWdCekI7O0FBZEk7Z0JBQ0ksV0FBVztnQkFDWCxhQUFhO2dCQUNiLGNBQWM7Z0JBQ2Qsa0JBQWtCO2dCQUNsQixtQkFBbUI7Z0JBQ25CLHVDQUF1QztnQkFDdkMsbURBQW1EO1lBQ3ZEOztBQUVKO2dCQUNRLG1CQUFtQjtnQkFDbkIsbUJBQW1CO1lBQ3ZCIiwiZmlsZSI6InNyYy9pbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gICAgLS1mb3JtLWNvbnRyb2wtY29sb3I6ICM0MjgxQ0I7XG59XG5cbnJhZGlvLWlucHV0IHtcbiAgICAmIC5yYWRpby1pbnB1dCB7XG4gICAgICAgIG1hcmdpbi1yaWdodDogMXJlbTtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuXG4gICAgICAgICYgaW5wdXQge1xuICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICB9XG5cbiAgICAgICAgZm9udC1zaXplOiAxLjVyZW07XG4gICAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWVtIGF1dG87XG4gICAgICAgIGdhcDogMC41ZW07XG5cbiAgICAgICAgJiBpbnB1dFt0eXBlPVwicmFkaW9cIl0ge1xuICAgICAgICAgICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgICAgICAgIC8qIEZvciBpT1MgPCAxNSB0byByZW1vdmUgZ3JhZGllbnQgYmFja2dyb3VuZCAqL1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgIGZvbnQ6IGluaGVyaXQ7XG4gICAgICAgICAgICBjb2xvcjogY3VycmVudGNvbG9yO1xuICAgICAgICAgICAgd2lkdGg6IDEuMTVlbTtcbiAgICAgICAgICAgIGhlaWdodDogMS4xNWVtO1xuICAgICAgICAgICAgYm9yZGVyOiAwLjE1ZW0gc29saWQgY3VycmVudGNvbG9yO1xuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICAgICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICAgICAgICAgIHdpZHRoOiAwLjY1ZW07XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAwLjY1ZW07XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMCk7XG4gICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogMTIwbXMgdHJhbnNmb3JtIGVhc2UtaW4tb3V0O1xuICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDFlbSAxZW0gdmFyKC0tZm9ybS1jb250cm9sLWNvbG9yKTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAmOmNoZWNrZWQ6OmJlZm9yZSB7XG4gICAgICAgICAgICAgICAgYXBwZWFyYW5jZTogaW5pdGlhbDtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSw2QkFBNkI7QUFDakM7O0FBR0k7UUFDSSxrQkFBa0I7UUFDbEIsZUFBZTtJQXdDbkI7O0FBdENJO1lBQ0ksZUFBZTtRQUNuQjs7QUFOSjs7UUFRSSxpQkFBaUI7UUFDakIsYUFBYTtRQUNiLCtCQUErQjtRQUMvQixVQUFVO0lBK0JkOztBQTdCSTtZQUNJLGdCQUFnQjtZQUNoQiwrQ0FBK0M7WUFDL0Msc0JBQXNCO1lBQ3RCLFNBQVM7WUFDVCxhQUFhO1lBQ2IsbUJBQW1CO1lBQ25CLGFBQWE7WUFDYixjQUFjO1lBQ2QsaUNBQWlDO1lBQ2pDLGtCQUFrQjtZQUNsQixhQUFhO1lBQ2IscUJBQXFCO1FBZ0J6Qjs7QUFkSTtnQkFDSSxXQUFXO2dCQUNYLGFBQWE7Z0JBQ2IsY0FBYztnQkFDZCxrQkFBa0I7Z0JBQ2xCLG1CQUFtQjtnQkFDbkIsdUNBQXVDO2dCQUN2QyxtREFBbUQ7WUFDdkQ7O0FBRUo7Z0JBQ1EsbUJBQW1CO2dCQUNuQixtQkFBbUI7WUFDdkIiLCJmaWxlIjoic3JjL2luZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIjpyb290IHtcbiAgICAtLWZvcm0tY29udHJvbC1jb2xvcjogIzQyODFDQjtcbn1cblxucmFkaW8taW5wdXQge1xuICAgICYgLnJhZGlvLWlucHV0IHtcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiAxcmVtO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICAgICAgJiBpbnB1dCB7XG4gICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIH1cblxuICAgICAgICBmb250LXNpemU6IDEuNXJlbTtcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZW0gYXV0bztcbiAgICAgICAgZ2FwOiAwLjVlbTtcblxuICAgICAgICAmIGlucHV0W3R5cGU9XCJyYWRpb1wiXSB7XG4gICAgICAgICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgICAgICAgLyogRm9yIGlPUyA8IDE1IHRvIHJlbW92ZSBncmFkaWVudCBiYWNrZ3JvdW5kICovXG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICAgICAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICAgICAgZm9udDogaW5oZXJpdDtcbiAgICAgICAgICAgIGNvbG9yOiBjdXJyZW50Y29sb3I7XG4gICAgICAgICAgICB3aWR0aDogMS4xNWVtO1xuICAgICAgICAgICAgaGVpZ2h0OiAxLjE1ZW07XG4gICAgICAgICAgICBib3JkZXI6IDAuMTVlbSBzb2xpZCBjdXJyZW50Y29sb3I7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuXG4gICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICAgICAgICAgICAgd2lkdGg6IDAuNjVlbTtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDAuNjVlbTtcbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwKTtcbiAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiAxMjBtcyB0cmFuc2Zvcm0gZWFzZS1pbi1vdXQ7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMWVtIDFlbSB2YXIoLS1mb3JtLWNvbnRyb2wtY29sb3IpO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICY6Y2hlY2tlZDo6YmVmb3JlIHtcbiAgICAgICAgICAgICAgICBhcHBlYXJhbmNlOiBpbml0aWFsO1xuICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0= */

package/dist/style.min.css

@@ -1,2 +1,2 @@
-:root{--form-control-color:#4281cb}radio-input .radio-input{cursor:pointer;display:grid;font-size:1.5rem;gap:.5em;grid-template-columns:1em auto;margin-right:1rem}radio-input .radio-input input{cursor:pointer}radio-input .radio-input input[type=radio]{appearance:none;background-color:#fff;border:.15em solid;border-radius:50%;color:currentcolor;display:grid;font:inherit;height:1.15em;margin:0;place-content:center;width:1.15em}radio-input .radio-input input[type=radio]:before{border-radius:50%;box-shadow:inset 1em 1em var(--form-control-color);content:"";height:.65em;transform:scale(0);transition:transform .12s ease-in-out;width:.65em}radio-input .radio-input input[type=radio]:checked:before{appearance:none;transform:scale(1)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFDSSw0QkFDSixDQUdJLHlCQUVJLGNBQWUsQ0FPZixZQUFhLENBRGIsZ0JBQWlCLENBR2pCLFFBQVUsQ0FEViw4QkFBK0IsQ0FUL0IsaUJBeUNKLENBdENJLCtCQUNJLGNBQ0osQ0FPQSwyQ0FDSSxlQUFnQixDQUVoQixxQkFBc0IsQ0FNdEIsa0JBQWlDLENBQ2pDLGlCQUFrQixDQUpsQixrQkFBbUIsQ0FLbkIsWUFBYSxDQU5iLFlBQWEsQ0FHYixhQUFjLENBSmQsUUFBUyxDQVFULG9CQUFxQixDQUxyQixZQXFCSixDQWRJLGtEQUlJLGlCQUFrQixDQUdsQixrREFBbUQsQ0FObkQsVUFBVyxDQUVYLFlBQWMsQ0FFZCxrQkFBbUIsQ0FDbkIscUNBQXVDLENBSnZDLFdBTUosQ0FFSiwwREFDUSxlQUFtQixDQUNuQixrQkFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xuICAgIC0tZm9ybS1jb250cm9sLWNvbG9yOiAjNDI4MUNCO1xufVxuXG5yYWRpby1pbnB1dCB7XG4gICAgJiAucmFkaW8taW5wdXQge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDFyZW07XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcblxuICAgICAgICAmIGlucHV0IHtcbiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgfVxuXG4gICAgICAgIGZvbnQtc2l6ZTogMS41cmVtO1xuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFlbSBhdXRvO1xuICAgICAgICBnYXA6IDAuNWVtO1xuXG4gICAgICAgICYgaW5wdXRbdHlwZT1cInJhZGlvXCJdIHtcbiAgICAgICAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgICAgICAvKiBGb3IgaU9TIDwgMTUgdG8gcmVtb3ZlIGdyYWRpZW50IGJhY2tncm91bmQgKi9cbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICBmb250OiBpbmhlcml0O1xuICAgICAgICAgICAgY29sb3I6IGN1cnJlbnRjb2xvcjtcbiAgICAgICAgICAgIHdpZHRoOiAxLjE1ZW07XG4gICAgICAgICAgICBoZWlnaHQ6IDEuMTVlbTtcbiAgICAgICAgICAgIGJvcmRlcjogMC4xNWVtIHNvbGlkIGN1cnJlbnRjb2xvcjtcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICAgICAgICBwbGFjZS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICAgICAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICB3aWR0aDogMC42NWVtO1xuICAgICAgICAgICAgICAgIGhlaWdodDogMC42NWVtO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDApO1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb246IDEyMG1zIHRyYW5zZm9ybSBlYXNlLWluLW91dDtcbiAgICAgICAgICAgICAgICBib3gtc2hhZG93OiBpbnNldCAxZW0gMWVtIHZhcigtLWZvcm0tY29udHJvbC1jb2xvcik7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgJjpjaGVja2VkOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgIGFwcGVhcmFuY2U6IGluaXRpYWw7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ== */
+:root{--form-control-color:#4281cb}radio-input .radio-input{cursor:pointer;margin-right:1rem}:is(radio-input .radio-input) input{cursor:pointer}radio-input .radio-input{display:grid;font-size:1.5rem;gap:.5em;grid-template-columns:1em auto}:is(radio-input .radio-input) input[type=radio]{appearance:none;background-color:#fff;border:.15em solid;border-radius:50%;color:currentcolor;display:grid;font:inherit;height:1.15em;margin:0;place-content:center;width:1.15em}:is(:is(radio-input .radio-input) input[type=radio]):before{border-radius:50%;box-shadow:inset 1em 1em var(--form-control-color);content:"";height:.65em;transform:scale(0);transition:transform .12s ease-in-out;width:.65em}:is(:is(radio-input .radio-input) input[type=radio]):checked:before{appearance:none;transform:scale(1)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFDSSw0QkFDSixDQUdJLHlCQUVJLGNBQWUsQ0FEZixpQkF5Q0osQ0F0Q0ksb0NBQ0ksY0FDSixDQU5KLHlCQVNJLFlBQWEsQ0FEYixnQkFBaUIsQ0FHakIsUUFBVSxDQURWLDhCQWdDSixDQTdCSSxnREFDSSxlQUFnQixDQUVoQixxQkFBc0IsQ0FNdEIsa0JBQWlDLENBQ2pDLGlCQUFrQixDQUpsQixrQkFBbUIsQ0FLbkIsWUFBYSxDQU5iLFlBQWEsQ0FHYixhQUFjLENBSmQsUUFBUyxDQVFULG9CQUFxQixDQUxyQixZQXFCSixDQWRJLDREQUlJLGlCQUFrQixDQUdsQixrREFBbUQsQ0FObkQsVUFBVyxDQUVYLFlBQWMsQ0FFZCxrQkFBbUIsQ0FDbkIscUNBQXVDLENBSnZDLFdBTUosQ0FFSixvRUFDUSxlQUFtQixDQUNuQixrQkFDSiIsImZpbGUiOiJzcmMvaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xuICAgIC0tZm9ybS1jb250cm9sLWNvbG9yOiAjNDI4MUNCO1xufVxuXG5yYWRpby1pbnB1dCB7XG4gICAgJiAucmFkaW8taW5wdXQge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDFyZW07XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcblxuICAgICAgICAmIGlucHV0IHtcbiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgfVxuXG4gICAgICAgIGZvbnQtc2l6ZTogMS41cmVtO1xuICAgICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFlbSBhdXRvO1xuICAgICAgICBnYXA6IDAuNWVtO1xuXG4gICAgICAgICYgaW5wdXRbdHlwZT1cInJhZGlvXCJdIHtcbiAgICAgICAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgICAgICAvKiBGb3IgaU9TIDwgMTUgdG8gcmVtb3ZlIGdyYWRpZW50IGJhY2tncm91bmQgKi9cbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICBmb250OiBpbmhlcml0O1xuICAgICAgICAgICAgY29sb3I6IGN1cnJlbnRjb2xvcjtcbiAgICAgICAgICAgIHdpZHRoOiAxLjE1ZW07XG4gICAgICAgICAgICBoZWlnaHQ6IDEuMTVlbTtcbiAgICAgICAgICAgIGJvcmRlcjogMC4xNWVtIHNvbGlkIGN1cnJlbnRjb2xvcjtcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICAgICAgICBwbGFjZS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICAgICAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICB3aWR0aDogMC42NWVtO1xuICAgICAgICAgICAgICAgIGhlaWdodDogMC42NWVtO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDApO1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb246IDEyMG1zIHRyYW5zZm9ybSBlYXNlLWluLW91dDtcbiAgICAgICAgICAgICAgICBib3gtc2hhZG93OiBpbnNldCAxZW0gMWVtIHZhcigtLWZvcm0tY29udHJvbC1jb2xvcik7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgJjpjaGVja2VkOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgIGFwcGVhcmFuY2U6IGluaXRpYWw7XG4gICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ== */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@substrate-system/radio-input",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "main": "dist/index.js",
   "files": [
     "./dist/*"
@@ -9,8 +9,8 @@
   "scripts": {
     "lint": "eslint \"./**/*.{ts,js}\"",
     "build-tests": "esbuild test/index.ts --target=es2020 --bundle --keep-names > test/test-bundle.js",
-    "test": "npm run lint && 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",
+    "test": "npm run lint && npm run build && npm run test-tapout",
+    "test-tapout": "esbuild test/index.ts --target=es2020 --bundle --keep-names | tapout | tap-spec",
     "build-css": "postcss src/index.css --use postcss-nesting > dist/style.css",
     "build-css:min": "postcss src/index.css --use cssnano postcss-nesting > dist/style.min.css",
     "build-cjs": "esbuild src/*.ts --format=cjs --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --out-extension:.js=.cjs --sourcemap",
@@ -45,30 +45,30 @@
     }
   },
   "dependencies": {
-    "@substrate-system/util": "^0.1.6"
+    "@substrate-system/web-component": "^0.0.46"
   },
   "devDependencies": {
-    "@bicycle-codes/debug": "^0.6.13",
-    "@bicycle-codes/dom": "^0.0.23",
-    "@bicycle-codes/tapzero": "^0.10.0",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
+    "@substrate-system/debug": "^0.9.60",
+    "@substrate-system/dom": "^0.1.13",
+    "@substrate-system/tapout": "^0.0.35",
+    "@substrate-system/tapzero": "^0.10.16",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "auto-changelog": "^2.4.0",
     "cssnano": "^7.0.3",
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.27.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "markdown-toc": "^1.2.0",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
-    "postcss-nesting": "^12.1.5",
-    "stylelint": "^16.7.0",
-    "stylelint-config-standard": "^36.0.1",
+    "postcss-nesting": "^14.0.0",
+    "stylelint": "^17.1.0",
+    "stylelint-config-standard": "^40.0.0",
     "tap-spec": "^5.0.0",
-    "tape-run": "^11.0.0",
-    "typedoc": "^0.26.2",
+    "typedoc": "^0.28.1",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^7.0.2"
   },
   "author": "nichoth <nichoth@nichoth.com> (https://nichoth.com)",
   "license": "MIT",