mi-element 0.9.7 → 0.9.8

package/dist/bundle.js

@@ -1,6 +1,6 @@
 /*!
  * SPDX-License-Identifier: MIT
- * mi-element v0.9.7
+ * mi-element v0.9.8
  */
 const context = [];
 
@@ -183,7 +183,33 @@ const toJson = any => {
   }
 }, nameMap = {
   class: 'className',
-  for: 'htmlFor'
+  for: 'htmlFor',
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  readonly: 'readOnly',
+  colorspace: 'colorSpace',
+  tabindex: 'tabIndex',
+  accesskey: 'accessKey',
+  rowspan: 'rowSpan',
+  colspan: 'colSpan',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  contenteditable: 'contentEditable',
+  crossorigin: 'crossOrigin',
+  referrerpolicy: 'referrerPolicy',
+  usemap: 'useMap',
+  ismap: 'isMap',
+  enctype: 'encType',
+  formaction: 'formAction',
+  formenctype: 'formEncType',
+  formmethod: 'formMethod',
+  formnovalidate: 'formNoValidate',
+  formtarget: 'formTarget',
+  novalidate: 'noValidate',
+  inputmode: 'inputMode',
+  datetime: 'dateTime',
+  frameborder: 'frameBorder',
+  bgcolor: 'bgColor'
 };
 
 class MiElement extends HTMLElement {

package/dist/bundle.min.js

@@ -1,5 +1,5 @@
 /*!
  * SPDX-License-Identifier: MIT
- * mi-element v0.9.7
+ * mi-element v0.9.8
  */
-const t=[];class e extends EventTarget{#t;#e;constructor(t,e){super();const{equals:s}=e||{};this.#t=t,this.#e=s??((t,e)=>t===e)}get value(){return this.get()}set value(t){this.set(t)}get(){const e=t[t.length-1];return e&&e.add(this),this.#t}set(t){this.#e(this.#t,t)||(this.#t=t,this.dispatchEvent(new CustomEvent("signal")))}}const s=(t,s)=>t instanceof e?t:new e(t,s);function n(e){const s=new Set;t.push(s);try{e()}finally{t.pop()}for(const t of s)t.addEventListener("signal",e);return()=>{for(const t of s)t.removeEventListener("signal",e)}}var r={State:e,Computed:class{#s;#n;constructor(t){this.#s=new e,this.#n=n(()=>this.#s.set(t()))}get(){return this.#s.get()}unsubscribe(){this.#n()}},createSignal:s,effect:n};const o="context-request";class i{constructor(t,e,n){this.host=t,this.context=e,this.state=s(n),this.host.addController?.(this)}hostConnected(){this.host.addEventListener(o,this.onContextRequest)}hostDisconnected(){this.host.removeEventListener(o,this.onContextRequest)}set(t){this.state.set(t)}get(){return this.state.get()}set value(t){this.set(t)}get value(){return this.get()}onContextRequest=t=>{if(t.context!==this.context)return;let e;t.stopPropagation(),t.subscribe&&(e=n(()=>{const s=this.get();e&&t.callback(s,e)})),t.callback(this.get(),e)}}class c extends Event{constructor(t,e,s){super(o,{bubbles:!0,composed:!0}),this.context=t,this.callback=e,this.subscribe=s}}class a{#t;constructor(t,e,s){const{subscribe:n=!1,validate:r=()=>!0}=s||{};this.host=t,this.context=e,this.subscribe=!!n,this.validate=r,this.unsubscribe=void 0,this.host.addController?.(this)}get(){return this.#t}get value(){return this.#t}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new c(this.context,this._callback.bind(this),this.subscribe))}_callback(t,e){e&&(this.subscribe?this.unsubscribe&&(this.unsubscribe!==e&&this.unsubscribe(),this.unsubscribe=e):e()),this.validate(t)&&(this.#t=t,this.host.requestUpdate(t))}}const h=(t="")=>t.replace(/([A-Z])/g,(t,e)=>`-${e.toLowerCase()}`),l=(t="")=>t.toLowerCase().replace(/[-_]\w/g,t=>t[1].toUpperCase()),u=(...t)=>{const e=[];return t.forEach(t=>{t&&("string"==typeof t?e.push(t):"object"==typeof t&&Object.entries(t).forEach(([t,s])=>{s&&e.push(t)}))}),e.join(" ")},d=(t,e)=>{const{unit:s="px"}=e||{},n=[];for(const[e,r]of Object.entries(t??{})){if(null==r)continue;const t=Number.isFinite(r)?s:"";n.push(`${h(e)}:${r}${t}`)}return n.join(";")};let p=null;function f(t){t.adoptedStyleSheets.push(...(null===p&&(p=Array.from(document.styleSheets).map(({cssRules:t})=>{const e=new CSSStyleSheet,s=Array.from(t).map(t=>t.cssText).join(" ");return e.replaceSync(s),e})),p))}class b extends String{}const g=t=>new b(t),m={"&":"\\26 ","<":"\\3c ",">":"\\3e "},v=t=>t instanceof b?t:g((t=>t.replace(/[&<>]/g,t=>m[t]))(""+t)),y=(t,...e)=>String.raw({raw:t},...e.map(v));function w(t,e){const s={};for(const[n,r]of Object.entries(e))s[n]=t.querySelector?.(r);return s}const E=t=>{try{return JSON.parse(t)}catch{return}},S={class:"className",for:"htmlFor"};class C extends HTMLElement{_props={};#r={};#o=new Set;#i=new Set;#c=!1;static get shadowRootInit(){return{mode:"open"}}static template;static get properties(){}static observedAttributes=[];static styles="";static get useGlobalStyles(){return!1}static createSignal=s;constructor(){super();const{createSignal:t,properties:e}=this.constructor;for(const[s,{initial:n}]of Object.entries(e)){const e=Object.getOwnPropertyDescriptor(this.constructor.prototype,s);t&&(this._props[s]=t()),Object.defineProperty(this,s,{get(){return e?.get?e.get.call(this):t?this._props[s].value:this._props[s]},set(n){const r=this[s];e?.set?e.set.call(this,n):t?this._props[s].value=n:this._props[s]=n,r!==this[s]&&this.requestUpdate({[s]:n})}}),this[s]=n}}connectedCallback(){const{shadowRootInit:t,useGlobalStyles:e,template:s}=this.constructor;this.#i.forEach(t=>t.hostConnected?.()),this.renderRoot=t?this.shadowRoot??this.attachShadow(t):this,this.addTemplate(s),e&&f(this.renderRoot),this.render(),this.requestUpdate()}disconnectedCallback(){this.#o.forEach(t=>t()),this.#i.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const n=S[t]??l(t),r=this.constructor?.properties,{type:o}=r?.[n]??{},i=A(s,o);if(t.startsWith("data-")){const e=l(t.substring(5));e&&(this.dataset[e]=i)}this[n]=i}requestUpdate(t){this.#r={...this.#r,...t},!this.#c&&this.renderRoot&&(this.#c=!0,window.requestAnimationFrame(()=>{this.#c=!1;const t=this.#r;this.#r={},this.update(t)}))}addTemplate(t){if(t){if(!(t instanceof HTMLTemplateElement))throw new Error("template is not a HTMLTemplateElement");this.renderRoot.append(t.content.cloneNode(!0))}}render(){}update(t){}on(t,e,s=this){s.addEventListener(t,e),this.#o.add(()=>s.removeEventListener(t,e))}once(t,e,s=this){s.addEventListener(t,e,{once:!0})}dispose(...t){for(const e of t){if("function"!=typeof e)throw new TypeError("listener must be a function");this.#o.add(e)}}addController(t){this.#i.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.#i.delete(t)}refsBySelector(t){return w(this.renderRoot,t)}}const q=(t,e,s)=>{if(customElements.get(t))return;const{usedCssPrefix:n="",cssPrefix:r="",styles:o}=s||{};if(e.properties){const t=[];for(const[s,{attribute:n=!0}]of Object.entries(e.properties))n&&t.push(h(s));Object.defineProperty(e,"observedAttributes",{get:()=>t})}else if(e.observedAttributes){const t=e.observedAttributes.reduce((t,e)=>(t[l(e)]={},t),{});Object.defineProperty(e,"properties",{get:()=>t})}e.styles&&(e.styles=o||(n===r?e.styles:e.styles.replaceAll(`--${n}-`,r))),x(e),window.customElements.define(t,e)},x=t=>{if(!t.template||t.template instanceof HTMLTemplateElement)return;const e=document.createElement("template");e.innerHTML=t.template||"",t.template=e},A=(t,e)=>e===Boolean?null!==t:e===Number?(t=>{const e=Number(t);return isNaN(e)?0:e})(t):e===Array?E(t)??t.split(",").map(t=>t.trim()):e===Object?E(t):t,j=new class{cnt=0;cache=new Map;last=0;get size(){return this.cache.size}_inc(){return this.cnt=268435455&++this.cnt,this.cnt}clear(){this.cnt=0,this.cache.clear()}set(t){const e=Date.now();this.last<e&&this.cache.clear(),this.last=e+5e3;const s="__rc:"+this._inc().toString(36);return this.cache.set(s,t),s}get(t){const e=this.cache.get(t);return this.cache.delete(t),e}};class L extends String{}const R=t=>new L(t),T={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},O=/[&<>"']/g,_=t=>t.replace(O,t=>T[t]),N=t=>t instanceof L?t:R(_(""+t)),P="object",k="function",M=t=>{if(t instanceof L)return t;const e=typeof t;if(e===P||e===k){const e=j.set(t);return R(e)}return R(_(""+(t??"")))},D=(t,...e)=>R(String.raw({raw:t},...e.map(t=>Array.isArray(t)?t.map(M).join(""):M(t))));function H(t,e,s={}){const n={};t.innerHTML=e.toString();for(let e=0,r=t.children.length;e<r;e++)F(t.children[e],s,n);return n}const U="ref",$="[ref]";function F(t,e={},s={}){if(t.nodeType===Node.ELEMENT_NODE){const n=[],r=t.attributes;for(let o=0,i=r.length;o<i;o++){const i=r[o],c=i.name,a=c.charCodeAt(0),h=c.slice(1);let l=0;if(63===a)E(i.value)?t.setAttribute(h,""):t.removeAttribute(h),l=1;else if("..."===i.name){const e=j.get(i.value);if(e&&typeof e===P)for(const[s,n]of Object.entries(e))t[s]=n;l=1}else if(46===a)t[h]=j.get(i.value)??i.value,l=1;else if(64===a){const s=i.value,n=j.get(s);n?t.addEventListener(h,n):typeof e[s]===k&&t.addEventListener(h,e[s]),l=1}else i.name===U&&(s[i.value]=t,l=1);l&&n.push(i.name)}for(let e=0,s=n.length;e<s;e++)t.removeAttribute(n[e])}if(customElements.get(t.localName)){const e=t.querySelectorAll($);for(let t of e){const e=t.getAttribute(U);e&&!s[e]&&(s[e]=t)}return s}if(!t.children?.length)return s;for(let n of Array.from(t.children))F(n,e,s);return s}class z extends e{constructor(t,e,s){super(e,s);for(const[e,s]of Object.entries(t))this[e]=t=>this.set(s(t)(this.get()))}}export{a as ContextConsumer,i as ContextProvider,c as ContextRequestEvent,C as MiElement,r as Signal,z as Store,f as addGlobalStyles,u as classNames,A as convertType,y as css,q as define,v as escCss,N as escHtml,D as html,w as refsBySelector,H as render,F as renderAttrs,d as styleMap,g as unsafeCss,R as unsafeHtml};
+const t=[];class e extends EventTarget{#t;#e;constructor(t,e){super();const{equals:s}=e||{};this.#t=t,this.#e=s??((t,e)=>t===e)}get value(){return this.get()}set value(t){this.set(t)}get(){const e=t[t.length-1];return e&&e.add(this),this.#t}set(t){this.#e(this.#t,t)||(this.#t=t,this.dispatchEvent(new CustomEvent("signal")))}}const s=(t,s)=>t instanceof e?t:new e(t,s);function n(e){const s=new Set;t.push(s);try{e()}finally{t.pop()}for(const t of s)t.addEventListener("signal",e);return()=>{for(const t of s)t.removeEventListener("signal",e)}}var r={State:e,Computed:class{#s;#n;constructor(t){this.#s=new e,this.#n=n(()=>this.#s.set(t()))}get(){return this.#s.get()}unsubscribe(){this.#n()}},createSignal:s,effect:n};const o="context-request";class i{constructor(t,e,n){this.host=t,this.context=e,this.state=s(n),this.host.addController?.(this)}hostConnected(){this.host.addEventListener(o,this.onContextRequest)}hostDisconnected(){this.host.removeEventListener(o,this.onContextRequest)}set(t){this.state.set(t)}get(){return this.state.get()}set value(t){this.set(t)}get value(){return this.get()}onContextRequest=t=>{if(t.context!==this.context)return;let e;t.stopPropagation(),t.subscribe&&(e=n(()=>{const s=this.get();e&&t.callback(s,e)})),t.callback(this.get(),e)}}class c extends Event{constructor(t,e,s){super(o,{bubbles:!0,composed:!0}),this.context=t,this.callback=e,this.subscribe=s}}class a{#t;constructor(t,e,s){const{subscribe:n=!1,validate:r=()=>!0}=s||{};this.host=t,this.context=e,this.subscribe=!!n,this.validate=r,this.unsubscribe=void 0,this.host.addController?.(this)}get(){return this.#t}get value(){return this.#t}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0)}dispatchRequest(){this.host.dispatchEvent(new c(this.context,this._callback.bind(this),this.subscribe))}_callback(t,e){e&&(this.subscribe?this.unsubscribe&&(this.unsubscribe!==e&&this.unsubscribe(),this.unsubscribe=e):e()),this.validate(t)&&(this.#t=t,this.host.requestUpdate(t))}}const l=(t="")=>t.replace(/([A-Z])/g,(t,e)=>`-${e.toLowerCase()}`),h=(t="")=>t.toLowerCase().replace(/[-_]\w/g,t=>t[1].toUpperCase()),u=(...t)=>{const e=[];return t.forEach(t=>{t&&("string"==typeof t?e.push(t):"object"==typeof t&&Object.entries(t).forEach(([t,s])=>{s&&e.push(t)}))}),e.join(" ")},d=(t,e)=>{const{unit:s="px"}=e||{},n=[];for(const[e,r]of Object.entries(t??{})){if(null==r)continue;const t=Number.isFinite(r)?s:"";n.push(`${l(e)}:${r}${t}`)}return n.join(";")};let p=null;function f(t){t.adoptedStyleSheets.push(...(null===p&&(p=Array.from(document.styleSheets).map(({cssRules:t})=>{const e=new CSSStyleSheet,s=Array.from(t).map(t=>t.cssText).join(" ");return e.replaceSync(s),e})),p))}class b extends String{}const m=t=>new b(t),g={"&":"\\26 ","<":"\\3c ",">":"\\3e "},v=t=>t instanceof b?t:m((t=>t.replace(/[&<>]/g,t=>g[t]))(""+t)),y=(t,...e)=>String.raw({raw:t},...e.map(v));function w(t,e){const s={};for(const[n,r]of Object.entries(e))s[n]=t.querySelector?.(r);return s}const E=t=>{try{return JSON.parse(t)}catch{return}},S={class:"className",for:"htmlFor",maxlength:"maxLength",minlength:"minLength",readonly:"readOnly",colorspace:"colorSpace",tabindex:"tabIndex",accesskey:"accessKey",rowspan:"rowSpan",colspan:"colSpan",cellpadding:"cellPadding",cellspacing:"cellSpacing",contenteditable:"contentEditable",crossorigin:"crossOrigin",referrerpolicy:"referrerPolicy",usemap:"useMap",ismap:"isMap",enctype:"encType",formaction:"formAction",formenctype:"formEncType",formmethod:"formMethod",formnovalidate:"formNoValidate",formtarget:"formTarget",novalidate:"noValidate",inputmode:"inputMode",datetime:"dateTime",frameborder:"frameBorder",bgcolor:"bgColor"};class x extends HTMLElement{_props={};#r={};#o=new Set;#i=new Set;#c=!1;static get shadowRootInit(){return{mode:"open"}}static template;static get properties(){}static observedAttributes=[];static styles="";static get useGlobalStyles(){return!1}static createSignal=s;constructor(){super();const{createSignal:t,properties:e}=this.constructor;for(const[s,{initial:n}]of Object.entries(e)){const e=Object.getOwnPropertyDescriptor(this.constructor.prototype,s);t&&(this._props[s]=t()),Object.defineProperty(this,s,{get(){return e?.get?e.get.call(this):t?this._props[s].value:this._props[s]},set(n){const r=this[s];e?.set?e.set.call(this,n):t?this._props[s].value=n:this._props[s]=n,r!==this[s]&&this.requestUpdate({[s]:n})}}),this[s]=n}}connectedCallback(){const{shadowRootInit:t,useGlobalStyles:e,template:s}=this.constructor;this.#i.forEach(t=>t.hostConnected?.()),this.renderRoot=t?this.shadowRoot??this.attachShadow(t):this,this.addTemplate(s),e&&f(this.renderRoot),this.render(),this.requestUpdate()}disconnectedCallback(){this.#o.forEach(t=>t()),this.#i.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){const n=S[t]??h(t),r=this.constructor?.properties,{type:o}=r?.[n]??{},i=A(s,o);if(t.startsWith("data-")){const e=h(t.substring(5));e&&(this.dataset[e]=i)}this[n]=i}requestUpdate(t){this.#r={...this.#r,...t},!this.#c&&this.renderRoot&&(this.#c=!0,window.requestAnimationFrame(()=>{this.#c=!1;const t=this.#r;this.#r={},this.update(t)}))}addTemplate(t){if(t){if(!(t instanceof HTMLTemplateElement))throw new Error("template is not a HTMLTemplateElement");this.renderRoot.append(t.content.cloneNode(!0))}}render(){}update(t){}on(t,e,s=this){s.addEventListener(t,e),this.#o.add(()=>s.removeEventListener(t,e))}once(t,e,s=this){s.addEventListener(t,e,{once:!0})}dispose(...t){for(const e of t){if("function"!=typeof e)throw new TypeError("listener must be a function");this.#o.add(e)}}addController(t){this.#i.add(t),this.isConnected&&t.hostConnected?.()}removeController(t){this.#i.delete(t)}refsBySelector(t){return w(this.renderRoot,t)}}const C=(t,e,s)=>{if(customElements.get(t))return;const{usedCssPrefix:n="",cssPrefix:r="",styles:o}=s||{};if(e.properties){const t=[];for(const[s,{attribute:n=!0}]of Object.entries(e.properties))n&&t.push(l(s));Object.defineProperty(e,"observedAttributes",{get:()=>t})}else if(e.observedAttributes){const t=e.observedAttributes.reduce((t,e)=>(t[h(e)]={},t),{});Object.defineProperty(e,"properties",{get:()=>t})}e.styles&&(e.styles=o||(n===r?e.styles:e.styles.replaceAll(`--${n}-`,r))),q(e),window.customElements.define(t,e)},q=t=>{if(!t.template||t.template instanceof HTMLTemplateElement)return;const e=document.createElement("template");e.innerHTML=t.template||"",t.template=e},A=(t,e)=>e===Boolean?null!==t:e===Number?(t=>{const e=Number(t);return isNaN(e)?0:e})(t):e===Array?E(t)??t.split(",").map(t=>t.trim()):e===Object?E(t):t,L=new class{cnt=0;cache=new Map;last=0;get size(){return this.cache.size}_inc(){return this.cnt=268435455&++this.cnt,this.cnt}clear(){this.cnt=0,this.cache.clear()}set(t){const e=Date.now();this.last<e&&this.cache.clear(),this.last=e+5e3;const s="__rc:"+this._inc().toString(36);return this.cache.set(s,t),s}get(t){const e=this.cache.get(t);return this.cache.delete(t),e}};class T extends String{}const j=t=>new T(t),R={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},O=/[&<>"']/g,P=t=>t.replace(O,t=>R[t]),_=t=>t instanceof T?t:j(P(""+t)),N="object",M="function",k=t=>{if(t instanceof T)return t;const e=typeof t;if(e===N||e===M){const e=L.set(t);return j(e)}return j(P(""+(t??"")))},D=(t,...e)=>j(String.raw({raw:t},...e.map(t=>Array.isArray(t)?t.map(k).join(""):k(t))));function H(t,e,s={}){const n={};t.innerHTML=e.toString();for(let e=0,r=t.children.length;e<r;e++)B(t.children[e],s,n);return n}const U="ref",$="[ref]";function B(t,e={},s={}){if(t.nodeType===Node.ELEMENT_NODE){const n=[],r=t.attributes;for(let o=0,i=r.length;o<i;o++){const i=r[o],c=i.name,a=c.charCodeAt(0),l=c.slice(1);let h=0;if(63===a)E(i.value)?t.setAttribute(l,""):t.removeAttribute(l),h=1;else if("..."===i.name){const e=L.get(i.value);if(e&&typeof e===N)for(const[s,n]of Object.entries(e))t[s]=n;h=1}else if(46===a)t[l]=L.get(i.value)??i.value,h=1;else if(64===a){const s=i.value,n=L.get(s);n?t.addEventListener(l,n):typeof e[s]===M&&t.addEventListener(l,e[s]),h=1}else i.name===U&&(s[i.value]=t,h=1);h&&n.push(i.name)}for(let e=0,s=n.length;e<s;e++)t.removeAttribute(n[e])}if(customElements.get(t.localName)){const e=t.querySelectorAll($);for(let t of e){const e=t.getAttribute(U);e&&!s[e]&&(s[e]=t)}return s}if(!t.children?.length)return s;for(let n of Array.from(t.children))B(n,e,s);return s}class F extends e{constructor(t,e,s){super(e,s);for(const[e,s]of Object.entries(t))this[e]=t=>this.set(s(t)(this.get()))}}export{a as ContextConsumer,i as ContextProvider,c as ContextRequestEvent,x as MiElement,r as Signal,F as Store,f as addGlobalStyles,u as classNames,A as convertType,y as css,C as define,v as escCss,_ as escHtml,D as html,w as refsBySelector,H as render,B as renderAttrs,d as styleMap,m as unsafeCss,j as unsafeHtml};

package/dist/element.js

@@ -10,7 +10,33 @@ import { toNumber, toJson } from './utils.js';
 
 const nameMap = {
   class: 'className',
-  for: 'htmlFor'
+  for: 'htmlFor',
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  readonly: 'readOnly',
+  colorspace: 'colorSpace',
+  tabindex: 'tabIndex',
+  accesskey: 'accessKey',
+  rowspan: 'rowSpan',
+  colspan: 'colSpan',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  contenteditable: 'contentEditable',
+  crossorigin: 'crossOrigin',
+  referrerpolicy: 'referrerPolicy',
+  usemap: 'useMap',
+  ismap: 'isMap',
+  enctype: 'encType',
+  formaction: 'formAction',
+  formenctype: 'formEncType',
+  formmethod: 'formMethod',
+  formnovalidate: 'formNoValidate',
+  formtarget: 'formTarget',
+  novalidate: 'noValidate',
+  inputmode: 'inputMode',
+  datetime: 'dateTime',
+  frameborder: 'frameBorder',
+  bgcolor: 'bgColor'
 };
 
 class MiElement extends HTMLElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "Build lightweight reactive micro web-components",
   "keywords": [],
   "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-element#readme",
@@ -77,7 +77,7 @@
     "types"
   ],
   "dependencies": {
-    "mi-signal": "0.9.7"
+    "mi-signal": "0.9.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
@@ -98,7 +98,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.2",
     "vitest": "^4.1.5",
-    "mi-html": "0.9.7"
+    "mi-html": "0.9.8"
   },
   "scripts": {
     "all": "npm-run-all pretty lint test build types",

package/src/element.js

@@ -9,7 +9,42 @@ import { toNumber, toJson } from './utils.js'
  */
 const nameMap = {
   class: 'className',
-  for: 'htmlFor'
+  for: 'htmlFor',
+  // input attributes
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  readonly: 'readOnly',
+  colorspace: 'colorSpace',
+  // focus
+  tabindex: 'tabIndex',
+  accesskey: 'accessKey',
+  // table
+  rowspan: 'rowSpan',
+  colspan: 'colSpan',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  // editing
+  contenteditable: 'contentEditable',
+  // media / resource
+  crossorigin: 'crossOrigin',
+  referrerpolicy: 'referrerPolicy',
+  usemap: 'useMap',
+  ismap: 'isMap',
+  // form
+  enctype: 'encType',
+  formaction: 'formAction',
+  formenctype: 'formEncType',
+  formmethod: 'formMethod',
+  formnovalidate: 'formNoValidate',
+  formtarget: 'formTarget',
+  novalidate: 'noValidate',
+  // input
+  inputmode: 'inputMode',
+  // time
+  datetime: 'dateTime',
+  // legacy
+  frameborder: 'frameBorder',
+  bgcolor: 'bgColor'
 }
 
 /**