xote 4.3.1 → 4.4.1

package/dist/xote.umd.js

@@ -1 +1 @@
-(function(g,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(g=typeof globalThis<"u"?globalThis:g||self,T(g.xote={}))})(this,(function(g){"use strict";let T={contents:0};function X(){return T.contents=T.contents+1|0,T.contents}function Ae(e){return e===void 0?{BS_PRIVATE_NESTED_SOME_NONE:0}:e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function Ce(e){if(e!=null)return Ae(e)}function re(e){if(e===null||e.BS_PRIVATE_NESTED_SOME_NONE===void 0)return e;let t=e.BS_PRIVATE_NESTED_SOME_NONE;if(t!==0)return{BS_PRIVATE_NESTED_SOME_NONE:t-1|0}}function q(e,t){return e!==void 0?re(e):t}function Ne(e,t,n){return e.reduce(n,t)}function Ie(e,t){let n=e.length,r=new Array(n),l=0;for(let u=0;u<n;++u){let a=e[u],c=t(a);c!==void 0&&(r[l]=re(c),l=l+1|0)}return r.length=l,r}function Me(e,t){let n=0;for(;;){let r=n;if(r===e.length)return;let l=t(e[r]);if(l!==void 0)return l;n=r+1|0}}let h=new Map,C=new Map,F=new Map,p={contents:void 0},N=new Set,O={contents:!1},b={contents:!1};function H(e){if(C.get(e)===void 0){C.set(e,new Set);return}}function je(e,t){let n=C.get(e);if(n!==void 0){n.forEach(t);return}}function Re(e,t){let n=C.get(e);if(n!==void 0){n.add(t);return}}function Pe(e,t){let n=C.get(e);if(n!==void 0){n.delete(t);return}}function De(e){return Array.from(q(C.get(e),new Set).values())}function le(e,t){let n=p.contents;p.contents=e;try{let r=t();return p.contents=n,r}catch(r){throw p.contents=n,r}}function Fe(e){let t=p.contents;p.contents=void 0;try{let n=e();return p.contents=t,n}catch(n){throw p.contents=t,n}}function Le(e){let t=p.contents;return t!==void 0?t===e:!1}function xe(e){if(!O.contents){O.contents=!0;try{e(),O.contents=!1;return}catch(t){throw O.contents=!1,t}}}function Ge(e,t){H(t);let n=Le(e),r=h.get(e);if(n&&r!==void 0&&!r.deps.has(t))return r.deps.add(t),Re(t,e)}function I(e){e.deps.forEach(t=>Pe(t,e.id)),e.deps.clear()}function Be(e){let t=F.get(e);if(t===void 0)return;F.delete(e);let n=h.get(t);if(n!==void 0){I(n),h.delete(t);return}}function ue(e){return Ne(e,0,(t,n)=>n>t?n:t)}function Ve(e){let t=[];return e.deps.forEach(n=>je(n,r=>{if(r===e.id)return;let l=h.get(r);if(l===void 0)return;if(typeof l.kind=="object"){t.push(l.level);return}})),ue(t)+1|0}function ze(e){let t=[];return e.deps.forEach(n=>{let r=F.get(n);if(r===void 0||r===e.id)return;let l=h.get(r);if(l!==void 0){t.push(l.level);return}}),ue(t)+1|0}function V(e){return typeof e.kind=="object"?ze(e):Ve(e)}function We(e,t){let n=h.get(e),r=h.get(t);if(n===void 0)return r!==void 0?1:0;if(r===void 0)return-1;let u=typeof n.kind=="object"?0:1,c=typeof r.kind=="object"?0:1,d=u-c|0;return d!==0?d:n.level-r.level|0}function Ke(e){b.contents=!0,I(e),le(e.id,()=>{e.run(),b.contents=!1}),e.level=V(e)}function ie(){for(;N.size>0;){let e=Array.from(N.values());N.clear(),e.sort(We),e.forEach(t=>{let n=h.get(t);if(n!==void 0)return Ke(n)})}}function oe(e){if(H(e),De(e).forEach(t=>{let n=h.get(t);if(n===void 0)return;let r=n.kind;if(typeof r=="object")return n.dirty?void 0:(n.dirty=!0,oe(r.VAL));N.add(t)}),N.size>0)return xe(ie)}function ce(e){let t=F.get(e);if(t===void 0)return;let n=h.get(t);if(n!==void 0&&n.dirty){b.contents=!0,I(n),le(t,()=>{n.run(),n.dirty=!1,b.contents=!1}),n.level=V(n);return}}function Xe(e){let t=O.contents;O.contents=!0;try{let n=e();return t||(O.contents=!1,N.size>0&&ie()),n}catch(n){throw t||(O.contents=!1),n}}let qe=Fe,He=H;function de(e,t,n){let r=X();return He(r),{id:r,value:{contents:e},version:{contents:0},equals:q(n,(l,u)=>l===u),name:t}}function Ue(e){ce(e.id);let t=p.contents;return t!==void 0&&Ge(t,e.id),e.value.contents}function Je(e){return ce(e.id),e.value.contents}function se(e,t){let n;try{n=!e.equals(e.value.contents,t)}catch{n=!0}if(n)return e.value.contents=t,e.version.contents=e.version.contents+1|0,oe(e.id)}function Qe(e,t){se(e,t(e.value.contents))}const Ye=Object.freeze(Object.defineProperty({__proto__:null,Id:void 0,Scheduler:void 0,batch:Xe,get:Ue,make:de,peek:Je,set:se,untrack:qe,update:Qe},Symbol.toStringTag,{value:"Module"}));function ae(e,t,n,r){return{id:e,kind:t,run:n,deps:new Set,level:0,dirty:!0,name:r}}function Ze(e,t){let n=X(),r={contents:void 0},u=ae(n,"Effect",()=>{let d=r.contents;d!==void 0&&d(),r.contents=e()},t);h.set(n,u),b.contents=!0,I(u);let a=p.contents;p.contents=n;try{u.run(),b.contents=!1}catch(d){throw p.contents=a,b.contents=!1,d}return p.contents=a,u.level=V(u),{dispose:()=>{let d=h.get(n);if(d===void 0)return;let x=r.contents;x!==void 0&&x(),I(d),h.delete(n)}}}const et=Object.freeze(Object.defineProperty({__proto__:null,Id:void 0,Observer:void 0,Scheduler:void 0,run:Ze},Symbol.toStringTag,{value:"Module"}));function tt(e,t){let n=de(void 0,t,void 0),r=X(),l=()=>{let c=e();n.value.contents=c},u=ae(r,{NAME:"Computed",VAL:n.id},l,void 0);h.set(r,u),b.contents=!0,I(u);let a=p.contents;p.contents=r;try{u.run(),u.dirty=!1,b.contents=!1}catch(c){throw p.contents=a,b.contents=!1,c}return p.contents=a,u.level=V(u),F.set(n.id,r),n}function nt(e){Be(e.id)}const rt=Object.freeze(Object.defineProperty({__proto__:null,Id:void 0,Observer:void 0,Scheduler:void 0,Signal:void 0,dispose:nt,make:tt},Symbol.toStringTag,{value:"Module"}));let o=Ye,S=rt,w=et;function fe(e){return Ie(e.split("/"),t=>{if(t!=="")return t.startsWith(":")?{TAG:"Param",_0:t.slice(1)}:{TAG:"Static",_0:t}})}function pe(e,t){let n=t.split("/").filter(u=>u!=="");if(e.length!==n.length)return"NoMatch";let r={};return e.every((u,a)=>{let c=n[a];return u.TAG==="Static"?c===u._0:(r[u._0]=c,!0)})?{TAG:"Match",_0:r}:"NoMatch"}function U(e,t){return pe(fe(e),t)}const lt=Object.freeze(Object.defineProperty({__proto__:null,match:U,matchPath:pe,parsePattern:fe},Symbol.toStringTag,{value:"Module"}));function ut(e,t){delete e[t]}let it={},z={contents:void 0};function ot(){return{disposers:[],computeds:[]}}function M(e,t){let n=z.contents;z.contents=e;let r=t();return z.contents=n,r}function j(e,t){e.disposers.push(t)}function me(e){e.disposers.forEach(t=>t.dispose()),e.computeds.forEach(t=>S.dispose(t))}function R(e,t){e.__xote_owner__=t}function he(e){return Ce(e.__xote_owner__)}let ct={currentOwner:z,createOwner:ot,runWithOwner:M,addDisposer:j,disposeOwner:me,setOwner:R,getOwner:he};function _e(e,t){return[e,{TAG:"Static",_0:t}]}function ge(e,t){return[e,{TAG:"SignalValue",_0:t}]}function Se(e,t){return[e,{TAG:"Compute",_0:t}]}let dt={$$static:_e,signal:ge,computed:Se};function L(e){let t=he(e);t!==void 0&&me(t),Array.from(e.childNodes||[]).forEach(L)}function k(e){switch(e.TAG){case"Element":let t=e.children,n=e.events,r=e.attrs,l=document.createElement(e.tag),u={disposers:[],computeds:[]};return R(l,u),M(u,()=>{r.forEach(i=>{let m=i[1],E=i[0];switch(m.TAG){case"Static":l.setAttribute(E,m._0);return;case"SignalValue":let v=m._0;l.setAttribute(E,o.peek(v));let y=w.run(()=>{l.setAttribute(E,o.get(v))},void 0);return j(u,y);case"Compute":let B=m._0;l.setAttribute(E,B());let D=w.run(()=>{l.setAttribute(E,B())},void 0);return j(u,D)}}),n.forEach(i=>{l.addEventListener(i[0],i[1])}),t.forEach(i=>{let m=k(i);l.appendChild(m)})}),l;case"Text":return document.createTextNode(e._0);case"SignalText":let a=e._0,c=document.createTextNode(o.peek(a)),d={disposers:[],computeds:[]};return R(c,d),M(d,()=>{let i=w.run(()=>{c.textContent=o.get(a)},void 0);j(d,i)}),c;case"Fragment":let x=document.createDocumentFragment();return e._0.forEach(i=>{let m=k(i);x.appendChild(m)}),x;case"SignalFragment":let un=e._0,Y={disposers:[],computeds:[]},P=document.createElement("div");return P.setAttribute("style","display: contents"),R(P,Y),M(Y,()=>{let i=w.run(()=>{let m=o.get(un);Array.from(P.childNodes||[]).forEach(L),P.innerHTML="",m.forEach(v=>{let y=k(v);P.appendChild(y)})},void 0);j(Y,i)}),P;case"LazyComponent":let we={disposers:[],computeds:[]},on=M(we,e._0),ke=k(on);return R(ke,we),ke;case"KeyedList":let Z=e.renderItem,ee=e.keyFn,Oe=e.signal,te={disposers:[],computeds:[]},ne=document.createComment(" keyed-list-start "),G=document.createComment(" keyed-list-end ");R(ne,te);let A={},cn=()=>{let i=G.parentNode;if(i==null)return;let m=o.get(Oe),E={};m.forEach(s=>{E[ee(s)]=s});let v=[];Object.keys(A).forEach(s=>{if(E[s]===void 0){v.push(s);return}}),v.forEach(s=>{let f=A[s];if(f!==void 0){L(f.element),f.element.remove(),ut(A,s);return}});let y=[],B={};m.forEach(s=>{let f=ee(s),K=A[f];if(K!==void 0){if(K.item!==s){B[f]=!0;let an=Z(s),fn=k(an),$e={key:f,item:s,element:fn};y.push($e),A[f]=$e;return}y.push(K);return}let dn=Z(s),sn=k(dn),Te={key:f,item:s,element:sn};y.push(Te),A[f]=Te});let D={contents:ne.nextSibling};y.forEach(s=>{let f=D.contents;if(f==null){i.insertBefore(s.element,G);return}if(f===G){i.insertBefore(s.element,G);return}if(f===s.element){D.contents=f.nextSibling;return}q(B[s.key],!1)?(L(f),i.replaceChild(s.element,f),D.contents=s.element.nextSibling):(i.insertBefore(s.element,f),D.contents=s.element.nextSibling)})},W=document.createDocumentFragment();return W.appendChild(ne),o.peek(Oe).forEach(i=>{let m=ee(i),E=Z(i),v=k(E),y={key:m,item:i,element:v};A[m]=y,W.appendChild(v)}),W.appendChild(G),M(te,()=>{let i=w.run(()=>{cn()},void 0);j(te,i)}),W}}let st={disposeElement:L,render:k};function at(e){return{TAG:"Text",_0:e}}function ft(e){return{TAG:"SignalText",_0:S.make(e,void 0)}}function pt(e){return{TAG:"Fragment",_0:e}}function J(e){return{TAG:"SignalFragment",_0:e}}function mt(e,t){return{TAG:"SignalFragment",_0:S.make(()=>o.get(e).map(t),void 0)}}function ht(e,t,n){return{TAG:"KeyedList",signal:e,keyFn:t,renderItem:n}}function _(e,t,n,r,l){let u=t!==void 0?t:[].map(d=>d),a=n!==void 0?n:[].map(d=>d),c=r!==void 0?r:[].map(d=>d);return{TAG:"Element",tag:e,attrs:u,events:a,children:c}}function _t(e,t,n,r){return _("div",e,t,n)}function gt(e,t,n,r){return _("span",e,t,n)}function St(e,t,n,r){return _("button",e,t,n)}function Et(e,t,n){return _("input",e,t,void 0)}function bt(e,t,n,r){return _("h1",e,t,n)}function vt(e,t,n,r){return _("h2",e,t,n)}function yt(e,t,n,r){return _("h3",e,t,n)}function wt(e,t,n,r){return _("p",e,t,n)}function kt(e,t,n,r){return _("ul",e,t,n)}function Ot(e,t,n,r){return _("li",e,t,n)}function Ee(e,t,n,r){return _("a",e,t,n)}function be(e,t){let n=k(e);t.appendChild(n)}function Tt(e,t){let n=document.getElementById(t);if(n==null){console.error("Container element not found: "+t);return}else return be(e,n)}let ve=_e;const $t=Object.freeze(Object.defineProperty({__proto__:null,Attributes:dt,DOM:it,Reactivity:ct,Render:st,a:Ee,attr:ve,button:St,computedAttr:Se,div:_t,element:_,fragment:pt,h1:bt,h2:vt,h3:yt,input:Et,keyedList:ht,li:Ot,list:mt,mount:be,mountById:Tt,p:wt,signalAttr:ge,signalFragment:J,span:gt,text:at,textSignal:ft,ul:kt},Symbol.toStringTag,{value:"Module"}));let $=o.make({pathname:"/",search:"",hash:""},void 0,void 0);function Q(){return{pathname:window.location.pathname,search:window.location.search,hash:window.location.hash}}function At(){o.set($,Q());let e=t=>o.set($,Q());window.addEventListener("popstate",e)}function ye(e,t,n,r){let l=t!==void 0?t:"",u=n!==void 0?n:"",a={pathname:e,search:l,hash:u},c=e+l+u,d={};window.history.pushState(d,"",c),o.set($,a)}function Ct(e,t,n,r){let l=t!==void 0?t:"",u=n!==void 0?n:"",a={pathname:e,search:l,hash:u},c=e+l+u,d={};window.history.replaceState(d,"",c),o.set($,a)}function Nt(e,t){return J(S.make(()=>{let n=o.get($),r=U(e,n.pathname);return typeof r!="object"?[]:[t(r._0)]},void 0))}function It(e){return J(S.make(()=>{let t=o.get($),n=Me(e,r=>{let l=U(r.pattern,t.pathname);if(typeof l=="object")return r.render(l._0)});return n!==void 0?[n]:[]},void 0))}function Mt(e,t,n,r){let l=t!==void 0?t:[],u=n!==void 0?n:[],a=c=>{c.preventDefault(),ye(e,void 0,void 0)};return Ee(l.concat([ve("href",e)]),[["click",a]],u)}const jt=Object.freeze(Object.defineProperty({__proto__:null,Component:void 0,Route:void 0,getCurrentLocation:Q,init:At,link:Mt,location:$,push:ye,replace:Ct,route:Nt,routes:It},Symbol.toStringTag,{value:"Module"}));let Rt=o.Id,Pt=o.Scheduler,Dt=o.make,Ft=o.get,Lt=o.peek,xt=o.set,Gt=o.update,Bt=o.batch,Vt=o.untrack,zt={Id:Rt,Scheduler:Pt,make:Dt,get:Ft,peek:Lt,set:xt,update:Gt,batch:Bt,untrack:Vt},Wt=S.Id,Kt=S.Signal,Xt=S.Observer,qt=S.Scheduler,Ht=S.make,Ut=S.dispose,Jt={Id:Wt,Signal:Kt,Observer:Xt,Scheduler:qt,make:Ht,dispose:Ut},Qt=w.Id,Yt=w.Observer,Zt=w.Scheduler,en=w.run,tn={Id:Qt,Observer:Yt,Scheduler:Zt,run:en},nn=$t,rn=lt,ln=jt;g.Component=nn,g.Computed=Jt,g.Effect=tn,g.Route=rn,g.Router=ln,g.Signal=zt,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
+(function(g,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(g=typeof globalThis<"u"?globalThis:g||self,T(g.xote={}))})(this,(function(g){"use strict";let T={contents:0};function q(){return T.contents=T.contents+1|0,T.contents}function Ce(e){return e===void 0?{BS_PRIVATE_NESTED_SOME_NONE:0}:e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function Ne(e){if(e!=null)return Ce(e)}function le(e){if(e===null||e.BS_PRIVATE_NESTED_SOME_NONE===void 0)return e;let t=e.BS_PRIVATE_NESTED_SOME_NONE;if(t!==0)return{BS_PRIVATE_NESTED_SOME_NONE:t-1|0}}function H(e,t){return e!==void 0?le(e):t}function Ie(e,t,n){return e.reduce(n,t)}function Me(e,t){let n=e.length,r=new Array(n),l=0;for(let u=0;u<n;++u){let a=e[u],c=t(a);c!==void 0&&(r[l]=le(c),l=l+1|0)}return r.length=l,r}function je(e,t){let n=0;for(;;){let r=n;if(r===e.length)return;let l=t(e[r]);if(l!==void 0)return l;n=r+1|0}}let h=new Map,C=new Map,L=new Map,p={contents:void 0},N=new Set,k={contents:!1},v={contents:!1};function U(e){if(C.get(e)===void 0){C.set(e,new Set);return}}function Re(e,t){let n=C.get(e);if(n!==void 0){n.forEach(t);return}}function Pe(e,t){let n=C.get(e);if(n!==void 0){n.add(t);return}}function De(e,t){let n=C.get(e);if(n!==void 0){n.delete(t);return}}function Fe(e){return Array.from(H(C.get(e),new Set).values())}function ue(e,t){let n=p.contents;p.contents=e;try{let r=t();return p.contents=n,r}catch(r){throw p.contents=n,r}}function Le(e){let t=p.contents;p.contents=void 0;try{let n=e();return p.contents=t,n}catch(n){throw p.contents=t,n}}function xe(e){let t=p.contents;return t!==void 0?t===e:!1}function Ge(e){if(!k.contents){k.contents=!0;try{e(),k.contents=!1;return}catch(t){throw k.contents=!1,t}}}function Be(e,t){U(t);let n=xe(e),r=h.get(e);if(n&&r!==void 0&&!r.deps.has(t))return r.deps.add(t),Pe(t,e)}function I(e){e.deps.forEach(t=>De(t,e.id)),e.deps.clear()}function Ve(e){let t=L.get(e);if(t===void 0)return;L.delete(e);let n=h.get(t);if(n!==void 0){I(n),h.delete(t);return}}function ie(e){return Ie(e,0,(t,n)=>n>t?n:t)}function ze(e){let t=[];return e.deps.forEach(n=>Re(n,r=>{if(r===e.id)return;let l=h.get(r);if(l===void 0)return;if(typeof l.kind=="object"){t.push(l.level);return}})),ie(t)+1|0}function We(e){let t=[];return e.deps.forEach(n=>{let r=L.get(n);if(r===void 0||r===e.id)return;let l=h.get(r);if(l!==void 0){t.push(l.level);return}}),ie(t)+1|0}function z(e){return typeof e.kind=="object"?We(e):ze(e)}function Ke(e,t){let n=h.get(e),r=h.get(t);if(n===void 0)return r!==void 0?1:0;if(r===void 0)return-1;let u=typeof n.kind=="object"?0:1,c=typeof r.kind=="object"?0:1,d=u-c|0;return d!==0?d:n.level-r.level|0}function Xe(e){v.contents=!0,I(e),ue(e.id,()=>{e.run(),v.contents=!1}),e.level=z(e)}function oe(){for(;N.size>0;){let e=Array.from(N.values());N.clear(),e.sort(Ke),e.forEach(t=>{let n=h.get(t);if(n!==void 0)return Xe(n)})}}function ce(e){if(U(e),Fe(e).forEach(t=>{let n=h.get(t);if(n===void 0)return;let r=n.kind;if(typeof r=="object")return n.dirty?void 0:(n.dirty=!0,ce(r.VAL));N.add(t)}),N.size>0)return Ge(oe)}function de(e){let t=L.get(e);if(t===void 0)return;let n=h.get(t);if(n!==void 0&&n.dirty){v.contents=!0,I(n),ue(t,()=>{n.run(),n.dirty=!1,v.contents=!1}),n.level=z(n);return}}function qe(e){let t=k.contents;k.contents=!0;try{let n=e();return t||(k.contents=!1,N.size>0&&oe()),n}catch(n){throw t||(k.contents=!1),n}}let He=Le,Ue=U;function se(e,t,n){let r=q();return Ue(r),{id:r,value:{contents:e},version:{contents:0},equals:H(n,(l,u)=>l===u),name:t}}function Je(e){de(e.id);let t=p.contents;return t!==void 0&&Be(t,e.id),e.value.contents}function Qe(e){return de(e.id),e.value.contents}function ae(e,t){let n;try{n=!e.equals(e.value.contents,t)}catch{n=!0}if(n)return e.value.contents=t,e.version.contents=e.version.contents+1|0,ce(e.id)}function Ye(e,t){ae(e,t(e.value.contents))}const Ze=Object.freeze(Object.defineProperty({__proto__:null,Id:void 0,Scheduler:void 0,batch:qe,get:Je,make:se,peek:Qe,set:ae,untrack:He,update:Ye},Symbol.toStringTag,{value:"Module"}));function fe(e,t,n,r){return{id:e,kind:t,run:n,deps:new Set,level:0,dirty:!0,name:r}}function et(e,t){let n=q(),r={contents:void 0},u=fe(n,"Effect",()=>{let d=r.contents;d!==void 0&&d(),r.contents=e()},t);h.set(n,u),v.contents=!0,I(u);let a=p.contents;p.contents=n;try{u.run(),v.contents=!1}catch(d){throw p.contents=a,v.contents=!1,d}return p.contents=a,u.level=z(u),{dispose:()=>{let d=h.get(n);if(d===void 0)return;let G=r.contents;G!==void 0&&G(),I(d),h.delete(n)}}}const tt=Object.freeze(Object.defineProperty({__proto__:null,Id:void 0,Observer:void 0,Scheduler:void 0,run:et},Symbol.toStringTag,{value:"Module"}));function nt(e,t){let n=se(void 0,t,void 0),r=q(),l=()=>{let c=e();n.value.contents=c},u=fe(r,{NAME:"Computed",VAL:n.id},l,void 0);h.set(r,u),v.contents=!0,I(u);let a=p.contents;p.contents=r;try{u.run(),u.dirty=!1,v.contents=!1}catch(c){throw p.contents=a,v.contents=!1,c}return p.contents=a,u.level=z(u),L.set(n.id,r),n}function rt(e){Ve(e.id)}const lt=Object.freeze(Object.defineProperty({__proto__:null,Id:void 0,Observer:void 0,Scheduler:void 0,Signal:void 0,dispose:rt,make:nt},Symbol.toStringTag,{value:"Module"}));let o=Ze,S=lt,w=tt;function pe(e){return Me(e.split("/"),t=>{if(t!=="")return t.startsWith(":")?{TAG:"Param",_0:t.slice(1)}:{TAG:"Static",_0:t}})}function me(e,t){let n=t.split("/").filter(u=>u!=="");if(e.length!==n.length)return"NoMatch";let r={};return e.every((u,a)=>{let c=n[a];return u.TAG==="Static"?c===u._0:(r[u._0]=c,!0)})?{TAG:"Match",_0:r}:"NoMatch"}function J(e,t){return me(pe(e),t)}const ut=Object.freeze(Object.defineProperty({__proto__:null,match:J,matchPath:me,parsePattern:pe},Symbol.toStringTag,{value:"Module"}));function it(e,t){delete e[t]}function M(e,t,n){switch(t){case"checked":e.checked=n==="true";return;case"value":e.value=n;return;default:e.setAttribute(t,n);return}}let ot={setAttrOrProp:M},W={contents:void 0};function ct(){return{disposers:[],computeds:[]}}function j(e,t){let n=W.contents;W.contents=e;let r=t();return W.contents=n,r}function R(e,t){e.disposers.push(t)}function he(e){e.disposers.forEach(t=>t.dispose()),e.computeds.forEach(t=>S.dispose(t))}function P(e,t){e.__xote_owner__=t}function _e(e){return Ne(e.__xote_owner__)}let dt={currentOwner:W,createOwner:ct,runWithOwner:j,addDisposer:R,disposeOwner:he,setOwner:P,getOwner:_e};function ge(e,t){return[e,{TAG:"Static",_0:t}]}function Se(e,t){return[e,{TAG:"SignalValue",_0:t}]}function Ee(e,t){return[e,{TAG:"Compute",_0:t}]}let st={$$static:ge,signal:Se,computed:Ee};function x(e){let t=_e(e);t!==void 0&&he(t),Array.from(e.childNodes||[]).forEach(x)}function O(e){switch(e.TAG){case"Element":let t=e.children,n=e.events,r=e.attrs,l=document.createElement(e.tag),u={disposers:[],computeds:[]};return P(l,u),j(u,()=>{r.forEach(i=>{let m=i[1],E=i[0];switch(m.TAG){case"Static":return M(l,E,m._0);case"SignalValue":let y=m._0;M(l,E,o.peek(y));let b=w.run(()=>{M(l,E,o.get(y))},void 0);return R(u,b);case"Compute":let V=m._0;M(l,E,V());let F=w.run(()=>{M(l,E,V())},void 0);return R(u,F)}}),n.forEach(i=>{l.addEventListener(i[0],i[1])}),t.forEach(i=>{let m=O(i);l.appendChild(m)})}),l;case"Text":return document.createTextNode(e._0);case"SignalText":let a=e._0,c=document.createTextNode(o.peek(a)),d={disposers:[],computeds:[]};return P(c,d),j(d,()=>{let i=w.run(()=>{c.textContent=o.get(a)},void 0);R(d,i)}),c;case"Fragment":let G=document.createDocumentFragment();return e._0.forEach(i=>{let m=O(i);G.appendChild(m)}),G;case"SignalFragment":let on=e._0,Z={disposers:[],computeds:[]},D=document.createElement("div");return D.setAttribute("style","display: contents"),P(D,Z),j(Z,()=>{let i=w.run(()=>{let m=o.get(on);Array.from(D.childNodes||[]).forEach(x),D.innerHTML="",m.forEach(y=>{let b=O(y);D.appendChild(b)})},void 0);R(Z,i)}),D;case"LazyComponent":let Oe={disposers:[],computeds:[]},cn=j(Oe,e._0),ke=O(cn);return P(ke,Oe),ke;case"KeyedList":let ee=e.renderItem,te=e.keyFn,Te=e.signal,ne={disposers:[],computeds:[]},re=document.createComment(" keyed-list-start "),B=document.createComment(" keyed-list-end ");P(re,ne);let A={},dn=()=>{let i=B.parentNode;if(i==null)return;let m=o.get(Te),E={};m.forEach(s=>{E[te(s)]=s});let y=[];Object.keys(A).forEach(s=>{if(E[s]===void 0){y.push(s);return}}),y.forEach(s=>{let f=A[s];if(f!==void 0){x(f.element),f.element.remove(),it(A,s);return}});let b=[],V={};m.forEach(s=>{let f=te(s),X=A[f];if(X!==void 0){if(X.item!==s){V[f]=!0;let fn=ee(s),pn=O(fn),Ae={key:f,item:s,element:pn};b.push(Ae),A[f]=Ae;return}b.push(X);return}let sn=ee(s),an=O(sn),$e={key:f,item:s,element:an};b.push($e),A[f]=$e});let F={contents:re.nextSibling};b.forEach(s=>{let f=F.contents;if(f==null){i.insertBefore(s.element,B);return}if(f===B){i.insertBefore(s.element,B);return}if(f===s.element){F.contents=f.nextSibling;return}H(V[s.key],!1)?(x(f),i.replaceChild(s.element,f),F.contents=s.element.nextSibling):(i.insertBefore(s.element,f),F.contents=s.element.nextSibling)})},K=document.createDocumentFragment();return K.appendChild(re),o.peek(Te).forEach(i=>{let m=te(i),E=ee(i),y=O(E),b={key:m,item:i,element:y};A[m]=b,K.appendChild(y)}),K.appendChild(B),j(ne,()=>{let i=w.run(()=>{dn()},void 0);R(ne,i)}),K}}let at={disposeElement:x,render:O};function ft(e){return{TAG:"Text",_0:e}}function pt(e){return{TAG:"SignalText",_0:S.make(e,void 0)}}function mt(e){return{TAG:"Fragment",_0:e}}function Q(e){return{TAG:"SignalFragment",_0:e}}function ht(e,t){return{TAG:"SignalFragment",_0:S.make(()=>o.get(e).map(t),void 0)}}function _t(e,t,n){return{TAG:"KeyedList",signal:e,keyFn:t,renderItem:n}}function _(e,t,n,r,l){let u=t!==void 0?t:[].map(d=>d),a=n!==void 0?n:[].map(d=>d),c=r!==void 0?r:[].map(d=>d);return{TAG:"Element",tag:e,attrs:u,events:a,children:c}}function gt(e,t,n,r){return _("div",e,t,n)}function St(e,t,n,r){return _("span",e,t,n)}function Et(e,t,n,r){return _("button",e,t,n)}function vt(e,t,n){return _("input",e,t,void 0)}function yt(e,t,n,r){return _("h1",e,t,n)}function bt(e,t,n,r){return _("h2",e,t,n)}function wt(e,t,n,r){return _("h3",e,t,n)}function Ot(e,t,n,r){return _("p",e,t,n)}function kt(e,t,n,r){return _("ul",e,t,n)}function Tt(e,t,n,r){return _("li",e,t,n)}function ve(e,t,n,r){return _("a",e,t,n)}function ye(e,t){let n=O(e);t.appendChild(n)}function $t(e,t){let n=document.getElementById(t);if(n==null){console.error("Container element not found: "+t);return}else return ye(e,n)}let be=ge;const At=Object.freeze(Object.defineProperty({__proto__:null,Attributes:st,DOM:ot,Reactivity:dt,Render:at,a:ve,attr:be,button:Et,computedAttr:Ee,div:gt,element:_,fragment:mt,h1:yt,h2:bt,h3:wt,input:vt,keyedList:_t,li:Tt,list:ht,mount:ye,mountById:$t,p:Ot,signalAttr:Se,signalFragment:Q,span:St,text:ft,textSignal:pt,ul:kt},Symbol.toStringTag,{value:"Module"}));let $=o.make({pathname:"/",search:"",hash:""},void 0,void 0);function Y(){return{pathname:window.location.pathname,search:window.location.search,hash:window.location.hash}}function Ct(){o.set($,Y());let e=t=>o.set($,Y());window.addEventListener("popstate",e)}function we(e,t,n,r){let l=t!==void 0?t:"",u=n!==void 0?n:"",a={pathname:e,search:l,hash:u},c=e+l+u,d={};window.history.pushState(d,"",c),o.set($,a)}function Nt(e,t,n,r){let l=t!==void 0?t:"",u=n!==void 0?n:"",a={pathname:e,search:l,hash:u},c=e+l+u,d={};window.history.replaceState(d,"",c),o.set($,a)}function It(e,t){return Q(S.make(()=>{let n=o.get($),r=J(e,n.pathname);return typeof r!="object"?[]:[t(r._0)]},void 0))}function Mt(e){return Q(S.make(()=>{let t=o.get($),n=je(e,r=>{let l=J(r.pattern,t.pathname);if(typeof l=="object")return r.render(l._0)});return n!==void 0?[n]:[]},void 0))}function jt(e,t,n,r){let l=t!==void 0?t:[],u=n!==void 0?n:[],a=c=>{c.preventDefault(),we(e,void 0,void 0)};return ve(l.concat([be("href",e)]),[["click",a]],u)}const Rt=Object.freeze(Object.defineProperty({__proto__:null,Component:void 0,Route:void 0,getCurrentLocation:Y,init:Ct,link:jt,location:$,push:we,replace:Nt,route:It,routes:Mt},Symbol.toStringTag,{value:"Module"}));let Pt=o.Id,Dt=o.Scheduler,Ft=o.make,Lt=o.get,xt=o.peek,Gt=o.set,Bt=o.update,Vt=o.batch,zt=o.untrack,Wt={Id:Pt,Scheduler:Dt,make:Ft,get:Lt,peek:xt,set:Gt,update:Bt,batch:Vt,untrack:zt},Kt=S.Id,Xt=S.Signal,qt=S.Observer,Ht=S.Scheduler,Ut=S.make,Jt=S.dispose,Qt={Id:Kt,Signal:Xt,Observer:qt,Scheduler:Ht,make:Ut,dispose:Jt},Yt=w.Id,Zt=w.Observer,en=w.Scheduler,tn=w.run,nn={Id:Yt,Observer:Zt,Scheduler:en,run:tn},rn=At,ln=ut,un=Rt;g.Component=rn,g.Computed=Qt,g.Effect=nn,g.Route=ln,g.Router=un,g.Signal=Wt,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xote",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "repository": {
     "url": "https://github.com/brnrdog/xote"
   },

package/src/Xote__Component.res

@@ -29,6 +29,16 @@ module DOM = {
   @send external insertBefore: (Dom.element, Dom.element, Dom.element) => unit = "insertBefore"
   @set external setTextContent: (Dom.element, string) => unit = "textContent"
   @set external setValue: (Dom.element, string) => unit = "value"
+  @set external setChecked: (Dom.element, bool) => unit = "checked"
+
+  /* Set attribute or property depending on attribute name */
+  let setAttrOrProp = (el: Dom.element, key: string, value: string): unit => {
+    switch key {
+    | "value" => setValue(el, value)
+    | "checked" => setChecked(el, value == "true")
+    | _ => setAttribute(el, key, value)
+    }
+  }
 }
 
 /* ============================================================================
@@ -238,22 +248,22 @@ module Render = {
           /* Set attributes */
           attrs->Array.forEach(((key, value)) => {
             switch value {
-            | Static(v) => DOM.setAttribute(el, key, v)
+            | Static(v) => DOM.setAttrOrProp(el, key, v)
             | SignalValue(signal) => {
-                DOM.setAttribute(el, key, Signal.peek(signal))
+                DOM.setAttrOrProp(el, key, Signal.peek(signal))
                 let disposer = Effect.run(
                   () => {
-                    DOM.setAttribute(el, key, Signal.get(signal))
+                    DOM.setAttrOrProp(el, key, Signal.get(signal))
                     None
                   },
                 )
                 addDisposer(owner, disposer)
               }
             | Compute(compute) => {
-                DOM.setAttribute(el, key, compute())
+                DOM.setAttrOrProp(el, key, compute())
                 let disposer = Effect.run(
                   () => {
-                    DOM.setAttribute(el, key, compute())
+                    DOM.setAttrOrProp(el, key, compute())
                     None
                   },
                 )

package/src/Xote__Component.res.mjs

@@ -5,7 +5,23 @@ import * as Core__Dict from "@rescript/core/src/Core__Dict.res.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
 import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
 
-let DOM = {};
+function setAttrOrProp(el, key, value) {
+  switch (key) {
+    case "checked" :
+      el.checked = value === "true";
+      return;
+    case "value" :
+      el.value = value;
+      return;
+    default:
+      el.setAttribute(key, value);
+      return;
+  }
+}
+
+let DOM = {
+  setAttrOrProp: setAttrOrProp
+};
 
 let currentOwner = {
   contents: undefined
@@ -116,20 +132,19 @@ function render(node) {
           let key = param[0];
           switch (value.TAG) {
             case "Static" :
-              el.setAttribute(key, value._0);
-              return;
+              return setAttrOrProp(el, key, value._0);
             case "SignalValue" :
               let signal = value._0;
-              el.setAttribute(key, Signals.Signal.peek(signal));
+              setAttrOrProp(el, key, Signals.Signal.peek(signal));
               let disposer = Signals.Effect.run(() => {
-                el.setAttribute(key, Signals.Signal.get(signal));
+                setAttrOrProp(el, key, Signals.Signal.get(signal));
               }, undefined);
               return addDisposer(owner, disposer);
             case "Compute" :
               let compute = value._0;
-              el.setAttribute(key, compute());
+              setAttrOrProp(el, key, compute());
               let disposer$1 = Signals.Effect.run(() => {
-                el.setAttribute(key, compute());
+                setAttrOrProp(el, key, compute());
               }, undefined);
               return addDisposer(owner, disposer$1);
           }

package/src/Xote__JSX.res

@@ -63,23 +63,76 @@ module Elements = {
   /* Helper to convert a computed function to an attributeValue */
   let computed = (f: unit => string): attributeValue => Any(f)
 
-  /* Props type for HTML elements - supports common attributes and events */
-  type props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data> = {
-    /* Standard attributes - can be static strings or reactive values */
+  /* Props type for HTML elements - supports common attributes and events
+   * String-like attributes use polymorphic types to accept strings, signals, or computed functions
+   */
+  type props<
+    'id,
+    'class,
+    'style,
+    'typ,
+    'name,
+    'value,
+    'placeholder,
+    'min,
+    'max,
+    'step,
+    'pattern,
+    'autoComplete,
+    'accept,
+    'forAttr,
+    'href,
+    'target,
+    'src,
+    'alt,
+    'width,
+    'height,
+    'role,
+    'ariaLabel,
+  > = {
+    /* Standard attributes - can be static strings, signals, or computed values */
     id?: 'id,
     class?: 'class,
     style?: 'style,
-    /* Input attributes */
+    /* Form/Input attributes */
     @as("type") type_?: 'typ,
+    name?: 'name,
     value?: 'value,
     placeholder?: 'placeholder,
     disabled?: bool,
     checked?: bool,
+    required?: bool,
+    readOnly?: bool,
+    maxLength?: int,
+    minLength?: int,
+    min?: 'min,
+    max?: 'max,
+    step?: 'step,
+    pattern?: 'pattern,
+    autoComplete?: 'autoComplete,
+    multiple?: bool,
+    accept?: 'accept,
+    rows?: int,
+    cols?: int,
+    /* Label attributes */
+    @as("for") for_?: 'forAttr,
     /* Link attributes */
     href?: 'href,
     target?: 'target,
+    /* Image attributes */
+    src?: 'src,
+    alt?: 'alt,
+    width?: 'width,
+    height?: 'height,
+    /* Accessibility attributes */
+    role?: 'role,
+    tabIndex?: int,
+    @as("aria-label") ariaLabel?: 'ariaLabel,
+    @as("aria-hidden") ariaHidden?: bool,
+    @as("aria-expanded") ariaExpanded?: bool,
+    @as("aria-selected") ariaSelected?: bool,
     /* Data attributes */
-    data?: 'data,
+    data?: Obj.t,
     /* Event handlers */
     onClick?: Dom.event => unit,
     onInput?: Dom.event => unit,
@@ -118,10 +171,34 @@ module Elements = {
 
   /* Convert props to attrs array */
   let propsToAttrs = (
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): array<(string, Component.attrValue)> => {
     let attrs = []
 
+    /* Standard attributes */
     switch props.id {
     | Some(v) => attrs->Array.push(convertAttrValue("id", v))
     | None => ()
@@ -137,11 +214,17 @@ module Elements = {
     | None => ()
     }
 
+    /* Form/Input attributes */
     switch props.type_ {
     | Some(v) => attrs->Array.push(convertAttrValue("type", v))
     | None => ()
     }
 
+    switch props.name {
+    | Some(v) => attrs->Array.push(convertAttrValue("name", v))
+    | None => ()
+    }
+
     switch props.value {
     | Some(v) => attrs->Array.push(convertAttrValue("value", v))
     | None => ()
@@ -162,6 +245,78 @@ module Elements = {
     | _ => ()
     }
 
+    switch props.required {
+    | Some(true) => attrs->Array.push(Component.attr("required", "true"))
+    | _ => ()
+    }
+
+    switch props.readOnly {
+    | Some(true) => attrs->Array.push(Component.attr("readonly", "true"))
+    | _ => ()
+    }
+
+    switch props.maxLength {
+    | Some(v) => attrs->Array.push(Component.attr("maxlength", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.minLength {
+    | Some(v) => attrs->Array.push(Component.attr("minlength", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.min {
+    | Some(v) => attrs->Array.push(convertAttrValue("min", v))
+    | None => ()
+    }
+
+    switch props.max {
+    | Some(v) => attrs->Array.push(convertAttrValue("max", v))
+    | None => ()
+    }
+
+    switch props.step {
+    | Some(v) => attrs->Array.push(convertAttrValue("step", v))
+    | None => ()
+    }
+
+    switch props.pattern {
+    | Some(v) => attrs->Array.push(convertAttrValue("pattern", v))
+    | None => ()
+    }
+
+    switch props.autoComplete {
+    | Some(v) => attrs->Array.push(convertAttrValue("autocomplete", v))
+    | None => ()
+    }
+
+    switch props.multiple {
+    | Some(true) => attrs->Array.push(Component.attr("multiple", "true"))
+    | _ => ()
+    }
+
+    switch props.accept {
+    | Some(v) => attrs->Array.push(convertAttrValue("accept", v))
+    | None => ()
+    }
+
+    switch props.rows {
+    | Some(v) => attrs->Array.push(Component.attr("rows", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.cols {
+    | Some(v) => attrs->Array.push(Component.attr("cols", Int.toString(v)))
+    | None => ()
+    }
+
+    /* Label attributes */
+    switch props.for_ {
+    | Some(v) => attrs->Array.push(convertAttrValue("for", v))
+    | None => ()
+    }
+
+    /* Link attributes */
     switch props.href {
     | Some(v) => attrs->Array.push(convertAttrValue("href", v))
     | None => ()
@@ -172,6 +327,62 @@ module Elements = {
     | None => ()
     }
 
+    /* Image attributes */
+    switch props.src {
+    | Some(v) => attrs->Array.push(convertAttrValue("src", v))
+    | None => ()
+    }
+
+    switch props.alt {
+    | Some(v) => attrs->Array.push(convertAttrValue("alt", v))
+    | None => ()
+    }
+
+    switch props.width {
+    | Some(v) => attrs->Array.push(convertAttrValue("width", v))
+    | None => ()
+    }
+
+    switch props.height {
+    | Some(v) => attrs->Array.push(convertAttrValue("height", v))
+    | None => ()
+    }
+
+    /* Accessibility attributes */
+    switch props.role {
+    | Some(v) => attrs->Array.push(convertAttrValue("role", v))
+    | None => ()
+    }
+
+    switch props.tabIndex {
+    | Some(v) => attrs->Array.push(Component.attr("tabindex", Int.toString(v)))
+    | None => ()
+    }
+
+    switch props.ariaLabel {
+    | Some(v) => attrs->Array.push(convertAttrValue("aria-label", v))
+    | None => ()
+    }
+
+    switch props.ariaHidden {
+    | Some(true) => attrs->Array.push(Component.attr("aria-hidden", "true"))
+    | Some(false) => attrs->Array.push(Component.attr("aria-hidden", "false"))
+    | None => ()
+    }
+
+    switch props.ariaExpanded {
+    | Some(true) => attrs->Array.push(Component.attr("aria-expanded", "true"))
+    | Some(false) => attrs->Array.push(Component.attr("aria-expanded", "false"))
+    | None => ()
+    }
+
+    switch props.ariaSelected {
+    | Some(true) => attrs->Array.push(Component.attr("aria-selected", "true"))
+    | Some(false) => attrs->Array.push(Component.attr("aria-selected", "false"))
+    | None => ()
+    }
+
+    /* Data attributes */
     switch props.data {
     | Some(_dataObj) => {
         let _ = %raw(`
@@ -188,7 +399,30 @@ module Elements = {
 
   /* Convert props to events array */
   let propsToEvents = (
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): array<(string, Dom.event => unit)> => {
     let events = []
 
@@ -247,7 +481,30 @@ module Elements = {
 
   /* Extract children from props */
   let getChildren = (
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): array<element> => {
     switch props.children {
     | Some(Fragment(children)) => children
@@ -259,7 +516,30 @@ module Elements = {
   /* Create an element from a tag string and props */
   let createElement = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): element => {
     Component.Element({
       tag,
@@ -272,17 +552,86 @@ module Elements = {
   /* JSX functions for HTML elements */
   let jsx = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): element => createElement(tag, props)
 
   let jsxs = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
   ): element => createElement(tag, props)
 
   let jsxKeyed = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
     ~key: option<string>=?,
     _: unit,
   ): element => {
@@ -292,7 +641,30 @@ module Elements = {
 
   let jsxsKeyed = (
     tag: string,
-    props: props<'id, 'class, 'style, 'typ, 'value, 'placeholder, 'href, 'target, 'data>,
+    props: props<
+      'id,
+      'class,
+      'style,
+      'typ,
+      'name,
+      'value,
+      'placeholder,
+      'min,
+      'max,
+      'step,
+      'pattern,
+      'autoComplete,
+      'accept,
+      'forAttr,
+      'href,
+      'target,
+      'src,
+      'alt,
+      'width,
+      'height,
+      'role,
+      'ariaLabel,
+    >,
     ~key: option<string>=?,
     _: unit,
   ): element => {