@substrate-system/radio-input 0.0.4 → 0.0.10

package/dist/index.cjs

@@ -17,29 +17,56 @@ 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");
+var import_util = require("@substrate-system/web-component/util");
 class RadioInput extends HTMLElement {
   static {
     __name(this, "RadioInput");
   }
+  static TAG = "radio-input";
+  static observedAttributes = ["label", "name", "value", "checked"];
+  handleChange_label(oldValue, newValue) {
+    if (newValue === null) return;
+    const label = this.querySelector("label");
+    if (!label) return;
+    label.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        node.textContent = `
+            ${newValue}
+        `;
+      }
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    const handler = this[`handleChange_${name}`];
+    if (handler) {
+      handler.call(this, oldValue, newValue);
+    } else {
+      this.render();
+    }
+  }
+  disconnectedCallback() {
+  }
   connectedCallback() {
-    if (this.innerHTML) return;
-    const attrs = Array.from(this.attributes);
-    const obj = (0, import_util.attributesAsObject)(attrs);
+    this.render();
+  }
+  render() {
     const labelText = this.getAttribute("label");
-    if (!labelText) throw new Error("Missing label");
+    if (!labelText) return;
+    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);
+(0, import_util.define)("radio-input", RadioInput);
 //# sourceMappingURL=index.cjs.map

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'\nimport { define } from '@substrate-system/web-component/util'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input':RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    static TAG = 'radio-input'\n    static observedAttributes = ['label', 'name', 'value', 'checked']\n\n    handleChange_label (oldValue:string, newValue:string) {\n        if (newValue === null) return\n        const label = this.querySelector('label')\n        if (!label) return\n        label.childNodes.forEach(node => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                node.textContent = `\\n            ${newValue}\\n        `\n            }\n        })\n    }\n\n    attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            handler.call(this, oldValue, newValue)\n        } else {\n            this.render()\n        }\n    }\n\n    disconnectedCallback () {\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    render () {\n        const labelText = this.getAttribute('label')\n        if (!labelText) return\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\ndefine('radio-input', RadioInput)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAGO;AACP,kBAAuB;AAShB,MAAM,mBAAmB,YAAY;AAAA,EAb5C,OAa4C;AAAA;AAAA;AAAA,EACxC,OAAO,MAAM;AAAA,EACb,OAAO,qBAAqB,CAAC,SAAS,QAAQ,SAAS,SAAS;AAAA,EAEhE,mBAAoB,UAAiB,UAAiB;AAClD,QAAI,aAAa,KAAM;AACvB,UAAM,QAAQ,KAAK,cAAc,OAAO;AACxC,QAAI,CAAC,MAAO;AACZ,UAAM,WAAW,QAAQ,UAAQ;AAC7B,UAAI,KAAK,aAAa,KAAK,WAAW;AAClC,aAAK,cAAc;AAAA,cAAiB,QAAQ;AAAA;AAAA,MAChD;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEA,yBACI,MACA,UACA,UACF;AACE,UAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAC3C,QAAI,SAAS;AACT,cAAQ,KAAK,MAAM,UAAU,QAAQ;AAAA,IACzC,OAAO;AACH,WAAK,OAAO;AAAA,IAChB;AAAA,EACJ;AAAA,EAEA,uBAAwB;AAAA,EACxB;AAAA,EAEA,oBAAqB;AACjB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,CAAC,UAAW;AAEhB,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;AAAA,IAEA,oBAAO,eAAe,UAAU;",
   "names": []
 }

package/dist/index.d.ts

@@ -4,6 +4,12 @@ declare global {
     }
 }
 export declare class RadioInput extends HTMLElement {
+    static TAG: string;
+    static observedAttributes: string[];
+    handleChange_label(oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
     connectedCallback(): void;
+    render(): void;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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":"AAOA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAC,UAAU,CAAA;KAC3B;CACJ;AAED,qBAAa,UAAW,SAAQ,WAAW;IACvC,MAAM,CAAC,GAAG,SAAgB;IAC1B,MAAM,CAAC,kBAAkB,WAAwC;IAEjE,kBAAkB,CAAE,QAAQ,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM;IAWpD,wBAAwB,CACpB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,MAAM,EACf,QAAQ,EAAC,MAAM;IAUnB,oBAAoB;IAGpB,iBAAiB;IAIjB,MAAM;CAcT"}

package/dist/index.js

@@ -1,25 +1,54 @@
 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";
+import { define } from "@substrate-system/web-component/util";
 class RadioInput extends HTMLElement {
   static {
     __name(this, "RadioInput");
   }
+  static TAG = "radio-input";
+  static observedAttributes = ["label", "name", "value", "checked"];
+  handleChange_label(oldValue, newValue) {
+    if (newValue === null) return;
+    const label = this.querySelector("label");
+    if (!label) return;
+    label.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        node.textContent = `
+            ${newValue}
+        `;
+      }
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    const handler = this[`handleChange_${name}`];
+    if (handler) {
+      handler.call(this, oldValue, newValue);
+    } else {
+      this.render();
+    }
+  }
+  disconnectedCallback() {
+  }
   connectedCallback() {
-    if (this.innerHTML) return;
-    const attrs = Array.from(this.attributes);
-    const obj = attributesAsObject(attrs);
+    this.render();
+  }
+  render() {
     const labelText = this.getAttribute("label");
-    if (!labelText) throw new Error("Missing label");
+    if (!labelText) return;
+    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);
+define("radio-input", RadioInput);
 export {
   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'\nimport { define } from '@substrate-system/web-component/util'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input':RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    static TAG = 'radio-input'\n    static observedAttributes = ['label', 'name', 'value', 'checked']\n\n    handleChange_label (oldValue:string, newValue:string) {\n        if (newValue === null) return\n        const label = this.querySelector('label')\n        if (!label) return\n        label.childNodes.forEach(node => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                node.textContent = `\\n            ${newValue}\\n        `\n            }\n        })\n    }\n\n    attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            handler.call(this, oldValue, newValue)\n        } else {\n            this.render()\n        }\n    }\n\n    disconnectedCallback () {\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    render () {\n        const labelText = this.getAttribute('label')\n        if (!labelText) return\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\ndefine('radio-input', RadioInput)\n"],
+  "mappings": ";;AAAA;AAAA,EACI;AAAA,OAEG;AACP,SAAS,cAAc;AAShB,MAAM,mBAAmB,YAAY;AAAA,EAb5C,OAa4C;AAAA;AAAA;AAAA,EACxC,OAAO,MAAM;AAAA,EACb,OAAO,qBAAqB,CAAC,SAAS,QAAQ,SAAS,SAAS;AAAA,EAEhE,mBAAoB,UAAiB,UAAiB;AAClD,QAAI,aAAa,KAAM;AACvB,UAAM,QAAQ,KAAK,cAAc,OAAO;AACxC,QAAI,CAAC,MAAO;AACZ,UAAM,WAAW,QAAQ,UAAQ;AAC7B,UAAI,KAAK,aAAa,KAAK,WAAW;AAClC,aAAK,cAAc;AAAA,cAAiB,QAAQ;AAAA;AAAA,MAChD;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEA,yBACI,MACA,UACA,UACF;AACE,UAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAC3C,QAAI,SAAS;AACT,cAAQ,KAAK,MAAM,UAAU,QAAQ;AAAA,IACzC,OAAO;AACH,WAAK,OAAO;AAAA,IAChB;AAAA,EACJ;AAAA,EAEA,uBAAwB;AAAA,EACxB;AAAA,EAEA,oBAAqB;AACjB,SAAK,OAAO;AAAA,EAChB;AAAA,EAEA,SAAU;AACN,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,CAAC,UAAW;AAEhB,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,OAAO,eAAe,UAAU;",
   "names": []
 }

package/dist/index.min.js

@@ -1,5 +1,7 @@
-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 d=Object.defineProperty;var i=(t,e)=>d(t,"name",{value:e,configurable:!0});var f=Object.defineProperty,m=i((t,e)=>f(t,"name",{value:e,configurable:!0}),"__name");function a(t){return Object.keys(t).reduce((e,n)=>{let r=t[n];return r?typeof r=="boolean"?r?(e+` ${n}`).trim():e:Array.isArray(r)?e+` ${n}="${r.join(" ")}"`:(e+` ${n}="${r}"`).trim():e},"")}i(a,"toAttributes");m(a,"toAttributes");var b=Object.defineProperty,s=i((t,e)=>b(t,"name",{value:e,configurable:!0}),"__name");function c(t){return document.createElement(t).constructor!==window.HTMLElement}i(c,"isRegistered");s(c,"isRegistered");function l(t,e){window&&"customElements"in window&&(c(t)||window.customElements.define(t,e))}i(l,"define");s(l,"define");var _=document.querySelector.bind(document),E=document.querySelectorAll.bind(document);function h(t,e){return t.matches||(t=t.parentElement),t.matches(e)?t:t.closest(e)}i(h,"match");s(h,"match");var u=class extends HTMLElement{static{i(this,"RadioInput")}static TAG="radio-input";static observedAttributes=["label","name","value","checked"];handleChange_label(e,n){if(n===null)return;let r=this.querySelector("label");r&&r.childNodes.forEach(o=>{o.nodeType===Node.TEXT_NODE&&(o.textContent=`
+            ${n}
+        `)})}attributeChangedCallback(e,n,r){let o=this[`handleChange_${e}`];o?o.call(this,n,r):this.render()}disconnectedCallback(){}connectedCallback(){this.render()}render(){let e=this.getAttribute("label");if(!e)return;let n={};for(let r of Array.from(this.attributes))n[r.name]=r.value;this.innerHTML=`<label class="radio-input">
+            <input type="radio" ${a(n)} />
+            ${e}
+        </label>`}};l("radio-input",u);export{u 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", "../node_modules/@substrate-system/web-component/src/util.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", "export { toAttributes } from './attributes.js'\n\n/**\n * Check if the given tag name has been registered.\n *\n * @see {@link https://stackoverflow.com/a/28210364 stackoverflow}\n * @param {string} elName The custom element tag name.\n * @returns {boolean} True if the given name has been registered already.\n */\nexport function isRegistered (elName:string):boolean {\n    return document.createElement(elName).constructor !== window.HTMLElement\n}\n\nexport function define (name:string, element:CustomElementConstructor) {\n    if (!window) return\n    if (!('customElements' in window)) return\n\n    if (!isRegistered(name)) {\n        window.customElements.define(name, element)\n    }\n}\n\nexport const qs = document.querySelector.bind(document)\nexport const qsa = document.querySelectorAll.bind(document)\n\n/**\n * Get the closes parent element matching the given selector.\n * @param el Element to start from\n * @param s Selector for an element\n * @returns {HTMLElement|null} The closes parent element that matches.\n */\nexport function match (el:HTMLElement, s:string):HTMLElement|null {\n    if (!el.matches) el = el.parentElement!\n    return el.matches(s) ? el : el.closest(s)\n}\n", "import {\n    toAttributes,\n    type Attrs\n} from '@substrate-system/web-component/attributes'\nimport { define } from '@substrate-system/web-component/util'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'radio-input':RadioInput\n    }\n}\n\nexport class RadioInput extends HTMLElement {\n    static TAG = 'radio-input'\n    static observedAttributes = ['label', 'name', 'value', 'checked']\n\n    handleChange_label (oldValue:string, newValue:string) {\n        if (newValue === null) return\n        const label = this.querySelector('label')\n        if (!label) return\n        label.childNodes.forEach(node => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                node.textContent = `\\n            ${newValue}\\n        `\n            }\n        })\n    }\n\n    attributeChangedCallback (\n        name:string,\n        oldValue:string,\n        newValue:string\n    ) {\n        const handler = this[`handleChange_${name}`]\n        if (handler) {\n            handler.call(this, oldValue, newValue)\n        } else {\n            this.render()\n        }\n    }\n\n    disconnectedCallback () {\n    }\n\n    connectedCallback () {\n        this.render()\n    }\n\n    render () {\n        const labelText = this.getAttribute('label')\n        if (!labelText) return\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\ndefine('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,yFCAT,SAASM,EAAcC,EAAuB,CACjD,OAAO,SAAS,cAAcA,CAAM,EAAE,cAAgB,OAAO,WACjE,CAFgBC,EAAAF,EAAA,gBAAAE,EAAAF,EAAA,cAAA,EAIT,SAASG,EAAQC,EAAaC,EAAkC,CAC9D,QACC,mBAAoB,SAErBL,EAAaI,CAAI,GAClB,OAAO,eAAe,OAAOA,EAAMC,CAAO,EAElD,CAPgBH,EAAAC,EAAA,UAAAD,EAAAC,EAAA,QAAA,EAST,IAAMG,EAAK,SAAS,cAAc,KAAK,QAAQ,EACzCC,EAAM,SAAS,iBAAiB,KAAK,QAAQ,EAQnD,SAASC,EAAOC,EAAgBC,EAA2B,CAC9D,OAAKD,EAAG,UAASA,EAAKA,EAAG,eAClBA,EAAG,QAAQC,CAAC,EAAID,EAAKA,EAAG,QAAQC,CAAC,CAC5C,CAHgBR,EAAAM,EAAA,SAAAN,EAAAM,EAAA,OAAA,EClBT,IAAMG,EAAN,cAAyB,WAAY,CAb5C,MAa4C,CAAAC,EAAA,mBACxC,OAAO,IAAM,cACb,OAAO,mBAAqB,CAAC,QAAS,OAAQ,QAAS,SAAS,EAEhE,mBAAoBC,EAAiBC,EAAiB,CAClD,GAAIA,IAAa,KAAM,OACvB,IAAMC,EAAQ,KAAK,cAAc,OAAO,EACnCA,GACLA,EAAM,WAAW,QAAQC,GAAQ,CACzBA,EAAK,WAAa,KAAK,YACvBA,EAAK,YAAc;AAAA,cAAiBF,CAAQ;AAAA,UAEpD,CAAC,CACL,CAEA,yBACIG,EACAJ,EACAC,EACF,CACE,IAAMI,EAAU,KAAK,gBAAgBD,CAAI,EAAE,EACvCC,EACAA,EAAQ,KAAK,KAAML,EAAUC,CAAQ,EAErC,KAAK,OAAO,CAEpB,CAEA,sBAAwB,CACxB,CAEA,mBAAqB,CACjB,KAAK,OAAO,CAChB,CAEA,QAAU,CACN,IAAMK,EAAY,KAAK,aAAa,OAAO,EAC3C,GAAI,CAACA,EAAW,OAEhB,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,EAEAI,EAAO,cAAeZ,CAAU",
+  "names": ["toAttributes", "attrs", "acc", "k", "value", "__name", "isRegistered", "elName", "__name", "define", "name", "element", "qs", "qsa", "match", "el", "s", "RadioInput", "__name", "oldValue", "newValue", "label", "node", "name", "handler", "labelText", "obj", "attr", "toAttributes", "define"]
 }

package/dist/meta.json

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

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.4",
+  "version": "0.0.10",
   "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.37",
+    "@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",